Tileable Images

As part of the New Widescreen Layout, I set out to make the image at the top of the page tile. Though the ends of the image are both blue sky, the coloring and clouds were different enough to mark the transition very sharply. Though I remembered the basic approach from working through Grokking the Gimp years ago, it took a few attempts to shake off the rust.

The overall method is to make one image fade into its neighbors on either side. The detailed steps are:

  1. Duplicate the image onto two additional layers so you have Left, Right, and Center copies.
  2. Move the Left and Right copies off in their respective directions so only 100 pixels are showing.
  3. Create an layer mask for each to set transparency.
  4. Fade the layer mask for Left and Right with a gradient over the inner 50 pixels of their 100 pixel width.
  5. Fade each end of the Center layer mask 50 pixels from the outer edge, using multiply mode for the second.
  6. Crop the image by 25 pixels from each end so that the images will join in the middle of the transition.

The key is that one gradient flows into the solid portion of the neighbor, thereby feathering the images into each other. My initial mistake was to have the gradients flow into each other, which left some transparency through which the white background bled through. The join in the final result is only noticeable if you really look for it. (Open one the photo albums to maximum width.)

A few final words: the width of the gradients can be adjusted to taste, and it’s useful to snap to a grid by which the image width is divisible to get symmetric results at both end.

No Responses to “Tileable Images”

Leave a Reply