Seamless Tileable Textures with Photoshop
by Joshua Dallman · 09/28/2004 (9:08 am) · 13 comments
*** Preparation ***
1) Go to FILE-->NEW and select a square height and width (i.e. 250 by 250)
2) Make your foreground color black and your background color white
3) Go to FILTER-->RENDER-->CLOUDS
4) Repeat step #3 until you have a random cloud pattern that you like
5) Go to IMAGE-->CANVAS SIzE and double your height and with (i.e. 500 by 500)
6) Go to VIEW-->RULERS
7) Go to VIEW-->SNAP
8) Go to VIEW-->SNAP TO-->ALL
9) Click on the top ruler and drag a blue ruler line to the square's top
10) Click on the top ruler and drag a blue ruler line to the square's bottom
11) Click on the left ruler and drag a blue ruler line to the square's left side
12) Click on the left ruler ad drag a blue ruler line to the square's right side
*** Vertical seamless ***
13) Select the RECTANGULAR MARQUEE TOOL
14) Change the FEATHER value to 10px
15) Starting in the top left corner, drag the mouse all the way right, then down enough to select the top quarter of the texture
16) Go to EDIT-->COPY
17) Go to EDIT-->PASTE (this should be called LAYER 2)
18) Go to EDIT-->FREE TRANSFORM
19) Click on the right-most handle of layer 2 and drag it all the way left to reverse the image
20) Click near the image's center and move it right to align the right side of layer 2 with the rightmost blue guide
21) Click on the left-most handle of layer 2 and drag it left to align with the leftmost blue guide
* Layer is now "flipped," we just have to rotate and position it *
22) Move your mouse just above layer 2 until you see the "rotate" mouse icon
23) Hold down SHIFT and rotate layer 2 180 degrees (upside down)
24) Press ENTER to complete the free transform
25) Move layer 2 down to align to the bottom blue guide
26) Go to the LAYER menu and select MERGE VISIBLE
*** The texture is now vertically seamless! Now let's make it horizontally seamless ***
27) Select the RECTANGULAR MARQUEE TOOL
28) Starting in the top left corner, drag the mouse all the way down, then right enough to select the left quarter of the texture
29) Go to EDIT-->COPY
30) Go to EDIT-->PASTE (this should be called LAYER 3)
31) Go to EDIT-->FREE TRANSFORM
32) Click on the top-most handle of layer 3 and drag it all the way down to reverse the image
33) Click near the image's center and move it up to align the top side of layer 3 with the top blue guide
34) Click on the bottom-most handle of layer 3 and drag it down to align with the bottom-most blue guide
* Layer is now "flipped," we just have to rotate and position it *
35) Move your mouse just left of layer 3 until you see the "rotate" mouse icon
36) Hold down SHIFT and rotate layer 3 180 degrees (upside down)
37) Press ENTER to complete the free transform
38) Move layer 3 right to align to the right blue guide
39) Go to the LAYER menu and select MERGE VISIBLE
*** The texture is now vertically seamless! Now let's check how it looks ***
40) Go to IMAGE-->CANVAS SIZE and restore the original canvas size (i.e. 250 by 250)
41) Go to FILE-->SAVE FOR WEB-->SAVE and save it to your desktop
42) Open an Internet Explorer window and drag and drop the icon from your desktop to the browser window
43) Right-click the image in Internet Explorer and select SET AS BACKGROUND
44) Right click on your desktop, select PROPERTIES, select the DESKTOP tab, change the POSITION option to TILE
45) Click APPLY then OK
46) Close all windows (or press WINDOWS KEY + M) to preview your seamless texture!
1) Go to FILE-->NEW and select a square height and width (i.e. 250 by 250)
2) Make your foreground color black and your background color white
3) Go to FILTER-->RENDER-->CLOUDS
4) Repeat step #3 until you have a random cloud pattern that you like
5) Go to IMAGE-->CANVAS SIzE and double your height and with (i.e. 500 by 500)
6) Go to VIEW-->RULERS
7) Go to VIEW-->SNAP
8) Go to VIEW-->SNAP TO-->ALL
9) Click on the top ruler and drag a blue ruler line to the square's top
10) Click on the top ruler and drag a blue ruler line to the square's bottom
11) Click on the left ruler and drag a blue ruler line to the square's left side
12) Click on the left ruler ad drag a blue ruler line to the square's right side
*** Vertical seamless ***
13) Select the RECTANGULAR MARQUEE TOOL
14) Change the FEATHER value to 10px
15) Starting in the top left corner, drag the mouse all the way right, then down enough to select the top quarter of the texture
16) Go to EDIT-->COPY
17) Go to EDIT-->PASTE (this should be called LAYER 2)
18) Go to EDIT-->FREE TRANSFORM
19) Click on the right-most handle of layer 2 and drag it all the way left to reverse the image
20) Click near the image's center and move it right to align the right side of layer 2 with the rightmost blue guide
21) Click on the left-most handle of layer 2 and drag it left to align with the leftmost blue guide
* Layer is now "flipped," we just have to rotate and position it *
22) Move your mouse just above layer 2 until you see the "rotate" mouse icon
23) Hold down SHIFT and rotate layer 2 180 degrees (upside down)
24) Press ENTER to complete the free transform
25) Move layer 2 down to align to the bottom blue guide
26) Go to the LAYER menu and select MERGE VISIBLE
*** The texture is now vertically seamless! Now let's make it horizontally seamless ***
27) Select the RECTANGULAR MARQUEE TOOL
28) Starting in the top left corner, drag the mouse all the way down, then right enough to select the left quarter of the texture
29) Go to EDIT-->COPY
30) Go to EDIT-->PASTE (this should be called LAYER 3)
31) Go to EDIT-->FREE TRANSFORM
32) Click on the top-most handle of layer 3 and drag it all the way down to reverse the image
33) Click near the image's center and move it up to align the top side of layer 3 with the top blue guide
34) Click on the bottom-most handle of layer 3 and drag it down to align with the bottom-most blue guide
* Layer is now "flipped," we just have to rotate and position it *
35) Move your mouse just left of layer 3 until you see the "rotate" mouse icon
36) Hold down SHIFT and rotate layer 3 180 degrees (upside down)
37) Press ENTER to complete the free transform
38) Move layer 3 right to align to the right blue guide
39) Go to the LAYER menu and select MERGE VISIBLE
*** The texture is now vertically seamless! Now let's check how it looks ***
40) Go to IMAGE-->CANVAS SIZE and restore the original canvas size (i.e. 250 by 250)
41) Go to FILE-->SAVE FOR WEB-->SAVE and save it to your desktop
42) Open an Internet Explorer window and drag and drop the icon from your desktop to the browser window
43) Right-click the image in Internet Explorer and select SET AS BACKGROUND
44) Right click on your desktop, select PROPERTIES, select the DESKTOP tab, change the POSITION option to TILE
45) Click APPLY then OK
46) Close all windows (or press WINDOWS KEY + M) to preview your seamless texture!
About the author
#2
09/28/2004 (10:00 am)
Effects>Images>Make seamless for PSP owners
#3
09/28/2004 (11:37 am)
Alternatively you can use the PS filter "Offset". Offset the image by half its width and height, and then use whatever tools in your arsenal to clean up the seams in the middle.
#4
09/28/2004 (12:31 pm)
Also note: "FILTER-->RENDER-->CLOUDS" in Photoshop will automatically tile both horizontally and vertical. Of course just the clouds would tile correctly but, when using a solid color (as in your example) you really don't need to do anything but run the filter.
#5
09/28/2004 (12:46 pm)
@Eric: I just double-checked, and FILTER-->RENDER-->CLOUDS does not automatically tile in my version of Photoshop (7.0). In any case, I just used the cloud render to create a sample texture to work with for the tutorial.
#6
09/28/2004 (12:59 pm)
@Joshua, yeah there is a setting for it to tile (I have 7 too, sry can't remember atm?).
#7
09/28/2004 (5:58 pm)
Yeah, make seamless is what I use as well. Personally I don't think they should approve any resources that don't reinforce proper TGE design. For example, if you are going to make textures for TGE, the last thing you want to do is make them 250 x 250 or 500 x 500 when TGE needs 256 x 256 or 512 x 512. 
#9
09/29/2004 (4:44 am)
Uhm, just a quick ammendment... the clouds filter creates textures that are 256x256 in size... if you do 250x250, it WON'T be tileable.... If you do 512x512, you'll end up gettin' 4 identical 256x256 texture in each corner... so not sure how he missed it, but yeah, start with a 256x256, scale to 512, and THEN it'll be tileable, and will work with TGE.
#10
/me guards his top secret seamless technique like gold
09/29/2004 (9:20 am)
Just remember, No filter is a replacement for the quality of doing it by hand. :-)/me guards his top secret seamless technique like gold
#11
-Jase
09/29/2004 (11:10 am)
Filter -> Pattern Maker in photoshop will also do autoseams, but can sometimes extremely distort the image.-Jase
#12
09/29/2004 (12:04 pm)
Offset was mentioned above, but a case wasn't really made for it. I find that all the autoseam plug-ins I have used leave the seams blurry and muddled. Using offset and the clone brush give a much more crisp and pleasing look.
#13
You can achieve different effects by modifying different parts. For example, set feather to higher or lower than 10px. Or select more or less than a quarter of the image to copy -- or use the right and bottom sides instead of top and left. Again, this tutorial is just to show the process. Once you get the idea, you can experiment from there. And this definitely isn't the only way to do it -- it's just one way. I encourage others to write tutorials stepping through others.
Above I say that once you get the process down, you can go through it in 5 minutes. That's not true. You can do it in about 2.
09/30/2004 (12:07 pm)
This tutorial was made just to show someone an example of how to use it. Of course for Torque specifically you want to use 256x256 (or 512x512 etc). For tutorial purposes all that matters is that the surface area is square.You can achieve different effects by modifying different parts. For example, set feather to higher or lower than 10px. Or select more or less than a quarter of the image to copy -- or use the right and bottom sides instead of top and left. Again, this tutorial is just to show the process. Once you get the idea, you can experiment from there. And this definitely isn't the only way to do it -- it's just one way. I encourage others to write tutorials stepping through others.
Above I say that once you get the process down, you can go through it in 5 minutes. That's not true. You can do it in about 2.
Torque 3D Owner abc
abc