Preview

How to Create a Van Icon in Photoshop

Apr 16th in Illustration, Interface by Constantin Potorac

This is another icon I have created with Negreu Andreas. We wanted to create an icon that can be used for a game maybe or a Mac app of some sort. Before we started we searched the web for photography with similar vans, then made some ideas, and a quick sketch. After that we started working. Let's review the process!

PG

Author: Constantin Potorac

I am a freelance designer living in Romania. I discovered the beauty of design a few years ago. Since then I have dedicated my time to becoming a great designer (work in progress)!

Final Image Preview

Take a look at the image we'll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below or view a larger version here.

Step 1

First of all you need to make a quick sketch of the icon you have in mind. It doesn't need to be very artistic (I know ours is not) but it must illustrate a simple idea of what you will create.

Step 2

Create a new layer, then use the Pen Tool (P) to trace the rough sketch and create a final shape of the car.

Step 3

It is time to add some color to the car. Use this code #ff6d00, then into a new layer start painting the color. Place the layer below the sketch you made in Step 2.

Step 4

Now you need to erase the excess color using the Pen Tool (P). After you made the path around the car, simply press Command + Enter and transform the path into a selection, then in the end press delete.

Step 5

Create a new layer and in this layer you will have to select the windows, tires and a lower bar of the car. Now fill them with black.

Step 6

Next create a peaceful hippie logo. Use the Ellipse Tool and the Rectangle Tool (U). First, create the circle then extract part of the circle with the same tool. Next use the Rectangle Tool and create the three lines.

Step 7

After you finish creating the logo, merge those three layers. Now double-click on the layers thumbnail to enter the Blending Options. THen apply some Bevel and Emboss and a Gradient Overlay.

Step 8

Let's create the spotlights. Using the Elliptical Marquee Tool (M), first create a new layer then Right-click, select stroke, and use 3px for the stroke. The color used for this stroke is #7a7a7a.

After you have achieved the shape you need, double-click the layer to enter the Blending Options and add a Bevel and Emboss with the settings shown below. Repeat the step for the other spotlight.

Step 9

Now it is time to start adding some gloss on the spotlights. Create a new layer then make a selection inside one of the spotlights. Use the Radial Gradient Tool set to White and Grey as shown below.

Step 10

Create a new layer and make a new circle using the Elliptical Marquee Tool. Use a white to transparent Linear Gradient and apply some gloss, like in the image below. In the end, repeat these two steps for the other spotlight. Also, decrease the Opacity of this layer to 80%.

Step 11

In this step we'll create the bumper. First, create a new layer and name it "bumper." Now use the Pen Tool (P) to make a path and transform the path into a selection. Next, fill the layer with the same orange and desaturate the layer.

Using the Burn Tool (O), brush over the lower side of the bumper. Also, if you want to, you can add some soft noise to make it look more real.

Step 12

Now we'll add some simple lines that will define the car's shape better. Using the Pen Tool, draw two paths like below. Set the brush to 1px and black. Next duplicate each line two times, press Command + I to inverse the color and make them white. In the end, place them beside the black strokes. You can also use the Eraser Tool (E) with a soft brush and erase the line heads.

Step 13

Repeat Step 12, but this time you need to create these lines in a different area of the van. After you create the black stroke, duplicate it and move it above it. Also, transform it into white by inverting the colors. Use the Eraser Tool and softly erase parts of the line.

You also have to create another similar line like the white one, but this time leave it black and move it below the first one. Also, you should add a soft shadow using the Burn Tool on the orange layer.

Step 14

Next you need to change the color of the hood. Create a new layer and name it "Hood." Now make a selection as shown below and fill it with #006c00.

Step 15

Let's add more gloss on the hood. Make a selection like in the image below. Next, use the Radial Gradient Tool set to White and Transparent to create a new layer. In this layer drag from left to right to obtain something similar to the image below, then duplicate the layer and move it to the other side.

Step 16

Add another gloss on the bumper by creating a new layer, then make a selection like in the image below, and fill the selection with white. Now set the layer Opacity to 60%. Next, duplicate the layer and move it to the other side.

Step 17

Add a gray light on the bumper using the same techniques we've covered. Then duplicate the layer and move it to the other side.

Step 18

It is time to work on the tires. Create a new layer, and use the Lasso Tool make a selection like in the image below. Fill the layer with #424242. Then using a soft black brush, draw over the edges of the layer.

Step 19

Continue creating the break-apart for all the elements. Look at the image below for reference. Also, use the splatter brush for greater effect.

Step 20

In this step, we'll add some more gloss to the hood. Make a selection as shown, and then use a white to transparent Radial Gradient to create the gloss. Use the Eraser Tool and remove the excess gloss. Also, set the layer to 90% Opacity.

Step 21

Create a new layer and make a selection using the Pen Tool. Fill the selection with white, then set the Opacity of the layer to 70%.

Step 22

Create a new layer again. In this layer, use a black brush to add a soft shadow.

Step 23

Using the Pen Tool stroke a 1px black line as shown.

Step 24

Create two more glossy layers on top of the van.

Step 25

Now we need to create the smaller spotlights. First of all, we'll create a red circle with a black stroke and a white inner glow of 1px for both. Rasterize the layer then apply another white stroke. Then using a white soft brush, add the glossy effect.

Step 26

It's time to work on the windshields and make them transparent. Use the same techniques as before: create new layers, make selections, fill selections with white, and then erase or decrease opacity.

Step 27

Now we'll add some more reflections to the glass. These lights are supposed to be the reflection of neon.

Step 28

Repeat Step 27, but this time make the reflection on the side windows.

Step 29

In this step, you'll create the mirrors. Create a new group and a new layer and name it "mirror." Fill the layer with the color, then start adding new layers for each reflection, light and shadow applied.

Step 30

Add the shadows below the car using the Brush Tool and Eraser Tool.

Step 31

In the last step, we'll create the windscreen wipers.

Step 32

Using Icon Composer and Candy Bar add the icon to your favorite application.

Conclusion

Hope you learned some new techniques and had fun while doing so. You can view the final image below or view a larger version here.

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.


Enjoy this Post?

We'd love your vote!

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    Grafiko April 16th

    Love this tutorial, great style

    ( Reply )
  2. PG

    grecko April 16th

    omg furst!!!@11

    ( Reply )
    1. PG

      Colin April 16th

      omg fail

      ( Reply )
      1. PG

        Mark April 16th

        lol

  3. PG

    Phlop April 16th

    Xo great its really hohoho funny hohoho

    ( Reply )
  4. PG

    Allan April 16th

    thx :) but Icons should be done in Illustartor ;)

    ( Reply )
    1. PG

      sriganesh April 16th

      so what, we can use this in poster designs,wall paper,just using high dimensions and more qualtiy

      ( Reply )
    2. PG

      Will April 16th

      Agreed… This is definitely a job for Illustrator. Imagine you went to all this work and then needed a larger version. Good work all the same though

      ( Reply )
    3. PG

      lawrence77 April 16th

      no rules says like that…
      But in illustrator we do its simply! ;)

      ( Reply )
    4. PG

      Ryan April 16th

      I agree – aside from all the advantages of being vector, most of the work in the tut dealt with paths and gradients, why use photoshop for that anyway?

      ( Reply )
      1. PG

        Josh April 18th

        It shows people who don’t have illustrator how to do it?

        A great tutorial all the same :-)

    5. PG

      Chris Robinson April 17th

      really nice end result, but I agree this should have been done in illustrator

      ( Reply )
  5. PG

    Tom H April 16th

    Looks good.

    ( Reply )
  6. PG

    Doug April 16th

    wow amazing!

    ( Reply )
  7. PG

    Ramon April 16th

    Good. But what’s with the shadow?)

    ( Reply )
  8. PG

    Jonathan April 16th

    A nice balance of realism and illustration. Shadow looks good to me.

    ( Reply )
  9. PG

    Dullface April 16th

    Shadow is fine.

    ( Reply )
    1. PG

      sriganesh April 16th

      ya its fine

      ( Reply )
  10. PG

    Phenotype April 16th

    Not crazy about the van itself but there are some great techniques for creating icons discussed in this tutorial.

    ( Reply )
  11. PG

    Zach F April 16th

    I can’t believe I never thought to make one of these before. Good stuff!

    ( Reply )
  12. PG

    ruadolt April 16th

    Nice Tut

    ( Reply )
  13. PG

    Sanne Terpstra April 16th

    Very cool!

    Thanks :)

    ( Reply )
  14. PG

    Nauglamir April 16th

    Great tut thanks! Can you tell us how long you needed for that?

    ( Reply )
  15. PG

    WonkaStudio April 16th

    I think this car looks for really at the reality ! Good job, thanx !

    ( Reply )
  16. PG

    Alvaro April 16th

    Really nice result! love vintage cars

    ( Reply )
  17. PG

    Mangero April 16th

    The end result is nice, but the tuturial itself is pretty crappy. Many steps are missing and stuff is appearing from nowhere. Also, things like the size of the document are really important.

    Please mind the little details, because otherwise it is really difficult to follow the tutorial.

    ( Reply )
    1. PG

      Eli April 16th

      I agree – not to mention all the bizarre typos! This tutorial skips all over the place and says confusing things like “transform the path into a selection, then in the end press delete.”

      Huh? In the end?

      The instructions are the bare minimum and the pictures don’t sync with the instructions. For example: Step 5 shows the shadows have been added, but the instructions for adding the shadows doesn’t happen until Step 13.

      Bad tutorial, nice result.

      ( Reply )
  18. PG

    sriganesh April 16th

    good stuff dude. keep it up

    ( Reply )
  19. PG

    Benjamin Reid April 16th

    Nice work, I’d really like to see a TUT similar to this but focusing on 16×16 icon.

    ( Reply )
  20. PG

    Ricardo April 16th

    Pretty cool. It’s amazing. I made my VW in red and blue.

    ( Reply )
  21. PG

    himangshu April 16th

    best
    thnks for da detailed tut

    ( Reply )
  22. PG

    dsreaper April 16th

    A really good result…

    ( Reply )
  23. PG

    Brett April 16th

    It’s NOT a van. It’s a bus!

    Good work

    ( Reply )
  24. PG

    Nicki April 16th

    this is so adorable…. Thanks!

    ( Reply )
  25. PG

    lawrence77 April 16th

    Constantin Potorac you are great nowadays….
    I love your works…

    But in this tut :(
    I’m very poor in drawing, in the first step itself i’m failure! :(

    Anyway i love the final outcome! :o

    ( Reply )
    1. PG

      Constantin Potorac April 16th

      Hey,

      Yes well as you can see I am a failure at drawing myself… the sketch is awful but when it comes to digital art I get complete that failure :)

      ( Reply )
      1. PG

        Diego SA April 17th

        Doesn’t matter how bad you can be when drawing, because the important is the final result. Congratulations Constantin!

      2. PG

        lawrence77 April 17th

        Yeah you are overcome in digital art! ;)
        But In the second step I hate pen tool! hahaha!

        Damn, Still a tough tool to learn!

        Any links to study it fully?

      3. PG

        Constantin Potorac April 18th

        There is a really great tutorial right here on PSDTUTS about how to use the Pen Tool http://psd.tutsplus.com/tutorials/tools-tips/photoshops-pen-tool-the-comprehensive-guide/

  26. PG

    Free CSS Templates April 16th

    Really great tutorials, thanks!

    ( Reply )
  27. PG

    Chris April 16th

    Don’t you guys think crystal style is kinda outdated ?

    ( Reply )
  28. PG

    Naf April 16th

    thanks for feedback as well as my good friend Constantin,

    Negreu Andreas

    ( Reply )
  29. PG

    Nate April 16th

    I do believe this should be done in illustrator so you can make it more sizes. This seems like a vector image.

    ( Reply )
  30. PG

    praeter design April 16th

    Vector shmector!

    It’s a personal piece for “onscreen” use so raster away!

    Now if it were for a client then yeah do it as a vector piece to keep it professional.

    Cool idea either way!

    ( Reply )
  31. PG

    Emin April 16th

    I have to try my own car, wow…. awesome details and techniques.

    Thx tuts+

    ( Reply )
  32. PG

    Ruben de Vries April 16th

    Very impressive. Looks like a lotta work!

    ( Reply )
  33. PG

    Alex April 16th

    Fantastic tutorial for such an epic vehicle! I do agree that it might just look even more amazing in Illustrator but love the outcome in Ps all the same.

    Also, a large added LOL at your ‘first’ fail @grecko ;P

    Thanks for sharing, Constantin and keep up the great work!

    Alex | @ZenElements

    ( Reply )
  34. PG

    Eli April 16th

    Just for the record, it’s called a “peace sign”. It’s never been called a “peaceful hippie” sign.

    I should know. I drive a 72′ VW Bus and I’m from Vermont.

    ( Reply )
    1. PG

      Constantin Potorac April 17th

      yeah my bad…

      ( Reply )
  35. PG

    snnaqvi April 16th

    I like it.

    ( Reply )
  36. PG

    VertigoSFX April 16th

    Great tut and super detailed. Love it.

    ( Reply )
  37. PG

    underdog April 17th

    nice Icon..but i think frist i need draw it in Paper.look like step 1

    ( Reply )
  38. PG

    CgBaran Tuts April 17th

    Great tutorial. You can use a photo for reference underdog i think it will work

    ( Reply )
  39. PG

    Slama April 17th

    I think much better is to use the blueprint at the beginning. Not everyone can draw a true scaled scratch

    ( Reply )
  40. PG

    Best Graphic Design April 17th

    Nice tutorial… would surely like to try my hands at it. This is really a step by step process to an artistic marvel. Good job will look forward for further posts..

    ( Reply )
  41. PG

    Twen April 17th

    hhh Nice

    ( Reply )
  42. PG

    Photoshopfan April 17th

    Good stuff bro! Thanks a lot!

    ( Reply )
  43. PG

    imsraaia April 18th

    grt.. thanks..

    ( Reply )
  44. PG

    Alexandre April 18th

    Excellent ! Great Tut

    ( Reply )
  45. PG

    vlado varbanov April 18th

    absolutely awesome!!!
    Perfect details and shading man.. respect !

    ( Reply )
  46. PG

    George April 18th

    Great tut. Not much that I didn’t know from before but nice detail nonetheless. I personally think Illy would have been easier for this but I suppose PS is more flexible in terms of erasing and working with gradients.

    Nice work.

    ( Reply )
  47. PG

    James April 18th

    Cool tutorial. Only thing is that the reflection in the final image makes no sense. You should see the underside of the vehicle and you certainly should not see the car’s shadow. Anyways, a minor point; doesn’t have anything to do with actual logo. Good job.

    ( Reply )
    1. PG

      Constantin Potorac April 21st

      umm maybe the floor is not glass or any material that would create a reflection :p

      ( Reply )
  48. PG

    unknown April 19th

    i like the shadows

    ( Reply )
  49. PG

    haryo April 20th

    nice tuts.thank’s

    ( Reply )
  50. PG

    Meshach April 20th

    That’s pretty awesome.

    ( Reply )
  51. PG

    Franky April 20th

    Cute. iCon

    ( Reply )
  52. PG

    Gyrel Dagooc April 21st

    Very well detailed tutorial!:D Cool!

    ( Reply )
  53. PG

    Diego SA April 22nd

    That’s awesome! When it’s big, it has a vector look, when small, it has a pixel art look. Interesting!

    ( Reply )
  54. PG

    efjay April 23rd

    Very good man :ú

    ( Reply )
  55. PG

    smeliy April 25th

    brilliant!

    ( Reply )
  56. PG

    florence April 27th

    awesome..i like that one..

    ( Reply )
  57. PG

    gagaw April 30th

    great but i fail..

    ( Reply )
  58. PG

    huwaw69 May 1st

    Wow good idea, hahaha nice tutorial anyways, and nice car!

    ( Reply )
  59. PG

    Nguyen Duc May 2nd

    Wow, you are genius

    ( Reply )
  60. PG

    me May 5th

    how do u get the bus to be the icon for safari????

    ( Reply )
  61. PG

    Minz May 5th

    just awesome.. i use every software out there in market..but i suck at all!! :) thanks for the creative move to create icons! Thanks!

    ( Reply )
  62. PG

    fariz June 3rd

    wow cool…

    ( Reply )
  63. PG

    Laura September 20th

    Seen this tut some time ago but never got the chance to try it. I’ve spent the last 6/7 hours following your steps…but I opted for Illustrator since I’m more confident with it. Obviously had to ‘alter’ a few steps slightly, but all in all. I’m extremely pleased with the result! Thank you for taking the time to put this tut together.

    ( Reply )
  64. thank you…this helps out a lot

    ( Reply )
  1. Arrow
    Gravatar

    Your Name
    November 17th