New Software Spotlight: Adobe Creative Cloud for Web

Back in April of 2013, Adobe Systems announced that it was going to discontinue its line of Creative Suites and now focus on the Adobe Creative Cloud that it rolled out with its CS6 launch. Creative Cloud is a subscription-based offering providing a hub for making, sharing and delivering creative work, centered on what was once the Adobe Creative Suite software.

Membership allows users to download and install every Adobe CS6 application along with other applications such as Adobe Muse, Adobe Edge, Adobe Photoshop Lightroom, and more. Adobe Creative Cloud members will have access to application upgrades, including new CS point-product features, before they are launched as part of major CS updates, as well as inventive new products and services as they emerge.

Adobe Creative Cloud membership is US$49.99 per month, with an annual contract. A special introductory offer of US$29.99 per month for CS3, CS4, CS5 and CS5.5 individual customers is also available. You also can subscribe to individual items. If, for example, you only use Adobe Photoshop, you can license it for $19.99/month. If you want to understand what this all means to you, check out my review on Adobe Creative Cloud for Photographers where I go over some of the implications of the move to the Creative Cloud.

Here the Web tools are Adobe Dreamweaver CC, Adobe Flash Professional CC, Adobe Edge Animate CC, Adobe Edge Reflow CC, Adobe Edge Code CC, and Adobe Photoshop CC. I reviewed the changes for Photoshop CC in my review of Adobe Creative Cloud for Photographers, but since then there have been additional changes which I will cover here.

Adobe Photoshop CC

As I have said previously, while I like having the hard copy versions of previous Creative Suites, the thing that I like about the Creative Cloud is the continuous updates. This month, for example, we have the release of Photoshop 14.1. Normally this update would have been held for the next 6, 12, or 18 months until there were enough items to constitute a full release. But instead, this update was just published and those to whom this will be of the most benefit, web developers, will get it today.

So what is new with Photoshop CC?

• Real-time image asset generation means that you no longer have manually isolate and save each individual asset in your design comp. Through the use of the new Adobe Generator technology, Photoshop intelligently saves the contents of your layers and layer groups as individual asset files, all in the correct formats, with the proper scale, compression, and quality settings. Whenever you change a layer or add, change or delete a tag, Generator automatically refreshes your asset collection so that your image assets are always up to date and saving you time and effort as well.

• Adobe Edge Reflow CC connectivity provides a seamless way for Photoshop to share data so you can convert static designs into much more fluid and responsive web page layouts.

• Adobe Generator technology lets you skip the steps of copying, slicing and exporting your layers manually and instead create image assets in real time. When you add a file extension of JPG, PNG, or GIF, Photoshop will create an image asset of that layer. If you make a change to that layer, the file is immediately updated.

Adobe Dreamweaver CC

Adobe Dreamweaver CC is a web development application that is both a WYSIWYG editor that allows you to see the results of what you are developing before having to publish to your website, and a code-based editor that lets you hand code your sites as well. The goal of Dreamweaver is to provide an intuitive visual interface for making and editing standards-based websites and applications for desktops, smartphones, and tablets.

So what is new with Dreamweaver CC?

• Enhanced CCS designer tool now lets you create CSS properties and generate clean web-standard code. By using the CSS panel you can see all of the CSS in your project. You can see any properties associated with any object no matter the class object. This will allow you to modify objects much more easily and in a visual manner.

• Live Highlight gives you the ability to visualize the relationship between the applied CSS selectors and the Live View HTML elements, giving you better insight in real time.

• Live View is built on a new rendering engine which will display web content with the same kind of performance available in Google Chrome. This means more time with the code and less time having to get in and out of the browser to test your content.

• Fluid Grid Layout lets you create web designs and layouts visually and port them to different screen sizes much more easily, whether they are for the desktop or for devices.

• Sync Settings lets you log into the Creative Cloud from any computer connected to the web and sync your preferences. These include site settings, custom workspaces, and keyboard shortcuts.

• Edge Web fonts library is available and being added to on an ongoing basis. You can add fonts from within Dreamweaver and Edge tools and give your site more control yet allow your pages to load quickly.

• jQuery UI widgets can be dragged and dropped to give your site new appeal. Update your button states to enhance your mobile apps and interfaces.

Adobe Flash Professional CC

Adobe Flash CC Professional is a multimedia authoring program that can be used to create web applications, games, movies, and content for mobile phones and other embedded devices. Adobe Flash Professional CC is geared for interactive designers, web designers, graphic designers, and motion graphics designers and video editors. Flash Professional provides a comprehensive toolset for design for web, mobile, and video workflows.

So what is new with Flash Professional CC?

• 64-bit architecture rebuilt from the ground up. Flash Professional CC has been made much more modular and is capable of faster processing and better stability. It gives you the ability to manage larger files and publish faster in a more responsive timeline.

• High-definition export lets you use full high-definition video and audio when you export your content. This is true even when you are doing it from complex timelines or script-driven animations. This means no more dropped frames in your animations.

• Improved HTML publishing lets you be more creative through the newly updated Toolkit for CreateJS. This has been updated to include new functionality for buttons, hit areas, and motion curves.

• Simplified user interface provides a way to focus on your content in a much more streamlined way. Your dialog boxes and panels are more intuitive and much easier to navigate through. You can even choose a light or dark interface to work in.

• Testing and debugging via USB from your mobile devices. Same time by connecting multiple iOS and Android mobile devices through the USB port on your computer and testing them directly.

• Timeline time savers: Manage properties across multiple selected layers in the Timeline panel. You can select several objects on a layer and move them to keyframes with a single click. You can even swap bitmap images or symbols right on the stage.

• Pasteboard size is now unlimited so you can manage large backgrounds easily or use content positioned offstage.

Adobe Edge Animate CC

Adobe Edge Animate is a new tool for motion graphic artists, web designers, and web developers for creating motion and interactive projects for the new HTML5 universe. Animate can be used to create interactive banner ads, add motion to existing web content, and create content for iBooks and other devices.

So what features do you get with Edge Animate CC?

• HTML animation allows you to create HTML content with more ease and precision than before. You can add motion and new interactivity to existing websites or you can start from scratch using Photoshop CC or Illustrator CC to build your interactive site from the ground up.

• Intuitive interface lets you build your projects with precise control. By using the WebKit-based design surface, you can maintain a high level of continuity across modern browsers. You can edit keyframes, use a new Pin tool to speed up your animation process, and use symbols to create nested animation with independent timelines.

• Device independence means you can connect and reach out to viewers across a wide range of platforms including iOS, Android, and browsers like Firefox, Safari, IE9, and Chrome.

Adobe Edge Reflow CC

Adobe Edge Reflow is a new responsive design tool built on HTML and JavaScript. It is a web-based design surface such that everything that is created within it is going to render in a browser. It is designed to help you create responsive design sites that rearrange themselves for different devices. It is also geared to quickly prototype more advanced layouts on the fly.

So what features do you get with Edge Reflow CC?

• Responsive designs can be created on the fly using the visual and interactive user interface. This will not only simplify the creative process but make creating a system that will handle multiple screen sizes quick and easy.

• CSS design that gives you the ability to create remarkable designs through the native web surface using precise and intuitive controls to build your site.

• In browser (or device) preview through the integration of Edge Inspect CC. You can also extract your CSS from your project for further development in Edge Code, Dreamweaver CC or another editor.

Adobe Edge Code CC

Adobe Edge Code is a lightweight code editor made for web developers and web designers. It is built on the open source brackets project which means that it written with HTML, JavaScript, and CSS. This means that you can add your own functionality directly to the editor by creating extensions that work with Edge Code.

So what features do you get with Edge Code CC?

• Live Preview creates a seamless link between your code and the browser. This means that as you change the code the browser reflects those changes immediately when you save your changes. When you highlight elements like your CSS, it will highlight them in your browser so you can see what is affected.

• Quick Edit gives you access to all of the styles that are being applied to elements or classes within your HTML. Simply select the class, push the Quick Edit key, and an inline editor comes up showing the style being applied to that element. If there are more than one style you can toggle among them.

• Visual color selector allows you to select the exact color you want via a color selector panel. When you modify that color and move the selector around, the results show up in the browser window through live preview.

• Code completion for HTMP and CSS so that when you are typing you get a drop-down that shows code completion.

One thing to note is that Adobe Fireworks is not part of the Creative Cloud. Adobe has suspended all new development on this product although it will continue to sell Adobe Fireworks CS6 and provide security updates and perhaps bug fixes for the current version.

With this release of Flash Professional CC, the big thing is the 64-bit architecture and its performance, which is a major change. The rest of the new features are useful, but not as engaging. Again, this to me is where the concept of the Creative Cloud comes in, with its compelling ability to release new features on the fly. Just because this release did not have five or ten flash-bang item, does not mean you won’t have such items in the next six months.

The new Adobe Generator technology, Live View, and the Adobe Edge additions are just outstanding. I don’t know how many times I have had to deal with slicing and dicing and with having to hop in and out of browsers to see if my changes worked, so I know that these additions will save designers and web developers a lot of time.

When you accumulate all of this with what I highlighted in my previous coverage, the Creative Cloud is getting better and better. And so I highly recommend Adobe Creative Cloud.