The Ultimate Round-Up of Fireworks Tutorials and Resources


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 CS43

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

Adobe Fireworks Developer Center4
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 CS45
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

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 Resources6

  • Part 17
    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 28
    Learn how to use the Align and Combine Paths option to create shapes, as well as the new Real Time Gradient options.
  • Part 39
    Part 3 talks about some of changes with regards to text in Fireworks CS4.
  • Part 410
    learn about the new features when importing Illlustrator and Photoshop files in Fireworks CS4.
  • Part 511
    Part 5 goes over the merging of graphic and paths, grouping of multiple layers, locking layers, and masking in Fireworks CS4.
  • Part 612
    Working with Styles and the aligning of text boxes in Fireworks CS4.
  • Part 713
    Learn how to use the libraries in Fireworks CS4 to quickly add form elements to a column in a page.
  • Part 814
    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 915
    In this tutorial, you will be taken through the process of slicing and linking multiple pages for a web comp using Fireworks CS4.
  • Part 1016
    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

Designing a Website in Fireworks CS4 – Adobe MAX Tutorial Session17
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 Session18
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 Session19
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 Design20
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 Resources21

Rapid Interactive Prototyping with HTML, CSS, and JavaScript22
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 Resources23

Wireframing with Fireworks CS324
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 Resources25

Export CSS Painlessly from Website Comps in Fireworks26
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 Resources27

Designing and Implementing a Spry Menu28
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 Resources29

Drop Down Menu Navigation30
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 Resources31

Rollover Images/Buttons Effect32
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 Resources33

Create a Slideshow in Adobe Fireworks CS434
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 Resources35

Creating reusable, flexible, custom Ajax loading animations36
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 Resources37

Create a Robust Flash Based Autoplay Slideshow Photo Gallery in minutes38
In this video you will learn how to create a Flash based slideshow photo gallery in Fireworks.

Prototyping for the iPhone39
Learn how to create a simple prototype with Fireworks and open it on the iPhone.

Prototyping a Web Design40
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 Application41
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 Resources42

Fireworks Web App and Mobile Tutorials

Prototyping AIR applications with Fireworks43
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 Resources44

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

Designing and Prototyping Flex Applications46
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 Resources47

Fireworks CS4 Flex Skinning48
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 Resources49

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

Adobe Fireworks Tutorials and Resources51

Fireworks Web Design Mockup Tutorials

Grooveshark Design Style52

Adobe Fireworks Tutorials and Resources53

Creating a Cool Website Header54

Adobe Fireworks Tutorials and Resources55

Classy Personal Portfolio56

Adobe Fireworks Tutorials and Resources57

Photo Montage, Fade Image Effect Header58

Adobe Fireworks Tutorials and Resources59

Mini-Layout Inspired by 9rules60

Adobe Fireworks Tutorials and Resources61

Menu Rollover Video62

Fireworks Design Tutorials

How to use QuickMask63

Adobe Fireworks Tutorials and Resources64


Adobe Fireworks Tutorials and Resources66

Creating the iPhone Frame67

Adobe Fireworks Tutorials and Resources68

Create a Night Scene69

Adobe Fireworks Tutorials and Resources70

Designing a Media Player Skin71

Adobe Fireworks Tutorials and Resources72

LED Cinema Display73

Adobe Fireworks Tutorials and Resources74

Page Curl in Fireworks 75

Adobe Fireworks Tutorials and Resources76

Create a Vibrant Digital Collage 77

Adobe Fireworks Tutorials and Resources78

Hand Drawn Styles79

Adobe Fireworks Tutorials and Resources80

Scotch Tape Tutorial 81

Adobe Fireworks Tutorials and Resources82

Obama’s Background83

Adobe Fireworks Tutorials and Resources84

Yin Yang Tutorial85

Adobe Fireworks Tutorials and Resources86

Vector-like Flowers87

Adobe Fireworks Tutorials and Resources88

Creating Fading Light Vectors89

Adobe Fireworks Tutorials and Resources90

Apple Air Banner91

Adobe Fireworks Tutorials and Resources92

Old Photos in Fireworks93

Adobe Fireworks Tutorials and Resources94

Fun With The Satin Gradient95

Adobe Fireworks Tutorials and Resources96

Cloud Effect97

Adobe Fireworks Tutorials and Resources98

Design Video Tutorials

How to make a Desktop Background99

How to make a Banner100

Create Elegant Stunning Swirls, Curls, and Swooshes101

Creating Car “toon” Tutorial102

Coca Cola Glass Effect103

Motion Bluring the Back of Sprites104

Custom 3D Perspective Boxes 105

Applying a 2D image to a 3D surface106

Create A Youtube Profile Picture In Adobe Fire Works CS3107

Fireworks Effects and Tecniques

Green Day Grunge Effect108

Adobe Fireworks Tutorials and Resources109

Camouflaged Car110

Adobe Fireworks Tutorials and Resources111

Pixelate Effect Tutorial112

Adobe Fireworks Tutorials and Resources113

Glowing Light Trail114

Adobe Fireworks Tutorials and Resources115

Awesome Light Effects in Fireworks116

Adobe Fireworks Tutorials and Resources117

Motion Blur118

Adobe Fireworks Tutorials and Resources119

Old Paper Effect120

Adobe Fireworks Tutorials and Resources121

Abstrakter Effekt122

Adobe Fireworks Tutorials and Resources123

Light Painting124

Adobe Fireworks Tutorials and Resources125

Dot Matrix Effect126

Adobe Fireworks Tutorials and Resources127

Twist and Fade Technique128

Adobe Fireworks Tutorials and Resources129

Fireworks Icons and Buttons Tutorials

Creating an amazing Palm Pre icon130

Adobe Fireworks Tutorials and Resources131

Grunge RSS Feed Icon132

Adobe Fireworks Tutorials and Resources133

Creating a Folder Icon134

Adobe Fireworks Tutorials and Resources135

Creating the IE7 Logo136

Adobe Fireworks Tutorials and Resources137

Gel Cap / Plastic Button138

Adobe Fireworks Tutorials and Resources139

A Simple Little Pencil140

Adobe Fireworks Tutorials and Resources141

A Simple little Envelope142

Adobe Fireworks Tutorials and Resources143

Create a Logo in Fireworks144

Adobe Fireworks Tutorials and Resources145

Fireworks CS4 Stamp146

Adobe Fireworks Tutorials and Resources147

Altes Wine Logo Tutorial148

Adobe Fireworks Tutorials and Resources149

Fancy Rss Button Tutorial150

Adobe Fireworks Tutorials and Resources151

Spiral Effect Snail Graphic152

Adobe Fireworks Tutorials and Resources153

A computer mouse in 7 layers154

Adobe Fireworks Tutorials and Resources155

Create Peeling Stickers and Page Curls156

Adobe Fireworks Tutorials and Resources157

Making a Cool button for your Website158

Fireworks Text Effects

Awesome Floral Type159

Adobe Fireworks Tutorials and Resources160

Grunge Effect 161

Adobe Fireworks Tutorials and Resources162

Amazing Neon Lights163

Adobe Fireworks Tutorials and Resources164

Grass Text165

Adobe Fireworks Tutorials and Resources166

Arched Text167

Adobe Fireworks Tutorials and Resources168

Reflective Glass Effect Tutorial169

Adobe Fireworks Tutorials and Resources170

Creating Image inside Text Effect171

Adobe Fireworks Tutorials and Resources172

Fireworks Animation Tecniques and Tutorials

How to make Animations and Animated Graphics173
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 Resources174

Animated Stickman – Tweening Animation175
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 Resources176

Animate and Tween in Fireworks177
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 Resources178

Creating an Animated GIF using Fireworks179
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 Resources180

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

Create animated GIF for Web Site182
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


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134
  135. 135
  136. 136
  137. 137
  138. 138
  139. 139
  140. 140
  141. 141
  142. 142
  143. 143
  144. 144
  145. 145
  146. 146
  147. 147
  148. 148
  149. 149
  150. 150
  151. 151
  152. 152
  153. 153
  154. 154
  155. 155
  156. 156
  157. 157
  158. 158
  159. 159
  160. 160
  161. 161
  162. 162
  163. 163
  164. 164
  165. 165
  166. 166
  167. 167
  168. 168
  169. 169
  170. 170
  171. 171
  172. 172
  173. 173
  174. 174
  175. 175
  176. 176
  177. 177
  178. 178
  179. 179
  180. 180
  181. 181
  182. 182
  183. 183
  184. 184
  185. 185

↑ 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.

  1. 1

    Hi Paul, thanks for including my tutorial on this informative list.

    I was hoping that an e-magazine of this caliber can introduce Fireworks from new perspectives; that it can bust the long-standing myths about what Fireworks can and cannot do. Too bad that it just reinforced outdated misconceptions like the following:

    Myth #1: Fireworks cannot beat Photoshop in graphic design.

    Unfortunately, few of the above-listed tutorials show Fireworks’ strength in raster graphic design and photo manipulation, the two tasks that I routinely perform with results that equal or surpass that of Photoshop. Reading the comments above, those few tuts didn’t quite convince users.

    (By the way: have you guys ever tried applying raster effects on real vectors, and keep the object’s vector properties fully editable afterwards? Welcome to Fireworks.)

    Myth #2: Fireworks is nothing but a specialized webdesign/mockup tool, or a poor man’s Photoshop.

    The tool is only as good or bad, as limited or unlimited, as the user behind the screen. The overwhelming number of webdesign tutorials shows only the lack of imagination and innovation to think outside the box. From which naturally follows Myth #3…

    Myth #3: Fireworks animation can’t produce anything more than outdated GIF clipart animation from the ’90s.

    The introduction of new animation tools in CS4 allows for more sophisticated techniques and results that are comparable to those done in Flash. I have done Fireworks animation for a recent popular game, and one of my tutorials on the subject has been featured on the Fireworks Developer Center at

    So, you see: the stuff is there. The possibilities are there. One just has to go out and get ’em.

    And so I’m still looking forward to the day a popular design site takes up the task of busting these myths on Fireworks. I guess I’ll just have to keep waiting – and writing more tuts on today’s Fireworks.

  2. 52

    This article will make fireworks, become more popular. It shown no.of hidden source here…

  3. 103

    Sarthak Singhal

    July 27, 2009 8:38 pm

    I love Fireworks. It rocks!

  4. 154

    Benjamin A. Wendelboe

    July 27, 2009 11:22 pm

    I’ve always loooooved FW, but the CS4-version has way too many flaws.. I need an alternative!

    I’ve tried DrawIt, Acorn, Pixelmator, Iris, Photoshop, Illustrator, GIMP, InkScape, NakedLight (and quite possibly more that I’ve forgotten to mention), and neither of them meet my expectations.. I need Fireworks, but I need it to be built from scratch.. The flash-based shit-interface (shiterface for short) is not doing it for me!

    Macromedia – I miss you!

  5. 205

    I don’t know why Mr. Adobe decided to get ride of image ready that was the best slicing friend, especialy in its last version with folders of slices. I stied stuck with that old photoshop version to keep it. Fireworks was the photoshop like of macromedia in the time where adobe and photoshop were rivals, i don’t understand what it’s going on in my webdesign adobe suite…

  6. 256

    I love Fireworks, i am using it since more than 4 yrs,
    I learn firework my-self because i was facing problem in slicing and web layout creation in Photoshop, it is not so handy as Fireworks.

    I love that!!! thanks for tutorials….

  7. 307

    Fireworks is better than PS in any means.
    I use FW to create designs, try new layouts, icons, gif-animations and everything else. I prefer FW over PS for editing photos.

    The fact that you can mix layers, frames, vectors and bitmaps in such a simple and powerful way like FW lets this software stand out like no other.

  8. 358

    I think I might go as far as add a “Designed with Fireworks” type thing in the footer of my next site. Lets start a revolution people!

  9. 409

    I agree with some of the other comments, I don’t know what the advantage would be of using fireworks over photoshop.

  10. 460

    I love FW and CS4 version is the best ever. I use it a lot. It’s great. I used photoshop when I need very elaborated designs, do some kind of special effect, or do something special with a image, then I import it to FW and finish my designs there, then work with DW. Work with Text boxes is much easier than PS. Integration between FW and DW is transparent. FW is a very powerful tool. I have been using this tool since Macromedia versions and it’s getting better with the time.

  11. 511

    Great reaction chope! I agree with you.

    But on the other hand i would never use fireworks for its css an html capabilities. I’m just using it for drawing. I hope that in a new versions it will be as good as indesign is for graphic work. They tried it with version CS4 but still there are a lot of bugs and unlogical things in it. An old inheritage of Macromedia i suppose.

  12. 562

    I realize you guys have been arguing for a wile now and I must say I haven’t read all the posts but… In my humble opinion, Fireworks is deffo the BOMB when it comes 2 mokups and creating very fresh websites and icons and stuff. The fact that it is vactor based just gives it such an advantage over photoshop. altough I do realize photoshop does have some vactor shit. But it just doesn’t compare. Anyway, i’m not saying photoshop is shit. couse for photo editing it still rulez all. But when it comes 2 website design, Fireworks is quicker and way nicer 2 work with.

    I’ve tryed FW4 but it wasn’t really stable for some reasen. Maybe its becouse i have 2 use it on a PC :) but FW3 is good anough for me!

    So the question is not wich editor is better. I would just use FW and PS together. Then YOU will have the ring that rulez all :)

    anyway… thats just my opinion

    parden my crappy english,


  13. 613

    I have been a long time Fireworks fan, even though I still feel like Adobe has made it into a red headed step child at times. The integration of vector and pixel art is handled pretty well, so much so that for creating simple web layouts, buttons, mockups I just use Fireworks. Photoshop’s vector tools are way too clunky for my taste still. I would like for Adobe to improve the color picker and gradient tools since they still seem stuck in the 90’s. I personally never use it to do any coding, just layout and slicing. Still way too many bugs but I think it is that way with CS4 in general (check out other designers that feel your pain ).

  14. 664

    I’ve tried to use fireworks on multiple occasions because of people saying it speeds up workflow. And even here in the comments people have talked about how they can pump something out in fireworks twice as fast as in photoshop. Great!

    What i have found though is that if i try to use fireworks, either i can’t do certain things, or it takes twice as long (for the design elements) of a website. I’ve been a web designer for 17 years now and used photoshop primarily throughout that entire time. I’m also very anal with my code. So to me fireworks is for more amateur users.

    I really would like a write-up/tutorial geared towards people like myself (that have been using photoshop and hand coding for so many years) that explain what it can do for us, and why we should switch (if we even should). Thanks for the round-up though.

  15. 715

    Thanks a lot for this list!
    I use Fireworks a lot for my designs and I’m sure these tutorials will come in handy!

  16. 766

    Holy list! Good job on “exposing” Fireworks.

  17. 817

    I have one question about it, if i want my boss (that only know about print) to buy it
    its correct to say that fireworks is for web design what indesign is for print?

  18. 868

    Replying to post 64 by Chris

    well Chris, I can imagin your reaction. I also was very sceptic about FW at first. But the fact that you can use masterpages, create what seams an unlimeted amout of pages so you can design the whole website in one file and keep all your objects in the same file, make the objects ones, use them everywere, and if it needs to be changes you change the object and it will change everywere. That totally rocks! Another great thing is that if you build stuff in vector, you can resize everyting too meet your needs.

    And ones you know the handy shortcuts its really fast and easy too work with FW.

    Further more I think its really shallow 2 say that FW is for the more amateur users. Some people just prefer 2 use diferent programes for diferent types of projects i guess. For instance, I use FW for designing the layout of the websites, Icons, and stuff like that. For photo editing I prefer 2 use Photoshop course its just the best for that kinda work.

    Anyway, just give it more then 12 seconds, open up your mind for new things, and you’ll see thats its a pretty fucking great program :)

    By the way, the the stuff in the article is not really representative of all the great stuff you can do with FW. And using fireworks 2 make the code for you?!?! come on guys! Be a little more creative that that will yah!!

    anyway, just my opinion


    sites that I know where made with FW:

  19. 919

    Nearly 70 comments and no-one’s mentioned Dreamweaver? Like many above I started with PS and have stuck with it simply cause I know my way around. For web stuff I use Dreamweaver and/or BBEdit. Now I have CS$ (heh, typo – should read CS4 but seems weirdly appropriate!) with Fireworks too and have looked at it a bit mystified as to how it’s supposed to help. What makes FW better than Dreamweaver (or BBEdit for that matter) for designing and setting websites? Not bagging FW, genuinely curious as to whether I should really lean in and learn it.

  20. 970

    Lets be honest, you really dont need to use fireworks at all.

    Photoshop does it all, better, and the web stuff in fireworks is pretty basic, I hand code my CSS and xHTML. If I want to create a quick and dirty demo for a client ill just lin the images though with image maps in dreamweaver. Simple.

    Oh and the grass text tutorial is a dire rip-off of a similar PS tutorial : (the PS tutorial actually has a decent outcome, rather than the one linked above which looks like a child made it.

  21. 1021

    I use PS, slice and then hand code in a text editor, but am intrigued by FW’s new CSS export feature. Has anyone used it and is it any good, i.e. produces a basic framework of valid code? If so sounds like it might speed things up a bit.

  22. 1072

    I’m a PS guy through and through but FW has some great stuff that PS doesn’t. Let’s not be snobs about one program but learn to use both to our advantage.

    With that being said I think it’s f#cking awesome you guys posted this. It totally rocks. The world is not built around Photoshop!!!

  23. 1123

    Ha ha. All these Firework nerds think that you can only do a mock-up in FW are retarded.
    PS easily can produce great mock-ups and quickly. FW is a bit cumbersome.

    If you know your way around CSS you don’t need FW to do all the work for you. I challenge ANYONE Fireworks user on this board to produce a better mock-up than me.

    On top of that. If you are concerned with slicing, you can open your superior PS files in FW for slicing.

    Fireworks…ha ha…….second place web app!

  24. 1174

    I am a developer and some time I have to make little changes to template design. I feel that Fireworks is much easier to work with rather than Photoshop.

    Thanks Smash for posting this article.

  25. 1225

    Fireworks is a great graphic design tool!

    In some ways, it is better than Photoshop. Its interface is easier to use, it’s less cluttered and more intuitive. It’s faster, too. Fireworks has a great mix of bitmap+vector tools — something that Photoshop doesn’t have. Photoshop is great for bitmaps, but it’s a pain in the *** when it comes to vectors. For vectors, Illustrator is great. But Fireworks has the bitmap+vector power… combined! :-)

    When you create graphic designs for Web & for screen, Fireworks is un-surpassed in that. It’s pixel-oriented and pixel-perfect. Photoshop is for editing photos and for print. Fireworks is for screen. Yes, you can use Ps to make things for Web and Fw to make things for print, but that would be clearly wrong.

    I use Fireworks for years. It has always amazed me how designers can think Fireworks is not-as-good-as-Ps. Yes, Photoshop has more power. But it’s… bitmap power. Fireworks is the right tool, when it comes to graphic design for Web. It is faster, lighter, easier, and more powerful. It’s more intuitive.

    I do 90% of my graphic design work in Fireworks. The other 10% are divided between Flash and Illustrator. I rarely even open Photoshop… and I’m fine with that:)

  26. 1276

    Replying to post 73 by Charlie
    >If you know your way around CSS you don’t need FW to do all the work
    >for you. I challenge ANYONE Fireworks user on this board to produce a
    >better mock-up than me.

    Buckle up, little buddy. Im ready for your challenge.


  27. 1327

    this is great!!

    its almost like the wars between mac and windows users! :)

    I say, WHATEVER! just use the tool that you think is most sutable for the job.



  28. 1378

    Brilliant! Thanks!!!!

  29. 1429

    i hav been using Fireworks for a long time, and i can say that it is much more flexible for web design than photoshop.
    this tutorials and techniques are good, thanks

  30. 1480

    big thansk marta

  31. 1531

    I love Fireworks. I think it is great, and I think that it is (in theory) far better than any other tool for doing Web design. I want to be able to use it, I really do. But I can’t. And the stupid reason why I can’t has nothing to do with a missing killer feature that Photoshop has — it is because the UI is so damn slow, bloated, and dysfunctional.

    1. Most of the palettes are abusively huge and there’s no way to make them smaller. The biggest culprits are the Align palette and the Properties palette. Flash CS4’s Properties palette is sane, vertical, and — shock, horror — has a scrollbar so I don’t have to waste screen real estate on all the properties I barely ever use.
    2. Why does the main window have control bars on the top and bottom? Why do I care that this file is set to export as a GIF 128, or that I can get a 4-up preview, when the only time I perform these actions is ONCE, AT THE END OF THE PROJECT? Fireworks is not Save For Web; stop wasting my screen real estate on shit I don’t use!
    3. The palettes are extremely inflexible; you can’t move the Properties palette to the right side because it always stays in a horizontal orientation. You can’t move the Paths palette to the bottom because it always stays in a vertical orientation. This sucks, especially since there are about 15 different vertical palettes and only like 2 horizontal ones (and the horizontal ones are pretty tall at that). I don’t have enough space for that much stuff in one place on my screen!
    4. When I select multiple, er, objects (what would be called a “Layer” in Photoshop), and then want to choose only one of them from the Layers palette, I can’t just click on the object’s label or thumbnail. This is unlike EVERY OTHER PROGRAM in CS4. I have to either click first on a non-selected object to deselect the one I want and then click on it, unselect the object I want to select individually by hitting cmd+click and then select it, or put my mouse in the tiny space between the lock button and the thumbnail and click there. Why??!!?!
    5. You can’t nest Layers. You have to explicitly create a “Sub-layer”. Photoshop has had easy-to-use, logical nested groups since version 8. Flash, too. Sub-layers are hacks and they suck badly.
    6. Whenever there is a state change in the main canvas, it takes way too long for palettes to reflect the change. I can’t wait half a second every time I click on a different object for the Layers and Properties palettes to wake up and refresh themselves! This make the entire application feel extremely sluggish and unresponsive and is the #1 reason why I do not use Fireworks. I don’t want to feel like I’m waiting for my tools to catch up with me all day.

    I hope someone at Adobe reads Smashing Magazine so I can use Fireworks when CS5 comes out. ;)

  32. 1582


    Fireworks is great. I’ve been using it for 10 years to design web pages and it’s the best. there are a number of effects that photoshop is better at but the slicing and export to html is MUCH better. Photoshop is for digital art, fireworks for web pages!

    I therefore set out to create web pages with a photoshop AIR feel and have recently created a tutorial for all you FW wannabees here.

    Also, see my own site for similar design – follow link to tutorial.

  33. 1633

    Not trying to step on anyone’s toes or thoughts here, but I simply don’t see the benefit in Fw. In a sense:

    – jQuery+CSS+HTML can make wireframes much faster than Fw, and have added interaction

    – jQuery is displacing the need for simple animation with Flash. Then couple in HTML5 and…

    – Why anyone would want to create graphics not as polished as you can make in Ps is beyond me. The argument is that Fw exports better? I think that’s a myth based on my experience the past 10 years.

    I’m definitely not trying to convert people away from Fw, but place me on the side of the line where Fw has no use on my daily work flow. I have much better tools to accomplish the jobs Fw is supposedly good at.

    Caveat: There is one thing Fw is better at, but I work around it: rendering of text. I hate Ps’ way of rendering text. Fortunately, I never have to worry about it from a Web design view because it’s always either coded or sIFR.

  34. 1684

    For all Smashing Magazine readers that still ask the question:

    Is Fireworks better than Photoshop? (In the Web/screen design field, at least) …here’s a link that may help you find the answer in the easiest possible way! :-)

    Note: Take with a hint of humour, please!;-)

  35. 1735

    hi guys, thanks for featuring my tutorials !

  36. 1786

    can someone tell me how to link a webpage when making a drop down menu, the way it is done….???

  37. 1837

    You´ve missed this great wireframes kit inspired by Balsamiq

  38. 1888

    These tutorials have a lot of important and useful information. There is something for everyone in this set.

  39. 1939

    CarlosHPS Webdesigner

    November 18, 2010 2:30 am

    Thank you for nominating my blog as a reference in Fireworks.
    I feel honored.
    Big hug.

    CarlosHPS Webdesigner 8)

  40. 1990

    Hi Paul,

    Thanks for linking to tutorials! You could add a section on “Fireworks Tips” to round off advice from around the web and probably a “Features Explained” section. I see that you haven’t added our main tutorial series – Website Design using Fireworks and Dreamweaver – Its quite comprehensive and easy to understand, especially for new designers – URL:

    (Note: The Comment form is not working in IE8 – I’m using Chrome this time)

    best regards,

    Anita Sudhakar

  41. 2041

    Great list of tutorials. For those people questioning why you would use Fireworks over Photoshop….it depends on the task at hand. If you want to create nice vector web graphics then FW should be your tool of choice. If you want to clean up a photo or bmp image then Photoshop is superior. Having vector layers that are so easy to control and manipulate is invaluable.

  42. 2092

    Veryyy good, thanks


↑ Back to top