Locked lesson.
About this lesson
If you ever want to take a small image and use it to fill out a background. This tutorial will show you how to do this so that it is seamless and well positioned. Good for nature images, like clouds and trees. But it could also be used for adding a tiled corporate logo to document backgrounds.
Exercise files
There are no related exercise files for this lesson, or we cannot provide them due to copyright issues.
Quick reference
Topic
Generate a nice tiled texture for use in websites and design backgrounds.
When to use
If you ever want to take a small image and use it to fill out a background. This tutorial will show you how to do this so that it is seamless and well positioned. Good for nature images, like clouds and trees. But it could also be used for adding a tiled corporate logo to document backgrounds.
Instructions
Make initial image selection
- Open image
- Select crop tool (C)
- At top on Options Bar change width and height to 256px.
- Make crop selection.
- Go to ‘Filter’ dropdown menu, then ‘Other’ and choose ‘Offset’
- In horizontal and vertical values enter 128 px (half of the crop size)
- Make sure that ‘Wrap Around’ is on.
Improving the tiling
- Choose the spot healing brush
- Run spot healing brush along middle seam.
- Use clone stamp tool to add a final smooth to the middle seem.
Tiling the Image
- From ‘Image’ dropdown menu choose canvas size.
- Change the canvas size to 768 by 768 (for demonstration)
- Drag image to the top left (snaps in).
- Hold ALT (to copy image), drag left until it snaps next to it.
- Repeat until image is fully tilled.
Tip
If you know what your final canvas size (website or publication) will be, then you can work backwards to work out what size you want your crop selection, to give you a precise fit.
For example, if your eventual canvas size is going to be 800px wide, you can set the initial crop size to either 400px or 200 px, or 100px .
Login to download- 00:04 Hey everyone, I'm sure you've all gone to websites which
- 00:07 had ugly overlapping backgrounds, similar to the one you see here.
- 00:10 Let me show you how to alter your texture to ensure that it tiles properly.
- 00:14 Here's a bamboo texture I've been working on lately.
- 00:17 While it's not necessary, I prefer to work
- 00:19 with a texture that has a square aspect ratio.
- 00:21 And there's usually not a need for
- 00:23 massive images, unless you're producing professional game textures.
- 00:27 So, in this case, I'm gonna grab my Crop Tool from the Tools bar on the left.
- 00:31 And then at the top in our Options bar I'm gonna use 256 by 256 for the dimensions.
- 00:36 I really wouldn't go much bigger than 512,
- 00:38 especially if you're gonna be using this online.
- 00:41 Make sure you remember the size of your
- 00:42 final image, you'll understand why in a moment.
- 00:45 As for the area I'm going to be cropping, I wanna make sure
- 00:47 to include some of the key components, like the ends of the bamboo.
- 00:51 I also wanna make sure that the texture will fill the whole document.
- 00:54 So, I'm not too worried if the top and the bottom get slightly cut off.
- 00:58 Once the image has been cropped, let's make
- 01:00 some adjustments, to ensure that it tiles properly.
- 01:03 Head up to the Filter menu at the top down to Other and then choose Offset.
- 01:09 Here, for both the horizontal and vertical values, we
- 01:11 want to enter exactly half of our document size.
- 01:15 If you remember, we cropped our texture at 256 by 256, so for
- 01:18 the values, we're gonna use 128 for both, as it's exactly half of 256.
- 01:23 You'll also wanna make sure that Wrap Around
- 01:25 is selected, this will help connect our images together.
- 01:29 At this point, your texture's gonna tile just fine, but there's
- 01:32 some clear seams that we need to fix, before testing anything.
- 01:35 Usually, if you use the proper offset values, your seams won't be too bad.
- 01:39 To fix these, I'm gonna start with a spot healing brush,
- 01:42 making sure to select the Content Aware Option at the top.
- 01:45 This should correct most of our problems, but it may leave
- 01:47 some areas that need to be blended a little bit better.
- 01:50 Clone stamp to the rescue, within a minute or two, you should
- 01:53 have cleared up the small mess that the offset filter left behind.
- 01:56 Now that our texture's looking seamless, lets see how it tiles.
- 02:00 Heading up to the image menu and then Canvas Size, I'm able to increase
- 02:03 the size of my canvas, without affecting the image that we just worked on.
- 02:07 I'm gonna increase it to 768 by 768 to make it three times as large.
- 02:12 Now I'll position my image in one of the corners, and then using my
- 02:15 Alt or Option key, drag out a duplicate, until it snaps beside the original.
- 02:19 I'll start horizontally, and then duplicate downwards vertically.
- 02:22 As you can see, we now have a perfectly tileable texture.
- 02:25 No seams attached.
Lesson notes are only available for subscribers.