The one having a website is always concerned by the question “How can I possibly make my website look better?” One of the ways to refresh a website without making big and significant changes is to re-design the icons on you web-page. On templates.com you can possibly find the icon sets you may need. This tutorial will be describing actually how to make cool icon sets. I will show you how to draw an icon, and then we will draw other icons basing on the one we already draw.

Step 1

I’ll start with the foundation for the icon. It will look like a hollow disk or like a hockey puck. Create a new document 150×150px with white background.
Begin with drawing the top of the hollow disk. Select Ellipse tool, set Shape Layers parameter and draw blue (#89d0f9) elliptical shape in the center of the document. Now go to Blending Options and enter Gradient Overlay and Inner Shadow settings.

Step 2

Now, draw the puck’s lateral part. Duplicate Shape 1, name it Side Shape, send it backwards and move down to 10px.

Step 3

As you can see, the sides of a lateral part are rounded too early, which makes our icon foundation look a little flat. To set the things right transform the path using Path Selection Tool as it is shown on the picture below:

Step 4

Make the Shape color a little more dark (#4aacf9) and add Gradient Overlay.

Step 5

To make the picture more realistic add some smooth transitions joining the top of the plate and its sides. Duplicate Side Shape, send it backwards and move down to 1px. Make the color more dark (#095e9d). Duplicate Side Shape one more time. Set white color for it.

Step 6

Now, let’s make the details more prominent. Firstly, add some glare to the sides. Create a New Layer, then Ctrl+Click on Side Shape Layer. Set foreground color white and select Foreground to Transparent gradient. Now draw gradient from the right part of the plate to the middle. Start to draw gradient from more to the right from the beginning of the plate.

Step 7

As it is described in the previous step, create a New Layer, then Ctrl+Click on Side Shape Layer. Set foreground color white and select Foreground to Transparent gradient. Now draw gradient from the left part of the plate to the middle. Now choose Marquee Tool and subtract a little piece 23px wide from selection. Press Del and Deselect.

Step 8

Now draw the glare for the top part of the plate. Select your first Shape 1 Layer, Ctrl+Click on it, create a New Layer. Set foreground color white and select Foreground to Transparent gradient. Draw the gradient starting 10px from the left side of the plate to the right side of the plate. Select Lasso Tool and subtract half of the selected area from selection. Press Del and Deselect.

Step 9

At last, make the glare on the borders. Create a New Layer and make 10×6px Elliptical Selection on the edge of the plate. Fill it with white. Apply Gaussian Blur to it with radius 1.7px.

Step 10

Duplicate layer and move it to the upper part of the left glare. Rotate it for about 30degrees. Call the layer created Blur.

Step 11

The foundation for the icon is done. Now, let’s draw the letter on top. The ordinary letter of a big font can be the basis for your icon letter. I used Shape.
Set foreground color (#ff8c22), add e-shape to Photoshop and draw the letter 88×88px big.

Step 12

Transform it using Free Transform. Hold Alt and move the upper central square down so that the height you get is 51px.

Step 13

To make the icon look realistic add narrow brown stripe down under the letter. Duplicate layer containing the letter. Choose lower layer containing a letter and drop it 1px down. Set color (#6c2201).

Step 14

Diversify the look of your letter. Add some Glow and Gradient Overlay.

Step 15

Now, let’s get to the final part of making a letter. Add the glare to the letter itself. Start with the general diagonal glare. Create New Layer. Set foreground color white and select Foreground to Transparent gradient. Draw gradient starting with 10px from the top of the upper border of the letter down to its lower border. Select Lasso Tool and subtract from selection the piece a little bigger than the half of the area with the same angle as it was in the case with the plate glare. Press Del and Deselect. The Glow a little more modest than it is on the plate will help us to make the image look three-dimensional and will also demonstrate that the letter is situated a little higher than the plate itself.

Step 16

Now make a couple of glares on the lower part of the middle of a letter. Create a New Layer for the first one, using the Elliptical Marquee Tool make selection 25×2px and fill it with white, deselect and apply Motion Blur (Distance 9px, Angle 0deg).

Step 17

For the second one Duplicate Layer and move the glare left for about 30px.

Step 18

Let’s add the bright spot to the lower left corner of a letter. Choose Blur Layer, duplicate it and bring it to front. Move it few pixels up and right.

 

Step 19

Add glare to the lower part of the letter. Create a New Layer. Ctrl+Click on the layer with "E" shape. Set foreground color white and select Foreground to Transparent gradient. Draw gradient from the lower part of the letter to its upper part. Now, move selection up to 1px, press Del and deselect.

Step 20

Finally, create the last glare for the upper left part of our icon letter. Create a New Layer. Ctrl+Click on the layer with E-Shape. Set foreground color white and select Foreground to Transparent gradient. Draw gradient diagonally starting from the point situated a little upper than the upper left point of the letter itself down to its center. Now move selection down and right to 2px. Press Del, deselect and shift the Layer down and right to 1px. The icon is ready! Here’s my final result.