Photoshop Icons - How to Create a Green Glass Arrow Icon

For Beginners and the Advance Photoshop Users

Jasmine Starr, Yahoo! Contributor Network
Dec 12, 2006 "Share your voice on Yahoo! websites. Start Here."

In this Photoshop Tutorial I am going to show you how to create a Green Glass Arrow Icon. These glass icons are used all over the web. This is a green glass rounded square with a white arrow on it. You can make it whatever size you want. It's best to start out about the size that I have in my image and if you want it smaller when you are done, then you can size it down. There are two parts to this Photoshop icon. First, we will make the green glass square. Then we will make the arrow. If you are a beginner to Photoshop, the first part of this tutorial is for you. I will write the first part step by step and explain each step. I will write the second part for the advance Photoshop users. So if you are an advance user, please skip to the advance part of this tutorial.

How to Create a Green Glass Arrow Icon in Photoshop for Beginners

Create a new canvas by clicking File > New at the top of your Photoshop window. Create your canvas 300 pixels by 300 pixels. Set your background to white and click OK.

Create a new layer by clicking Layer > New > Layer. Name the new layer Icon Background and click OK.

Select the Rounded Rectangle Tool from your toolbar. Set the Radius at the top of your Photoshop window to 10px.

Draw the rounded rectangle on your canvas about the size of the one I have in my image. Remember, you can size it down when you're done.

Right click on your Icon Background Layer in your Layers Panel and click Rasterize Layer. Press F7 on your keyboard if you do not see your Layers Panel.

Right click again on your Icon Background Layer and click Blending Options from the pop up menu. Apply the following effects in the Blending Options window.

Inner Shadow

Blend Mode - Multiply
Color - 309837
Opacity - 90%
Angle - 90
Distance - 10
Choke - 20
Size - 21
Contour - Linear
Anti-aliased - Unchecked
Noise - 0

Inner Glow

Blend Mode - Multiply
Opacity - 40%
Noise - 0
Color - # 004741
Technique - Softer
Source - Edge
Choke - 0
Size - 8
Contour - Linear
Anti-aliased - Unchecked
Range -50
Jitter -0

Bevel and Emboss

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

Contour

Contour - Gaussian
Anti-aliased - Checked
Opacity - 90%

Satin

Blend Mode - Overlay
Color - # 60ff6b
Opacity - 100%
Angle - 90
Distance - 38
Size - 38
Contour - Ring
Anti-aliased - Checked
Invert -Checked

Color Overlay

Blend Mode - Normal
Color - # 8aff00
Opacity - 100%

Click OK on your Blending Option window. Now we will move on to the arrow.

Creating the Arrow for the Icon.

Create a new layer by clicking Layer > New > Layer. Name the new layer Arrow and click OK.

Select your Custom Shape Tool from your toolbar. At the top of your Photoshop window you will see Shape and a drop down box. Drop that box down, click on the little arrow on the right, and select Arrows. Now select Arrow 9 in your Shape Box. Draw your arrow on your green square.

Right click on the Arrow Layer and click Rasterize Layer. Right click again on your Arrow Layer and click Blending Options from the pop up menu. You will only need to apply the following two effects to the arrow, Color Overlay and Stroke. You can make your arrow any color that you want by changing the Color Overlay color.

Color Overlay

Blend Mode - Normal
Color - White
Opacity - 100%

Stroke

Size - 1
Position - Outside
Blend Mode - Normal
Opacity - 100%
Fill Type - Color
Color - # 2a970d

Click OK on your Blending Options window. Your Icon should look like the one in my image. One last step and you will be done.

Click on the Icon Background Layer, hold CTRL down and click on the Arrow Layer, so that both of them are highlighted. Right click on one of them and click Merge Layers from the pop up menu.

Now you can size your Icon down if you want to by clicking Edit > Free Transform at the top of your Photoshop window.

If you have any problems with this tutorial, please feel free to contact me using the contact button at the top of this page.

How to Create a Green Glass Arrow Icon in Photoshop for the Advance

Create a New Canvas 300 x 300 and set your background to white.

Create a new layer and name it Icon Background.

Select your Rounded Rectangle Tool and set the Radius to 10px.

Draw your rectangle on the canvas about the size of the one in my image.

Rasterize the Icon Background Layer.

Open your Blending Options for the Icon Background Layer and apply the following effects.

Inner Shadow

Blend Mode - Multiply
Color - 309837
Opacity - 90%
Angle - 90
Distance - 10
Choke - 20
Size - 21
Contour - Linear
Anti-aliased - Unchecked
Noise - 0

Inner Glow

Blend Mode - Multiply
Opacity - 40%
Noise - 0
Color - # 004741
Technique - Softer
Source - Edge
Choke - 0
Size - 8
Contour - Linear
Anti-aliased - Unchecked
Range -50
Jitter -0

Bevel and Emboss