July 20, 2012, 10:12 PM — Adobe Fireworksa curious combination of Photoshop and Illustrator that is specifically dedicated to Web designis one of the more specialized apps in Adobe's Creative Suite. As a companion product to Dreamweaver, Fireworks allows designers to create Web mockups, slice files for export, and pass along assets to developers. To that end, Fireworks CS6 rolls in enhancements that help ease the exchange between designers and developers.
Master of mockups
Fireworks' set of bitmap tools allow you to construct mockups pixel-by-pixel, while the program's vector tools let you quickly lay down boxes, backgrounds, and other resizable shapes. You can create multiple pages within a single document for different versions of the same basic design; for example, one page might contain a mockup of the home page and while another hosts the standard content page. Completed mockups can be sliced for export, and you can assign slice behaviors (a rollover, for example) to be compatible with Dreamweaver.
Fireworks CS6 includes some minor usability improvements, including opacity controls for fills and strokes, an enhanced color picker that displays hex values, and the ability to specify the angle of a gradient. Additionally, the symbol library now includes interface elements from smart phones to help designers quickly mock up mobile websites. New items include gesture icons, keyboards, and hardware frames.
Enhanced CSS functionality
A typical workflow might have a designer creating Web mockups in Fireworks, and then passing them to a Web developer for coding. The developer then has to deconstruct the mockups, making judgments about what visual elements can be achieved via Cascading Style Sheets (CSS3), a coding language that is increasingly used to describe not just the look and layout of text, but the appearance of graphical elements such as buttons, backgrounds, and shadows.