Have you ever wondered which tool, Adobe Photoshop or Fireworks, is better suited for web and application design? There are many designers who use Fireworks. But there are far more who use Photoshop. However, this is starting to change. More and more designers are switching to Fireworks as their tool of choice for many reasons. Here are four of the most compelling ones supported with in-depth articles written by other designers:
Everything Is Faster and Easier in Fireworks
This reason is huge. It’s not just one or two things that are faster in Fireworks than Photoshop, it’s everything. You not only save time, but you also save your energy because you can do less to get your desired result.
Fireworks Gives You a Better Output for the Web
Images and graphics used on the web need proper compression so that they load efficiently and don’t use too much bandwidth. Fireworks gives you a proper output every time that’s suitable for web usage.
Fireworks Is Full of Powerful & Flexible Features
There are many powerful and flexible features that Fireworks offers that Photoshop doesn’t. This isn’t just one or two features, this is a lot of features. The articles below go into detail about each of them. Just Fireworks’ features alone is a make or break deal.
- Features that make Fireworks the application of choice for web designers
- A Case for Adobe Fireworks against Photoshop and Illustrator
- 7 Reasons Why I Choose Fireworks Over Photoshop
- Dear Photoshop user, meet Fireworks!
- We Love Adobe Fireworks!
You Can Use Fireworks for the Entire Design Process
From the first stages of wireframing, to designing visual mockups and to finally making an interactive prototype, you can do it all in Fireworks. Fireworks lets you create your own library of symbols that make wireframing a breeze. It also lets you create your own graphic styles that make designing mockups quick and easy.
- Creating a Basic Wireframe Using Adobe Fireworks
- Wireframes to mockups with Fireworks
- Designing interactive products with Fireworks
- Industry trends in prototyping
There are also reasons many designers use Photoshop. Photoshop came before Fireworks. It’s what many started out using and what they’re used to using. In order to convert over to Fireworks, they have to change how they do things now. And for some people, that’s asking a lot. But if the change is an upgrade from before, the change is well worth it. In this case, the upgrade is huge. You’ll not only work faster and easier in Fireworks, but you’ll get better results in everything from designing your graphics to exporting them for web development. The process is seamless from start to finish.
Photoshop has its strengths. But designing websites and applications is not one of them. That honor belongs to Fireworks. If after reading this article you still don’t see it, then maybe these interviews with Fireworks users can convince you.
Book
Affiliate
Man, I tried this a few months ago, I really tried. I just could not escape the feeling that I was stuck in the crumbling remains of a condemned building. Compared to the CS5 incarnations of Illustrator and Photoshop, Fireworks feels like a Macromedia app circa 2003. Probably because IT IS. I don’t think Adobe has ever given Fireworks the attention it deserves – instead they just keep polishing the same old turd to fill out CS5 spec sheets.
For now I’m sticking with Illustrator for my web design work, which IMO offers many of the speed benefits of Fireworks over Photoshop but with a much more polished interface. Not to mention vastly more powerful graphic styles, with multiple fills and strokes per shape, which is sorely lacking in Fireworks.
Well Fireworks is… Illustrator and Photoshop together + like 100 more features, that you can’t even think about, because you work with software that made for the printed media…
Consider that every ‘web’ related feature you got in this software is a patch made to try and clone a ‘native’ Fireworks feature:
You remember image ready? do you think slices shouldn’t have the ability of being named and keep the names from within the software? only from this patchy window call ‘save for web’? and why you actually need a special tool to select them…
I can count many features you don’t have access to, but then it will be a really long post (Hint – check Fireworks extensions, there is more then 10)
And don’t forget to check transparency when exporting 24 bit PNG (You still get more Kb’s on your file size 😉
Terrific article, Anthony. Been an avid FW user since v4. Love Photoshop, but Fireworks fit like a glove when I first started using it. It now fits like my own skin 🙂
I miss one feature that I used quite frequently, years ago…the Data Wizard plug in. Allowing the dynamic banner/graphic creation. A real strength of the program, that was never truly leveraged. Perfect time to bring it back, imo.
Thanks again for an article I can forward on to “the others”.
A better option is to run your images through pngcrush before you launch your site. It reduces the file size while maintaining the same exact image, pixel-for-pixel.
I use FW to work since Macromedia. During this time he is only getting better. His ease and simplicity, so amazing … I had to write commands for him, and they worked, removing a lot of hours of routine work. I want to thank the developers FW, they made simple and extremely flexible product.
Personally, I do not have filters in Photoshop, for example, reduce noise or color actions. And I think Adobe did not do that in the near future, because it will replace photoshop far back in time in web design.
Thank you for this article!
This might be some redundant info but these are some of my reasons why FW works much better than PS when it comes to digital graphics:
FILTERS
PS: Adding a blur to a shape, you have to rasterize it.
FW: You can add any filter to any object
PS: Suddenly you can’t use a certain filter for a certain layer. There are no explanations on why this is the case and you can’t even see the fly-out menu with filters that “used to be there”.
FW: You can apply anything to anything at any time
VECTORS
PS: Shape layers are more confusing than they have to be. You can’t apply effects to vectors in Photoshop.
FW: You can interact with vectors directly in the artwork, just click on it and you can move it around without having to pay close attention to which layer the object is on.
OBJECT PROPERTIES
PS: Rounded rectangles: You can’t change the radius after drawing it. You can’t see the result of the radius until you have drawn it.
FW: Each object can be reviewed and analyzed quickly by looking at the property inspector when the object is selected. A rectangular shape has a “rounded corner” setting and when changing the value it updates in real time.
CONTROLLING & SELECTING
PS: You can select an object from the canvas by holding down ctrl (PC) but after adding a few objects to the artwork you basically have to work from the layers if you don’t want to interact with pop-up dialogues telling you layers are empty or locked etc. You basically have to name every object you create in order to find it again. Selecting something from the canvas when you get a complex document is just impossible. You end up “searching” for your objects for way to long. This makes it trickier to “sketch” or make something quickly in PS. Example: Draw ten lines on top of each other in random directions. Try moving or changing one of the lines without interacting with the layer panel. It’s pretty much impossible without naming every object. The objects you draw are “sinking into the artwork” and the more you create, the harder it will be to get hold of them.
FW: Every object lights up as soon as you hoover over it, letting you know you can select it by just clicking. If you need to select an object that lies below the highlighted one there is a “select behind” tool
PIXELS
PS: Nudging a pixel when zoomed in further than 100% or less than 100% and the object will move in half-pixels (etc). There isn’t even a setting to get the nudging to snap to pixels.
FW: One nudge click equals one pixel. You can set each object to be anti-aliased or not, there is even a “snap to pixel” fuction for objects that might be off-pixel, real simple (when using sub selection tool you can move anchor points to half-pixels)
LOCKING
PS: Even if a layer is locked you can accidentally select that layer.
FW: A locked layer is locked and you will not be bothered by it.
TRANSFORMATIONS
PS: When a transform is ongoing, or a text field is being altered, you can do nothing except work with the transformation. You can’t close a document, you can’t “unselect” by clicking on the outside, in other words you are locked until you press enter (or ctrl-enter when working with text). Because of this you have to let go of the mouse/pen and interrupt your workflow.
FW: You hold down ctrl and press outside of the object and you are ready to interact with other objects. A very quick way to work.
HIDING
PS: When you press ctrl-H it means you want to hide all the stuff around an object but when you do that for a text you still have the “transformation box” around the string.
FW: Ctrl-H hides everything and you can see the artwork clearly.
MULTIPLE OBJECTS
PS: If you want to apply a layer blend mode for more than one object you have to do it one object at a time. When selecting two at the same time, PS “forgets” what modes they have. Even if they have the same mode.
FW: You can select multiple objects on multiple layers and create the same blend modes for them. You can add the same effects to them etc. Even if they have different properties before.
COLORS
PS: When selecting a color for an object or a shape you might want to select other colors than the ones in the artwork, say for instance the color of a shape in the layer panel. You can’t.
FW: You can sample colors from anywhere on the screen, even from the FW GUI if you would like to.
GRADIENTS
PS: Handling gradients is cumbersome.
FW: Every vector object can be set to have “Gradient fill” instead of “Solid fill” in the property inspector. The gradient is then controlled from either the property inspector or the actual object. Like in Illustrator but in a more straight forward way.
– – –
Other benefits with FIREWORKS:
– PAGES. Great (and fast) way of organizing your work.
– QUICK PROTOTYPING with linking and toolboxes filled with functional UI elements
– SYMBOLS. Well developed in FW. Compared to PS and AI the handling of symbols (smart objects) is superior.
– PROPERTY INSPECTOR. Instead of showing effects etc in the layer panel you see and alter the effects by clicking on the object.
This list is just recently started will get longer with time.
I will not argue the benefits and/or advantages of FW. But I really really suggest you learn PS before you start knocking it. A number of the Issues you have with PS only display your ignorance of either the program, how it works, or what you can/cannot do with it.
If you were, for example, to say that PS was never designed to have lines “snap to pixels,” that would be a valid comment. But to say it can’t, is just foolish. My van was never designed to go to 120 in 3 seconds because it wasn’t designed to. But then again, a racing car can’t take a 4 x 8 sheet of plywood–it wasn’t designed to.
You can write a book in FW but I’d recommend against it. That’s not to say that it has dreadful text tools, but that it’s not designed for long text work (neither is Word for that matter).
Rather than being snarky, I’d suggest you learn the difference between real features and the focus/intent of a given piece of software. You’ll do both FW and PS a big benefit.
I always assumed that developers used FW’s and designers use PS. I switch back and forth depending on what i’m doing. This is a first to hear someone say it’s better than Photoshop.
Hi Alex.
Nobody says it is better. The article says it is a more appropriate tool for screen design. A simple example would be slicing images. I am not a dev, but a visual designer, and I can tell you I’ve been using FW for more than 10 years now as the right tool for my work. But hey, if I need to deal with photos, retouch or any similar task, I’m not gonna use FW, for PS is the tool for this.
Well said, Isabel. It just really bothers me when people don’t understand the difference and argue back and forth. It is a matter of preference, what you feel comfortable with. I used PS for web GUI design a long time ago and then switched to FW because it was easier to get the prototypes with multiple pages out and with some interactivity if I wanted to mock that up too. If I need to retouch photographs or use special effects with filters, brushes and such, then PS is where I go and then bring the artwork into FW for the screen design. Again, it is my preference that fits into my workflow. If you’re a designer that prefers PS and find alternatives to be more productive for web design UI work with PS, that’s good too.
FW was maded from scratch for screen graphics. That’s why will be always better than PS in this area. Now Adobe have more responsability and pressure on FW because the industry is taking a lot of attention to screen graphics since Web 2.0 (2004) > Smart phones (2007) > Tablets (2010)
http://pablomassa.com
Here you can find a lot of FW lovers and arguments: http://fireworksinterviews.com
I use Illustrator all day for work, designing software UI and documentation. I haven’t fully tried Fireworks yet. Does Fireworks have an easy way to output to some sort of documention format? We design in use cases, so each page of the document only has 3-6 “screens” and then tons of notes describing the flow. Is this something that Fireworks could handle? It is a pretty manual process in Illustrator, but it works.
I see that you can output to a pdf file, with each page representing one of the pages of the Fireworks file, but is that the only sort of static output that is available? I want to make this work for our workflow, I just can’t figure out how just yet.
Nick, you can use rectangular hotspots in Fireworks to link from page to page in the exported PDF. Make sure you use rectangular hotspots, because PDF does not recognize the polygon hotspots. When you add the hotspot to a page in Fireworks, use the Link field in the Properties panel to choose the page to which it should connect. You can have many hotspots per page, so it is possible to do more than just a linear, page-to-page flow. Hotspot links created on the Master Page in Fireworks will work on EVERY page in the exported PDF, so this is a great way to simulate the navigation of a web site and only add the links once.
Everyone prefers the app that he used to. It’s normal that Photoshop gains more users, it’s an application that Adobe keeps filling with more and more features.
Anyway, Fireworks has the key features that make UI/web designing really easy, intuitive, fast.
Every app has its purpose. Illustrator handles vectors, Photoshop born to manipulate pixels, and Fireworks is made for UI, web and prototyping design.
Give it a try. Just because Adobe is making Photoshop like an application that can do anything, it doesn’t mean it’s the right way.
Somebody use Fireworks on Mac OSX? How is it performance? I tried to use on OSX but it’s too slow.
Thanks.
Brush is not as good as photoshop in fireworks otherwise the tool is specially designed for web designing If we want to work on heavy printing work, image editing etc. we’ll have to use the photoshop instead of fireworks
Can you refer me to a good learning resource on the web for FIreworks.
One of the shortcomings of Fireworks is that he community is not as developed as that of photoshop.
I still prefer Fireworks over Photoshop, but then again, I started using it 1st. To me Photoshop has a very big learning curve to do simple things that Fireworks does.