Designing a Glossy and Elegant Web Button

glossy-elegant-web-button

You need a cool web element? or want to create an eye-catching download button? this tutorial is for you. So make sure to read it carefully, it contains kinds of tips & tricks for you to try.

Final Image Preview

Photoshop tutorial designing glossy elegant and modern web button

Step 1

First, prepare the background for the button that we will create. I am here using plaid patterns, but you can use another pattern or certain solid color. After that, we will create the basic shape of the button, create a path like the image below and click Layer> New Fill Layer> Solid Color, select white color and press OK. Name the new layer with Outer Shape.

Photoshop tutorial designing glossy elegant and modern web button

Double-click Outer Shape layer to bring up the Layer Style window. First, give the Drop Shadow to the layer with the settings as follows.

Photoshop tutorial designing glossy elegant and modern web button

The next layer style is Inner Shadow.

Photoshop tutorial designing glossy elegant and modern web button

Now we add a Gradient Overlay to the Outer Shape layer. You can use the settings as shown below.

Photoshop tutorial designing glossy elegant and modern web button

The last part of Step 1, we add a Stroke to Shape Outer layer, use the Gradient as the Fill Type. Here are the settings I use.

Photoshop tutorial designing glossy elegant and modern web button

After completing one step we produce an image like below.

Photoshop tutorial designing glossy elegant and modern web button

Step 2

Create a new path is slightly smaller than the path that we created in Step 1. Do the same thing as the first step, click Layer> New Fill Layer> Solid Color, select white color and press OK. Rename this layer to Inner Shape and change the Fill Opacity to 0%.

Photoshop tutorial designing glossy elegant and modern web button

Give the Gradient Overlay style to Inner Shape layer with the settings as follows. Use Gradient from white to transparent with Reflected style. Don’t forget to check the Reverse box.

Photoshop tutorial designing glossy elegant and modern web button

Now, we get the following picture.

Photoshop tutorial designing glossy elegant and modern web button

Step 3

Create a thin path at the bottom of the button, then select Layer> New Fill Layer> Solid Color, use the white color and press OK. Give the name of this layer with LowLight, change the Fill Opacity to 0% and the Opacity to 10%.

Photoshop tutorial designing glossy elegant and modern web button

Give the Gradient Overlay style to the LowLight layer with gradient from black to transparent and use Reflected as style. I set my Gradient Overlay as shown below.

Photoshop tutorial designing glossy elegant and modern web button

Step 4

Make the path a little thicker than that we created in the previous step at the bottom of the button, then click Layer> New Fill Layer> Solid Color, use the white color and press OK. Give the name of this layer with HighLight, change the Fill Opacity to 0% and the Opacity to 30%.

Photoshop tutorial designing glossy elegant and modern web button

Give the Gradient Overlay style to the LowLight layer with gradient from white to transparent and use Reflected as style. Set your Gradient Overlay as you see in the picture below.

Photoshop tutorial designing glossy elegant and modern web button

Step 5

Create a path on the left button as in the following screenshot. Select Layer> New Fill Layer> Solid Color, use the white color and press OK. We call this layer with the name of Emboss Stroke.

Photoshop tutorial designing glossy elegant and modern web button

Double click on the Emboss Stroke layer, when the Layer Style window appears select Gradient Overlay. Use Gradient from black to white with Linear style, do not forget to check the Reverse box.

Photoshop tutorial designing glossy elegant and modern web button

After completing the five steps, we obtain preliminary results as follows.

Photoshop tutorial designing glossy elegant and modern web button

Step 6

In this step we are going to give Gloss effect on the button. The first thing to do is create a path with a shape like the picture below. Select Layer> New Fill Layer> Solid Color, use the white color and press OK. Change the Opacity of this layer to 63% and the Fill Opacity to 46%. We call this layer with Gloss.

Photoshop tutorial designing glossy elegant and modern web button

Give Gradient Overlay style to the Gloss layer with gradient from white to transparent and Linear style. I used the settings as shown below.

Photoshop tutorial designing glossy elegant and modern web button

So far we get a picture as follows.

Photoshop tutorial designing glossy elegant and modern web button

Step 7

Time to make a blue background behind the arrow. First, create a path as in Step 5 but this time we make the size smaller. Select Layer> New Fill Layer> Solid Color, fill the layer with blue #1bb3eb and press OK. Give the name of this layer with Arrow Bg.

Photoshop tutorial designing glossy elegant and modern web button

Double-click on the Arrow Bg layer, after the Layer Style window appears select Gradient Overlay. Use Gradient from black to white with Radial style, don’t forget to check the Reverse box.

Photoshop tutorial designing glossy elegant and modern web button

After implementing the seven steps we get a picture like this.

Photoshop tutorial designing glossy elegant and modern web button

Step 8

Create a path like that we created in Step 7 with sizes slightly smaller. Select Layer> New Fill Layer> Solid Color, use the white color and press OK. Change the Fill Opacity of this layer to 0%. We call this layer with a Gradient Overlay.

Photoshop tutorial designing glossy elegant and modern web button

Double click the Gradient Overlay layer to bring up the Layer Style window. Give style Inner Shadow with the settings as follows. Do not press OK because there are other styles that we will add.

Photoshop tutorial designing glossy elegant and modern web button

Give Gradient Overlay style to the Gradient Overlay layer with gradient from black to transparent and use Linear style. Don’t forget to check the Reverse box.

Photoshop tutorial designing glossy elegant and modern web button

Step 9

Create a new path in the form of an arrow facing down as shown below and save the path because we will use it again. Then select Layer> New Fill Layer> Solid Color, use the black color and press OK. Change the Blending Mode of this layer to Overlay and set Opacity to 45%. We call this layer with Arrow Shadow.

Photoshop tutorial designing glossy elegant and modern web button

Now we give Outer Glow style to the Arrow Shadow layer. Use the instructions below to adjust the composition of the Outer Glow.

Photoshop tutorial designing glossy elegant and modern web button

Make Arrow Shadow layer as Clipping Mask from Arrow Bg layer that we created in Step 7. So the layer composition that we have like the following.

Photoshop tutorial designing glossy elegant and modern web button

Step 10

By using the path that we created in Step 9, we created a new layer by clicking Layer> New Fill Layer> Solid Color, use green # b2eb42 to fill the layer and press OK. Place this layer above all layers and change its name to Arrow. Double-click the Arrow layer to bring up the Layer Style window. Now select Inner Shadow and use settings as follows.

Photoshop tutorial designing glossy elegant and modern web button

The next style that we give the Arrow layer is the Gradient Overlay. Use Gradient from black to white with Radial style, don’t forget to check the Reverse box.

Photoshop tutorial designing glossy elegant and modern web button

Finally we give Stroke to the Arrow layer.

Photoshop tutorial designing glossy elegant and modern web button

After ten step we’ve completed most of the button. We just need to add a little text to complete.

Photoshop tutorial designing glossy elegant and modern web button

Step 11

It is time we add the text ‘DOWNLOAD‘ on the button. Use the font Helvetica Rounded 10.4pt with color #9c9c9c.

Photoshop tutorial designing glossy elegant and modern web button

Give a Drop Shadow to ‘DOWNLOAD’ text with settings like the screenshot below.

Photoshop tutorial designing glossy elegant and modern web button

Next we add the Inner Shadow to the text.

Photoshop tutorial designing glossy elegant and modern web button

The next style that we give to the text layer is the Gradient Overlay. Use Gradient from black to white with Linear style.

Photoshop tutorial designing glossy elegant and modern web button

Step 12

As a final touch we add a little text that is ‘Get the latest version‘. Use the font ‘Helvetica CE Regular‘ with size 5.2pt and color #4a4a4a.

Final Result

Photoshop tutorial designing glossy elegant and modern web button

I hope you enjoy this tutorial, please subscribe to Grafisia RSS feed, subscribe via e-mail or follow Grafisia on Twitter to get latest update.

Download psd file

One Comment

  1. Nice tutorial.
    Nice website.

Leave a Reply