In this very easy Photoshop tutorial, I’m going to be teaching you how to design a simple and stylish ‘green search button.’
1. New Document / Settings
Firstly, create a new document in Photoshop. For this tutorial, designing a button for the web, I used a relatively small document size of 400 x 120 pixels. Use all of the default settings, such as 72 DPI/Resolution.
After creating your new document, create a new layer (Layer > New > Layer…) call this layer ‘base’ if you like, since it will be the base of our button.
2. Button Shape
This is rather an easy part, all you have to do is get out the Rounded Rectangle Tool and make your button shape. But to make sure I’ve included all of my settings, etc. below.
Be sure you’ve set up your tool as shown above, then draw a little button on your canvas, note that the color you use for your shape doesn’t matter.
3. Apply Effects / Layer Styles
Time to style our button. Right-click your ‘base’ layer in the layer’s palette then go into the Blending Options. Apply the following layer styles:
The colors I used for my gradients in the Gradient Overlay and Stroke layer styles were: #e1e817 and #88a707. Note: if you had any trouble following the layer styles, you’ll be able to download the PSD file from this tutorial at the end anyway, so don’t fret!
This is what our button is looking like now:
Looking good now, hey? You may want to mess around with the layer style settings a little bit, to get a more interesting effect of your own liking.
4. Adding Text
This is a very short step actually, all you have to do is add some text to your button then add a simple Drop Shadow layer style. Start by getting out your Horizontal Type Tool (just the regular type tool) and writing out ‘Home’ on your button.
In the above image I’ve used Arial as my font of choice, and a size of 12 pt.
After you’ve written out your text in white, you may want to add a simple Drop Shadow to the text to make it stand out a little bit more against the button. Your choice though!
5. Taking it further
There’s not much more we can do, but I duplicated my button and changed the colors to red, this could be used as another button or a rollover for the first button, remember to be creative!
Thank you for visiting PhotoshopStar and reading this tutorial, I hope you enjoyed it. It really was just a simple tutorial, hopefully it can teach the new Photoshop users how to make shapes using the shape tools, and how to apply layer styles.
