Line25

How To Create a Detailed Gauge Icon in Photoshop

Read the full post

Follow this step by step guide to creating a detailed gauge icon in Photoshop. We’ll be using various Photoshop layer styles to build up gradients and shadows to produce a detailed and realistic large scale icon, then modify and rebuild the icon into a range of typical icon sizes.

Gauge icon design

The icon we’ll be creating features a sleek and colourful gauge set in a chrome beveled frame with subtle textures and gradients. The largest and most detailed version comes in at 256x256px, then it is incrementally scaled to 128px, 64px, 48px and 32px, each becoming less detailed but modified slightly to work at the smaller sizes.

We’ll start with the largest of the icons. Draw a 256px circle with the Marquee tool on a new layer and fill it with any colour. Double click the layer to open up the layer styles options. Add a Gradient Overlay alternating between dark and light greys to give a shiny metal effect.

Add a thin 1px stroke using a mid-grey between the two tones used on the gradient. Using Photoshop layer styles throughout the creation of the icon makes it much easier to rebuild the icon at the smaller sizes as each effect can be reloaded and quickly edited via the layer styles options palette.

CMD+Click the layer’s thumbnail to load the circular selection. Right click and choose Transform Selection, then scale down the selection while holding Shift and Alt. Fill this new selection with black on a new layer.

Open up the layer styles window for this layer and add a black to dark grey vertical Gradient Overlay to form the base of the fascia.

On the same layer, add an Inner Glow and Stroke effect using light grey tones to give the impression of a chrome surround.

Load the selection by CMD+Clicking the layer thumbnail, then fill a new layer with a repeating pattern. I’m using one of the patterns from the recent pixel patterns freebie here on Line25. Change the blending mode to Multiply to render the white areas transparent then reduce the opacity to around 25%.

Load another circular selection, scale it down slightly and fill with white. Load the selection again, scale down further and delete this selection to form a white ring. Create a square selection, right click and choose Transform Selection, rotate it by 45 degrees (hold Shift) then move it downwards so the top corner is aligned with the centre of the gauge. Delete this selection from the white ring.

Load the layer styles for this shape and add a Gradient Overlay using the default rainbow color spectrum. Change the style to Angle then alter the orientation until the gradient begins with blue and ends with red. Add a subtle Inner Shadow to the top edge.

Draw a small circle in the centre of the gauge and add a metal style Gradient Overlay using grey tones. Also add a subtle Drop Shadow to add depth and a touch of realism.

Use the Polygonal Lasso tool to draw a needle shape on a layer underneath the centre pin and add a Gradient Overlay using dark and light red tones. Alter the gradient angle so it flows exactly down the centre of the needle. Give the needle a subtle Drop Shadow to give the impression that is lifted from the gauge face slightly.

The largest of the icons is now complete. All the subtle gradients help to replicate light and shade to create a more realistic icon design. Now let’s rebuild the icon into the smaller versions.

Select all layers and press CMD+T to Transform. Using the top toolbar to enter the specific dimensions of the smaller icons.

When the icon is scaled some of the effects are lost, or their size remains too large to work properly on the smaller icon. Go through the styles and remove effects that are no longer visible.

Other effects such as gradients and shadows will need adjusting to accommodate the smaller icon size. Go through and reduce the size of each of these effects.

The great thing about layer styles is the contents of the layer can be recreated entirely while keeping the same effects. The centre pin in particular becomes way too small on the tiny icons, so fill a larger circular selection on the same layer – The layer style will automatically add the same gradient and shadows.

The largest of the icons features all the textures and details, but as the icon is scaled down some of these details are lost. As the icon moves into the 48px-32px range the proportions are adjusted so the design is still recognisable, this includes a larger centre pin and needle as well as replacing the gradients of the chrome surround with a plain grey stroke.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.rocketkertas.co.cc Shuff Samsuddin

    this tutorial is great :)
    i'll tweet and share on fb

    • http://twitter.com/chrisspooner Chris Spooner

      Thanks for sharing, every vote counts and helps loads!

  • http://www.antoineguedes.com Antoine Guédès

    Great tut' Chris! I had to design a dashboard icon one week ago, so I really appreciate to see wich techniques you use. Thanks for sharing! ;-)

    • http://twitter.com/chrisspooner Chris Spooner

      Thanks Antoine, do you have a link to your Dashboard icon? I guess these steps could be used for any type of icon design.

  • http://www.clockdiscount.com/home Ed Baxter

    Very cool tutorial, thanks Chris!

  • http://www.tutoriallounge.com Tutorial Lounge

    excellent work in this tutorial.

  • http://www.zipbox.co.uk Hannah Hurst

    This is a great tutorial. I will defo be using these techniques. Thanks.

  • PRATEEK GUPTA

    Great tuts chris

  • PRATEEK GUPTA

    chris there are some confusing step in this tuts firstly after adding gradient overlay to the big circle what can we do add stroke to the big circle or create another small circle in big circle & then add stroke on that circle (small one) & secondary the size of all screenshot are very small we can't see the exact detail of the effect so please solve my problem as soon as

    • Vinay Bhat

      Oi, You can click on images to view their full size.

    • http://dezineware.com DW

      Exactly Gupta i was going to point it out.. but this is Chris Blog i am sure he will guide you…

      :)

      • http://twitter.com/chrisspooner Chris Spooner

        Looking back at the tutorial it looks like I have strokes on both elements? The stroke on the larger circle is very subtle (just 1px in size).
        Basically when creating any kind of chrome or metal effect the more gradients you have the better.
        Play around and test out various Gradient, Stroke and Glow settings on your design and see how it looks.

  • http://www.buzz-webdesign.co.uk Buzz

    Great tutorial, thanks for posting.

  • http://www.code.my devlim

    Wow, nice, seem like this design really popular now, few similar design appear in dribbble too =)

  • matt

    great tutorial, and a nice finished product

  • http://avisualidentity.com Arizona Webdesigner

    Awesome tutorial, thanks for posting.

  • ABDUL JANOO

    i was waiting for some icon thanks dude

  • sarawut

    Thank you for this tutorial. Cool and easy to understand ;)

  • http://www.designcabi.net Bambi Corro III

    Thanks Chris for this wonderful tut for I am assigned in my car club team to recreate our logo. I'll definitely be using your technique.

    Cheers from the Philippines!

    • http://twitter.com/chrisspooner Chris Spooner

      A car club logo sounds like the perfect use for this type of design. It would make a great speedo!

  • http://www.refreshcreations.co.uk Ryan Carson

    Nice Photoshop Tutorial, I like theexplanation about how to efectively icon-ize things also.

  • dwi

    like this

  • http://www.orcharddesigns.com cleveland web designer

    Nice job! Keep this up and I'll be back for more :)

  • http://dezineware.com DW

    Chris nice tutorial but i think when it comes to resize it.. i don agree much.. its better that people create icon using vector shape in photoshop.. cause they don loose efx when u scale em down…

    Anyhow this is my suggestion.. rest you know better :) cheers
    DW

    • http://twitter.com/chrisspooner Chris Spooner

      I actually haven't played around with vector elements in Photoshop. I usually leave my vector work for Illustrator, but I'll be sure to check this out.
      Thanks for the heads up!

  • http://marketingmeltingpot.net/ jackson

    I also agree with DW in that vector graphics are better when you need to resize images

  • http://www.brainstormstudio.com Long Island Web

    What a great tutorial, Thanks!

  • http://www.ezertechnologies.com Rajesh

    yes it look great effort about this design.very useful tutorial.I got one new idea on designing.yes i have used this method layer can be recreated entirely while keeping the same effects.

    Thanks for this new idea.

  • http://www.webdesigntelford1.co.uk Web design Telford 1

    Nice tutorial guys – just stumbled on your site . . . def bookmarked now :)

  • http://vivaforall.com Ecy Anboo

    Great tutorial, Chris.
    I'm trying to make one too following this tutorial.

    Thanks for sharing. :)

  • brett Leaver

    it did not work. when i applied the inner glow and stroke and it did not look 3d.

  • ABDUL JANOO

    hey chris can you tell me how you have border design over video like in other blog

  • http://metalpigs.com metalpigs

    great tuts Chris, easy to follow! =)

    btw, i'd just follow your link from one of your tutorials on spoongraphics…

    keep up the good works! :P