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
Download Prebuilt CSS Templates for Fireworks »
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 Yahoo! Common Library Stencils for Fireworks »
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 »
Wireframe Diagram Templates for Fireworks »
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 »
Fireworks Blueprint CSS Template »
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 »
Flow Chart 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 »
iPhone GUI as Rich Symbols for Fireworks »
Fireworks Toolkit for Creating iPhone UI Mockups »
Fireworks GUI Template for Android »
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 »
Dedicated Fireworks Texture Gallery (Over 300 Free Textures) »
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
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 – Workflow Automation for 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 »
Prebuilt CSS Templates 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
Download Prebuilt CSS Templates for Fireworks »
Interactive Full Website Template and Logos for Fireworks
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 Template & Common Library for Flex Applications
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 Yahoo! Common Library Stencils for Fireworks
The Yahoo! Common Library Stencils for Fireworks »
Fireworks Template for Wireframing
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 »
Wireframe Diagram Templates for Fireworks
Wireframe Diagram Templates for Fireworks »
Background Image Grid to Lay-Out Your Web Site Template
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 »
Fireworks 975px Template Grid Systems
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 »
960 Grid-System Template for Fireworks
You can either download the 12, 16 or 24 column 960 Grid-System templates.
960 Grid-System Template for Fireworks »
12-col Typographic Grid 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 »
Fireworks Blueprint CSS Template
Fireworks Blueprint CSS Template »
Firefox Browser Template (Mac) 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 »
Firefox Browser Template (Windows) for Fireworks
These Firefox browser templates are available in both 1024x768px and 800x600px.
Firefox Browser Template (Windows) for Fireworks »
Internet Explorer Browser Template (Windows) for Fireworks
These Internet Explorer browser templates are available in both 1024x768px and 800x600px.
Internet Explorer Browser Template (Windows) for Fireworks »
Wireframe Library Symbols
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 »
Flow Chart Library Symbols
Flow Chart Library Symbols »
Common Library – Browser Cursors
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 »
iPhone GUI as Rich Symbols for Fireworks
iPhone GUI as Rich Symbols for Fireworks »
Fireworks Toolkit for Creating iPhone UI Mockups
Fireworks Toolkit for Creating iPhone UI Mockups »
Fireworks GUI Template for Android
Fireworks GUI Template for Android »
Nokia S60 Wireframing Stencils for 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.
Nokia S60 Wireframing Stencils for Fireworks »
Dedicated Fireworks Texture Gallery (Over 300 Free .png Textures)
Dedicated Fireworks Texture Gallery (Over 300 Free Textures) »
48 Ultimate Web 2.0 Styles 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 »
Fireworks AutoBackup Utility
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
