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.

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 =).

Grunge Text Effect Tutorial (323) 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 tutorial, if you have questions, write a comment here or contact me thru my twitter account.