The Web Warrior Guide to Web Design Technologies

The Web Warrior Guide to Web Design Technologies Chapter 5 Photoshop and ImageReady: Part I

Objectives In this chapter, you will: • Create images • Edit images • Save and optimize images

Creating Images • If you have ever used a painting program (such as Paint, which comes with the Windows operating system), you will be familiar with the idea of creating computer images • Photoshop lets you do far more than just paint, however • It also includes tools for • advanced techniques • filters for applying effects across the entire image • layers that allow you to manipulate discrete parts of an image • vector-based tools

Newly Opened Adobe Photoshop Window

Using Tools • The Toolbox is the palette containing the tools you use to create images • The Toolbox was shown earlier in Figure 5-1 • Sets of tools are differentiated from individual tools by a small triangle below and to the right of the Tool icon

Using Tools • Drag your mouse diagonally across the Document window to select an area • This selection area is outlined with a dashed link called a marquee

Using Tools • Fill the selection area with a solid color or a pattern • The currently selected color is shown as the foreground color in the Toolbox • Using tools such as the Brush tool or the Paint Bucket tool results in the foreground color being applied to the open image • Behind the foreground color in the Toolbox is the background color • This color is used to augment the foreground color when creating gradients or patterns that fade from one color to another

Using Filters • The tools in the Toolbox are useful for adding color and effects to specific areas of an image • Photoshop also includes many filters, available under the Filter menu, that can be used to add graphical effects to entire images or selected areas • The filters are divided into 13 main categories and a few advanced categories

Using Filters • Most of the filter categories recreate the effects of traditional drawing and painting techniques such as watercolor, cross-hatching, and mosaic • Other filters are used to blur, sharpen, or distort the image

Using Layers and Vector Shapes • Layers are a Photoshop element that you can think of as sheets of clear plastic • When stacked above one another, they can contain separate image elements • You can edit the contents of a layer without affecting the image elements in the other layers • Vector shapes are another kind of element that can be edited without affecting other parts of an image

Using Layers and Vector Shapes • Web graphics are bitmap images, which means they are composed of a grid of pixels, where each pixel can have a different color • When you use tools such as the Marquee tools or Brush tool, you are manipulating the pixels in the bitmap • Vector shapes are composed of lines, rather than pixels, and can be colored with different styles in addition to solid colors

Image Created with Layers

Using Text • Text in Web graphics often suffers from aliasing, which is an effect that causes the edges of the text to appear jagged • Normally you will want to use anti-aliasing, a technique that blurs the edges of the text slightly in order to create the appearance of a smooth edge

Navigating Images • Before you begin manipulating images, you need to be able to find your way around them • One of the tools you will use most often is the Zoom tool (also called the Magnifying Glass tool), which lets you increase or decrease the scale of the image window • Photoshop also allows you to change the scale in other ways

Changing Dimensions • Changing the dimensions means changing the actual height and width of an image • In Photoshop, the term canvas refers to the dimensions of an image • An image’s canvas size is the height and width, in pixels, of the image • In Photoshop, you alter the image dimensions with the Image Size and Canvas Size menu tools

Changing Dimensions • Image Size lets you stretch or shrink the image; Canvas Size lets you pad or crop the image • Padding means adding empty space to the edge of an image in order to make it bigger; cropping means removing part of the image in order to make it smaller • Photoshop also includes the Crop tool in the Toolbox and the Trim command under the Image menu

Fixing Low-Contrast Scans • Often you will find that scanned images have low contrast • That is, the white areas are not truly white, and the black areas are not truly black • Figure 5-9 shows an image with low, normal, and high contrast

Fixing Low-Contrast Scans • You can solve this problem in Photoshop by using the Brightness/Contrast option and the Levels option

Fixing Problem Colors • In addition to the problem of low contrast, scanned images may have colors that do not appear as bright as in the source image • This is a common problem when the source is printed on low-quality paper • You can improve poor color in Photoshop with the Hue/Saturation feature

Retouching with the Brush Tool • An easy way to fix small specks like those seen here is with the airbrush capabilities of the Brush tool • Using the normal Brush tool would leave hard edges where you make your edit • The airbrush capabilities leaves a smoother line

Retouching with the Dust & Scratches Filter • The Dust & Scratches filter is explicitly designed to remove minor blemishes from photographs caused by dust on the camera lens or scanner bed or from scratches in the original photo • This filter works by finding adjacent pixels that are different colors and blurring them • When using some filters, you will want to apply them to a selected area, rather than to the full image

Retouching with the Dust & Scratches Filter • If you find it awkward to make the selection by using the Elliptical or Rectangular Marquee tools, you can use another type of selection tool, called the Lasso tool, which allows you to create a selection area of any shape

Blurring Images • Blurring reduces color contrast, lightness contrast, and texture contrast by blending adjacent pixels • If the area you need to select is too irregular for the Lasso tool, you can use the Magic Wand tool, which creates a selection area of all pixels that are similar to the color of the selected pixel

Blurring Images • Like the Paint Bucket tool, the Magic Wand tool includes a Tolerance setting in the Option bar • Both tools also include a Contiguous option • When checked, this option ensures that only similar pixels (which are adjacent to the one you click) are affected

Using Saturation • Adjusting the color saturation of the background can emphasize the foreground and enhance the presentation of the subject • Using the Sponge tool has the same effect, but it is more appropriate for making local changes to specific pixels

Replacing Unwanted Elements • Replacing unwanted parts of a photo is one of the most enjoyable aspects of editing images • The Clone Stamp tool (also called the Rubber Stamp tool) allows you to duplicate specific parts of an image • When you use this tool, you need to specify the brush size, which controls the diameter, in pixels, of the line created when using this tool

Image with Unwanted Elements Removed

Saving and Optimizing Images • When creating pages for the Internet, you need to factor in the importance of how quickly the pages will load on the user’s computer • To make images download quickly on the Web, you must optimize them, which means reducing their file size while maintaining the image quality • You can optimize images by using one of two methods: color reduction or compression

Saving and Optimizing Images • Color reduction is appropriate for simple images that contain few colors, such as line graphs • Compression is more appropriate for complex images that contain many colors, such as photographs • Among all the available file formats for bitmap images, only three can be displayed as part of a Web page: GIF, JPEG, and PNG • GIF images can contain a maximum of 256 colors and are optimized through color reduction

Optimizing GIF Files • The Save for Web command gives you more control over the optimization process and allows you to preview your changes • When preparing images for the Web, always use the Save for Web command • Sometimes, reducing the number of colors in an image causes banding, an effect in which smooth gradations of colors turn into stripes

Optimizing GIF Files • One way to fix banded colors is to use dithering, which is the technique of adding pixels to an image to break up the boundaries between different colors

Optimizing GIF Files • You can choose which method (Perceptual, Selective, Adaptive, or Web) to use when reducing the colors of an image • The default Color Reduction setting is Selective, and that usually produces the best result • Another option is Web, which favors Web-safe colors

Optimizing GIF Files • You can optimize GIF images by specifying a certain percentage of Web Snap, which controls how many Web-safe colors to use in the image • It is a good idea to leave this setting at 0%, because using a higher setting will result in low-quality images • It is not necessary to use Web-safe colors when optimizing images

Optimizing JPEG Files • You can optimize JPEG images in the Save For Web dialog box • The menu options on the right side of the box are different for JPEG images • Compressing a JPEG image is simple • A high Quality setting results in a large image file with no noticeable degradation of the image

Optimizing JPEG Files • A low Quality setting results in a smaller image file that may contain artifacts, or areas of texture that are side effects of the compression

Optimizing JPEG Files • Another option when compressing images is to make the image progressive, a setting that causes the image to download in stages rather than all at once • A progressive JPEG image is similar to an interlaced GIF image

Optimizing by File Size • In order to make sure the Web page downloads in a few seconds or less, you may decide that all the elements of a page must have a combined file size of less than 60KB • If the HTML file itself has a size of 30KB, that leaves another 30KB for all the graphics on the page • It is then convenient to optimize an image based on a fixed file size, rather than just looking at the maximum optimization that does not compromise image quality

Optimizing by File Size • First select a target file size for the optimized image in the Desired File Size text field • The target size should depend on the dimensions of the image and the number of colors in it • A small image of 50 by 50 pixels with just a few colors can be optimized to less than 1KB

Summary • The Toolbox contains all the tools you need to select, draw, and manipulate the image with your mouse • Layers are like sheets of clear plastic • You can change the elements inside one layer without affecting those in another • Use the Zoom tool to magnify the image • Use the Levels dialog box to fix low-contrast scans

Summary • You can smoothly replace areas of an image with the Clone Stamp tool • Images with few colors, such as graphs, are best saved as GIF images • Images with many colors, such as photographs, are best saved as JPEG images • You can optimize an image by selecting a target file size and letting Photoshop find the best settings

The Web Warrior Guide to Web Design Technologies