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