Beer makes you learn stuff: How to tile background images
Monday, July 7th, 2008You may have noticed that this site’s background image is cool, refreshing beer. One of the things I had to learn when I built this site was how to create a seamless background image that can be tiled over and over again. So I pulled up an image of a mug of beer and cropped a small section out of the middle of it. Then I did the following to produce a seamless, tile-able image:
1) Create a new image in your favorite image editor (Photoshop, Paint Shop Pro, Paint, or whatever) that’s twice the width and height of your original image. So if your original was 100×100, you’d create a 200×200 new image.
2) Copy the original image, and paste into the upper left of the new, larger image.
3) Mirror the original image (flip it horizontally), then copy and paste the mirrored image into the upper right of the new image.
4) Flip the mirrored original image (flip it vertically), then copy and paste the flipped image into the lower right of the new image.
5) Mirror the mirrored then flipped original image (flip it horizontally), then copy and paste the result into the lower left of the new image.
6) Save the new image. You should now have a tileable background image that will look seamless.
Now that you know a little about web design, check out our books section to make yourself smarter about beer and liquor as well.
