Fireworks was originally created as an image editing and web design application by Macromedia, for quick web mock-ups, and optimizing images for the Web. It has since been transformed into a powerful environment for designing and prototyping applications that integrates easily with Dreamweaver, Flash and Photoshop &ndash making it, perhaps, the most powerful (that’s controversial) and versatile graphic editor.
Fireworks has always had the reputation of being Adobe Photoshop’s little brother and a graphic editor for amateurs. The truth is, some Photoshop users have underappreciated the power of Fireworks, misunderstood its purpose, and seem to be reluctant to move their design workflow to Fireworks.
In this post, you will learn how powerful Fireworks can be and you will see how easily it can be used for any design project, whether you are a graphic designer or web designer. Would you consider changing from Photoshop?
Download Adobe Fireworks CS4
To download a trial-version of Fireworks CS4, you will need to create an account with Adobe. It’s quick and painless and definitely worthwhile. After the sign-up you can download trial and beta software (of all Adobe products) and download free product extensions; you will also get an access to the community areas, read members-only white papers and watch seminars.
Fireworks Basics and Overview Link
Adobe Fireworks Developer Center3
If you are just starting out with Fireworks, the best place to start is with Adobe. The Fireworks Developer Center offers a great range of getting-started tutorials, downloadable samples (animated gifs, CSS templates and png source files, downloads, and technology overview articles.
Design Learning Guide for Fireworks CS44
The Design Learning Guide gives you an in-depth overview of the many features of Fireworks CS4, from integration with Adobe Photoshop, Adobe Illustrator, Adobe Dreamweaver, and Adobe Flash, to learning about how Live Filters make it easy to add graphic effects to vector and bitmap objects, learn how to design web layouts faster using specialized tools, such as the 9-slice scaling tool, tooltips, and Smart Guides and use the updated Path panel’s vector manipulation tools to combine, alter, extrude, and blend paths. This is a must bookmark for any Fireworks pro or novice.
Fireworks CS4 10 Part Video Overview from Layers Magazine Link
Layers Magazine has a 10 part video series covering the many features of Fireworks CS4, from tutorials, quick tips and covering some Fireworks’ lesser known tools.
- Part 16
Part 1 talks about the new Fireworks CS4 Interface and creating/adjusting shapes in the Canvas of a document using the new Smart Guides feature.
- Part 27
Learn how to use the Align and Combine Paths option to create shapes, as well as the new Real Time Gradient options.
- Part 38
Part 3 talks about some of changes with regards to text in Fireworks CS4.
- Part 49
learn about the new features when importing Illlustrator and Photoshop files in Fireworks CS4.
- Part 510
Part 5 goes over the merging of graphic and paths, grouping of multiple layers, locking layers, and masking in Fireworks CS4.
- Part 611
Working with Styles and the aligning of text boxes in Fireworks CS4.
- Part 712
Learn how to use the libraries in Fireworks CS4 to quickly add form elements to a column in a page.
- Part 813
In this part, you will be taken through the steps of creating a Master Page Web Design and adding additional pages to the PNG file.
- Part 914
In this tutorial, you will be taken through the process of slicing and linking multiple pages for a web comp using Fireworks CS4.
- Part 1015
Fireworks CS4 allows you to export your comp in a variety of formats, but the newest way to package this comp is the Adobe PDF format. With the Adobe PDF format you can create an interactive page that gives you all of the benefits of interactivity with security, all in a single file.
Prototyping, Wireframing and Web Design Link
Designing a Website in Fireworks CS4 – Adobe MAX Tutorial Session16
Fireworks CS4 helps you rapidly prototype websites, application interfaces, and other interactive designs. Attend this session to learn how to create, edit, and optimize web graphics faster and more accurately. Get tips on how to demo your design live or e-mail interactive PDF files to clients. Find out how to make the most of the new user interface and core functionality, such as consistent text handling with the Adobe text engine. Then learn how to output your designs to the application platform of your choice: Adobe AIR, Flash CS4 Professional, Flex, HTML, or CSS-based layouts.
Quickly Mock Up a Business Website- Adobe MAX Tutorial Session
Discover the power and speed of Fireworks CS4 as they design a two-page prototype of a business website in real time. During this session, you’ll learn about best practices for organizing layers, using pages, working with common design tools, applying blend modes, slicing designs, and more.
Designing Effective CSS and HTML Websites – Adobe MAX Tutorial Session
Gain real-world insights into the limitations of designing websites in CSS and HTML. Then learn new techniques in Fireworks CS4 for working within those constraints and producing the most effective standards-based website designs. You’ll leave this class with productivity-enhancing tips on how to design and export website prototypes as CSS and images.
Fireworks CS4 Beta for Web Design17
This tutorial from Layers Magazine gives you an in-depth overview into web design prototyping with Fireworks CS4. The author of this tutorial is convinced that after reading his tutorial and trying Fireworks you will never go back. He is probably right, so, if you love your current graphic editor or protoyping tool don’t read this tutorial!
Wireframing with Fireworks CS3
Wireframes are barebones sketches of your website or application that you can use to demonstrate, document, and often validate the functionality of a design without any distracting pixel artistry. The author of this tut offers his views on Fireworks prototyping and some useful techniques.
Export CSS Painlessly from Website Comps in Fireworks21
This article discusses the export extension, SmartCSS Exporter, for producing HTML files with CSS in Fireworks. With this extension, you will be able to generate usable, production-ready HTML and CSS files with ease.
Designing and Implementing a Spry Menu
In this article you will be shown how to insert a Spry menu bar into an existing HTML document, design and export a new skin in Fireworks, and implement this skin into the Spry menu bar using CSS.
Drop Down Menu Navigation23
In this tutorial you are going to learn how to create drop down menu using Adobe Fireworks CS4. Drop down menus are displayed in a browser when the user moves a pointer over or clicks a triggering web object, such as a slice. You can attach URL links to drop down menu items for navigation.
Rollover Images/Buttons Effect25
Using Rollover Buttons & Images is one of the most common web design ideas because of its simplicity, creating rollover buttons or images with Fireworks and Dreamweaver make this even easier.
Create a Slideshow in Adobe Fireworks CS427
This tutorial will teach you how to create a beautiful slideshow gallery with transition effects, categories, captions and resizable images in Fireworks CS4.
Creating reusable, flexible, custom Ajax loading animations29
Everybody’s seen them. The nice swirly loading animations that accompany many Ajax web applications. But just how easy is it to create your own? With this technique, you’ll be creating one for every project in a matter of minutes using Fireworks.
Create a Robust Flash Based Autoplay Slideshow Photo Gallery in minutes31
In this video you will learn how to create a Flash based slideshow photo gallery in Fireworks.
Prototyping a Web Design33
In this video you will explore the layout feature enhancements from Fireworks CS4, including pixel-precise guides, the new smart guides, tooltips, which contain X and Y coordinates to help you place elements within your design.
Designing a Website Application34
This tutorial shows you the process of creating a website application in Adobe Fireworks CS4—from sketching the original page design to developing wireframes, to creating the final design.
Fireworks Web App and Mobile Tutorials Link
Prototyping AIR applications with Fireworks36
This article provides step-by-step instructions to turn a concept into a design, add interactions and export the prototype to a packaged AIR application using the features available in Fireworks CS4.
Designing and Prototyping Flex Applications39
It is not very well known that Fireworks can also be used to design Adobe Flex applications, with the combination of bitmap editing and vector manipulation tools, along with Flex integration features, make Fireworks an ideal tool for designing Flex applications.
Fireworks CS4 Flex Skinning41
In this video tut learn how to use the Flex skinning commands in Fireworks CS4 and allow quick access to skin design elements so that you can edit the appearance with ease.
Fireworks Web Design Mockup Tutorials Link
Fireworks Design Tutorials Link
Hand Drawn Styles
Fun With The Satin Gradient
Design Video Tutorials Link
Create A Youtube Profile Picture In Adobe Fire Works CS3
Fireworks Effects and Tecniques Link
Fireworks Icons and Buttons Tutorials Link
Fireworks Text Effects Link
Fireworks Animation Tecniques and Tutorials Link
How to make Animations and Animated Graphics161
In this simple guide to making animations in Adobe Fireworks, follow the step by step tutorial and learn in no time, how to created animations and animated graphics for the web.
Animated Stickman – Tweening Animation163
You’re going to use symbols and tweening to animate a stickman, this is a method of animation that is better known for Flash development. You’ll also take a look at onion skinning and distributing to frames, all techniques that are useful for animation in Fireworks. Animate your stickman and make him look alive using tweening, onion skinning and distributing to frames.
Creating an Animated GIF using Fireworks167
Learn how to design Animated GIFs using Fireworks MX onwards. The custom animation is broken down into frames, which contains the sequential images and objects that make up each step of the animation.
Further Reading Link
- iOS Prototyping With TAP And Adobe Fireworks (Part 1)171
- Simulating The Letterpress: From Live Filters In Fireworks To CSS Code172
- Useful Fireworks Techniques And Features For Large Design Teams173
- 1 http://www.adobe.com/products/fireworks/
- 2 http://www.adobe.com/products/fireworks/
- 3 http://www.adobe.com/devnet/fireworks/?view=home
- 4 http://www.adobe.com/devnet/fireworks/learning_guide/design/
- 5 http://www.layersmagazine.com/fireworks-cs4-overview-part-1-of-10.html
- 6 http://www.layersmagazine.com/fireworks-cs4-overview-part-1-of-10.html
- 7 http://www.layersmagazine.com/fireworks-cs4-overview-part-2-of-10.html
- 8 http://www.layersmagazine.com/fireworks-cs4-overview-part-3-of-10.html
- 9 http://www.layersmagazine.com/fireworks-cs4-overview-part-4-of-10.html
- 10 http://www.layersmagazine.com/fireworks-cs4-overview-part-5-of-10.html
- 11 http://www.layersmagazine.com/fireworks-cs4-overview-part-6-of-10.html
- 12 http://www.layersmagazine.com/fireworks-cs4-overview-part-7-of-10.html
- 13 http://www.layersmagazine.com/fireworks-cs4-overview-part-8-of-10.html
- 14 http://www.layersmagazine.com/fireworks-cs4-overview-part-9-of-10.html
- 15 http://www.layersmagazine.com/fireworks-cs4-overview-part-10-of-10.html
- 16 https://xd.adobe.com/#/videos/video/139
- 17 http://www.layersmagazine.com/fireworks-cs4-beta-for-web-design.html
- 18 http://www.layersmagazine.com/fireworks-cs4-beta-for-web-design.html
- 19 http://www.adobe.com/devnet/fireworks/articles/rapid_interactive_prototyping.html
- 20 http://www.adobe.com/devnet/fireworks/articles/rapid_interactive_prototyping.html
- 21 http://www.adobe.com/devnet/fireworks/articles/smart_css.html
- 22 http://www.adobe.com/devnet/fireworks/articles/smart_css.html
- 23 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/website_design_ideas_tips/drop_down_menu.asp
- 24 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/website_design_ideas_tips/drop_down_menu.asp
- 25 http://www.smartwebby.com/web_site_design/rollover_images.asp
- 26 http://www.smartwebby.com/web_site_design/rollover_images.asp
- 27 http://www.entheosweb.com/fireworks/CS4/create_slideshow.asp
- 28 http://www.entheosweb.com/fireworks/CS4/create_slideshow.asp
- 29 http://www.adobe.com/designcenter/fireworks/articles/frw8at_ajaxldr.html
- 30 http://www.adobe.com/designcenter/fireworks/articles/frw8at_ajaxldr.html
- 31 http://www.youtube.com/watch?v=016_TftLU1o
- 32 http://www.youtube.com/watch?v=hC_0lJAohHI
- 33 http://www.youtube.com/watch?v=w4paAep8AMI
- 34 http://www.adobe.com/devnet/fireworks/articles/carshare_design.html
- 35 http://www.adobe.com/devnet/fireworks/articles/carshare_design.html
- 36 http://www.adobe.com/devnet/fireworks/articles/prototype_air_apps.html
- 37 http://www.adobe.com/devnet/fireworks/articles/prototype_air_apps.html
- 38 http://www.layersmagazine.com/fireworks-cs4-air-demo.html
- 39 http://www.adobe.com/devnet/fireworks/articles/flex_app_design.html
- 40 http://www.adobe.com/devnet/fireworks/articles/flex_app_design.html
- 41 http://www.webdesign.org/web/raster-graphics/fireworks/fireworks-cs4-flex-skinning-video-tutorial.16347.html
- 42 http://www.webdesign.org/web/raster-graphics/fireworks/fireworks-cs4-flex-skinning-video-tutorial.16347.html
- 43 http://www.adobe.com/devnet/fireworks/articles/design_mobile_devices.html
- 44 http://www.adobe.com/devnet/fireworks/articles/design_mobile_devices.html
- 45 http://abduzeedo.com/grooveshark-design-style-fireworks
- 46 http://abduzeedo.com/grooveshark-design-style-fireworks
- 47 http://abduzeedo.com/using-graphic-design-inspiration-create-cool-website-header-fireworks
- 48 http://abduzeedo.com/using-graphic-design-inspiration-create-cool-website-header-fireworks
- 49 http://abduzeedo.com/classy-personal-portfolio-fireworks
- 50 http://abduzeedo.com/classy-personal-portfolio-fireworks
- 51 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/photo_effects/photo_montage_fade_image_effect.asp
- 52 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/photo_effects/photo_montage_fade_image_effect.asp
- 53 http://abduzeedo.com/mini-layout-inspired-9rules-design
- 54 http://abduzeedo.com/mini-layout-inspired-9rules-design
- 55 http://www.vimeo.com/3262442
- 56 http://abduzeedo.com/fireworks-quick-tips-1-how-use-quickmask
- 57 http://abduzeedo.com/fireworks-quick-tips-1-how-use-quickmask
- 58 http://www.brownbatterystudios.com/sixthings/2006/03/06/rapid-fire-1-photo-realistic/
- 59 http://www.brownbatterystudios.com/sixthings/2006/03/06/rapid-fire-1-photo-realistic/
- 60 http://abduzeedo.com/tutorial-creating-iphone-frame-fireworks
- 61 http://abduzeedo.com/tutorial-creating-iphone-frame-fireworks
- 62 http://www.fireworkszone.com/index.php?root=2&extension=&idTutorial=331&pageCourante=1
- 63 http://www.fireworkszone.com/index.php?root=2&extension=&idTutorial=331&pageCourante=1
- 64 http://www.adobe.com/devnet/fireworks/articles/media_player_skin.html
- 65 http://www.adobe.com/devnet/fireworks/articles/media_player_skin.html
- 66 http://abduzeedo.com/led-cinema-display-fireworks
- 67 http://abduzeedo.com/led-cinema-display-fireworks
- 68 http://www.voidix.com/fireworks_page_curl.html
- 69 http://www.voidix.com/fireworks_page_curl.html
- 70 http://vector.tutsplus.com/tutorials/designing/create-a-vibrant-digital-collage-mixing-buildings-and-vector-shapes-on-paper/
- 71 http://vector.tutsplus.com/tutorials/designing/create-a-vibrant-digital-collage-mixing-buildings-and-vector-shapes-on-paper/
- 72 http://www.fireworksguruforum.com/index.php?showtopic=842
- 73 http://www.fireworksguruforum.com/index.php?showtopic=842
- 74 http://abduzeedo.com/tutorial-obamas-background-fireworks-part-1
- 75 http://abduzeedo.com/tutorial-obamas-background-fireworks-part-1
- 76 http://www.fireworksguruforum.com/index.php?showtopic=9465
- 77 http://www.fireworksguruforum.com/index.php?showtopic=9465
- 78 http://www.tutorialfireworks.rota83.com/criando-flores.html
- 79 http://www.tutorialfireworks.rota83.com/criando-flores.html
- 80 http://vector.tutsplus.com/tutorials/designing/creating-fading-light-vectors-in-fireworks/
- 81 http://vector.tutsplus.com/tutorials/designing/creating-fading-light-vectors-in-fireworks/
- 82 http://abduzeedo.com/apple-air-banner-fireworks
- 83 http://abduzeedo.com/apple-air-banner-fireworks
- 84 http://www.voidix.com/fireworks_old_photos.html
- 85 http://www.voidix.com/fireworks_old_photos.html
- 86 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/graphic_design/cloud_effect.asp
- 87 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/graphic_design/cloud_effect.asp
- 88 http://www.youtube.com/watch?v=B5N0jxlJtx8
- 89 http://www.youtube.com/watch?v=053GDMqUut0
- 90 http://www.youtube.com/watch?v=S3s97L4eMjo
- 91 http://www.youtube.com/watch?v=096E3YWCxAU
- 92 http://www.youtube.com/watch?v=jfyhauq9QOw&feature=related
- 93 http://www.youtube.com/watch?v=3ECRQ8twT28&feature=related
- 94 http://www.youtube.com/watch?v=Z4o5XlvsB08
- 95 http://www.youtube.com/watch?v=fv60ZWkl4jY
- 96 http://www.tutorialfireworks.rota83.com/green-day-grunge-effect.html
- 97 http://www.tutorialfireworks.rota83.com/green-day-grunge-effect.html
- 98 http://www.tutorialfireworks.rota83.com/criando-imagem-camuflada.html
- 99 http://www.tutorialfireworks.rota83.com/criando-imagem-camuflada.html
- 100 http://blog.blue2x.com/?p=183
- 101 http://blog.blue2x.com/?p=183
- 102 http://www.flisterz.com/2007/12/01/adobe-fireworks-glowing-light-trail/
- 103 http://www.flisterz.com/2007/12/01/adobe-fireworks-glowing-light-trail/
- 104 http://abduzeedo.com/james-white-o-series-fireworks
- 105 http://abduzeedo.com/james-white-o-series-fireworks
- 106 http://www.voidix.com/fireworks_motion_trail.html
- 107 http://www.voidix.com/fireworks_motion_trail.html
- 108 http://www.adobe.com/designcenter/fireworks/articles/frw8at_oldpaper.html
- 109 http://www.adobe.com/designcenter/fireworks/articles/frw8at_oldpaper.html
- 110 http://web.madeofwin.de/abstrakter-effekt-in-fireworks/
- 111 http://web.madeofwin.de/abstrakter-effekt-in-fireworks/
- 112 http://abduzeedo.com/light-painting-fireworks
- 113 http://abduzeedo.com/light-painting-fireworks
- 114 http://www.brownbatterystudios.com/sixthings/2009/07/11/rapid-fire-11-dot-matrix-effect/
- 115 http://www.brownbatterystudios.com/sixthings/2009/07/11/rapid-fire-11-dot-matrix-effect/
- 116 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/graphic_design/twist_fade_technique.asp
- 117 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/graphic_design/twist_fade_technique.asp
- 118 http://abduzeedo.com/creating-amazing-palm-pre-icon-fireworks
- 119 http://abduzeedo.com/creating-amazing-palm-pre-icon-fireworks
- 120 http://www.flisterz.com/2008/02/15/adobe-fireworks-grunge-rss-feed-icon/
- 121 http://www.flisterz.com/2008/02/15/adobe-fireworks-grunge-rss-feed-icon/
- 122 http://www.adobe.com/devnet/fireworks/articles/creating_icon.html
- 123 http://www.adobe.com/devnet/fireworks/articles/creating_icon.html
- 124 http://abduzeedo.com/tutorial-creating-ie7-logo-effect-fireworks
- 125 http://abduzeedo.com/tutorial-creating-ie7-logo-effect-fireworks
- 126 http://www.fireworksguruforum.com/index.php?showtopic=4625
- 127 http://www.fireworksguruforum.com/index.php?showtopic=4625
- 128 http://www.fireworksguruforum.com/index.php?showtopic=6883&st=0&p=10833&
- 129 http://www.fireworksguruforum.com/index.php?showtopic=6883&st=0&p=10833&
- 130 http://www.fireworksguruforum.com/index.php?showtopic=6992
- 131 http://www.fireworksguruforum.com/index.php?showtopic=6992
- 132 http://www.carloshps.com.br/blog/como-criar-um-logotipo-2/
- 133 http://www.carloshps.com.br/blog/como-criar-um-logotipo-2/
- 134 http://thaiwonders.com/design/index.php?option=com_content&task=view&id=72&Itemid=204
- 135 http://thaiwonders.com/design/index.php?option=com_content&task=view&id=72&Itemid=204
- 136 http://blog.blue2x.com/?p=446
- 137 http://blog.blue2x.com/?p=446
- 138 http://blog.blue2x.com/?p=61
- 139 http://blog.blue2x.com/?p=61
- 140 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/graphic_design/spiral_effect.asp
- 141 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/graphic_design/spiral_effect.asp
- 142 http://www.fireworksguruforum.com/index.php?showtopic=6830
- 143 http://www.fireworksguruforum.com/index.php?showtopic=6830
- 144 http://itmdesign.co.uk/blog/2009/04/create-peeling-stickers-and-page-curls-in-adobe-fireworks/
- 145 http://itmdesign.co.uk/blog/2009/04/create-peeling-stickers-and-page-curls-in-adobe-fireworks/
- 146 http://www.youtube.com/watch?v=Z_uFPW5Mt5c
- 147 http://abduzeedo.com/awesome-floral-type-fireworks-and-photoshop-5-minutes
- 148 http://abduzeedo.com/awesome-floral-type-fireworks-and-photoshop-5-minutes
- 149 http://blog.blue2x.com/?p=366
- 150 http://blog.blue2x.com/?p=366
- 151 http://abduzeedo.com/amazing-neon-lights-fireworks
- 152 http://abduzeedo.com/amazing-neon-lights-fireworks
- 153 http://www.carloshps.com.br/blog/papel-de-parede-2009/
- 154 http://www.carloshps.com.br/blog/papel-de-parede-2009/
- 155 http://www.fireworksguruforum.com/index.php?showtopic=15253
- 156 http://www.fireworksguruforum.com/index.php?showtopic=15253
- 157 http://itmdesign.co.uk/blog/2008/11/reflective-glass-effect-tutorial/
- 158 http://itmdesign.co.uk/blog/2008/11/reflective-glass-effect-tutorial/
- 159 http://www.webdesign.org/web/raster-graphics/fireworks/creating-image-inside-text-effect-with-fireworks-mx-2004.17114.html
- 160 http://www.webdesign.org/web/raster-graphics/fireworks/creating-image-inside-text-effect-with-fireworks-mx-2004.17114.html
- 161 http://itmdesign.co.uk/blog/2009/01/how-to-make-animations-and-animated-graphics-in-adobe-fireworks/
- 162 http://itmdesign.co.uk/blog/2009/01/how-to-make-animations-and-animated-graphics-in-adobe-fireworks/
- 163 http://itmdesign.co.uk/blog/2009/02/animated-stickman-tweening-animation-in-adobe-fireworks/
- 164 http://itmdesign.co.uk/blog/2009/02/animated-stickman-tweening-animation-in-adobe-fireworks/
- 165 http://www.voidix.com/fireworks_animate_tween.html
- 166 http://www.voidix.com/fireworks_animate_tween.html
- 167 http://www.smartwebby.com/web_site_design/animated_gifs.asp
- 168 http://www.smartwebby.com/web_site_design/animated_gifs.asp
- 169 http://www.youtube.com/watch?v=US2DEhqZqpQ
- 170 http://www.youtube.com/watch?v=fcSrmrjqbBU
- 171 http://fireworks.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1/
- 172 http://fireworks.smashingmagazine.com/2012/07/20/letterpress-effect-fireworks-css/
- 173 http://fireworks.smashingmagazine.com/2012/10/12/adobe-fireworks-enterprise/
Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.