50+ Excellent Adobe Fireworks Tutorials

November 4th, 2010

Adobe Fireworks is a somewhat unnoticed but very useful member of the Adobe Creative Suite. It is used for multiple purposes such as to create vectors, design application interfaces, digital artwork, and create rapid prototypes of websites. There is a lot more you can do with Adobe Fireworks, including generating PDFs, exporting CSS based layouts and a variety of other things that you can explore.

In today’s post, we have collected some useful and fresh tutorials on Adobe Fireworks that will let you renew your love for this amazing member of the Adobe family. Enjoy!

Useful Fireworks Tutorials

How to Create a Magazine Cover with Fireworks CS5
This tutorial will demonstrate how to create a magazine cover with Adobe Fireworks.


Web Site Design Tutorial
In this tutorial, the artist will show you how he created a beutiful web layout using Fireworks.


How to blur background in Adobe Fireworks
In this tutorial you will learn how to blur the background of digital photos with Adobe Fireworks in a non-destructive way.


Creating a Web Site Top Menu with CSS
A detailed and interesting tutorial in which we learn how to create a web site top menu with CSS Fireworks.


How To Create a Stylish Navigation Bar In Adobe Fireworks
The artist has created this simple yet modern navigation bar in Fireworks, and will walk you through the steps necessary to create something similar. In case some windows and panels should not be able to be seen on your computer, simply go to the ‘Windows’ menu and open them.


Interaction design and rapid prototyping with Fireworks
In the following four short video presentations, David Hogue demonstrates how to use Adobe Fireworks CS4 for information and interaction design and creating interactive prototypes quickly, and how you can use Fireworks as a design tool that fits into your complete design process, from concept to development.


Prototyping for the Apple iPhone using Fireworks
This tutorial shows you how to use a few scripts to make your Fireworks prototype work for the Apple iPhone.


Designing An Effective Gaming Clan Logo in Adobe Fireworks
In this Adobe Fireworks tutorial, you will learn how to create your own gaming logo for your website using Adobe Fireworks.


Tech Orb Interface Video
This Adobe Fireworks tutorial teaches you how to create a tech orb interface. Artist will show you some techniques on how to create a different kind of glossy button/orb and add some extra touches to the design. Although this is just a portion on a web interface / application skin.


Create a rope
Learn how to create a rope in Adobe Fireworks.


Build a Promotional iPhone App Website Wireframe in Fireworks
In this tutorial, we’ll cover the design process of creating a wireframe for an iPhone application website in Fireworks.


Adobe Fireworks Tutorial – Creating A Candy Button
In this Adobe Fireworks tutorial, you will learn how the artist created those nice looking icons ( twitter , rss , mail )


Dot Matrix Effect


Fireworks CS5 with Device Central
This brand new feature in Fireworks CS5 allows users to prototype an interface with mobile devices.


Design a Layout in Fireworks CS4
In this tutorial you will learn how to design the below layout using Fireworks CS4


Create a Slideshow in Adobe Fireworks CS4
Create a stunning slideshow gallery in Adobe Fireworks CS4 within a few minutes! Click on the image below to view the finished slideshow gallery.


Create a Collage by Fading Images in Fireworks CS4
In this tutorial you will learn how to create a beautiful header collage of 4 different pictures in a few simple steps using Fireworks CS4!


The Abduzeetles Rockband Website in Fireworks
In this tutorial we’re going to use nice commands, and what is really cool is trying to test other values on each step, other colors, other shapes, always exploring the whole potencial from every tool.


How to make items and people stand out
How to make items and people stand out through a photo manipulation.


Antique skeleton key with compound shapes
This video shows you how to design an antique skeleton key with compound shapes in Fireworks CS5.


Creating A Fading Line Effect Using Adobe Fireworks CS4
One of the most overlooked tools in Adobe Fireworks is the Eraser Tool. It is a neat tool especially if you want to manipulate bitmaps. Vector paths with fills have options to use fill colors that are gradients , or semi transparent colors.


Creating a Glass Button in Adobe Fireworks CS4
Using Adobe Fireworks, the artist shows you how to create a glassy style button/icon you might find on a mobile device or as a social media button.


Text Glow effect
A small tutorial to create a simple text-glow effect:


Fireworks CS5: FXG Files to Catalyst
The FXG file format allows for documents to be moved from one Creative Suite application to another with ease.


Creating graphics for custom wallpapers and backgrounds.
In this tutorial we are working in Fireworks CS4 creating graphics for custom wallpapers and backgrounds.


Gradient Text Logo Tutorial in Adobe Fireworks
The gradient text logo tutorial is a very easy tutorial in Adobe Fireworks, and helps you create a quick text based logo for your website in just a few steps. This technique is used in most popular websites today.


Creating a fancy text effect in Adobe Fireworks


Water Drops
In this tutorial, you will learn how to create water drops through effects from the Photoshop Live Effects and Masking.


How to Create a Page Curl in Adobe Fireworks


Masking in Fireworks CS4
Tom Green covers the basics of using bitmap and vector masks in Fireworks.


How to fast prototyping
In this tutorial, the artist goes over some of the features that help with fast prototyping, like the fit canvas button and the optimizing panel.


Creating AIR Applications with Adobe Fireworks
In this tutorial, Tom Green shows how to design a simple Flex application and export it from Fireworks.


Photoshop Image to Web using Fireworks CS4
Tom Green shows off how to bring a Photoshop image into Fireworks and exports it as a html document.


Create a Vibrant Digital Collage Mixing Buildings and Vector Shapes on PaperS
In this tutorial, you’ll learn how to use Fireworks CS3 and Illustrator CS3 together. You’ll create some illustrative vector elements to add to the final composition. You’ll also mix in photos and light effects. Learn how to use a cool paper background and tips to improve your workflow.


Creating Fading Light Vectors in Fireworks
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.


The Abduzeetles Rockband Website in Fireworks
We are going to use nice commands on this tutorial, and what is really cool is trying to test other values on each step, other colors, other shapes, always exploring the whole potencial from every tool.


Creating an amazing Palm Pre icon on Fireworks


Awesome Floral Type in Fireworks and Photoshop
In this tutorial we will use Adobe Fireworks and Adobe Photoshop. Actually the whole effect will be done in Firewors, then in Photoshop, we will add some textures and a old paper background effect.


LED Cinema Display in Fireworks
In this tutorial, the  artist will teach you how to created a beautiful LED Cinema Display in Fireworks.


Twist and Fade Technique
In this tutorial you are going to learn how to create some fun abstract effects using Adobe Fireworks CS4. This tutorial explains how a single Image/Vector can be converted into various Images/Vectors using the properties such as Steps, Spacing, Rotation and Opacity. The image below shows how we have applied twist and fade effects to a honey bee.


Highway Sign


Create a Night Scene
In this tutorial we will learn how to create a beautiful night scene in fireworks.


Page Curl in Fireworks Tutorial
In this tutorial artis will show you how to add a stylish page curl to the corner of your image. To start, lets get an image that we can add the page curl to.


3d Text
A beautiful tutorial where you will learn how to create a 3D Text in Fireworks.


Awesome Light Effects in Fireworks inspired by the James White’s O series
This tutorial is simple, just playing with some circles, blend modes and a bit of color!


This tutorial will show you how to create a barcode for any purpose.


Mobile workflows using Fireworks CS5 and Device Central CS5
In this tutorial Liz Myers will show you how to harness the power of Fireworks combined with Device Central in these common workflows:


Making of Darth Android


Designing a Website in Fireworks CS4
At this MAX session, XD’s Paul Dorian showed attendees how to use Fireworks CS4 to rapidly prototype websites, application interfaces, and other interactive designs, then output their designs to Adobe AIR, Flash CS4 Professional, Flex, HTML, or CSS-based layouts. Paul also shared tips on making the most of the new Fireworks user interface and core functionality, such as consistent text handling, via the Adobe text engine.


Useful Resources & Articles


Aquil Akhter is a web graphic designer and has been working in this field for 8 years. He also runs the blog webdesigncore.com, which focuses on free web resources and inspiration for designers and developers.

Tags: ,

25 comments for „50+ Excellent Adobe Fireworks Tutorials
  1. Nima Heydarian on November 4th, 2010 at 2:41 pm

    Love it.


  2. Curtis Scott on November 4th, 2010 at 3:55 pm

    Some of these are really great, some are not so much.

    Being an avid photoshop user, fireworks is very intimidating to me. I have this page bookmarked for future visits, thanks!

    • Kevin on November 9th, 2010 at 12:04 am

      For me, it’s just the opposite. Fireworks CS5 (I’ve been using FW for years) is a lot less intimidating than Photoshop, especially for individuals just starting web design.

      Give it a shot. :)

  3. Whoa on November 4th, 2010 at 3:56 pm

    Bad links to carloshps; it tries to download a ZIP file!

  4. draganescu on November 4th, 2010 at 8:32 pm

    Very useful and great list that you have here!

  5. alex on November 4th, 2010 at 9:18 pm

    Great posting list very useful thanks for sharing

  6. Er0pb14 on November 4th, 2010 at 11:24 pm

    Awesome tuts! Thanks!

  7. Disljenko on November 5th, 2010 at 12:01 am

    I love your tutorial, they are very useful. Keep doing stuff like this.

  8. Carlos on November 5th, 2010 at 12:34 am

    Useful information.
    I’m doing my first steps in image processing and design.
    Thank you very much for sharing them

  9. Brandon Cox on November 5th, 2010 at 5:59 am

    Suweet!!! Man, I love Fireworks and wish it got more attention. You guys rock!

  10. Shabir Gilkar on November 7th, 2010 at 10:23 am

    Hi All,

    Can any body tell me, if we are creating web graphics in Photoshop, then what was the need to created adobe Fireworks if web graphics are also done in this… I hope there may be special reason behind this about which i am not known.. if any anybody inform me, it will be highly appreciated.

  11. Tom Klaassen on November 7th, 2010 at 4:32 pm

    Nice great post
    NB: typo second tutorial: beutiful

  12. Timo R. on November 11th, 2010 at 8:30 am

    Really great Post and Collection, thanks!

    There are more pages with fw tutorials e.g. http://www.webmaster-elite.de/tutorials/fireworks.html

  13. Jiri on November 11th, 2010 at 2:23 pm

    One new page with free graphics for Adobe Fireworks.

  14. Jiri on November 11th, 2010 at 2:24 pm

    Sorry, here is link http://www.webportio.com/

  15. Whimsy Collective on November 12th, 2010 at 2:33 pm

    (image of a screenshot of the table tab in html setup for the export option)

    Anyone know how to use the table tab under export options?

    Also, thank you Aquil Akhter for the resourceful examples.

  16. blue2x on November 13th, 2010 at 9:04 am

    Thanks for featuring my site, hope you can visit often > http://www.blue2x.com < more fireworks goodies coming soon

  17. CarlosHPS on November 18th, 2010 at 11:09 am

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

    CarlosHPS Webdesigner 8)

  18. Geoff McMahen on December 15th, 2010 at 2:29 pm

    What a great post and source of resources!
    Fireworks is such an underrated tool.

  19. manu on June 18th, 2011 at 12:39 pm

    wowwwwwwwwwwwwwww awosome tnkz dude

  20. Kemar on August 3rd, 2011 at 9:20 pm

    Well, what I can say, you guys said most of it. Fireworks is the BOOM! Too underrated, I will say, too underrated. Check out this battery tutorial http://pixelignite.com/blog/view/battery_power to see what I can be done from a starting Fireworks believer.

  21. Erick on November 20th, 2011 at 7:43 pm

    amazing!!! thanks!!!!

  22. Elizabeth Machado on February 2nd, 2012 at 7:33 pm

    Hey was wondering, im pretty new to web design, and i was told that if i build my business website using fireworks that google wont “crawl” my site correctly because my text will become an image.. Is this correct?

    • dmnit on August 11th, 2012 at 12:06 am

      Yeah. Fireworks exports the text as image.

  23. seagreen on February 6th, 2013 at 10:29 am

    crazily cooool…tnx!!!