Photoshop Backgrounds Lay Tiles On The Web in Photoshop 6
Search MS Office A-Z | Search Web Pages/ Design A-Z
Photoshop Backgrounds Lay Tiles On The Web in Photoshop 6
It’s fun to test new looks for Web pages using different background images. One type of background image is a stripe that tiles, or repeats itself down the page, a technique that creates a shift in color across the page. This month we show you how to create and view these tiling stripes in Photoshop.
You probably know how background images work. Simply include a background graphic in the HTML BODY tag, such as <BODY BACKGROUND=“image.gif”>.
Preferably the image is small so it loads and fills the Web page quickly. Be sure to use GIF (Graphics Interchange Format) for solid-colored backgrounds and JPG (Joint Photographic Experts Group) for gradients.
The Stripe
We start with the venerable left-hand menu stripe, a common technique for highlighting a left navigation menu. It’s important to make the image long enough so that it fills the browser window completely and doesn’t tile next to itself. We recommend making tiles at least 800 pixels long.
Start Photoshop and open a new file. Specify that the file be 1,000 pixels long and 20 pixels wide. Click OK. From the color-picker, choose a royal or dark blue for the stripe.
Next, click the Rectangular Marquee Tool. In the new file, make a selection as wide as you’d like the Web page stripe to be. Then go to Edit, Fill, Foreground Color. For a subtle double stripe, use the marquee tool to make a tiny selection right next to the blue area. Select Edit, Fill, Black.
To save the file, click File, Save For Web. Save the file as a GIF. Use the Web color reduction algorithm and the No Dither option. Under Colors, select Auto. We compressed our file to just 350 bytes. Click OK.
View The Tile
To see how your image will look on a Web page, first save it as a tile in Photoshop. With the file open, click Edit, Define Pattern. Name the pattern you just created and click OK.
Now open a new file, specifying it be 800 pixels long and 600 pixels wide, simulating a Web page. Then click Edit, Fill. Under Contents select Pattern, click Custom Pattern, and click the pattern you just created. Click OK. Is the bar too wide or too narrow? If so, try again.
The Gradient
A refined-looking gradient can render cozy depth to a Web site. This time, choose a medium- to light-blue foreground from the color picker.
Open a new file, again 1,000 pixels long by 20 pixels wide. Select the Gradient Tool. In the Gradient menu options, select Linear Gradient. Click the Reverse checkbox so the pale end of the gradient appears on the left. Check the Dither box to reduce banding, a vertical striping effect. Hold down the SHIFT key to restrain mouse movement to a straight line.
Next, drag the mouse from left to right across the file and let go. If the file is too wide for your window, that’s OK, just drag until you reach the end of the file. You can also use the magnifying glass to shrink the image before drawing the gradient.
Select File, Save for Web. Save the gradient as a JPEG. We recommend using a high compression quality setting. Using the medium and low settings may result in banding. We reduced our gradient tile to 700 bytes.
A Smaller Stripe
To make the file easy to work with, we specified creating an image 1,000 pixels long and 20 pixels wide. But in fact, you can create a perfectly good gradient tile just one pixel wide and reduce kilobyte size by nearly half. Try it and see. Our 1,000 by 1 pixel image is just 450 bytes. Use the magnifying tool to enlarge the image if necessary.
This one-pixel-wide trick is even more effective with GIF tiles. We reduced our 350-byte GIF stripe to just 93 bytes.
Look forward to other nifty Photoshop tricks for Web backgrounds in the months to come.
Photoshop Backgrounds Lay Tiles On The Web in Photoshop 6