- March 18th, 2008
- 127 Comments
Adobe Fireworks is the industry leader for prototyping and rapid web-site building. Some of you may not be aware of this, as you may be using Photoshop for each phase of web-site production. The articles, tutorials, and resources gathered here will convince you of the power of this application.
Fireworks uses the native PNG format to keep layered file sizes down. It has multi-page rapid prototyping abilities. It can quickly export code for client reviews at each stage of the design process. It has industry grade exporting and image optimization abilities. In fact, it is the tool of choice for information architects and web designers that build large corporate websites. Why? Well, there is a good reason behind it.
For rapid prototyping and site layouts Adobe Fireworks is definitely an option worth considering.
What is Fireworks good for?
There is a lot of confusion about what exactly Adobe Fireworks is, what it is good for and why one should actually use it instead of Adobe Photoshop or Adobe ImageReady. The answer is simple: Fireworks isn’t a replacement for both tools, but rather a more effective, integrated environment for designing site layouts and quick mockups.
As Stéphane Bergeron puts it2, “Fireworks was designed from the ground up specifically for the task of creating website layouts and graphics in an efficient, flexible manner. It is a creative powerhouse that can really do it all, from the creative visual design stages to the slicing, optimization, and exporting of finished web graphics.”
In fact, Fireworks offers a lot of benefits for web developers:
- you don’t need to switch between applications to accomplish different tasks because its tool set is deep enough to cover most of your needs. Both bitmap and vector tools are integrated in one single environment allowing developers to manipulate the layout right away,
- you can select any object and immediately read and set its size and location — Photoshop doesn’t offer such level of flexibility,
- you can use high-quality output and efficient optimization features, reducing the size of Web-ready images while you are designing the layout,
- you can use libraries and templates with Web-elements such as e.g. form buttons — you don’t need to draw them first,
- you can export your Fireworks-mockups to other applications — Fireworks is designed to integrate with other former Macromedia products, such as Adobe Dreamweaver and Adobe Flash.
Adobe Fireworks offers Photoshop and Illustrator integration, multipage support and intelligent scaling.
Fireworks is an optimal tool for quickly prototyping and building web-sites. It is more intuitive and more light-weight compared to other titans of the industry. It is also included in the Adobe’s Creative Suite 3. Below you’ll find Fireworks tutorials which will help you to improve your skills and become more efficient when designing web-sites. Hopefully, they’ll also help you to produce professional and maintainable results.
Apple Air Banner in Fireworks8
The tutorial author states that the reasons for creating this tutorial are to showcase the simplicity and beauty of apple style design in Fireworks. Follow along and you’ll be able to create these designs quickly as well.
Rapid Fire #1: Photo-Realistic10
The website SixThings11 has a professional multi-part tutorial series showing quick techniques for improving your imaging abilities in Fireworks. This is part one. As of the time of this writing the series is up to eight rapid fire parts.
Create Vista-like Wallpapers with Fireworks19
Popular wallpapers available for modern operating systems can be created just as professionally in Fireworks as Photoshop or Illustrator. Learn the Fireworks way in this tutorial.
Fireworks for Illustration25
Alex Walker gives some tips for improving your drawing skills in Sitepoint’s Design View newsletter. He has this to say, “Fireworks has evolved to become an exceptionally good illustration tool. In fact, over the past 18 months, Fireworks has been the primary drawing tool that I’ve used to prepare SitePoint’s feature article illustrations.”
Vector Masking Interlocking Letters35
This is just one of many Fireworks video tutorials available on You Tube36. In this tutorial learn how to create overlapping vector letters quickly with the mask tool.
Fireworks PNG Downloads
Downloading artwork and reviewing its layers reveals how it was created. Adobe has some excellent source files available for review at Fireworks Developer Center – Samples38. Some of these samples are shown below.
The designers at Rocket Theme48 release new Joomla49 template designs every month. They switched from using Photoshop to using Fireworks to take advantage of Fireworks rapid website design abilities. Download and review one of their sample templates available through Adobe.
Sometimes it’s easier to ask an expert directly instead of browsing through hundreds of tutorials trying to solve a problem by yourself. Fireworksguruforum51 will help you to find answers to your question. Besides, the forum also provides a number of tutorials and resources related to Fireworks. Below are some of the Tutorials and PNG downloads posted to this forum.
As a tutorial this is short and incomplete. Though it is a beautiful and fun icon design created in Fireworks. The way that each piece is shown will give you an idea of how this was created. The artist also give some tips as well.
Using Blend Paths to Create Wavy, Abstract Background Effects56
This is a step by step tutorial that shows you how to create linear blends and popular wavy abstract line designs. These types of designs make great header backgrounds.
Articles About Fireworks
Rapid prototyping in Fireworks CS361
“Adobe Fireworks CS3 is a fantastic tool for quickly building out rich Internet applications. Adobe has recognized this ‘niche’ and, in Creative Suite 3, added a number of new features that make it even more compelling in the specific area of rapid prototyping.” Learn the process of making real world application prototypes with Fireworks.
Using Fireworks CS3 to design effective, interactive site presentations63
This article reviews the process of telling interactive stories with Fireworks. Learn the process of creating interactive design presentations.
Export CSS painlessly from website comps in Fireworks65
A Technical article showing you the process of setting up and exporting CSS in Fireworks.
Fireworks: The Things You Might Have Missed68
There are often interesting or powerful features that are missed by new users of any program. Review a set of tips aimed at showing you these often missed features of Fireworks.
You can find more Fireworks tutorials and resources in the links below.
- Adobe Support: Fireworks Tutorials70
Getting Started: Tutorial and Article Index from the Fireworks developers.
- CommunityMX: Fireworks tutorials71
An enormous collection of Fireworks tutorials, however not for free.
- Free fireworks 8 video tutorials72
Learn how to slice up web pages and export in any format in a few easy steps all with Fireworks and video-tutes free video tutorials.
- Qrayg Fireworks Tutorials73
Learn advanced Adobe Fireworks tutorials that can help you better understand how to make your site more visually appealing. These tutorials were written for users who have a very strong understanding of Fw.
- Adobe Fireworks Design Center75
- Adobe Design Center Videos76
- Adobe Video Workshop77
A bunch of free and professional Fireworks video tutorials.
Over 100 various tutorials for Adobe Fireworks.
- Firework Zone80
- Fireworks Product Page81
- Adobe Fireworks Developer Center82
- Adobe Photoshop Tutorials: Best of83
- Adobe Illustrator Tutorials: Best Of84
- Adobe Flash Tutorials: Best Of85
- 1 http://www.adobe.com/products/fireworks/
- 2 http://www.adobe.com/devnet/fireworks/articles/why_fireworks.html
- 3 http://www.adobe.com/products/fireworks/
- 4 http://www.flisterz.com/2007/12/01/adobe-fireworks-glowing-light-trail/
- 5 http://www.flisterz.com/2007/12/01/adobe-fireworks-glowing-light-trail/
- 6 http://www.adobe.com/devnet/fireworks/articles/creating_icon.html
- 7 http://www.adobe.com/devnet/fireworks/articles/creating_icon.html
- 8 http://abduzeedo.com/apple-air-banner-fireworks
- 9 http://abduzeedo.com/apple-air-banner-fireworks
- 10 http://www.brownbatterystudios.com/sixthings/2006/03/06/rapid-fire-1-photo-realistic/
- 11 http://www.brownbatterystudios.com/sixthings/
- 12 http://www.brownbatterystudios.com/sixthings/2006/03/06/rapid-fire-1-photo-realistic/
- 13 http://www.fireworkszone.com/index.php?root=2&extension=&idTutorial=331&pageCourante=1
- 14 http://www.fireworkszone.com/index.php?root=2&extension=&idTutorial=331&pageCourante=1
- 15 http://qrayg.com/learn/fireworks/waterdrop/
- 16 http://qrayg.com/learn/fireworks/waterdrop/
- 17 http://www.voidix.com/fireworks_motion_trail.html
- 18 http://www.voidix.com/fireworks_motion_trail.html
- 19 http://firetuts.com/2007/12/21/create-vista-like-wallpapers-with-fireworks/
- 20 http://firetuts.com/2007/12/21/create-vista-like-wallpapers-with-fireworks/
- 21 http://www.quantunet.com/fireworksstudio8/skills/samples/fading_image_background_color.html
- 22 http://www.quantunet.com/fireworksstudio8/skills/samples/fading_image_background_color.html
- 23 http://imasters.com.br/artigo/3417/fireworks/fireworks-aqua
- 24 http://imasters.com.br/artigo/3417/fireworks/fireworks-aqua
- 25 http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=27
- 26 http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=27
- 27 http://www.fireworkszone.com/index.php?root=2&extension=&idTutorial=364
- 28 http://www.fireworkszone.com/index.php?root=2&extension=&idTutorial=364
- 29 http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=18
- 30 http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=18
- 31 http://www.adobe.com/devnet/fireworks/articles/collage_print.html
- 32 http://www.adobe.com/devnet/fireworks/articles/collage_print.html
- 33 http://www.adobe.com/devnet/fireworks/articles/3d_rotate_command.html
- 34 http://www.adobe.com/devnet/fireworks/articles/3d_rotate_command.html
- 35 http://www.youtube.com/watch?v=yT1s50IMpNg
- 36 http://www.youtube.com/
- 37 http://www.youtube.com/watch?v=yT1s50IMpNg
- 38 http://www.adobe.com/devnet/fireworks/?navID=samples
- 39 http://www.adobe.com/devnet/fireworks/samples/xd_brownbag.html
- 40 http://www.adobe.com/devnet/fireworks/samples/xd_brownbag.html
- 41 http://www.fireworkszone.com/?p=139
- 42 http://www.fireworkszone.com/?p=139
- 43 http://www.adobe.com/devnet/fireworks/samples/pen_gradient_showcase.html
- 44 http://www.adobe.com/devnet/fireworks/samples/pen_gradient_showcase.html
- 45 http://www.dezinerfolio.com/2008/02/29/web-20-styles-for-fireworks/
- 46 http://www.dezinerfolio.com/2008/02/29/web-20-styles-for-fireworks/
- 47 http://www.adobe.com/devnet/fireworks/samples/rokwebify.html
- 48 http://www.rockettheme.com/
- 49 http://www.joomla.org
- 50 http://www.adobe.com/devnet/fireworks/samples/rokwebify.html
- 51 http://www.fireworksguruforum.com
- 52 http://www.fireworksguruforum.com/index.php?showtopic=6891
- 53 http://www.fireworksguruforum.com/index.php?showtopic=6891
- 54 http://www.fireworksguruforum.com/index.php?showtopic=6883
- 55 http://www.fireworksguruforum.com/index.php?showtopic=6883
- 56 http://www.fireworksguruforum.com/index.php?showtopic=7251
- 57 http://www.fireworksguruforum.com/index.php?showtopic=7251
- 58 http://www.fireworksguruforum.com/index.php?showtopic=6830
- 59 http://www.fireworksguruforum.com/index.php?showtopic=6830
- 60 http://www.adobe.com/devnet/fireworks/articles/wireframing.html
- 61 http://www.adobe.com/devnet/fireworks/articles/rapid_prototyping.html
- 62 http://www.adobe.com/devnet/fireworks/articles/rapid_prototyping.html
- 63 http://www.adobe.com/devnet/fireworks/articles/mockup_pages.html
- 64 http://geniantsandbox.com/2008/01/08/enterprise-fire-flow
- 65 http://www.adobe.com/devnet/fireworks/articles/smart_css_03.html
- 66 http://www.adobe.com/devnet/fireworks/articles/rapid_prototyping.html
- 67 http://www.adobe.com/devnet/fireworks/articles/gallery_mockup_02.html
- 68 http://www.senocular.com/fireworks/tutorials/mighthavemissed/
- 69 http://www.pixelyzed.com/pixelforge/whychoosefireworks/
- 70 http://www.adobe.com/support/fireworks/tutorial_index.html
- 71 http://www.communitymx.com/category.cfm?catID=3&typeid=2
- 72 http://www.video-tutes.com/packages/FWDesign1.php
- 73 http://qrayg.com/learn/fireworks/
- 74 http://qrayg.com/learn/fireworks/
- 75 http://www.adobe.com/cfusion/designcenter/search.cfm?product=Fireworks
- 76 http://www.adobe.com/designcenter/video_workshop/
- 77 http://www.adobe.com/designcenter/video_workshop/
- 78 http://www.tutorialized.com/tutorials/Fireworks/1
- 79 http://firetuts.com/
- 80 http://www.fireworkszone.com/
- 81 http://www.adobe.com/products/fireworks/
- 82 http://www.adobe.com/devnet/fireworks/
- 83 http://www.smashingmagazine.com/2008/01/10/adobe-photoshop-tutorials-best-of/
- 84 http://www.smashingmagazine.com/2008/02/05/illustrator-tutorials-best-of/
- 85 http://www.smashingmagazine.com/2008/01/17/adobe-flash-tutorials-best-of/