Tutorials:Seamless Textures - Revision history

HystericalParoxysm: /* Where to go from here... */

2007-07-25T13:31:58Z

‎Where to go from here...

HystericalParoxysm: /* Alternate Technique */

2007-07-25T13:17:15Z

‎Alternate Technique

HystericalParoxysm: /* Getting the Seamless Piece */

2007-07-25T13:15:37Z

‎Getting the Seamless Piece

HystericalParoxysm at 13:10, 25 July 2007

2007-07-25T13:10:32Z

HystericalParoxysm at 12:07, 25 July 2007

2007-07-25T12:07:09Z

HystericalParoxysm at 12:05, 25 July 2007

2007-07-25T12:05:56Z

HystericalParoxysm at 11:17, 25 July 2007

2007-07-25T11:17:58Z

HystericalParoxysm at 10:14, 25 July 2007

2007-07-25T10:14:57Z

HystericalParoxysm at 09:31, 25 July 2007

2007-07-25T09:31:59Z

New page

This tutorial will explain the basic techniques for creating seamless textures from non-seamless images. This is a great technique for making wallpapers, floors, and fabrics for skinning - among other applications, of course.

==Finding the Right Source Image==

Locating source images is always an interesting treasure hunt. The best place to start is Google - both Google Image Search and Google itself are great resources for finding source images. Finding exactly what you want can be tricky, but here's some tips:

* Try both Google and Google Image Search (GIS) for each of your searches. You may come up with nothing on one, and great stuff on the other.
* Be specific. "Wallpaper" will give you way too much stuff, but "damask wallpaper" or "striped wallpaper" may begin to give you some good hits.
* Try a variety of keywords, and just keep trying different variations. Try to think of different applications and things something might be called - "sweater" may not find you really usable pics, but "knit" and "knitted" may be better.
* If you find that you're getting a lot of good pics with a certain keyword in GIS, but they're all too small and far away, try adding the word "close" to your search. For example, if you were doing well with "damask fabric" but want more closeups try searching for "damask fabric close" instead.
* Think outside the box. Just because you're making wallpaper doesn't mean you can't use a fabric image as your source as long as it's appropriate in overall look.
* GIS is a great way to get an idea of what kind of images you'll be getting from a site - so if you notice one really good pic, go to the main site where the pic is located and see if they have more good stuff. You'll often find your best sites by stumbling across one image on GIS.
* Bookmark the best sites, with a descriptive name in your bookmarks (i.e. "Site Name - Really great retro fabrics!") and keep them in folders. Then you don't have to start searching from scratch for every project.

===Repeats===

First, and most importantly, you'll need a texture with at least one full repeat that you want to make seamless.

A repeat simply means that you have a full panel of texture, the whole thing, and aren't missing any parts. If your source image has part of a flower cropped off, and that flower doesn't appear again in the rest of the texture that same way, you aren't going to be able to make a seamless texture - you don't have a full repeat.

It'll take some skill and practice to identify a repeat, and even after you've been doing it a while, you may still find you've already got something halfway through editing to seamless before you realize you have a small hole that you don't have a repeat for.

For some textures, identifying a repeat is easy:

[[Image:Seamless2.jpg|center|300x300px]]

And for others, seeing that you don't have a full repeat can be a bit more tricky:

[[Image:Seamless1.jpg|center|300x300px]]

You want to make sure that you have both a horizontal and vertical repeat... and sometimes when you just barely have one with a complex pattern, seeing that there's a full repeat there is difficult:

[[Image:Seamless3.jpg|center|300x300px]]

===Size===

You also need to make sure you have source images that are big enough for what you're going to be using them for. For creating sims stuff, we have a bit of an advantage, as most of our textures are on a fairly small scale - you'll generally find yourself scaling things down, not up. If your source image is too small and you try to scale it up, it'll look blurry and crunchy and awful.

===Quality===

Again, being able to scale down for a lot of sim stuff can make this not as important as other applications, but if your source image is blurry and crunchy and weird, your textures will not come out looking too nice either.

===Overall Even Tone===

This one is VERY important for making any seamless texture. You need to have an even tone to the image - it can't get darker toward the top and lighter toward the bottom due to the way the person taking the picture was holding the camera, or the lighting, or suchlike. You need to be able to match up parts in the image, so it has to be nice and even overall.

Dark or light areas may take what would have been a pretty easy image to make seamless and make it really hard to do without a whole lot of extra work:

[[Image:Seamless4.jpg|center|300x300px]]

===Skew===

Your image should be as close to straight up and down as possible, with no skewed distortion. It's okay if it's rotated - but actual distortion like ripples, stretching of fabric, or strange perspective due to camera angle should be avoided as much as possible.

You can see in this image, corresponding areas of the pattern do not match in size and shape very well - this would be an extremely difficult images to make seamless as a result.

[[Image:Seamless5.jpg|center|300x300px]]

@@ Line 254: / Line 254: @@
 ==Where to go from here...==
-* Want to learn how to take that seamless texture and put it on a skirt with realistic folds and shading and stuff like my example above?  Check out [http://www.modthesims2.com/member/showthread.php?t=136712 Beyond Photoskinning: Transformation and Displacement Mapping in Photoshop]
+* '''Clothing:''' Want to learn how to take that seamless texture and put it on a skirt with realistic folds and shading and stuff like my example above?  Check out [http://www.modthesims2.com/member/showthread.php?t=136712 Beyond Photoskinning: Transformation and Displacement Mapping in Photoshop]
 [[Category:Tutorials]]

@@ Line 207: / Line 207: @@
 * Start by creating a nice big new document - mine's 500x500 pixels.  Sample the background colour from the source image and bucket fill your new document with that.  If you're doing fabric, try adding some monochromatic noise to add a bit of texture, then do a gaussian blur at a low level to soften it.
-* Go back to your source document and use the polygon select tool to select around one of the shapes, making sure to contain it fully.  **If you can, feather or fade the edges of your selection.  In Photoshop, you can either do that up on the tool properties bar before you select with the polygon select tool, or Select - Feather after making your selection.  Choose a low level of about 2 pixels... just enough so you don't have a really hard edge.
+* Go back to your source document and use the polygon select tool to select around one of the shapes, making sure to contain it fully.
 * Copy your selection, and paste it into your new document.
@@ Line 250: / Line 251: @@
 [[Image:Seamless28.jpg|center|300x300px]]
 ==Where to go from here...==

@@ Line 131: / Line 131: @@
 Okay, well, now you have a big chunk of texture, and you could just keep adding and blending to make bigger pieces, but let's get a nice piece that can easily tile.
-* Start by taking a good long look at your texture.  You need to identify four points that are identical to mark out the edges of one full repeat.  Use the pattern as a guide.  Generally, using a little pointy bit of texture as your four points is best if you can, as you can be nice and precise.  You can see how I've done so in my example, marking the the pointy end of the blob of creamy colour.
+* Start by taking a good long look at your texture.  You need to identify four points that are identical to mark out the edges of one full repeat.  Use the pattern as a guide.  Generally, using a little pointy bit of texture as your four points is best if you can, as you can be nice and precise.  You can see how I've done so in my example, marking the the pointy end of the blob of creamy colour.  (You're gonna have to click on the image and zoom in to see the selection edges.)
 [[Image:Seamless12.jpg|center|300x300px]]

@@ Line 172: / Line 172: @@
 * If you had a little too much on any one edge and it looked like there was a little double edge along the seams, you can use the rectangle select tool to select most of the image, leaving off a pixel or two along that edge, crop, and try offsetting again.  Take off a bit at a time until it matches up.
 * If you were experiencing that white line issue, try that tip mentioned above now - sample the background colour and fill the background layer behind your texture with it.  It may help some.  If it doesn't, try resizing the image down a little bit.  Usually once you get it onto your document where you'll actually be using it, it's not that noticeable.
@@ Line 189: / Line 191: @@
 [[Image:Seamless19.jpg|center|300x300px]]
-* Want to learn how to take that seamless texture and put it on a skirt with realistic folds and shading and stuff like that?  Check out [http://www.modthesims2.com/member/showthread.php?t=136712 Beyond Photoskinning: Transformation and Displacement Mapping in Photoshop]
+* Want to learn how to take that seamless texture and put it on a skirt with realistic folds and shading and stuff like my example above?  Check out [http://www.modthesims2.com/member/showthread.php?t=136712 Beyond Photoskinning: Transformation and Displacement Mapping in Photoshop]
 [[Category:Tutorials]]

@@ Line 1: / Line 1: @@
 This tutorial will explain the basic techniques for creating seamless textures from non-seamless images.  This is a great technique for making wallpapers, floors, and fabrics for skinning - among other applications, of course.
@@ Line 186: / Line 188: @@
 [[Image:Seamless19.jpg|center|300x300px]]
 * Want to learn how to take that seamless texture and put it on a skirt with realistic folds and shading and stuff like that?  Check out [http://www.modthesims2.com/member/showthread.php?t=136712 Beyond Photoskinning: Transformation and Displacement Mapping in Photoshop]

@@ Line 144: / Line 144: @@
 [[Image:Seamless14.jpg|center|300x300px]]
 You may now notice that even though it's more or less square, it's still not perfect - in my example, the top left corner tilts in toward the left too much compared to the bottom left corner, and might be a little too far down as well.
@@ Line 150: / Line 151: @@
 [[Image:Seamless15.jpg|center|300x300px]]

@@ Line 25: / Line 25: @@
 [[Image:Seamless2.jpg|center|300x300px]]
 And for others, seeing that you don't have a full repeat can be a bit more tricky:
 [[Image:Seamless1.jpg|center|300x300px]]
 You want to make sure that you have both a horizontal and vertical repeat...  and sometimes when you just barely have one with a complex pattern, seeing that there's a full repeat there is difficult:
 [[Image:Seamless3.jpg|center|300x300px]]
 ===Size===
@@ Line 49: / Line 52: @@
 [[Image:Seamless4.jpg|center|300x300px]]
 ===Skew===
@@ Line 64: / Line 68: @@
 [[Image:Seamless6.jpg|center|300x300px]]
 I'm using Photoshop CS2, and I'll be referring to commands within CS2 here.  However, basic techniques I'm talking about here should work in any program that has support for multiple layers with different opacities and a variety of brushes - i.e. most any graphics program worth using.
@@ Line 80: / Line 85: @@
 [[Image:Seamless7.jpg|center|300x300px]]
 ===Adding Pieces===
@@ Line 85: / Line 91: @@
 * Paste your source image into your document again, once again on a new layer so you have two copies.
-* Change the opacity of the new layer to 50% and drag it so it's sitting off to the side, on top of the existing layer.
+* Change the opacity of the new layer to 50% and drag it so it's sitting off to the side, on top of the existing layer.  You'll notice you can see the pattern of the layer underneath...
 [[Image:Seamless8.jpg|center|300x300px]]

← Older revision		Revision as of 10:14, 25 July 2007
Line 57:		Line 57:

	[[Image:Seamless5.jpg\|center\|300x300px]]		[[Image:Seamless5.jpg\|center\|300x300px]]
		+
		+
		+	==Editing==
		+
		+	Okay, we have a good image to make seamless, and it's time to edit it up:
		+
		+	[[Image:Seamless6.jpg\|center\|300x300px]]
		+
		+	I'm using Photoshop CS2, and I'll be referring to commands within CS2 here. However, basic techniques I'm talking about here should work in any program that has support for multiple layers with different opacities and a variety of brushes - i.e. most any graphics program worth using.
		+
		+	===Set Up the Canvas===
		+
		+	* Go ahead and open up your image that you want to edit.
		+
		+	* Select all, and cut. This will empty the canvas.
		+
		+	* Resize the image, 400% width and height. This will give you a nice big canvas with plenty of room to edit in any direction.
		+
		+	* Now paste your image back into the document so it's sitting in the center of the background, on a new layer of its own.
		+
		+	You should have something that looks a lot like this now:
		+
		+	[[Image:Seamless7.jpg\|center\|300x300px]]
		+
		+	===Adding Pieces===
		+
		+	* Paste your source image into your document again, once again on a new layer so you have two copies.
		+
		+	* Change the opacity of the new layer to 50% and drag it so it's sitting off to the side, on top of the existing layer.
		+
		+	[[Image:Seamless8.jpg\|center\|300x300px]]