Fireworks vs. Photoshop

October 6, 2009

Fireworks vs. Photoshop

Couple of years back when I started web designing after college I used photoshop as most designers do. I worked hard to learn everything about photoshop through video tutorials, blogs etc. Few months later I came to know about fireworks. I used it and it was easier to use than photoshop, plus it is designed for Web designers for prototyping and creating website/UI mockups.

According to Adobe

Adobe Photoshop CS4

Adobe Photoshop CS4 delivers features for working with 3D imagery, motion-based content, and advanced image analysis.

Adobe Fireworks CS4

Rapidly prototype websites and application interfaces with Adobe Fireworks CS4 software. Create and optimize images for the web more quickly and accurately than ever before with an enhanced toolset.

I think Adobe clearly explains their idea behind these programs. One is for images and other is for web. Now we have to decide what we want to work on. Images or Web. Photoshop or Fireworks.

Just be careful about choosing your program because it’s difficult to switch later on. However I made early switch – after using photoshop for 6 months I switched to fireworks.

Depends upon your style

Fireworks or Photoshop? I would say, it depends. If you are a serious web designer, go for Fireworks. If you are graphics designer, Photoshop is the best. Photoshop is all about graphics and photos. Fireworks is about web and UI design.

Your style matters while choosing one of these programs. For more complex and fancy graphics people prefer photoshop. While fireworks let you do the job easily and quickly, and gives you time to concentrate on other more important parts of web design i.e. typography, markup, CSS and usability.

Good web design is not about just stunning graphics rather its more about effective and ease to use interfaces.

Fireworks is easy to use and learn

Fireworks has every essential feature to create simple, clean and impressive mockups in short time. Properties window is a big plus. It helps you to move your graphics and design elements easily and quickly. While photoshop can take you further and let you spend more time trying with fancy filters and image manipulations.

Why I use Fireworks for Web designing?

Being a web designer I’ve used both firworks and photoshop. I found fireworks better for web designing. However for working on images and graphics I launch photoshop.

Some features of fireworks which sets it apart from photoshop as a web designer’s tool:

  1. Pages: This is great feature for managing various different pages in single png file. It also offers master page, incase we have some elements that we want to be common across all of our pages, can be put into master page.
  2. Symbols: Fireworks helps us to create any Re-usable graphic element as a symbol. Means we can create it once and use it again and again. Andy Clarke wrote a post about how he uses fireworks symbols.
  3. Optimize: A powerful feature for exporting images for Web. Fireworks offers superior file compression than photoshop.
  4. Web layer: There is a separate web layer on top of other layers where our custom slices are marked. Unlike photoshop one can show/hide our slices and export them with single click.
  5. Common Library: It offers some basic and most commonly used form elements which helps in fast and accurate prototyping.
  6. Properties: Property window has clear advantage. Whenever we select any element, property window shows all relevant properties which we can easily manipulate.
  7. Hotspot Tool: This tool helps to immitate actual link movements or actions. What will happen when you click on certain link or button.

Beyond Fireworks and Photoshop

If you are seriously aiming to design some good, useful websites think more about learning better markup, CSS, grids, typography, usability and accessibility. You want to become a great web designer, right!

For the web designers who are more concerned about Web standards, CSS, grids, typography and like to make every pixel perfect. A design program is just the start and not the end.

8 Comments

Add your comment


  • # Jake Lee
    says on October 22

    Hey cheers for the article!

    I’ve never used Fireworks before and have stuck with Photoshop and Illustrator for years. I’ve recently installed Fireworks as i’m seeing more and more tutorials to do with it so i thought i’d see what all the fuss is about.

    Will let you know how it goes!


  • # Amrinder
    says on October 22

    @Jake

    Fireworks is easy to learn and use. Just like you, I also installed Fireworks as a tryout but never returned to Photoshop.

    I’ll be posting more about Fireworks, typography, grids and design in coming days. Keep in touch.


  • # J Taylor
    says on October 22

    I’m with you Amrinder. I’m a proud Fireworks supporter as my main solution for designing websites. I do utilize Photoshop and Illustrator when necessary for components to go into the websites as its important to be able to utilize the tools that best fit parts of a project. Working in both raster and vector is my favorite part of Fireworks. I can draw shapes, get pixel perfect corners and edges easier than in PS, use live gradients in CS4, and create a dynamic layout quickly. However, my biggest complaint with the program is how often it crashes. The program has its quirks but I highly recommend web designers give it a shot!


  • # Adam
    says on October 24

    I learned both Photoshop and Fireworks in college. After using both for a while, Photoshop seemed more powerful and easier to use. In Fireworks, I always had a hard time with optimizing images for the web. They always seemed to be larger in file size. Personally, I prefer Photoshop. I have CS3, but I don’t have Fireworks. Do I need to have CS4 to get Fireworks? Thanks for the article!


  • # Jake Lee
    says on October 24

    Hey Adam

    CS3 comes with a version of Fireworks which is what i’ve just installed.


  • # Amrinder
    says on October 24

    @Taylor:

    I think you are getting best out of Adobe Creative Suite and have clear understanding of each of them. I completely agree with you but sometime we have to live with these issues. Hope Adobe is listening to their users.

    @Adam:
    As I’ve written its one’s personal choice and comfort. Fireworks is included in all Adobe CS versions. You need to check the setup and install fireworks.


  • # Andre
    says on October 27

    Hi Adam,

    i will say you that i like Fireworks! It’s easy to use and that’s the point. Fast use, nice results. But Photoshop is nice tool too 🙂


  • # Ferenc Varga
    says on September 19

    You are right. Fireworks is easier to use. Often photoshop is rated for graphic designers and fireworks is for the web. But but….there is a problem here. The problem is the medieval interface photoshop possesses. It is beyond really bad. Usability engineers are sleeping on the job.

    FV