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.
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.
See more here:
How To Create a Vibrant Radar Icon in Photoshop
Incoming search terms:
- radar app
- transformation icon
- build icon
- black shadow around picture photoshop
- radar psd free
- vector radar sweep
- iphone green gradient
- mac app green
- mac icon radar
- radar icon iphone
- radar iphone
- radar iphone icon
- radar mac app icon
- radar VECTOR EN PHOTOSHOP
- icon style iphone
- icon of iphone app
- glowing icons photoshop
- gife radar trasparent
- how to create green in photoshop
- hd icons mac green
- cool mac docks icon
- free vectorial icons radar
- free typical radar application for iphone
- create nice looking iphone app icons in photoshop
- applications icon mac
- icon - icon aplikasi iphone
- radar background
- green mac style
- open source icon radar
- modern radar mac
- mac radar icon vector
- how to draw a radar icon ai
- application icon for mac
0 commentsback to post