Icon

In this Photoshop tutorial, we will create a glass icon for a web site with you.

First create a new document (File>New or Ctrl +N)
by size  200×200 px with white background.

Create a new layer (Layer> New> Layer or Ctrl + Shift + N)
Select tool “Elliptical Marquee Tool (Oval area) “and, holding”Shift“, make this selection:

Now with “Paint Bucket Tool fill this selection with some color.

Go to Layer> Layer Style> Blending Options> Inner Shadow
(Layer – Layer Style – Blending Options – Inner Shadow):

Holding “Ctrl“, click on the layer with the circle in the layers panel to select it.
Go to Select>Transform Selection  (Selection – Transform selection) and reduce the selection in this way:

Now create a new layer for the small circle.
Fill it with some color and go to Layer>Layer Style>Blending Options
(Layer – Layer Style – Blending Options).
Customize the tabsInner Shadow (Inner shadow) “and”Color Overlay (color overlay) “.
Color for “Inner shadow“: # 003483, for “Color overlay“: # dbe0e3.

Continuing to work in a layer with a small circle,
go to Select> Modify> Contract (Selection – Modification – Compress) and set there the value 1 px.
Now select the layer with the back circle and click “Delete“to
remove unnecessary area.

Create a new layer and select a small circle (Ctrl + click on the layer icon in the layers panel). 

Select tool “Gradient tool“(foreground white color)

and fill it in, starting from the center, as shown below.

Here is the result:

Now take “Pen Tool and make this selection:

Click around the center of the circle and transform the selection like this:

Rasterize the layer Layer>Rasterize>Layer (layer – rasterize – layer), then select a small circle (Ctrl + click on the layer icon in the layers panel) and invert the selection (Select> Inverse or Ctrl + Shift + I).
It should look like this:

Now click “Delete“to remove the unnecessary part.
Go to Edit> Free Transform (Editing – Free Transform) and slightly change the white selection.

Add a layer mask (layer mask, small icon in the layers panel)
and make a rectangular selection around the layer.

Using “Gradient tool, lightly fill the white selection.

It remains only to add the character “i”.
Select the text tool “Horizontal Type Tool“(font”Times New Roman“, the size 157 pt) and write the required character.

Add layer styles to it. “Bevel and Emboss“(embossed),”Gradient Overlay(gradient overlay) “and”Stroke (Stroke) “.
Layer> Layer Style> Blending Options (Layer – Layer Style – Blending Options)
Place the text layer under the white selection.

Now your button is ready:

Like this post? Please share to your friends: