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.