Creating a Cool Yellow Helmet Icon

Mar 6th in Drawing by Vaclav
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.
PG

Author: Vaclav

Hello, I'm Vaclav, graphics designer from Czech Republic, mainly focused on GUI design (application skins, icons, backgrounds, themes, etc.). I do graphics design for more than 6 years, last year (2007) I've written the book Adobe Photoshop: GUI design (http://www.photoshopguidesign.com/), and now I'm writing Photoshop tutorials.

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 128x128 px. You can use, for example, a new layer sized 128x128, which will help you to be more accurate. Or you can, of course, use document sized 128x128 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!


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

    skut March 6th

    wow complex, can learn a lot of technique and perspective from this ^^

    Thanks, great one

    ( Reply )
  2. PG

    Collis March 6th

    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!!!

    ( Reply )
  3. PG

    chandan March 6th

    amazing

    ( Reply )
  4. PG

    Mr K March 6th

    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

    ( Reply )
  5. PG

    John March 6th

    Awesome. Simple. And Awesome.

    ( Reply )
  6. PG

    Gleb March 6th

    I have already started to miss posts like that.

    ( Reply )
  7. PG

    HipHopMakers March 6th

    Cool Tutorial.

    ( Reply )
  8. PG

    Andrei Constantin March 6th

    Amazing stuff, I can barely keep up with the updates on this site

    ( Reply )
  9. PG

    lukxiufung March 6th

    Another useful tutorial :) nice!

    ( Reply )
  10. PG

    GeminiArt March 6th

    wow …coll tut ;) great icon ;)

    ( Reply )
  11. PG

    Daniel March 6th

    Very nice job! and cool techniques here ! Thanks a lot Vaclav ;)

    ( Reply )
  12. PG

    Collis March 6th

    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!

    ( Reply )
  13. PG

    Arnaud March 6th

    Haha, drawing to show to or comes to light.

    ( Reply )
  14. PG

    Shane March 6th

    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.

    ( Reply )
  15. PG

    Salva March 6th

    Great!

    ( Reply )
  16. PG

    Anthony Ettinger March 6th

    Thanks, great detail in lighting effects!

    ( Reply )
  17. PG

    Vaclav March 6th

    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.

    ( Reply )
  18. PG

    giackop March 6th

    I love this one.. I think it’s an amazing technique.. and btw icons are damn cool..

    ( Reply )
  19. PG

    fabio sasso "zee" March 6th

    man, that’s really cool and useful… thanks a lot

    ( Reply )
  20. PG

    Ben March 6th

    Wow, great and detailed tutorial, me likey!

    ( Reply )
  21. PG

    Lamin Barrow March 6th

    I think i could use something like this on one of my coming projects. Thx for the tutorial man … I luv it.

    ( Reply )
  22. PG

    Spencer March 6th

    Wow. Great tutorial. :) Love seeing tutorials like this.

    ( Reply )
  23. PG

    Markus March 7th

    Thats awesome! :D Some days ago i downloaded, a icon plugin. Now i can use this :b

    Thanks!

    ( Reply )
  24. PG

    Constantin Potorac March 7th

    Great work. I really love it.

    ( Reply )
  25. PG

    Ralph March 7th

    I appreciate the tutorial.
    I’m also wondering how you made the dark background.
    Thanks!

    ( Reply )
  26. PG

    Dave March 7th

    Really great tutorial, thanks!

    ( Reply )
  27. PG

    b00m March 7th

    wow, czech tuts on psdtuts :) . It transled author or somebody from psdtuts?

    ( Reply )
  28. PG

    Colin Stein March 7th

    god damn….awesome! truly awesomes!

    multi awesomes!

    ( Reply )
  29. PG

    VectorCars March 7th

    Very nice tutorials, thanks..

    ( Reply )
  30. PG

    Terry March 7th

    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?

    ( Reply )
  31. PG

    Dain March 7th

    really perfect tutorial. Super effect. Thank you.

    ( Reply )
  32. PG

    Matt Radel March 7th

    Sweet! Great tut. Kinda reminds me of the skEdit logo – which is funny because I think Jon Hicks used Fireworks to create it. :)

    ( Reply )
  33. PG

    Saiyuki March 7th

    Very good outcome!

    ( Reply )
  34. PG

    Collis March 7th

    @b00m: Definitely an author translation, I couldn’t translate czech if my life depended on it :-)

    ( Reply )
  35. PG

    Constantin Potorac March 7th

    :) )) neither to I ;)

    ( Reply )
  36. PG

    Cain March 7th

    Eh, I don’t really like the light reflections, but other than that, its perfect!

    ( Reply )
  37. PG

    Constantin Potorac March 7th

    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.

    ( Reply )
  38. PG

    Zach March 7th

    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! :)

    ( Reply )
  39. PG

    Andrew D March 7th

    Crazy badass tutorial!

    ( Reply )
  40. PG

    strauss March 7th

    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!!

    ( Reply )
  41. PG

    Alberto March 7th

    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!

    ( Reply )
  42. PG

    bweb March 7th

    Thanks, great tip.

    ( Reply )
  43. PG

    escanive March 7th

    Thanks for the nice tutorial :D

    ( Reply )
  44. PG

    niksy March 8th

    Wow, thank you man, this tutorial is great. Will try to apply same effect on different objects :D

    ( Reply )
  45. PG

    r!CCi°21 March 8th

    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? ;)

    ( Reply )
  46. PG

    Mark Abucayon March 9th

    That was awesome

    ( Reply )
  47. PG

    vimo March 10th

    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!

    ( Reply )
  48. PG

    Mchilly March 10th

    One great and useful tutorial :-)

    ( Reply )
  49. PG

    firewalker March 10th

    I can make this kind of art pretty well, but I still can’t make a tutorial as clear as this. Great Job.

    ( Reply )
  50. PG

    Chillomat March 11th

    How can I make the background from the last picture? The background looks very nice!!! Great Job

    ( Reply )
  51. PG

    Václav Krejčí March 11th

    @ vimo – sure, try the PSDTUTS Plus program, and you can download the source .psd file…

    @ Chillomat – I´m thinking about the tutorials how to create background like this, but it will take me some time… in short – color base layer, photo of rocks overlay and than stripe pattern overlay… with little practise you can make this pattern seamless (it isn´t on the preview image). it´s easy.

    @ to ALL – thank you again ;)

    ( Reply )
  52. PG

    OliMX March 12th

    Beautiful Tutorial, The logic behind every light and shade is something special in this tutorial. A Great help for people without art background.

    ( Reply )
  53. PG

    andy stewart March 13th

    http://www.andystewart-design.com

    ( Reply )
  54. PG

    Steip March 17th

    Thanks for sharing this amazing tutorial….

    ( Reply )
  55. PG

    computer jobs March 17th

    keap working really great tut :)

    ( Reply )
  56. PG

    Yuri March 18th

    de mais muito bomm mesmo valeu pelo tuto

    ( Reply )
  57. PG

    Phillip March 18th

    Wow, truly an amazing tutorial!
    Keep it up!

    ( Reply )
  58. PG

    barat March 19th

    I made this one.
    One Tip:
    It’s good to draw this “icon” 2-4x larger than in this example and after that select all layers and use Ctrl+T to rescale it down – it will mask any mistakes, and drawing it bigger can be easier (more precise).

    ( Reply )
  59. PG

    Katalog Stron March 19th

    I love it. 3D icon made in Photoshop is just amazing.

    ( Reply )
  60. PG

    Jad April 2nd

    Great tutorial. I will try to implement this in one of my future logos.

    ( Reply )
  61. PG

    Harry April 12th

    Awesome tut :)

    ( Reply )
  62. PG

    rybaxs April 25th

    i want to mimic it..

    ( Reply )
  63. PG

    aravind June 2nd

    OMG! This is the best tutorial I have ever seen! Thankx a lot!!

    ( Reply )
  64. PG

    Michael June 20th

    This was my first real foray into creating something with the pen tool; but even though I’m actually quite comfortable in Photoshop there just seemed to be gaps in the tutorial that I couldn’t navigate… Especially the big soft areas, how it seemed to turn out hundreds of times better than mine did…

    If you’d like to see what came of my attempt, it is here:
    http://www.stuff.hqubed.com/uploads/yellow_helmet_icon_myattempt.jpg

    Just wanted to let you know!

    ( Reply )
  65. PG

    cplc August 1st

    Great tutorial. Thanks a lot!!

    ( Reply )
  66. PG

    GRAPHICS@SBL-Image clipping service August 15th

    It is really informative.

    Regards,
    GRAPHICS@SBL

    ( Reply )
  67. PG

    Jan August 24th

    Thanks for this awesome tutorial!!! :)

    ( Reply )
  68. PG

    Andyface February 16th

    Cool tutorial, looks simple from the outset, but there’s a lot that goes into it.

    Quick note on it’s use as an under construction icon on a website:

    If you ever consider using a logo or icon as a way of showing that a site or section of a website isn’t finished yet I’d seriously advice against it, even if the logo is as well made as this one (note the clever compliment).

    As was said before “a lazy code doesn’t comment his code” (I’ll admit I’m a lazy coder), equally a lazy web designer uses holding images for a website. It gives a bad impression to users as it shows that the site is still not properly finished (imagine going to a shop or hotel with under construction signs, doesn’t fill you with confidence) and as their is no indication as to when the image was put up it doesn’t give the user any reason to come back soon to see if things have changed. All too often old sites will have an under construction section which has been that way for years and it’s usually accompanied by a cheesy gif or some text saying “under construction”, it makes me cringe every time.

    My advice is to take the time to finish a website as best you can before making it live and then updating it as often as possible, a news feed with info about what’s new on the page or a latest feature section will give an idea to a user that the site is evolving and new content added regularly.

    Anyway, once again good tut, some useful techniques and tips on perspective.

    ( Reply )
  69. PG

    RUGRLN March 8th

    That’s what I call photorealism!

    ( Reply )
  70. PG

    Michi March 19th

    Thanks for the great tutorial.

    ( Reply )
  71. PG

    iddaa May 8th

    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!!!

    ( Reply )
  72. PG

    Sumon May 16th

    Very good tutorial..

    ( Reply )
  73. PG

    Clipping path specialist May 16th

    Excellent..
    Here is another clipping path tutorial: http://clippingpathspecialist.com/clipping-path-tutorial.html

    ( Reply )
  74. PG

    Fuad Ahasan Chowdhury August 23rd

    The way of using light and shade is excellent!!

    ( Reply )
  75. PG

    Getz December 20th

    very good

    ( Reply )
  76. PG

    lee December 29th

    wonderful

    ( Reply )

Add Your Comment

( GET A GRAVATAR )
  1. Arrow
    Gravatar

    Your Name
    December 29th