---
title: Dear Photoshop User, Meet Fireworks!
teaser:
tags: design
author: Phil LaPier
published_on: 2011-02-28
---
**Isn't it time that we have a web design application that speeds up and
enhances our web design workflow? Well listen up Photoshop user, let me
introduce you to Adobe Fireworks**
Adobe Fireworks is a powerful tool for creating web and [screen
graphics](http://www.adobe.com/products/fireworks.html). With CSS3's incredible
ability to style page elements that look identical to the hi-fidelity mockups
that designers create these days, we should have a design tool that is as
flexible as our stylesheets. Adobe Fireworks is better aligned with the way web
designers work in preparation for front-end development.
For example, I've always questioned Adobe Photoshop's inability to quickly
adjust rounded corners without redrawing the entire shape. Shouldn't it be more
like CSS in which the designer can
quickly change the rounded corners by tweaking a pixel value? Wouldn't it be
great if we could individually define the pixel value for each rounded corner?
It would be awesome if we could define a set of styles (buttons,
buttons-effects, text shadows, font styles, etc.) to be saved and applied at any
time—similar to Sass mixins. Did you know these features are all available
in Adobe Fireworks!?
When a design mockup is complete, Photoshop's ability to edit the existing
elements within the design is far less flexible than that of Adobe Fireworks.
Adobe Photoshop saves layers and paths in a destructive bitmap-only manner,
whereas Fireworks uses full vector paths combined with true bitmap editing,
meaning you always get accurate control and preserved editing all the way down
to the pixel level.
> It is by this squaring of the circle - the combination of the best of both
> vector and bitmap - that users will truly be enabled to do the undoable. -Tom
> Arah
I'll go over a few of the stand-out features of Adobe Fireworks CS5 that really
help it excel in areas where Photoshop falls short, and also touch upon how
Adobe Fireworks can enhance the web design workflow.
## The Properties Panel
Dear Photoshop user, learn the Properties panel. The Properties panel is where
you will spend much of your time styling elements. It allows for easy
repositioning and resizing of elements to achieve pixel-perfect alignment. You
can adjust fill color and gradients, stroke weight and color, and add filter
effects (equivalent to Photoshop's Layer Style effects).
[](http://images.thoughtbot.com/ui/PropertiesPanel.png)
## Quickly Change Rounded Corners
Dear Photoshop user, learn the Auto Shape panel. The Auto Shape panel is wicked
for tweaking the corners of a rounded rectangle. It's similar to the way we work
with CSS—it gives the designer the ability to easily tweak the
corner-radius to find which size rounded corners work best with the design.
## Styles Panel
Dear Photoshop user, learn the Styles panel. The Styles panel allows you the
easily save button styles, fill & stroke styles, text styles, and filter
effects. They are easy to apply to new page elements and they can even be saved
globally for use on new projects. If you've used [Sass](http://sass-lang.com/),
think of these as mixins.
[](http://images.thoughtbot.com/ui/StylesPanel.png)
## Align Panel
Dear Photoshop user, learn the Align panel. As a Photoshop user, you are
probably used to the time-consuming process of manually aligning elements by
hand. Fireworks solves this with an awesome alignment panel (super time saver).
You can align or distribute based on the entire canvas or individual objects.
The panel even allows you to set a specific pixel amount to space objects apart
(think CSS margins).
## Extensions
Dear new Fireworks user, use extensions. Given that we're talking about how
Adobe Fireworks can improve your design workflow, there are a number of awesome
extensions that will really light the gunpowder under your ass.
* [Copy To Clipboard Command Pack](http://mattstow.com/#ccc15) - Matt Stow made
these extensions to quickly copy fill and stroke colors as either HEX or RGB
values. The pack also includes a command to copy CSS dimensions to the clipboard.
* [Commands Panel](http://johndunning.com/fireworks/about/Commands) - Pair the
above extension with John Dunning's Commands panel and you've got a quick way
to access these useful commands.
* [Guides
Panel](http://www.adobe.com/devnet/fireworks/articles/guides_panel.html) - A
must have for creating and saving the guide-based grids you use on a
project-by-project basis.
## The future to come
Adobe Fireworks has a bright future so long as development continues to focus on
being a core design application for web and screen devices—which I have no
doubt it will. Fireworks is completely extensible with Javascript as well, which
puts a lot of power in the hands of users. Eventually I would like to see simple
commands created for Fireworks to generate lines of CSS for easy pasting directly into stylesheets. Imagine how
convenient it would be if we could run a single command that would generate a
css declaration block from a screen element (e.g. background color/gradient,
height, width, rounded corners, box-shadows, inset-box-shadows, etc.) As web
designers, we should be vocal about our specific needs. We have an opportunity,
as Fireworks matures, to be vocal about shaping the product into something even
more powerful and better suited to our evolving workflows.
Are you willing to make the switch?
## Quick Resources
* [Aaron Beall's Extensions](http://fireworks.abeall.com/extensions/)
* [John Dunning's Extensions](http://johndunning.com/fireworks/)
* [Matt Stow's Extensions](http://mattstow.com/)
Illustration by Kevin Burg