Buttons are nearly everywhere you look on the web, found on menus, contact forms and product pages just to name a few uses. A good looking buttons is always a winner but it can be hard to create and find the right style of button for your new project, or maybe you can make a nice button but struggle when implementing the text.
Today we will run through a nice, short tutorial on how to create a neat little button for your future projects.
Outcome
Step 1
Use your rectangle tool to create a 105px by 35px rectangle, using your preferred colour. For this tutorial I will use #d12f24.
Step 2
Right click on the layer containing your button and select “Blending Options” from the layer menu.
Apply the following settings to the drop shadow style:
Then select “Inner Shadow” from the left hand menu and apply the following settings:
Next up, select “Bevel and Emboss” from the left hand side menu and apply the following settings:
Now select “Color Overlay” and apply the following settings using # 1c1b1c as the overlay color:
Next select “Stroke” and apply the following settings, using #cf2618 as the stroke color:
Click on “Ok” to save your changes.
You should now have a button looking similar to the following:
Step 3
Now we will add some noise to the button. Create a new layer and select it. Now hold down “Ctrl” and right click on your original button layer to select it:
Now on your newly created layer fill the selection with the original color of the button, in this case we used #d12f24.
Make sure your new layer is selected and click on “Filter” on the menu bar > Then hover over “Noise” from the drop down and finally click “Add Noise” from the following side menu.
Apply the following noise settings:
Click on “Ok” to save your changes.
Your button should now look like this:
Change the opacity of the noise layer to 15%. Your result should be the same as below:
Step 4
So that it all the work required for the base of the button, now we can move on to creating some text for it.
Create a new layer and select your “Type” tool. Make a selection above the button and change your text color too #ffffff before typing in your text.
Your button should look like the following:
Step 5
Right click on your text layer and select “Blending Options”.
Select “Drop Shadow” from the left hand menu and apply the following settings:
Click on “Ok” to save your changes.
That is all you need to complete in order to make this clean little button.
Your final button should look like the below:
Hopefully this tutorial helped to add another nice button to your arsenal, and maybe you can find a use for it in your next project. Keep an eye out on E2C graphic design blog for more tutorials.
Get the .PSD files for this tutorial here
Comments
[...] How to create a neat little button [...]
[...] released a quick little tutorial on how to make a neat little button for use in web design, as seen here. I got messaged over at Twitter if I could also release the .PSD file for the tutorial, so here it [...]
[...] How to create a neat little button [...]
[...] Detail: here [...]
