Download (direct link):
Making this image tile without the player being able to see where one tile starts and the other tile begins — that is the trick. So, what I want to show you now is how to create a tileable image in Photoshop.
Shifting the image to expose the seam
In Photoshop, choose FilterOOtherOOffset. The Offset dialog box pops up, as shown in Figure 15-4. This filter allows you to adjust the image so you can see where the seams exist. Select the Preview check box, if it isn’t already selected, and select the Wrap Around option. Preview shows you any changes you make in advance, before you apply them, and Wrap Around is the key to using the Offset filter.
The Offset filter in Photoshop is perfect for finding and fixing seams in tileable images.
Horizontal: 0 pixels rtgnt I OK I
Vertical: d pixels down I Cancel I
- ir«3efined Areas OSet to Background O Repeat Edge Pixels ©Wrap Around
The purpose of the Offset filter is to shift the image horizontally or vertically. It’s like pushing the texture up or to the side. When you allow the image to wrap around during this process, it’s like you are wrapping a package. One end starts in the middle of the package, and the other end wraps around the package until it meets up with the starting end. Thus the term Wrap Around.
Because the image you’re working with is 2,048 pixels wide, enter a value equal to half that: 1,024. Place this value in both the Horizontal and Vertical text fields. When you do, the image adjusts itself (because you have Preview selected). The points at which the start and end of the image meet while wrapping will be right in the center of your screen — half way between 2,048
Chapter 15: Creating Custom Textures 253
pixels, which is why you entered an offset value that was half of the image’s total size. The result before applying the change will look like Figure 15-5.
Adjust your image with the Offset filter by half it’s total size both horizontally and vertically.
Horizontal: 102a pixels refit I OK 1
Vertical: 1024 pixels down I Cancel I
- Undefined Areas Oset to Background O Repeat Edge Pixels ©Wrap Around
Press OK to apply the changes created with the Offset filter. You might have a hard time seeing the seam running through your image, but it’s there. In this case, I provided you with an easy image to work with that doesn’t require a lot of adjustment. However, when you zoom in really close to the middle of the picture, you see the seam. This will look even worse when tiled in the game. Figure 15-6 shows a close-up of this mismatch.
After applying the Offset filter, zooming in close shows the seam.
254 Part IV: Going Beyond the Basics
The goal now is to get rid of this seam in the middle of your texture. That way, when it is tiled in the game, you won’t see where one begins and one ends, just like when you used the Offset filter in Photoshop.
If you haven’t zoomed in to where your seams are, do so now. To zoom your image, use the Navigator window either by entering the zoom percentage or by sliding the scale rule. This window is usually in the upper-right corner of the screen and is displayed in Figure 15-7. It is often the simplest way to zoom in on your image.
Move around a large image in Photoshop via the Navigator tab.
Stamping out your seams
Now that you can see the details of the image and where the seam lies, you are going to hide that seam by using a tool called the Rubber Stamp. You use the Rubber Stamp to copy a selected area of the image and apply it to another. Think of the selected part as the ink for your stamp; you just stamp that ink over your seam to make it disappear.
1. Select the Rubber Stamp from the toolbar located on the left of the
The tool’s icon looks like a little rubber stamp.
Next you need to select a brush size.
2. On the toolbar at the top of Photoshop, you can see the word Brush. To the right of it is a dot, a number, and a small arrow used to open a drop-down menu. Select this arrow to open the menu, as you see in Figure 15-8. Then move the slider to the right of the curvy images until you locate the one labeled as 45. Select it, and the window closes.
Chapter 15: Creating Custom Textures 255
The brush size determines how much ink the stamp selects to be applied later. A good brush size for this image is 45. It’s about the same size as the grout between the bricks, which means it will be able to stamp over half the grout while overlapping the brick slightly when used. This should result in a nicely blended stamping as you will soon see.
Select an appropriate brush size for your rubber stamp.
With the tool ready for use, it’s time to select the ink for your stamp.
This tool copies a portion of your image as if it was ink in a pad and then pastes that copy anywhere you want. After you stamp down your first copy, you can continue to stamp on down the seam and the selection of which you are copying from will move with you. If this appears confusing, it will make more sense as you use the tool. If you make a mistake, you can simply undo your last few operations.