Create iPhone-like icons in Photoshop

3/3 The Glare

Again, create a New Layer{new layer}, and name it “glare”. This will, obviously, be the layer that will hold the glare effect.

Using Photoshop’s “Elliptical Marquee Tool”, with the “Intersect with selection” option turned on, drag an ellipse that looks something like the one shown below.

Iphone icon eliptical selection/ intersect

Iphone icon selection example

Select the “Gradient Tool” { gradient tool }, double click the gradient bar {gradient bar}, and create a linear gradient from white to transparent.

Iphone_icon - create gradient

Modify the “glare” layer’s opacity to about 65%. You may have to apply other values to the opacity settings, depending on the colors you chose.

Iphone_icon - glare opacity

Press the Ctrl+D [rel]shortcut[/re] or CMD+D  for Macs to deselect everything.

Now select your “base” layer, go to the “Layer” menu, “Layer Style” submenu, and then click “Drop Shadow…”. Click Ok.

Iphone icon drop shadow

We left the Drop Shadow settings at their default values but you can play around with them.

Iphone_icon drop shadow settings - standard

Al final

Now we have to add a symbol or some text to the icon. For this tutorial, we’re using a stylized, network-related icon. To place it, go to the “File” menu, and click “Place”. Make sure that your shape layer is placed under the “glare” layer.

iPhone icon final

That’s it for this tutorial. Questions?

Page 1 Page 2

More Info:

Author:  Andrew C.

Original photo:  CGRats.com

Keytags:  , , , , , , , ,

Related Stuff:

Essential Photoshop Keyboard Shortcuts Create web userbars in Photoshop

Comments disabled for maintenance. Use the contact form for questions.

About the authors:

Tudor:

Programmer and 3D enthusiast. Teaches web design, builds games and maintains this site in his spare time.

Personal portfolio

Iulian:

2D/ 3D artist. Loves game& product art.

Personal portfolio

Vlad:

2D/ 3D artist. Works as a print designer and does 3D art in his spare time.

Personal portfolio