Web Domination Using Photoshop

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 below.

Rounded tab button

Solution

1. Start with a rounded rectangle vector shape, as shown below.

Rounded rectangle shape

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

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

4. Delete the anchor points by pressing Backspace or Delete on the keyboard. Your image should now resemble the one shown here.

Image: roundedtab-deletepts.psd
Caption: Deleting the two points

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

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

Completed rounded tab button

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?

Example of a file folder tab button

Solution

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

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 below).

3. Position the cursor as shown in step 3 at right. 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.

Step-by-step file folder tab

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 above and the graphic below).

Completed file tab button

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 this chapter, 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 to you later, when you're creating full web site comps. There's a lot more fun to be had in the next chapter -- let's bring on those backgrounds!

Unfortunately, that's it for the sample chapters from The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques. Don't forget to download your copy of this article -- plus the book's introductory chapter -- in PDF format to read offline, and be sure to take a look at what else you'll learn in this book. I hope you enjoyed this tour of Photoshop techniques -- I'm sure they'll prove invaluable in your quest for Web domination!