Make a Gimp pattern from scratch
In this tutorial i will show you how to create a metal like textured pattern from scratch as well as adding text with an engraved effect to it. This could be useful for website backgrounds that repeats as well as signatures,headers etc.
Will start by first creating the actual pattern design and then how to save and place it in the correct folder, and finally creating an example using the pattern with some text.
Step 1:
Create a new 8x8 image.

Step 2:
So that we can see what where doing, will set the zoom level to 1600%, you could make it bigger if you wish.

Now will get to the part where it becomes very repetitive and sort of boring, but its worth it, what will do is create two different pattern boxes which have 8 different colours with in them. once we have these two boxes will duplicate them to create a checkered pattern.
Here is what were trying to do.

Step 3:
Grab the "rectangle selection tool" and draw a s small 1px square and fill it with the colour 4C4C4C using the "bucket fill tool"
Tip when creating your selection hit enter to start editing within your selection.

Step 4:
Again create another 1px square but this time add the color 494949

Step 5:
Create another 1px square with the colour 383838

Step 6:
Create another 1px square for this box and fill it with the color 373737

Now that we know how to create and fill these little 1px boxes will want to create another four using the colours shown in the image below.

Step 7:
If you have reached here then your pattern is almost done :) will want to grab the "rectangle selection" tool and draw a selection over both boxes we have made.press enter once you have it selected.

Step 8:
With the selection still active on the two boxes Press CTRL+C to copy and then CTRL+V to paste it, then in the layer dialog you will need to click on "new layer".

Step 9:
With the "move tool" or shortcut (M Key) move it to the right side. as you can see by now will be able to duplicating the boxes to create the checkered pattern i showed earlier .

Step 10:
To make it easier when copying cretin parts , will need to flatten all the layers.
this can be done by right clicking on the new pasted layer and selecting "Merge visible layers"

So now you know how to copy and paste selected areas will want to duplicate it many times to create a fully checkered pattern. Just be sure to create a new layer as well as flatten when pasting copied selections. here is how it should look.

Step 11:
Save the file to your desktop as .Pat

Right, we've finished with our pattern design and have saved it using the .pat format for gimp patterns, now will need to place it in the correct folder so that is shows up in gimp pattern dialog.
Step 12:
In the gimp tools box click on File>Preferences, when the preference window shows up
go to folders, and notice the path of the pattern folder, in my case it was C:\Documents and Settings\Administrator\.gimp-2.4\patterns place the pattern we created in that folder following that path , close gimp and re-open it again and it should be showing up inside gimp's patterns now.

So we have our pattern working perfectly in gimp, now ill make a simple banner/sig using the pattern as an example for this tutorial
Step 13:
Create a new image 500x100, go to your pattern dialog and drag out pattern to the empty image.

Step 14:
Now for the text i chose the colour e8e8e8 and the font "Trebuchet MS Bold" and the size at 48px as well as 6.0 for letter spacing.

This is how mine looks.

Step 15:
Right click on the text layer and select "alpha to selection" then in the menu click go to select>grow to 4

Step 16:
Create a new layer and make sure its behind the the text layer

Step 17:
set your foreground color to black and in the gradient dialog select the "FG To transparent" then with the blend tool drag from top to bottom.

Do the same for the gimp text and thats it your done, its really simple i know but I'm sure someone might find it useful.

Source files attached below. enjoy:)
We offer all kinds of certification exams including 642-681 dumps and JN0-332 certifications. Our guaranteed testking 70-647 are freely accessible all around the world of 70-448 with testking 642-637.
- 177408 reads












Re: Make a Gimp pattern from scratch
Thanks, this pattern is cool! ^^
Just a question : At the beginning, why do you use a 1*1 pixel selection that you fill, and not the 1*1 pencil? Isn't it more difficult to use?
Re: Make a Gimp pattern from scratch
your right, pencil would be faster, i don't know why i didn't think of that my self. might be because I'm so use to using the selection tool for everything so its much more convenient for me :) ill add in the pencil steps later on today.
thanks
Re: Make a Gimp pattern from scratch
This was a very helpful tutorial. Thank you!
nice tut gimper
nice tut, as usual :P
??
I just made a different pattern using this tut. Saved it to desktop as a .pat file like you said, then moved it to pattern folder. I've closed and reopened GIMP a couple of times but still do not see the pattern I made. I looked in the folder and it is there and I can open it with GIMP, just not use it as a pattern. Am I missing something?
Well done!
You've done a wonderful job! I've been looking for a tutorial like this previously.
pattern
when saving it be sure thats your saving to the wirtbale pattern folder.. see step 11 image for the the path of your witrbale pattern folder.
Quote:You've done a wonderful job! I've been looking for a tutorial like this previously.
thank you.
Copy/Paste
You don't have to copy and paste so much. Only steps 1-5 are relevant if you want to make a pattern. It repeats by itself.
Nicely Done
Really easy to follow and nice outcome. I used thicker squares, though.
Re: Make a Gimp pattern from scratch
Thank you for this. I am new to image creation and this is exactly something I was looking for to put on my new website. Only changes I would note were the use of pencil vs select and when you saved the final product you did so as .xcf, which didn't work for me on the web. Browser just didn't show it. I resaved it as .gif and it worked perfectly.
Do you know a good source on the differences between the various image extensions, their benefits or shortcomings?
Thanks again, this was really helpful.
i actually saved it as .pat
i actually saved it as .pat so it can be used as a pattern inside gimps pattern dialog.
.XCF is GIMP's source file but it won't work with any other program.
jpg/png/gif all have there pros & cons here is a nice article to read http://info.eps.surrey.ac.uk/FAQ/standards.html
Re: Make a Gimp pattern from scratch
Your spelling is horrible. Fix it Please.
Re: Make a Gimp pattern from scratch
Wonderful tutorial, Gimper!
However, I am a bit confused on the Alpha to section part. I am a novice to GIMP, and whenever I do your steps, my entire text is alpha-ed!
Re: Make a Gimp pattern from scratch
I am sorry, but I just started GIMP. What do you mean by 'go to the menu and grow to 4'?
Re: Make a Gimp pattern from scratch
in the canvas window in the menu go to select then click on Grow inside enter 4px for the value.
Re: Make a Gimp pattern from scratch
Hey, this is a really great pattern :)
Thanks
Corey P.
[url=http://atdaysend.l4dforums.com]At Day's End -- Zombie Fiction[/url]
Re: Make a Gimp pattern from scratch
ok i was gettin it at first but at step 15 ya lost me
Re: Make a Gimp pattern from scratch
if your using Gimp 2.4 then it should work.
I love this! O(^_^)O P.s i
I love this! O(^_^)O
P.s i love that icon of yours. ;)
Re: Make a Gimp pattern from scratch
In my german version of gimp is the shortcut of the move tool the v key and not the m key but i think you've done a great job really good and easy tutorial that understands everybody
Re: Make a Gimp pattern from scratch
I can use this to make a personalized text header for my web page. Thanks!
Re: Make a Gimp pattern from scratch
Very nice tutorial...i'll be using this for background on my website! Thnx!
Thanks, really nice
Thanks,
really nice tutorial! (as usual)
some things in web/grafic design are that easy...you won't guess.
greetz from germany
graffcon
Re: Make a Gimp pattern from scratch
Once I've done the gradient thing how do I get the text to be un-alphaed? It has white lines that move around it. This is probably really simple but I can't do it :(
i don't have a dialog menu i
i don't have a dialog menu i have a window menu instead, so i can't find the pattern i saved
lynn, This tutorial was done
lynn,
This tutorial was done in GIMP 2.4, in GIMP 2.6 which I assume your using go to Windows>Dockable dialogs>patterns.
great tute Gimper, love it,
great tute Gimper, love it, now thats all im gonna do!
My
My result...
http://hackuity.deviantart.com/art/Carbon-fibre-Mac-113878758
great post !! I read a few of
great post !!
I read a few of your other entires.where can i subscribe to your blog?
Thank you for sharing.
My rate for this is...
My rate for this is... AWESOME! since i leave photoshop, i'am confuse how to make a pattern... (in photoshop u create it in define pattern). thanks God i found this website... lol
Great Tutorial again,
Great Tutorial again, Gimper!
This would be really useful on my website headers or banners. You Rock!
Keep it up Gimper, You'll get some more friends(You know what I am thinking?!......)!
so much great stuff and so
so much great stuff
and so little time in every day.
this is one site added to my bookmars...
That's the coolest pattern
That's the coolest pattern and tutorial I have seen for a long time, thanks
its nice.
its nice.
could you put the gimp
could you put the gimp texture file up on this site or tell me where i can get it cuz i cant be bothered to make it. lol but nice tutorial and good idea seen this texture used alot.
Thanks for sharing Gimper,
Thanks for sharing Gimper, very nice tut :)
I would just like to add, for all those Vista (and possibly Win7) users out there: Do not skip that step where it says: "...save your .PAT file to your DESKTOP". Saving directly to the patterns folder may look like it saves the file there, but it really doesn't (Vista won't allow it, but it won't tell you either). Just save it to the desktop instead, then do "cut" to move it, go to the patterns folder (as indicated in this tutorial), and paste it there. At that moment a popup window will ask you to confirm (maybe twice), confirm the move. NOW it'll work.
Btw, not sure if it was mentioned, but right after you click save, a tiny popup window titled "Save as pattern" will offer you to name your pattern. The default name will be "GIMP pattern". I strongly advice you to change it to something meaningful related to that pattern (often the same name of the file you're saving). Why? So that when you open GIMP and open the list of patterns, you can easily find it alphabetically. By default it'll open the patterns in a grid ("View as grid"), just switch to "View as list", and you're set!
My 2 cents :)
JDL
Mmm, nevermind about the
Mmm, nevermind about the latter advice (about the meaningful name) - rolling eyes - It just doesn't work for me :( It keeps calling it GIMP pattern once it's in the patterns list. Odd.
JDL
Post new comment