The Web Designer’s Guide to Comparing Photoshop and Fireworks

Today, we’ll be taking a deeper look at the key differences between Photoshop and Fireworks and what they mean to web designers. This article is intended to be a guide for anyone trying to understand the benefits and drawbacks of each application. Our goal: to help designers to better understand their options when it comes to picking their graphics application of choice.

We posted a Reader’s Poll on this topic, so be sure to cast your own vote on that post as well!

Let’s start this off by listing off the pro’s and con’s of each program. For most designers, Fireworks is the lesser known, so we’ll start there:

The Benefits of Using Fireworks

Fireworks is a graphics application, just like Photoshop… but the “target user” of the program is much different. The main reason that people pick Fireworks is because it’s built specifically for web designers. It’s lightweight, moves fast (even on older computers), and is easier to learn than Photoshop if you’re new to either program. Because it’s made for web designers, it’s more likely to grow over time to become more suited to this industry. It also means that if you’re just starting out, you won’t be bothered with any of the complex UI or steep learning curve that you might find in Photoshop.

Here are some specific reasons you might pick Fireworks:

Master Pages (and multiple pages / states)

The Master Page feature allows you to set consistent site elements that you want to appear on each “page”. The Multiple Pages feature allows you to create as many child-pages within that same template. This is super powerful because it acts very similar to the way a real website works. In fact, the handling of Pages and States in a Fireworks file is intended to mimic the behavior of a live web-page. Some elements are fixed (like navigation, branding, backgrounds, etc.), and some elements change from one page to the next (content columns, photos, titles, etc.). Sure, you can accomplish this in Photoshop too by using Layer Groups or multiple PSD files, but the organization and UI surrounding these features in Fireworks is more natural. Handling universal changes in Fireworks is quicker because of it.

Oh, you can also detach a page from the Master if you want to create custom design elements, which makes it flexible enough to deal with even the most complex websites.

Internal Linking

Internal linking is just what it sounds like – In Fireworks, you have the ability to specify “hot spots” within your site that link to the various pages (mentioned above). You can even link to external URLs if you wish. The original idea for this was to allow designers to actually design a site in Fireworks and then “export” it as code. The jury is still out on whether the exported code is useful, but this feature is fantastic if you just want to export a file as a PDF for a client or art director to flip through quickly. This makes it easy to do rapid prototyping within Fireworks without ever needing to write a line of code.

Intelligent Style Management

Styles in Fireworks are very similar to CSS on a webpage. Each element can have a fill, stroke, font, and effect and then have it saved as a Style that can then be reused and modified the same way cascading stylesheets work. Edit the parent “style”, and all elements that are using that style are changed. This is particularly effective when dealing with multiple instances of text blocks across a site. Update one and you will update them all. Again – this is a great time saving tool.

Better Vector Tools

Photoshop offers some very rudimentary vector editing tools, but Fireworks brings a lot of the native functionality of Illustrator into their own UI. The best tool (for web designers) is probably the “rounded rectangle” – which includes control points for each corner – making it easy to quickly make changes to a rounded rectangle. You can make one corner rounded and the others not – you can change the radius as well, something that Photoshop can’t do yet.

Libraries

Symbols, styles, and vector shapes are packaged into libraries that you can re-use in other projects. This is great for designers that find themselves re-using common elements and styles. It also means that you can share your libraries with other designers – which is especially useful if you are working with large design teams where each designer needs access to the same libraries.

Better Grouping

Photoshop allows you to group elements into Layer Groups – but it’s done manually and can become tedious over time. Grouping in Fireworks is done more naturally: you simply select a handful of elements and then hit “Group”. This generally means your files will be organized a little better, and overall it saves time relative to Photoshop’s manual grouping method.

Better Gradients

Here is another instance where Fireworks simply improves upon what Photoshop has to offer. Instead of a handful of gradient tools, Fireworks includes a wide range of ways to tweak and manage gradients until they are exactly what you’re looking for.

Better Image Optimization

Photoshop has some basic “Save for Web” tools, but Fireworks expands on these in a way that’s catered towards how web designers actually work. Side by side comparisons reveal lower file sizes when saving from Fireworks, which is crucial to image-heavy websites; PNG-8 (with transparency) is fully supported too, which Photoshop doesn’t support yet!

Learn Quicker

If you’ve been using Photoshop for years, Fireworks is going to feel alien to you… but most people who haven’t used either program agree that Fireworks is a lot easier to learn. Photoshop is designed for photographers and graphic designers… which means that a lot of tools are included that web designers don’t necessarily need. The UI overload that Photoshop users are used to is reduced greatly in Fireworks, which makes it pretty simple to pick up for anyone willing to put in some extra time.

Faster Performance

What do you get when you remove all of the extra functionality that Photoshop offers? Smaller file sizes that move a LOT faster. Fireworks files (.PNG format) can contain a lot more complexity than .PSD files, but they perform better on most computers, which means less time waiting for your CPU to crunch graphics and more time spent designing.

A lot of these other features also mean that you can actually do things in Fireworks that you can’t do in Photoshop – like rapidly prototyping a website or AIR app, creating interactive PDFs, move back and forth with Flash, and quickly slice and dice a site into web-ready files.

Agencies Are Asking For It

“In a recent Society of Digital Agencies (SODA) job skills survey almost 20% of agencies are looking for FW skills.The year before the number was so small as to be negligible.” – Tom Green (from our poll post)

The Drawbacks of Using Fireworks

• The industry is still largely biased towards Photoshop. This means you’ll almost always need to know PS when you work with other designers.
• Complex Photoshop files don’t always open properly.
• Text Anti-aliasing could be improved.
• It’s missing a lot of the graphics tools that Photoshop-users are familiar with, which means that there are always going to be reasons to open up Photoshop.

The Benefits of Using Photoshop

This list is going to be smaller because we’ve already gone over the main comparison points – but here are a few more arguments for using Photoshop instead of Fireworks.

It’s the Flagship

Let’s face it, Fireworks suffers a bit of the “redheaded step child” syndrome. Only in recent versions (CS4 and CS5) has Fireworks received meaningful feature updates. While this bodes well for the future, logic would argue that Adobe is far less likely to give Fireworks more attention than Photoshop simply because Photoshop sells more times each year, for more money. Photoshop is also an older program; which means that it benefits from a longer history of user feedback. Fireworks is still growing by leaps and bounds each new version that comes out, but because Photoshop is Adobe’s flagship product in the CS suite, expect it to receive the bulk of the major upgrades in the future.

Stability

Historically, Fireworks users report more crashes and file-problems than Photoshop users (although CS5 brought a lot more stability). Photoshop has it’s fair share of problems, but it’s worth considering that you’re a bit more likely to run into headaches when dealing with Fireworks exclusively.

It’s the Industry Standard

While there is a growing demand for people who know how to use Fireworks, the demand for web designers that work with Photoshop is universal. Nearly all major web projects use Photoshop in at least some capacity, and having at least an intermediate knowledge of PS is going to be a job requirement for most web design positions where a team is involved. While your freelance clients might not care what program you work in, there’s a much better chance of being able to exchange Photoshop files with your peers than Fireworks files.

It’s What You’re Familiar With

Perhaps the strongest argument in favor of using Photoshop is that you’ve already learned it and it’s a comfortable part of your workflow. As we saw on our discussion at the Reader’s Poll, the vast majority of people who started with Photoshop have stayed with Photoshop. Why? Because it works! And like the old saying goes, “If it ain’t broke, don’t fix it”. Learning a new program takes time and money – and if you don’t have any pressing reason to start using Fireworks, there’s really no reason to make the switch right now.

There’s a Wealth of Tutorials and Resources

Let’s face it, while there are a lot of tutorials out there for Fireworks, Photoshop tutorials and resources outnumber Fireworks based content on the web by at least 10-to-1. What does this mean for you? Your likelihood of finding awesome educational tuts (like at PSDTuts!) is far greater your chances of finding the same content for Fireworks. For many, this is enough to balance out the fact that Photoshop is harder to learn.

It’s A One-Stop Shop

A designer that uses Fireworks will usually still have to use Photoshop to create any advanced graphics… but most Photoshop users don’t bother ever opening up Fireworks. Why? Because they don’t need to. All of the core functionality is right there in Photoshop. While Fireworks might have a couple features that have been “improved”, Photoshop users aren’t missing them because they never even knew they existed ;)

The Drawbacks of Using Photoshop

• Larger file sizes = slower performance.
• No native “web tools” beyond the ability to save images for the web.
• It’s more expensive – $699 for Photoshop / $299 for Fireworks. Keep in mind this isn’t just a one-time purchase – updates are more expensive as well!

Putting This All in Context

At the dawn of the internet, web designers were forced to use whatever programs they had handy to create their websites. The earliest websites began as simple things and didn’t require much in terms of graphical prowess. These web designers of yore simply made due with whatever graphic design software they had been using or trained in.

Now, however, web design is an essential part of owning just about any business. In fact, just about everyone these days knows something about designing a web page. There are free online web page programs, software designed to make web design easy, and then there are the more serious programs created for professional web designers.

As technology advances, more products have been released and the decision of which program to pick has become difficult. For those who have been in web design for a long time though, new software holds little appeal over the tried, tested and true software that you’ve been trained on. But what direction should a new web designer to go with? The fork in the road can be confusing and overwhelming without a map to follow.

The Bigger Picture

Adobe Photoshop has always been a cornerstone of the graphic design community making it a natural choice for the transition from print to web design. Adobe Photoshop and Illustrator are the programs used to train new graphic designers. A firm foundation is these two is usually required before a school will allow a student to transition into other multimedia software.

When you ask web designers what software they often use the common responses are Photoshop, Fireworks and Dreamweaver. There is no one program more popular than another since there are various reasons a designers learns what software over another. Much is said about how Adobe Photoshop and Macromedia Fireworks are the same for web designers, but this broad overview gives neither software the justice it deserves.

Now that Adobe has acquired Macromedia, it can be assumed that Fireworks will continue to resemble Photoshop even more with time and future updates. However, they will never be the same and understanding their fundamental differences will help you make a decision.

There are other web design software options (like Pixelmator for Mac, ULead, Xara, Stone, and others), but these two are the major players and the most debated.

A Deeper Look at Photoshop

First and foremost, Photoshop was designed for editing photos. This makes it the go to software for photographers and anyone who works extensively with photographs. The designers of Photoshop never intended for the software to be the main program for web designers, although it includes plenty of features to help out web designers. Photoshop is perfect for designers who do more than just web design as its cross platform / cross media capabilities make it quite versatile.

Photoshop has a reputation as well. It is the most popular and respected graphic design software available. It has become a market standard and many clients expect designers to use it. It may take some explaining if you want to submit a Fireworks .png file instead of a Photoshop .psd document.

When it comes to color management, you cannot get a better program than Photoshop. Adobe has professional colors down to a science.

Of course, no software is perfect and Photoshop is no exception. The software is large and burdensome and difficult for any computer to manage. The memory involved in running the software is large enough, but once you start working with high resolution files you can run into problems. Photoshop crashes are legendary and expect long loading times and occasional freezes, unless you have a brilliant computer to work with.

Not only that, the complicated user interface and features are daunting and intimidating. The software does so much, but for the average user most of its capabilities are buried under menus and foreign terminology. Photoshop is a difficult program to learn on one’s own, and costly and time consuming to go to an expert for help.

While Photoshop layers can be very handy and are an organized person’s dream, sometimes they can be frustrating. Especially since you cannot simply click to select document elements. Navigation through the layers is essential. This can make for an annoying learning curve and a time consuming process if you do not label your layers well.

A Deeper Look at Fireworks

Macromedia Fireworks was designed especially for web designers. The user interface is easy to use and navigate. While learning Adobe Photoshop can be a long and frustrating process, picking up Fireworks takes hardly any time at all. The software is more intuitive than Photoshop, and more flexible to use.

Fireworks was created to get the most out of file size since web pages cannot handle the larger graphics that Photoshop was built for. This can save time in changing file size and resolution properties during design.

While Fireworks will never be as good at editing photos as Photoshop, it does have its own photo optimization capabilities. These work just fine for many a web designer.

Another big difference in the two programs is that a web designer is creating more than one page at a time. In Photoshop you typically focus on one page at a time. With Fireworks, you can design multiple pages at once, each with multiple layers. It doesn’t take as much memory to work multiple pages as it would in Photoshop either.

Designers like the fact that Fireworks is capable of working with both photos and vector images. This is like using Photoshop and Illustrator at the same time. Besides the price tag on Fireworks is much more appealing than that of Photoshop.

Fireworks has its share of crashes and bugs like any other program, but Adobe has stated it plans to address these issues with future updates now that it has taken over Macromedia.

Why Not Use Both?

I was hoping you’d ask! In a perfect world, it would make sense to wireframe a site in Fireworks, move to Photoshop for advanced detailing, and then use Fireworks to compose the site and export it for the web… in practice though, this doesn’t quite work. Lots of people choose to do this for specific elements (like saving background images from Fireworks to reduce file size), but too often .PSD files won’t open perfectly in Fireworks. Layer groups get mixed up, layer styles get erased, and frustration ensues. I can recommend using Fireworks on a case-by-case basis (esp to use the PNG8 and save-for-web improvements), but don’t expect the dual-program system to become a reliable part of your own workflow until Adobe can resolve these cross-program issues.

With that said, we’ve heard from at least a couple designers at our Reader’s Poll post that use both programs side by side, so it really comes down to your own workflow preferences.

The Bottom Line

If you are already well trained in either Photoshop or Fireworks, it is probably best to continue using that program for your needs.

In an ideal world, web designers would have the time, money and energy to learn both pieces of software and use them for their strengths and disregard their weaknesses. Of course, even if you have the money to invest in dual programs – you probably don’t have the time to spend getting familiar with how each of them work.

If you are already well trained in either Photoshop or Fireworks, it is probably best to continue using that program for your needs. If you are a beginner and trying to decide which one is best to start with, Fireworks is easier to use and learn but Photoshop will help you become a better all around designer than if you limit yourself to just Fireworks.

Personal priorities, goals and limitations will certainly factor into your final decision. Having a lot of patience and downtime would certainly help if you want to master all the amazing options Photoshop has to offer. If you want to get started quickly and don’t want to waste time becoming familiar with the process, then Fireworks is your best bet.

In the web design world, either program is commonly used and you won’t be faulted for choosing one over another. There are plenty of free tutorials available online for both of these programs as well as training books and classes.

In the web design industry, you will find designers who swear by Photoshop and others who swear by Fireworks. Listen to their pros and cons, but ultimately the decision is up to you. There is no overwhelming evidence that one program is better than another, just works differently for various users and talents.

About the Author(s)

Brandon Jones (the site editor for Webdesigntuts+) wrote the introduction and “comparison points” section of this article. Greg Bates contributed by writing the additional background information for each program as well as providing the industry research.

Greg Bates is a Sophmore at CSULB and currently majoring in Information Systems but also takes classes on the side for web and graphic design. He is a writer for an online magazine StyleCeo which deals with fashion. He also builds websites from scratch for different online businesses and corporations. In his spare time, he enjoys sports, being with his girl, or just doing some freelance work. If you like his work and you’d like for him to work as a freelancer for you, you can contact him at http://twitter.com/TheAllureIs_.

We’ll be highlighting some of the lesser known features of Fireworks over the next month, so Subscribe (at the top of the site) to get notified of when the new tutorials and screencasts get published!

Continue the Discussion

We’ve already had nearly 100 great comments at the Reader’s Poll post, but if you have any comments, suggestions, or questions, post them here as well! The great part about an article like this is that it can bring together other web designers to share their own experiences and workflows… so how do you use these programs?