Preparing Images for the

Images for Web pages are very similar to images for E-mail. But generally, images for the Web need to be saved to very specific dimensions.

1 Duplicate your image file (this preserves the layers and color space of the image file). Select Image>Duplicate Image. In the Duplicate Image dialog, provide a useful name and check the "Duplicate Merged Layers Only" option.

Duplicate: pabio In a tree I 7x10 copy

1 CK 1

As: Pablo r\ a tree emat

1 cancel I

0Due*cate Merged Layers Onty

2 If necessary convert the E-mail image to sRGB using Edit>Convert to Profile. See Convert to sRGB on page 107.

3 Select the Crop tool from the Toolbox. Set the Crop tool options to the specific width and height specified to place the image on the web page. It is important to enter "px" along with each pixel value, or the crop options will be set to your default units (inches or cm). Set the resolution to

72 pixels per inch.

"4 | me i J! «<Tj\ ■■hUmk Ifa^As* lv|| I iwi^o. t I I

4 Use the Crop tool to draw a crop marquee over the image, the Crop tool options values that you set will restrict the crop marquee to one proportion. When you have the marquee position properly, press Enter to accept the crop and Photoshop will resize the image to the target size. Photoshop will use the default resize algorithm; "Bicubic Sharper" if you have set it.

5 Sharpen the image using the Smart Sharpen filter.

6 Save the Image to the Web using the Save for Web dialog as you did for saving E-mail files above. One significant difference, many images for Web pages are save using the Progressive option. When progressive images are placed on a web page,

these images appear very quickly at a low resolution and become sharper as they download. This is a good option since it allows the web page to display quickly, even if there are many image files on it. I typically use this option.

Thumbnails The steps for saving Web images can also be used for creating Thumbnail images for the web. It is very important to set default resize algorithm to "Bicubic Sharper" since it makes a Thumbnail resized with significant difference for small images. Bicubic Sharper & Bicubic

Adding a Black Border and Drop Shadow

You will often need to add a simple border and/or a drop shadow to your images in order to separate them from the background of a web page.

Follow the first five steps above to prepare an image for the web.

6 Make a selection around the entire image; Select>All.

7 Add a fine black trim line around the image select Edit>Stroke...

This is a simple effect for many images that provides a simple trim line around the image that can make it more formal and act as a boundary for the image.

8 The image has been resized precisely for your web page, but you need to make it smaller in order to fit a shadow under it. Use the Image Size dialog to change the size to 95% of the current size.

9 If your image has only the background layer, you will need to turn it into an image layer to apply the drop shadow effect. Double-click on the background layer, a New Layer dialog will appear, leave the name as "Layer 0" and press OK. You now have one image layer.

Make some room around the image for the drop shadow by increasing the canvas size; select Image>Canvas Size. Press the button for the upper left corner; this makes the canvas grow to the lower right. Enter the values required for the final full sized image used in step 3 above so the image can be placed on the web page unsized.

11 Add a Drop Shadow; select Layer>Layer Style>Drop Shadow..

The default values are good for adding a drop shadow to a web image. But make sure that the Angle points to the upper left so that the shadow will cast down to the right. A value of 120° works well. Press OK. The drop shadow should now appear.

12 Finally, add the appropriate background color and flatten the image. You should use the same background color as your web page. If the background color is not the default color white, click on the background color patch and set the appropriate color in the Color Picker.

Flatten the image by selecting Layer>Flatten. The image and the shadow will be flattened onto the selected background color.

0 0

Post a comment