Adobe Fireworks’ features and work-flow undeniably make it the industry pioneer and leader for web graphic prototyping and rapid web site building.
Even though, with each new version, Adobe have slowly over-loaded it with new features – some of these have proved to be useful and popular, while others have simply been pointless – but at its core it will always remain a marvelously easy to use application for web designers. Despite the odd bug and the odd feature, it really is awesome!
This post is not your typical Fireworks post. There are no tutorials and not too many source files. What it is is a collection of all the Adobe Fireworks resources a web and app developer needs to get the best out of it.
Orange Commands is an amazing collection of over 90(!) commands, grid templates and web element templates (checkbox, textfield, sliders…) all compatible with Adobe Fireworks CS3, CS4 and now CS5, all developed to make the life of a web designer easier.
The 90 or so commands/extensions will allow you to manage alignment, alpha, canvas, color, effects (including a lightbox), grids, guides, pages, position, properties, size, text… and much more. Much More!
Orange Commands – Workflow Automation for Fireworks »
To complement the CSS Export feature in Fireworks CS4, Adobe have created a series of prebuilt templates that are ready for export, and a perfect tool to help you get to grips with designing with this tool and CSS.
Within the download package, there are five template variations in two flavors – one suitable for exporting from the shipping version of the CSS Export feature and the other for the enhanced version of the export feature.
Here are the templates that are included in the download:
• 960 Wide 2 Col with Side Nav: Two-column template with header (using background images), side navigation (using three-slice technique), footer, content area, and three foreground images.
• 960 Wide 2 Col with Top Nav & Side Nav: Two-column template with header (using background images), top navigation, side navigation (using three-slice technique), footer, content area, and three foreground images
• 960 Wide 2 Col with Top Nav & Sub Col: Two-column with header template (using background images), top navigation, sub-column (using three-slice technique and form components), footer, content area, and three foreground images
• 960 Wide 3 Col with Side Nav & Sub Col: Three-column template with header (using background images), side navigation (using three-slice technique), sub-column (using three-slice technique and form components), footer, content area, and two foreground images
• 960 Wide 3 Col with Top Nav, Side Nav & Sub Col: Three-column template with header (using background images), top navigation, side navigation (using three-slice technique), sub-column (using three-slice technique and form components), footer, content area, and two foreground images
Fireworks makes it really easy to mock up a website without touching even one line of code. This free website layout sample file contains all the basic pages required to build a website – all of the pages are linked together and ready to be exported for a quick visual preview before coding even begins.
Fireworks makes wireframing Flex applications extremely easy by using the Common Library. The free template, from this tutorial, has been especially designed for Flex development and is choc-full of useful web elements (accordion, button, textInput, textArea…) all available from its common library.
The Master Page of this template has been already set up, so you can edit the Main Navigation, Functional Nav, Footer Nav, Logo, etc. layers, making it easier for you to add additional Pages which will contain these visuals.
This is not just another grid template, it takes things a little bit further. It is a very detailed grid background which, with the source files, allows you to tailor the grid and customize it to your needs.
You can either download the 12 column version or the six column version, and both includes a 16px baseline grid.
You can either download the 12, 16 or 24 column 960 Grid-System templates.
960 Grid-System Template for Fireworks »
This grid template includes a layer with a 12-column grid and horizontal grids for setting type, based on the writings of Richard Rutter and Mark Boulton. The column grids are based on the 960.gs, while the horizontal grid lines are from CSS Trick's "Typographic Grid".
12-col Typographic Grid for Fireworks »
This is a 1024px editable browser template of the Firefox Browser interface for Mac. Some elements have been de-colorized to allow your work to shine through.
These Firefox browser templates are available in both 1024x768px and 800x600px.
Firefox Browser Template (Windows) for Fireworks »
These Internet Explorer browser templates are available in both 1024x768px and 800x600px.
Internet Explorer Browser Template (Windows) for Fireworks »
This is a set of blueprint ink style rich (meaning they have items that you can change in the symbol properties) symbols for wireframing.
Wireframe Library Symbols »
These are a set of most commonly used browser cursor icons, which can be used in your mockups by just dragging and dropping them from the common library panel in Fireworks.
These stencils include components for S60 5th Edition touch devices and S60 3rd Edition non-touch devices. This package includes stencils for S60 5th Edition touch devices and S60 3rd Edition non-touch devices, both in Adobe Illustrator CS4 format and Adobe Fireworks CS4 format.
With these cool pre-made Styles you can easily give a nice looking gradient effects fto website elements like web 2.0 headers, backgrounds, buttons or any web based designs.
Auto Backup is an Adobe AIR application that helps you to automatically keep creating backups of all your .png files which are being modified, while working Fireworks. A copy of the working file is automatically saved at a user-specified interval inside a folder named FWAIRBackup which is located in the same path as that of the original file.