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!
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.
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.



























User Comments
( ADD YOURS )Grafiko April 16th
Love this tutorial, great style
( )grecko April 16th
omg furst!!!@11
( )Colin April 16th
omg fail
( )Mark April 16th
lol
Phlop April 16th
Xo great its really hohoho funny hohoho
( )Allan April 16th
thx
but Icons should be done in Illustartor
( )sriganesh April 16th
so what, we can use this in poster designs,wall paper,just using high dimensions and more qualtiy
( )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
( )lawrence77 April 16th
no rules says like that…
( )But in illustrator we do its simply!
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?
( )Josh April 18th
It shows people who don’t have illustrator how to do it?
A great tutorial all the same
Chris Robinson April 17th
really nice end result, but I agree this should have been done in illustrator
( )Tom H April 16th
Looks good.
( )Doug April 16th
wow amazing!
( )Ramon April 16th
Good. But what’s with the shadow?)
( )Jonathan April 16th
A nice balance of realism and illustration. Shadow looks good to me.
( )Dullface April 16th
Shadow is fine.
( )sriganesh April 16th
ya its fine
( )Phenotype April 16th
Not crazy about the van itself but there are some great techniques for creating icons discussed in this tutorial.
( )Zach F April 16th
I can’t believe I never thought to make one of these before. Good stuff!
( )ruadolt April 16th
Nice Tut
( )Sanne Terpstra April 16th
Very cool!
Thanks
( )Nauglamir April 16th
Great tut thanks! Can you tell us how long you needed for that?
( )WonkaStudio April 16th
I think this car looks for really at the reality ! Good job, thanx !
( )Alvaro April 16th
Really nice result! love vintage cars
( )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.
( )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.
( )sriganesh April 16th
good stuff dude. keep it up
( )Benjamin Reid April 16th
Nice work, I’d really like to see a TUT similar to this but focusing on 16×16 icon.
( )Ricardo April 16th
Pretty cool. It’s amazing. I made my VW in red and blue.
( )himangshu April 16th
best
( )thnks for da detailed tut
dsreaper April 16th
A really good result…
( )Brett April 16th
It’s NOT a van. It’s a bus!
Good work
( )Nicki April 16th
this is so adorable…. Thanks!
( )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!
( )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
( )Diego SA April 17th
Doesn’t matter how bad you can be when drawing, because the important is the final result. Congratulations Constantin!
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?
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/
Free CSS Templates April 16th
Really great tutorials, thanks!
( )Chris April 16th
Don’t you guys think crystal style is kinda outdated ?
( )Naf April 16th
thanks for feedback as well as my good friend Constantin,
Negreu Andreas
( )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.
( )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!
( )Emin April 16th
I have to try my own car, wow…. awesome details and techniques.
Thx tuts+
( )Ruben de Vries April 16th
Very impressive. Looks like a lotta work!
( )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
( )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.
( )Constantin Potorac April 17th
yeah my bad…
( )snnaqvi April 16th
I like it.
( )VertigoSFX April 16th
Great tut and super detailed. Love it.
( )underdog April 17th
nice Icon..but i think frist i need draw it in Paper.look like step 1
( )CgBaran Tuts April 17th
Great tutorial. You can use a photo for reference underdog i think it will work
( )Slama April 17th
I think much better is to use the blueprint at the beginning. Not everyone can draw a true scaled scratch
( )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..
( )Twen April 17th
hhh Nice
( )Photoshopfan April 17th
Good stuff bro! Thanks a lot!
( )imsraaia April 18th
grt.. thanks..
( )Alexandre April 18th
Excellent ! Great Tut
( )vlado varbanov April 18th
absolutely awesome!!!
( )Perfect details and shading man.. respect !
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.
( )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.
( )Constantin Potorac April 21st
umm maybe the floor is not glass or any material that would create a reflection :p
( )unknown April 19th
i like the shadows
( )haryo April 20th
nice tuts.thank’s
( )Meshach April 20th
That’s pretty awesome.
( )Franky April 20th
Cute. iCon
( )Gyrel Dagooc April 21st
Very well detailed tutorial!:D Cool!
( )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!
( )efjay April 23rd
Very good man :ú
( )smeliy April 25th
brilliant!
( )florence April 27th
awesome..i like that one..
( )gagaw April 30th
great but i fail..
( )huwaw69 May 1st
Wow good idea, hahaha nice tutorial anyways, and nice car!
( )Nguyen Duc May 2nd
Wow, you are genius
( )me May 5th
how do u get the bus to be the icon for safari????
( )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!
( )fariz June 3rd
wow cool…
( )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.
( )virginia beach web design November 17th
thank you…this helps out a lot
( )