Share via:

40 Tutorials for learning and mastering Fireworks

Long live firework adobe are no longer further developing fireworks, but hands down one of the best applications on the web for designing websites. In this round up we will be taking a look at some of the best tutorials from all around the web for learning and mastering fireworks the ultimate Fireworks tutorial resource if your a beginner or even a veteran user of Fireworks .

This post will show give a great insight into the possibility’s of what’s achievable within Fireworks from photo manipulations to prototyping an application or a website. Why not try out Fireworks ? its still downloadable from adobes Creative Cloud.

Premium design assets for
your next project

Acess to a huge libary of design resources from Photoshop brushes to vector resources.

Join today

1. The Abduzeetles Rockband Website in Fireworks

web-design
The Beatles Rockband’s website, it’s simply wonderful. And thinking on it I decided to redesign it in Fireworks, but now our own site, that we’ll call the Abduzeetles Rockband!

2. Creating a cool website header in fireworkshiny-header

We have been posting a series of articles with simply fantastic images from the most famous graphic designers and illustrator from all around the world.

3. Classy personal portfolio in Fireworks

personal-portfolioIn this tutorial I will show you how to create a single page site for your personal portfolio.

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

give-watIn 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.

5. LED Cinema Display in Fireworks led-monistor

We’ve been using 2 templates in our Wallpapers of the Week articles: the iPhone and the new Apple Cinema Display 24. The iPhone frame we had already shown you how to create it in Fireworks. Now it’s time to make the new Apple’s display in only a few steps. Take a look and let me know what you think.

6. Simple Orbs Tutorial

simple-orbsThe 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.

7. Easy Camera Icon in Fireworks

sigma-cameraSo in this tutorial It will show you how to create a camera icon in Fireworks. I will focus on the lens pretty much, but as you will see, to create a realistic effect it’s all about playing with gradients.

8. Five easy steps to create a barcode in Fireworks.

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

9. Light Painting in Fireworks

light-paintingI have to say, I took quite sometime trying to find the right combination of effects and blend modes, however I believe I have found the simplest one, and achieving practically the same result as in Photoshop.

10. Rapid Fire #1: Photo-Realistic

polaroidMake your digital images more convincing and lifelike with just a handful of gradients and custom shadows. Once you’re done, your pictures will look like real photo prints, you’d swear they popped out of the screen.

11. Creating Fading Light Vectors in Fireworks

fading-light-effectsIn 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

12. Creating an icon in Fireworks

folderAdobe Fireworks is a familiar tool to a significant subset of web developers. There are many reasons for this. In addition to the benefits of integrating with Dreamweaver, Fireworks has an easy-to-use interface and includes a wide array of web-focused features. The image creation, slicing, and optimization tools make Fireworks extremely useful for both beginning and advanced users alike.

13. Create a Letterpress Text Effect in Fireworks

letter-pressed-effectToday, in this Adobe Fireworks tutorial you will practice how to create a letterpress effect. This is very detailed tutorial, so if you have a beginning level knowledge in Adobe Fireworks you can follow the simple techniques used in this tutorial you will have no problem creating a beautiful and professional effect in the future.

14. Creating the IE7 logo effect in Fireworks

ie7-logoDespite the fact I’m not a big Internet Explorer fan, the challenge to recreate the IE7 logo in Fireworks is really worth it.

15. Easy Odometer Icon

In this first post, I decided to join 2 things I love: icons and Fireworks! And as I’m a big fan of Bjango’s work (check it out bjango.com) I’ll start with a very simples tutorial to show you how to create a very cool icon using Fireworks.

16. Realistic 10-step 3D simulation with reflection in Fireworks

3dThis tutorial will show how a realistic 3d simulation, such as text, could be created in Fireworks 8, a 2d software.

18. Apple iCloud Logo with Brushed Metal effect

icound-iconI came across the new iCloud application from apple (which is in beta at the time of writing this tut) the Apple iCloud Logo replicates the brushed metal that permeates most, if not all apple products. I thought it would be a good excuse to show some techniques for creating brushed metal effects.

19. 7 Steps Colored Lights Header

light-headerI came across the new iCloud application from apple (which is in beta at the time of writing this tut) the Apple iCloud Logo replicates the brushed metal that permeates most, if not all apple products. I thought it would be a good excuse to show some techniques for creating brushed metal effects.

20. Grooveshark design style in Fireworks

uiFor this tutorial we’re not gonna apply any great effect or use a unknown tool, but only show you a simple way of making neat effects that will make the difference in a layout.

21. How To Create Sticky Notes Using Photoshopsticky-note

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.

22. How To Text Wrap In Photoshophow-to-text-wrap-photoshop

This tutorial was written for Fireworks CS4 and higher.

23. Fancy Rss Button Tutorialrss-icon

In this Adobe Fireworks tutorial , you will learn how to create a fancy RSS button for your blog / websites.

24. Extracting Logosextracting-logo-from-white-background

After a short hiatus, I’m back with a tutorial that shows 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 .

25. A Simple Little Pencilpencil-icon

A great tutorial on how to create a pencil icon.

26. How to blur background in Adobe Fireworksblur-background-in-fire-works

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

27. Gradient Text Logo Tutorial in Adobe Fireworksgradient-text-logo

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.

28. How to create clouds in Adobe Fireworksclounds

Here is a very quick way to create clouds, flat clouds, (not the fluffly style) in Adobe Fireworks – from scratch. It’s really easy to accomplish this and they fit perfectly in any colorful nature theme artwork you might create.

29. How to make items and people stand outhow-to-make-images-stand-out

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

30. Amazing Neon Lights on Fireworksneon-text-effect

After a few tests to find the right colors and lights, I’ve created a nice image for this tutorial. I’m gonna show you here a few steps to create neon effects on Fireworks. The process is really easy, and for the cheers of everyone, we’re going to use lots of overlays, color dodges and lots of glow!

31. How to create shiny ribbonshiny-ribbon

Just in time for the the holiday season, this Adobe® Fireworks®tutorial will show you how to create a silky, flowing ribbon; the type that you could slap onto your graphic elements to make them more festive. I hope you enjoy my tiny Christmas present.

32. Awesome Light Effects in Fireworks inspired by the James White’s O serieslight-effects-in-photoshop

The process is simple, just playing with some circles, blend modes and a bit of color! So let me know guys what do you think and show us your experiments as well!

33. Awesome Light Effects in Fireworks inspired by the James White’s O seriesjeweel-button 

The process is simple, just playing with some circles, blend modes and a bit of color! So let me know guys what do you think and show us your experiments as well!

34. Dot Matrix Effectdotted-map

In this resurrection post for the Rapid Fire tutorial series, we make use of Adobe® Fireworks®‘s Grid Fill Textureto apply a dot matrix effect to any vector element.

35. Creating an amazing Palm Pre icon on Fireworksphone-illustration

This last saturday we saw the release of the awesome new phone Palm Pre. A lot of people already bought their gadget, but if you want one, at least a icon one, we made that for you. This tutorial will show you how to create in Fireworks the icon for the Palm Pre frame.

36. Creating Grunge Text Using Adobe Fireworksgrunge-text

In the web, we have seen a lot of Photoshop tutorials on grunge text / special effects but none in Adobe Fireworks. We do not have brushes in FW, but we can try a different approach on creating a grunge look using vectors. The key thing to note here is , experiment  on different approaches till you are satisfied.

37. Create Vista-like Wallpapers with Fireworksfire-tuts 

I This is great tutorial to create a vista wall paper.

38. Create a Vibrant Digital Collage Mixing Buildings and Vector Shapes on Papercollage

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.

39. Build a Promotional iPhone App Website Wireframe in Fireworkswireframe

Wireframing is a useful part of the website design process. It’s great to separate out this planning stage and have your page positioning, spacing, layout, and other elements like text size and tone works out before you jump into Photoshop to add color, texture, images, and effects to polish off your design.

40. Golden Seal TutorialGolden-badge

Whether it’s signifying merit or signalizing new content, a golden seal graphic often does the trick. Utilizing two of Adobe® Fireworks®‘ nifty features—Auto Shapes and Text On A Path—you’ll be stamping shiny seals in no time.

Post tags

RELATED POSTS

Unlock High-Quality Resources to
Unleash Your Creativity