Download Source Files
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 $19/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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Constantin Potorac
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Love this tutorial, great style
omg furst!!!@11
omg fail
lol
Xo great its really hohoho funny hohoho
thx :) but Icons should be done in Illustartor ;)
so what, we can use this in poster designs,wall paper,just using high dimensions and more qualtiy
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
no rules says like that…
But in illustrator we do its simply! ;)
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?
It shows people who don’t have illustrator how to do it?
A great tutorial all the same :-)
really nice end result, but I agree this should have been done in illustrator
Looks good.
wow amazing!
Good. But what’s with the shadow?)
A nice balance of realism and illustration. Shadow looks good to me.
Shadow is fine.
ya its fine
Not crazy about the van itself but there are some great techniques for creating icons discussed in this tutorial.
I can’t believe I never thought to make one of these before. Good stuff!
Nice Tut
Very cool!
Thanks :)
Great tut thanks! Can you tell us how long you needed for that?
I think this car looks for really at the reality ! Good job, thanx !
Really nice result! love vintage cars
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.
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.
good stuff dude. keep it up
Nice work, I’d really like to see a TUT similar to this but focusing on 16×16 icon.
Pretty cool. It’s amazing. I made my VW in red and blue.
best
thnks for da detailed tut
A really good result…
It’s NOT a van. It’s a bus!
Good work
this is so adorable…. Thanks!
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
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 :)
Doesn’t matter how bad you can be when drawing, because the important is the final result. Congratulations Constantin!
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?
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/
Really great tutorials, thanks!
Don’t you guys think crystal style is kinda outdated ?
thanks for feedback as well as my good friend Constantin,
Negreu Andreas
I do believe this should be done in illustrator so you can make it more sizes. This seems like a vector image.
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!
I have to try my own car, wow…. awesome details and techniques.
Thx tuts+
Very impressive. Looks like a lotta work!
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
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.
yeah my bad…
I like it.
Great tut and super detailed. Love it.
nice Icon..but i think frist i need draw it in Paper.look like step 1
Great tutorial. You can use a photo for reference underdog i think it will work
I think much better is to use the blueprint at the beginning. Not everyone can draw a true scaled scratch
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..
hhh Nice
Good stuff bro! Thanks a lot!
grt.. thanks..
Excellent ! Great Tut
absolutely awesome!!!
Perfect details and shading man.. respect !
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.
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.
umm maybe the floor is not glass or any material that would create a reflection :p
i like the shadows
nice tuts.thank’s
That’s pretty awesome.