In Adobe Creative Suite 6, as with previous versions, Adobe has added an assortment of productivity and performance enhancements and other new features. This time, many of these tools are aimed at interactive designers who want to create content for tablets and smartphones. Here’s the scoop on what’s new in Dreamweaver, Illustrator, Flash Pro and Fireworks CS6.
Responsive web design refers to websites that automatically adapt themselves to the end-user’s device, be it a smartphone, tablet or desktop PC. Enabled in large part by the media queries feature in CSS3, it’s one of the hottest trends in web design. However, coding even a standard CSS layout can be a daunting task, let alone one that reconfigures itself for different screen sizes.
Dreamweaver CS6 addresses this problem in a big way with its new Fluid Grid Layout feature, which provides a set of visual tools that let you define layouts for each device. You do by inserting Fluid Grid Layout div tags that appear as containers that you can resize and position for each layout. For example, you can stack containers so they appear in a single column on a smartphone, but position them side-by-side when viewed on a tablet or desktop computer. As you build the layout, Dreamweaver automatically generates the necessary CSS code.
Dreamweaver CS5.5 added integration with jQuery Mobile, a set of software components for building mobile applications. The new version builds on this with a new jQuery Swatches panel that lets you apply built-in interface themes—or those you’ve created yourself—to these applications. The videos above show how this works.
Also new is enhanced support for PhoneGap, a software framework that enables creation of native applications for iOS and Android devices.
Much of what’s new in Illustrator CS6 is under the hood. It’s now 64-bit native on Macs and Windows PCs, offering improved performance when running memory-intensive operations.
Adobe has also revamped the user interface. As with Photoshop CS6, it now has a default dark-gray color theme, but you can revert to the previous light-gray theme via Preferences. One difference is that whereas Photoshop is limited to four color themes, Illustrator has a slider control that lets you select any shade of gray.
But the UI changes go much deeper than that—Adobe says it’s re-designed every panel and dialog box in the program. For example, you can now edit names of layers, brushes, swatches, symbols and other items from directly within panels. Font lists now display previews of the fonts. The Transform panel now gives you the option to scale strokes and effects as you’re transforming objects. And you can now make or release opacity masks from the Transparency panel.
Beyond the UI and the improved performance, Adobe has added a handful of new features, including the ability to create gradient strokes and tools that make it much easier to create patterns.
Another big improvement is the new Image Trace panel, which replaces Live Trace for performing raster-to-vector conversion. If you use the maximum quality setting, it can be hard to distinguish the tracing from the original photograph, but you can also try different presets or tweak the simplified tracing controls to reduce the number of anchor points or colors.
However, Flash Professional isn’t just a tool for authoring SWF content—it can also create applications based on Adobe’s AIR technology, which in turn can be packaged as native iOS or Android apps. And so with Flash Professional CS6, Adobe is placing more emphasis on the program’s ability to support other formats.
For example, Flash developers can now create AIR applications that incorporate the AIR runtime, meaning that end-users can run the apps even if they haven’t installed AIR. Developers can also take advantage of “native extensions,” which provide access to device-specific hardware functions. For example, a Flash developer can now write code that causes a smartphone to vibrate when a specified event occurs in a game.
For game developers, Flash Professional now has the ability to generate sprite sheets— bit-mapped image files containing the animations and symbols used in a game.
Also new is the Simulator panel, which lets Flash developers test touch gestures and device motions they’ve incorporated into their projects. It replaces Device Central, the mobile device emulator that was also available for Photoshop and Illustrator. (Adobe is also offering an early look at a new application called Shadow that lets you preview web designs on mobile devices wirelessly connected to your computer).
Another casualty of CS6 is Flash Catalyst, a program introduced in CS5 that enabled designers without programming skills to create interactive Flash presentations. Adobe has ceased development, though company reps say it will continue to provide technical support.
Perhaps the coolest new feature in Adobe’s web graphics program Fireworks is CSS Code Extraction. You can use Fireworks to apply attributes such as gradient fills, stroke colors and rounded corners to an object. The program then generates the CSS code needed to replicate those attributes.
Also new is the ability to create and modify themes used in jQuery Mobile, making it easier to create new looks for mobile applications.
Fireworks CS6 also provides a number of productivity enhancements for working with colors, gradients and patterns.