Quick Tips: Create Gel Button for Website

Photoshop | July 11th, 2010

In this Photoshop tutorial I’ll show you how to create the gel effect in button from absolute scratch. Gel button or also known as glass button is style of button or graphic that used by some websites, and then it has been made extremely popular with the introduction and rise of the Macintosh OS X system and the Windows Vista system. Lets learn how to create it!

Step 1

We’re starting from scratch, so our very first step is create new document and draw our path in Photoshop. Pick your Rounded Rectangle Tool (U) and set the radius to 40 px from the option, Now create your path not shape.

photoshop tutorial quick tips create gel glass download button for website

Step 2

Set your foreground color to dark green #148102 and background to lighter green #23dd04. Add new layer to your document. Press Ctrl+Enter to load selection from path we have created in step 1. Then select the Gradient Tool (G). The first thing to do before adding the gradient is to make sure the option is set to Foreground to Background in the option of the Gradient Tool. Once you have this set, draw a vertical line with the tool from the top of the path to the bottom.

photoshop tutorial quick tips create gel glass download button for website

Step 3

Create a new layer above the other layers. Set your Foreground to white #FFFFFF. Make selection as we do in step 2. In order to create the shine on the button, select the gradient option from Foreground to Transparent. This time however, only draw the line to half the height of the button.

photoshop tutorial quick tips create gel glass download button for website

Step 4

The next step to help with the effect is to shrink the highlight. Select the highlight layer and go to Edit > Transform > Free Transform. A box will appear around the shine layer. Pull in the sides until you get the desired effect.

photoshop tutorial quick tips create gel glass download button for website

Step 5

This time to add text to our button. The text that you add will really begin to make your button look three-dimensional, because you add it above the green gradient layer but below the highlight layer. First select the Text Tool (T) and then create black text to your button, In my example I have used the Georgia font and a very popular word in internet ‘Download’.

photoshop tutorial quick tips create gel glass download button for website

Step 6

The final step to making the button look as though it has depth is to add a drop shadow. For this you’re going to need to add a layer effect to the green gradient layer. Double clicks this layer to bring up the layer style window. Select the Drop Shadow option by thicking the box. Set the color of the shadow a little darker than the darkest color of your button and play the values to create the effect. You don’t want a shadow too soft or hard, and you don’t want its distance to be too far away. You can see my screenshot below.

photoshop tutorial quick tips create gel glass download button for website

Final Result

This is our beautiful gel button, you can download psd file for this tutorial. I hope you enjoy this post and don’t forget to subscribe to Grafisia RSS Feed.

photoshop tutorial quick tips create gel glass download button for website

Download PSD File

One Comment

  1. Cool designer says:

    Making a website is really not that tough, and top of all, you can create a website or more website for free.
    Building a website is a extremely individual skill and is different with each client.
    It is more about revealing your business to new probable clients and generating new sales.

Leave a Reply