Menu Search
Jump to the content X X
The Smashing Book #5

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. new Smashing Book 5 features smart responsive design techniques and patterns.

The Ultimate Round-Up of Fireworks Tutorials and Resources

Advertisement

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?

Adobe Fireworks Tutorials and Resources1

Adobe Fireworks CS4 Homepage2

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.

Adobe Fireworks Tutorials and Resources5

  • 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!

Adobe Fireworks Tutorials and Resources18

Rapid Interactive Prototyping with HTML, CSS, and JavaScript19
This tutorial shows you how to add HTML, CSS, and JavaScript to Fireworks documents to create enhanced functionality in the HTML pages that you export. These HTML pages are then used to facilitate rapid prototyping and usability testing.

Adobe Fireworks Tutorials and Resources20

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.

Adobe Fireworks Tutorials and Resources

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.

Adobe Fireworks Tutorials and Resources22

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.

Adobe Fireworks Tutorials and Resources

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.

Adobe Fireworks Tutorials and Resources24

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.

Adobe Fireworks Tutorials and Resources26

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.

Adobe Fireworks Tutorials and Resources28

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.

Adobe Fireworks Tutorials and Resources30

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 for the iPhone32
Learn how to create a simple prototype with Fireworks and open it on the iPhone.

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.

Adobe Fireworks Tutorials and Resources35

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.

Adobe Fireworks Tutorials and Resources37

Fireworks Adobe Air Demo38
Learn how to use the new Fireworks CS4 AIR package command and design prototype interactive desktop applications.

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.

Adobe Fireworks Tutorials and Resources40

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.

Adobe Fireworks Tutorials and Resources42

Designing for Mobile Devices43
This article provides real-world considerations and tips for creating assets for your mobile development projects using Fireworks CS4.

Adobe Fireworks Tutorials and Resources44

Fireworks Web Design Mockup Tutorials Link

Grooveshark Design Style45

Adobe Fireworks Tutorials and Resources46

Creating a Cool Website Header47

Adobe Fireworks Tutorials and Resources48

Classy Personal Portfolio49

Adobe Fireworks Tutorials and Resources50

Photo Montage, Fade Image Effect Header51

Adobe Fireworks Tutorials and Resources52

Mini-Layout Inspired by 9rules53

Adobe Fireworks Tutorials and Resources54

Menu Rollover Video55

Fireworks Design Tutorials Link

How to use QuickMask56

Adobe Fireworks Tutorials and Resources57

Photo-Realistic58

Adobe Fireworks Tutorials and Resources59

Creating the iPhone Frame60

Adobe Fireworks Tutorials and Resources61

Create a Night Scene62

Adobe Fireworks Tutorials and Resources63

Designing a Media Player Skin64

Adobe Fireworks Tutorials and Resources65

LED Cinema Display66

Adobe Fireworks Tutorials and Resources67

Page Curl in Fireworks 68

Adobe Fireworks Tutorials and Resources69

Create a Vibrant Digital Collage 70

Adobe Fireworks Tutorials and Resources71

Hand Drawn Styles

Adobe Fireworks Tutorials and Resources

Scotch Tape Tutorial 72

Adobe Fireworks Tutorials and Resources73

Obama’s Background74

Adobe Fireworks Tutorials and Resources75

Yin Yang Tutorial76

Adobe Fireworks Tutorials and Resources77

Vector-like Flowers78

Adobe Fireworks Tutorials and Resources79

Creating Fading Light Vectors80

Adobe Fireworks Tutorials and Resources81

Apple Air Banner82

Adobe Fireworks Tutorials and Resources83

Old Photos in Fireworks84

Adobe Fireworks Tutorials and Resources85

Fun With The Satin Gradient

Adobe Fireworks Tutorials and Resources

Cloud Effect86

Adobe Fireworks Tutorials and Resources87

Design Video Tutorials Link

How to make a Desktop Background88

How to make a Banner89

Create Elegant Stunning Swirls, Curls, and Swooshes90

Creating Car “toon” Tutorial91

Coca Cola Glass Effect92

Motion Bluring the Back of Sprites93

Custom 3D Perspective Boxes 94

Applying a 2D image to a 3D surface95

Create A Youtube Profile Picture In Adobe Fire Works CS3

Fireworks Effects and Tecniques Link

Green Day Grunge Effect96

Adobe Fireworks Tutorials and Resources97

Camouflaged Car98

Adobe Fireworks Tutorials and Resources99

Pixelate Effect Tutorial100

Adobe Fireworks Tutorials and Resources101

Glowing Light Trail102

Adobe Fireworks Tutorials and Resources103

Awesome Light Effects in Fireworks104

Adobe Fireworks Tutorials and Resources105

Motion Blur106

Adobe Fireworks Tutorials and Resources107

Old Paper Effect108

Adobe Fireworks Tutorials and Resources109

Abstrakter Effekt110

Adobe Fireworks Tutorials and Resources111

Light Painting112

Adobe Fireworks Tutorials and Resources113

Dot Matrix Effect114

Adobe Fireworks Tutorials and Resources115

Twist and Fade Technique116

Adobe Fireworks Tutorials and Resources117

Fireworks Icons and Buttons Tutorials Link

Creating an amazing Palm Pre icon118

Adobe Fireworks Tutorials and Resources119

Grunge RSS Feed Icon120

Adobe Fireworks Tutorials and Resources121

Creating a Folder Icon122

Adobe Fireworks Tutorials and Resources123

Creating the IE7 Logo124

Adobe Fireworks Tutorials and Resources125

Gel Cap / Plastic Button126

Adobe Fireworks Tutorials and Resources127

A Simple Little Pencil128

Adobe Fireworks Tutorials and Resources129

A Simple little Envelope130

Adobe Fireworks Tutorials and Resources131

Create a Logo in Fireworks132

Adobe Fireworks Tutorials and Resources133

Fireworks CS4 Stamp134

Adobe Fireworks Tutorials and Resources135

Altes Wine Logo Tutorial136

Adobe Fireworks Tutorials and Resources137

Fancy Rss Button Tutorial138

Adobe Fireworks Tutorials and Resources139

Spiral Effect Snail Graphic140

Adobe Fireworks Tutorials and Resources141

A computer mouse in 7 layers142

Adobe Fireworks Tutorials and Resources143

Create Peeling Stickers and Page Curls144

Adobe Fireworks Tutorials and Resources145

Making a Cool button for your Website146

Fireworks Text Effects Link

Awesome Floral Type147

Adobe Fireworks Tutorials and Resources148

Grunge Effect 149

Adobe Fireworks Tutorials and Resources150

Amazing Neon Lights151

Adobe Fireworks Tutorials and Resources152

Grass Text153

Adobe Fireworks Tutorials and Resources154

Arched Text155

Adobe Fireworks Tutorials and Resources156

Reflective Glass Effect Tutorial157

Adobe Fireworks Tutorials and Resources158

Creating Image inside Text Effect159

Adobe Fireworks Tutorials and Resources160

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.

Adobe Fireworks Tutorials and Resources162

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.

Adobe Fireworks Tutorials and Resources164

Animate and Tween in Fireworks165
In this tutorial you are going to learn about animation, and using those animations to create animated gif files that can be placed on your website.

Adobe Fireworks Tutorials and Resources166

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.

Adobe Fireworks Tutorials and Resources168

Making A Simple GIF Animation169
This is an easy to follow video tutorial on how to make a simple animation.

Create animated GIF for Web Site170
Learn how to make animated banners and files for your web design projects and output animated GIF files to easily pop into your pages.

Further Reading Link

Footnotes Link

  1. 1 http://www.adobe.com/products/fireworks/
  2. 2 http://www.adobe.com/products/fireworks/
  3. 3 http://www.adobe.com/devnet/fireworks/?view=home
  4. 4 http://www.adobe.com/devnet/fireworks/learning_guide/design/
  5. 5 http://www.layersmagazine.com/fireworks-cs4-overview-part-1-of-10.html
  6. 6 http://www.layersmagazine.com/fireworks-cs4-overview-part-1-of-10.html
  7. 7 http://www.layersmagazine.com/fireworks-cs4-overview-part-2-of-10.html
  8. 8 http://www.layersmagazine.com/fireworks-cs4-overview-part-3-of-10.html
  9. 9 http://www.layersmagazine.com/fireworks-cs4-overview-part-4-of-10.html
  10. 10 http://www.layersmagazine.com/fireworks-cs4-overview-part-5-of-10.html
  11. 11 http://www.layersmagazine.com/fireworks-cs4-overview-part-6-of-10.html
  12. 12 http://www.layersmagazine.com/fireworks-cs4-overview-part-7-of-10.html
  13. 13 http://www.layersmagazine.com/fireworks-cs4-overview-part-8-of-10.html
  14. 14 http://www.layersmagazine.com/fireworks-cs4-overview-part-9-of-10.html
  15. 15 http://www.layersmagazine.com/fireworks-cs4-overview-part-10-of-10.html
  16. 16 https://xd.adobe.com/#/videos/video/139
  17. 17 http://www.layersmagazine.com/fireworks-cs4-beta-for-web-design.html
  18. 18 http://www.layersmagazine.com/fireworks-cs4-beta-for-web-design.html
  19. 19 http://www.adobe.com/devnet/fireworks/articles/rapid_interactive_prototyping.html
  20. 20 http://www.adobe.com/devnet/fireworks/articles/rapid_interactive_prototyping.html
  21. 21 http://www.adobe.com/devnet/fireworks/articles/smart_css.html
  22. 22 http://www.adobe.com/devnet/fireworks/articles/smart_css.html
  23. 23 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/website_design_ideas_tips/drop_down_menu.asp
  24. 24 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/website_design_ideas_tips/drop_down_menu.asp
  25. 25 http://www.smartwebby.com/web_site_design/rollover_images.asp
  26. 26 http://www.smartwebby.com/web_site_design/rollover_images.asp
  27. 27 http://www.entheosweb.com/fireworks/CS4/create_slideshow.asp
  28. 28 http://www.entheosweb.com/fireworks/CS4/create_slideshow.asp
  29. 29 http://www.adobe.com/designcenter/fireworks/articles/frw8at_ajaxldr.html
  30. 30 http://www.adobe.com/designcenter/fireworks/articles/frw8at_ajaxldr.html
  31. 31 http://www.youtube.com/watch?v=016_TftLU1o
  32. 32 http://www.youtube.com/watch?v=hC_0lJAohHI
  33. 33 http://www.youtube.com/watch?v=w4paAep8AMI
  34. 34 http://www.adobe.com/devnet/fireworks/articles/carshare_design.html
  35. 35 http://www.adobe.com/devnet/fireworks/articles/carshare_design.html
  36. 36 http://www.adobe.com/devnet/fireworks/articles/prototype_air_apps.html
  37. 37 http://www.adobe.com/devnet/fireworks/articles/prototype_air_apps.html
  38. 38 http://www.layersmagazine.com/fireworks-cs4-air-demo.html
  39. 39 http://www.adobe.com/devnet/fireworks/articles/flex_app_design.html
  40. 40 http://www.adobe.com/devnet/fireworks/articles/flex_app_design.html
  41. 41 http://www.webdesign.org/web/raster-graphics/fireworks/fireworks-cs4-flex-skinning-video-tutorial.16347.html
  42. 42 http://www.webdesign.org/web/raster-graphics/fireworks/fireworks-cs4-flex-skinning-video-tutorial.16347.html
  43. 43 http://www.adobe.com/devnet/fireworks/articles/design_mobile_devices.html
  44. 44 http://www.adobe.com/devnet/fireworks/articles/design_mobile_devices.html
  45. 45 http://abduzeedo.com/grooveshark-design-style-fireworks
  46. 46 http://abduzeedo.com/grooveshark-design-style-fireworks
  47. 47 http://abduzeedo.com/using-graphic-design-inspiration-create-cool-website-header-fireworks
  48. 48 http://abduzeedo.com/using-graphic-design-inspiration-create-cool-website-header-fireworks
  49. 49 http://abduzeedo.com/classy-personal-portfolio-fireworks
  50. 50 http://abduzeedo.com/classy-personal-portfolio-fireworks
  51. 51 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/photo_effects/photo_montage_fade_image_effect.asp
  52. 52 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/photo_effects/photo_montage_fade_image_effect.asp
  53. 53 http://abduzeedo.com/mini-layout-inspired-9rules-design
  54. 54 http://abduzeedo.com/mini-layout-inspired-9rules-design
  55. 55 http://www.vimeo.com/3262442
  56. 56 http://abduzeedo.com/fireworks-quick-tips-1-how-use-quickmask
  57. 57 http://abduzeedo.com/fireworks-quick-tips-1-how-use-quickmask
  58. 58 http://www.brownbatterystudios.com/sixthings/2006/03/06/rapid-fire-1-photo-realistic/
  59. 59 http://www.brownbatterystudios.com/sixthings/2006/03/06/rapid-fire-1-photo-realistic/
  60. 60 http://abduzeedo.com/tutorial-creating-iphone-frame-fireworks
  61. 61 http://abduzeedo.com/tutorial-creating-iphone-frame-fireworks
  62. 62 http://www.fireworkszone.com/index.php?root=2&extension=&idTutorial=331&pageCourante=1
  63. 63 http://www.fireworkszone.com/index.php?root=2&extension=&idTutorial=331&pageCourante=1
  64. 64 http://www.adobe.com/devnet/fireworks/articles/media_player_skin.html
  65. 65 http://www.adobe.com/devnet/fireworks/articles/media_player_skin.html
  66. 66 http://abduzeedo.com/led-cinema-display-fireworks
  67. 67 http://abduzeedo.com/led-cinema-display-fireworks
  68. 68 http://www.voidix.com/fireworks_page_curl.html
  69. 69 http://www.voidix.com/fireworks_page_curl.html
  70. 70 http://vector.tutsplus.com/tutorials/designing/create-a-vibrant-digital-collage-mixing-buildings-and-vector-shapes-on-paper/
  71. 71 http://vector.tutsplus.com/tutorials/designing/create-a-vibrant-digital-collage-mixing-buildings-and-vector-shapes-on-paper/
  72. 72 http://www.fireworksguruforum.com/index.php?showtopic=842
  73. 73 http://www.fireworksguruforum.com/index.php?showtopic=842
  74. 74 http://abduzeedo.com/tutorial-obamas-background-fireworks-part-1
  75. 75 http://abduzeedo.com/tutorial-obamas-background-fireworks-part-1
  76. 76 http://www.fireworksguruforum.com/index.php?showtopic=9465
  77. 77 http://www.fireworksguruforum.com/index.php?showtopic=9465
  78. 78 http://www.tutorialfireworks.rota83.com/criando-flores.html
  79. 79 http://www.tutorialfireworks.rota83.com/criando-flores.html
  80. 80 http://vector.tutsplus.com/tutorials/designing/creating-fading-light-vectors-in-fireworks/
  81. 81 http://vector.tutsplus.com/tutorials/designing/creating-fading-light-vectors-in-fireworks/
  82. 82 http://abduzeedo.com/apple-air-banner-fireworks
  83. 83 http://abduzeedo.com/apple-air-banner-fireworks
  84. 84 http://www.voidix.com/fireworks_old_photos.html
  85. 85 http://www.voidix.com/fireworks_old_photos.html
  86. 86 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/graphic_design/cloud_effect.asp
  87. 87 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/graphic_design/cloud_effect.asp
  88. 88 http://www.youtube.com/watch?v=B5N0jxlJtx8
  89. 89 http://www.youtube.com/watch?v=053GDMqUut0
  90. 90 http://www.youtube.com/watch?v=S3s97L4eMjo
  91. 91 http://www.youtube.com/watch?v=096E3YWCxAU
  92. 92 http://www.youtube.com/watch?v=jfyhauq9QOw&feature=related
  93. 93 http://www.youtube.com/watch?v=3ECRQ8twT28&feature=related
  94. 94 http://www.youtube.com/watch?v=Z4o5XlvsB08
  95. 95 http://www.youtube.com/watch?v=fv60ZWkl4jY
  96. 96 http://www.tutorialfireworks.rota83.com/green-day-grunge-effect.html
  97. 97 http://www.tutorialfireworks.rota83.com/green-day-grunge-effect.html
  98. 98 http://www.tutorialfireworks.rota83.com/criando-imagem-camuflada.html
  99. 99 http://www.tutorialfireworks.rota83.com/criando-imagem-camuflada.html
  100. 100 http://blog.blue2x.com/?p=183
  101. 101 http://blog.blue2x.com/?p=183
  102. 102 http://www.flisterz.com/2007/12/01/adobe-fireworks-glowing-light-trail/
  103. 103 http://www.flisterz.com/2007/12/01/adobe-fireworks-glowing-light-trail/
  104. 104 http://abduzeedo.com/james-white-o-series-fireworks
  105. 105 http://abduzeedo.com/james-white-o-series-fireworks
  106. 106 http://www.voidix.com/fireworks_motion_trail.html
  107. 107 http://www.voidix.com/fireworks_motion_trail.html
  108. 108 http://www.adobe.com/designcenter/fireworks/articles/frw8at_oldpaper.html
  109. 109 http://www.adobe.com/designcenter/fireworks/articles/frw8at_oldpaper.html
  110. 110 http://web.madeofwin.de/abstrakter-effekt-in-fireworks/
  111. 111 http://web.madeofwin.de/abstrakter-effekt-in-fireworks/
  112. 112 http://abduzeedo.com/light-painting-fireworks
  113. 113 http://abduzeedo.com/light-painting-fireworks
  114. 114 http://www.brownbatterystudios.com/sixthings/2009/07/11/rapid-fire-11-dot-matrix-effect/
  115. 115 http://www.brownbatterystudios.com/sixthings/2009/07/11/rapid-fire-11-dot-matrix-effect/
  116. 116 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/graphic_design/twist_fade_technique.asp
  117. 117 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/graphic_design/twist_fade_technique.asp
  118. 118 http://abduzeedo.com/creating-amazing-palm-pre-icon-fireworks
  119. 119 http://abduzeedo.com/creating-amazing-palm-pre-icon-fireworks
  120. 120 http://www.flisterz.com/2008/02/15/adobe-fireworks-grunge-rss-feed-icon/
  121. 121 http://www.flisterz.com/2008/02/15/adobe-fireworks-grunge-rss-feed-icon/
  122. 122 http://www.adobe.com/devnet/fireworks/articles/creating_icon.html
  123. 123 http://www.adobe.com/devnet/fireworks/articles/creating_icon.html
  124. 124 http://abduzeedo.com/tutorial-creating-ie7-logo-effect-fireworks
  125. 125 http://abduzeedo.com/tutorial-creating-ie7-logo-effect-fireworks
  126. 126 http://www.fireworksguruforum.com/index.php?showtopic=4625
  127. 127 http://www.fireworksguruforum.com/index.php?showtopic=4625
  128. 128 http://www.fireworksguruforum.com/index.php?showtopic=6883&st=0&p=10833&
  129. 129 http://www.fireworksguruforum.com/index.php?showtopic=6883&st=0&p=10833&
  130. 130 http://www.fireworksguruforum.com/index.php?showtopic=6992
  131. 131 http://www.fireworksguruforum.com/index.php?showtopic=6992
  132. 132 http://www.carloshps.com.br/blog/como-criar-um-logotipo-2/
  133. 133 http://www.carloshps.com.br/blog/como-criar-um-logotipo-2/
  134. 134 http://thaiwonders.com/design/index.php?option=com_content&task=view&id=72&Itemid=204
  135. 135 http://thaiwonders.com/design/index.php?option=com_content&task=view&id=72&Itemid=204
  136. 136 http://blog.blue2x.com/?p=446
  137. 137 http://blog.blue2x.com/?p=446
  138. 138 http://blog.blue2x.com/?p=61
  139. 139 http://blog.blue2x.com/?p=61
  140. 140 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/graphic_design/spiral_effect.asp
  141. 141 http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/graphic_design/spiral_effect.asp
  142. 142 http://www.fireworksguruforum.com/index.php?showtopic=6830
  143. 143 http://www.fireworksguruforum.com/index.php?showtopic=6830
  144. 144 http://itmdesign.co.uk/blog/2009/04/create-peeling-stickers-and-page-curls-in-adobe-fireworks/
  145. 145 http://itmdesign.co.uk/blog/2009/04/create-peeling-stickers-and-page-curls-in-adobe-fireworks/
  146. 146 http://www.youtube.com/watch?v=Z_uFPW5Mt5c
  147. 147 http://abduzeedo.com/awesome-floral-type-fireworks-and-photoshop-5-minutes
  148. 148 http://abduzeedo.com/awesome-floral-type-fireworks-and-photoshop-5-minutes
  149. 149 http://blog.blue2x.com/?p=366
  150. 150 http://blog.blue2x.com/?p=366
  151. 151 http://abduzeedo.com/amazing-neon-lights-fireworks
  152. 152 http://abduzeedo.com/amazing-neon-lights-fireworks
  153. 153 http://www.carloshps.com.br/blog/papel-de-parede-2009/
  154. 154 http://www.carloshps.com.br/blog/papel-de-parede-2009/
  155. 155 http://www.fireworksguruforum.com/index.php?showtopic=15253
  156. 156 http://www.fireworksguruforum.com/index.php?showtopic=15253
  157. 157 http://itmdesign.co.uk/blog/2008/11/reflective-glass-effect-tutorial/
  158. 158 http://itmdesign.co.uk/blog/2008/11/reflective-glass-effect-tutorial/
  159. 159 http://www.webdesign.org/web/raster-graphics/fireworks/creating-image-inside-text-effect-with-fireworks-mx-2004.17114.html
  160. 160 http://www.webdesign.org/web/raster-graphics/fireworks/creating-image-inside-text-effect-with-fireworks-mx-2004.17114.html
  161. 161 http://itmdesign.co.uk/blog/2009/01/how-to-make-animations-and-animated-graphics-in-adobe-fireworks/
  162. 162 http://itmdesign.co.uk/blog/2009/01/how-to-make-animations-and-animated-graphics-in-adobe-fireworks/
  163. 163 http://itmdesign.co.uk/blog/2009/02/animated-stickman-tweening-animation-in-adobe-fireworks/
  164. 164 http://itmdesign.co.uk/blog/2009/02/animated-stickman-tweening-animation-in-adobe-fireworks/
  165. 165 http://www.voidix.com/fireworks_animate_tween.html
  166. 166 http://www.voidix.com/fireworks_animate_tween.html
  167. 167 http://www.smartwebby.com/web_site_design/animated_gifs.asp
  168. 168 http://www.smartwebby.com/web_site_design/animated_gifs.asp
  169. 169 http://www.youtube.com/watch?v=US2DEhqZqpQ
  170. 170 http://www.youtube.com/watch?v=fcSrmrjqbBU
  171. 171 http://fireworks.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1/
  172. 172 http://fireworks.smashingmagazine.com/2012/07/20/letterpress-effect-fireworks-css/
  173. 173 http://fireworks.smashingmagazine.com/2012/10/12/adobe-fireworks-enterprise/
SmashingConf Oxford

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.

↑ Back to top Tweet itShare on Facebook

Paul Andrew is a freelance Web designer. He is chief admin for Speckyboy - Design Magazine, a Web design, Web development and graphic design resource blog.

Advertisement
  1. 1

    Hi guys,

    I just recently tried to get a grip on Fireworks as we have the CS3 Suite at work, but to be honest, I did not really find any good argument using Fireworks instead of Photoshop or Flash-Click-Dummies. So to say, I just don’t get for what Fw is good at all. To me it feels like a not so good combination of Ps and Flash.

    Why should a designer actually use Fireworks, why is it good at all. Or is it just for refining steps. It would be a blast to have something like an introduction to Fw, why and when to use it, and why and when to just skip it.

    I love the collection here though and I will give it another go, still wondering what it really is good for.

    -2
  2. 2

    @Listoric I just see Fireworks as a much easier to use, all-be-it stripped down, version of Photoshop. Being a developer I don’t really need to do too much but when I do I like to be able to do it easily and simply.

    It is nice to see that someone has remembered there are other programs that Photoshop! Excellent resource too.

    0
  3. 3

    A few people in our office use Fireworks, but I’m more of a Photoshop man. Fireworks feels awkward to me – rather like using Photoshop for a print page layout when you should be using InDesign.

    0
  4. 4

    Nice timing as Adobe Fireworks Fanpages were also launched today!

    Join up http://www.facebook.com/home.php#/pages/Adobe-Fireworks/226645240197 if you like Fireworks.

    0
  5. 5

    Its always baffled me why so many people ignore Fireworks and use Photoshop only. There are so many common web workflows that are simpler, better or both in Fw.

    0
  6. 6

    Great collection! Thanks for including the madeofwin tutorial.

    Of course, photoshop is able to do more than fireworks. But the reason you should use fireworks for webdesign is: you are so much faster with fireworks. You won’t think that if you compare a skilled photoshop-user with an amateur in fireworks, but comparing skilled ps-user and skilled fw-user will show the difference.

    0
  7. 7

    I was just saying to someone the other day how i never use fireworks, hmm..

    0
  8. 8

    In terms of designing for the web, Fireworks > Photoshop

    0
  9. 9

    I had always used Fireworks to create mockups. And I don´t want to miss it anymore.

    BTW: I can´t understand how people can realize mockups in PS. It´s quite uncomfortable…

    0
  10. 10

    I don’t know what to think of this article. On one hand it promotes Firework’s great protyping for web design, and on the other it shows how it shouldn’t be used for photo editing and efffects.

    I use both Fireworks and Photoshop. For web design Fireworks is a no-brainer – it’s faster and more effcient, I can create the exact same design I would have made in Photoshop in about half the time.

    However, most of these tutorials show how to edit photos, create colleges, or other effects. Fireworks can do these, but it is not its strong point. If anything it harms Fireworks to have these things sent around, giving the impression its just poor-mans Photoshop.

    Software is tailored to its specific need, that is why Adobe has a suite of products rather than just one super program.

    Fireworks – Web Design
    Photoshop – Photo Editing
    Illustrator – Illustration
    InDesign – Print Design

    Unfortunately, designers are a stubborn bunch – many I work with still use Photoshop for designing for web (and everything else). They mock me for using Fireworks, but my bosses praise me; I can get the work of two Photoshop web designers done in half the time without sacrificing quality (in many times improving it..) They’re beginning to notice this, and some are making the move to use Fireworks.

    Its all about being flexible in your program choices, if you can list a whole bunch of programs you’re fluent in on your Resume for specific tasks – it looks a whole lot less amateur than ‘Photoshop’ listed for everything.

    Fireworks just does web design better. It’s always puzzled me with people’s schoolboy loyalty to Photoshop.

    3
  11. 11

    Nice list.

    It still surprises me how many front end developers use Photoshop instead of Fireworks to mock up websites. Its really not what it was made to do. They are billing clients for unnecessary hours.

    Saying that, my missus uses our Boxster to drive to the shops. Same thing I guess. Who am I to argue?

    0
  12. 12

    Great collection. With each new web design project I’m considering switching from PS to FW, but without having practical experience it’s always a little risky to jump right into a client’s project . Not talking about convincing your company to buy new software ;)

    0
  13. 13

    Fireworks performance is absolutely unparalleled for web design and mockups. The speed, workflow and intelligent design is just so much better than anything Photoshop can offer as a web design tool. You’ll never have to use those blasted layers again if you don’t want to and still you’ll create amazingly complex designs where everything can be edited – think changing / styling / resizing / moving all with one click. Vectors and objects integrated seamlessly, page templates, much better slice exporting, graphics optimization, object controls, gradient engine etc. PNG is lean and efficient.

    This being said, Photoshop is unparalleled for photo editing, retouching, anything to do with photorealistic effects. Fireworks has its set of bitmap tools (probably comparable to Photoshop 6 so not that bad) but it’s not a highly advanced graphic editor per se, although natural and seamless vector editing within the same environment is a great plus.

    The perfect combination is to use Fireworks for putting designs together/prototyping and Photoshop for preparing more complicated graphics/photos (to be imported into FW).

    The benefits of Fireworks might be questionable if you don’t do web/interface design (by all means stay with PS then) but if you do and try it you won’t be coming back to the good ol PS.

    0
  14. 14

    I’ve been using photoshop for 7yrs… & I think its a great tool.. nothing beats photoshop.

    But when it comes to speeding up.. believe me fireworks is super fast. (only for web projects/Interface etc.). its like photoshop simplified.. & the best part is.. it hardly takes any efforts/time to switch for a PS user. its so simple.

    Little features like … drag & select multiple layers, page management & slicing etc.. is like toppings on the ice cream.

    0
  15. 15

    I do not like how Adobe decided to change the GUI in CS4. For me CS3 is still the perfect choice for rapid mock-ups and web design, even though it lacks complexity in some key areas. I still hope to see some of the more advanced features of PS integrated into FW. For example the Warp Transformation which I feel would be greatly useful.

    0
  16. 16

    I kinda do like Fireworks though I never really worked with it.

    The problem I got with Fireworks is that since I’m the only one at our advertising agency who owns the web edition of the creative suite cs3 I’m the only one who’s got Fireworks. Our workflow is that a graphic designer creates a layout in InDesign or Photoshop and I’m kinda slicing it in Photoshop and then code the thing in XHTML and CSS. So in an agency where the “normal” graphic designers don’t have the web edition Fireworks will never gain ground.

    0
  17. 17

    I ever wondering, when speaking with other webdesigner and they do not know fireworks. I know a lot of people use photoshop for designing web sites, but when I try it in photoshop I feel handicapped. Not because I can’t work in photoshop. It’s more because I use photoshop for image editing, creating effects or cut an image.

    For me Fireworks is Illustrator for Web. You had a real pixel grid and you can assess how typo or an icon looks like in this grid (OK I know illustrator has a pixelview at it self). Few times I get webdesigns in illustrator or indesign and the designer wondering when i say: “your font is to small, nobody can read it”, because he choose a 8pt font. Or they create an icon, thats looking wonderfull in illustrator, scaling it to the size for the website, you just see an bunch of pixels. And here is the advantage of fireworks you can assess your design and you have the ability to slice and export it in a good way.

    No question for editing images and so one photoshop is the best, but you don’t design a booklet or poster in photoshop.

    0
  18. 18

    I have never used anything but Fireworks for web design. I simply feel Photoshop is so bloated for such a task and have so far, not found something Fireworks can’t do that I need. Not saying one is better than the other but I find Fireworks so much quicker to do work with.

    0
  19. 19

    Dear members

    is that mean fireworks is better than photoshop for web designing ?

    0
  20. 20

    Hey I´m a very big fan of Fireworks, thanks for the tutorials. There´s no much of this in arrounds :)

    0
  21. 21
  22. 22

    Edson Carvalho (Brazil)

    July 27, 2009 5:50 am

    Excelente tutorial!
    Fireworks é definitivamente melhor que o Photoshop.
    Muito prático e intuitivo.
    illustrator+Fireworks+Flash = Produção inesgotável com qualidade!

    Valeu!

    0
  23. 23

    Without FW, my workflow wouldn’t have the same quality to it. Illustrator for illustrations/logos etc. and Photoshop for photo editing. Fireworks is the key ingredient and provides me with the ability to make final compositions.

    All my designs are mainly vector and thus scalable, put together in Fireworks.

    0
  24. 24

    Sometimes in my case, its like I dont want to work with FW because its not standard in our team to work with – they prefer PS. So its like agreeing to use a standard software to use.

    0
  25. 25

    Pietro Marafiga Monteiro

    July 27, 2009 6:28 am

    I am a big fan of Fireworks, but it has some problems.

    When the work is large, with multiple pages, the PNG swells and the program is heavy! Not moving, sometimes.

    Try get a vector in Illustrator CS4 with some 40 objects and paste it to see the slowness.

    And I use it on a iMac core 2 duo 2.0 ghz with 3 gb of RAM.

    0
  26. 26

    > is that mean fireworks is better than photoshop for web designing ?

    I’d say so, yes. Photoshop is a great piece of design software but web design is not its main intended focus and as such web design tools and procedures are buries under tonnes of (relative) clutter. You don’t need all this bloat for web design. Usually a simple thing takes two to three times as much time in Photoshop than it does in Fireworks.

    Plus Fireworks has a range of brilliant web specific solutions and its vector/object angle makes your designs easily scalable.

    0
  27. 27

    One thing Fireworks does better than Photoshop is drawing single pixel lines. In Photoshop you must have the Grid turned on and be at 100% view to draw shapes that have exact 1 pixel borders. Anything else and PS will anti-alias the line.. very annoying.

    0
  28. 28

    I LOVE Fireworks! Now granted, I still use PS for photo editing (that’s what it was made for!) but I always use Fireworks for my web designs. It’s also very easy to open PSD files in fireworks so when I find something made in PS I can open and edit it in FW.

    I’m also one of those ppl that is baffled by the use of PS in web design.

    0
  29. 29

    Enrique Ramírez

    July 27, 2009 6:59 am

    I’ve been using Fireworks for web design (slicing PSDs, and of course, designing my own layouts) for around 9 years now. Always saying it’s way better, faster and comfortable for my job than Photoshop (Photoshop confuses me. Everytime I try to slice a PSD it seems to take me twice the time and result in a file that’s twice bigger). Always thought I was alone. Glad to see I was not wrong all this time and that there’s more people praising Fireworks is better for web related stuff than Photoshop.

    On the other hand, Fireworks PSD support is not that good, and I always need to open the PSD both in Fireworks and Photoshop to spot differences. If only Fireworks got a better “Photoshop Automatic Effects” support and the “Fill” feature in layers (besides alpha, just like photoshop which has both), it’ll be a one-stop tool without a doubt.

    0
  30. 30

    Fireworks is such an underrated software, it’s nice to seen a roundup like this. I definitely like it much better than photoshop

    0

↑ Back to top