"}
How to Transform a Good Web Design into an Incredible Web Design
10 Ways to Kick-Start a New Design Project
3 Reasons to Use Fireworks Instead of Photoshop for Web Design

3 Reasons to Use Fireworks Instead of Photoshop for Web Design

It's pretty much established that web designers use Photoshop to mock up their design concepts, but why is that we're all drawn to Photoshop? After all, it is an application that has never been specifically marketed as a user interface or web design solution, surely there is something else out there that is more suitable? Well, yes there is, and it's called Fireworks (you probably have it installed but have never used it). As a former Photoshop user who has switched to Fireworks around about a year ago I'm going to try and encourage all the designers out there who are searching for something better to try Fireworks.

Photoshop’s main function is implied in the name; Photoshop. Where photographs are concerned Photoshop is way ahead of it’s competitors and evidence of this is seen every time you pick up a mainstream magazine or see a billboard advertisement. It is also great for artwork as well as for rendering draw-dropping special effects. However, when it comes to positioning user interface elements on a page or rapid prototyping you can start to see it’s short comings.

Never fear, because according to Adobe :

“Fireworks® CS5 software enables you to create expressive, highly optimised graphics for the web or virtually any device — from smart phones to kiosks to embedded displays. Produce websites, user interfaces, and rich prototypes that are editable in both vector and bitmap modes.”

So, here are my top 3 reasons for why you should considering using Fireworks over Photoshop for web design and user interface work.

1. Fireworks Has Pages

This one seems so obvious, and just goes to show that if Photoshop was serious about web design it would realise that websites consist of pages! It’s probably self explanatory but I’ll explain how pages work by giving you a real world example.

This is the situation:
You’ve been asked to design the user interface for an online store, you’ve researched, brainstormed and sketched ideas for the homepage. You’ve then opened up Photoshop and brought your vision for the homepage to life! It’s a masterpiece and the client loved it at first sight.

Now understandably the client wants to see what the page looks like when you perform a search or click on a product, not to mention the checkout process and what happens when a user logs in? (the list goes on).

There are two widely used techniques to enable photoshop to simulate different pages.

  1. Perform a “save as…” , modify the design and repeat
  2. Duplicate all of the layers, hide the old layers, modify the design on the new layers and repeat.

Neither solution here is ideal, let’s face it. You’re either going to be switching back and forth between up to 10 different PSD files (perhaps more on larger projects) or you will end up with a huge file size and a maze of layers to navigate.

But as bad as that is, neither of those things are the main issue here. The biggest problem arises when the client says “Oh wait! on second thought - put that menu at the top, change the background and make my logo at least 78% bigger!”

Now each individual page has to be updated separately; something that any web designer currently using Photoshop will know to be a huge headache.

The Solution:

Fireworks makes updates like this a breeze! All you need to do is use the pages function.

Pages work exactly like pages in a desktop publishing application do (think Adobe InDesign and also imagine designing a magazine in photoshop!) each page is essentially it’s own document within the larger document, complete with separate layers, the ability to resize the canvas (as dynamic websites rarely have consistently sized pages these days) as well as having “master” pages that can apply consistent styles to multiple pages within the document.

Having all of your pages are in one document makes it incredibly easy to switch between pages and make updates. In addition to this,  cutting and pasting items in place by default and making changes across multiple pages only takes a few clicks!

You can put elements such as headers, menus and logos into master pages too and you only need to make changes once to the master page to see it reflected on all pages assigned to that master page; a real time saver.

Pages tie in nicely with reason number 2:

2. Symbols and Styles

Symbols and styles work as team alongside pages. Continuing with the same problem:  making mass amends to an online store website with multiple pages for the homepage, search results, product detail, and checkout process etc, let me explain how symbols and styles can be a life saver.

Let’s start with symbols. If you’ve used Adobe Flash before you’ll be familiar with symbols, if not they’re basically graphics, buttons or animations that live in the documents “Library” and can be dropped into pages at any time. If you were to make a change to a symbol in the library it will reflect on all instances of the symbol within your website concept.

A perfect example is an “Add to Cart”  button, which might be used on the homepage, search results page, categories page and product detail page many many times. With Fireworks if you realise that the text isn’t quite aligned properly or you’ve taken a disliking to that little shopping cart icon all you have to do is double click into an instance of the button, make the relevant changes and you’ll see all of the other buttons on the page updating in real time!

Styles have a similar concept to symbols, but the best way to explain them is to compare them to styles that we should all (hopefully) be familiar with, Cascading Style Sheets or CSS. In the same way that when you code a website you use an external stylesheet to define how big headers are, how much line spacing paragraphs have, what color links are etc. styles in Fireworks let you build a library of styles that control:

  • Fill type
  • Fill color
  • Effects
  • Stroke type
  • Stroke color
  • Text font
  • Text style
  • Text size
  • Text other

So when your client asks you to ‘make all of the text bigger’,’ use Verdana, I hear that’s good for the web’, and ‘stick a drop shadow on everything you can’. you can perfrom those strange requests within a few seconds!

Now, number 3, almost definitely my favourite thing about Fireworks:

3. Click to Select, No Need to Organize Layers

Yes that’s right, you heard me correctly. It really doesn’t matter what you choose to call your layers or if you’ve grouped them perfectly. Nobody really minds with Fireworks!

How is that possible you’re wondering? Just like in Adobe Illustrator if you want to select an object, you can click it and it’s your’s for the taking (you don’t need to find it’s name in a seemingly never ending list of layers) and then to top that off you can also shift/cmd + click another object on the page.. and move them both around, resize them both, edit them both at the same time and so on.

And if you’re wondering why selecting two or more items and editing them with ease is a big deal then you’ve clearly never used Photoshop extensively for web or user interface design.

Note: of course nobody is going to stop you naming your layers straight away, if you’re not ready to let go yet. That functionality is there in Fireworks too, to help you phase this life long habit out.

Summary

Photoshop is an extremely powerful application by anyone’s standards, and its particularly good for websites making heavy use of textures or rich imagery, but for rapid prototyping of websites and applications that doesn’t make you want to tear your eyes out when you’re sat at your desk for hours on end, say hello to Fireworks!

There are obviously far more than 3 reasons in Fireworks’ favor for web design, a few that almost made the list are:

  • Fireworks opens and saves to Photoshop PSD files.
  • Fireworks is vector.
  • Fireworks is bitmap.
  • Fireworks loves pixels
  • (no more semi-micro-milli-pixels when drawing icons).
  • Fireworks is great at optimizing files.
  • Fireworks has a properties window (define pixel values for objects easily).
  • Fireworks has a “Commands” menu (960.gs supply a fireworks command for creating grids without opening a template file)

What are your thoughts on the debate?

Let us know in the comments about your experiences with Fireworks and Photoshop, do you love Photoshop? Or perhaps you’ve been using Fireworks since day one?

Comments

  • Reply »
    Unique Design

    Unique Design

    Thank you for your article.

    I admit that—as probably most of web designers—I’ve never tryed Fireworks even if I’ve got it installed.

    It seems that’s pretty useful for our job as web designers, UI developers and the like. I will give it a try!

    Thanks again for your insightful article!

    Jan 12, 2011 at 10:23 am
  • Reply »
    James

    James

    Very nice run down of some of Fireworks’ features - you almost make me want to switch! I currently use Photoshop, and would find it hard to stray away - I have found it hard to get pixel perfect lines in vector programs, how do you find it?

    Also, you can actually click to select in Photoshop as well - with the arrow tool selected, just click “auto select” in the tool bar, you can then choose if you want to select the groups you click, or just the layer.

    Jan 12, 2011 at 11:07 am
  • Reply »
    efka

    efka

    Interesting article. I never use Fireworks before, but I definitely want to try now.

    Jan 12, 2011 at 11:56 am
  • Reply »
    Sarah

    Sarah

    Excellent. I used to use Fireworks all the time to create buttons and stuff, but then I started getting so use to the Photoshop ‘shortcuts’ ( keyboard commands) that I switched. But reviewing this article makes me consider going back to Fireworks!! Thanks for the insight and reminder how good Fireworks continues to be for the web. (Must be because it was an original Macromedia product, how I wish they still existed)

    Jan 12, 2011 at 11:59 am
  • Reply »
    Kris

    Kris

    I always use photoshop to design pages but after reading this I think I’m going to dig out a couple of tutorials from web designer mag and have a crack at Fireworks!

    Jan 12, 2011 at 2:08 pm
  • Reply »
    DiegoT

    DiegoT

    I agree with the first two arguments. But the third one can be solved by simply holding the ctrl key while selecting things on photoshop.
    Plus, you still need to organize your layers on fireworks in case someone else has to work with your files.

    I work at a big design company, and it pains me so very much to find such a mess in the layers pallete, when I have to work with other people’s files.

    Organizing is a great habit. No matter what graphic software you chose to work with.

    Jan 12, 2011 at 2:20 pm
  • Reply »
    Josh Littlejohn

    Josh Littlejohn

    Fireworks is great alternative to photoshop in almost all cases in web design. However there are two glaring points of weakness.

    1. It’s bad for collaboration. You can edit psds fine in fw but ps cannot edit what you make. I work on a team that all use ps and have never used fw, this is the main reason I don’t use it. If the made it integrate better it would be my number 1 tool.

    2. It doesn’t offer the same capabilities of aesthetic production that ps does. Fw aren’t bad by any means but ps is extraordinary.

    Jan 12, 2011 at 2:35 pm
  • Reply »
    Mason Hipp

    Mason Hipp

    I agree with DiegoT, I do like organized layers grin

    That said the ability to easily select objects is a nice plus too, and the pages aspect of Fireworks is fantastic. Of course, as someone who started working in Photoshop it is tough to make such a big switch.

    —Mason

    Jan 12, 2011 at 2:37 pm
  • Reply »
    Tony Thomas

    Tony Thomas

    Thanks for the comments everyone. Fireworks is a great application - it does have it’s own weaknesses too of course but for web design it’s leaps and bounds ahead of Photoshop in my opinion.

    A lot of people say that the whole click to select thing is feasible in Photoshop but until you start using Fireworks you don’t really realise how much more intuitive it is!

    Jan 12, 2011 at 2:46 pm
  • Reply »
    Edison Leon

    Edison Leon

    great! I’m so familiar with photoshop now, I can barely make anything in fireworks, it’s hard to work in fw!

    Jan 12, 2011 at 3:18 pm
  • Reply »
    James

    James

    I’ve just remembered as well, in place of Symbols, Photoshop has Smart Objects, which appear to work in a similar way! Although I do still find your arguments valid and persuasive.

    The most impressive sounding features to me are the pages and styles.

    Jan 12, 2011 at 3:23 pm
  • Reply »
    Hayley Thomas

    Hayley Thomas

    Photoshop has it’s place - it’s great image editing software, as mentioned above, the clue’s in the name!

    I’m pretty familiar with both programs, but can set up and edit web layouts in Fireworks in a fraction of the time it takes to figure out what’s going on in Photoshop.

    I find a similar comparison between Illustrator and InDesign - many people lay out all their print work in Illustrator, but pages, links functions and paragraph typography work much better in InDesign, especially for multi-page docs.

    Jan 12, 2011 at 3:42 pm
  • Reply »
    Chris Phillips

    Chris Phillips

    Totally agree with this article. I use Fireworks all the time for layouts. As this article mentions the real bonus is the click to select rather than organising/naming photoshop layers, it’s a big advantage. Fireworks is great for forms or transactional pages that require little creative work. I do still use Photoshop for anything that requires a little more creativity so I wouldn’t totally disregard it.

    Jan 12, 2011 at 8:18 pm
  • Reply »
    Bill

    Bill

    I have Fireworks CS5 installed with my Creative Suite and I’ve dabbled with it a bit but I’ve never really taken the time to get to the deep mechanics of how it works like I have with Photoshop. I’ll admit that I use Photoshop for a wide range of projects from web design to vector drawings to photo editing and manipulating. I’m thinking that I should look deeper into Fireworks, it sounds like a good deal.

    Jan 12, 2011 at 8:55 pm
  • Reply »
    john_doe

    john_doe

    ico_arrow.gif from <ul> has a light blue background that annoys me smile
    could you fix that? :D

    Jan 12, 2011 at 9:56 pm
  • Reply »
    chike

    chike

    wow thanks for the this! I have fireworks but don’t use it. Looks like it can save a lot of time.

    Jan 13, 2011 at 3:45 am
  • Reply »
    René Domingue

    René Domingue

    humm will give a try to firework for sure. I was using smart object in PS for common object like menu, header, button, etc. so I was able to switch thing inside easily and had just to update other page so all was switching. But the principle of pages seems really interesting.  Thanks for the good article. And sorry for my bad english :S

    Jan 13, 2011 at 3:49 am
  • Reply »
    Sanjay Mitra

    Sanjay Mitra

    Although I haven’t gone through the comments made by everyone, but all I can understand they surely raised all the points which are relevant to be raised. First of all my heartiest thanks to the author who has beautifully presented the benefits before us and to be very honest I never used fireworks until this day and it is kind of compelling me to work on fireworks.
    Now I am an Information architect and user interface designer from india (my profile can be viewed at http://sanjaymitra.carbonmade.com/, http://www.coroflot.com/sanjaymitra, and I write a blog http://aimsanjay.blogspot.com/ and can be accessed at http://twitter.com/sanjaymitra) I am familiar and proficient with photoshop and created more than 1000 templates if not more till date. For me styles offered by this software is important tool as you dont have to create or drag anything from the previous file since u have ready document with u and all the styles are predefined. It can also benefited to the next level of users who are working on the subsequent pages other than home page which has done by the team leaders . The chance of mistakes substantially decreased as all the style already been defined by the team head.
    But if you talk about prototyping I dont think it can give you any huge benefit.prototype can be prepared in paper,visio,concept draw,and god knows how many wire frame softwares are already there. No one would prepare prototype in Photoshop at the most they create one unique second level page ,may be a landing page followed by the details page and page like compare items,shopping cart, dashboard and so on. And in doing that photoshop is friendly enough to drag, to copy merge and create them without spending much time honestly it is not more than day’s job.
    Anyway those who have commented and the Author himself have a vast experience and deep insight for sure, they are right .I have just come across to this beautiful article and made my comment spontaneously. SO Dont bother

    Jan 13, 2011 at 6:32 am
  • Reply »
    Tony Thomas

    Tony Thomas

    I’m really pleased to see so many designers saying they’ll give Fireworks a shot, it really is worth taking the time to familiarise yourself with.

    Fireworks is great for icons too which I didn’t mention in the post, I actually created a really nice set of 50 icons using Fireworks after writing this that will be available as a freebie on MediaLoot very soon wink

    The reason why it’s so good for icons though is that it respects pixels (less fluffy edges) and also the Pages function comes in really useful, if you put each icon on a page in Fireworks it can export every single icon to individual files in about 2 clicks saving you tons of time!

    Jan 13, 2011 at 9:43 am
  • Reply »
    Daniel

    Daniel

    Been using Fireworks all the time. smile

    + points:
    1. Allows for quick logo designs
    2. Gradients and pixel perfect easily
    3. Click to select

    And pretty much more affordable than PS. IMO

    Feb 2, 2011 at 3:36 am
  • Reply »
    rexkramer

    rexkramer

    Its all personal preference, but there are major differences in PS and FW.
    Yes, Fireworks has some useful things, thats why i tried to use it on a regular basis… I TRIED for some years now wink I can speak for CS4 and older versions, and i still have to say. The Application is still a real pain!

    Unfortunately, Adobe acquired Macromedia and dropped all efforts in merging Imageready or parts of it into PS! So, the future for a good mix of both worlds is not realistic :-(

    I like the smart and editable objects in FW. The pages are an interesting layout alternative, but not often used in real-world situations. The application is slow and clunky as hell. The GUI is a nightmare and oldfashioned. Dialogs and dataentries are really strange and not intuitive. Period.

    Conclusion: I still (have to) prefer Photoshop.

    Feb 24, 2011 at 10:47 pm
  • Reply »
    Sergio

    Sergio

    Point #4 : PRICE!!

    Feb 25, 2011 at 9:58 am
  • Reply »
    Tony Thomas

    Tony Thomas

    @rexkramer:

    Thanks for you comments, I have to agree with you actually, it’s all down to personal preference, mine is Fireworks and I know for a lot of people it’s Photoshop.

    Fireworks does have an old fashioned UI, and some things are clunky and confusing - I still have no idea how the simplify path dialog works! but for me at least I still find it much easier to use than Photoshop.

    Oh and I use Pages daily for client projects and icon sets

    What I really wish though is that we had another option. I would welcome competition into the market with open arms.

    Feb 25, 2011 at 10:12 am
  • Reply »
    Shawn

    Shawn

    Here’s another benefit to FW over photoshop: png8 alpha transparency.  Thanks for pointing out the benefits of using FW for your web design workflow.  I’m excited to try using the pages.

    Apr 15, 2011 at 9:09 pm
  • Reply »
    aditya menon

    aditya menon

    I’m convinced, will try to incorporate fireworks extensively in my workflow from now. Thanks!

    Apr 17, 2011 at 8:13 pm
  • Reply »
    Stephen Snyder

    Stephen Snyder

    I never thought I would say this, but I think I might give Fireworks a try tomorrow at work.  I just mocked up our companies sight in three different psd files.  They like aspects of all three and I am thinking the process could have went better in Fireworks.  I think I have Adobe Photoshop tattooed on my brain somewhere.

    Apr 17, 2011 at 9:29 pm
  • Reply »
    treb

    treb

    ive been using fireworks for web design will i guess for its makes it easier to create click to some images without going to the layers .. im really loving it ..

    Apr 28, 2011 at 12:33 pm
  • Reply »
    Andres

    Andres

    I not sure if better for desing as I am not a designer, bur I use form always when I have to cut the images from a PSD or Ilustrator file for a mockup. It’s easier and faster for that.

    May 16, 2011 at 9:12 pm
  • Reply »
    Vlahell

    Vlahell

    I think FW does offer a better prototyping on web design than PS. But in the end PS is better for compositions and layer effects, and FW for creating the whole idea. In the end is like MMA, you need to do cross training if you want to succeed!, but there it depends of the rival, here it depends of the goal.

    Jun 1, 2011 at 11:59 am
  • Reply »
    Davide Pupparo

    Davide Pupparo

    Fireworks is simply better than photoshop for web design.
    Try to place two guides, click between them holding the Caps key and you’ll understand why.
    I personally use photoshop only for complex header images (photo editing, the thing photoshop was made for) and then place that images in my FW project.

    Aug 17, 2011 at 8:34 pm
  • Reply »
    Hassan Sarwar

    Hassan Sarwar

    If i have a website done on Photoshop and i want to make some changes to all the pages. How do i do it?

    I imported all the pages in Fireworks did changes in the mainpage but the option ‘Share Layer to All Pages’ is still locked. How do i use it?

    I’d be glad if anybody can help me out smile

    Dec 9, 2011 at 11:17 am
  • Reply »
    Ammar Mitoori

    Ammar Mitoori

    So how about comparing between fireworks and illustrator ?

    May 31, 2012 at 10:12 am
  • Reply »
    Hamilton

    Hamilton

    As to your first point, you should look into layer comps in photoshop.  they accomplish pretty much everything that pages accomplish.

    Sep 12, 2012 at 7:48 pm
  • Reply »
    James Hollister

    James Hollister

    I’ve always used Fireworks over Photoshop (where possible) fantastic program!

    Dec 11, 2012 at 2:50 am
  • Reply »
    lvdpg.org

    lvdpg.org

    You take a loan for anything that comes to mind - fresh clothes, shoes, and gadgets - believing you deserve these
    items; in fact, you might be working yourself on the bone.
    Maybe you just need a short term business advance loan to pay for
    the rent this month, and you are going to pay it off right away.

    Jan 24, 2013 at 12:26 am
  • Reply »
    Danny Pradana

    Danny Pradana

    I use firework. Thanks for sharing

    Mar 12, 2013 at 3:48 am

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

You can't just submit stuff to our site, but we'd love for you to consider being one of our design contractors, see http://medialoot.com/main/open-positions/ for more information.

See all