Photoshop vs Fireworks

In: Interviews

By Nathan Smith

Published on July 22, 2008

Photoshop. Fireworks. If you’re a serious web designer (and not using the GIMP) you’re going to be using one or the other. But which is best?

I recently had the opportunity to talk to eight talented web designers about the applications that are crucial to their work. Half use Photoshop, while the other four prefer Fireworks. In the past, such questioning might have been akin to debating PC vs Mac but, since the Adobe acquisition of Macromedia, it is now less about brand loyalty and more about efficiency.

First let’s meet the teams. In the Photoshop camp:

• Anton Peck is a respected illustrator and designer;
• Jared Christensen is a renowned designer working at Viewzi, whose recent identity work graces the Next Update and Sifter branding;
• Jenna Marino is a freelance designer, previously worked on the AIM.com team and
• Travis Isaacs is a Texas-based designer at Viewzi.

And in the opposing corner, the Fireworks fanatics:

• Chuck Mallott is Interaction Design Lead at the Rosetta Stone language learning site;
• Hugh Griffith is a senior UI designer at Albertsons, and also designed the Tattered Fly blog;
• Pete Lambert is a British designer whose best work is always under NDA; and
• Patrick Haney is not a sausage. He is however, a UI designer at Harvard.

How would you convince someone to use or not use either Photoshop or Fireworks?

Patrick Haney: Honestly, think about it. Photoshop. It’s for photos. If you’re a photographer, or you’re mostly working with photos, stick with Photoshop. But if you’re a web designer, why not stick with something built more for you than for someone doing similar yet different work? The built-in image optimization features in Fireworks are easy to use and great for quick, quality exports for the web. And with all those complaints I keep seeing over Twitter about Photoshop crashing, I’d like to think Fireworks has an advantage without even considering the features involved.

Anton Peck: I’d say it depends. If someone is getting into web design specifically, I’d point them toward Fireworks and say “skip Photoshop”. But—and this is a crucial point—if they’re considering a choice that could involve graphics from many facets of technology, from many sources, I’d definitely tell them to go with Photoshop, as it’s an established standard that will provide a stronger cross-industry experience in their career. When it comes to editing graphics of all kinds, Fireworks just isn’t as mandatory as Photoshop, in my opinion.

Hugh Griffith: And it depends on their experience level, since both tools can accomplish the same thing. If someone is really capable, and comfortable, working in Photoshop, then stick with it. To someone new to the industry I’d urge them to consider Fireworks—I believe that Photoshop is a tool targeted to photographers, that has some web design features, while FW has been targeted at web designers from the beginning.

Chuck Mallott: Yes, use Fireworks if you are creating graphics for the web or if you’re looking for a vector-based alternative to Illustrator. Do not use Fireworks if you’re trying to do any type of advanced photo editing, which is best saved for Photoshop.

Travis Isaacs: I recently recommended Fireworks to a developer friend of mine and he loved it. He’s mostly creating UI elements, not making textures or editing photos so Photoshop would have been overkill. But personally at this point I’m so comfortable in Photoshop that switching to Fireworks would kill my productivity, despite the fact that it’s specialized for the task.

Jared Christensen: As an argument for Photoshop, I would say that it is the graphics software that has always catered to the pixel. All of our displays (currently) are pixel-based, and I feel very comfortable working with pixels. To me, the Fireworks interface has always seemed clunky. Adobe seems to be bringing the interface in line with those used in Photoshop, Illustrator, et al, so that may appeal to me at some point. While I like the idea of Fireworks—mixing bitmap and vector into one glorious app—it just has this generally undeveloped, mixed-up feeling that I haven’t pushed past to become really interested in using it.

Jenna Marino: For me its hard to find a situation where Photoshop has not had the ideal solution for any design problem, print or web, design to design. It has jumped leaps and bounds past any other core design programs on the market today. Fireworks is like designing with just pencils; no pens, no pastels, no acrylics, no Crayolas. You’re given a distinct set of tools, now make pretty websites. I think its limiting the potential of the design. To me, Photoshop is design beyond medium.

Pete Lambert: At the end of the day, the decision which graphics application to swear allegiance to is not one that can be made simply by recommendation. You need to try a variety of programs, and go for one that best suits your design style and technique. If you’re into graphic heavy, textured and artistic web design, Photoshop might be more suitable for you—and if you like spending all your time naming and ordering layers, definitely go for Photoshop! Fireworks, for me, is just more comfortable. When you want it to do something, it does pretty much what you expect and soon becomes very intuitive.

So what is your favorite graphics application, and what led you to that decision?

JC: That’s what we’re here for, right? To get all Ann Coulter on Fireworks? Well, my preferred graphics app is Photoshop. I started using it in college and have been using it ever since. Honestly, I’ve really just stuck to what I know. For a long time, Photoshop was the only viable tool for producing web graphics—even though that was never its original purpose. It sort of accidentally filled this niche it was not intended for, but it’s gone on to support its users’ activities pretty well.

AP: My favorite graphics application is Photoshop too, which is probably not a surprise to anyone who’s seen my work. I’ve grown old with that electric cat and know its idiosyncrasies better than anything else in my arsenal. I use it primarily because I absolutely love texture and pixel-level detail. If I don’t like how something appears in my document, I know the quickest way to alter it. My muscle-memory has led me to develop a nice efficiency with the program.

TI: Yup, Photoshop, hands down. I’ve tried dozens of other packages—Paint Shop Pro, Corel Draw, Xara, and Gimp—all were great, but I always came back to Photoshop. Nothing I tried was as robust.

HG: Fireworks for me. I first learned version 3 back in ‘99, and I was thrilled at how it was essentially Photoshop and Illustrator merged into one program. Not only did it speed up my workflow, but at the time it had a lot of tools and features that Photoshop didn’t yet have. I was hooked, and have used it exclusively ever since.

CM: As a newbie web designer in 2000, I was fascinated with creating cool graphics for my web projects. After toiling for a couple months with the free program that comes with FrontPage 98, I discovered Fireworks. A coworker had a friend that was a designer and he passed along some software that he “didn’t need, because he already had Photoshop”. So I had my very own copy of Fireworks 3; I even got the book to go with it, and I immediately started consuming the chapters in the book and trying out the tutorials it referenced online. After a few weeks, Fireworks and I were inseparable workmates and we continue to be to this day. Over the years I have tried to switch to Photoshop because it is so popular among my design friends. There have been a few times that I was forced to use Photoshop for a period of time and, while I was able to get by, I feel much more comfortable working with Fireworks. I feel like I can work faster and more efficiently.

PL: For me it has to be Fireworks. I started off in Photoshop, years back and I still break it out once in a while for photography work, but when I discovered Fireworks it answered all the questions I’d ever had about Photoshop. For UI design it’s just so much easier to use, and for me doesn’t lack any of the functionality I would have used in Photoshop.

JM: Photoshop has won my loyalty for its years of innovation and depth of details. It now works in vector, in rasterized images of 2 colors to millions, with DPI’s beyond 72 and with all things image related. When it comes to design, this is where the magic happens.

PH: I’ve been using Fireworks for quite some time now, regardless of the fact that most of my friends and colleagues stick with Photoshop and Illustrator. When I started using it, Photoshop didn’t have vector tools, which meant using both Photoshop and Illustrator to get the best of both worlds. I also felt like the features for exporting images for the web in Fireworks were more in tune with getting the most out of quality and file size, while Photoshop was meant for more high quality, high resolution imagery and less about the optimization of your design elements for the web.

What is the most frustrating thing for you in either Photoshop or Fireworks? How could things be improved?

AP: I’ll start with Photoshop because I love it enough to be honest. Many of its finest features are buried underneath an over-complicated UI, or just not obvious enough for novice users. Also, it doesn’t seem set-up well enough to manage memory “out of the box”. Many of the issues I know people are having can be resolved with just a little custom tweaking. As for Fireworks, I can’t put my finger on it, but the UI feels very alien to me. I’d like to be able to click and drag a selection for multiple objects without having to accidentally keep moving things around on my page. I also wish that, when Fireworks is in full-screen mode, I could pan the edge of the document past the boundaries of my window. Otherwise, if I just knew how to quickly create the same level of work that I do in Photoshop, especially my textures, it might have a stronger chance with me.

HG: In Photoshop it’s that I can’t select any object just by clicking on it. In the early stages of a design, or while wire framing, where I’m moving elements around constantly, that really slows me down. In Fireworks, it’s that you can’t wrap text around an object.

CM: A lot of the things that used to frustrate me about Fireworks have been greatly improved with the latest CS3 version. Adobe has really improved the interoperability between Fireworks and other Adobe applications by allowing you to save a Fireworks file as a PSD or a PDF. You can also open PSDs and Illustrator files in Fireworks, which is a big help. One thing that still frustrates me in Fireworks is the lack of options when mocking up text to represent links in a web page. A basic text underline in Fireworks is about all you can do. Showing a background color behind the link or a different underline color is not built in to the text tool and must be done apart from the text, which can be tedious.

PL: I agree, the most frustrating thing about Fireworks is text formatting. Making bulleted lists is awkward as you have to mung it into shape manually and drop graphical bullets into place. It would be nice if it used a bit of Dreamweaver magic for the text. Ideally you’d be able to use CSS right there in Fireworks.

CM: Other frustrations with Fireworks include the lack of built-in photo editing capabilities and the lack of specialized brushes. But there are a couple of things that frustrate me about Photoshop as well. I don’t like that you don’t have the ability to select a layer by clicking on that element on the canvas. You can only select an element by finding and selecting the correct layer in the layers panel. I also don’t like that there are no vector tools, something I use extensively in Fireworks.

JC: Easily, the most frustrating thing about Photoshop is navigating the number of layers and objects on the canvas. Despite shortcuts that have been added, I still find myself scrolling through the Layers palette ad nauseam, hunting for elements. Adobe’s type rendering on the Mac is also not as good as it should be, which is a constant source of frustration. I know that improvements are coming, but that’s years away. Lately, Photoshop hasn’t locked up and died on me, but that used to be a common frustration. I think the latest updates to OS X have lessened those pinwheel-of-death moments.

TI: Really? Lately, stability would be my number one grip. I’ve seen the marble of doom more than I care for. It’s certainly better than CS3 1.0, so maybe I shouldn’t complain. Second, Photoshop’s artificial limit on nesting layer sets is hugely limiting. I obsessively organize my layers and text into layer sets so I hit the limit really fast. Third would be no find-and-replace text feature like Illustrator has. This is a glaring oversight by Adobe. Adobe took the time and made the type tools nearly as robust as Illustrator’s, so why do they think a find-and-replace isn’t needed?

PH: Even in Fireworks CS3, right-clicking and scrolling (with a mouse) in panels is not an option. That just seems ridiculous for a native OS X application. There are other small things that annoy me, like limited importing/exporting from other Adobe applications, but otherwise I find that Fireworks does the job and does it fairly well.

What are your top Photoshop or Fireworks time-savers? Any tips for aspiring designers out there?

CM: The first tip I’d give an aspiring designer would be to learn how to use Fireworks. I’d also tell them to learn how to use Fireworks’ symbols, and start creating a library of commonly used interface elements. That is something I am trying to do now, and I wish I had started years ago. It can be a huge way to speed up design time—keeping you from having to re-create the wheel or make updates to elements across several different files.

PL: Yes, Symbols is a good time saver. Convert a regularly used icon or graphic element to a Symbol and then when you want to re-use it just drag it from the Symbols palette. If you need to change it down the line, just edit the Symbol once and it changes every instance. Also, I don’t use the slice tool much. I click on an element, copy it, open a new window (which defaults to the size of whatever’s on your clipboard) and paste. Export that file (using Fireworks’ superior file compression) and away we go. The main thing though, the big selling point that Fireworks has over Photoshop, is that when you want to select something you just click on it or click and drag over it. Simple as that. No trawling through the layers panel—I don’t even name my layers in Fireworks. It’s lazy and disorganized, but it doesn’t matter. If I want to select an element that happens not be in the active layer, I just click on it and it’s selected. Another big one is Pages, which was introduced in Fireworks CS3. Put your header and main navigation on the Master Page, and then rather than duplicating elements and having multiple .PNGs knocking about, you can just add a new Page for each page of the site you’re designing. Change the header in the Master page and it changes across all your pages.

PH: I use the Frames feature to keep separate versions of my design in a single layered PNG file, rather than save different files for each version. With CS3, the new Pages feature replaces the need for using Frames in a manner that it wasn’t intended for, and allows for bits of your design to be available globally. Speaking of re-using design elements, the Assets Library in Fireworks is great for creating symbols that you can place anywhere, resize & rotate, and then make edits to the original symbol which updates the multiple instances throughout your design.

HG: I design a lot of forms, so a great little tip is to keep a separate Fireworks file containing all of the form elements I’ll need in vector format for easy resizing.

TI: In Photoshop, use vector shapes and smart objects (and filters) whenever possible. During the formative phase I’m constantly change the size and proportion of elements to get the right. Keeping them as vectors or smart objects is a real time saver.

JM: I agree—my new best friend is the integration of Smart Objects, from Illustrator to Photoshop. Blending Options and the organization of layers are key, but the main thing to remember is that just because Photoshop has 100+ tools, doesn’t mean you should use every glow/shadow/filter/effect. These tools are there to enhance but not substitute for good functional and meaningful design. Every design decision should be justifiable.

TI: If you are building any kind of complex interface that needs to show state, do yourself a favor and create layer comps of each state. I love layer comps because in addition to storing layer visibility and position, they also remember layer styles. Toggling between layer styles saves you from creating duplicate layers to change small things like color, effects, and so on.

JC: Yeah, name your layers as you go. Seriously, I am terrible about this but it saves so much time later on. Photoshop does have shortcuts to help you jump around to different layers, but it does you no good if you’ve got a bunch of layers named “Layer 1”, “Layer 2”, Layer 3”, etc. Also if you’re using Shapes—specifically boxes or rounded corner boxes—be sure to open the Shapes Options and tick the “Align shapes to pixels” checkbox. This will keep your shapes from getting fuzzy edges. I like to keep all my work in one huge file. I’ll have folders for the universal parts of the page, like Header, Footer and Sidebar, but then I’ll create page content-specific folders for (for example) Home, About, Portfolio, etc. This prevents me from having to update a bunch of PSDs when a change is made to the Header. I also recommend starting with a gridded template. I’ve been using the Photoshop templates from 960.gs, and it’s a great way to stay lined up and organized from the get-go.

AP: I’d say if you want to do anything for yourself, consider the following: Focus on sharpening your own technique. Your own style. Whatever application you end up using, the clients and end-users will never need to know what it was, as long as you created what they need with that special touch of “you” in the work. Because that’s the stuff that gets talked about after everyone’s gotten paid, and that’s the kind of stuff that brings them back for more. Don’t be afraid to experiment with new ideas, or try tools that don’t get used very often, because these can sometimes sew the seeds of inspiration for others.

(For a more detailed look at Anton’s Photoshop work, click the thumbnails below to download a .zip of the original PSD artwork.)

Judges decision

So is there no clear winner, then? It is my hope that you will consider using each for its respective strengths: Photoshop for heavy print and photographic work, and Fireworks for web design. This of course is not to say that one could not be used for the other, rather that each fits a specific niche. In reality though, the real litmus test is how well a particular application facilitates your goals—be that Photoshop, Fireworks, or anything else.

There is an old adage: “You choose your horse and ride.” I would add: Once in full gallop, it is difficult to switch. Perhaps that is why we are so enthusiastic about tools which are most familiar. Yet, no matter the software, as designers we share an obsession—creating quality work is the driving force behind all of our arguments.

(If you would like to hear more about how Fireworks fits into a rapid web development workflow, join Nathan Smith in San Francisco this November at Adobe MAX, where he will be presenting on the topic: “Designing Sites w. HTML/CSS In Mind.” Also, Anton Peck and Nathan Smith say they are planning a Photoshop vs Fireworks session at SXSW Interactive 2009. Voting for sessions began on August 8th—vote for the panel here.)

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: Web Design, Technology, Illustration, Graphic Design

 

Travis Isaacs (travisisaacs.com) has a passion for design that has taken him to many industries, including designing shopping sites for high fashion glasses retailer ReadingGlasses.com, to most recently building industry-changing interfaces for Sabre Travel Network and Travelocity.com. Travis currently works as Director of Viewzier experience at Viewzi.

 

Pete Lambert (pixelicious.co.uk) is a highly creative and determined web professional with considerable experience in front-end web design and development. He has a keen personal interest in the industry, specifically in web standards, usability and accessibility. He is especially skilled in XHTML and CSS, web accessibility, usability and user interface design.

 

Patrick Haney is not a sausage. He is however a User Interface Designer at Harvard University, and has also done work for Kodak & Xerox while in Rochester, NY, not too far from the Buffalo area he grew up in. When he's not collecting design inspiration or doing design himself, he can be found rummaging around Boston looking for a good chicken wing.

 

Jenna Marino works mostly as a freelance designer, on a number of UI and design projects for web, flash, & branding. Jenna has worked in print and web design with over 10 years of agency and corporate experience from nationally recognized organizations such as TMP Worldwide, AOL, Xerox, and Saatchi & Saatchi. Most recently launching AIM/AOL branded work, such as AOL.com, AOL Video and AIM.com, and also exploring more organic and community based sites, such as SXSW Award winning Ficlets, and CircaVie. More about Jenna at: ozarin.com.

 

Jared Christensen (jaredigital.com) is an all-round user experience designer. He makes sure that systems, interfaces, language and graphics are human-friendly, emotive, aesthetically pleasing, clear, on-brand and usable‚ with a touch of mellow smoothness. He has brought his knowledge and skills to bear on projects for clients ranging from Fortune 50 companies to bootstrapped startups. He works as a senior visual designer at Viewzi.

 

Hugh Griffith (design-spectacle.com) has been focused on design for most of his career, and while some might consider that a flaw, he would disagree. He could have attempted to be an all-in-one-wonder, but he chose instead to be the best at one discipline. Skilled in two facets of that discipline--interaction and visual design--he has designed blogs, retail e-commerce sites, large scale web applications and everything in between. An ex-pat Canadian, he is currently living the American dream in the foothills north of Boise, Idaho.

 

Chuck Mallott (oaktreecreative.com) works at Rosetta Stone as Interaction Design Lead. He tends to concentrate on interface design, information architecture and front-end code. When not at work or in front of the computer, he is most likely spending time with his wife and kids. He can also tell you more about sports (mainly Dallas Cowboys and Dallas Mavericks) than most people you will meet.

 

Anton Peck is an illustrator turned programmer turned designer turned illustrator again, and is loving the cyclical nature of it all. A rebel, bad-boy, and all around typical geek, he greatly enjoys thinking differently when it comes to generating visually compelling ideas.

 

Nathan Smith is a goofy guy who enjoys practicing and preaching web standards. He works as a UX Developer at Fellowship Tech. He writes semi-regularly at SonSpring and Godbit. He has been described by family and friends as mildly amusing, but is really quite dull.