Rounded Tab Button
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
- Start with a rounded rectangle vector shape, as shown below.
- 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.
- 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.
- Delete the anchor points by pressing Backspace or Delete on the keyboard. Your image should now resemble the one shown below.
- 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.
This will draw a line connecting the two points and complete the shape, which is shown below.
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
- Using the Pen Tool (P), click once to add an anchor point to your Photoshop document (step 1 in the image above.)
- 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).
- 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.
- 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).
- 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.
- Bring the cursor back over the last point we made. Hold down Alt (Option) and click to remove the right handlebar (step 6).
- Bring the cursor back to our very first point and click on it to complete the shape (see step 7, and the graphic below).
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!
