Green Glossy Navigation Button
Hi. Are you in the need for a new and simple button design? If so, then you are at the right place. I have discovered this cool and simple way of making a button stand out yesterday and I think you could make good use of this.
In this Photoshop tutorial we will learn how to make a simple button that has 2 states. One when you are not with the mouse over it, and one when you are. :) Let’s get started!
Start Photoshop, create a new document and fill it with #000000 (Edit->Fill).
Step 1.
Take the rounded rectangle tool and draw a rectangle like this one, use Path Option selected:
In order to fill this path we need a new layer. Create a new layer (Layer->New->Layer) and fill the path on with whit white. To fill a path, right click it with the Pen Tool or Rectangle Tool Selected and chose fill from the pop-down menu.
Use the “Lime Base - L4 – Linear” gradient from the package that you can download here as the gradient effect that you can apply by going to Layer->Layer Style->Gradient Overlay.
Duplicate the button layer now. We will use the duplicate to create the insides of the button. To duplicate a layer select it first and then press Control/Command + J.
Now we must scale the duplicate, make it smaller and change it’s styles.
Step 2.
In order to resize the duplicate layer (Layer 1 copy) we need to select the layer and press Control/Command + T. Then grab a corner of the layer and scale it down holding Shift and Control/Command down, to maintain the pixel aspect ratio.
We will now make this inner part of the button stand out a bit. First we will clear the layer styles (Layer->Layer Style->Clear layer style). This will make a white a white rectangle inside the button. Now it’s time to add the new styles (Layer->Layer Style-):
We finished the work on the normal state of the button. Now to create the over state of it, we will simply duplicate the inner layer and set its blending mode to overlay.
We are almost done right now. Here’s how it should look in a navigation bar:
All that is left is to add some text and we are done!
We’re done! I hope you will find a good use of this technique and that you enjoyed this tutorial. Make sure to come back and check out the new tutorials from Photoshop Xtreme Tutorials!
