Photoshop Icons - Green and White Mail Icon

In this Photoshop Tutorial I will show you how to create the green and white mail icon in my image. Please see the image that I have provided to see the ending results. These mail icons are often seen on websites. This is a pretty color
 green. I will write this tutorial in detail so that the new Photoshop users can create this icon too.

How to Create a Green and White Mail Icon in Photoshop

Step 1 - Create a New Canvas

Go to the top of your Photoshop window and click File > New. Create the canvas 100 pixels by 100 pixels. You can crop the canvas at the end if you need too. Select the background color that you need. Then click the OK button.

Step 2 - Create a New Layer

Next, you will need to create a new layer to work on. Click the icon in the bottom of the Layers Panel that looks like a sheet of paper with the corner curled up. That will create a new layer. Press F7 on your keyboard if you do not see your Layers Panel. Next, you will need to rename the layer so that you know which layer is which. Double click the name of the layer to rename it. Rename the layer Icon.

Step 3 - Drawing your Icon Background

Select the Circle Tool from your toolbar. Hold down Shift while you are drawing the circle and the circle will be perfect. Draw your circle the size that you want on your canvas.

Step 4 - Rasterize the Layer

You will need to rasterize the layer to make the circle smooth. Right click on the Icon Layer and click Rasterize Layer from the pop up menu.

Step 5 - Blending Options

Now you will need to apply the following effects to your icon. Right click on your Icon Layer and click Blending Options from the pop up menu. Apply the following effects to your icon.

Bevel and Emboss

Style - Inner Bevel
Technique - Smooth
Depth - 100%
Direction - Up
Size - 5
Soften - 0
Angle - 100
Use Global Light - Unchecked
Attitude - 75
Gloss Contour - Linear
Anti-aliased - Unchecked
Highlight Mode - Screen
Color - White
Opacity - 75%
Shadow Mode - Multiply
Color - Black
Opacity - 75%

Color Overlay

Blend Mode - Normal
Color - # 0a7683
Opacity - 100%

Stroke

Size - 1
Position - Outside
Blend Mode - Normal
Opacity - 100%
Fill Type - Color
Color - # 041a33

Click OK on the Blending Options window.

Related information
  • Press F7 on your keyboard if you do not see your Layers Panel.
  • Double click the name of the layer to rename it.