Creating a Web Button

Photoshop’s Selection tools, as shown in figure below allow you to manipulate images. This might involve moving an image around the image window or cutting out a part of some larger image to use in your website. Table below defines Photoshop’s Selection tools. You’ll learn more about these tools in this and the next couple of tutorials.

Understanding Photoshop’s Selection tools 

Selection Tool	Definition
Marquee tools	These tools allow you to grab or create square or circular selections, selections of a single row of pixels, and selections of a single column of pixels. To select any of the Marquee tools not displayed, click and hold on the right-facing arrow at the lower-right side of the Marquee tools icon. A submenu displays, allowing you to select any Marquee tools you wish.
Lasso tools	These tools allow you to create irregularly shaped selections. Although some Photoshop users like these tools, I find them difficult and unnatural to use. I prefer the Pen tool to the Lasso tools. The Pen tool, by the way, is one of the most important tools you can master within Photoshop. Learn to use the Pen tool, and you’ll find there’s nothing you can’t do with Photoshop.
Crop tool	This tool allows you to cut out (crop) a piece of an image. It is useful for quickly removing extra areas of an image you don’t want to use. Unfortunately, the Crop tool only allows you to crop using rectangular or square shapes. To crop an area that is not a rectangular or square shape, you’ll need to use the Marquee tools, the Lasso tools, or my favorite - the Pen tools.
Move tool	You’ve explored this tool in previous tutorials. The Move tool allows you to move an image around the image window. To use this tool, you must first select the layer that contains the image you want to move. With the proper layer selected, you can then select the Move tool and move any images on that layer around.
Magic Wand tool	The Magic Wand tool may have you thinking of The Lord of the Rings or Harry Potter. But no — this tool won’t give you the power to fight mountain trolls or werewolves. The Magic Wand tool works differently from other Selection tools. Rather than drawing a selection path yourself, you simply click the Magic Wand in the area you wish to select. Photoshop then creates (as if by magic) the selection for you. Photoshop creates the selection based on related colors. The Magic Wand’s OK, but again… I guess I’m biased toward the Pen tool. It provides the best results.
Slice tool	The Slice tool allows you to “cut up” your images for your web page.
Painting tools (in Quick Mask mode)	Photoshop allows you to use the Painting tools to create selections in the Quick Mask mode. The Quick Mask mode allows you to make a selection by painting over the area you wish to select.
Pen tools	The Pen tools can do nearly everything. You can use them to draw any shape from a circle to a strange silhouette of a one-eyed one-eared flying purple people eater. The Pen tools also allow you to make selections of any shape or size. The Pen tools are mightier than the sword. They’re also mightier than the Lasso tools, I think.

Creating Shapes with the Marquee Tools

The Marquee tools, shown in figure below, allow you to make rectangular or circular selections. The four Marquee tools are:

• 
  
  Rectangular Marquee tool
• 
  
  Elliptical Marquee tool
• 
  
  Single Row Marquee tool
• 
  
  Single Column Marquee tool

Follow these steps to create a circle:

1. 
   
   Select the Elliptical Marquee tool.
2. 
   
   Select the Circle layer.
3. 
   
   Hold down the Shift key, then click and drag to create a perfect circle, as shown in figure below.

Photoshop represents selections with a moving dotted line…it almost looks like ants marching around your selection.

Tip

Holding down the Shift key while you create a selection will result in a perfect square or circle (rather than a rectangle or oval). Holding down the Alt key while you create a selection will result in a shape drawn from a center point (the point where you click is the center point). You can also hold down the Shift and Alt keys together to create a perfect square or circle from a center point.

Selecting Colors with the Toolbox

You changed the color of your images in the Layer Style dialog box. That’s a great method to use if the image is already created (for example, you’ve already created the pen shape, and want to go back and give it a different color).

However, in this tutorial, we’re still in the beginning stages of creating a shape (your web button). Say you want to make your web button the blue color you used in Jonathan Bing’s logo.

You have two choices. You can create your shape, access the Layer Style dialog box, and change the Color Overlay (as you did in the last tutorial). Or you can use the toolbox and fill the shape from the start with that blue color. Let’s try this second scenario.

1. 
   
   Double-click the Foreground Color square on the toolbox. The Color Picker displays.
2. 
   
   In the Color Picker dialog box, change the RGB colors to the blue color in which you originally typed Jonathan Bing’s name, as shown in figure below. 
   
3. 
   
   Click OK on the Color Picker dialog box.
4. Select the Paint Bucket tool from the toolbox. With this tool selected, click into your circle selection. It should now fill with your blue color. This circle will act as the rounded edge of your web button.
   
   

   Note

   The Paint Bucket tool is the sixth tool on the right side of the toolbox.

Creating a Selection from an Image

You’ve just learned to make a shape using the Marquee tools. Let’s now create our first selection from an existing shape. Here’s a trick on extending your circle into a button by using selections. This exercise will help you understand how selections work.

1. 
   
   Make sure you’re still in the Circle layer. Press Ctrl+D to deselect the circle.
2. 
   
   From the toolbox, select the Single Marquee Column tool from the Marquee tools. Select the Add to Selection icon in the options bar. We need to do this because we want to add another selection to the circle you just created.
3. 
   
   Zoom in if necessary (by pressing Ctrl+). With the Single Column Marquee tool selected, move your cursor above and outside the blue circle, and press the left mouse button. A single rectangle line displays, as shown in figure below.
   
   You can now select a single column of pixels.
4. 
   
   Click the Move tool on the toolbox. Then, hold down the Shift key and press the Left Arrow key (on your keyboard) two times. Notice that you’ve isolated (selected) a portion of your image and moved it, as shown in figure below.
   
   
   
5. 
   
   Use Ctrl+Alt+Z to undo the moving of your single column of pixels. Hit Ctrl+Alt+Z until your image window looks like previous figure.
6. 
   
   With this one-pixel column selected, press Ctrl+T (or select Edit ▶Free Transform) from the menu bar.
7. 
   
   Hover your cursor over the single column selection until it turns into a double-headed arrow. Then click and drag the selection all the way to the left of your image window, as shown in figure below.
   
   
   
8. 
   
   Press the Enter key to apply the Free Transform changes. Then press Ctrl+D (or choose Select ▶Deselect from the menu bar) to deselect your image. You’ve now got a nifty button shape with which to begin working.

Adding Blending Effects

Give your button some of the cool blending effects you learned in the last tutorial. For example, try the following:

1. 
   
   Add a Drop Shadow effect.
2. Add a Bevel and Emboss effect.
   

Your button should look like figure below.

Adding Text to Your Web Button

Let’s add some text to this web button.

1. 
   
   Select the Text tool from the toolbox.
2. 
   
   Select Window ▶Character. The Character palette displays. In the Character palette, change the following:
   • 
     
     Set the Font Family drop-down field to Palatino Linotype.
   • 
     
     Set the Font Style drop-down field to Bold Italic.
   • 
     
     Set the Font Size to 10 pt.
   • 
     
     Change the Tracking (letter spacing) to 200.
   • 
     
     Change the anti-aliasing method to Sharp.
   • 
     
     Change the text color to white. If you double-click the text color box, the Color Picker dialog box displays. Type 255, 255, 255 in the RGB boxes.
   Press OK.

   Note

   You can also access the text options within the options bar (which resides directly below the menu bar).

3. 
   
   Now type the word HOME in all capital letters.
4. 
   
   Once you’ve done this, drag your Text tool cursor over just the letter H to highlight it. Then, return to the Character palette and make the letter H two points larger by selecting 20 pt in the Font Size drop-down field.
5. 
   
   Add a Bevel and Emboss blending option to the HOME text.
6. 
   
   Finally, center the text as needed using the Move tool. Your button should look like figure below. 
   
   
   

In this tutorial:

1. Creating Shapes with Selections
2. Style Requirements for Web Buttons
3. Creating a Web Button
4. Adding Using Preset Styles with Your  Web Button
5. Defining a Web Button (for a Rollover Effect)