Create a background image for your Web page

[Pages:2]1

Adobe Photoshop Elements 2.0

Create a background image for your

Web page

You can use a photo as the background image of a Web page. Unfortunately, a full-color photo large enough to fill an entire Web page results in a huge file requiring lots of bandwidth to download. Here's how you can use Adobe? Photoshop? Elements 2.0 to create an attractive monochromatic background image large enough to fill your Web page, but with a file size small enough to download quickly.

Now you're going to colorize your photo, then reduce its file size through a process called optimizing.

2. Colorize your photo.

Choose Enhance > Adjust Color > Hue/Saturation. Select the Colorize option. Use the Hue, Saturation, and Lightness sliders to adjust the color and lightness of your image. Make sure the Preview option is selected in the Hue/Saturation dialog box so you can preview your adjustments in the document window.

1. Open a full-color photo.

Open the color photo you wish to use for your background image. Resize or crop it as necessary. For the image to fill an entire Web page, it should be at least 680 to 800 pixels wide and 480 to 600 pixels high. Be careful about the amount of detail in the photo you choose. A background image with too much detail reduces the readability of your Web page.

Tutorial

ADOBE PHOTOSHOP ELEMENTS 2.0 2 Create a background image for your Web page

3. Make your image subtle.

Experiment with the color and saturation of your image, but keep the readability of your Web page in mind as you adjust your colorized image. Dark, saturated background colors can decrease the legibility of text. Whereas, soft, neutral colors usually help support a good Web design.

When you're satisfied with your colorized image, click OK.

Now you need to optimize your image so its file size is as small as possible.

Now your image is ready to be used as a Web page background. Use a program like Adobe? GoLive? or HTML code and set up your Web page.

4. Optimize your colorized image.

Choose File > Save for Web. Then choose either GIF or JPEG from the pop-up menu in the Save For Web dialog box. Our example uses JPEG. Although the GIF format produces a smaller file than JPEG, JPEG is better to prevent dithering and preserve the details in a continuous-tone photo image. If you choose JPEG, set the optimization to Low for a smaller file size. There's no need for higher quality since the image is only being used as a background. You can preview the optimized image in the dialog box. Click OK to optimize your image.

5. Add other elements to your Web page. (Optional).

You can add elements such as text, buttons, and graphics to your Web page. These elements should complement your newly-created background image. Since background images tile--that is, repeat in a pattern across and down the browser window--limit the contents of your Web page to the size of the first tile. Your viewers won't be forced to scroll to the next repeating tile to see all the content.

Adobe, the Adobe logo, and Photoshop Elements are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Windows is either a registered trademark or trademark of Microsoft Corporation in the United States and/or other countries. Macintosh is a trademark of Apple Computer, Inc., registered in the United States and other countries. ?2002 Adobe Systems Incorporated. All rights reserved.

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download