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…

…layout configured with media breakpoints in Edge Reflow…

…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.

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.

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.

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:

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.

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!!

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:

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!

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.