Report article RSS Feed Creating Tiled Textures

The most basic way of creating tiled textures in adobe photoshop.

Posted by Kakihara on Dec 13th, 2004
Basic Textures.

[page=Introduction]
Welcome to this tutorial! This shouldn't be too hard for you to do, so lets get started!

[page=Step one]
What we need first is a good initial texture. I shall use the following, but anything goes.

Tutorial Image

Do make sure you're using a reasonably good quality though! Otherwise it might look horrible in game.

[page=Step two]
Open your image up in photoshop. What you want to do now is to make sure that the width and height of the image are both even. Luckily my texture already is, but if yours isn't you can easily adjust that with:

Image >> Canvas Size
And enter two even numbers (decreased only one or two in size!!) for instance 763x157 would become 762x156.

[page=Step three]
And now for the real magic! Do this:

Filter >> other >> Offset
This should prompt you with a new window. At width you enter the value of 50% of the width of your file, same goes for height. So in my example we'd have to enter: Horizontal: 350
Vertical: 262

Also select the "wrap around" function.

[page=Step three]
Now remove obvious blemishes using the Healing Brush Tool(J).

Tutorial Image

I will not go into detail of using that tool, as it is listed in the help file of photoshop.Here is what I've got up to this point:

Tutorial Image

[page=Step four]
If you did everything right up to this point you should now see a vertical and a horizontal line through your texture. No problem! Time to fix that up the same way as in step three, with the Healing Brush Tool.
If you're done with that do the offset filter again. Just press control + F for that. If you see a cross again, you want to remove it again. If you don't see it, go on to the next step. If you do, repeat this step until you don't.

[page=End]
Well! You're done. You now have a texture that can easily be tiled! Congratulations!

Feel free to contact me if you have any questions.

Post comment Comments
Mago
Mago Jan 3 2005, 7:22am says:

Thanks for this, I get the feeling most mods out there don't have access to even this little function in Photoshop, that can be a really powerfull tool if you put some work into it. I acutually use Paint Shop Pro, but thanks anyway, I'm sure a lot fo people will find this very useful. ;)

+1 vote     reply to comment
Quickson1
Quickson1 Mar 12 2005, 2:26pm says:

very interesting, my two favorite steps are three and three;)

+1 vote     reply to comment
Qwertyz
Qwertyz Jul 18 2006, 5:23pm says:

Yer fix the images please?

+1 vote     reply to comment
Chunky
Chunky Nov 13 2005, 5:35pm says:

broken images :(

+1 vote     reply to comment
mirrored
mirrored Sep 21 2006, 3:43am says:

Sorry, but where are the tutorial pictures?

+1 vote     reply to comment
five_damned_dollarz
five_damned_dollarz Oct 27 2006, 10:27pm says:

Awesome, thanks alot :D (Also works for website backgrounds ;))

+1 vote     reply to comment
CadianConscript
CadianConscript Feb 27 2007, 3:00am says:

Could this be done with GIMP?

+1 vote     reply to comment
univiii
univiii Mar 18 2007, 12:32pm says:

he says to make sure the width and height of the image are the same (so it's a square), but then he uses the numbers 762 x 156. What are those numbers? if they're the width and height, then its obviously not a square. someone help please

+1 vote     reply to comment
univiii
univiii Mar 18 2007, 12:55pm says:

i understand that setting the OFFSET to both half of the width and height would allow for the cross seams to form in the middle, and if you can get all the axes to blend together, then when you tile it all the edges of the texture will blend together. So i understand your tutorial, but i think your use of numbers made it confusing. if you can explain your numbers a bit more, i might be able to get even more out of the tutorial, because it seems as if you dont need a texture with equal width and height. Am i right?

+1 vote     reply to comment
Post a Comment
click to sign in

You are not logged in, your comment will be anonymous unless you join the community today (totally free - or sign in with your social account on the right) which we encourage all contributors to do.

2000 characters limit; HTML formatting and smileys are not supported - text only

Tutorial
Browse
Tutorials
Report Abuse
Report article