Web Design For Idiots

If you have a website that would benefit from some neat graphical headers, and graffiti is what you want, but you think it will look cheesy, LOOK HERE!!!

Graffiti can look really really cheesy if it’s dont wrong, and a bad font is used. It can look very 1990′s free tripod-esq.. But here I will show you, step by step, how to create a really cool graffiti effect on your text using a free font and some free brushes.

First off.. I found these brushes on this website that I have since fell in love with. They are just basic brushes for drawing, but they are very clean, and give a great realistic marker effect!! Here is the website in which I got them from: (Track 6) Or you can download them directly from my website by clicking here:

LineartBrush-Freebie

Then you will need to download this free graffiti font. It is not the best font, and if you have one that you line better, then go ahead and use that one. You do not need to use this font, I am just offering it just incase you do not have your own.

street-writer graffiti font

Once you have those both downloaded and installed, you can get to work!!! So lets start here:

Type out the text that you want to create into a 3D vector graffiti design

Then you will want to change the color of the font. Black does not seem to work well with the 3D effect in illustrator. It turns into a black blob. Any other color, however, will create a nice shadowed effect in which you can see the details quite well. So next step is to change your color of your fill:

Once you have the color that you would like, you will then go to TYPE -> CREATE OUTLINES (or shift+command+O on mac) **warning** you will NOT want to try and change the color after you create outlines. It will become a large project to do so, so please make sure that you are happy with the color you chose!

Now, when you create outlines, it still keeps all of the paths and text grouped. This is good. If you ungroup the text, and move on to the next step, you will get an undesired effect when you apply the 3D. What will happen is the letters will look like they are overlapping each other, than looking as if they are on the same line – which is what you want.

Now this is where your graffiti will really start to take shape. You are now going to go to EFFECT -> 3D -> EXTRUDE & BEVEL.

That will open the Extrude & Bevel tool, which can seem confusing at once, but I will explain what each of those options do for you:

You can use the settings that are explained in the graphic above, or you can tweak your own angles. The only option that you will really want to keep the same is the “perspective” option. We will keep that at 0° because this will make it look like you are looking at the text straight on, and not from an angle, which will keep the size of all of the letters uniform.

This is what your graphic will look like when you are done:

Now, from here, we will add the details that make this look more realistic.

With the object selected, click OBJECT -> EXPAND. Doing this will outline every path that creates the 3D effect. By doing this, you will now be able to tweak and adjust the 3D part of the object, and not just the outline of the text.

and this is what your file will look like now. The look will be the same, but you will now see a complex group of paths

Now you will want to ungroup these paths so that you can select them individually. To do this, you go to OBJECT ->UNGROUP (or command +shift + G on a mac) Once ungrouped, you will want to select the outlines of each letter form and apply a black stroke and one of the brushes that we downloaded to it.

I chose to use the 5th brush from the top. Its a medium size brush with a pointed end. This will give you a realistic marker effect on the stroke of the text. Once you apply that, your text will look like this:

And from here, we will add the little highlights to the dimensional side of the graphic. Again, just use the open arrow to select random paths in the darker green area. Do not select all of the paths, because if you do this, your graphic will start to look too busy. Do some random selection, but try to select the senctions that will enhance the curves and angles in the text. Like this:

You can see here, all of the different pieces that I had chosen. Then you simply apply the same black stroke and brush to these paths, and look at what we have:

AND THAT’S IT!!!

In the next tutorial, I will explain how to give this graffiti graphic a shiny effect that you see commonly used in street art. If you want to see some of the best REAL graffiti art, check out this link here..

And don’t forget to comment with a link to the work that you created using this tutorial!! Or if you need help, feel free to comment here or post in the forum for even MORE help.

---

Want to know who is offering this awesome content? Here it is! Someone who is relatively new to web design. I am new enough to still remember how absolutely frustrating it was to try and get anything done in this field, but have also been around long enough to be able to help those that are where I was a year ago. Aside from web design, I run the office of my dad's engineering business, and do book keeping by trade. I love my pets.. All 6 cats, 1 peg legged dogs, and 1 hedgehog. LOVE THEM!! Oh yea, and my husband. He lets me chase my dreams and I let him do the same. We are happy people because of it. Read more from this author

---

Tags: 3D, 3D text tutorial, Adobe, Extrude & Bevel, Extrude and Bevel, Graffiti, illustrator, Street Art

This entry was posted on Thursday, June 25th, 2009 at 9:18 pm and is filed under Graphics and More. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.