Seamless Tiling

Now you are ready for the final step toward becoming an expert at making background: candy corn.

Given that Halloween was coming up, we had a bowl of candy corn in our home. It inspired me to take out the digital camera and take a few closeup shots of the candy so that we could make a rather tasteless background out of it. In the process, you will learn how to make images that tile nicely even when they don't naturally fit together like bricks.

To start, in the "Lab 6 Images" folder in "CS 105" in "Courses" you will find two images named "corny.jpeg" and "cornier.jpeg". Copy one of these images to your "lab6" folder. There really isn't anything cornier about one than the other, so don't agonize over the choice.

Double click on the copied image to open it with PhotoShop.

While the camera I used is excellent, it didn't quite capture the color of candy corn as well as one might have hoped. As a first step in preparing your background image you should improve the color of the image a bit.

• Select "Color Balance" from the "Adjust" sub-menu of the "Image" menu.

• Use the dialog box that appears to increase the strength of the yellows and reds in the image until the candy look more appetizing. The dialog box allows you to alter "shadows", "midtones" and "highlights". Play around with all three options.

Once the corn has bright enough colors to make a really garish background you will need to make a second copy of the image. One copy will be slowly transformed into your background tile. The other copy will serve as a source of "spare parts" to use as you edit the background image.

• Select "All" from the "Select" menu.

• Select "Copy" from the "Edit" menu (to copy the whole image).

• Select "New" from the "File" menu.

• In the dialog box that appears, PhotoShop will have cleverly set the default values to be just right for the "copy" of the image you just made. So, you can simply click "OK".

• Select "Paste" from the "Edit" menu to complete the copying process.

The only problem with the copy will be that PhotoShop has added it as a new layer. This will make it difficult to save in JPEG format later. So:

• Select "Flatten Image" from the "Layers" palette.

Now, using the cropping tool, select a region roughly 500 by 500 pixels which will become the source for the tile of your background. Double click in the cropping box to complete the crop.

Once you have cropped your background tile, save it as "cornybg.jpeg" in your "lab6" folder (make sure to save it in JPEG format rather than in "Photoshop 3.0" format).

Now, return to PageSpinner. Make yet another "New", "Custom Page":

• Type in some catchy "title".
• Click to put an "x" in the box telling PageSpinner to include your title as a header in the BODY.
• Click to put an "x" in the "Background Gif..." box.
• Click on the folder icon to the of right the box for the name of your background image and use the dialog box that appears to navigate to your directory and select the "cornybg.jpeg" file you just created.

Once this is all done, click "New".

Now, immediately save the page you have created ("cornybg.html" would be a good name) and then click on the PageSpinner preview button so that you can see how your background looks. Unless you are extremely lucky (or maybe that should be unlucky), the tiling effect should be a bit pretty obvious when your page is viewed. The edges stand out clearly where the copies of the cropped candies meet.

To fix this up, return to Photoshop.

• Note the size of your image in pixels.

• Select the "Offset" filter from the "Others" submenu of the Filter menu.

• Select the "Wrap Around" option and use about half your image's width as the horizontal offset value for the filter and about half the image's height as the vertical offset value.

• Click "OK".

As with the bricks, the use of the offset filter places the mismatched edges in the middle of your image where you can work with them and ensures that the outer borders of the image will match perfectly with one another.

Now, you need to fix the mismatched edges. It would take an awful lot of skillful smudging to do this job. You may, in fact, want to do a bit of smudging to finish off the process. The bulk of the work, however, will depend on a more direct approach. We will "borrow" a piece or two of candy corn from the uncropped copy of the image and paste them on top of the mismatched edges to hide them.

To do this, we need to select one candy corn from the original. Then we can copy and paste it into the cropped and offset image.

You know enough techniques for selecting parts of images that you probably could get a candy corn selected with a bit of patience, but I'd like to teach you another technique instead (PhotoShop has many, many mechanisms for doing just about everything!).

The technique I want to show you involves a PhotoShop mechanism called "Paths". Building a path in PhotoShop is a bit like making a connect-the-dots picture. Instead of drawing lines between the dots, however, you draw the dots and PhotoShop connects them to form a path which you can then easily turn into a selection.

• To begin, click somewhere on the window containing the uncropped candy corn to bring it to the foreground of your screen.

• Pick a nice looking candy corn from the full image. Make sure the one you pick isn't partially covered by any other piece of candy.

• Use the "zoom" tool to zoom in on the candy you picked a few times.

• Now, click once on the "Path" tool in the PhotoShop toolbox. The path tool is located just below the smudge tool in the toolbox. It's icon looks like the tip of a fountain pen.

• Click the mouse once at a point on one of the long, straight edges of the candy you selected to start making a path.

• Move the mouse over just a bit to another point on the edge of the candy so that a straight line between the first point on which you clicked and this second point would run right along the edge of the candy. Click on this point to get PhotoShop to draw a line right along the edge.

• Continue clicking in this way to trace a path all around the edge of the candy. Where the edge is fairly straight, the points can be more spaced out. When the edge is curved, the points will have to be quite close together.

  As you work, the screen should look like:

  

• When you get all the way around the candy, point the path tool at the box representing the first point you clicked on to close the path.

What you have now is a path, but what you need is a selection. To convert the path into a selection:

• Find the palette containing a tab labeled "Paths" and click once on this palette to make the Paths palette visible.

• Depress the mouse on the little black triangle that appears to the right of the "Paths" tab to make the pop-up Paths menu appear.

• Select "Make Selection..." from the menu.

• In the dialog box that appears, enter a feather radius of 2, make sure "new selection" is chosen, and click "OK".

• Press the mouse on the arrow to display the Paths menu again and select "Delete Path". Once this is done you should have a nice selection marquee flashing around your chosen candy corn.

• Select "Copy" from the "Edit" menu to grab the corn.

• To make it easy to get another copy of this candy corn later we will first paste a copy of it into a new window of its own:

  • Select "New" from the "File" menu and click "OK" in the dialog box that appears.

  • Select "Paste" from the "Edit" menu.

• Finally, click once on your cropped image of candy corn to bring it to the foreground and select "Paste" to add your borrowed candy corn.

At this point, you have added the corn to your cropped and offset image. Now, you need to move it around and rotate it so that it covers as much of some section of the edges running through your image as possible but still fits in well with the surrounding candies.

• Select "Free Transform" from the "Edit" menu. A little box should appear around the candy corn you just pasted in. This box is not a cropping box but it behaves a lot like one. You can rotate the candy now by dragging the mouse around while pointing outside the box. You can move the corn by dragging with the mouse positioned inside the box. You can resize the corn (don't do this too much) by dragging on the corners. Try it.

• Using the controls provided by the "Transform" mechanism, position your added candy corn strategically over some section of the offending edges.

• When the corn is positioned correctly, just double-click within the transform box to complete the operation.

Now, do it again. That is:

• Select "Paste" from the "Edit" menu to add another copy of your borrowed corn to the image.

• Select "Transform" from the "Edit" menu and use the mouse to position it where it will help hide more of the edge.

If you get tired of using copies of the same corn, you can go back to the original and get another one. You may want to make a collection of them in windows of their own so that you can easily pick the right one for each step of the process.

Once most of the edge is covered, switch tactics. Using the smudge tool, eliminate the any slight remaining traces of the sharp edges that appeared where the former edges of your image now meet.

When you think you have smoothed over the edges sufficiently, you are ready to finish up by reducing the size of the image and saving it.

Use the "Image Size" item in the "Image" menu to reduce the size of you image to about 150x150. Keep the resolution at 72 pixels per inch and make sure that the proportions are constrained.

Then, save the new image, return to Netscape and reload the page to see how things have improved. The background pattern may still look fairly repetitive, but the edges should be invisible now. How repetitive it looks depends somewhat on how clever you were about covering up the edges, but I'll leave it to you to decide whether to practice this skill. If the edges are fine move on. Otherwise, return to Photoshop for a bit more smudging and try again.