Exploring the Pen Tool

Many people can’t stand Photoshop’s Pen tool when they’re first learning to use it. The Pen tool seems awkward and complex at first. You’ll scream and say “this thing’s impossible to use,” and wonder why there’s such a large section dedicated to this tool. But stick with it; you’ll get the hang of it. And then you’ll wonder how you ever got along without it. It’s like learning to ride a bike. Unfortunately, Photoshop doesn’t provide us with any training wheels. You’ve just got to jump in headfirst.

Note 

Don’t worry if you can’t even draw stick people, or you don’t know the difference between van Gogh and Van Damme. You don’t have to be an artist to create incredible works of art with Photoshop. In fact, that’s part of the program’s popularity. You can express yourself creatively without having to worry about artistic technique. Photoshop’s tools (such as the Pen tool) take care of that for you.

Fire up Photoshop and create a new image. Make your image the following size:

• Width: 775 pixels

• Height: 420 pixels

• Resolution: 72 pixels/inch

• Color Mode: RGB Color 8 bit

• Background Contents: Transparent

Now, select the Pen tool from the toolbox, as shown in Figure 6-1. Click on the arrow to open a list of Pen tools.

Figure 6-1: Viewing the Pen tools from the toolbox

Select the Pen tool and hover it over the blank image window you created. You’ll notice the cursor turns into a pen tip.

Before we start creating some masterpieces, let’s take a look at the options available with the Pen tool, as displayed in Figure 6-2. These options are available from the options bar.

Figure 6-2: Exploring options of the Pen tool

Tip 

These options are also available with the Shape tools. These tools rest directly to the right of the Pen tools on the toolbox.

The following list summarizes these options:

• Shapes: This option allows you to create shapes with the Pen tool. Shapes fill with whatever color you select in the Color Picker. You’ll create shapes with the Pen tool in this chapter to create a web header.

• Paths: This option allows you to create paths with the Pen tool. Paths are similar to shapes, except they’re not filled with the currently selected color from the Color Picker.

• Fill Pixels: This option (only available with the Vector Shape tool) fills your shape with the color currently selected in the Foreground color box.

• Pen Tool: There are a couple choices of Pen tools you can use. This first Pen tool option represents the Standard Pen tool. You’ll probably find yourself using the Standard Pen tool the most.

• Freeform Pen Tool: This option allows you to draw freehand. You can also choose to make the Pen tool magnetic, which works similar to the Magnetic Lasso tool (explored in Chapter 5).

• Shapes: The Shapes options allow you to pick common shapes: rectangles, rounded rectangles, ellipses, polygons, lines, and custom shapes.

• Shape Options: Some of the shapes have options (for example, with the line shape you can add arrowheads). Select a shape, and then choose the Shape Options drop-down arrow.

• Option Selector: This option changes depending on the shape tool you’ve chosen. For example, if you select the Polygon shape, the Option Selector allows you to define the number of sides the shape has.

• Shape Area Options: These options are similar to the selection options you explored in the last chapter. These options allow you to create strange and irregular shapes. They include Create New Shapes, Add to Shape Area, Subtract from Shape Area, Intersect from Shape Area, and Exclude Overlapping Shape Area.

• Set/Change Properties: This option allows you to lock or unlock the layer of your shape. Locking this layer ensures that you cannot make changes to any of its properties (such as adding a bevel and emboss effect).

• Layer Style: This option allows you to add a style to your shape (like you did in Chapter 4).

• Color: This option brings up the Color Picker dialog box, which allows you to change the color of your shape.

Now that you’re familiar with the options of the Pen tool, let’s try drawing with it to create a web header.

Creating Curved Lines with the Pen Tool

Select the Pen tool. In the options bar, make sure you’ve selected the Paths option.

Tip 

I think it’s easier to start with paths when using the Pen tool, even if you’re using it to create shapes. When using the Pen tool with the Shapes layer selected, you’ll find that Photoshop begins to color in your image. Sometimes, this is distracting (especially if it seems Photoshop is filling in the color on the wrong side of your drawing lines).
Start with paths. You can make them shapes and fill them in later, as you’ll do in this chapter.

You’re now ready to begin. Perform the following:

1. Access the 775x420 blank image window you just created. This is the size of the web page you’ll design. Set your background to Transparent.

   Tip 

   We’re designing a header for an 800x600 web page, which is the most frequent screen size we Figure visitors to the site will use. If you design for a larger page (say, 1024x768), your 800x600 visitors will find themselves scrolling horizontally to view your web page.
   The 775x420 size leaves room for the web browser (such as Microsoft Explorer).

2. Select the Pen tool. Click on an area outside the image, as shown in Figure 6-3.

   
   Figure 6-3: Creating a point with the Pen tool

3. Click and hold another point somewhere within the image. Then, drag your mouse up and to the right. Notice that the line begins to bend. The second point you created becomes an anchor point.

   A line forms that extends from the anchor point. This is a direction line that helps you define the curvature of the line. Release the mouse button when you’re pleased with the shape of your line. Figure 6-4 displays some of these elements.

   
   Figure 6-4: Creating a curve with the Pen tool

   Note 

   Learning how to maneuver this direction line is tricky at first. Don’t give up, though. Keep at it. Eventually, it’ll just click and you’ll find yourself using it to create all kinds of irregular shapes without even thinking about it.

4. Hold the Alt key on you keyboard and click the filled-in anchor point (which is a dark colored square). This is where your line will continue. Click and release another point to make the next curve, as shown in Figure 6-5.

   
   Figure 6-5: Continuing a path with the Pen tool

It’s cool to use curved shapes in web pages. You’ll see many web pages with a straight-edged, square look. Straight columns. Straight tables. Using some curves helps the images on your web page pop!

However, this isn’t to say everything on your web page should be organic. Let’s look at creating some straight lines with the Pen tool as well.

Creating Straight Lines with the Pen Tool

An easy way to create straight lines with the Pen tool is to hold the Shift key as you click your points. Continuing from the last anchor point, perform the following:

1. Hold down the Shift key. Then click anywhere to the right of the last anchor point, even somewhere off the image window.

   Notice that Photoshop creates a straight line between the two points, as shown in Figure 6-6.

   
   Figure 6-6: Creating straight lines with the Pen tool

2. Continue working your way around the image window. Don’t worry about the shapes outside the image window. They won’t display.

Work your way around the image window until you’re back where you started. Click the anchor point you started with. The anchor points disappear, and you’re left with a path, as shown in Figure 6-7.

Figure 6-7: Closing your path

Congratulations! You’ve created your first Photoshop path. Don’t worry if it’s not perfect. Drawing paths is about getting a rough version onto your screen. From there, you can then tweak and fine-tune using the Path Selection tools.