We use seamless texture tiles in website backgrounds, as pattern swatches in Illustrator or Photoshop, and even to create dynamic textures in game graphics (as seen in Tiny Wings, for example).
Unfortunately for Photoshop lovers, there is no truly easy way to make a seamless tile in Photoshop.
Fortunately for us all, GIMP makes it ridiculously easy to do just that. And GIMP is free! If you don’t have it, go download it here. It’s worth downloading for this feature, even if you already have Photoshop.
We’re going to focus on creating a randomly generated texture, but you can apply this method to a photo as well.
Step 1: Create the random texture
Open A New Document
Open GIMP. Go to File>New. Enter the size you want your tile to be; I chose 200×200 pixels. Click OK.
You now have a blank canvas. Make sure your background and foreground swatches (in the Toolbox panel) are set to the default white and black.
If they are not, click the little black and white swatch icon next to the background and foreground swatches.
In the menu bar, go to Filters>Render>Nature>Flame. In the dialog that pops up, you can change the settings around if you wish and see a small preview.
Flame is a very variable filter – you will get something completely different each time. You can find all the variations by clicking the “Edit” button at the top.
This is what I have; you will have something else depending on how the Flame filter worked. Let’s see how it looks tiled:
Yuck, those seams are ugly. So now let’s use the power of GIMP to get rid of them!
First, however, let’s save the image.
Go to File>Save, navigate to the folder you want to save the image in, and type in a name.
I find it helpful to put the image size after the name so that when I’m looking for it later I can easily choose the right image (I often have different sizes of the same image).
I chose “texture_flame_200″. GIMP will save it as a .xcf file.
Step 2: Make the Tile Seamless
Go up to Filters again and choose Filters>Map>Make Seamless.
Yes, it’s that easy. Why Photoshop doesn’t have this capability, I have no idea.
Keep reading to see it tiled!
Try It Out In A Web Browser
Most of the time, you can’t get the real effect of the texture until you try it out. Sometimes there are annoying patterns that make the texture look fake. Here is the easiest way I’ve found to test it out:
Save the image as a PNG
Go to File>Save A Copy. At the top where the file name is, change the extension to .png. In the dialog box that opens, click OK.
Make a .html file
Open Notepad or TextEdit. Make sure you are in Plain Text mode (rather than Rich Text). Copy and paste the following code (inserting your filename where I have “texture_flame_200.png”):
<html> <body background="texture_flame_200.png"> </body> </html>
Save this as a .html file in the same folder as your texture tile.
Open the .html file
Open Finder (or Windows Explorer), go to the folder your .html file is save in, and double-click it.
Your web browser should pop up and display a new tab or window, with your texture tile repeated as a background image.
Here’s my result.
If you don’t like the pattern that emerges, try a few other types of renderings. You can also just undo a couple of steps and start over, since each time you render you get a random result.
Here are some other textures and how I got them:
This one is extra-cool because there is a check-box you can select to make the texture tileable right in the dialog window.
Default settings. Shown after the Make Seamless filter is applied.
Default settings. Since this gave me a colored image and I wanted a black and white texture, I went up to Colors>Desaturate. I chose the “Average” option, and clicked OK.
Then I ran the Make Seamless filter.
If you want your texture’s black and white areas to be reversed, choose Colors>Invert.
Add Some Color
It’s best to make your textures in black and white, and layer them over a color.
First, rename your texture layer in the Layers panel.
Double-click the name, and change the text from “Background” to “Texture”.
Click the “Create New Layer” icon in the Layers panel (the paper sheet icon in the bottom left).
Choose the layer fill type (I chose white, but if your foreground or background is set to the color you want to fill it with, select that), and click OK.
Drag the new layer underneath the texture layer in the Layers panel.
Fill The New Layer With Color
Double-click your foreground color in the Toolbox panel, and choose a new color. I chose tan. Then go to Edit>Fill With FG Color.
Your image won’t change. That’s because your black and white texture is covering the color layer. We need to change the blending mode of the Texture layer.
Select the Texture layer in the Layers panel.
Click the arrows next to Mode, and select Multiply.
You should now see your texture, colored.
If you or your client decides the color needs to be tweaked, it’s easily changed by editing the color layer underneath the texture layer.
You can also try out different blending modes, or decrease the opacity of the texture layer.
Remember to save the .xcf file so that you can come back and make changes, and save copies as PNGs to use in your projects.
You can edit PNGs in GIMP and add layers, but once you save and close the file, the layers are merged and you can no longer edit each separately. If you want to keep the image editable, you need to save it as a .xcf file.
Have another way to create seamless textures?
I’d love to hear it! A more advanced tutorial is in the works for when this one-button method of creating seamless textures doesn’t give you the look you want.