Line25

How To Create a Vibrant Radar Icon in Photoshop

Read the full post

Get to grips with Photoshop’s various tools to create a detailed and vibrant radar icon. We’ll build the icon over multiple layers with the help of gradients, brushes and layer style effects. The final icon would look great in your dock as a Mac application or used to create an icon for your iPhone app.

Radar icon

The icon we’ll be creating features a typical green radar with a vibrant illuminated screen. Subtle gradients help add depth to the icon while the scanlines pattern and soft glows on the screen elements really help add a touch of realism.

View the final radar icon

Create a new Photoshop document and fill the background with black. As for sizing, create the design at the largest your icon will ever need to be. Fill a white circle in the centre, then right-click and select Transform Selection. Scale down the selection while holding Shift and ALT. Press Enter then delete out this centre portion to leave a thin ring.

Double click the ring’s layer in the layers palette to open up the layer styles. Add a Gradient Overlay flowing from dark to light green, then add a soft white Inner Glow.

Next, change the settings of the Outer Glow effect to add a black shadow around the ring. It won’t be visible yet, but it will help add depth to the radar screen later.

Draw a circular selection within the area of the outer ring, then fill a new layer underneath the ring with a green gradient. Choose colours from black to mid-green to a very light green and select the radial gradient option.

Create a new document at 2x3px. Zoom right in and select the Pencil tool. Draw a line across the top edge, then go to Edit > Define Pattern.

Draw another selection within the confines of the outer ring, then select the fill tool, change the drop down menu to Pattern and select the recently created pattern swatch. Change this layer to Overlay at 50%.

Use the Single Row and Single Column selection tools to draw horizontal and vertical lines over the document. To make sure they’re centred, press CMD+A to select all, then CMD+T to transform. You can then drag out guides from the side rulers (CMD+R) and snap them to the transformation handles.

Add a layer mask to the lines layer and fill it entirely with black to render everything invisible. Then use a large soft white brush to bring back the lines by clicking once in the centre.

Draw two circular selections aligned to the centre (Click+drag from the centre guides while holding ALT), then right click and select Stroke to give them a 1px white outline.

Use the Polygonal Lasso tool to draw a rough outline to contain the radar sweep. Pay close attention to the alignment to the centre. Add a blob of white with a large soft brush.

CMD-click the outer ring layer thumnail and add in an extra selection to surround and delete any unwanted excess from the radar sweep layer. Change this to Overlay to allow the colours to interact and produce a vibrant green effect.

Use the brush tool to dab spots on the radar, then give them an extra vibrant glow using the Outer Glow effect from the layer style window.

Radar icon

This leaves our cool little radar icon complete ready for exporting as a transparent PNG and putting to use as a fully working icon file in your favourite app, or as some kind of interface icon on your web app or web site.

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.футболмастер.рф alex

    Very cool. Nice work!

  • http://www.a2area.it lxn

    Always interesting posts Chris, congrats!

  • http://www.inktspatten.nl Yskaya

    Thank you for sharing Chris. :) perfect timing.

  • Mohammed

    Cool, thank you guys :)

  • http://aboyns.com Aubrey Boyns

    Nice one, simple but looks quality.

  • http://webdesigner-india.net cheap web designer

    Thanks for sharing..
    Amazing..!!

  • http://inspirationfeed.com inspirationfeed

    Reminds me of the Call of Duty UAV!
    Great tutorial Chris, keep up the great work!

  • http://designtypegeek.com Rick Henderson

    Nice tutorial. I can't wait to try it out!

  • http://resimplify.tumblr.com Derek Jensen

    Call of Duty anyone? haha

  • Nataly

    Nice! It's good tutorial.

  • http://siteezy.com Ashley

    This is a really good Tutorial, I know I will benefit from this.

    Thanks

  • http://www.devfx.co.nz Cass Toyne – DevFX

    very cool, fun to do when your board of web design :)

  • http://www.blakemcgillis.com Blake McGillis

    Very nice tutorial. I couldn't get mine to look quiet as good as yours, but I'm still really happy with it.

  • http://www.riak.uk.com Riak Web Designs

    Excellent Tutorial!

  • http://followthegeeks.com Mohamed

    Great! I like it =)

  • http://www.foundco.com/ Tucson Web Design

    Great tutorial, thanks for sharing.

  • http://www.methodandclass.com/ database development milton keynes

    Awesome tutorial. Just like in the movies :)