Blog.SpoonGraphics

Create a Bright Retro Grunge Vector Illustration

Read the article

This post was originally published in 2009
The tips and techniques explained may be outdated.

Follow these steps in Adobe Illustrator and Photoshop to create a range of vector shapes and graphics that can be combined into a great looking vector collage illustration. We’ll then finish off the illustration with some subtle touches of depth and detail, giving a polished graphic with hints of a retro-grunge style.

Retro Grunge Vector Illustration

The header design here on Blog.SpoonGraphics has received many comments of praise and has been the subject of a good few questions and tutorial requests over the past year. So, I thought it was about time I created something which covers some of the processes of creating a similar graphic style. We’ll be using many of the same techniques I originally used in the website design, combined with some additional steps to create this neu-retro clean-grunge pop culture vector illustration.

Get started by opening up Adobe Illustrator, create a bunch of simple shapes as resources for future use. Graphics that fit into this pop culture style include overlapping circles, lightning bolts, stripy lines and swirls. A fitting colour scheme would be to limit the artwork to Cyan, Magenta and Yellow.

Create a bunch of concentric circles by copying (CMD+C), pasting in front (CMD+F), then scaling down while holding the Shift and Alt keys. Alternate the colours of the circles.

Group the individual group of circles and duplicate multiple times. Scale and position each group to form a stack of shapes.

Create a swirl by drawing two circles, one large, one small. Select both and head to Object > Blend > Make. Alter the Blend Options to the minimum spacing in the Specific Distance option.

Draw a separate curved line, then with the blend and the line selected, go to Object > Blend > Replace Spine.

Repeat the process to develop a bunch of swirls with various curves and directions.

Create a collection of overlapping circles with the Circle Tool, holding shift to keep the shapes proportional. With a bunch of shapes selected use the Add to Shape Area option from the Pathfinder window to merge them all together.

A variation of the circles would be to simply swap the fill for a thick stroke.

Draw a long, thin rectangle on the artboard, duplicate and move to one side. Use the Blend tool to create a range of stripes. Go to Object > Expand to convert the effect into a shape.

Rotate and overlap the collection of stripes onto a merged group of circles. Use the Subtract from Shape Area Tool from the Pathfinder to cut stripes into the underlying object.

Draw a couple of curved lines with the Pen Tool, add a stroke and select the Dashed Line option.

These few simple steps soon generate a little toolbox of resources to use in the illustration. We can use these elements in various colours to build up the collage.

Open up a paper texture in Adobe Photoshop, you can find this one from the collection of 5 brown paper textures post here on Blog.SpoonGraphics.

Paste in a selection of paper into a new document, adjust the colours and saturation to give a subtle paper texture. Use the Warp option in the Transform command to add a little curl to the corner.

Begin pasting in the vector elements from Illustrator into Photoshop, position the shapes below the paper layer to give the impression that they’re creeping from behind.

Continue pasting in various elements, alternating between Cyan, Magenta and Yellow. (Photoshop Tip: Use the Auto Select Layer option for the Move Tool to easily select and move elements without the need to find the appropriate layer in the layers palette)

Add some interest by pasting in elements so that they interact with the orientation of the artwork, so for instance add elements that appear to be falling or dripping vertically down the page.

After a while the shapes will begin to fill out the background area and produce a layered effect as they span further outwards.

Using the same shape, but in various positions can help flesh out the illustration. Use the rotate and flip-horizontaly options to give variation to the same element.

Finish off the composition with some tiny details and check over the layout for any elements that interfere with each other.

So far the vector elements add plenty of detail and dynamism to the illustration, but they do tend to look a little flat. Use the Burn Tool to draw in some subtle shadows. Set the tool to target Midtones, at a very low exposure (20%).

These little additions really start to bring the illustration to life and lift it from the screen.

Repeat the process, but this time with the Dodge tool to add some very subtle highlights to the elements.

Select the main central paper area, and add a soft drop shadow. Use a large size, but low opacity to give the most realism.

Paste in a couple more vector elements, this time above the paper area.

CMD-Click on the paper layer’s thumbnail to make a selection, CMD-SHIFT-I to inverse and delete out the excess from the vector shape.

Set the blending mode to Multiply to bring through the paper texture, and touch up with a brush of the Burn Tool.

The main collage portion of the illustration is now complete. Let’s move on to adding some content to the central page area.

Add some type to the design, here I’ve used the word ‘design’, split over two lines and set in a heavy, rounded font.

Continue adding various elements to the central design to fill out the space. Rotate the elements to match the orientation of the direction of the paper.

A few tweaks later and the design is taking shape. I made some decisions to continue the colour scheme into the main elements, but reduce the opacity to avoid them taking too much focus.

Paste in a high resolution texture into the background of the document. This one is from the highly useful Lost and Taken website.

Retro Grunge Vector Illustration

To finish off the illustration, use a couple of high resolution spraypaint brushes to add some fine overspray in the Cyan, Magenta and Yellow colours.
Take a look at the final illustration.

Join the mailing list and receive my design resources bundle FREE!

Join the mailing list to have every new post hand delivered to your email inbox. Every subscriber gets a FREE bundle of 40+ icons, vectors, brushes & textures!

81 Comments

  1. cssah says:

    great tutorial thanks so much

    (0)
  2. rue says:

    cool..makes me wana learn more bout photoshop ! but without an artistic mind, you still won’t get an artistic piece..lol

    (0)
  3. great tutorial! i love seeing the way you work! I really need to make an interesting vector-like illustration for my front page on my blog but haven’t got the time for it at the moment!

    oh and thanks for the ‘Auto Selection Move Tool’ option tip, somehow I’ve missed that over the years!

    (0)
  4. Nik says:

    Nice one… “neu-retro clean-grunge pop culture” is a term I think that may just catch on :D

    (0)
  5. cocoamedia says:

    nice tut m8..

    (0)
  6. Jan says:

    Lovely tutorial!

    (0)
  7. Adi Ulici says:

    Really really good tutorial, I’ve been looking for something like this a long time! Thanks!

    (0)
  8. vectorss says:

    very nice tut. lovely vectors:) thanks

    (0)
  9. Sam says:

    Really good tutorial! Love this vector creation ..

    Good job!

    (0)
  10. Kate says:

    I totally love it.
    Great job man :)

    (0)
  11. Marcos says:

    Perfecto!! :)

    (0)
  12. T-Law says:

    Thanks again, it looks great.

    (0)
  13. moih60 says:

    amazing tutorial…like how easy to make it

    (0)
  14. merdiven says:

    great share thank you

    (0)
  15. Great tut as always Chris!

    (0)
  16. I’ve never truly understood the grunge style, but your tutorial is pretty neat. Thanks for sharing.

    (0)
  17. Matt says:

    I love you ‘-’

    (0)
  18. Jorge says:

    Amazing stuff!

    (0)
  19. teebiebrown says:

    Really great tutorial, many thanks, so easy to follow. Got some ideas of designs, but, just didnt know how to implement them on the comp from paper.

    Tracey

    (0)
  20. Chris, that is exactly the sort of tut I was looking for. I am looking at making an image like this for the header of a new iWeb theme and I need to brush up on my already fading Illustrator techniques.

    I like the idea of creating ‘a little toolbox’ of things to collage together; nice tip.

    Thanks very much.

    (0)
  21. Taylor says:

    Brilliant. This tutorial is exactly the look and style I was after for a design I’m currently working on. The depth you added to this comp with highlights and dark tones is perfect.

    (0)
  22. WillxD says:

    Great tutorial!

    (0)
  23. really great tutorial. Thanks for sharing!

    (0)
  24. Sty*Lisch says:

    Great work! =)

    I love this blog!

    I´m from Germany. But all your tuts are so detailed und simple.
    I have never problems to understand anything.

    Thanks for that!

    (0)
  25. Blue Buffalo says:

    Very cool – I like it!

    (0)
  26. [...] Create a Bright Retro Grunge Vector Illustration [...]

  27. Nathan says:

    Another awesome tut, thanks a lot Chris!

    (0)
  28. nice stuff, thanks for the creative tut..

    (0)
  29. Paul Randall says:

    I love designs in CMYK colours, and this one looks great for summer.

    I imagine we will be seeing more 3D effects across the web in ’09

    (0)
  30. Olybop says:

    nice !! good stuff thx

    (0)
  31. Sweet tutorial, you’re definitely bringing the old-school back in a good way!

    (0)
  32. LuCky says:

    i always wanted to design and draw retro circles and stuff :-D thanks for this awesome tutorial

    (0)
  33. That is simply amazing! Yeah… simple when you see it step by step ;)

    (0)
  34. anung says:

    nice tuts :)

    (0)
  35. [...] and colors in my design work, and I was happy to discover a post where Chris explains step by step how to create a bright retro grunge vector illustration. As it turns out they’re a lot easier to make than they appear. I also found an extensive [...]

  36. kuku.JohnNy says:

    What a nice prety tutorial…

    (0)
  37. huwaw69 says:

    Wow a pretty artisitc and cool design! This is so awesome! i wish i can make one like this!

    (0)
  38. Marc says:

    Very nice :)

    (0)
  39. Cool image, I really like the way it starts to look as soon as you start adding the shadows in. Another great tutorial Chris!

    (0)
  40. this really helps me alot! super thanks for that!

    (0)
  41. Chetto says:

    great tutorial!

    (0)
  42. Chris says:

    Thanks for the inspiration!

    (0)
  43. Pim says:

    Amazing! Very cool!

    (0)
  44. Kate says:

    Wow, thanks for sharing how you did all that! I’ve always wondered how you came up with your blog header. I learned a lot from this tutorial; I never knew about the Illustrator blend tool before this. That will come in handy SO MUCH! Thanks again, you’re incredible!

    (0)
  45. gumi gumi says:

    what is that cool rounded font i really like it, please tell me

    (0)
  46. Franky says:

    This stuff is great, too bad its played out. :(

    (0)
  47. Weekly Fave’s…

    Week from April 26 to May 2, 2009:
    Tutorials
    Photoshop Glamour model How to make car desktop wallpaper Create an Asian Inspired Illustration with Impact
    Illustrator Create a Bright Retro Grunge Vector Illustration How to Make a Sweet Vector Pops…

  48. Weekly Fave’s…

    Week from April 26 to May 2, 2009:
    Tutorials
    Photoshop Glamour model How to make car desktop wallpaper Create an Asian Inspired Illustration with Impact
    Illustrator Create a Bright Retro Grunge Vector Illustration How to Make a Sweet Vector Pops…

  49. Anonymos says:

    I think that’s grat. I love the Grunge Style :-)

    (0)
  50. [...] Create a Bright Retro Grunge Vector Illustration – Follow these steps in Adobe Illustrator and Photoshop to create a range of vector shapes and graphics that can be combined into a great looking vector collage illustration. We’ll then finish off the illustration with some subtle touches of depth and detail, giving a polished graphic with hints of a retro-grunge style. [...]

  51. terrence says:

    please someone tell me how to align the circles (the picture above “Group the individual group of circles and duplicate multiple times. Scale and position each group to form a stack of shapes.”) on top of each other? by just copying (..+c or ..+f) doesn’t help, the lines are all mixed up, not stacked on top of each other.

    nice tut btw.

    (0)
  52. [...] Create a Bright Retro Grunge Vector Illustration [...]

  53. Patrik says:

    That was a great tutorial. Thank you!

    (0)
  54. terrence says:

    nvm, got it :)

    (0)
  55. [...] posts include: Create a Bright Retro Grunge Vector Illustration Create a Grid Based Resume/CV Layout in InDesign 270+ High-Res Rough and Grungey Photoshop Brushes [...]

  56. Vice says:

    waaa..
    it’s cOoL.!!

    (0)
  57. Dorian says:

    Awesome job! Looks amazing :D

    (0)
  58. [...] Create a Bright Retro Grunge Vector Illustration [...]

  59. oneoftwenty says:

    great tutorial!
    I’m a big fan of this style

    (0)
  60. [...] was playing with the ideas in this tutorial by Chris Spooner last night, and I thought, why not post what I did. Not sure what I am going to do with this [...]

  61. [...] Create a Bright Retro Grunge Vector Illustration [...]

  62. simmons says:

    really awesome. thank you very much!

    (0)
  63. Gonzalo says:

    Muy bueno el tutorial, en mi pais (Argentina) se usa mucho este tipo de diseños para publicidades de TV.

    Saludos!

    (0)
  64. [...] I spent a little more time working on the design I started in this post. Lots of opportunities to utilize a variety of tools (pathfinder, burn and dodge, subtract, blend, drop shadow to name some) in both Adobe Illustrator and Photoshop came up because I followed Chris Spooner’s tutorial. [...]

  65. danilo says:

    very good tutorial, thanks :)

    (0)
  66. CgBaran Tuts says:

    Great tutorial

    (0)
  67. Pablo says:

    Ahhhhh takes me back to the 80s…which I like!

    (0)
  68. [...] Create a Bright Retro Grunge Vector Illustration [...]

  69. Very usefull thanks!
    I will read more of your articels.

    (0)
  70. An exceptional tutorial. Thank you.

    (0)
  71. Kirti says:

    hey .. this is just awesome…. great… i love it..

    (0)
  72. hiren solank says:

    nice.. i liked it..
    post me more tutorial like this i will love to see those

    (0)
  73. squareart says:

    Cool tut!… I like it a lot!: ) and I learned something new…thanks.

    (0)

Comments are now closed