When it comes to creating websites, professionals typically use Adobe Dreamweaver. Increasingly, though, they're starting their projects with Adobe Fireworks, the web-oriented graphics editor that's an overlooked gem in the Adobe Creative Suite family.
"Fireworks tends to be underappreciated as a professional tool," notes Jim Babbage, a Toronto-based Adobe solutions consultant. "Especially with the new features in the CS6 version, Fireworks is more relevant than ever to a modern-day workflow."
The workflow that Babbage is referring to is the one between the designer, who uses Fireworks, and the developer, who uses Dreamweaver. The responsibilities of the designer vs. the developer may be split among different groups or departments, or they may be handled by the same person.
With CS6, you can create designs with Fireworks and then translate the code from those designs directly to Dreamweaver, which makes the two programs ideal partners. The process typically begins with creating or editing vector and bitmap images onscreen using the Fireworks layout tools. Depending on the job at hand, Fireworks can then automatically generate CSS code, CSS sprites, and jQuery Mobile code for Dreamweaver to use.
With Fireworks, anyone with (or without) programming experience can visually design and create the various elements that bring a web page to life. You can then copy the code into Dreamweaver to do more extensive work. Yet even if you stay entirely within Fireworks, you can quickly design and prototype a web page (or an entire site) and circulate it for client discussion and approval.
Fireworks excels in its role as a supporting player in the site development process and in its tight integration with other products in Adobe Creative Suite 6. Downloadable extensions (from the Fireworks Exchange) can enhance your Fireworks workflow even further.
It's the rare workflow that will be restricted to just Dreamweaver and Fireworks. For web work, some say you need Photoshop to make the best use of Fireworks and you need Fireworks to make the best use of Photoshop. Fortunately, the two share many of the same design tools and other elements. In Fireworks CS6, for example, you can keep color consistent among projects by using the same color swatches among Adobe Photoshop, Adobe InDesign, Adobe Illustrator, and Fireworks.
Still, each program has its own unique strengths. "The kind of advanced designs you see on the web require lots of Photoshop filters and image editing," says Doug Winnie, a content director at Lynda.com in Carpinteria, California. "Photoshop can help you turn the basic design into something unique, make the graphics pop, and go well beyond what you can do in Fireworks alone. When you are finished, you can export the file back to Fireworks."
Since its first release in 1997, Fireworks has been designed for web use. This means that, among other things, it is engineered to produce particularly compact files, including optimized PNG, JPEG, and GIF images. In addition, Fireworks includes a handy batch-processing feature that can handle the tedious, repetitive chores that emerge in many workflows. For example, you can convert all the images used in a project to the desired format and size, or you can add a watermark to a group of files without processing each one individually.
As for web prototyping, you can use Photoshop to construct a prototype site, but Winnie estimates that it takes about twice as long as using Fireworks. "You need both tools," he says.
Thanks to CSS3, many web page design elements can be created and controlled with CSS code. Once you've designed an object onscreen, Fireworks can generate the CSS code that defines that object. All or part of that code can be copied to the Clipboard using the CSS Properties panel and then pasted into Dreamweaver (see Video 1). You can then use Dreamweaver to re-create the object.
Many design characteristics that are created in Fireworks can be quickly translated to CSS, including drop shadows, gradients, and rounded corners. "Using the CSS Properties panel speeds things up from two perspectives: you're designing visually [in Fireworks] and you're generating code quickly [for Dreamweaver]," says Babbage.
Dee Sadler, a Kansas City freelancer and Certified Adobe Instructor, adds "You can take an oddly shaped object and get it the way you want it to look in Fireworks, with one corner having a point and the others having gradients. Add a drop shadow, and in the CSS Properties panel, you can copy all or parts of the object's code and paste it into Dreamweaver. That's pretty huge."
"You can save hours by not having to code by hand in Dreamweaver, trying radius and gradient values by trial and error and wondering if you are getting it right," Sadler notes.
The new Export CSS Sprites feature is another Fireworks tool that integrates with Dreamweaver to speed up the site creation process (see Figure 1).
Sprites are multiple images combined into one graphics file. That single file downloads faster than multiple smaller files, and CSS code can arrange the composite images, or sprites, on the page. You can use CSS sprites to function as icon rollovers, to reset the states of a navigation menu, or to serve many other purposes.
"With Fireworks and Dreamweaver, you can generate a CSS document or style sheet that has the pixel locations of every single graphic built into a set of sprites," says Sadler. "You don't have to manually figure out the location of every graphic in the document. Using sprites is a much more efficient way to work."
"With Fireworks, you can customize the look and feel of your project, including the icons, colors, and designs of the different components," says Winnie. "They can be seamlessly integrated into Dreamweaver and then published as a mobile website or as a standalone phone app that you can sell through a phone app store."
You can set gradients, colors, and sprite images in a visual manner, test and preview the results in Fireworks, and then export all the CSS code to the jQuery Mobile framework.
While the workflow between the designer and the developer is important, equally important in many situations is the workflow between the designer and the client. The designer is typically asked to submit a site prototype to the client, demonstrating not only its look and feel but also its functionality inside the browser. (The designer might also want to show the prototype to third parties to gauge their reaction.)
For prototyping purposes, an often-overlooked feature in Fireworks enables you to save your work as one or more PDF files. A multipage website that has been mocked up by a designer in Fireworks can be output to PDF, with each web page in the design becoming a separate page in the PDF file. Anyone with Adobe Reader (or any PDF reader) can test-drive the project without being online. Not only will the look and feel of the pages be largely retained, but the links within the site will work as links within the PDF document.
"I can create a prototype that the team can show to potential users to gather important data from their reactions to the site," says Winnie. "I can refine the design early, before writing a single line of code, and get exact requirements without putting the developer through a lot of anguish late in the process. Plus I can test a design before committing to a full-scale project."
"The real beauty of Fireworks is all the extensions that are available for it," says Sadler. "Many people in the evangelist community can put together an extension in a day."
As for other workflow features the pros rely on, Sadler notes that Fireworks and Dreamweaver share the same grid templates, so graphics that are copied from one to the other can be pasted with precision. Other notable improvements in Fireworks CS6 include a performance boost on Windows 64-bit computers, improved refresh rates on Mac OS, and a new color picker.
When it comes to creating websites, design alone is not enough — and neither is coding. The partnership of Fireworks and Dreamweaver not only covers both design and coding, but it eases the workflow between the designer and the developer and makes the creation process more efficient.
To get started using Fireworks, check out the following resources:
Lamont Wood is an author and technology journalist who has been published in seven countries for clients such as LiveScience.com, Scientific American, Red Herring, The Chicago Tribune, Computerworld, Information Week, Omni, Byte, The Comdex Show Daily, and others. His newest book, Out of Place in Time and Space: Inventions, Beliefs, and Artistic Anomalies That Were Impossibly Ahead of Their Time, is available on Amazon.com.