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.

oulined text

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.

Select the outline of the letter form for graffiti tutorial in illustrator

add a black stroke to the graphic

Choose the 5th brush from the top of the same effect that I have here

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.

I have never EVER played with the 3D option in Adobe Illustrator – the main reason is because I have an amazing 3D art guy at my fingertips for whenever I need a realistic soda can, or a perfume bottle. But I was designing charts and graphs – hardly something a 3D genius wants to deal with, and something I can not make right in my mind, spending hundreds of dollars to have someone else design. So I jumped in head first.

Thanks to smashing mag for some amazing 3D tutorials, I was able to figure most of it out. You can check out these tutorials here: Smashing Magazine’s 50 Excellent 3D tutorials

As great as these tutorials are, I still ran into issues. My first issue was not really with the 3D tool, but the Illustrator graph tool. This tool is pretty great. It basically is a mini excel spread sheet inside of illustrator. You open it, set the type of graph that you want (pie, bar, scatter) and then input your data in the excel-like grid. WONDERFUL, i thought. Since I was redesigning a graph that was created in illustrator, I thought I was golden. Not So.

Unfortunately, I never found an explanation to this issue, but any number over 900,000,000 threw this error at me:

Graph data value is out of range

I guess that means that the value was too high, and I could not find any way to change this! So if you know any way to change the max value for the Illustrator Graph tool, please let me know.

So back to the 3D thing. I was able to just create my own little bars with the rectangle too. Just as if you were making a flat bar graph. Then you have to group all of them together, choose the EFFECT -> 3D -> EXTRUDE/BEVEL  There you will set your angles or move the little cube to get the look you want. The reason you have to group the bars is because grouping seems to keep all of the items on the same plane. If you do not group them, they seem to move all around and look like they are set up on steps above each other. Try it and you will see.

The key here is after you add your 3D effect go to OBJECT -> EXPAND This is the trick! When you “expand” anything, it created outlines for all of the little bits that make up the 3D graphic. Its a great little tool to use when you want to customize little bits of your 3D element!

Once you exand your item, you can select the different faces of the rectangle individually (you may have to “ungroup” a few times) and add gradients! That’s about it. From there, you can work with any one of those tutorials I linked you to, and play around!

I just wanted to get this post out there simply because the info was not out there. I know, some of the tutorials to tell you to expand, but not all of them, and if you have your 3D rectange sitting in front of you, and all you can see is a flat rectangle you drew and some fancy 3D thing over it, you can get rather frustrated.

Let me know if this helped you! I would love to see what created using this tutorial, or any of the ones linked to at smashing magazine