Glossy button

We draw a glossy button for your site in Photoshop just for ten steps.

Step 1. Create a new document, you can fill it with black color or black and gray gradient.

Step 2. Select tool – Oval area and draw the same oval as in the picture:

Step 3. Create a new layer (Shft + Ctrl + N) and using the tool – fill the selection with any color.

Step 4. Go to menu Layer >> Layer styles >> Blending Options (Layer – Layer Styles – Blending Options) and apply the following styles:


Internal luminescence:


Color overlay – (color used: #4cd302)
mode – soft light

Gradient overlay (black #000000 and white #ffffff)
linear style

Stroke – outside, gradient, breakdown of the shape

After you have applied all the styles, you should get this:

Step 5. Duplicate the ellipse layer. The new layer will automatically take over the layer styles.

Make sure the top layer is selected, click Ctrl + T (we will transform the layer). Hold key Shift (to keep proportions during transformation) or slightly reduce the shape as shown in the picture:

Click ‘Enter‘to apply the transformation.

Step 6. Now move the small ellipse to the left edge so that it touches the large one.

Then reduce the opacity of the small to 60%.

Step 7. Create a new layer.

Take the Arbitrary shape tool, from the additional list select the arrow shape (Arrow 6).

Draw an arrow as shown below. Do not forget about the tool free transformation, which will help you to achieve the desired shape and length of the arrow.

Step 8. Now the arrow will give styles.

Go back to the Layer Styles window.

Add a shadow:

Gradient overlay:

Gradient colors used:
#fcfcfc … #d1d2d5 … #9c9ea5 … #dddee0 )

Stroke – inside

Gradient colors used:
#ecedee … #ffffff … #929494 … #ecedee … #868687 … #e0e0e0)

Here is what you get after applying styles to the arrow:

Step 9. Create a new layer and take the tool again.
Draw a smaller selection on a small oval:

Take a gradient from white to transparent (white to transparent)

Draw a line from top to bottom along the highlighted area. You will get a light transparent glow. Reduce transparency to 50% to make it look even more natural.

Step 10 – he is the last. Add text to your button.
Take the tool , select a font, size that will fit the style of your button.

The font used here Georgia, the size 33px.

Apply to the text the same style that was used to the arrow, only this time leave the transparency of the shadow 100%.

You coped with the task! Congratulations!

See you at www.!

Like this post? Please share to your friends: