There are some wacky and misleading image-tiling Photoshop tutorials out there. Here, you will find the best (or, the quick and easy) way to tile an image in a Photoshop. Tiling images across the background of website elements is a common practice. Tiling can occur across the x-axis, the y-axis, or across both. It’s a matter of just a few lines of CSS:
1 2 3 | #element {
background: url(background.jpg) repeat-x;
} |
Tiling an image in Photoshop (maybe we are creating a comp that will be used to style a website) is also easy, though the process is entirely different. First things first: We need to create or open our image to be tiled. After doing this, we define our pattern using the Define Pattern option. This option is found within the top menu, under Edit > Define Pattern… You might have to select Show All Menu Items if Define Pattern is not showing.
Our pattern is now defined. We can now use our pattern to fill a Photoshop layer. There are two ways to do this:
1. From the top menu, select Edit > Fill… Under the Fill options, use pattern then select the custom pattern we just created. Your layer should now be tiled.
2. Select the Paint Bucket Tool. Under its options in the top menu, select pattern fill, then choose the pattern we just created. Click on the layer you wish to fill. Your layer should now be tiled!