Seamless textures and backgrounds - Photoshop Tutorial

- [Instructor] Seamless and tiled backgrounds are great for both websites and all other kinds of Photoshop work. A seamless background will often display behind your site content. It adds a visual element to help set the tone for your website. A repeating background is particularly useful when working with textures where you need a large overall background, but you just want to be able to have a small image, so that you're not impacting file size. It's very important to not use large images, because they can impact bandwidth. It's better to use a small portion of an image, and simply repeat it. In order to create a seamless background, you're going to want to open the file that you want to use as the background. For our purposes here, we're going to use this wood texture. I'm going to go ahead and make sure the image is selected. So, you can see the marching ants. I've already selected my image by going to select, all. Now I'm going to copy this to my clipboard, So I'll use edit, copy. And now that it's copied into my clipboard, I'm going to go into edit, define pattern. Here I have the option to name the pattern. It's going to by default take on the name of your file. I'll just write wood1. I'm going to click OK. Now I've loaded this image as a pattern. I'm going to go back to my Aloha Pineapple website, and I'm going to use this to create a background texture. I've already made a layer called background. I'm going to select this layer, and I'm going to use edit, fill, and for contents, I want to make sure that I'm choosing pattern from the pull-down menu, and then you'll have the option to choose whatever pattern that you want. Here's our wood pattern, so I'll go ahead and select that. I'll click okay, and you can see that this pattern has now filled the background area of my website. I've dragged this onto the very top layer, so we could take a good look at it. Now, the problem with this background, is you can easily see where the image is tiling, or repeating. This is something that you want to avoid, because this is not creating the seamless graphic that we'd like to project on our website. In order to fix this, I'm going to go back to my wood file. I need to find out a little bit of information about my file. I'm going to go into image, canvas size, and I'm going to make sure that I'm using whole numbers. So my width is 400. That's easily divisible by two. My height, however, is 267. It's not divisible by two. So I'm going to go ahead and I'm going to change the height to 266. It's going to crop off one pixel of my image, but that's not going to really matter in the whole scheme of things. I'll click OK. It's going to let me know that it's going to clip my canvas. I'll click proceed. And now, I'm ready to go on to the next step in order to make the pattern seamless. I'll go up to filter. I'm going to come down to other and I'm going to choose offset. So that's filter, other, offset. In the offset dialogue box, I'm going to plug in the horizontal value that is half the width of my image. So in our case, that's going to be 200. Then I'm going to plug in half of the width of the vertical. So our vertical height was 266, this will be 133. I'm going to make sure that the undefined areas are set to wrap around. So what's happened is my image has folded in from the right and the left, and the top and the bottom. Now we can clearly see where the image is going to tile. Being able to see this allows me to be able to fix it. So with this image visible on my screen, I'm going to use a variety of the tools in my tool pallet to adjust the image. I tend to like to use my clone stamp, or the healing or pattern brushes. I'll start off with my clone stamp. I'm just going to go ahead and sample, and I'll just kind of remake the wood here. So what I'm trying to do is I'm trying to eliminate that obvious line, the seam if you will. I can make my brush larger by using the bracket keys. That's the keyboard shortcut to increase the brush size. And I'm simply going to take samples from my wood texture to eliminate that seam. In addition to getting rid of any of the seams, you'll also want to eliminate any obvious elements that are going to make the image look like it's really repeating. In this case, I might want to eliminate some of the knots in my wood. So I'll just go in and I'll eliminate those using the clone stamp as well. That looks pretty good. What I like to do when I'm done with this process is I like to re-run the offset filters so that I can check my work. If you get too close to the edges, you might find yourself making some odd mistakes, but this actually looks great. I'm going to go through the same process of creating a pattern. So I'll select all, command or ctrl A, edit copy, command or ctrl C, and then I'm going to go to edit, define pattern. We'll name this wood2. Now if If I go back to my Aloha Pineapple website, I'm going to select the whole background layer, and we'll do an edit, fill. Again, I want to fill with a pattern. I'm going to choose my wood2 pattern right here, and I'll click OK. Now you can see that I have the wood pattern, but we don't have the obvious lines which indicate that it's repeating. If I zoom out, we get a really nice texture. I've already created a mask, so that I can have the pattern only showing on the right and the left edges, I've just disabled it, so that we could see the pattern while we were working on it. I'm going to hold down my shift key to show the mask again, and now you can see, here's my website, with the repeating background tiling behind the contents. You can create a pattern out of any shape in Photoshop. You could use diagonal lines, circles, a simple noise texture, stripes, ornaments, or literally anything else that you have inside of Photoshop. Efficient use of the tiled and textured patterns can enhance your design aesthetically without hindering your site's speed or affecting functional aspects of your website.