Introduction to Adobe Fireworks

Photoshop has become the de-facto for graphic design. It has always been that way and it continues to be so. Fireworks though now a product of Adobe was originally created by Macromedia and launched in 1998. Fireworks was created with functionalities similar to Illustrator and Photoshop and was no doubt created for screen design. Fireworks strength has always been its simplicity and its ability to allow us to do rapid prototyping.

Fireworks since its first release always suited best for website design and since its last 3 releases, Adobe has made better integration between Fireworks and other software in the creative suite specially Photoshop & Illustrator.

SEE ALSO: 5 Adobe Photoshop Common Mistakes

Photoshop no doubt has the best software for image editing, below I just want to point out the features that make using Fireworks over Photoshop more sense for web design.

What makes Fireworks quicker & better for Web Design?

1. Rapid Prototyping

You could start sketching your ideas for a website, app, etc. faster in Fireworks without worrying about layers, sorting, etc. Being a vector program, each element you draw could be individually edited, scaled, etc. Fireworks also supports bitmaps and have layer styles similar to Photoshop that could be applied to individual objects or multiple objects at once. Unlike Photoshop, for simpler work, you could finish your work in Fireworks without even needing to use the layers panel once.

Instead of using another took to create prototypes, Fireworks offers inbuilt tools to create multi-page click-through prototype using layers, states and pages. These prototypes could then be exported in PDF format to share with your clients or team.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

2. Native PNG

The default file format in which Fireworks saves all the information about your designs, layers, etc. is PNG. PNG or Portable Network Graphics file format is a patent free file format initially created for replace GIF format. PNG’s allow saving of multiple Meta data and since it can be opened by anyone even in a web browser; sharing PNG’s is much easier as compared to PSD files.

NOTE: While saving a source file, Fireworks now adds an .FW before the extension .PNG to avoid confusion of overwriting a source file created in Fireworks.

3. Page Management

Another reason why Fireworks is more suited for website design is its page management. You could manage the designs of different pages of a website in a single file. Websites have multiple pages and many components of a website remain same like the logo, menu, etc. Page Panel in Fireworks allows us to create multiple pages and share layers across them that. When using pages, we can also create “Master Pages” which allows us to define consistent elements that appear across multiple pages.

Page Layer States

4. Quick Object/Layer select along with Select behind

To select an object in Fireworks, all you have to do is to click on it. Fireworks offer’s a very intuitive way to select. Hovering over an object gives it a red border and after selection the border turns red. Fireworks also comes with a background selection tool that is helpful in selecting objects hidden behind other objects. Any object can be selected irrespective of which layer they are in. You can also select multiple layers by dragging your mouse across them or pressing shift key while selecting them.

Select Behind

5. Properties Panel

Applying filters or changing properties of the selected elements is easier in Fireworks due to a single properties panel available below the canvas. This can take getting used to for Photoshop users, but this approach makes it easier for even a beginner to learn Fireworks quickly. Properties panel allows us to change the properties of text, add layer styles and control transparency and blending modes of layers. It also allows quick saving of layer styles which comes in handy for saving general styles for headings, buttons, etc. while designing websites.

Properties Panel

5.1. Layer Styles, Transparency & Blending Modes
Layer styles are referred to as Filters in Fireworks. Along with the usual Photoshop layer styles, Fireworks also offers many additional effects. Properties panel allows you to control every single property of an element from the properties panel.

Styles

5.2. Rounded Rectangle
From properties panel, rectangular objects can be given rounded corners and there is also a possibility of precisely modifying the curve later on.

Rounded Corners

Through properties panel you can also add textures, modify gradients, and adjust stroke and fill and lots more.

6. Styles, Symbols & Library

Fireworks provides styles & symbols which are used to define special styling of different elements in your design and they are saved in common library. Just like CSS styles, editing the styles affects all the elements that use it throughout the document.

7. Find and Replace Panel

Being a product used for web site creation, Fireworks offers a powerful find and replace panel that can be used to replace color across multiple pages/layers in the design, find and change text or URL, or change font.

Find - Replace

8. Gradients

Fireworks gives a more refine gradient tool. Creating gradients is easier in Fireworks due to more precise control thanks to the control handles that enable us to move and resize the gradient. Fireworks also offers dithering of gradients to increase the quality of exported file formats.

Gradient

9. 9-Slice Scaling

9-Slice scaling introduced since Fireworks CS3, allows us to scale smooth rounded corners without distorting them. This feature works for vectors and bitmap alike and can be used for any objects. Using the feature is as simple as selecting an object and then clicking the scaling icon.

9-Slice Scaling

10. Adobe Creative Suite Integration

You can now import a multi-layered Photoshop file in Firework with many effects intact and you could also export vector paths from Fireworks to Illustrator. Though not always a straight forward process, this comes in handy when working with someone who does not use Fireworks.

Some of the other features of Fireworks are:

  • Pixel Precise alignment of objects from properties panel.
  • User interface library of common elements included some of which can also be exported as HTML to be used in a web browser.
  • Better Image compression for the web
  • Ability to copy styles of one object and apply to another.
  • Easier to get CSS code based on the style of an element.
  • Easier Grouping of elements

Fireworks was never created to replace Photoshop and it never will. Using Fireworks in your website design work-flow would not only help you do your task faster but give you more ways to manage and control your work-flow. Design agencies still look for people with Photoshop expertise but this is slowly changing. The demand for people with experience in Fireworks in slowly increasing and if you are into web design, having Fireworks in your arsenal of tools would only give you advantage over others.

Harish Chouhan

Harish is a web developer from India and loves working with Fireworks & WordPress. As owner of Dreams Media, he provides custom website development for a living. He loves to write about Fireworks & WordPress and often blogs on his website HarishChouhan.com. You can also find on twitter @harishchouhan.

Newsletter

24 Comments
  1. Andy Buckle Jan 7, 2:28 pm

    Looking forward to seeing more Fireworks tutorials!

    Reply
    +15
  2. Ayhan Sipahi Jan 7, 3:43 pm

    I used to use fireworks for web. After i started to use photoshop for web i generate more smooth graphics. after i finish up designing a web site i can easly get css rules with csshat.com/ .
    for beginners i recommend start with fireworks.

    Pro tip 1: you can easly slice images and easly create web out put.
    *used it for email templates
    Pro tip 2: you can link slices, map areas inside document pages. You can simulate browsing in a web page.
    with this property, you can output this document as pdf. This links will work in the pdf. you can show it to your client as pdf or you can create great slide shows with this way.( put forward-backward buttons and link titles to pages)

    Reply
    +7
    • Jeff Jan 7, 8:59 pm

      It sounds like you are on CS5. With CS6 Fireworks has been drastically improved. Also, in CS6, Photoshop has a CSS Properties Panel. No need for csshat.com. I am an Adobe Creative Cloud member and highly recommend it!

      Reply
      +5
      • Ayhan Sipahi Jan 9, 3:22 am

        True, I was using fireworks at CS4 and CS5. Now I’m using CS6.

        Now a days I prefer using vector graphics for resolution issue. Main reason to use Ps and illustrator is vector graphics. I am the only one who understands graphical desing and web design in our office :)

        I will look again to fireworks. Nice to hear that there is css properties panel in PS. Thanks.

        Reply
        +2
        • Alex Jan 11, 2:45 pm

          Fireworks lets you do all the vector things in one place. and not everyone can afford buying/updating and wasting their time on numerous tutorials for 2 different products.

          Reply
          +1
    • Darius Jan 8, 2:39 pm

      For beginners? No. For the real pros. Using a photo editing tool for web design, UI, etc, is wrong. Use the right tool for each task.

      Reply
      +10
  3. Simon Darby Jan 7, 11:22 pm

    I’ve neen using it since the days of Macromedia, and always found Fireworks a quick and easy design tool for web graphics. I prefer it over Photoshop. My only grip is that Adobe has some bugs in the Apple version, perhaps to do with OSX upgrades leaving Fireworks behind. If Adobe can catch up, this is a must have web design tool.

    Reply
    +9
  4. Dave D. Jan 7, 11:24 pm

    I love to see that designmodo introduces Fireworks. It is an awesome tool and the best and most effective tool you can use for screendesign.

    By the way, there is an article which mention 50 reasons about “What makes Fireworks quicker & better for Web Design?”

    http://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesign.html

    I hope to see more stuff about Adobe Fireworks at designmodo in the future!!!

    Reply
    +7
  5. raw raj Jan 8, 12:42 am

    I switched from fireworks to Photoshop years ago cause there are something with images that you just cannot do in fireworks.
    It does not make sense to use two software’s and the price. It was ok when I was using the pirated version when I was just out of school but later on had to stick to photoshop 5 with a text editor instead for FW+DW for a long time until going open source with Gimp.
    When Adobe purchased Macromedia I thought maybe they would do away with FW and include those features in PS and make it a PS+DW. But that did not happen not worth the buy.
    I have checked CS suite and the DW WYSIWYG editor pane does not display pages properly. I think with CS4 or 5 came the live preview but for me personally I felt that using a free text editor and refreshing your the page in your browser is the same as having to click the live preview button to preview your page(which again has some issues)
    CS6 looks good but I really don’t have the time to download the entire suite and test it. Its just too huge and the price is still not optimum.
    Whats stopping me is the risk that I might waste my time testing it (relearning FW again I have to relearn to it test its potential and I don’t think 1 month is enough of a trial. Its not like most of us can dedicate a month to relearning and testing a software).
    I was really impressed by Edge range mostly edge inspect I am not sure if I need DW to preview my website across all devices at once or only a CS Cloud membership is enough.
    Its really not worth the hassle until they bring the price down enough to make it affordable. Atleast for me.

    Reply
    +5
  6. Andrew Collins Jan 8, 3:37 am

    Great post, I thought Adobe was phasing out Fireworks because when you combine Photoshop and Illustrator you could really go without Fireworks.

    You don’t see a lot of Fireworks tutorials because of the popularity of Photoshop, but I have used it for years and I love it!

    Reply
    +2
  7. Miles Baltrusaitis Jan 8, 1:41 pm

    I do all my web design mockups in Inkscape . I tried using Fireworks for a while, mostly because blogs and presentations I attended kept pushing it as the solution. In the end, it all comes down to comfort and fluency with the controls. 

    Reply
    0
  8. Alex Jan 11, 2:40 pm

    Fireworks is great, but it’s bad for people who’re accustomed to Photoshop. Although they look very similar, but the principle of working itself differs (Fireworks doesn’t make you always think about layers. and again, pages are awesome, i’d die without them))). I’ve started using Fireworks for lo-fi prototyping first (not generally using Photoshop before, as i don’t need to draw or retouch photos) and have used it for my every design task since (5 years).
    I hope Adobe will move on with Fireworks (developing and supporting it even though it’s not that popular)

    Reply
    +1
  9. Laurence Jan 14, 9:24 pm

    Will we be seeing some if your fantastic ui packages appear in png format for fireworks?

    Reply
    +3
  10. Simon Jan 16, 8:32 pm

    Yes, but Firewirks looks and feels like Aldus Freehand 3.1

    The UI seems horrible to me.

    Reply
    -2
  11. Kento Jan 19, 2:44 pm

    Amazing post.
    I have fireworks and don’t have photoshop.

    So I wanna see more Fireworks tutorials!!

    I also want some ui packs for fireworks some day….

    Reply
    +1
  12. Lucas Jan 22, 1:51 pm

    Great stuff! Looking forward to the FW tuts! :)

    Reply
    0
  13. Dang Thanh Jan 23, 5:09 pm

    I have use both Fireworks and Photoshop. But I usually use Fireworks and I love it over Photoshop (Although Photoshop is good for me when design)

    Reply
    0
  14. Jane Hooper Jan 23, 8:42 pm

    I have been meaning to get my head around Fireworks for years, but I think I need some nice simple Tutorials! I tried following one once in a magazine, got totally confused and gave up!

    Reply
    0
  15. Billy Jan 24, 12:44 am

    I would like to like it but it crashes like crazy and it’s recovery files are a joke.

    Reply
    0
  16. EvanR Feb 6, 5:07 am

    It’s simple really. Fireworks is for websites. Photoshop is for photos.

    Reply
    +1
  17. Myinteraction Feb 11, 11:22 pm

    I’m using Fireworks CS5 and previously also Cs4 and I think is perfect for wireframing and prototyping considering also the possibility to start from a sketch, refine it and move to the final visual design in one single product.
    Far away from Omnigraffle, and more web dedicated than Illustrator. The only Big issue it’s that it’s completely unstable (also In the Cs6 version). if you don’t save every 5 minute it crashes without a reason.
    How you manage that problem? Did anyone has this problem? The Ui it’s also really old with strange behaviours but I can accept it, what I can’t accept is the software stability!!

    Reply
    0
  18. Arnold Feb 22, 1:10 am

    When it comes to EFFICIENCY, Fireworks is far more superior than Photoshop, Illustrator, Indesign or any combination of the three. Sure, you can create a comp in PS with layercomps and smart objects, but the files become huge. And when making revisions, it’s just time-consuming–even with the added features in PS6 of type styles and layer search. You can also create an interactive prototype in Indesign with its interactive features, but it’s still not as efficient as FW. Unfortunately, I’ve also read on other forums that it slows down considerably and crashes often as the number of pages increase. Adobe needs to invest more $$$ into improving FW. Colleges, universities, and art schools should teach FW and DW together as opposed to focusing on PS, AI, and ID. Not enough agencies using FW. Hopefully, this article helps to change things.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters