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?
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.
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”.
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.
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!
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:
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.
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”)
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).
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 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..
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.
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.
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.
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.
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 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.
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.
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.
Although not all of them are worth writing home about, there is definitely no shortage of “Plug-ins” or “Extensions” available for Fireworks
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.
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.