22 June 2011

Tutorial: How To Create A Seamless Texture in GIMP


Often, we need a textured background, or a texture to overlay other objects. Most of the time we need a seamless tile so that it can repeat indefinitely.

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

Create 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.

 

Apply A Filter 

Choose the Flame filter

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.

Click OK.

 

Filter Results

The result of the Flame filter

This is what I have; you will have something else depending on how the Flame filter worked. Let’s see how it looks tiled:

 

When tiled, this image looks pretty choppy.

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.

Save the document as a .xcf

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

Make it so!

Go up to Filters again and choose Filters>Map>Make Seamless.

 

The seamless tile

Done.

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.

Much better - no edges to be seen.

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:

Filters>Render>Clouds>Difference Clouds

The difference clouds filter

This one is extra-cool because there is a check-box you can select to make the texture tileable right in the dialog window.

See it tiled here.

 

Filters>Artistic>Apply Canvas

The canvas filter

Default settings. Shown after the Make Seamless filter is applied.

See it tiled here.

 

Filters>Lava

Lava tile


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.

See it tiled here.

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.

Rename Texture Layer

Rename your texture layer first.

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).

 

Create New Layer

Create a new layer in the Layers panel

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.
 

Change Texture Layer’s Blending Mode

Choose Multiply for the color mode.

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.

Now our canvas has a nice tan color!

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.

Category: Tutorials

Tags: , , ,

17 Comments

  1. It’s great to see a post about Gimp, I know not everyone can justify the expense of Illustrator and it’s great to see a pro acknowledge that and try to serve the up and coming pro.

  2. A person says:

    I agree, for those of us who can’t get photoshop/illustrator it’s great to see a post about Gimp. Keep ‘em coming!

  3. RedPesto says:

    Wowzers! This is so perfect for my current project, I can’t thank you enough :D

  4. “Yes, it’s that easy. Why Photoshop doesn’t have this capability, I have no idea.”

    Thumbs up for that! :-)
    There are so many things I was scratching my head while using gimp, but this makes seamless tiles really a no brainer!

    Thx for sharing this.

  5. vwenderlich says:

    Glad you guys found it useful. I hardly ever use GIMP since I have Photoshop and Illustrator, but for this particular function it is invaluable.

  6. Maggie says:

    I like your tutorial, but every time i try to get something like the B&W image in step 1, it looks nothing like that in the example. I go to Render->Flame and enter in a few values but mine ends up looking a little like a jigsaw puzzle and it doesn’t fill the whole layer.

  7. vwenderlich says:

    Maggie: I think I figured out what’s happening. I went and redid the Flame rendering, and I got something completely different both from what I had before and from what you described!

    I started over, and clicked “Edit” up at the top of the Flame dialog box, and it turns out that there are dozens of variations within the Flame filter. It randomly picks one. Try looking through them (find them in the dropdown menu next to “variation”) and choosing one for the Flame filter to use.

    Let me know if that helps!

  8. Dean says:

    Maggie, as it says above in the tutorial

    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.

    So having something different, is completely normal

  9. Panos says:

    Nice tutorial. Thank you for providing it.

  10. Touchy says:

    Ms Wenderlich you are Wunderbar!

    Needed this to get over ugly terrain tiling in Unity.

  11. Waqqas says:

    One of the best tutorials for GIMP i’ve ever read. Perfect for a complete beginner. Thanks :)

  12. avn rocky says:

    A Big Hug :D

    Thank you so much, you saved my day.

    Cheers!
    Avn

  13. Richard says:

    Thanks for this nice tutorial.Creating seamless bg tiles for any web designer is an essential skill and this was a good refresher for me (I’ve done it in the past but a bit rusty with the process). GIMP is a good free alternative to PSD and sure worth having and using!

    (BTW do you know this comment box is not displaying properly in Firefox 21.0?? Check your source and try & fix it?)
    Thanks and best wishes :-)

  14. Enrico says:

    Great tutorial, well documented and clearly explained.
    Thanks for sharing!

  15. aaa says:

    photoshop has it as an additional plug-in.
    btw professional artists tile textures on a hand and they have better quality than using tiling generators.
    hand made textures are not cheap

  16. GreenEcotrip says:

    Thanks, Excellent.
    You could test final level in GIMP rather than HTML code and browser.
    Just go Filters>Map>Tile Options

  17. Tassos says:

    Many thanks for your excellent post.
    This should be in the default gimp documentation.

Leave a Comment

I'd love to hear your thoughts!