Awesome Gel Buttons in Photoshop
For something different, here is a try at a Photoshop tutorial. I haven’t done one of these since 2001 or so, but I figure I’d share this little trick for making cool gel buttons in Photoshop.
I originally used some tutorials to learn this then made some tweaks and tricks of my own which I will share here.
Here is the gel button:
1. File -> New
Create an image that’s 250px wide and 250px tall. The size here really doesn’t matter, just choose something in that range. Leave the background contents transparent.
2. Choose your colors
For this tutorial we’re making a purple button, so the colors I chose are:
Background: #7d0f58 (125,15,88)
Foreground: #a60d73 (166,13,115)
Select the Arrow shown above to switch the colors so the darker color is on top.
3. Create a new layer named “shape”
Select Layer -> New -> Layer (Ctrl+shift+N)
4. Use the Rounded Rectangle Tool to create a rectangle
This is the base for the button we’re going to create.
Switch the colors again so the lighter color is on top
5. Rasterize the Layer
Right click on the layer containing the shape and select “rasterize”
This will make it so we can make modifications to the shape.
6. Hold down the Control Key and click on the layer to select the shape.
7. Select a Paintbrush and make a highlight
Use the brush to highlight the middle:
This doesn’t have to be perfect, in fact a little imperfection looks pretty good.
8. Choose Filter -> Blur -> Gaussian Blur
Select a radius of around 10 pixels.
9. Create a gloss shape
Create a new layer, and make another rounded rectangle shape:
Now Hide that shape, but click on the layer so you get the selection:
Create a new layer, and throw a white gradient in using these settings:
It should look something like this:
Now click on Select -> Modify -> Expand and choose 10 pixels.
Then Filter -> Blur -> Gaussian Blur at 10 pixels.
Now select the gloss layer, and push the up arrow to move it up a little.
The finished product should look like this:
You can then insert something under the gloss, and it looks like a button:
This is a pretty subtle button, you can do more to change it around, like playing with the gradients, opacity and rounding the corners more. You can put a slight bevel on it and make it look even more like a button.
I hope this helps get you on your way to making cool gel buttons!
