We Love Adobe Fireworks!
January 13, 2010 in Design Tips
Adobe Photoshop is the graphics program that many designers cut their teeth on, and it's proven itself as the end all, be all standard in the design industry. It's extremely feature rich and can handle lot of advanced graphic filters and effects. At it's core, however, Photoshop is a bitmap editor aimed at print work and photo editing (duh!), and it's honestly not the most efficient graphics program for Web design work. We switched over to Fireworks about a year and a half ago, and can say with confidence that we're never going back! Here's why.
The Properties Panel
This is an absolutely genius piece of functionality. The inspector panel hangs out at the bottom of your workspace, and depending on the object you have selected, it pulls up relevant attributes that you will likely want to edit. This includes fill and stroke color, dimensions, opacity, any filters that have been applied, as well as comprehensive type attributes if you have a text box selected. Illustrator and Photoshop, ever the specialists, relegate this information to an array of obscure panels, so you might have to visit as many as three different panels to change straightforward attributes like color, typeface and opacity on a single object.
Vectors Are A Breeze
This one is an absolute must have for any Web designer. Fireworks handles vectors in pretty much the same way as Illustrator, which is to say that creating, resizing, merging, and all other kinds of path editing functions are a snap. Making simple paths like rounded boxes and even more intricate shapes for icons is intuitive. In fact, applying a color or a gradient to a vector shape is actually easier. Unlike Illustrator, Fireworks includes opacity as part of the gradient panel, which means that you don't need to make an opacity mask to have a simple solid to transparent fade. Fireworks has another leg up on Illustrator as it supports vectors, but accurately creates a pixel preview to show you what your final bitmap document is going to look like. While Illustrator has this feature, we've found it to be unreliable, as we occasionally notice fuzzy edges (caused by a path not snapping to the nearest pixel), only to export the image and find that the edge is crisp. Fireworks has always been dead-on accurate. Of course Illustrator is the undisputed king of creating vector art for print work, but we're talking about Web here.
Slicing images in Fireworks is much simpler and more elegant than in Photoshop. Creating a slice is as simple as selecting the Slice tool and drawing a rectangle over the desired area on the canvas. If you made it too wide or narrow, no worries. Resizing a slice is handled with the generic Transform tool, which is also used to edit any other vector or bitmap object. In Photoshop, you would need to select the separate Resize Slice tool, then go about your business. Fireworks also puts all slices into a special "Web layer" of your document, which is great if you need to be able to quickly hide all slices to edit a part of your document.
Outstanding Image Optimization
When you're all done slicing a Web page and need to export the optimized image files, Fireworks has an ingenious Preview mode that allows you to see exactly how each slice will look once it has been optimized in its chosen format (JPG, PNG, etc). The convenient controls allow you to toggle between normal and Preview modes with the click of your mouse, something that you have to choose File > Save for Web & Devices and run through some options to achieve in Photoshop.
Web design is unique in that creating the source file involves a good mix of vector and bitmap elements, but the final product is always a finite bitmap. Fireworks takes the best bitmap editing features of Photoshop and combines them with the best vector editing features of Illustrator to create a hybrid development environment that really speeds up Web design workflow. We highly recommend that you give Fireworks a try. If you're not comfortable jumping right into a full design comp, try laying out your wireframes in Fireworks to get a feel for the workflow. We think you'll find that everything is much more streamlined.