Not Photoshop VS. Fireworks, Photoshop AND Fireworks

After a pretty lengthy discussion with my colleagues, all of which are developers and not graphic designers, I try and put a different spin on an old debate.

Photoshop vs. Fireworks; which one is better? Like other age old questions – chicken or the egg? – mac or pc? – blonde or brunette? – this question has been debated for years. There is certainly a preference for one or the other when presented with a choice between the two. Here are some of the highlights for Photoshop:

  • Industry standard for photo editing
  • Colorization is more exact
  • Far richer in features and functionality

A few of the highlights for Fireworks:

  • Lighter memory footprint
  • Faster and easier to work with
  • Smaller learning curve for non-graphic designers

However, by pitting Photoshop against Fireworks are many of us missing the real advantages of these tools? I believe this is a case where you should have your cake and eat it too! Use both Fireworks and Photoshop for very specific tasks and get the best of both, because in reality, these are two very different animals.

In my opinion, Photoshop should be used where it’s strength lies, and that is in photo editing. Conversely, Fireworks should be used where it shines, layout design. When you begin developing UI, webpages especially, you generally start with a rough layout, refine the layout, and then begin adding (hopefully) powerful imagery to support your content. Designing layout, where generally you employ vector-based primitive shapes, gradients, and shadowing is extremely fast and easy in Fireworks. If changes need to be made because of sizing, it’s extremely well suited. Next, open up Photoshop and begin designing that dynamite wow-factor image that you can meticulously edit, add filters, etc. Grab that image, put it back into your layout in Fireworks and utilize far friendlier slicing and image optimizing to export images out to be called in your HTML.

Can you do all of these things in Fireworks alone? Sure. Photoshop as well? Yep. However, there is a reason why Adobe has maintained both applications in parallel after they merged with Macromedia. Photoshop is well suited for graphic design of high quality, pixel based, images. Fireworks handles vectors a bit friendlier while being specifically designed for Web Designers first and foremost. If you’re not a professional graphic designer, (and if you’re reading the rest of the posts on this blog you probably aren’t), then you may really like working in both Photoshop for the fine details and Fireworks for layouts and similar mockups.

Let me demo a brief example of the process I quickly outlined. Below is the beginning layout of a website. I’ve used Fireworks to layout the logo, navigation, hoverstates, standard font selection, and the general positioning of elements on the page to get a feel for how the website will be laid out.

Fireworks Layout

Next, I used Photoshop to make changes to this photograph. I’ve added a few filters, created some transparencies on the edges of the photo, and changed the colors slightly. This is the point where a real graphic designer would go to town!

Photoshop Detail

Finally, I put it all together back in Fireworks and begin slicing images out the way I want. The images are optimized for the web and are placed into HTML or CSS-based websites.

Fireworks Slicing

I hope this gives a little bit of a different perspective on how and when to use Photoshop and Fireworks for developers. Happy designing!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s