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 the most useful s… basically, a collection of all the tools a web and app developer needs to get the best out of Adobe Fireworks.
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.
Download Interactive Full Website Template and Logos for Fireworks »
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.
Fireworks Template & Common Library for Flex Applications »
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.
Fireworks Template for Wireframing »
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.
Background Image Grid to Lay-Out Your Web Site Template »
You can either download the 12 column version or the six column version, and both includes a 16px baseline grid.
Fireworks 975px Template Grid Systems »
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.
Firefox Browser Template (Mac) for Fireworks »
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.
Common Library – Browser Cursors »
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.
Nokia S60 Wireframing Stencils for Fireworks »
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.
48 Ultimate Web 2.0 Styles for Fireworks »
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.
Fireworks AutoBackup Utility »s
You might also like…
70+ Adobe Fireworks Resources – Is there a future for Fireworks? »
75 Powerful Adobe Fireworks Extensions – It really can be as Great as Photoshop! »
50 Fundamental jQuery Controls, Components and Plugins »
HTML5 video Libraries, Toolkits and Players »
15 CSS3 Navigation and Menu Tutorials and Techniques »
20 CSS3 Tutorials and Techniques for Creating Buttons »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
50 Useful Tools and Generators for Easy CSS Development »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
20+ Resources and Tutorials for Creative Forms using CSS »