Web Domination Using Photoshop

Making a Pearl Button

Here's a solution that uses real magic ... well, almost!

We're going to take the glassy button we created in "Making a Glass Button" and turn it into a pearl button!

Example of a pearl button

Solution

1. Start with the glassy button you created in the solution titled "Making a Glass Button." Change the fill of the button layer to 100%, as shown at right, and use a very light, "pearly" color for the shape. I've used #fae1f9 for my pink, pearly button.

Changing the fill color

2. Enhance the three-dimensional effect of the button by adding a slight inner glow. Double-click on the f icon for the layer to bring up the Layer Style dialog box, shown below. Select Inner Glow and change the Blend Mode to Normal and the Opacity to 10%. Increase the Size if you need to.

Adding an Inner Glow effect

3. We'll also make the drop shadow a bit more subtle. Select Drop Shadow and decrease the shadow size to 3px or 4px.

4. Finally, add your text layer. Here we see our final button -- all done!

Completed pearl button

Making Angled Tab Buttons

In this solution, I'll show you how to use vector graphic tools to create the angled tab buttons illustrated below.

Examples of angled tab buttons

Solution

Angled Tab

1. Start with a rectangular vector shape in a color of your choice. I've used a light blue in the image below.

Starting with a rectangular button

2. Using the Direct Selection Tool (A), select the top left-hand anchor point of the rectangle. Hold down the Shift key and move the point to the right by pressing the right arrow once or twice. Your image should look something like the one below.

Moving the anchor point

Release the Shift key and use the arrow keys to fine-tune the point. We'll go "old school" here and count the number of times we press the arrow key so that we know how far to move the point on the right-hand side when we get to it.

3. Repeat step 2 for the top, right-hand anchor point. That's it -- believe it or not, our angled tab button is complete! If you don't believe me, look at the finished result below.

Completed angle button

Cut-corner Tab

1. This time, we'll make a tab button with a cut corner. Again, start with a rectangular vector shape. Select the Add Anchor Point Tool -- you'll find this in the flyout menu of the Pen Tool (P), shown here.

Selecting the Add Anchor Point Tool

2. Add an anchor point to the side of the button as I've done in the example below (you might need to zoom in).

Adding a point to the button

3. Choose the Convert Point Tool, which is also in the flyout menu of the Pen Tool (P).

Selecting the Convert Point Tool

4. Click once on the new anchor point to get rid of the direction handlebars, as shown below.

Converting the anchor point

5. Using the Direct Selection Tool (A), click on the top corner anchor point and use the arrow keys to move the anchor point across to form a "cut corner", as illustrated below.

Moving the anchor point

6. If you like, repeat the effect on the other side; otherwise, take a moment to marvel at our cut-corner tab, shown here.

Completed cut-corner tab