Often times, when mocking up a web page in Photoshop you will need to create a repeating pattern. It is quite easy to do, IF you know the secret handshake.
Let’s say you want to create a gridwork pattern, shown in Figure 1.
First, create the base element. In this case it is a backwards-shaped L. Select the area you want to be repeated (using a selection tool such as the marquee or lasso tool). See Figure 2.
Now it is time to learn the secret handshake. First, change to the Move tool (by default, the Move tool is activated when you hit a [v] on your keyboard. Next, hold down the [Option] key, [Command] key, and hit a [t]. You should now see transform handles on your selection. Drag this to the new location. In my case, I moved to 15 pixels to the right. You should now have two elements on your screen. Finally, duplicate the crap out of it by holding down [Shift][Option][Command] and repeatedly punching [t].
You’ll see that you now have bunch of layers in Photoshop. That bugs me. I like to select all those layers an merge them as one. To finish off the grid, repeat the previous steps, but copy in vertically (down 15px).
In the previous example, we were working with rasterized pixels, but this exact same technique works for vector paths too. Just make sure your vector mask is selected prior to hitting [Option][Command][t]. Sweet, eh? In fact, I prefer to work with vector whenever possible.