Graphic blog, Webdesigns tip&tricks, Photoshop tutorials

In this tutorial I`m going to show you how to design a big good-looking button in Photoshop ready to link to the PSD file of this tutorial. Along the way, we`ll be using different Photoshop tools to create shapes and text and will beautify them by applying some blending options carefully chosen. Let`s begin!

What we`ll be doing today:

Materials Needed:

Wood Texture

Download Icon

Step 1: Open the Wood Texture with Photoshop

The first step is to download the wood texture and to open it with Photoshop. The image is 1024×768px and will be the background of our project.

Step 2: Building the Button Background

The button I have in mind is composed of 2 parts: the background of the button which will be like a transparent surface and the main button. For the main button, we`ll use a very nice green gradient which perfectly connects with the wood texture.

Select the Rounded Rectangle Tool(U) and with a radius of 40px draw a white shape of 360×80px. This will be an awesome big button!

We`re going to stylize the shape by adding an inner-shadow, a stroke and reducing the opacity of the shape to 25%. So, double click the shape`s layer and add the next blending options:

The first half of the button looks like this:

Step 2: Building the Main Button

This step is all about the second half of the button. Select again the Rounded Rectangle Tool(U) and with a radius of 30px draw a shape of 340×60px and place it in the center of the first shape so that between the middle shape and button`s background to be a margin of 10px. The effect created will be great.

Beautify the layer by adding the next blending options:

Applying the blending options above, you should obtain the second half of the button:

Final Touches

This is the last step. We`re gonna add some final touches. We`ll begin with the download icon, so download the icon from the “Materials Needed” from the beginning of the tutorial. Add it to the project but resize it from 36×36px to 24×24px to integrate well with the button. To resize an element in Photoshop, press Ctrl+T or just go to Edit->Transform->Scale.

The button needs some text and I think that a sentence like “Download this tutorial” fits very well. For your information, the font I used is the free Museo 500, an elegant and very popular font.

The result:

With these final touches, our button is done.

If you have any questions or just want to share with us your button, don`t hesitate to leave us a comment in the comments section. Till then, take a look at what we`ve done today!

Related posts:

1. How to do a glossy and animated jQuery button 1/2 Photoshop part
2. How to Design a Clean and Simple Search Form in Photoshop
3. How to Design a Sleek Progress Bar in Photoshop
4. How to Design a Clean and Fancy Chat App in Photoshop
5. How to create a clean and design portfolio layout using Photoshop