Download Source Files
Construction icons have always been popular on-screen, and although those dot-com “under-construction” pages have mostly vanished from our screens, the trusty ol’ yellow helmet icon still has its uses. In this tutorial, we’ll be creating our very own icon from a photograph.
Editor’s Note: This tutorial was originally published in the Czech language at Grafika Online. Grafika have kindly given permission for Vaclav to republish here on Psdtuts+ for those of us who haven’t quite mastered Czech
Step 1
As a base, we will use this photograph I took. It’s not the greatest photo, but we can use it to define the basic shapes. The advantage of this photo is the fact that it was taken with wide-lens camera, and the perspective is nicely visible. When we talk about icons, perspective is very often VERY excessive, so this is perfect.
Step 2
So firstly, cut the helmet out of its background. You can do this using the Pen Tool, or your favorite way of extracting images. Then copy this photo into a new Photoshop document and resize the image to fit the icons dimension — probably 128×128 px. You can use, for example, a new layer sized 128×128, which will help you to be more accurate. Or you can, of course, use document sized 128×128 px, but I like to have more space for drawing.
Step 3
Select the Pen Tool and step-by-step trace each part of the helmet. We begin with the visor area. Don´t worry about the color, it’s the shape that’s important. For better accuracy, it’s good to decrease the layer´s visibility (Opacity). Simply press the numlock key corresponding to the percentage opacity you want &mdash for example, 5 for 50% Opacity. When tracing, be sure to draw as a Shape Layer (first icon on the Options bar), so you can modify this layer in the future.
Note that because we’re just tracing the visor, it doesn’t matter that the rest isn’t accurate around the helmet shape (we’ll do that in the next steps).
Step 4
Create the second part of the "peak" by copying the previous layer (Ctrl + J) and move the selected points upward with the Direct Selection
Tool (A).
Step 5
Then trace the main part of the helmet as shown below.
Step 6
Don´t forget the embossed part in the middle (magnified on the next screenshot). You can make it purposely bigger, because the middle streak will nicely help you to define the 3D shape of the helmet.
Step 7
That is why you can draw this streak as a new layer too. First, start with the right part – which is in the shadow.
Step 8
Then duplicate this layer (Ctrl + J) and with Direct Selection Tool, move the point on the right to the left. This way, the right side of this shape will perfectly fit the left part of the previous layer.
Step 9
You are ready to go to the next level. Hide the photograph (or move it to the side), and as you can see, the basic shape of our icon is done. You should now have five layers of shapes ready for the next stage. I’ll refer to them by numbering in order of how we drew them (1-5)
Step 10
To start, hide all layers except the first one (1) and fill this layer with yellow color (#FFDF14). Then create new layer (Ctrl + Shift + Alt + N), and group it with previous (Ctrl + Alt + G). On this screenshot, it´s layer (2). Into this layer, draw with big soft brush with darker color (#D59D00) so the layer will be darker on the right side. Next, load the selection of layer (4), invert the selection (Ctrl + Shift + I), create new layer (3) and again use big soft brush to draw a shadow on the right side ( #3B1C02).
Step 11
So that you don´t have to do it all again for layer (4), show this layer with decreased opacity to 50%. This way, you can still see the shadow from the previous layer — how easy. For now, the "peak" is done and you can continue with the main part of the helmet.
Step 12
So, unhide the shape of main part and recolor it to the yellow (#FDDB13). Again, create a new layer, group it with previous (Ctrl + Alt + G), and in the marked areas, use big soft brush with darker color. It´s not necessary to make a very big shadow…
Step 13
For a better result, you can use the middle streak. Unhide this layer, recolor it to the dark yellow (#AA6F00), and add a layer mask. Into this mask, draw in the middle with a big soft black brush (as shown below), and the layer will be visible only on the sides, not in the middle.
Step 14
Next, unhide the last layer, the main part of the streak. Recolor it to yellow (#FBD500). In this step, you can also darken the main part of the helmet to match the peak.
Step 15
To make the shape of the helmet more accentuated, use this simple method: draw a one-pixel outline around every shape where the light shines.
Start with second peak layer. Load the selection (Ctrl-click on the layer), create new layer, and from the Edit menu select the Stroke function. Set the Width to 1px, color white.
Step 16
Add a layer mask to this layer and fill it with black color. This way nothing is visible. Then select a big soft white brush and draw into the mask where the light should shine. The outline will be visible only where the white area is in the mask.
Step 17
Use the same method for the other shapes. The icon is really starting to take shape now!
Step 18
Continue with another darkening in selected areas (shown) where the contrast between the helmet parts is too low.
Step 19
To make the icon even better, you can add backlight with another color. This will help a lot because icons with only one color tend to look a little dull.
Firstly, load the selection of all shape layers (Ctrl + Shift – click on the layers), create new layer, contract the selection of 1 pixel (Select > Modify > Contract), and use a big soft brush to draw the backlight, as the arrow shows. Use whatever color you like, light blue or violet work well.
Step 20
The last thing you will be adding is the very big highlight. As in the tutorial iMouse — Creating an Apple Mouse (which I also wrote!), start with Pen Tool and draw the window shapes:
Step 21
Copy this layer (Ctrl + J) and blur it with Gaussian Blur filter (set the Radius to some low number).
Step 22
Now draw with big soft white Brush over the highlights, to make it even more shiny. Don´t worry about the window shapes, it´s not necessary to see them completely.
Step 23
And that´s it!
As you can see in this picture, the helmet is more outstanding on the dark background, so don´t be afraid to experiment and try to create icons from different photographs. Good luck with your work!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Vaclav
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
wow complex, can learn a lot of technique and perspective from this ^^
Thanks, great one
Yeah, Vaclav’s technique is really stunning, well done Vaclav!
And best of all, he’s got lots more tutorials he’s bringing to PSDTUTS, yay!!!
amazing
Yeap a great tutorial showing how fantastic icons can be made from photos.
A couple of points though
1) you really should LABEL your layers, imho it’s a lazy designer who doesn’t label his layers – like a lazy coder who doesn’t comment code.
2) the highlight at the end, seems too harsh. I don’t think I’ve ever seen such a glossy hard hat :)
Still the work is great and can get us into this work.
@Collis: you should talk to Tomasz, one of the best photoshop folks I know. Check out his site here
http://www.tomasz-opasinski.com/ – if you want to talk to him, I have his details
Awesome. Simple. And Awesome.
I have already started to miss posts like that.
Cool Tutorial.
Amazing stuff, I can barely keep up with the updates on this site
Another useful tutorial :) nice!
wow …coll tut ;) great icon ;)
Very nice job! and cool techniques here ! Thanks a lot Vaclav ;)
Hey Mr K, I checked out that link, Tomasz’s work is amazing! I sent him an email to see if he’d be interested in writing for us, i hope he is as even the highest fee I can offer him is no doubt much lower that his regular pay, so he’d be doin’ it for the fun of it :-) Anyhow thanks for the link!
Haha, drawing to show to or comes to light.
That’s the first time I think I’ve seen the creation of an icon beginning with a photo. Very interesting technique, and one that I’ll be trying out for sure.
Thanks.
Great!
Thanks, great detail in lighting effects!
thank you all for your nice comments! I´m really glad you like it, and I hope you´ll like my others tutorials too…
Mr. K – I often label only main layers and groups, with hundreds of layer in a document it´s useless to label every layer – just like it´s useless to comment every line in source code… but I will try to improve it, so the .psd files will be more understandable.
I love this one.. I think it’s an amazing technique.. and btw icons are damn cool..
man, that’s really cool and useful… thanks a lot
Wow, great and detailed tutorial, me likey!
I think i could use something like this on one of my coming projects. Thx for the tutorial man … I luv it.
Wow. Great tutorial. :) Love seeing tutorials like this.
Thats awesome! :D Some days ago i downloaded, a icon plugin. Now i can use this :b
Thanks!
Great work. I really love it.
I appreciate the tutorial.
I’m also wondering how you made the dark background.
Thanks!
Really great tutorial, thanks!
wow, czech tuts on psdtuts :). It transled author or somebody from psdtuts?
god damn….awesome! truly awesomes!
multi awesomes!
Very nice tutorials, thanks..
nice. one question, can the hat be converted to a vector image in photoshop, or is that better suited for illustrator? then import the image? anyone?
really perfect tutorial. Super effect. Thank you.
Sweet! Great tut. Kinda reminds me of the skEdit logo – which is funny because I think Jon Hicks used Fireworks to create it. :)
Very good outcome!
@b00m: Definitely an author translation, I couldn’t translate czech if my life depended on it :-)
:))) neither to I ;)
Eh, I don’t really like the light reflections, but other than that, its perfect!
I must say that I really love the shiny icons. They are really amazing. And the Photoshop brush and gradients can make a really great job.
Thank you for sharing this tutorial for all of us.
i LOVED that! i have seen a few tutorials on how to change icons, or how to take a PS file and make it an icon, but this is the first time ive seen a step by step walk through on the icon part. I also really like that you started from a photo.
i look foward to seeing more tuts from this talented person in the future.
now im going to go out and design some icons! :)
Crazy badass tutorial!
hi, i don’t know where i can put this, anyway, a few days ago, i saw a thumbnail in the flickr group of a nude girl…i just want to know or see the picture…a like a lot that effec..so, hope you can help me…that photo had a high contrast effect…thanks!!
I love the “fake hdri” effect, even if maybe it’s too glossy.
The cranked background is a little weird, imho.
Btw a perfect tutorial and a lot of hints, hope to see other tutorials of yours!
Thanks, great tip.
Thanks for the nice tutorial :D
Wow, thank you man, this tutorial is great. Will try to apply same effect on different objects :D
To Václav: Koukám, že jsi už i tady:) Gratuluju, jen tak dál… Å iÅ™ slávu Äeských designerů:) PÅ™eju hodnÄ› Å¡tÄ›stÃ, knÞka je fakt skvÄ›lá, neuvažujeÅ¡ o napsánà nÄ›Äeho nového? ;)
That was awesome
Hi there. Thank you so much for this tutorial. However, i don’t get it just as perfectly done as you do. Would you mind publishing the .psd file? or maybe sending it over to me? that would be awesome. But thumbs-up for your work!
One great and useful tutorial :-)
I can make this kind of art pretty well, but I still can’t make a tutorial as clear as this. Great Job.
How can I make the background from the last picture? The background looks very nice!!! Great Job