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.

17 Comments

  1. alex says:

    Very cool. Nice work!

  2. lxn says:

    Always interesting posts Chris, congrats!

  3. Yskaya says:

    Thank you for sharing Chris. :) perfect timing.

  4. Mohammed says:

    Cool, thank you guys :)

  5. Aubrey Boyns says:

    Nice one, simple but looks quality.

  6. Thanks for sharing..
    Amazing..!!

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

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

  9. Derek Jensen says:

    Call of Duty anyone? haha

  10. Nataly says:

    Nice! It's good tutorial.

  11. Ashley says:

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

    Thanks

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

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

  14. Excellent Tutorial!

  15. Mohamed says:

    Great! I like it =)

  16. Great tutorial, thanks for sharing.

  17. Awesome tutorial. Just like in the movies :)

Sorry, comments are now closed