Who wouldn't want to add a little gel to their buttons? It's simple and very appealing; Take a look at this easy step-by-step Photoshop tutorial as I slap together some crazy looking gel buttons!
Step 01 - Create New Image: We’re going to start off by first creating a new image, in our case we’re going to be creating a 150x60 offset banner. Click File > New (ctrl + n), enter in 150 for width & 60 for height, press ‘ok’.
Step 02 - Create Object Base: In my example I’ve created a rounded corner square with a darker blue, the darker the shade of the color the better, not going to dark is important too keep in mind; my tutorial on creating this simple object is available by clicking Here.
Step 03 - Selection Modify: CTRL+Click your object layer name on the layer pallet.
Step 04 - Contract: Now click Select > Modify > Contract, and set the value to 1.
Step 05 - Create New Layer: Create a new layer (click Layer > New > Layer); Or press CTRL+SHIFT+N.
Step 06 - Foreground Color: Now for us to generate the 3d gel look we are going to be using white so set your foreground color to pure white, #FFFFFF.
Step 07 - Tool Setup: Select the gradient tool, and set the gradient to foreground -> transparent. Your selection should still be visible, if not CTRL+Click your object layer name again (make sure you remain on your new layer).
Step 08 - Gradient: Perform a vertical up -> down gradient starting at the top of the selection line down about 1/6th the size of your object.
Step 09 - Create New Layer: Create another new layer (Click Layer > New > Layer; CTRL+N). Make sure you still have your selection! If not, do step 3 and come back here.
Step 10 - Gradient: Perform another gradient, same setup as before this time from down -> up, start at the bottom of the select click and drag straight up about ½ way (Press and hold shift while dragging gradient line to keep it straight).
Step 11 - Layer Bleeding: Change the layer bleed mode for the current layer (the down-> up ½ way gradient) to ‘Soft Light’.
Step 12 - Voila! A simple yet stunning gel button! As an optional added effect you can add a ‘stroke’ and ‘outer glow’ to your object layer to make it stand out more. Also, feel free to play with both layer bleeding modes for both the ‘up -> down’ and ‘down -> up’ gradients, with certain colors you can produce some really crazy looks! Finally, you can play around with other layer effects, such as color overlay and gradient overlay!
I hope that you found this tutorial easy and helpful! If you have any questions, send them to scotty@scotty.cc – until then, stay tuned for more!
