Category — Tutorials

Photoshop is enormously powerful, and you don’t need to understand everything about it in order to use it. One good thing to know if you make websites, though, is how to make a tile that can be repeated as a nice background image. Here’s a simple tutorial on how to make a simple Photoshop pattern.

1. First, let’s grab a public domain image of something that will look nice as a sort of wallpaper. I chose the double-tailed lion of the Kingdom of Bohemia, and added some space around it to make a 240px x 240px canvas.

2. Now add guides (View–>New Guide…) vertically and horizontally at 120px. This will divide the image into four quadrants.

Next, using the rectangle selection tool, we’ll select the part of the lion in the bottom right quadrant.

3. We’ll right-click and choose “Layer via Copy”, and we’re going to move the new layer into the opposite corner of the image, the upper left corner.

4. We’re going to repeat this process in the other three quadrants, so we should be left with an image that looks like this:

5. Now we save the image for the web and we’ve got our background tile!

Want to see how it looks on a web page?

Questions or comments are welcome!