Making a Rounded Tab Button

The basic rounded rectangle button is very versatile. Here, we're going to convert it into the popular rounded tab button like the one shown here.

Solution

1. Start with a rounded rectangle vector shape, as shown below.
   Rounded rectangle shape (click to view image)

   
   

2. Select the Convert Point Tool, which is in the flyout menu for the Pen Tool (P). Click once on each of the two anchor points, as shown below, to convert them from curve points to angle points.
   Converting the anchor points (click to view image)
   
   
3. Use the Direct Selection Tool (A) to make a selection around the two bottom-most anchor points on the shape. To indicate that they have been selected, the points will turn from white squares to filled squares, as shown here.
   Selecting the bottom two anchor points (click to view image)
   
   
4. Delete the anchor points by pressing Backspace or Delete on the keyboard. Your image should now resemble the one shown below.
   Deleting the two points (click to view image)
   
   
5. With the Pen Tool (P), click first on the bottom anchor point on the left-hand side, and then on the point on the right-hand side, as shown below.
   Closing the shape (click to view image)

   This will draw a line connecting the two points and complete the shape, which is shown below.

   Completed rounded tab button (click to view image)

Making a File Folder Tab Button

In this solution, you'll learn how to create a nice file folder tab, shaped much like those real folder tabs used in filing cabinets. Remember those old-fashioned things?

Solution

1. Using the Pen Tool (P), click once to add an anchor point to your Photoshop document (step 1 in the image above.)


2. Position the cursor over the anchor point. Hold down Shift and Alt (Shift and Option on a Mac), click on the point, and drag the mouse towards the right to create a single horizontal handlebar (step 2 above).


3. Position the cursor as shown in step 3. Click and drag the mouse towards the right to add another anchor point. The line connecting the two points should display a nice curve, thanks to the positions of our control handles.


4. Holding down Shift, click and drag the mouse to the right of the last point we made in order to create another anchor point with horizontal control handles. Press Shift to ensure that the two points are aligned horizontally (step 4 above).


5. Move the cursor a bit lower and to the right so that it's aligned horizontally with our first anchor point (step 5). Click to add another anchor point and drag the handlebars out to the right.


6. Bring the cursor back over the last point we made. Hold down Alt (Option) and click to remove the right handlebar (step 6).


7. Bring the cursor back to our very first point and click on it to complete the shape (see step 7, and the graphic below).
   Completed file tab button (click to view image)

   Don't worry if your alignment's not perfect -- you can use the Direct Selection Tool (A) to select individual points, and the arrow keys to fine-tune them.

Summary

In the two instalments of this article, I showed you how to make all sorts of buttons! Beyond the obvious navigation buttons, the techniques you've learned here will allow you to make nifty bullet graphics and fancy title bars. For example, you could apply the plastic button effect to a longer rectangle that forms part of your interface, or use it as a bar for text links. You could also use the shiny metal button effect to create shiny metal bullets; you've got a gazillion options!

The experience you've gained with layer styles and vector shapes in this chapter will be invaluable when you're creating full web site comps. More, much more, on other elements of beautiful web site design can be found in the rest of my book, The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques. Don't forget to download your copy, courtesy of 99designs, before the opportunity is over!