In this Tutorial we are going to learn how to make buttons for the web site layout. Follow the steps as shown below: |
1) Start with creating a new document. I have created a 400 x 400 pixel document. Now you choose what sort of a button do you want to make a round, square, a rectangle shape or you can create your own new shape. Explore your imagination there is no hard and fast rule for creating a button. I have decided to create a rounded rectangle shape button for this tutorial. Select Rounded Rectangle Tool from tool palette as shown in figure 1 or just click CTRL + N to open a new document. |
|
| Figure 1. |
2) Now draw the image on the blank document as shown in figure 2. Once you have drawn your image don't forget to Rasterize the layer. Just right click on the layer and select "Rasterize Layer" from the drop down menu as shown in figure 2. |
 |
| Figure 2. |
3) Right click on the layer and click on Blending Options. When the "Layer Style" dialog box appears select "Drop Shadow" {Specifies the blending mode of a bevel or emboss highlight or shadow} from the list and make the necessary editing in the settings as shown in figure 3. |
 |
| Figure 3. |
4) Now select Inner Shadow {Specifies the blending mode of a bevel or emboss highlight or shadow } and make the necessary editing in the settings as shown in figure 4. |
 |
| Figure 4. |
5) Now select Inner Glow and make the necessary changes in the setting as shown in figure 5 . |
 |
| Figure 5. |
6) Once you have done with the Inner Glow let us select Bevel and Emboss and make necessary changes in the settings as shown in figure 6. |
 |
| Figure 6. |
7) Now choose Gradient Overlay option and make the necessary editing in the setting as shown in figure 7. |
 |
| Figure 7. |
8) Now select stroke and apply the setting as shown in figure 8. |
 |
| Figure 8. |
9) Once you have done everything as shown in the above steps the resultant image would be similar to the one shown in figure 9. |
 |
| Figure 9. |
10) Now might have seen similar sort of buttons on a lot of websites, let's make this button a bit different. We will give some more effects to this button. Let's put some dew drop effect on this button. So what are you waiting for, select Texture from Bevel and Emboss and apply the setting as shown in figure 10. |
 |
| Figure 10. |
11) Now set the scale to 1% and depth to +1000 % in Elements tab as shown in figure 11. |
 |
| Figure 11. |
12) The resultant image would be as shown in figure 12. |
 |
| Figure 12. |
13) Now you can choose the TEXT you want to type and your button is ready as shown in figure 13 . |
 |
| Figure 13 |
discuss this topic to forum
