In this tutorial I will show you how I made the Download button that is shown where you download things on this site, when using the Aqau Skin. This tutorial uses a lot of Photoshop shortcuts, and keystrokes, so if you don’t know them that well, you will learn some of them here.

Tutorial

This may take some people longer than 5 minutes, but that is how long it takes me to make a button like that, so I just call it a 5 minute button.

Okay, press Control + N to make a new document, and set it to be about 230px X 100px.

Using the rounded rectangle tool with a radius of 30px drag out a oval looking shape on the canvas.

Tutorial

Tutorial

Now double click on that layer you just created and in the Layer Styles check the Inner Glow, Gradient Overlay and Stroke check boxes. And use the settings shown in the screen shots.

INNER GLOW
Opacity: 30%
Color: White
Size: 10
Range: 60
Tutorial

GRADIENT OVERLAY
Opacity: 100%
Scale 67%
Tutorial

Custom Gradient Settings
Tutorial

STROKE
Size: 2
Position: Center
Opacity: 100%
Color: 3CA7E8
Tutorial

Make a new layer by pressing Control + Shift + N
Now using the Rounded Rectangle tool again, drag out a smaller oval near the top center of the first one.
It should look something like this.

Tutorial

If yours has the layer styles of the first layer, then right click on the new layer and select clear layer styles.
The color of the layer doesn’t matter because we will be hiding it anyways.

Set your foreground and background colors to the default by pressing D.
Next Control + Click on the name of the layer to select it.

Press Control + Shift + N to make a new layer, then Control + Backspace, to fill that layer with White.
You can click the eyeball next to the layer to hide the previous layer. We will only be working with this newly created layer.

Now press G to use the Gradient tool, and make sure your using the Foreground to Background gradient.

Then press Q to use a Quick Mask.
Hold shift and drag your mouse from the top of the blue layer, to the bottom of it.
You should have something like this.

Tutorial

Then press Q again, and then delete, which will make the white part fade.
Delete it until you like how it looks.

Tutorial

Press Control + Shift + N for new layer.
Next using the Elipse Tool, hold Shift, and drag a circle out so it looks like this.
I used this color for it as well. #35B6FF

Tutorial

Double click the layer name to open the Layer Styles.
And add an Inner Glow and Stroke to it using the settings shown below.

INNER GLOW
Opacity: 30%
Color: White
Size: 10
Range: 60
Tutorial

STROKE
Size: 2
Position: Center
Blend Mode: Luminosity
Opacity: 70
Color: White
Tutorial

Press control + Shift + N for a new layer.
Then Use the Custom Shape tool, and find the shape that looks like the arrow I am using.
Tutorial

Drag out the shape, then Resize and Rotate so it fits inside the circle.

Tutorial

Set the layers color to white.
Set the blending mode of the layer to soft light
Tutorial

And Add a stroke to the layer with the settings shown below.

STROKE
Size: 1px
Position: Center
Opacity: 100%
Color: White
Tutorial

Finally for the text, use whatever font you want to use I used the secret Tweeaks font Tutorial
Make the text color White
Add a stroke to the text as shown here.

STROKE
Size: 1px
Position: Outside
Blend Mode: Darker Color
Opacity: 71%
Color: #1A9BE7
Tutorial

And that pretty much wraps it all up.

Here is the result

Tutorial

Hope you enjoyed this tutorial Tutorial

Get automatic updates! Subscribe to Our RSS Feed or Get Email Updates sent straight to your inbox!