Mar 18 2009

40+ High Quality Adobe Fireworks Tutorials, Resources & PNG files


Adobe Fireworks is getting popular than ever, many web designers find a lot of fun to experiment different techniques and learn how to work with various aspects of Adobe Fireworks to spice up boring pictures and make them into works of arts. So, if you’re interested in learning some new skills, whether you’re a beginner, intermediate or advanced user, these Adobe Fireworks tutorials are for you.

So in today’s post, you’ll find an assortment of top-notch tutorials, resources and .PNG downloadable files that others have freely contributed to the design community for making your next adobe fireworks effect.

1. Add Radial Gradient in Text

fireworks tutorials

A tutorial which will give you step-by-step instructions to create a peeling effect. Great for placing in a corner of a website to reveal news or offers.

Download .PNG file is available

2. Add Radial Gradient in Text

fireworks tutorials

A tutorial which will give you step-by-step instructions to create a peeling effect. Great for placing in a corner of a website to reveal news or offers.

3. Awesome Light Effects in Fireworks inspired by the James White’s O series

fireworks tutorials

This tutorial will reproduce James White’s style using Fireworks. The process is simple, just playing with some circles, blend modes and a bit of color!

4. Abstrakter Effekt in Fireworks

fireworks tutorials

This tutorial will teach you how to create an abstract effect in adobe fireworks.

Download .PNG file is available

5. Extracting Logos

fireworks tutorials

This tutorial will show you how to extract a logo and/or logotype from a raster image, using only Adobe Fireworks Live Filters. With this method, you also have the option to re-color the lifted logo in anyway you want: solid, gradient, or textured. All of this, while avoiding the temptations of the quick-and-dirty Wand Tool.

Download .PNG file is available

6. Circular Shadows & Highlights

fireworks tutorials

Gradients and masks are all it takes to create lighting effects for circular shapes in Adobe Fireworks. Generate as many layers of shadows and highlights as you need. This tutorial will start by putting into a canvas a circular graphic to add shadows and highlights to.

Download .PNG file is available

7. Simple Orbs Tutorial

fireworks tutorials

The Simple Orbs Tutorial is a very simple technique , yet it could add some dramatic touches to your design. It is just one layer object but you can replicate it over and over, and change the sizes.

Download .PNG file is available

8. Papel de Parede 2009

fireworks tutorials

Learn how to create a grass text effect in adobe fireworks.

Download .PNG file is available

9. Create a vector in Adobe Fireworks

fireworks tutorials

This is a video tutorial that will teach you how to create a vector graphic in Adobe fireworks.

10. How to make Animations and Animated Graphics in Adobe Fireworks

fireworks tutorials

11. Text effect download

fireworks tutorials

Download .PNG file is available

12. Creating the iPhone Interface on Fireworks

fireworks tutorials

Learn how to create the iphone interface on Fireworks.

Download .PNG file is available

13. Fireworks 101

fireworks tutorials

This tutorial will cover some basic functionalities and it’s very useful for those willing to improve their Fireworks skills. You will learn how to play with paths, combining, subtracting and much more. Also you will end up creating a logo.

14. Creating the IE7 logo effect in Fireworks

fireworks tutorials

Learn how to recreate the IE7 logo in Fireworks.

15. Remove Foreground Object in Fireworks/Photoshop

fireworks tutorials

Learn how remove a foreground object from a picture and keep the background with amendments to make it appear as though the object was never there to begin with.

16. Adobe Fireworks: Text to path

fireworks tutorials

Sometimes we want to align or place our text freely, without having to limit our self to vertical and horizontal view only. Maybe we want to create some so called typography art – which requires us to place text in, let say, a circle, or any free form shapes, created using pen tools. With Adobe Fireworks, you can easily attach texts onto any shape or path created using pen tools.

17. Beautiful night scene

fireworks tutorials

You don’t have to be Van Gogh to create a beautiful night scene. Fireworks artist Angelo Sabal will show you how you can easily create a realistic night sky using Fireworks.

18. Creating Fading Light Vectors in Fireworks

fireworks tutorials

In this tutorial, you’ll learn how to create some cool effects with fading light linear vectors in Fireworks. It’s really easy to do and takes just a few minutes. Create fading lights using vectors, then convert these vectors into bitmaps, and learn to use effects from Fireworks CS3.

19. Pixelate Effect Tutorial

fireworks tutorials

Have you ever wanted to create a pixelize look on your designs but you didn’t know how? Well here is your answer ! In this tutorial you will learn how to install 3rd party plugins in adobe fireworks and use them.

20. Awesome Floral Type in Fireworks and Photoshop in 5 minutes

fireworks tutorials

Download .PSD file is available, you can open in fireworks as well

21. Creating A Thick Text Outline

fireworks tutorials

22. Masking Effects Using Bitmap Masking

fireworks tutorials

Learn to use layer masks (Group as Mask) in Fireworks CS3 to create faded image silhouettes.

23. waterDrop

fireworks tutorials

Download .PNG file is available

24. Sticky Notes

fireworks tutorials

Sticky notes are little pieces of bright-colored paper with an adhesive strip on the back, allowing you to jot down reminders, checklists, or *gasp* passwords and post them onto a surface. This Adobe® Fireworks tutorial will show you how to recreate them digitally, with a certain degree of realism, for your own design projects.

Download .PNG file is available

25. Create Vista-like Wallpapers with Fireworks

fireworks tutorials

Download .PNG file is available

26. Fireworks 101

fireworks tutorials

This tutorial will go through some of the features that help with fast prototyping, like the fit canvas button and the optimizing panel.

27. Amazing Neon Lights on Fireworks

fireworks tutorials

This tutorial will go through a few steps to create neon effects on Fireworks.

Download zip file

28. Glowing light trail

fireworks tutorials

This tutorial will teach you how to create a colourful glowing light trail. This is rather a simple tutorial that can be performed in only 6 basic steps.

Download zip file

29. Exporting CSS and images in Fireworks CS4

fireworks tutorials

Wouldn’t it be nice to simply draw a website design in Fireworks and then instantly export the HTML, CSS code, and all associated files required to display the page, so that all the files are ready to upload to your web server. This article describes the new “CSS and Images” export option available in Fireworks CS4 and gives tips for getting the best results out of it.

30. Create Windows vista buttons

fireworks tutorials

31. Create a Slideshow in Adobe Fireworks CS4

fireworks tutorials

This tutorial will teach you how to create a beautiful slideshow gallery with transition effects, categories, captions and resizable images in Fireworks CS4.

Click here to view the finished gallery

32. How to Change the Colour of an Image Object in Adobe Fireworks

fireworks tutorials

Quite often, when searching for a relevant image to go on a new website we are designing, we’ll find one that’s almost right, but not quite! Read on to find out how simple it is to change the colour of a selected part of an image in Adobe Fireworks.

33. An example of how to create a computer mouse

fireworks tutorials

34. Light Painting in Fireworks

fireworks tutorials

How to create Light Painting in Fireworks.

Worth Checking Resources

- 131 Web 2.0 Layer Styles for Fireworks

fireworks tutorials

This set is based on Ultimate Web 2.0 Layer Styles for Photoshop and is re-done for Fireworks.

- 75 Powerful Adobe Fireworks Extensions

fireworks tutorials

Here are some of the best 75 Adobe Fireworks Extensions (MXP), nearly all are compatabile with Fireworks MX, 8 and CS3 (and quite a few with Fireworks 3 and 4).

- Fireworks Developer Center

fireworks tutorials

- List of Fireworks compatible plug ins

- The Things You Might Have Missed

- Rapid prototyping in Fireworks CS3

fireworks tutorials

Let’s take a quick look at how the prototyping process works today in the real world.

About the Author

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.


Comments and Discussions
  • Desiztech, 18 March 2009

    Really really good. I love all the resources here. A definite bookmark!

  • Clay McIlrath, 18 March 2009

    Good post Noura! I’ve been wanting to learn Fireworks, and have been looking for a good list of resources to start with! This is perfect!

  • blue2x, 18 March 2009

    Really nice list. And thanks for posting three of my tutorials in here =)

    You guys rock !

  • Brandon Cox, 18 March 2009

    I’m a Fireworks nut in a world of Photoshop fans, so this is right up my ally – thanks!!

  • Gelay, 18 March 2009

    i love Fireworks!

  • EricB, 18 March 2009

    Awesome list! Thanks for sharing! Noupe is really a great source for web design!!

  • Narendra.s.v, 19 March 2009

    That’s a BIG list, i know most of them but the neon lights effect rocks!

  • boudj, 19 March 2009

    great list !

  • Css-Magazine, 19 March 2009

    Hmmm really nice list.I like a lot nr.8.

  • kovshenin, 19 March 2009

    Great. I was really looking for a list like this. Gone drawing lol :)

  • Danh ba web 2.0, 19 March 2009

    Great list. Thanks so much :D

  • Dainis Graveris, 19 March 2009

    man, this article is extremely useful! Bookmarking this one for later use. Thanks!

  • Silas, 19 March 2009

    Wow, great list, very useful. thanks

  • nice list of fireworks resources, thanks..

  • Travis Lehman, 19 March 2009

    Great to see Fireworks getting some mainstream love! Excellent post!

  • Wade Jackman, 19 March 2009

    This post makes me so happy! I love Fireworks but see so little mention of it.

  • Oli, 19 March 2009

    Congratulations on deleting my comment.

    #10 still has nothing to do with Adobe Fireworks though.

    • Noupe, 19 March 2009

      I was waiting for you to come back :)

      I guess its not hard to point out an error or a mistake without being rude. What me or anyone else don’t like is being rude.

      Anyway, thanks for pointing that out and its fixed now.

      @everyone feel free to send me your feedback or suggestions about this post or any thing you want to be covered on Noupe. I really appreciate it a lot.

  • 1ijack, 19 March 2009

    wow thanks for making this list. i love fireworks, been using for more than 4 years and the best part is it also runs in ubuntu via wine. :)

  • sean steezy, 19 March 2009

    wow. maybe i will actually open fireworks and mess around, thanks for getting me started!

  • Michael M., 19 March 2009

    Awesome resources. Thank you for sharing!

  • ace_dman, 19 March 2009

    wow Ive seen already many tutorials dedicated for photoshop ,but this time its time for Fireworks,thanks for this stuff,I really need this,so thank you very much

  • ITM Design, 20 March 2009

    Thanks for featuring our tutorials at ITM Design!

  • hal? y?kama, 21 March 2009

    Thanks, Super designers

  • littlewooo, 21 March 2009

    Wow.the pics are so cool

  • Sklep Zoologiczny, 22 March 2009

    Admirable post like always.

  • Andy, 22 March 2009

    Fireworks is a program for those that don’t want to learn html, css, ect… but they want to be a webmaster (and the web is full of professional websites done with fireworks).

    • Gemma, 05 October 2010

      That is complete and utter rubbish. Fireworks has a crap export to HTML function in that it still exports using tables. So any decent web designer worth their salt still has to know standards-compliant (X)HTML and CSS to write the markup for their designs. What Fireworks really does well is prototyping and building interactive mockups for screen and mobile. Which is why I use it instead of Photoshop when designing UIs.

  • strony internetowe, 24 March 2009

    nice collection

  • Cristhian Bedon, 24 March 2009

    Great list that you have here!

  • Eneza, 25 March 2009

    A keeper!!! I am big FIREWORKS user! Great List

  • Fireworks is my main tool and it can do awesome things, its not photoshop but it covers a lot

  • jacktech2007, 02 May 2009

    This site totally rocks! Love all the Fireworks tutorials and resource links.

    • Siren, 25 February 2012

      can someone please post some beginner tutorial please. i’m new with odobe fireworks. I’m good with photoshop, but fireworks looks so much more complicated…though i would like to learn it.

  • Jonas B. Ingebretsen, 17 May 2009

    Awesome! Thank you.

  • sourabh raghuwanshi, 25 February 2010

    Wow, great list, very useful. thanks

  • Hamork007, 12 January 2011

    Great List! Although Fireworks is not a competitor to Photoshop but it’s a great software.

  • Alex, 05 November 2011

    Great collection!

  • Julie, 07 January 2012

    Thanks so much for sharing these resources!

  • Jenny C, 08 March 2012

    Fantastic! Thanks a lot!

  • SAMIR MAHMUD, 02 April 2012

    It’s Really Good…………………………… :-) :-)

  • Pavan Somu, 17 July 2012

    In the future, fireworks will come close to Photoshop and AI, as the need for it increases. If Adobe has a vision. Fireworks will become industry standard software when it comes to photo, graphics and image. I am completely speechless for this article. I’m very happy to read this article and it is very helpful to me.

search form
image description image description