Creating Grunge Text Using Adobe Fireworks

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.


Now lets start the Adobe Fireworks tutorial.

1.) First, we start by creating a new document, with a black background color. I used the Bell Gothic Font in this tutorial , or you can use your favorite font if you like. Canvas size varies upon the preferrence of the user, usually when making rough designs I like 700 x 500 sizes or more.

2.)  Let’s type the word GRUNGE , with a 59 font size  or bigger . Change the color of the font to white or something lighter than black.


3.) Now we will start creating the grunge effects, which we will replicate and modify over and over again. We start by creating tiny circles using the Ellipse Tool. When creating the circles, its best to hold the SHIFT key so that we create a perfect circle with an equal width and height

4.) Now the fun part begins, see the 5 circles we created in step 3? We have to group them as one object and clone them as often as we like.

5.) I created 3 clones , we must use the subselection tool to rearrange the circles or create more clones. You can put the clones closer together if you like.

6.) If you want to create smaller circles, we create them with a width and heigh of at least 1 or 2 using the Elipse Tool. Try cloning the circles as much as you like.


7.) Now your circles looks like a galaxy of stars already , You can group all the circles together again and make another clone , rearrange if you like. Check image 2, i duplicated the clone and used the Flip Horizontal Button. Move the clone 2 or scale them down if you wish


8.) We must convert the TEXT we created as paths, so that we can modify the look of the TEXT. So Click Text > Convert To paths

9.) Bring the clones we made in step 7 and we will start placing them in the letters.


10.) You can either move the circles to the text as a group using the pointer tool or you can manually move all the circles using the sub selection tool.


11.) Try moving some of the circles and play around with it. Put the circles either inside the letters or just near them.

12.) We then need to change the colors of the grunge circles we made into black.


13.) Select all objects, the circles and text and click Modify Ungroup , repeat this process till all groups become paths, then click Combine Paths > Union

14.) The grunge circles is now a single path, we will now use the Reshape Area Tool to edit some of the parts. The technique to reshape the paths is an experimental process, you can use a bigger or smaller tip size if you like , around 10 to 30 size would be ok.

15.) For an added effect, we flip the letters R and N using the Flip Horizontal tool


16.) Select the TEXT group and click Modify > Ungroup, repeat the process until you can see all letters as Paths. Then click Modify > Combine Paths > Union. ~ A little reminder, the fireworks text engine is pretty bad, especially the kerning, you might want to move some of the letters so that they are equally spaced  .

17.) Select both objects, then click Modify > Combine Paths > Punch. Now we have one single vector path with a grunge effect =)


18.) Still not convinced ? You can even distort the edges of the letters if you like using the Reshape Area tool ,but not too much =)


19. ) Finally , just add a fancy background =).


[download id=”8″] if you want to download a PNG version of the tutorial, showing all the steps ( all vectors ) , so you can follow them clearly incase you are confused.

There are other uses for the grunge text effect, you can also use them in your other vector shapes, the possibilities are endless ! I hope you enjoy reading the Adobe Fireworks tutorial, if you have questions, write a comment here or contact me thru my twitter account.


19 replies
    • blue2x says:

      Hi Keith , the effect was created using vector paths with a Rectangle Fill , the fill has a white and black gradient.

      Stack them one after then other and change the layer to Color Dodge, and try moving the direction of the rectangle fill handle. Hope that helps

  1. Keith Davis says:


    That does get me moving…. but I was hinting that producing your header could be one of your future tutorials.

    We live in hope….

    Nearly forgot, what about adding one of those tick boxes, which says "notify me of future comments" to your blog.

    It helps me know what's happening.

    Just a thought

  2. Alex says:

    Don't worry I worked out my rookie mistake – I forgot to 'Convert to Paths'. I've finished it now so Thankyou for the great tutorial! Just one more thing…

    Where do you get the red 'fancy' background from?

    Please explain how I can get it etc…

    Thanks you so much! in advance.


    • blue2x says:

      Hi Alex , if download the grunge png source file, you will see all the steps and the red background at the top right corner , I just used some basic fireworks textures and layer modes. Thanks for visiting my site

    • blue2x says:

      Hi Vlood, made a mistake on that part, you’re not suppose to ungroup the text in here yet. Just ungroup all the circles ( dont select the text paths , its better to hide them in the layer panel ) and combine the circle paths into one.

Trackbacks & Pingbacks

  1. 30 Tutorials That Will Teach You Fireworks | Arbenting says:

    […] Creative Grunge Text […]

  2. Become Master of Text Effects With 40 Adobe Fireworks Tutorials | My Free Design Area - A Webpage for Joomla Free & Commercial Templates, Wordpress Free & Commerciak Themes, and Drupla Free and Commercial templates, Flash Templates and animation, says:

    […] 28. Creating Grunge Text Using Adobe Fireworks […]

  3. […] Out there, there are a lot of photoshop grunge text tutorials but no Adobe Fireworks. In Fireworks, we do not have brushes but we can try a different approach by creating a grunge look using vectors. The key thing to note here is experimentation by trying different approaches till you are satisfied. Read the tutorial.. […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply