Developing A Design Workflow In Adobe Fireworks

Advertisement

Every designer has their own workflow when starting a new project, even if it’s only loosely defined in their head. A typical Web project goes through a variety of steps from inception to launch, with a lot of moving parts throughout the cycle. Photoshop, Illustrator, Fireworks and even Web browsers themselves are available to aid us in our work. But with so many choices, how do we determine the right tool to move from concept to functional design?

Developing A Design Workflow In Adobe Fireworks

Over the years, I have come to rely on Adobe Fireworks as the main workhorse among my design applications. It’s built from the ground up to create screen-ready graphics; it’s object-oriented by design; and it’s lightning fast for creating UI elements. While Photoshop has made great strides lately by adding some vector support, it simply has not been able to match the speed and reusability of Fireworks for production work. Read on to get a glimpse of my project workflow (sketches → wireframes → graphic comps → export) and to see how Fireworks fits into these different stages.

Sketches

Sketching is arguably the most valuable part of my design process. In terms of workflow, this step isn’t specific to Fireworks, but it’s still a crucial part of getting my ideas flowing.

Dribbble shot by Joshua Bullock1
Sketched icons

Dribbble shot by Joshua Bullock2
“Quest” (another sketch on paper)

Sketched designs can be done simply with paper and pen or created directly in Fireworks, and they can end up being works of art in and of themselves. I start most projects with sketching in some shape or form, and I use a few different techniques depending on the time and materials available.

High-Fidelity Sketching

Hi-fi sketching is a great option. It allows the designer to forgo the digital tools and break out the pencil, pens and paper. Peter Buick’s recent post “The Messy Art of UX Sketching3” outlines this in far greater detail than we can here, so check it out. Because high-fidelity sketches exist on paper, they have permanence; and collaborating on sketches is easy by passing them around, drawing on them and making notes about necessary changes. But by all means, make copies of your work; I wouldn’t want to get angry emails saying that I told you to let others draw all over your beautiful illustrations!

High-fi sketches can provide good guidance for development4
Hi-fi sketches of mobile screens and interactions

“But why should we start with sketching?” you might ask. The reason is because getting caught up in pixel-precision this early on in a project by going straight to digital is just too easy, and it’ll cost a bit of time in the long run. Remember, Fireworks is all about speed and production, and dropping back to pencil and paper is both a fast and easy way to get your ideas out so that you can start iterating. For those of you who truly enjoy the old-school ways of pencil and paper, here’s a selection of templates5 built specifically for that purpose. I’ve used these for both mobile and desktop website designs, and they can really help keep your UI consistent and speed your sketching along.

Do not be afraid to explore lots of concepts6
Don’t be afraid to explore many concepts and iterations.

Sharpie and a Big Pad of Paper

Using a simple Sharpie or other marker and a big pad of paper is quick, inexpensive and fairly low-fi (meaning there doesn’t need to be as much detail). This lets you capture big ideas and quickly define broad concepts in the design. You can pick up a Sharpie7 and a huge pad of paper at a local office-supply shop. Throwing away or recycling these drawings is not a problem either — they’re not exactly pages in a sketchbook.

Quick aside: When David Gray interviewed Jason Fried8 of 37signals, they spoke about exactly this type of low-fi sketching. Gray drew the notes of their conversation, and this fascinating sketched conversation can be seen on Gray’s website9. The “big pads of paper” mentioned by Fried in the video can be found on Edward Tufte’s website10.

Jason Fried on Design11
Jason Fried on design

Pro tip: Sketches can help define site maps and user flows in the absence of a project brief. Are you making a brochure website, a CMS, or a single-page design with tiered layers driven by JavaScript scrolling? Sketching your designs can help cultivate your ideas and reduce design time.

Whiteboard and a Camera

This is the option I usually default to, because a whiteboard offers the same speed as a Sharpie and paper but making changes is easier, and you’re not wedded to particular ideas. A whiteboard is impermanent, and it makes for a great projection surface, with collaborators being able to suggest changes in a meeting room. Large whiteboards can be expensive, but you should be able to find smaller whiteboards at your local office-supply retailer for prices that won’t break the bank. I keep a poster-sized whiteboard (24 × 36 inches) at home for just such occasions.

Different logo concepts - do not be afraid of revisions12
Your concepts don’t have to carry heavy detail — just capture the big ideas.

Sketch in Adobe Fireworks

One of the most beautiful features of Fireworks is that it allows you to create vector objects but also offers full-featured bitmap editing. Fireworks supports Wacom tablets and pressure sensitivity to a degree, but it’s not nearly as fluid as what’s available in Photoshop. That being said, Fireworks does allow you to “paint” vector strokes, and I’ve done this with varying degrees of success. The advantage here is that, while it may not be quite as free-form as traditional media, you don’t have to jump through additional hoops, and your sketches will already be on a digital canvas.

Pro tip: When using a Wacom tablet for sketching, use a large canvas size, such as 2500 × 2500 pixels. Because tablets are sensitive, drawing on a small canvas accurately can be difficult. With a large canvas, you get better control and can zoom in to add fine detail.

In my typical workflow, I toss my initial ideas onto a whiteboard, snap a photo of the board with my iPhone, and email it to myself (or save it to Dropbox). At that point, it’s easy to pull the sketch into Fireworks to start building a wireframe in layers on top of the photo.

Snapping a quick picture with a mobile phone or point-and-shoot of a whiteboard sketch
Snap a quick picture of your sketch with your mobile phone, and email it to yourself.

Photos of sketched materials can work well too13
Photos of sketches work well if you don’t have a scanner.

Wireframing

Thinking in Patterns

When building a wireframe in Fireworks, one of the most important things is to think in patterns. This doesn’t mean using the design patterns14 or common interface conventions15 that users often look for in a design, such a text box for site-wide search. Rather, it means thinking about whether certain elements should share similar formatting throughout the design? Items in a sidebar, content lists, user profiles and photos are all good candidates. Fireworks can already help by creating these content blocks as reusable UI elements in your document library. You can select a group of objects and convert them into a single symbol (we’ll talk about creating symbols soon), and then simply drag it from the document library onto the design as needed. If changes are needed, simply update the library symbol, which will update all other instances throughout the document.

Pro tip: 960.gs16 is a popular CSS framework for creating fixed-width designs. A Fireworks extension for 960.gs17 is available that automatically creates guides spaced out for the framework. If you’ve already made the jump to responsive design, check out Matt Stow’s Export Responsive Prototype18, which exports your Fireworks slices to simulate a responsive layout when you create reflowed designs as separate pages. And if you have no idea what the difference is between fixed-width and responsive design, we’ve got that covered19, too.

Creating Pages

I’ll typically start with the header, along with other UI elements that repeat through the website, such as the search box and sidebars. I can then take these elements and define them in my “master” page in the Pages panel. By doing this, any new pages I create will share these elements. They remain locked and on their own layer, so I can design more freely and save time by not having to reconstruct them for each new section that I add to the website. To create a master page, right-click on an existing page in the Pages panel and choose “Set as Master Page” in the pop-up menu.

Creating your first Master page (Master page drop down menu)
Creating a master page

This is really where pattern-based thinking helps. Will your sidebar have its own background colors and texture? If so, you might want to define this on the master page. However, if some pages will expand to the full width of the design, then defining a sidebar here might not be the best solution. Pages have their own unique properties, including canvas width and height, resolution and exporting options, which we’ll discuss later. Hopefully, these ideas will help you identify good candidates for master pages. Webdesign Tuts+ offers a great video tutorial by Connor Turnbull titled “Getting Started With Fireworks: Using Master Pages, Pages and Web Layers20.” Remember that pages can have unique dimensions, which is a huge advantage in Fireworks. Adding your header to the master page is fine, because it is anchored at the top of the browser window, but the page’s length can vary. The footer is probably not something to include on the master page, but it can be used very powerfully as a library symbol, so let’s look at symbols next.

Pages in Fireworks help define repeatable sections throughout your site, defined on the master page
All new pages now include repeatable elements defined on the master page — headers, footers and sidebars that are easy to update.

Creating and Using Symbols

Returning to the concept of reusability, the document library in Fireworks can be an indispensable tool for items you intend to reuse. Library symbols can contain groups of objects, enabling you to quickly replicate blocks for a CMS. Need a log-in form in the form of a modal dialog to appear on multiple pages? Create that as a library symbol, complete with the background overlay in the size of your canvas, and drag it from the library to your canvas to illustrate the effect. If you need to make changes to the log-in modal dialog at that point, those changes will be reflected in every instance of the symbol, on every page, on every layer!

To create a symbol, select the objects that you’d like to include (for example, in the footer), and choose “Convert to Symbol” (Modify → Symbols → Convert to Symbol, or press F8 on your keyboard). The text, shapes and anything else you had selected are now available from the Document Library panel, and you can drag the symbol onto the pages as needed. Later, if you decide to make changes to the footer symbol, just make the changes once and they will propagate to every page on which the symbol appears!

The Document Library is where all of your symbols are stored
You’ll find any symbols that you have created in the Document Library panel.

Noupe has a great collection of reusable Fireworks library objects21 that can be used for prototyping and design. Also worth mentioning is the fantastic Fireworks Wireframing Kit22 website by Hannah Milan, another great place for UI components.

Graphic Comps

Once the client has approved the wireframes, we can jump into enhancing the website’s underlying skeleton with high-fidelity design. Fireworks allows us to make this transition without ever leaving the application — we enjoy the same functionality of multiple pages and library objects, but now we can add gorgeous photography, beautiful typography and striking color enhancements, all in this one program.

Vectors and Bitmaps

Now that we’ve created the wireframes, we’re ready to get the color and typography flowing. As mentioned, Fireworks combines both bitmap editing and vector object creation in a single powerful package. I usually create as much as possible in vector format because the files are scalable and can be reused for Web and print. The vector editing tools in Fireworks are easy to use, and many of the features you’ll find in Illustrator for manipulating vector objects are available here, too. Editing tools for bitmap and vector can be found in the Tools toolbar, and there is a separate panel for combining and editing vectors (the Path panel).

Fireworks offers bitmap and vector editing tools all without having to leave a single application
Fireworks offers both bitmap and vector editing tools.

Vector illustration created in Fireworks23
A vector illustration created in Fireworks

Layers, Sub-layers, Groups

In Fireworks, layers work more like they do in Illustrator than in Photoshop, so keep this in mind. Both layers and individual objects can be named, which helps dramatically with exporting if you need to send the graphic files to another designer or developer. I usually name my main layers according to the overall sections of the comp, and then place objects into sublayers to keep them organized. Layer names such as “header” and “twitter block” clearly communicate to other designers which elements of the UI are where in the layout. In addition to layers, Fireworks also supports the grouping of objects and arranging of individual objects and symbols from front to back. This provides an additional level of control when you’re overlapping objects and effects.

Property Inspector Panel

Arguably the single-most powerful UI component in Fireworks is the Property Inspector (PI) panel. The PI panel can be normally found at the bottom of the screen when you first open a new document in Fireworks. Fills, strokes, gradients, patterns, object position, scale and opacity, blending modes, live filters, text properties and much more can all be defined quickly and easily from the PI panel. It’s a convenient place to quickly inspect and change the properties of all kinds of objects! And let’s not forget about Live Filters, which are the secret sauce for making Fireworks a fast tool for production.

Many people ask where the true power of Fireworks lies relative to Photoshop. The answer is the features and behavior of the PI panel. It is your one-stop shop for a vast amount of tweaking. If you’ve ever used Dreamweaver, you’ll be familiar with the panel floating at the bottom of the screen and the myriad of controls it offers.

Object, text and canvas controls are all conveniently laid out in the Property Inspector panel24
The PI panel provides controls for text, bitmap and vector objects, live filters, compound shapes, the document canvas and more.

Applying (Live) Filters

Just as we apply adjustment layers and effects in Photoshop, we can apply live filters to objects in Fireworks, and these are all assigned in the PI panel. When you use filters in library symbols, such as glows and drop shadows, they are considered a part of the object and can cause the x and y positions of that element to fluctuate. Live filters can also be applied to symbol instances so that their positions better line up with your grid. It really depends on whether you need the filter to appear in every instance of the symbol or not.

Live filters can also be combined and stacked on top of one another, and they’re multiplicative, which means you can apply more than one instance of the same filter to an object. For example, you can create a very thin, heavy glow around an object, and then apply a secondary glow of another color that’s lighter and more diffused, making for an entirely new treatment. Live filters can be edited at any time simply by double-clicking the filter that you’ve applied and changing its settings. Additionally, live filters can be rearranged by dragging them into a new order, giving you substantial control over applied effects.

Fireworks live filters are placed on any object through the Properties panel (PI panel)
The live filters magic happens in the PI panel.

Keep in mind that using live filters is different than applying filters via Fireworks’ top menu. Live filters remain editable, whereas “regular” filters do not, so I’d recommend using live filters by default. That being said, live filters can affect how much memory Fireworks uses. If your design becomes too complex, you can branch a single UI component or section of the page into its own file to maintain editability, then flatten the layers and bring that object back into your primary comp as a bitmap.

Fireworks vectors and effects scale well for creating icons25
Iconography created in Fireworks

Exporting

Now that we’ve converted the wireframe into a high-fidelity full-color design, it’s time for the transition to a fully functional website using HTML and CSS. We’ll use Fireworks’ superior compression and exporting abilities26 to pick apart different parts of the design to be used as background images for headings, buttons and even tiled backgrounds.

Defining Slices

When the design comp is completed, it’s time to export the image files for use in the browser. Slices work similar to those in Photoshop; they allow you to define a section of the graphic comp as a flat bitmap image to use on the website or in the CSS. But Fireworks has the additional benefit of allowing us to define specific optimizations and file formats in different slices of the same document. GIF, JPG and PNG images can all exist in the same Fireworks document, and you don’t have to leave the app or go through multiple passes of file exporting, as you might in Photoshop or Illustrator.

Slices exist on their own Web layer above the rest of the design, so they’re easily toggled on and off with the number 2 on your keyboard (or using the eye icon next to the Web layer).

Slices can quickly be toggled on and off
Slices can quickly be toggled on and off in their own layer.

You could manually draw slices with the Slice tool from the default toolbar, but because Fireworks is object-oriented, you can simply select your object or group and choose “Create slice” (Edit → Insert → Rectangular Slice). The slice will be created automatically and set to the size of your object, including any live filters that you’ve applied.

Pro tip: Use the Slice tool to quickly determine the size of an object or icon to ensure that live filters such as glows and drop-shadow filters are not inadvertently cropped out of the final image.

Fireworks slices also enable us to define different parts of the overall comp using unique optimization, naming and file formats, and it gives us one-click exporting options, saving all of these parts in a single location on our computer. No need to get creative with cropping or creating separate files — it’s all done within Fireworks. Simply select your objects and choose Edit → Insert → Rectangular Slice (Alt/Option + Shift + U), then go to the Optimize panel and either select from the presets provided by Fireworks or define your own settings for each slice.

Slices are the secret power of Adobe Fireworks
Slices are the secret power of Fireworks, enabling you to quickly define elements in the design for exporting.

Keep in mind that backgrounds are part of the slice, but these items can easily be placed on their own background layer with the visibility toggled off, giving your buttons and other UI elements full alpha transparency, thus maximizing their versatility.

Pro tip: You can quickly export slice objects after having made minor adjustments. Simply right-click the slice and choose “Export selected slice” to send the image out with your pre-defined settings. This also works when selecting multiple slices, each with their own optimization options. Keep in mind when using this technique that if you’ve changed the image “scale” in the exporting options (say, to create a thumbnail or a website preview for a WordPress theme), then you’ll need to go back into the export preview and reset the size to 100%, or else your sliced exports might look squished.

Exporting Defaults

Slices can either inherit the default exporting option for the file format (set in the Optimize panel) or be unique; meaning you can set a single slice to export as a JPG, while the rest of the image exports as PNG or GIF. This affords tremendous control for different parts of your graphic comp. Many times I’ve also created a separate page in my file titled “Exports” for background sprites and toolbars, which keeps my original image intact — very helpful in the event that the client wants to see the proposed changes. Simply select the relevant UI elements from the design, create a new page, and paste your objects into this new canvas. Once you have the UI elements for the sprite, you will easily have the exact pixel locations to plug into the CSS.

Pro tip: Fireworks saves natively in PNG format (with added meta data), which is easily viewable in a browser. I’ve used this feature in a pinch to quickly show graphic comps to clients and coworkers. But beware: multi-page layouts can get pretty big, which affects downloading time. Also note that the first page in a Fireworks document is what’s shown as the default view of the Fireworks PNG.

Exporting Options

Once you’ve created your slices, or if you’re simply exporting the entire comp to show a client, you’ll be taken to the exporting window in Fireworks. This works similar to the “Save for Web and Devices…” preview in Photoshop and Illustrator. Here you can once again change the level of compression, as well as see a live preview of the image in different file formats.

Export Preview gives us a quick look at sizes and quality of exported image27
Export Preview gives us a quick look at the size and quality of the exported image.

You can also control the scale of the graphic — very helpful when you’re designing an icon for multiple devices and platforms (the standard and Retina-sized images for the iPhone display come to mind). You can also export HTML along with the images; export with or without slices; and save the file for use in other applications such as Photoshop or Illustrator.

Pro tip: Use the “Constrain proportion” options and scaling in the “File” tab to quickly export snippets of the design for posting to websites such as Dribbble28 or for promotional images for a feature area.

Try It Out

There you have it: a super-short synopsis of how to take your sketched ideas to wireframes and all the way to full-color graphic comps using Adobe Fireworks. The power of vector and bitmap editing, the easy and fast control over reusable objects, the excellent live filters and the very good compression and exporting options all make Fireworks a powerful tool for any (screen) designer.

Many of you already own a copy of Fireworks, having bought Adobe Creative Suite, but have simply never opened it up. It doesn’t cost anything to fire up this dormant app and see whether it provides some enhancements to your workflow. Why not give it a try? A streamlined workflow awaits!

Further Reading And Resources

Joshua Bullock was illustrating comics before making a mad dash for the web in '99. He's the Creative Director at Feisty Goat Interactive and a developer and UX designer for vAuto.com. He currently lives in Austin, TX, and you can find him on Twitter or Dribbble.

Advertising
  1. 1

    I’m using Fireworks a few years now and I think it’s great for wireframing and building content elements of your projects and such stuff. The ability to make automatic shapes is quite awesome and saved me a lot of time. The only few things I hate about it is that it’s not very stable and fonts looks still pretty bad. Despite that it’s cool!

    0
  2. 2

    Fantastic! I’ve been waiting for Smashing to put out a new intro to Fireworks article. It’s probably the Adobe application I am least familiar with, and this is a great starting point. Thanks + bookmarked!

    0
  3. 3

    Woa, this is such a useful article, lots of information and resources, thank you so much! I’ve been considering giving Fireworks a chance for some time now, great read.

    0
  4. 4

    Just discovered Master Pages a few months back and loving them. And thanks for the FW love on Smashing!

    0
  5. 6

    I think too many designers overlook the sketching part of the design process. Kudos to you for spending a good amount of time on it!

    0
  6. 7

    Amazing article! Loving to see some Fireworks love :)

    0
  7. 8

    omg, great article

    0
  8. 9

    Love the Fireworks articles! Keep it up!

    0
  9. 10

    waiting for more posts like this. thank you!

    0
  10. 11

    Great post, very helpful for Fireworks users, thanks!

    0
  11. 12

    J Cole Morrison

    June 11, 2012 7:19 pm

    Awesome. I completely agree that Fireworks is a superior program. My two most used are Fireworks and Dreamweaver which I find kind of odd – since they both originated in Macromedia only to be bought out by Adobe. It also has tons of awesome layer options like “fuzzy light,” “overlay,” “colorburn,” etc. When I try to move to Photoshop or Illustrator now, I just get frustrated.

    If Photoshop and Illustrator had a kid that then grew up and got together with Dreamweaver and had another kid – it would be Fireworks.

    0
  12. 13

    Sketching is indeed important, it’ll allow your brain to think wider perspective rather than start everything in computer.
    Fireworks is indeed great software for web and UI design.

    Still wishing for Adobe to bring web font anti-aliasing rendering simulation into the software to provide more accurate text rendering….

    0
  13. 14

    I also think that Fireworks is preferred more by artists (illustrators) as it provides a host of vector inputs.

    Photoshop on the other hand is more suited for montages and also for digital paintings.

    I love the quality of designs in Fireworks, it’s more crystal, clear and sharper… love it!! :)

    0
  14. 15

    Silviu-Ionut Radu

    June 11, 2012 11:20 pm

    Thanks for the beautiful post. I love to see many PROs are using the FW, which in my opinion is the first choice when struggling for prototyping and designing. I love it and us it since 1999, but as DrKhaos said I’m still waiting for the enhancement of the font smoothing, which lacks a bit of smoothing and anti-aliasing , in present.
    Great article, anxious for more! ;)

    0
  15. 16

    Awesome works, it’s really fantastic. Fireworks is great. Thanks for sharing!

    0
  16. 17

    Great article! I miss more articles on Fireworks, keep’em coming!

    0
  17. 18

    Even sketching doesn’t stop you from doing boring design.

    0
  18. 19

    Love Fireworks for web design! Thanks for the great article!

    0
  19. 20

    Thanks Joshua for reminding me how badly I need drawing/sketching lessons. Mine look like a 5 year old’s scratches compared to yours. That is why I tend to go straight to Fireworks after a few frustrating hours with the pen and paper. I also use whiteboards… although I often use whiteboard easel pads. You can stick the whiteboard sheets up anywhere you want.. cut them to smaller pieces if needed, and reuse them as long as you don’t destroy them in the process.

    Fireworks is awesome. I struggle with photoshop and illustrator a bit but can churn out wireframes and mockups in Fireworks super fast. I’m surprised when I see so many of my clients’ designers not using it for website design.

    0
    • 21

      I don’t spend a great deal of time sketching stuff on paper. I do sketch and jot down ideas, but I don’t go into much detail as this guy does especially with hi-fi detail, because those things I can work out on the computer using Cintaq or Intuos and Illustrator. I know there is a school of thought exists that you must work out ideas and sketches on paper first (thats what you are taught in school), because if you jump on the computer first you tend to take your design work in one direction. But this school of though is slowly being challenged with the introduction of very good and userful digital tools.

      Since I’m not very fast with pen and paper, I work out detailed sketches using illustrator, because with illusrator I can duplicated layers, lines, and everything else making the process pain free. I think some designers give sketching on paper way too much attention.

      Whatever method or tools you use to work out ideas, I don’t think it matters much, as long as you do put thought into your concepts.

      0
  20. 22

    Fireworks is the very best image editing program, it’s my first choice for web design. I use it for many years, thanks and twitted!

    0
  21. 23

    Nicely done, Joshua! A great article to introduce people to Fireworks, which is also my favourite app as well. I’m one of those “graphically challenged” people — the best I can hope for via sketching is an extremely lo-fi design. But I can then take that primitive drawing and make it shine using either custom graphics I create in Fw, or drawing on the extensive library of existing symbols within Fireworks.

    Thanks for writing this article!

    0
  22. 24

    Fireworks is good for wire framing but doesn’t have the finished graphics subtlety that Photoshop does.

    0
    • 25

      Michel Bozgounov

      June 12, 2012 8:58 am

      @Paul:

      I wonder what your conclusion is based on?… Fireworks is as good as Photoshop — it’s all in the hands of the artist/designer… Fireworks has good wireframing capabilities, but it’s also an excellent design and illustration tool (and it’s also unique in the world of screen design, because it works equally better with both vectors and bitmaps).

      To illustrate my point better, I’d like to show you a few illustrations and designs, made exclusively in Adobe Fireworks:

      Nikon Camera (iOS icon by Gianluca Divisi)
      Touch CDJ Pro (UI by Gianluca Divisi)
      Guitar (illustration by Gianluca Divisi)
      Kickoff 2 (illustration by Benjamin de Cock)
      Monochrome icon set (icon design by Benjamin De Cock)
      Rainboxx (logo design by Rogie King)
      Kawasaki Vulcan 1700 Classic LT (illustration by Isabel Aracama)
      Iron Man Mask (illustration by Fabio Benedetti)

      These few examples should be enough, I think… Now, let’s talk again about the lack of “finished graphics subtlety” in Fireworks. ;-)

      0
      • 26

        Thanks for the 8 examples but I think the thousands and thousands of pieces of work created by photoshop slightly out weighs this argument.

        Fireworks can produce ‘good’ stuff just not as well or easily as photoshop

        cheers ;)

        0
        • 27

          Michel Bozgounov

          June 13, 2012 6:12 am

          Eight examples should be enough, if they are good! I could probably find 80, or 800, but that would be spam, and not real comment. ;-)

          What’s better, Fireworks is not only an excellent design app, but it also offers far superior workflows, when it comes to web and screen design. It’s faster and easier to use — if you know how… But, everyone can choose their own tools, right?

          0
          • 28

            micheal, i think as a designer you have to choose your tools to the project you do. your samples would be possible just to do in illustrator or just in photoshop as well.
            .
            the tool mostly lacking in fireworks is the brush tool, i found also 100+ scripts i am using in illustrator and you can just do scalable print grafiks.

            fireworks is usefull if you are just working for webdesign…

            if you do fashion design, print, illustrations, webdesign, workflow templates (like pop art) then photoshop is so powerfull. with smart objects including filters you can do out of photoshop a complete workflow generator.

            also the type tool in illustrator is more advanced.

            and in the end i had always problems with exporting things out of fireworks.

            i have to add one more think. the most impressive software i went into the last years was indesign.
            i had jobs where i had to develop many different calendar layouts and had to export them. guys who ever dreamed about just to layout one month and export any further month for the next 10 years… its possible with one click. no copy and paste anymore, all runs with data import, table design and scripting.

            my conclusion is. i am to good in ai, psd, indd to learn something new i can cover better with the other tools. i use indesign for slicing my final layout.

            it was the best choice of the last years to go into indesign instead to go into fireworks deeper since its more than less a clone with just half features of each – ai and psd…

            0
          • 29

            You’re right Michel everyone can choose their own tools as long as it’s the right one for the job and a very good basic tool is Fireworks but for that added quality Photoshop is a better tool for a designer to use – not a developer who happens to ‘design’ sites also.

            anyway we’ll agree to disagree.

            Cheers ;)

            0
          • 30

            Chris Corneille

            June 14, 2012 4:13 am

            Good post, firstly, made interesting reading.

            @Michael I do think you are being over sensitive to the comment made by Paul here – individuals who use a variety of tools competently and are more open minded should not be ‘spammed’ with your very pro thoughts on Fireworks.

            Fireworks is indeed a fantastic tool – and I use it as and when I need it – but every post I see of yours (on here and other sites) are SO pro fireworks and dismissive of other tools it’s almost embarrassing.

            As I said, no one is questioning the quality you can get from Fireworks – but having an open mind is the most powerful tool a designer can have.

            0
        • 31

          Paul:

          When you say: “everyone can choose their own tools as long as it’s the right one for the job ”

          Well, Photoshop is not a web design tool no matter what the rest of the world says.
          Photoshop is a photo editing tool every one has been using for web purposes all these years using all kind of workarounds or asking for more and more features to make it even more bloated and complicated to use.

          If I have a nail, a hammer and a stone, I’ll use the hammer to nail, not the stone.
          PS is a powerful stone, but it is not a hammer and my aim is to nail.

          0
        • 32

          @Paul
          A good example would be drawing a rounded corner radius in Photoshop and then try and change it.
          What do we do? Install that script? heeheh..
          In Fireworks, you would do this in seconds, and in real vectors.

          Paul, it’s crystal clear you don’t know Fireworks.
          But still you speak as if you would…. sigh.

          0
  23. 33

    Great article. Thanks! Fireworks is definitely one of my least used CS apps for Web. I think I’ll give it another shot!

    0
  24. 34

    I have been using FW since version 1.0 somewhere around 1998. Ever since it came out I have completely stopped using Photoshop for anything web-based other than photos and occassionally photos mixed with graphics.

    If you have never tried it, I highly recommend it.

    I was scared Adobe would kill it when they “merged” with Macromedia. Really glad they didn’t.

    Also, the export compression engine is and always has been pretty amazing.

    0
  25. 35

    Josh, do you use states in your workflow? I’m a little confused about whether I should bother with using states to show state in UI controls, or if using layers would just be simpler.

    0
    • 36

      @John – Great question. I don’t typically bother with states for buttons and similar elements because they can be tricky when it comes to exporting. Just using layers or even applying often-used styles for your hover/active states can work just as well. I also tend consolidate my assets together on a separate “export” page to use in a background sprite. This allows me to visualize the differences in the states of objects at a glance. I have used states for creating some preview UI for clients & managers on rare jobs here-and-there, but at that point I’ll usually move to a live prototype in the browser. Keep in mind, this is just my personal workflow too; there’s no wrong way to eat a Reese’s. ;)

      0
  26. 37

    I love Fireworks. I use it as a primary tool. I used to be a Photoshop fanboy but totally converted. The only thing that really bugs me is the stability. It is poor. Save often has become a mantra…

    0
  27. 38

    I’ve never understood why people like Fireworks – it seems to do a lot of things badly and the UI is barely better than Flash (which has to qualify as one of the worst ever built). It didn’t get pixel-snap until CS5 (which I reported as a bug in FW 2!), and it still doesn’t support SVG.
    I generally regard anything that even mentions the word ‘slice’ as broken, since almost everything now has to be dynamically flowed, scaled and rendered at variable resolution; bitmaps are for photos.
    It seems completely crazy to sketch, draw in Fireworks, then try to construct an emulation of it using CSS/XCode; it’s just the wrong tool for the job and makes more work than it saves. For illustration it’s fine and capable (as excellent examples above show), but using it for designing flexible layouts is a bit like using dovetail joints in cast iron.

    0
    • 39

      Michel Bozgounov

      June 13, 2012 3:17 am

      Do you think there exists a better graphic design app for designing flexible layouts? What about Photoshop, which has poor vector support and slow cumbersome layer-editing system? What about Illustrator which cannot edit bitmaps?

      Thanks to some talented people, Fireworks can export to SVG (see this free extension), emulate responsive design prototypes, and even make powerful prototyping for iOS possible!

      That’s why many people use it and love for screen design. It’s lightweight, versatile, and powerful enough for all things web/screen.

      And finally, about slices — still not everything is dynamic, flexible and re-scaled constantly when we do web design. If that would be true, we wouldn’t need anymore tools like Fireworks and Photoshop… And as you see, we still need them and they are often part of our workflow. To design “right in the browser/code editor” is not yet that fast and easy as we’d like it to be… :-)

      Slices in Fireworks have many purposes: You can export and re-export easily a set of images, in different image formats and with specified file names, which can save you many hours of work.

      You can also use slices and hotspots for making interactive web prototypes (something no other graphic design tool can yet do!), and even for interactive prototyping for iOS! (We plan to publish articles in the near future that will cover these two topics, so stay tuned.)

      For me, it was very useful to read Joshua’s article, since it shed some light on his personal design process. And I see nothing unusual in the fact that Fireworks takes a considerable part of his workflow — for some, it’s Fireworks, for others Ps or Ai, and there are even people who make web designs in InDesign or in the browser… :)

      0
  28. 40

    I’ve been using FW for web development for a while now and argue it’s superior to PS for screen based design. PS only beats it in one respect – fonts. In FW you can’t search in the same way you can in Photoshop; if you have a huge list of fonts (which I’m sure most designers do) it’s a pain to get the font you want.

    Please fix it Abobe!

    0
  29. 42

    Love fireworks – have used ver 8 for web design for many years.

    Fireworks, photoshop elements and notepad++ are all I need.

    0
  30. 43

    i would still design/layout in photoshop including illustrator smart objects as to do all in fireworks. its just that i am faster in ai/psd as and illustrator offers still 100 more tools as fireworks.

    but i have to admit that i still slice websites in indesign. slicing in indesign is just a haven comparing to photoshop or illustrator and the code looks for me fine. for me as a deisgner its enough. of course a coder will finde allways things to improve. espacially the slice out of buttons and instances.

    0
  31. 44

    FW is my favourite software for UI design and wireframing/storyboarding. Thanks for the post.

    0
  32. 45

    I recently used Fireworks for a very large web site re-design, i don’t use master page as it is fundamentally flawed if you need pages to have different heights. But what i did use extensively was Symbols, Pages and Styles …. saved me masses amounts of time and here’s why.

    The client was insistant on seeing almost 70 pages mocked up throughout the site, despite my best efforts in telling them “thats not quite how it works” … the site used about 10 templates all in and normally that would be enough plus a few extra but this was one of those clients.

    I did pretty much every element in the design as symbol, so every time i had to change things it was as simple as changing the symbol and it updated on every page, then i just re-exported all the pages in a few clicks. Can you just imagine the same thing in photoshop??? I still used photoshop to create things like nicely styled buttons using just one layer (not so achievable in the way i needed with fireworks) … most people seem to think you have to just use one application to do the design, but why? Who knows. I used Illustrator, Photoshop and Fireworks and i can tell you, Fireworks was the one that SAVED me literally days or even weeks worth of work.

    Down side was the file ended up taking a good couple of minutes to load, and if you’re like me and save frequently, it became a pain taking 30 secs to save each time. I would defiantly use Fireworks again for a big project, as poor as the performance became towards the end, it was still less time that having to alt the navigation on 70 psd’s.

    Second issue i found was when another person in the studio worked on the design, they weren’t much of a Fireworks user and they ended up duplicating lots of symbols and that kinda screwed up the document library… so if you’re going to have a a few people working on the same Fireworks file,make sure they are all up to speed with using symbols properly otherwise you’re in for a headache.

    Dont hate Fireworks people, learn to love its great bits and accept its bad bits – just like we do with Photoshop. Neither are perfectly suited as a layout tool for web, but hey – that’s the hand we have been dealt with so make the most of it and make your life as easy as you can :)

    TIP: Avoid nesting symbols inside symbols – Fireworks doesn’t like that very much ;) Also, read up on scripting buttons in Fireworks, extremely useful when using symbols for buttons.

    0
  33. 46

    FW, great software, I hope Adobe will make a solid release of it some day.

    0
  34. 47

    In regards to why use Fireworks, I think it’s really up to the user. There are reasons why Adobe develops these software as separate products, they are designed with a goal in mind. Yes it is agreeable that some software get more attention than others (even on development side), but the software available today are still there because they continue to serve their purpose.

    I use numerous Adobe software for variety of projects: ID for print, PS for photo editing and smart-objects, AI to make client specific fonts and FW for web/ui/ux mockups. But as with life itself, we all have preferences; we always prefer one over the other. I personally like Fireworks because of the simplicity it provides me over the others, but that doesn’t mean I narrow myself (at least not anymore) to just that one software. Here are my feedback on a few comments I read:

    1. Michel Bozgounov is being over sensitive.
    A: Everyone has a passion. His is Adobe Fireworks and he wants to show his pride. But I agree, just because you like something, that doesn’t mean you should/can downgrade another. With that said, MANY photoshop users who do leave comments here, on my site, and on other blogs/forums/social networks about Fireworks are pretty darn harsh. After reading multitudes of them, I too began slowly developing a dislike for PS users. Let people use what they prefer, let bloggers share their articles on how to create wonders but let them do it in peace. We are humans who follow different religions, have different skin colors, different hair styles and body types, can we live and work in peace?

    2. Some of Fireworks features are also in Photoshop
    A: One thing we know about designers is that they like to keep some similar elements in their designs. If we look at ElegantThemes, we see that they recycle codes and have a tendency to keep a similar feel to their template. Likewise, Adobe does keep overlapping features in their software. Why? This is to make the transition from one to another software easier. They know that one software cannot do all and that there will be projects where you will seek the aid of another. That is why ID, PS, FW, AI and other Adobe software have similar feel to them.

    3. Sketching is IMPORTANT!
    A: I agree, one of the best pre-design phase is the sketching. Sketching helps us have a general idea of what our projects will look like and often even feel like. It can and often does help us develop a better workflow for ourselves.

    4. Using States
    A: Yes, no matter what software you use, states can be a pain to work with. But with the release of CS6, working with states can help you save time. In Fireworks CS6, using states can help you create easy to use sprites that also comes with the CSS created on export! This tutorial goes a little into States but I recommend watching Experts Meeting presentation on Fireworks by Dave Hogue.

    5. Exporting Images
    A: Exporting in JPG/JPEG can output a smaller size but I would recommend, if you can spare a few extra kb, to export PNG-8 format. PNG-8 also has the option for alpha transparency which is great for semi-transparent images.

    0
  35. 48

    Hi, I love your articles like many fireworks article. I never really dive into it. I’m sure that fireworks is really fast for UI design and the user experience processing. But I always have to go back to photoshop, to refine the design, the subtlety.
    Am I right to say that after a firework prototyping and sketching you have to head back into photoshop to refine the “design” ? Is it the natural workflow? or you just do everything in firework from sketching till final presentation?

    Thank you

    0
    • 49

      @Bill:

      I hope the author can reply to your comment, but something comes to my mind, anyway — why would you go from Fireworks to Photoshop for refining your design?

      This illustration was made in Fireworks:
      http://dribbble.com/shots/401993-2D-vectors-Kawasaki-Vulcan-1700-Classic-LT-Metallic-Imperial

      This iOS icon was made in Fireworks, as well:
      http://dribbble.com/shots/399426-Nikon-Camera-iOS-Icon

      Fireworks is powerful enough as both prototyping/wireframing, and design/illustration tool. It’s a matter of mastering its power only. :)

      0
    • 50

      @Bill – I’m glad you enjoyed the article.

      You certainly don’t have to go back to Photoshop, but it sounds like your workflow might lend itself toward refinement using that tool and there’s nothing wrong with that. That said, I’ve seen fantastic examples of incredibly polished design using Fireworks from people like Benjamin De Cock or Rogie King and it ultimately comes down to what tool(s) you’re most effective at using. Time still equals money so that will always be a factor. To say that Fireworks can’t do something simply because the users are more familiar with achieving their effects through another app (as I’ve seen from a few of the comments here), is simply false. It’s simply their way of getting the job done and to each their own.

      All of the subtleties and layered effects of a Photoshop graphic can be achieved using Fireworks and it’s not more or less effective or time-consuming, it’s just done differently. I use Illustrator for a lot of vector work if the file will ultimately be printed, but that’s because I need print-precision and Fireworks was made for screen graphics. That said, I tend to start my vector work in Fireworks just because I’m faster and more familiar with its vector tools than Illustrator’s. They both have their strengths and the same can be said for Fireworks vs. Photoshop. PS has made improvements to its vector tools in recent versions but I still find them very cumbersome to use compared to FW or Illustrator’s. I would urge you to check out some of Rogie’s tutorials on how he’s achieved certain effects using Fireworks and experiment to see if they might work for you.

      Thanks again for your comment!

      0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top