Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop Web Layout Gel Buttons

Gel Buttons

Tom Web Layout Jun 27, 2006

1. These Gel buttons are used as interface rollovers on the Omega Designs Classic skin nav bar, and they're pretty easy to make. Start off with a blank canvas of any size, I'm using 400x400.

Select the rounded rectangle tool, and set the round radius to 100px in the toolbar at the top (more if it's a really big button). Drag a rounded rectangle in the middle of your canvas with a colour of your choice.

image 1

2. Now select the marquee tool (M - this is important!) hold ctrl/cmd and click on the shape layer in your layers palette in the bottom right corner of your workspace. This should select the whole shape. Now press ctrl/cmd + shift + N to create a new layer. Hold shift and press the up cursor key twice, which will move the selection upwards. You may have to move it more or less depending on the size of your canvas. Now hold ctrl/cmd and alt and click the shape layer in the layers palette again. This should subtract the shape from your selection, leaving you with a selection similar to the one opposite (holding ctrl/cmd selects the layer you click on, and alt is used to subtract one selection from another, thus subtracting the shape's area from your selection.). Now go Select || Modify || Contract and enter a value of 1.

image 2

3. Now select the gradient tool (G), and make sure you are on these settings.

image 3
Click to enlarge

Drag a gradient starting at the top of your selection and ending somewhere near the bottom. Aim for the effect shown in the example, and press ctrl/cmd + D to deselect.

Now repeat step 2, but this time move your selection downwards twice. Apply the gradient with previous settings again, but set the layer blending mode in the layers palette to 'Colour Dodge'.

image 4

4. With the basic button done, we can add text. How you do this is up to you, but in the example, I have used several effects on my text.

Type the text you want using the text tool (T) set to an appropriate size. I am using 64pt Lucida Sans (Demibold Roman). Apply an inner shadow and an inner glow (Layer || Layer Style || Inner Glow/Inner Shadow) using these settings.

image 5

Finally, I set the blending mode for the text layer to 'Overlay' in the layers palette.

image 6

Optional Stage:

If you are trying to emulate the Omega Designs rollover with this image, then the button you have so far can be the image shown when the mouse moves over the button. To get the image shown when the mouse is not over the button, you need to colourise the image you have at the moment. Merge all your layers by linking them (not the background layer) and pressing ctrl/cmd + E. Now colourise the image by pressing ctrl/cmd + U and ticking 'colourise'. I have used values of 241, 25 and -12 respectively. Use this image and the one at the end of step 5 for your rollover.

Gel Buttons

subscribe to newsletter