So far, we have worked with a pre-made pattern designed to tile the screen nicely. We now want to begin to show you how to take an arbitrary image and modify it so that it will tile a background well. The general problem in creating such an image is that one has to make sure the edges match up. Normally, this means that the top and bottom must match and that the left and right edges must match. We can make things a little simpler by starting with a class of backgrounds in which you only need to worry about making the top and bottom edges match.

Many web pages feature borders produced using background images. The trick is to make a pattern image that is wide enough to fill the whole page but not very tall. All but the left edge of the image is usually uniform in color. If you want, you can see what we mean by looking at the image used as a border on this page by clicking on this border link. When the browser tiles the page with such an image, the result looks like a border. To see how this is done, we will create a "brick wall" border.

In the "CS 105" folder in the "Courses" volume on the Cider Press server you will find a folder named "Lab 6 Images." In this folder there is a file named "bricks.jpeg" (a bit of Bronfman to take home with you). Copy the "bricks.jpeg" file from the "Lab 6 Images" folder to your "lab6" folder. Open the copy of "bricks.jpeg" in your folder with PhotoShop.

Using the cropping tool, cut out a section of bricks four bricks high and about 200-250 pixels wide. (If you can't judge 200 pixels without help yet, you can ask PhotoShop to "Show Rulers" in the "View" menu and, if necessary, set the ruler units to pixels using the "Preferences" sub-menu of the "Edit" menu.) Remember that you can rotate the cropping area by dragging the mouse while outside the cropping region or move the corners by dragging them with the mouse. Use these techniques to line up the cropping box so that the right edge lines up with the right edge of the bricks and the top and bottom edges fall in the mortar between layers of bricks. The "mortar" through which the cropping box passes at the top and bottom will become the edges that have to match well to make the tiling work. So, choose carefully. Once the region selected looks good, crop by double-clicking the mouse within the cropping box (or just press return).

Now, to see how good the edge match is (and to make it better), apply the "Offset" filter to this image.

The Offset filter shifts your image's pixels to the right and down by amounts you specify in a dialog box. With the "Wrap Around" button selected in its dialog box, this filter shifts the pixels that fall off the bottom edge back in on the top. (Similarly, pixels that fall off the right edge reappear on the left.) If you think about this effect for a moment, you will realize that this means the top edge of your image will now match up nicely with the bottom edge when tiled. Unfortunately, a mismatch is likely to appear in the middle of your image where the former edges now meet. This is an improvement, however, because now you can use PhotoShop to touch up the picture a bit and hide the mismatch.

So,

• Select the offset filter. It is the last filter found in the "Others" sub-menu of the "Filter" menu.

• In the dialog box that appears, enter 0 as your horizontal offset and half your image height (about 120 pixels) as your vertical offset. Make sure that the "wrap-around" box is checked.

If there is a mismatch, we can touch it up using the "smudge" tool. Don't work too hard on this, however. The next step will probably make the edge invisible anyway.

The smudge tool is located in the toolbox on the left side of the sixth row. It appears just below the eraser. It is grouped with several other tools in a pullout menu. If you do not see it, point the mouse at the cell in the toolbox below the eraser, depress the mouse and select the tool that looks like a hand with the index finger extended.

This tool basically lets you do finger painting. If you drag it over a portion of your image, it "pushes" color from the region where you started into whatever area you drag to.

First, make sure that the "brush" shape associated with the smudge tool is fairly small so you don't change too much. Do this by selecting a small brush from the "Brushes" palette. Then, try smudging a portion of the mortar (just once). Then select "Undo".

If you carefully drag the smudge tool back and forth over any sharp edge that appears in your mortar you should be able to hide the edge pretty well. You will probably want to zoom in on the image before trying.

If things look worse after your first attempt with the smudge tool there is a feature of PhotoShop you will be happy to learn about. One of the tabs in the palletes on the right of your screen is labeled "History". If the "History" palette is not visible, click once on this tab so that you can see it.

The History palette contains one box for each of the operations you have performed on your image. It doesn't go back forever, but it goes back many steps. By clicking on a "step" in the pallete, you can undo (or redo) all operations performed after (or before) the step you clicked on. So, if you want to try smudging again, simply scroll back in the history list to find your first "smudge" and click on the step before it. This is obviously useful with many things other than the smudge tool.

When you are happy with the matchup, there is still work to be done. The bricks are a bit too large for a border. So, use the "Image size" item in the "Image" menu to resize the picture so that it is 80 pixels wide and has a resolution of 72 pixels per inch. Make sure "Resample image" and "Constrain proportions" are both selected when you do this.

Finally, to make the image border-like, we need to extend the image so that it is wide. Select "Canvas size" from the "Image" menu. Under "Anchor", click the middle box in the first column so that the bricks will be "left-justified" in the expanded image. Then, change the image width to make it 12 inches across.

To save a little space in the saved image, now change the image mode from RGB color to indexed color. While the indexed color dialog box is open, select "Adaptive" as your palette and then use the lowest resolution you can get away with (4 or 5 bits per pixel will probably work fine). Use the "best" color selection rather than the fastest.

Finally, save your image as "brickbg.gif".

Now make up a quick "Custom Page" with PageSpinner using "brickbg.gif" as your background. Add a bit of text to this page. Rather than just typing the text in, you should create a table to ensure that your text is indented to the right of the border area. The TABLE tag for this table should specify a WIDTH of 100%. The table will have just one row and two columns. The first column should be specified with a WIDTH of at least 80, the mysterious "NOWRAP" attributes (which helps it come out 80 pixels wide) and a <BR> tag as its contents. Its purpose is to make sure that the real contents of the page are indented past the border. Your sample text is then added as the second column of the table.