More often than not, an image fresh out of the camera or off the Internet needs a little editing before it’s ready for your Web page layout. For one reason, it’s probably not the right size, and second, it may contain some imperfections, need to be cropped, combined with another image or graphi-cal element, or be in need of some embellishments.
The best tool on the market for editing bitmap images is Adobe Photoshop.
Photoshop offers extensive control over every aspect of your image. The
problem, however, is that Photoshop is a very deep program. You may need a long time to figure out all of its power. For more information on Photoshop, take a look at Photoshop CS2 For Dummiesby Peter Bauer or Photoshop CS2 All-in-One Desk Reference For Dummies by Barbara Obermeier.
In these next few steps, you scratch the surface of Photoshop’s capabilities and discover some basic editing techniques, such as cropping, adjusting the exposure, resizing, and adding a soft, feathered edge:
1. Launch Photoshop.
2. Choose File➪Open.
Locate a photograph to work with. Choose a photo that needs cropping and a little work on the exposure.
3. Crop the image.
Choose the Marquee tool in the toolbox and draw a box around the por-tion of the image that you want to keep, as shown in Figure 10-12. If you mess up, you can click once outside the selected area and start again.
When you’re satisfied with the selection, choose Image➪Crop.
Figure 10-12: Make a selection around the area you want to keep.
4. Adjust the contrast.
To enhance the contrast of this photo, choose Image➪Adjustments➪
Levels. The Levels interface in Figure 10-13 shows the balance of lights and darks in your image. To increase the dark areas, drag the left trian-gle toward the center. To increase the light areas, drag the right triantrian-gle toward the center. Your image updates as you drag the sliders, so you can see the effects of your actions. Click OK.
Figure 10-13: The Levels interface shows a visual diagram of your image’s lights and darks.
5. Adjust the color.
You can use one of several tools in Photoshop to adjust the color balance of an image. For this example, I use the Hue/Saturation tool shown in Figure 10-14 to make the image monotone. Choose Image➪Adjustments➪
Hue/Saturation. To make an image monotone, check the Colorize option in the lower-right corner. The image becomes several shades of one color, such as purple, but you can change the color scheme by moving the Hue slider.
6. Resize the image.
To resize the image, first choose Select➪All and then choose Edit➪Free Transform. Handles appear at the corners of the image. Press and hold Shift (to retain proportions) and drag one of the corner handles inward Drag this triangle inward
to increase dark areas.
Drag this triangle inward to increase light areas.
to shrink the image. When you reach the size you want, press Enter to shrink the image. Note that this technique resizes just the image, not the document. To resize the entire document, you would choose Image➪
Image Size.
Figure 10-14: Use the Hue/Saturation tool to make an image monotone and shift the color scheme of an image.
You can also use the Free Transform tool to rotate your image. If you place your cursor just outside the corner handle, you see a curved two-way arrow. Click and drag to rotate.
7. Add a feathered edge.
To turn this image into an oval shape with a soft feathered edge, use the Elliptical Marquee tool. The Elliptical Marquee tool is hidden behind the square Marquee tool on the toolbar as shown in Figure 10-15. To access it, click and hold the square Marquee tool, and then select the Elliptical Marquee tool from the pop-up menu that appears.
Start drawing an oval-shaped selection in the middle of the image. Press and hold Alt or Shift to make a perfect circle. After you draw the selection, you can reposition it to make sure that it encompasses the correct part of your image. Simply click and drag anywhere inside the selection to move it.
Figure 10-15: The Ellipse selection tool.
To soften the edges, choose Select➪Feather. In the Feather Selection dialog box, enter a Feather radius of 10 pixels and click OK. When you click OK, you won’t notice any change in your selection, but believe me, it’s feathered.
8. Lift the image onto its own layer.
To see the effects of your feathered edge, lift the image onto its own transparent layer. While the feath-ered selection is still active, press Ô+J or Ctrl+J, or choose Layer➪
New➪Layer via Copy from the menu.
In the Layers palette, you now have two layers (Layer 1 and Background), as shown in Figure 10-16. (If you don’t see the Layers palette open, choose Window➪Layers.)
Hide your original Background layer by clicking once on the eye icon in the Layers palette. Now you can see the effects of your feathered edge as in Figure 10-17. The checker-board background is an indication of transparency.
9. Add the finishing touches.
To polish up this image, replace the original image in the Background layer with a solid color. In the Layers palette, click the Background layer to make it active, and make sure the eye icon appears.
Choose a new foreground color by clicking once on the top-most color swatch in the toolbar (you see two swatches stacked on top of each other — the top one is for selecting the foreground color, and the bottom one is for selecting the background color). When the Color Picker window opens, choose a new color and click OK. (Note that the Color Picker has a check box option to view only Web-safe colors.) To fill the Background layer with your new color, choose Edit➪Fill. Your back-ground now fills with the new color.
Voilà! You now have an image like Figure 10-18 ready to save for your Web site.
Click eye icon to turn layer visibility on and off
Figure 10-16: The Layers palette shows a copy with a soft feathered edge in the top layer.
Figure 10-17: In your document, you see a copy of your image with a soft edge.
Figure 10-18: The final result should look something like this.