This new tutorial for Photoshop is appropriated to all types of designers wishing to learn a new easy method to create a modern and design button. In this tutorial, you are going to discover, step by step, how to create it and especially how to diversify it using different states: current button, active/inactive button, hover button, and more...
Become a VIP Member today and download these vectors and all other resources from the VIP area. For only $49 subscription, get access for one year, to whole ressources. Already a VIP Member ! then click on the download link to access the download area. Enjoy using it.
Find hereby the technical description of this tutorial:
- Level: Medium
- Software: Photoshop CS4
- Timing: 20 minutes
- Avalable files : .psd source et model HTML / CSS
- Final result:
STEP 1: Creating a new picture
Open your Photoshop software then go to the file menu: File>New and enter the name of the file, its width and its height. Press now on the OK button to validate the creation of this new picture.
STEP 2: Creating the guides
You have two different ways to create some guides, I explain both of them. These guides will help to easier create the base of your button. To create the first one of them on your document, go to the menu View> New guides, then select "horizontal" (to create a horizontal guide, vertical to create a vertical one).
Enter now its positions (in pixels) regarding the location you want to put it. In the present description, we want to create a guide to create the top of your first button that means you have to put it on the top of your picture. Press now OK button.
You can now discover that a guide has been automatically added to your document.
You can also create guides using the rulers. To display them, press
Ctrl/Cmd + R then click on the ruler of the left side and slide your
cursor on your document. This operation creates automatically a new
guide.
Help you using the Rectangular Marquee Tool (M) to create guides and to form a rectangle (35 X 180 pixels).
STEP 3: Creating the base of the rectangle
Select the Rounded Rectangle Tool (U), change the radius to 4 pixels (check the options toolbar, on the top of your screen). Set foreground color as black, and with help of the guides, create the base of your button.
Step 4: Some colours
Change the colour of the button by the blue #0480c8.
Add now some Layer styles: Drop shadow, Inner shadow, Gradient overlay, Stroke. Use the indicated configuration or download the PSD file including all layer styles.
STEP 5: Add some texts
To create texts, select Horizontal Type Tool (T) and type your text on the button, in our example Download PSD files. Add a drop shadow to this text, to do it, go to the menu Layer> Layer Style>Drop Shadow and set up as:
STEP 6: Icon creation 1/3
To create the Download Icon located on the right side of the button, select the Ellipse Tool (U).
Now, create a round on the right side of your rectangle (do not forget
to keep pushing the uppercase key, creating the round, this option
ensure to keep the symmetry of your round). Go now to the Layer Styles
to add Gradient overlay and a stroke
Follow this setup:
STEP 7: Icon creation 2/3
You have to create now a little arrow over the round, to do this, select the Custom Shape tool, then, in the picker, find the arrow (see picture below).
Now, create the arrow. Press on keys Ctrl/Cmd + T to activate the free transform and enter 90 as degrees for angle (in the toolbar) , see picture below.
STEP 8: Icon creation 3/3
To finish Icon now, create a selection around the arrow you have just created. (Ctrl/Cmd + Click on the thumbnail layer) then shadow the layer regarding the arrow (pressing on the eye located in front of the thumbnail layer, see in the layers window).
Select the layer Arrow, then go to menu Layer>Layer mask>Reveal all. A new Layer mask is automatically attached to the layer Arrow.
Be sure now, that your active selection is located in the center of the round, then go to menu Edit> Fill (foreground color has to be black)
STEP 9 : Separate line 1/2
Work now on the creation of the separate line, on the right of the title button. To start with it, zoom the right side of the button, then with Rectangular Marquee Tool (M), create a 1 pixel width line, on all height. (see picture below). Change the foreground color by the white.
Create a new layer (name it Separate1)*, use the Paint Bucket Tool (G) to fill your active selection. *to create a new layer, go to menu Layer> New> Layer.
To finish, change the Blending mode of this layer to overlay, and reduce its opacity to 20%.
STEP 10 : Separate line 2/2
I will not give details for this step which is similar, doing same things but in black.
STEP 11 : Ending the first button
You can now see the result of the first button
To make the next steps easier, group in a new group, all layers you have previously created. Go to menu Layer> New> Group and name it Button1. Put all layers into this new folder.
STEP 12 : Second button (hover effect)
For the hover effect, its creation is simple. Duplicate the group,
click right on the group, then select "Duplicate the group", rename this
copy as Button2. Go to Layer styles of the base of the button (of
course, do it in the copied group).
Add an overlay color using these options: Color white, Opacity 20%, Blending mode Normal.
Use the Move Tool (V) and the arrow of directions to move the button the bottom with a minimum of 50 pixels.
STEP 13 : Active Bouton
Duplicate one more time the first group and rename it Button3. Double click on the layer of the button base to open the window of Layers styles. Start to modify de gradient, then the stroke and the drop shadow. Follow the set below (see pictures).
STEP 14 : The disable button
Last step : it is regarding the grey disable button. Duplicate one more time the first group, then using the Movetool (V), put the copy on the top (over the first button). Rename the group Button0.
Double click on the layer of the base button to open the window of layers styles and to change the gradient, then the stroke and the drop shadow. Follow the set below (see pictures).
Reduce the opacity of the drop shadow of the text and Icon (20% for the both).
The button is now completly finished, see the final result below:
Of course, you can continue this tutorial Photoshop, changing the colors or changing the Icon located on the right to illustrate several actions. This tutorial will be put in a live situation in an Internet layout (will be soon published)
