Part 3

WEB LAYOUT AND OPTIMIZATION

CREATING BACKGROUND TILES Part A

INSTEAD OF HAVING a boring solid color background on your next Web project, consider using a photographic background tile. When used with care, background tiles can be an unusual and memorable feature of a well designed site. To create your background tile, you’ll combine some of the skills you learned in Tips Part 2, “Making Custom Patterns,” with new skills using the Crop and Clone Stamp tools. Tiles can be rectangular or square, depending on your needs and the size of the original fi le. Bear in mind, however, that larger rectangular tiles tend to hide the internal off set seams best. For this Part, you’ll be creating a large rectangular tile from a photo of the ocean.

INTERNET HINT:

Take a look at Carsonified.com and Bright Creative.com for good examples of tiling backgrounds. Or if you’re feeling lazy and looking for more of a bvector graphic vibe for your site, check out……

STEP : 1

Select File > Open to open a digital photograph in your Photoshop workspace. If your original photograph is a high-resolution JPG file, you’ll need to scale it down for the Web. Select Image > Image Size to open the Image Size dialog box. Adjust the Resolution to 72 pixels/inch and set the width to 700 px. Th is will automatically re-size the image’s pixel dimensions. For example, if your original photo has a resolution of 300 and pixel dimensions of 3008×2000, aft er adjusting the resolution and width, the new pixel dimensions will be 700×460. Figure 3-1 shows the image for this exercise aft er it has been re-sized.

Figure 3-1

STEP : 2

Because this Part requires you to use the off set filter to convert your image into a tile, both the image dimensions need to be divisible by 2. Select the Crop tool from the toolbar, click the Front Image button on the Control bar to view the document’s current dimensions, and adjust the Height to 460 pixels. Next, drag the Crop tool across the area you want to crop and click Enter or Return. Your image will now be 700 pixels wide and 460 pixels
high.

STEP : 3

Select Filter > Other > Off set to open the Off set dialog box. (If you can’t see the Other menu option, click Show All Menu Items.) Set the Horizontal field to 350 and Vertical field to 230 pixels, which is half this document’s dimensions, set the Undefined Areas to Wrap Around, and click OK. Figure 3-2 illustrates how your image should appear aft er applying the off set filter.

Figure 3-2

Posts You May Also Like to Read:

• Photoshop cs5 tutorials for Web Templates Part 2(B)
• Photoshop cs5 tutorials for Web Templates Part 2(A)
• Photoshop cs5 tutorials for Web Templates
• How To Setup FTP On Your Pc
• Win A Mashable Style WordPress Theme from HelpNews [Winner Announced]