Fireworks is a hybrid graphics program that allows you to simultaneously edit both vector and bitmap images within the same document. Primarily combines the features of Photoshop and Illustrator, although it also has elements in common with Flash (such as making and nesting buttons). It is a very good tool to use for laying out website mock-ups, to give you a visual reference when programming a webpage. The tool bar has more in common with Illustrator than Photoshop because of it’s vector capacity (i.e. instead of the
swatches in the tool bar toggling between foreground and background color, you have stroke and fill colors). Fireworks does not support the smart objects and adjustment layers features of Photoshop.
Import files into a document instead of placing. When you import, you can determine the size the imported file will be by clicking and dragging (or click only once to maintain the original size). Placing your cursor between 2 guides and holding down the shift
key will bring up a pop-up indicating the distance between the guides.
Window–>Extensions–>Kuler: panel that connects you to an RSS feed from the Kuler website and allows you to use the Kuler features within Fireworks instead of opening a separate webpage. Button in the lower right corner of the Kuler panel will allow you to import a chosen color theme into you swatch menu.
To create a symbol, select the object you wish to covert and press the F8 key. This will bring up a ‘convert to symbol menu’. You can tell that something is already a symbol if you click on it and a plus sign appears.
Symbols can be nested.
Common library–>(categories to choose from): archive of pre-made symbols you can use. Drag and drop from the library panel if you want to use one.
In Fireworks there are lots of premade templates which are already the sizes of various applications (such as for different screen sizes of mobile devices or standard monitor resolutions, etc). Some have premade grids that are ideal for layout a standard webpage. (These are under ‘grid system’.)
The content of the properties panel changes based on the objects or tools you have currently selected.
The native file format for Fireworks is ‘Fireworks PNG’. The Fireworks PNG is editable, and supports layers. Regular PNGs are flattened and not editable. The editable PNG is of course larger file sizes than standard PNGs so if you are working on a file to be uploaded to the internet you should export as a regular PNG when you are finished.
The controls to optimize a file are built right into the main interface of fireworks.
Working with vector in Fireworks:
You can change the edge of a path (like giving it a feathered edge) directly from the properties menu, instead of having to apply a filter like a blur, etc in Illustrator. You can also add effects to your stroke (like a charcoal, airbrush, etc, effect.)
With the pen tool you can change if an anchor point is for a curved or straight line simply by clicking it with the pen tool (simpler than having to use a special ‘convert anchor’ setting under a pen drop down like in Illustrator.)
** To delete an anchor point you have to click on the point twice (the first time converts it, the second time deletes it.) There is no ‘delete anchor point’ pen option under the pen icon on the tool bar like in Illustrator.
You can apply pre-made textures to the fill of a path (in the properties menu). You can also add effects such as shadows and glow from the filter drop down menu in the properties menu. These are “live filters”.
Nine slice scaling – Divides a selected object with a grid of 9 segments. You can move
around the lines marking the divisions. When you scale, only the center squares of the grid will distort, the outer corners will retain their original dimensions. Good for stretching out the center of an object without having to cut it apart.
You can make a stroke dashed with the ‘edit stroke’ menu in the properties menu. You can set numeric values for both the dash and the gaps between the dashes.
If you save a custom stroke it will not appear directly in the stroke menu, but under a drop-down from the category the stroke was created under (i.e. pencil stroke, etc.)
pixel = “picture element”
The direction of lines on your page conveys different moods and effects. Diagonal lines create movement. Jagged lines create tension, agitation.
Adding rounded corners to boxes makes your page feel more organic. The easiest way to get rounded corners is with CSS3, although not all browsers will support it, so it is best to use rounded corners in a subtle manner where the design won’t be noticeably disrupted if the browser loads the corners as square instead.
Rotated objects add more interest to a page design. The standard way to achieve this is by rotating the image before inserting it into the page (transform in Photoshop and save image pre-rotated). An image can also be rotated after adding it to the page, through CSS3, although like the rounded corners, this will not load properly in every browser.
Economy of Line –
Using as few lines as possible to achieve maximum impact with a design.
Create depth and volume with light and shadow.