Fireworks for Beginners: A Complete Getting-Started Toolbox
Why Use Adobe Fireworks?
Despite sometimes feeling like the un-loved, adopted child to the Adobe Creative Suite family, Fireworks remains for a lot of professional web and user interface designers to be the most useful, productive tool in their arsenal, however due to the vast popularity of a certain other graphics application in the creative suite, it doesn’t gain anywhere near the recognition it deserves for what it does best.
Fireworks was designed for rapid prototyping, layout and interface design, and it really shows when you start using it. Menial tasks that can take minutes to perform in Photoshop, take just seconds in Fireworks, and it isn’t just about saving time either, as Fireworks is an incredibly powerful graphics application, and with some experience there is very little you can do Photoshop that you can't do in Fireworks just as well.
This guide shouldn’t be seen as a dig at Photoshop though, it is simply here to assist designers who want to start taking advantage of the time-saving, efficient features that Fireworks has to offer. So why not give that yellow “Fw” icon a click and see if you can learn something new, and potentially save a large chunk of time in your daily workflow?
Getting Familiar With Fireworks
The Workflow
So, if you’ve used any of the other Adobe Creative Suite applications before, you’ll find a lot of similarities in the workflow, you still have a toolbox, a canvas and multiple palettes or windows for different tasks, usually all arranged as you find most convenient. You still start each project by creating a new document and setting it’s dimensions, and you still have layers, and the usual tools you expect to find such as the Pen, Marquee, Shapes and Text tools etc.
Vectors & Bitmaps
The main thing you’ll notice that’s different in Fireworks is that it is both a vector and bitmap editing tool. There doesn’t need to be any distinguishing line between bitmaps and vectors (as there are in Photoshop and Illustrator) because in Fireworks they work seamlessly together. The benefits of this are that you get pixel perfect designs, whilst working with native, flexible vectors. The key word there being “native”.
Click to Select
Selecting objects feels natural in Fireworks, just like in other vector apps (i.e. Illustrator), to select an object on your canvas all you have to do is click it with the default Pointer tool (the black one), or if you want to select a specific point on a vector path or an object within a group, use the Subselection tool (the white one).
It doesn't matter which layer you are on when you select an object, but you can lock layers to avoid selecting them by accident. There is even a “Select Behind Tool” for selecting objects that are behind others.
The PNG Format
Something that confuses a lot of first time users of Fireworks is the native file format. Fireworks uses the Portable Network Graphics (PNG) file format, an open, extensible, patent-free format. The PNG format can store bitmap image data, but also other information, such as layers and values. Macromedia took advantage of this when they developed Fireworks.
The advantages are small file sizes and a familiar file format that is widely supported. The downside is confusion, some users don’t realise that a PNG file can also be a source file. And Fireworks users are at risk of accidentally overwriting source PNG files with flat PNG files without even realising, so be careful!
What Else is Different in Fireworks?
Working with Layers
In Fireworks the ‘Properties’ window is used for all settings, and you can click to select objects, so the layers window isn’t a major part of the Application workflow, if you come from a background of using Photoshop heavily, this concept can be a little difficult to adjust to.
A useful tip is to split your design up into just a handful of layers for easy locking, sharing and hiding/showing of sections of your design. For example, 5 layers called: Header, Navigation, Content, Sidebar and Footer for a basic web design concept.
If you want to group a selection of objects into a new layer then follow these steps:
•Use the Pointer tool to select all the objects you want to group
•Press CMD/CTRL + X to cut them from the document
•In the Layers window, click the folder with + icon button to create a new layer
•Highlight your new layer and give it a name (ie. "Header")
•Press CMD/CTRL + V to paste the objects in place, on the new layer.
Smart Auto Shapes
Fireworks has a set of what it calls “Auto Shapes”, and as the name suggests, these automatically draw preset shapes, you can find these as sub tools underneath the default Rectangle Tool (U).
Auto Shapes each have variable values, for example the amount of sides on a Polygon, or the radius of the points on a star. You can edit these values in the “Auto Shape Properties” window (Window > Auto Shape Properties), or using the yellow diamond shaped handles that appear on the shape.
Live Filters & Non-Destructive Adjustments
All effects are applied to objects rather than layers in Fireworks, so “Layer Styles” from Photoshop (ie. Drop Shadow, Bevel and Emboss etc.) are called “Live Filters” and can be found in the Properties window when an object is selected. Some of the benefits of Live Filters are the ability to arrange the order in which filters are applied to objects by dragging them, and stacking multiple instances of the same effect, for example you can have two Drop Shadows on the same object, something not possible with Layer Styles in Photoshop.
Live Filters are not limited to just effects though, you can also add non-destructive adjustments to images including Brightness & Contrast, Hue & Saturation, and Levels (Similar to recently added feature to Photoshop called “Adjustments”)
Pages, States & Layers
One of my favourite features in Fireworks is it’s ability to work with multiple Pages and States. If you have worked in Adobe InDesign before, then you will be familiar with the concept of Pages. Each page you have in a document, will have at least one state, and each state will have it’s own collection of layers.
Both Pages and States work in a similar way to Layers, except that you can only view a single page and one of it’s states at any time. You can add new ones or duplicate existing ones using the “Add/Duplicate” icon at the bottom of the appropriate palette (next to the trash icon). To duplicate, drag the existing page or state onto the Add/Duplicate icon.
Master Pages can be used to contain permanent elements across multiple pages, in particular things like background patterns or images can be kept in Master Pages. To create a Master Page, right click on an existing page and select “Set As Master Page” from the contextual menu, to apply your Master Page to another page, click in the space to the left of the page name to activate the link icon (as show in the screenshot).
Re-usable Symbols
Symbols are elements of a document that you plan to re-use multiple times in the design, prime examples are elements like generic buttons or sections of a design such as a header or footer that remains the same on all the pages in your document.
When you create a symbol it is stored in something called the “Document Library” (Window > Document Library), the symbols that you see in the Document Library are local to the current document. And you also have a “Common Library” (Window > Common Library) which is available application-wide to any document you are working on.
Any changes made to a Symbol will be reflected in all instances of it throughout your design (similar to Smart Objects in Photoshop). To create a new Symbol simply select an object or multiple objects in your design, right click and choose “Convert to Symbol” from the contextual menu.
Another handy tip is to convert any bitmaps to symbols before you transform them, this will preserve their original quality, no matter how much you distort or resize them..
Styles
Styles in Fireworks are similar to CSS rules on the web, you can define a library of “Styles” that store appearance information, such as fill & stroke styles, effects, and fonts.
If you are creating a website layout, you can define a Style for all headers and another Style for paragraph text, then if you decide to alter the Style of either, you only have to do it once and it will reflect on all elements with the same Style applied..
Time-saving Tips & Tricks
Simple Rounded Rectangles
Imagine that you’ve drawn a rectangle for the base of a button, and you have just decided you’d like it to have rounded edges. In Photoshop you would need to delete that first rectangle and redraw a new one with rounded edges, on top of that you even need to guess how rounded you want the edges to be before you draw it. This is completely counter-intuitive.
In Fireworks you have the option the modify the corner radius of any rectangle drawn using the default Rectangle tool. Locate the “Roundness” option in the Properties panel, you have the option of a percentage or pixel based value.
Pixel Precise Alignment
The Properties window allows you to set pixel precise dimensions for any object. A feature that isn’t easily accessible in Photoshop. No need to worry about measuring boxes with the marquee tool or working out percentages.
Snap To Pixel
Fireworks is very pixel-conscious, but if your vector paths do start looking a little blurry a simple right click on the object and “Snap To Pixel” and they are instantly sharp and pixel perfect.
Find & Replace
Has a client ever told you to change all of the headers in a design to different font or “just try a slightly different color”? For Photoshop users this is a ridiculously long-winded process, but with Fireworks, just like in CSS you can simply do a “Find and Replace” (Window > Find & Replace) to change all instances of a certain block of text, a font, color or URL instantly.
Export Pages, States and Layers
Got multiple different screen mock-ups you need to show to a client or a set of icons each on different layers that you need to save? In the File > Export dialog you can choose to export all Pages, States, or Layers as individual files in one click.
9 Slice Scaling
9 Slice Scaling is a way of intelligently resizing bitmap elements without losing quality, it only works on bitmaps with content that is stretchable though such as buttons with rounded corners.
Select Behind Tool
Because Fireworks is point and click to select objects, sometimes in layered designs you will end up an object that sits on top of another, obscuring it from view. The Select Behind Tool will let you select objects that are not visible because other something is else is on top of them.
Working With Photoshop
Need to share your files with other designs who use Photoshop? no problem, Fireworks supports the PSD format, it can open Photoshop documents and even save as PSD. The process isn’t flawless, but it is surprisingly good, you may just need to tweak your files in Fireworks after importing or tweak the export settings when saving files for Photoshop.
Extensions
Although not all of them are worth writing home about, there is definitely no shortage of “Plug-ins” or “Extensions” available for Fireworks
Two noteworthy extensions are the 960.gs and Export as Favicon commands. Speckyboy also featured a round-up of 75 great extensions.
Share Layers
A very interesting, useful feature is the ability to share Layers within your Fireworks documents, all you have to do is right click a layer which you want to appear on certain of your pages or in all of the states of a page etc. and click “Share Layer To…”
Any changes you make to a shared layer on any page or state will be reflected on all pages and states, so there is no need to make the same changes to your design more than once.
Conclusion
Of course, much like any of the Adobe Creative Suite applications, entire books could and have been written on mastering Fireworks for layout and interface design, so it’s important to remember that this guide has really only touched on the fundamentals for getting started. It’s up to you guys to take it further, and hopefully this will be the starting block for lot’s of designers out there who are new-comers to the application. I’d love to hear all of your thoughts on the article, experiences with Fireworks and any tips you’d like to add to the list.
Comments:
Learning to use Fireworks is one of those things that has been on my list for maybe 2 years now. There are still a lot of things I prefer about Photoshop, but it is basically indisputable that you can mock-up and complete a web design much much faster with Fw. Plus it has some other really sweet web-specific features that PS doesn’t have.
Anyhow, this is a great post, I will be reading it carefully
Don’t forget to mention the plugins QuickFire and Orange Commands. These to plugins make working with Fireworks even more of a dream.
After trying both ps and fireworks trials. I chosen fireworks mostly because it feels more nature to me for design mockups. The only thing i miss is resources like this, there seems to be very few fireworks resources and tutorials. Good article well written. thanks
This is great thank you. I can’t believe I’ve never noticed the Share Layers feature… It’s awesome!
Love seeing articles/tutorials about Fireworks! Keep it up guys!
Availaible resources http://fireworkslab.com/ and http://www.webportio.com is the best!
I’ve been using Fireworks for more than 10 years, and I can say it’s the perfect tool for webdesign.
It’s worth learning to use it. Simple and clever.
An aciant fan of Fireworks
thank
I use Fireworks exclusively. I use it for t-shirt designs, web designs and posters. I love it.
Hey,
Mason I must applaud you for sounding the alarm on this wonderful program. I like others have discovered this program and saw that it isn’t bad at all. I’m a new believer and making strides. Take a look at this battery I did: http://pixelignite.com/blog/view/battery_power
With each icon on a different layer, the source file!!!!
THIS IS AWESOME!!!!! HELPED ME SO SO MUCH!
THANKS FOR POSTING!!! :D
Great article. Love it!
It would be a nice point to add that you can use the properties inspector to resize a rounded rectangle without distorting the rounded-ness. This is a huge time saver.
Also, the 9 Slice section is a little confusing to me. This tool is not limited to bitmap objects. Anything can be 9 Slice sized.
Thank you for this amazing tutorial! This really sums up all of the reasons why you should work with Fireworks instead of Photoshop (or any other programme.) The effort & time you put into learning Fireworks will be the best ROI you ever had. At the company I work for we recently switched to using FW and now we have more (&more;) time for the fun stuff like coming up with great designs. And spend less (&less;) time to the boring stuff (repeting work, changing colors sitewide).
Functions I really love: Replace Color + Symbols + Snap to pixel! & The fact that you only save ONE document for all your pages & states!
I wish I had done this earlier..
I have never tried to use this fireworks for beginners but I am going to study and will try to use it.i have heard that this is much better compared to the others.
Adobe creative suites applications guide was inspired me to be a good designers, thank you for this amazing tutorial .This really sums up all of the reasons why you should work with Fireworks instead of Photoshop or any other program. learning of fireworks is one of those things that has been on my list.
These adobe fireworks were made for web designers for rapidly creating website prototype and applications interface. Fireworks intended for web design but it is also a capable vector editing tool and it works beautifully if your work is going to end up on a website. This is the best tool for screen design and better for creating web content!
“Despite sometimes feeling like the un-loved, adopted child to the Adobe Creative Suite family, Fireworks remains for a lot of professional web and user interface designers to be the most useful,”
yeah of course. Now i do understand what you mean here. Thanks a lot for all the help.
I have always read about Fireworks but I just forget about it when I read other stuffs that I can easily understand. This post is far more interesting and informative so I guess it’s time to learn the works. Even if I am a Photoshop addict, I don’t want to deprive myself of this innovation.
Man you rock at creating tutorials. I wish all tutorials on the web were this easy to understand. I went to art school and didn’t learn anything about Adobe Fireworks, we spent a lot of time in Indesign and Photoshop, so this is great information. Thanks!
The one thing I love about Adobe is that all of their products are similar. They all seem to use layers, etc. If you understand one program you can usually figure the others out without too many problems. Thanks for this excellent tutorial!
I have always been thinking about using Fireworks especially that it can speed up a lot of work compared to Photoshop. A friend of mine tried this already and he is so impressed with the natural mockup designs. I just hope that there are plenty of resources to learn Fireworks so that I can kick in.
I find fireworks so much better than photoshop… I just love the software!
I have been a Photoshop fan for years now and I never have any complaint about it. But knowing about Fireworks is another story. Of course I won’t miss the chance of trying out this tool and come up with some mock up designs. Hmm, this will really be fun.
Thx for the tutorial. By the way I’m maybe dumb or something but I would like to display the selection border active not only when an element is rolled over by the pointer. But also when it is actually selected. Same feature as Photoshop. Do you know how I can do this?
Thx,
Jb
It is really great to know of a new method to work on designs that will not take a lot of time. We are always looking for the most effective and quickest platform that will make us achieve our dream design. I will want to try Fireworks and see how it makes magic for me.
hey ! this is a great article, i can’t wait using Fireworks !