Tutorial: Create High-Quality Glossy E-commerce Website Buttons. Part 2.

In Part 1, we looked at setting up the Photoshop document and creating the first button. In Part 2, we’ll look at duplicating and modifying this button, for other functions.

1. Open the previously created Photoshop document, containing the single button created in part 1.
   

   The finished button design from Part 1

2. Create 4 new horizontal guides, 40 pixels vertically down from the top at 40px, 80px, 120px and 160px. Move your first button 1pixel down and one pixel in from the top left corner, leaving a single pixel of white space above and to the left of the button. Tip: zoom in for fine-positioning.
   
3. Create a New Group, named “OFF”. Add the first button’s group to it, renaming the first button group to “ADD TO BASKET“.
   Tip: putting group names in block-caps makes selecting them easier.
4. Duplicate the ADD TO BASKET group, and name it with the next button’s name: “CONTINUE SHOPPING”.
   Tip: Use Layer – Duplicate Group (CTRL-ALT-J) to duplicate, you will be prompted for the new group’s name.
5. Nudge this new group down by 40 pixels. Tip: Press V to bring up the Move Tool, then SHIFT-Click on the down arrow key 4 times.
6. Repeat steps 4 and 5 for the names: “CONTINUE SHOPPING”, “PROCEED TO CHECKOUT”, “UPDATE QUANTITIES” and “BEGIN SECURE PAYMENT”.
7. Using the Type Tool, click on the text in each of the buttons, and set the text to read the same as the group names. Use a bold font variant for the words CONTINUE, PROCEED, UPDATE and SECURE. The text won’t all fit in the boxes, we’ll fix that later.
   

   Don't worry if the text disappears from the right hand edge of the buttons, we'll fix that in a moment.

8. Enlarging the buttons to the correct size. With the Direct Selection Tool (A), click in the lower half of the button you wish to alter. The outer path of the button will appear, and it’s layer will automatically be selected. Shift-Click on the three drag handles on the right hand edge of the button to select all of them.
   

   Shift-Click where shown

9. Nudge these points right, using the right-hand arrow key, until all the text is visible, and approximately 10 pixels of margin is left. Count the number of nudges/shift nudges. I’ve used 30 (3 shift nudges). We need to repeat this number of nudges for the highlight layer.
   

   Notice the highlight layer has been left behind. We'll fix that next.

10. From the Layers Palette, select the button’s highlight layer. Click near the top of it with the Direct Selection Tool to edit it, then Shift-Click on the three right-hand drag points shown below:
    
11. Nudge these 3 points right by the same amount as the button’s edge (30 px). The highlight should now align with the edge of the button.
12. Repeat steps 8,9,10 and 11 for the remaining buttons:
    
13. Changing the button symbols and positions. It seems more appropriate for the “PROCEED TO CHECKOUT” and “BEGIN SECURE PAYMENT” buttons to have it’s action zone on the right, as it indicates moving forward. For these two buttons, select the “Green Action Zone” layer and move it to the right-hand side, as shown.
    
14. Nudge the text back over to the left, and remove the + sign.
    
15. Set foreground colour to white, and sing the Polygon Shape Tool, set Sides to 3 and create a small triangle.
    Tip: Hold down the shift key to constrain it’s angle whilst creating it. You’ll have to create it pointing down at first, then rotate the resulting shape so that the triangle points right.
    
16. Repeat steps 13, 14 and 15 for the “BEGIN SECURE PAYMENT” button.
17. For the “CONTINUE SHOPPING” Button, change the colour of the green overlay to red (double click on the shape layer, and change the hue value to 0). Remove the + sign, and add a triangle, this time, pointing left.
    

    The buttons are nearly finished.

18. The “UPDATE QUANTITIES” button requires another symbol. Remove the + sign and select the font Windings 3. Type a capital “P” which should give a rotating arrow. Rotate this 45° clockwise into the position shown.
    

Update: here’s the .psd file, to download, of where we’ve got to so far: buttons.psd

The main buttons are now complete. In Part 3, we’ll look at simple rollover effects, and creating CSS entries for displaying the buttons and rollovers.