Urban Art Tutorial in Photoshop and Illustrator

Advertisement

Photoshop and Illustrator, as we’ve all come to realize, have revolutionized contemporary design and illustration, unleashing the creative potential of artists the world over. Through this tutorial, we’ll take you through process and technique, from sketch to Photoshop to Illustrator, so that you can learn skills to complement your ample creativity!

Final Preview

Illustration: Final1
Illustration: Final

As we go through constructing this image, I encourage you to experiment with the skills you learn, applying them to your own style.

Part I, Illustrator: Lines And Flats

Pencils Sharp! We Start With the Sketch.

Though a short one, this step is without a doubt the most important in this tutorial. With a strong sketch and concept, you have a much better chance of producing a first-rate result! That said, let’s begin fleshing out the rough details of our illustration.

Illustration: Scanned in Sketch

Converting Your Sketch to Lines

You can use Illustrator’s LiveTrace Tool2; or, as I’ve done, begin tracing out the line work yourself with the pen tool. I favor the latter because it gives me more control of individual pieces of line work and color blocks going forward.

Once your line work is in place, make some custom brushes by doing the following:

Method 1
Scan in your own brush strokes using ink, markers, crayons or — you guessed it — paint brushes. Adjust the levels as described in the LiveTrace Tool link3.

Select your new brush shape. In the brush panel, select the option Create New Brush…, select Art Brush, select Tints in the method drop-down, and make sure the direction of the arrow is correct.

Custom Brush Settings

Method 2
Alternatively, you could create some simple shapes as brushes if you want to maintain a smooth vector, as shown here. Once you have created your shape, simply follow the steps above. I prefer to make a number of brushes of varying widths so that I can quickly and easily apply them to my line work.

Illustration: Line Work with Brushes Applied

Method 3
A final option is to explore Illustrator’s Brush Library through the Brushes Panel or check some online resources4 to see if one is available that suits your needs!

Fill in Your Flats

Select each of our shapes, and begin applying your stroke and flat colors to them. Try to select colors you’re satisfied with, but don’t sweat it too much because we can modify them later.

Illustration: Flat Colors Applied

Now bring in our background, in this case, the Philadelphia skyline (my city of residence and the birthplace of modern graffiti5). As you did with the character sketch, trace the skyline shape and choose its fill. Leave the stroke empty because we don’t want it for the skyline. Finally, apply a Warp Effect, with Arch settings as follows:

Illustration: Warp Background
Warp Filter Options

Bringing Your Vector Work into Photoshop

As long as you’ve done a good job of organizing your shapes and layers into folders, this will be a relatively painless process.

Open a new file in Photoshop that is 1200 by 1200 pixels and 72 DPI. Grab all of your artwork in Illustrator and copy and paste it in Photoshop. When the paste options appear, select Smart Object (make sure the ratios are 100% each). Now, grab your main elements in Illustrator, copying and pasting each in Photoshop using the rules covered above. Line them up to match your underlying artwork, and once everything is in place, delete the original master file.

We go through these pains so that we can easily update all of our elements, whether the flats or the line weight, or even if we want to add new elements, as I have done with the yellow arrow on the left, which balances the image.

Illustration: Imported into Photoshop

Part II, Photoshop: The Environment

I knew the vibe I was going for with this illustration when I initially sketched out the character. But aside from the skyline, the rest of the background has to be fully thought out. So we’ll tackle this first to bring it in line with our character.

Note: When working on the layers, I apply each new layer as a clipping mask (Alt + Left-click between the two layers), so that the layer applies only to the element I’m working on at the time.

Clipping Mask Layer Example

First, the Sky.

Let’s make the background fill #081104. Now, download some large cloud images6 or create your own7 clouds. For my purposes, I took a cloud image and added a noise filter with the following settings:

Add Noise Filter Options

In this first cloud image, I switched the Blend Mode to Vivid Light to get some interesting highlights, but it wasn’t quite enough. So I added a second cloud image on top of the first, applied the same noise filter and switched its Blend Mode to Color Dodge.

Illustration: Sky Layers Step1

I don’t want the background to be too light, but I want it to “pop” in the skyline. So let’s add a glow behind the buildings. Command/⌘ + Left-click on your skyline layer to get the shape path, Shift + F6 to bring up the Feather Option; I chose a value of 35px. With White as your Swatch color, press Alt + Backspace to fill it. Change the Blend Mode to Luminosity, and lower the Opacity to 20%. Duplicate this layer and change the Blend Mode to Overlay while increasing the Opacity to 60%.

Choose the Smudge Tool, with a radius of about 100 to 150px and 40% strength, and smudge outward to add some randomness to each layer. Finally, as before, use the Add Noise filter to add in extra grit to maintain the feel.

The final two steps for the sky are simply to add a vignette around the edges with a large black brush: roughly 300-400px, 40% opacity and 40% flow. If it gets too dark, bring down the layer’s opacity. The final top layer for the sky is a spot pattern, which is applied over top with an Overlay Blend Mode.

Illustration: Sky Layers Step2

Next, the Foreground.

I’m going for a loose depiction of asphalt, so let’s first get rid of the uber-clean vector edge by using the Torn Edges filter on the raster mask with the following settings:

Torn Edge Mask Example and Filter Options

The next step is to select a gravel or asphalt8 texture and apply it to your foreground; change the Blend Mode to Overlay and lower the Opacity to 50%. Adjust the Contrast Levels, using Image >> Adjustments >> Levels, until you have a texture you’re satisfied with.

Even though this illustration is fairly abstract, I’d like to maintain a loose perspective with my texture through the Free Transform tool (Command/⌘ + T), skewing the perspective to get a rough match.

Next, take a large brush with a black swatch color, around 250px, with the same opacity and flow settings as before. Add some deep shadow along the edges to frame the character’s feet. Switch the Swatch Color to White and add a highlight where the feet are; change the layer’s Blend Mode to Overlay, and adjust the layer opacity until you are satisfied with the output. Be liberal with the number of layers and variety of Blend Modes you use to get deep, rich shadows and highlights.

Finally, add two deep shadows under the feet to ground the character to your newly finished foreground!

Illustration: with Foreground Finished

Adding Interest to the Skyline.

We want to make the skyline pop out of the foreground more while maintaining the high level of detail we see coming out. The first step is to add a glow to the center, originating where the foreground and skyline meet. To do this, select the Brush tool, with a White Swatch Color, 40 to 60px large, set to Dissolve mode. Make a couple of strokes, following the curve of the foreground. Now, select the Radial Blur filter and apply the following settings:

Radial Blur Filter Options

Create another layer, and bump the size of your Dissolve Brush up to about 100px. Paint circularly out from the center to give an extra grain glow; adjust the layer opacity if it is too intense.

Next, we’ll add a rising sun layer to the skyline by creating a vertically oriented vector rectangle, duplicated a dozen times horizontally in a row. Space them out evenly by selecting all of your layers and using your Distribute tool (or Layers >> Distribute >> Horizontal Centers). Press Command/⌘+T to Free Transform, hold Command/⌘ on the bottom-left anchor, and begin to drag it in while also holding Alt + Shift to skew the end points evenly. Make each book-end rectangle match the angle of the skyline’s end buildings. Set the Blend Mode to Overlay and the Opacity to 20%.

Illustration: Rising Sun on Skyline

Finally, select another grunge texture9 (in my case, a blue brushed metal), and set the Blend Mode to Overlay, over top all of the other layers.

Illustration: Skyline Finished

The Final Background Layer: the Text.

First step: figure out what word or phrase you want. Mine is an homage to the Philadelphia hip hop group The Roots10 (“the illa” refers to the Illadelph Halflife11).

Now convert each word to a shape layer.

Starting with “the,” apply a Free Transform (Command/⌘ + T), and skew the perspective until you have an exaggerated angle that fits the illustration. Do the same with the “illa” shape on the other side. Change both layers’ Blend Modes to Overlay, and duplicate each to double the Overlay effects.

Finally, apply a mask to this group’s folder, like this:

Text Group Mask Layer Example

Take your brush tool and, using a variety of grunge and splatter12 brushes, mask chunks of your text until you have an interesting textured mask that fits your background. Pay special attention to the corners of the text: sharp corners do not generally suit a grungy effect like this.

Illustration: Text Finished in the Sky

Part III, Photoshop: The Character

Patterns and Halftones

I began adding some hatching to my original sketch, so I will continue that by adding patterns and halftones13 throughout. In addition to the patterns, I’ve decided to step back into my Smart Object files and add some vector shadow shapes to the legs, shoes and face, as you can see here:

Illustration: Patterns and Halftones

Shadows and Highlights

The next step is to add the shadows and highlights throughout using the Brush tool. Although this process has been condensed into one step, this will undoubtedly be the most time-consuming one in the process. But it is certainly worthwhile because it lends a sense of varied depth and detail that makes the illustration a finished piece. During this process, as mentioned, I tend to use different Blend Modes to create the desired depth; I use Multiply, Color Burn, Overlay, Soft Light and Lighten the most.

Illustrations: Shadows and Highlights

Dirt and Grunge Details

First, using our splatter and dirt brushes14, let’s add some stains and scratches to the pair of Chucks our character is wearing; after all, there is no such thing as a clean pair of Chucks. Next, we’ll add the asphalt texture from the foreground onto our smoke and arrows layer. Change the texture’s Blend Mode to Overlay and drop the opacity down to 50%. See the shadows and detail pop out?!

Illustration: Dirt and Grunge Details

The tee-shirt still lacks detail, so let’s switch back to that Smart Object layer and add a design to it.

Finally, the last step is something I do quite often and which, depending on how accurately you have followed your original sketch, you may want to pick up as well. And that is simply to take the original sketch, line it up with the illustration and lay it over the whole thing. Change the Blend Mode to Color Burn, drop the opacity to 15%, and you’re done!

Illustration: Dirt and Grunge Details

Conclusion

Here are some useful links and resources, some of which we referred to throughout the article. This same sketch could have gone in any number of exciting directions had you followed the tips in these resources, or created your own techniques or relied on happy accidents along the way.

Resources

Final Illustration

After some final tweaks and additional layers, here is the final illustration:

Illustration: Final23
Illustration: Final

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/images/grunge-illustrator-tutorial/v2_sml.jpg
  2. 2 http://tutcandy.com/2009/04/ai-sketch-to-vector-tutorial/
  3. 3 http://tutcandy.com/2009/04/ai-sketch-to-vector-tutorial/
  4. 4 http://designblurb.com/free-download-sketchy-illustrator-brushes/
  5. 5 http://www.youtube.com/watch?v=9dxLCrTVQHY
  6. 6 http://best-photoshop-tutorials.blogspot.com/2009/01/free-cloud-and-sky-textures.html
  7. 7 http://www.tutcast.com/photoshop-creating-clouds/
  8. 8 http://www.sxc.hu/index.phtml
  9. 9 http://www.sxc.hu/index.phtml
  10. 10 http://www.theroots.com/
  11. 11 http://www.amazon.com/Illadelph-Halflife-Roots/dp/B000000OV7/ref=sr_1_1?ie=UTF8&s=music&qid=1246994628&sr=8-1
  12. 12 http://www.brusheezy.com/brushes
  13. 13 http://www.brusheezy.com/patterns
  14. 14 http://www.brusheezy.com/brushes
  15. 15 http://tutcandy.com/2009/04/ai-sketch-to-vector-tutorial/
  16. 16 http://designblurb.com/free-download-sketchy-illustrator-brushes/
  17. 17 http://www.tutcast.com/photoshop-creating-clouds/
  18. 18 http://best-photoshop-tutorials.blogspot.com/2009/01/free-cloud-and-sky-textures.html
  19. 19 http://www.brusheezy.com/brushes
  20. 20 http://www.brusheezy.com/patterns
  21. 21 http://www.sxc.hu/
  22. 22 http://www.smashingmagazine.com/2008/08/13/top-10-killer-photoshop-combo-moves/
  23. 23 img/v2_sml.jpg

↑ Back to topShare on Twitter

Chris Fernandez is a professional Web designer and illustrator whose work can be found on his website, www.5to8design.net. Check it for the launch of his blog chronicling his adventures in design and his ever-shifting sources of inspiration.

Advertising
  1. 1

    first – nice one, but as you say, the most important is to have good concept – and that´s the hardest thing on it :-)

    0
  2. 2

    Why not make the shadow (gradients and so) in Illustrator? Is there a reason?

    0
  3. 3

    Haha! Is this supposed to have anything to do with graffiti?
    The author of this article clearly have no clue about graffiti style or culture.

    0
  4. 4

    well in fact i don’t think that this compromises real graffiti style. and once again I may notice that I dont think that this meets the quality of a good SM article.

    0
  5. 5

    Bet some people might find this interesting, but as stated above; it has nothing to do with graffiti. Why was this posted?

    0
  6. 6

    omg dont slag off the envato’s or they wont reply to anything you post on their forums!

    I think they thought the character style is graffiti which I kind of agree with, I quite like it.
    I guess you guys are talking about ‘bombs’ like the one I made on DeviantArt:
    http://robbythedesigner.deviantart.com/art/Graffiti-Wallpaper-133889921

    .

    0
  7. 7

    graffiti is to subjective to be labeled legit or not. love the city of Philadelphia in the background, especially since that’s where graffiti originated froa being a philadelphia resident, I think it really encompasses the vibe of Philly, right down to the chucks. I think this is a great SM article. thanks for publishing!

    0
  8. 8

    This is the worst, most generic tutorial I have seen on any design sites.

    0
  9. 9

    freaking stupid

    worthless post

    how does this help anyone make a dime

    0
  10. 10

    Posts #8 and #9. Did the author use too many big words or were the pictures too complex for you both to grasp?

    Disregarding the subject matter, the tutorials were clearly displayed and for the most part rather concise.

    This is certainly the point of SM’s tutorials.

    0
  11. 11

    Thanks for sharing! I’ve always had trouble getting sketches on to look decent in my editors, hopefully this can help me with that.

    0
  12. 12

    This doesn’t look a thing like graffiti yo.

    1
  13. 13

    I found the title misleading, and the post itself well below the standards I’ve come to expect from SM.

    1
  14. 14

    sick..this is so dope.

    0
  15. 15

    this was the worst post SM has possibly ever posted. why SM? why?

    0
  16. 16

    Great tutorial with lots of detail and I love the final image. This took a lot of work to put together. Well done.

    0
  17. 17

    I agree, great tutorial, I’ll try it out soon!

    My interest is not only showing great creativity & quality, but also developing good technique & best practices. Writer’s first paragraph states his purpose and he delivers.

    0
  18. 18

    Awesome Tut. I’m new at computer coloring and this walked me thru nicely!

    0
  19. 19

    Well written and informative. Creativity is the responsibility of the originator.
    You gave me the tools to expand and add freshness to my ideas. Thanks man, will bookmark and refer back.

    0
  20. 20

    Great step-by-step tutorial, this post will be a great reference for future projects!

    0
  21. 21

    Lisa Michelle Garrett

    October 14, 2009 2:10 pm

    I think this tut is very informative and thanks again for taking the time to share with us. To many people hating on one another instead of lifting people up. Keep up the good work!

    0
  22. 22

    While I agree this post is not up to par with others I have seen I have a more detailed reason why than it just being a bad bad post.

    One Problem…While it was detailed enough to let someone proficient in Illustrator and Photoshop know what was done it was not enough to let those who aren’t very familiar with the programs to grasp if one of that caliber came across it.

    Plus you can tell this person doesn’t make prints of his own artwork and must strictly stick too web. Who would make a PSD at 72 dpi for printing purposes. Unless the canvas was 10 ft. tall. Even then most printers require a file at 100 dpi for quality. If he was truly a graffiti artist digital or street he would want prints of his own artwork… I always make a print ready file and a websafe file. That’s how a true artist works…from Philly or any city!
    By the way Graffiti has been around a lot longer than the city of Philadelphia. Do a little research before you can claim that.

    0
  23. 23

    The tut is good but the drawing is bad… but in overall it s a seven

    0
  24. 24

    great tutorial.

    0
  25. 25

    Bad A$$ workshop man, dunno why people dog your post like this. This is sick $hit!

    0
  26. 26

    Jorge Luis Jaral

    July 19, 2010 7:51 pm

    Brilliant! The general explanations about aplying different techniques and effects are clear enough, I’ll be waiting for your next post :¬)

    0
  27. 27

    relax all………it’s more tutorial than graffiti style, right?

    0
  28. 28

    This is nice love the colors n themes…baseball cap, tall buildings the arrow signs converse look alike sneaks the vibrant colors this was definently inspired by graffitti!

    0

↑ Back to top