Topic: Making Tileable Patterns in GIMP

[fencepost]

In this tutorial, I'll show you how to create a tileable patterns, like the one below, that are a very useful for webpage backgrounds.



Step 1

Decide on the image you would like to use for the repeating pattern.  I'll be using one that I created awhile ago of a moth.  It's best that you use an image that has a transparent background.  If you're not sure how to cut away the background from an image, here are a couple of tutorials you can utilize: You are not allowed to view links. Register or Login

http://www.gimpdome.com/forum/index.php?topic=312.0

& You are not allowed to view links. Register or Login

http://www.gimptalk.com/forum/topic/The-Layer-Mask-Rendering-Method-18687-1.html#148976

Here's the image I'll be working with.  If you don't have any image to experiment with, save this image to your harddrive and follow along with me.



Step 2

Create a New Image in GIMP, with the desired background color.  Since my tileable image is a blue color, I'm going to choose a lighter blue for the background.  Additionally, I'm going to make the image size be a bit larger than my original image.....the larger the image, the less repetitive the pattern and vice versa.

Here's my filled background (200X200 pixels)



Step 3

Now, let's add the original image to the background.  Go to File Menu > Open as Layer



and find the pattern we're wanting to repeat.  Here's a screenshot with the new layer added....



By using the Open As Layer function, GIMP will add the new layer to the background right in the middle of the image, which is what we want.

Notice that the new layer has a dashed box around it.  This dashed line depicts the image boundaries.  We need to make this layer the same size as the image.  To do that, right-click on the new layer in the layer dialog window and choose Layer to Image Size.



Step 4

Now with the upper layer still active, click on the Duplicate Layer Button at the bottom of the layer dialog window.....

Your layer dialog window should now look like this:



Click on the upper layer in the layer dialog window to make it active (highlighted in blue above).

Next, go to Layer Menu > Transform > Offset (Ctrl+Shift+O)



and click on the Offset by x/2, y/2 button and click on the Wrap Around radio button



Your image should now look like this:



Step 5

I like to add a little drop shadow to give the background some depth.  To do that, let's merge the two moth patterns.  The upper layer should still be active, but if it isn't, make it active.  (no screenshot here, we've already covered that process)

Now, go to Layer Menu > Merge Down



The merged layers will now be the active layer....



Go to Script-Fu Menu > Shadow > Drop Shadow



and play around with the settings  (You can always undo them later by doing Ctrl+Z).  I've used the following settings:



and here's what my pattern looks like:



Step 6

Now, to use the pattern, we need to save it in a special location with a .pat extension (the location will be somewhere like this: C:\Program Files\GIMP-2.0\share\gimp\2.0\patterns). 

Go to File Menu > Save (Ctrl+S) or Save As (Ctrl+Shift+S) and go to the location I showed you above.  Then, give the pattern a name (this is the filename) with the .pat extension.....I'm calling mine Moth.pat

The following dialog will appear, click Export



Then assign another name (this one is the one that will appear in the Patterns Dialog Window).  Again, to keep it simple, I'm calling it Moth.



Now, go to the Pattern dialog window (a tab with the most recently used pattern showing.  Mine has the moth pattern so it will look different than yours)

and at the bottom of the window, click on the refresh button 

The pattern dialog window will refresh and your pattern will now be available. 



Now, create a new blank image and click on the pattern you just created and drag it over your new image and let go of the mouse button and your pattern will fill up the screen.  Here's a link to the one we've just created.....

You are not allowed to view links. Register or Login

I hope you've found this tutorial to be helpful.  C&C always welcome.  Let me know if you need anything clarified.

Cheers!

Art

[HippieKender]

Very nice tutorial, Fence.  Thanks for sharing it! 

[paladin169]

Awesome tut, made a couple patterns with some gimp brushes

[fencepost]

Thanks!  I actually made my original pattern from a brush.  Dingbat fonts work great for this!