What’s New in Adobe CC

creative cloud logo

Adobe’s Creative Cloud represents a fundamental change to the way the industry leader will be distributing its products. Creative Suite has been a mainstay for creative professionals for years and we have all become used to the linear version releases, but now it’s official: there will be no CS7.

The next generation of Adobe applications will follow the principles of ‘software as a service’. Creative Cloud is to be charged via a monthly subscription which gives you constant access to all 26 programs and toolkits. You can then pick and choose the applications you wish to download and install, and receive updates and new features as they are rolled-out, instead of having to wait for the next CS release as before. It is like a car company adding features to the car while you are driving it, rather than making you wait for the next year’s model. Essentially you now pay for the ongoing services of Adobe in their development of the applications. You can still use the programs offline, but you do need to connect to the internet at least once a month so the programs can verify that your subscription is valid.

It is a big change, but a necessary one. In just the last few years we have seen the explosion of enormous brand-new markets centering around mobile devices. Creative Cloud gives Adobe’s software the ability to evolve at the same aggressively fast rate as the industry; to react more quickly and give designers what they need when they need it.

This is a fairly drastic modernization of Adobe’s business model and we have been hearing a few recurring questions from our students about the transition. In particular the new subscription types take some explaining:

If you have never purchased CS3 or later, full Creative Cloud subscription is $49.99/month. If you are an existing customer (own a valid serial), the first year is $29.99/month, and for teachers and students signing up before June 25th 2013, the first year is $19.99/month. These individual plans come with 20GB of Cloud storage and are a 12 month commitment.

For businesses, it is $69.99 per team member per month, which includes 100GB Cloud storage and extended one-on-one support. And again, if you already have a CS3 or later serial, the first year is $39.99.

The services provided are intended to go beyond mere software. With Cloud storage, enhanced file syncing through CC Connection, and other tools emphasizing live collaboration, Creative Cloud is recognizing the increasing mobility of todays creative professionals. It addresses the growing need we have for access to all of our resources from whatever location we’re at, and whatever device we’re on.

Part of this modernization is the introduction of web services like Behance, hailed in this year’s MAX Keynote presentations as “the ultimate creative ecosystem”, it serves as online space for creatives to showcase their work in a format reminiscent of Pinterest, but with the self-promoting elements of LinkedIn. You can even share unfinished projects directly from the program you’re using and receive live feedback from the creative community – coined ‘the credible mass’.

CC also seems to have a theme of creating synergistic workflows between several existing programs. Below is a rough example of a comp started in Photoshop, made responsive in Edge Reflow, and tested in Edge Inspect to make the design compatible on multiple devices:

Comp made in Photoshop...

Comp made in Photoshop…

...layout configured with media breakpoints in Edge Reflow...

…layout configured with media breakpoints in Edge Reflow…

...and tested in Edge Inspect on my smartphone.

…and tested in Edge Inspect on my smartphone.

Essentially the vision is for there to be an always-accessible, swirling cloud of resources, support and inspiration from the creative community above our heads, and an equally collaborative and intuitive suite of programs under our noses; signaling a new-age for the creative design process.

Judging by the reviews on the Creative Cloud site, this transition will be a hectic time for Adobe’s customer service staff. The drastic changes to the pricing structure may have alienated more casual users, and the option of a single program subscription for $19.99 per month does little to appease them. But amongst those with higher levels of usage at least, the benefits outweigh the apparent cost commitment and CC seems generally well-received.

Ascend’s scheduled classes will start being taught in CC 30 days after the official release from Adobe on June 17th.

Converting Flash animation to HTML5 using CreateJS

2e19351a9c80281d002b10b09461d277An animation today needs to be independent of the hardware it is sitting on. This is the only way developers can realistically roll their work out across the entire multitude of devices that are out there. With the continuous evolution of Web Standards and the power of today’s coding libraries; what can be achieved within the constraints of a web browser alone has become increasingly impressive. As a result, many developers are looking to convert existing Flash elements into pure, stand-alone HTML5 code.

To help with this transition, Adobe has been backing a new set of tools known as CreateJS.

CreateJS is a collection of prewritten code libraries geared up to make it easy for those who are used to working in Flash, to create in languages like HTML5 or Javascript. The tools let you export the HTML and Javascript code that manages the preloading of graphics, sound, and animation in a Flash animation. This way you can take Flash assets and convert them to work in an HTML5 canvas. There is even an extension toolkit for Flash Pro’s developer tools which allows users to work entirely in Flash and then export to HTML or Javascript.

It is far from perfect at this stage, but it does allow the conversion of vector, bitmaps, classic tweens and sound to HTML5. However more complex animations are not yet accommodated by CreateJS, so keep an eye on their updates for shape tween, mask and blends support, among other things.

 

Adobe Edge Reflow: Adapting with ‘Responsive Web Design’

We live in an age of screens. You are looking at one right now, and so am I. In our modern lives we are constantly staring at screens of various sizes, and as the diversity of resolutions and aspect ratios has grown over time, so has pressure on web developers to adapt their designs to the changing demands of the end-user.

The first reaction of many developers to having to cater to different screen sizes has been to create multiple static comps for the same project. But the drawbacks of this approach quickly become apparent when you imagine trying to design 4 or 5 versions of the same website, while trying to keep the design clean, functional and aesthetically consistent. You would then have to update each one separately every time the client makes a change. This could rapidly turn into a time-consuming nightmare.

So the need for intuitive designs that can automatically adapt to different screen widths can no longer be ignored. We coined this philosophy ‘Responsive Web Design‘ but until now developers have mostly been forced to either try and repurpose their existing tools to find work-arounds they were not designed for, or work directly in code  - which despite being accurate and clean, can hinder the artistic spontaneity that can be so important to the design process.

The newest addition to Creative Cloud, Edge Reflow, allows you to simultaneously design for different screen sizes using a visual workspace to set media breakpoints and is one of the only tools specifically designed with Responsive Web Design in mind.

Screen Shot 2013-03-14 at 11.14.47 AM

Screen Shot 2013-03-14 at 12.07.10 PM

 

As content is added, resized, edited and moved around on the canvas visually, Reflow translates these changes into CSS script in real-time in the background. This gives you the choice of working either visually, using the canvas to create a layout as you would in Illustrator or InDesign, or by editing CSS values in the context-sensitive side panel to alter the individual attributes of an object:

 

Ever-present at the top of your canvas is the media breakpoint bar. This is where you set color-coded breakpoints for each screen size:Screen Shot 2013-03-15 at 12.59.14 PM

Once you have settled on a layout for one, clicking on the next breakpoint causes the page’s content to manouevre automatically to try and fit within the new width. You can then tweak the layout, replace or remove objects and reformat text until you are happy, and then move onto the next breakpoint.

Screen Shot 2013-03-15 at 1.15.39 PM

Reflow is very clever in its use of color-coding for content-specific attributes in the side-pane. When an object is selected, the backgrounds of related attributes change to match the color assigned to the layout in the breakpoint bar. This allows you to quickly see if a value is specific to the breakpoint you are looking at, or if it was originally set on another.

The beta still lacks the ability to choose your own colors for these labels, and although the CSS code Reflow writes as you design is very clean and uses a full array of CSS formatting controls, it does not yet allow you to name layers or text styles.

There are of course other flaws that will hopefully be addressed once the beta has been picked apart and the full version is released, but there is also some very nice extended functionality potential in Reflow being used as part of the Edge suite. Such as being able to preview your design on different devices in real-time using Edge Inspection, and the possibility of incorporating assets created in Edge Animate.

We are looking forward to the full release. It should tide us over until they come up with round screens, or say, 3D websites… and when that day comes, may the God of Responsive Web Design have mercy on us all!!

Photoshop CS6 at your fingertips

Being a designer means working to deadlines – which means time is always of the essence. Working quickly and efficiently within Photoshop is essential and there comes a point when your poor mouse just can’t scurry around the screen fast enough to keep up.

Adobe have always included keyboard shortcuts to reduce the little guy’s workload, but one issue with these is that they have been tweaked and moved around over the years, and it can be a little irritating to have to go against muscle memory, established over countless hours of working, to learn the new shortcut for something you have always used. My fingers still seem to be reminiscing about the good ol’ days of Photoshop 7: holding down cmd+Z to start the ‘undo’ time machine. I still forget to press shift every time!

Another, less trivial drawback has been that shortcuts have never taken into account that a tool as incredibly diverse as Photoshop allows (nay, encourages) us to pursue our desired results in a plethora of different ways. We all have our favorite tools and no two users work exactly the same way – so why do we all have to use the same shortcuts? If I constantly use smart objects, then I’m going to want my keyboard to be littered with ergonomically friendly shortcuts for adding and editing them. Someone else may never use smart objects and would make better use of those same convenient keys for, say, zooming controls.

Well, CS6′s answer to the problems with shortcuts was to give us another shortcut:

cmd+opt+shift+K

(ctrl+alt+shift+K in Windows)

…which opens the new keyboard shortcuts customization menu:

Photoshop CS6 Keyboard Shortcuts Customization Menu

This new feature for CS6 allows you to optimize your shortcuts for exactly the way you like to work. You can overwrite default shortcuts that you may have a grudge against, bring back retro shortcuts that your fingers still try to use, or you can introduce entirely new ones to save yourself even more time.

Through this menu you are able to edit shortcuts for menu commands, tools, and palette menus. More than one key command can be assigned to one action, and Photoshop will tell you if you have any conflicting commands and show you the duplicates so you can fix them.

One very useful feature, especially if you often use Photoshop on multiple computers, is the ability to save your configurations and export them as a handy .kys file. Being able to save means that our preferences can now survive version updates and the obsessives amongst us can now gradually build our dream set of optimal shortcuts (some dreams are cooler than others) and keep them forever!

Quick Tip: Using Dreamweaver for your CMS Development with Drupal, WordPress, Joomla, etc

Drupal, WP and Joomla icons next to each other

Are you looking to do some theming or plugin development for a common CMS (Content Management Systems) such as Drupal, WordPress or Joomla? If that’s the case, then this tip may be useful for you. Dreamweaver CS6 has a neat option to provide code hinting for common CMS’. Start by setting up your server and local environments in the Manage Sites panel then open up one of the PHP scripts for whatever CMS you may be using. Once you have a document open, go up to the Sites menu once again and find the item “Site Specific Code Hints”. A window will come up, but as long as it is a common CMS, Dreamweaver should automatically recognize which CMS it is, so all you should have to do is click OK. After you have done this, Dreamweaver will add a config file to your local site and from then on out you will have code hinting for your custom web development with your CMS of choice.

Text Formatting in Photoshop CS6

Type styles in Photoshop CS6 enable us to have far more control over text, similar to Adobe InDesign. In the past, global changes to text were just not possible. In Photoshop CS6, we can now define styles for both paragraphs and characters. Normally Paragraph styles are most used, with Character styles used within paragraphs for special emphasis.

In addition, you can change several type layers at the same time by selecting all of them and making the change, and even insert a Lorem Ipsum text.

  • Character Styles: Defines attributes derived from the Character panel such as font size, kerning, leading.
  • Paragraph Styles: Control both character and paragraph attributes including alignment, spacing, indents.

We now have InDesign style formatting in Photoshop CS6.

 

A New Way to Debug your Website on Many Devices

Adobe Shadow Icon

 

Adobe has just released a public beta for yet another useful application for web development. The current title is Adobe shadow. Now I haven’t had much time to play around with it as of yet, but I’ll provide the run down.

 

What Adobe Shadow is used for is previewing your website on not only your browser, but also any mobile devices you can find. The application has two pieces: the application itself, which can be downloaded as a beta currently at Adobe Labs; and second is a Google Chrome extension. This means you will need to use Google Chrome currently when debugging your website, but if you aren’t already using Chrome, you should be. It is in my opinion the best browser and is also rated as the most secure browser.

 

Once you have installed both pieces, you then register all of your mobile devices. iPhones, iPads, and Android devices are currently supported. After the setup you can view and debug your website simultaneously on your computer and all your devices. This is great to not only see how your site works on all of your testing devices but also debugging your Javascript and other code that exists on your website.

 

This will work great testing your HTML 5 and jQuery applications and will also be quite powerful in conjunction with Dreamweaver CS5.5 and it’s mobile support.

Adobe Ends Creative Suite Subscriptions

With the upcoming Creative Cloud, Adobe has eliminated their subscription service for the Creative Suite. The Creative Cloud will include access to all Creative Suite applications and also the new Touch Apps. It also will include file sharing and online storage.

The cost will be $49.99 per month. Adobe is still making subscriptions to individual applications, but the wave of the future is using the new Creative Cloud.