Tutorial: Street Art Header

Written by David Dylan

Level: easy.

It?s the holiday season. I felt like a break from the usual seriousness, and I haven?t done a tutorial in a while. So, just for fun, and perhaps some edification, I present you a simple way to do cool looking street-art headers for your blog, site, or even print.

For this job you?ll need a drawing tablet. I use a really cheap one from Trust. It set me back $20. ? Not an investment to skimp on, I?d say. It really does improve your game a lot. You?ll need a scanner, too.

You?ll also need a vector drawing tool and a cool font, aside from Photoshop or The Gimp.

Teachers; this is a cool way to get your students to appreciate the beauty of fonts. I have done similar assignments in College as well as given these assignments when teaching. Feel free to use, therefore.

About Street-art

If you are even remotely of the same generation as me, then you grew up during the heydays of ?graffiti? or ?street art?. It seemed every kid was carrying around a sketchbook with designs for ?tags? and ?pieces?. Some of these kids turned out great designers, and a select few even became celebrated artists or found their way in our business.

Doing this art form was a game of improvisation, working fast and always outdoing the other guy. These kids were teaching themselves about use of colour, composition and fonts as they went along, and better than any teacher ever could.

To do your work, you had to sneak into places, climb fences, pick locks, and bring all your tools with you. Cans of spray paint were expensive, too. (So, most kids stole them.) So, even if you had all the colours you wanted to pick from (which you usually didn?t) you still had to pick and choose which ones to bring since you couldn?t just drive up in a truck. Like 8-bit art, street art was shaped by limitations. This is, in part what makes it so cool.

These days if you google ?graffiti? you?ll find lots of examples of art in a ?graffiti? style. I?ll call it ?neo-graffiti? since it differs from actual graffiti in two very major aspects; it was made with care, ample time and usually indoors, on paper. As a result, it is a lot cleaner and in fact a major stylistic characteristic of it is that the lines are crisp and sharp. This was something the original street artists couldn?t afford and/or achieve. They were working in the dark, rushed and looking over their shoulders. Their tools were cans of spray paint meant for touching up cars and such, not very sophisticated airbrushing tools, therefore.

We are going to be doing a ?Piece?, which has the look and feel of one of those original pieces.

I do not condone theft, vandalism or crime in general. The fact that these kids were being, well, kids really, does not make their art any less cool. But if you are looking for someone to tell you to go out and deface a building, just move along please.

Our Piece

We start on paper.

A really cool ?piece? was not just a word done in a fancy style. There was usually at least some sort of cartoon involved as well. I use the so-called ?Disney method? for creating cartoon characters quickly and consistently. It, in a nutshell, means using geometric base shapes.

So, using a soft pencil, I draw a large circle for a head. Our character isn?t going to get a body. I also agonized a little bit over placement of the arm; in the end I let overall composition prevail over anatomic accuracy. The smaller circles are where the hand and fingers are going to be. The cross through the circle tells us where the nose is going to be, and serves as guide for the facial features. Where the lines intersect is where the face is going to be pointing at, so if you want a face looking up, put the cross higher in the circle, lower for down, etc.

Then, using geometric base-shapes, circles, semi-circles, cones, etc. start filling in the cartoon. Stick to the rule that all basic shapes should come straight out of your math course book and you?ll find you get the hang of it in no time.

Then trace the drawing with a sharpie or somesuch. You aren?t doing something to keep here. Make the lines that are on the ?outside? of your figure thicker, this helps give it depth. Don?t bother with very fine lines. What you are going for here is thick lines that will scan well, and will be picked up by Photoshop when selecting by colour.

Erase your pencil work. Don?t cringe. I could show you how to work with onionskin paper and so on, but we are not wasting time on preliminary work here, just do this quick & dirty.

Then? scan. Scan at a high resolution, at least 300 Dpi; you?ll need those pixels later on.

The composition

Find yourself a cool font you like. Type your chosen header in Illustrator or another vector tool and change the text to outlines. Open this in Photoshop or The Gimp. (Or Pixel, or?)

In your scan, select all blacks. ( In Photoshop: Select > Color range > Shadows ) and create a new layer.

Now, take your pad and stylus and set phasers to ?spray paint?. Use a thin line for starters, something like a 5 pixel radius and 50% flow should do fine. Start tracing your lines.

Once you are done, copy this over to your word-art and create a composition.

Merge both layers and create a new one.

The outlines

Like I told you earlier, thicker outlines give your work depth and dimension. It also helps you to think of your artwork as a set of related shapes rather than a cartoon and a word, which in turn helps your overall composition. A bit of psychology here.

Again, select all blacks.

In your new layer, start tracing the outlines, with a thicker line this time. Something like 11px and 50% flow, depending on the actual size of your image of course.

Only trace the outer lines, don?t be tempted to start filling in details. The selection is there to prevent you going outside of the lines too much, because one stray line could mean you get lost later on. They also cut off your nice spray paint effect and create jagged and sharp edges where you don?t want them, so we are coming back to these lines later.

Then, with a thinner line, I used 5px and 50% flow, start doing the inner lines. This is your last chance to discard, so think about which lines you actually need.

Finishing up the lines

Once satisfied that all the lines you need are there, and those you don?t need aren?t (Like where the words and the cartoon intersect) deselect and hide your original artwork. You should now be left with a crude outline of your work.

Enlarge as much as you need, create a new layer and start tracing ?freehand?. Now is the time to make ?pretty? lines, cool connections and so on. Play around with different sizes and flow settings. I stuck with only two: 11px and 5px, and 50% flow, but there?s no reason not to play if you want to.

Colouring

Graffiti often looks very colourful, but if you study pieces, you?ll find that they usually use only a very limited set of colours. Like I explained earlier: the artists simply couldn?t bring a truck with a full palette. So, think about your colours and select a few. You?ll need two tones (a darker and a lighter) of each.

For each colour-set, create a layer UNDER your outlines layer. Under? Yes, under. Real Graffiti artists did an outline first, then set up the colours and shapes, and then covered up the odd mistake with their black outlines. We, having the luxury of ctrl-z and the magic of layers are working in reverse because it?s more comfortable.

You are painting under your lines so you can work ?freehand? and not worry too much about going outside of the lines.

Using a small brush size, first trace your coloured shape around the edges, then using a larger brush for comfort and speed, fill it in.

Detailing

Now you have a basic coloured piece to work with, it pays to go back in your lines and see where you need to touch them up. I find that using a very low flow setting and a very soft brush eraser gives best results for touching up those lines. Take care now, benefit later.

The shadows and highlights

I said you needed two tones of each colour. Well, if you looked really hard you?ll have noticed that I used two tones of green already on the camo jacket. But that?s not why.

Now we are going to add shadows and highlights. Use a very low flow setting, a large, soft brush and perhaps set it to opacity of 70% or so. Now start giving your work some extra dimension.

This part is really what turns your artwork from an artsy header into graffiti-looking, so take your time and don?t be afraid to go overboard.

As a final touch, take an off-white (full on white just looks too clean, you know), set your brush to really small and stick with the 70% opacity, and start painting in extra highlights, accentuating details.

Done.

I hope you enjoyed this little exercise. It?s not very highbrow but a lot of fun to do, I think.
Please leave links to your examples, tips and other remarks in the comments.

Happy Web-building!

Metadata:

• ID: 7509
• Type: 2
• Title: Tutorial: Street Art Header
• Subtitle:
• Author: David Dylan
• Author ID: 109
• Date Posted: 2012-05-09T08:49:18