Part 3
WEB LAYOUT AND OPTIMIZATION
CREATING BACKGROUND TILES Part B
STEP : 4
From the toolbar, select the Clone Stamp tool (S), set the tool’s brush to 0% hardness on the Options bar, and open the Clone Source panel by selecting Window > Clone Source. Deselect the Show Overlay option in the panel, place your Clone Source tool above a section of the document without a visible seam, and press the Alt/Option button as you click once on your document to sample the image. Release the Alt/Option button and then paint away the seams by clicking and dragging the tool across an area of your image with a visible seam. Th e idea here is to use the Clone Stamp tool to cover up the interior seams in as realistic a manner as possible. Sample and paint using this tool as many times as needed to achieve the desired effect. Figure 3-3 shows an example of the image aft er using the Clone Stamp tool.
Figure 3-3
STEP 5
Save your new Web tile as a JPG fi le by selecting File > Save For Web & Devices. When the dialog box opens, adjust the settings on the right side of the panel to get the fi le size as close to below 50 KB as possible without losing too much of the image quality, and then click OK to save the JPG on your computer in the location of your choice.
STEP 6
To see how your new tile looks in a browser window, all you really need to do is create a simple Web page with a background image style in the CSS, as in the following code example:
<html>
<head>
<title>Untitled</title>
<style type=”text/css”>
body {
background-image: url(images/tile_oceanwaves.jpg);
}
</style>
</head>
<body>
</body>
</html>
Take a look at Figure 3-4 for an example of how a Web page using this particular tile appears in a browser window.
Figure 3-4
loading...
loading...
About shakil .
