Creating Seamless Textures from Scratch in Photoshop

Creating Seamless Textures from Scratch in Photoshop

Creating Seamless Textures from Scratch in PhotoshopThe steps in this guide will show you a few of the tricks in Photoshop designers need to know in order to create seamless textures. Before I start laying out the steps, it is important to consider what it is about a texture that makes it seamless.� A texture is just a detailed image that can be applied to an object (such as a web site's background, a video game character model, and countless other things).� A seamless texture means just that – it has no seams.� What are the seams of regular textures?� Most textures with seams are obvious; the edges of the texture are seams.� If the right side of the texture doesn't match with the left side, there is a seam.� However, even some supposed "seamless" textures have seams, which tells us that seams don't always exist just on the borders of the texture.

Think about it.� If the only requirement for a seamless texture is that the right side has to match the left side, then we could just mirror the image and we would have a seamless texture!� But sadly, the seam would still be as clear as day.� While going through this guide, keep in mind that while a texture can technically be "seamless", the human eye is exceptional at discerning patterns and creating a satisfactory seamless texture can be a lot of work.

One – The Photoshop Secret to Seamless Textures
Follow these steps:

  •  
  • Click File > New (CTRL + N).
  •  
  • Set Width and Height to 512 pixels.
  •  
  • Set Resolution to 72.
  •  
  • Set Color Mode: RGB Color (Anything but Greyscale).
  •  
  • Click OK.
  •  

Now that you have your canvas open, you're entitled to the secret of creating seamless textures in Photoshop.
There is a filter in Photoshop called Clouds (Filter > Render > Clouds) that does something useful when used on a canvas whose size is a power of two (…128, 256, 512, etc…).� It creates a seamless "Cloud" texture.

Two – Create the Base
Follow these steps:

  •  
  • Using the Swatches Pallete (Window > Swatches), find the "20% Grey" swatch, and click on it (Hover over or double click the swatch to see its name).
  •  
  • Press 'x' on the keyboard to swap foreground and background colors.
  •  
  • Using the Swatches Pallete, click the "45% Grey" swatch.
  •  
  • Use the Clouds Filter (Filter > Render > Clouds)
  •  

Let's take a look at what we have so far: not much, right?� Right.� If anything, it looks like an up-close picture of some rain clouds.� Unfortunately, we're not making rain cloud textures, we're making the base for our metal texture.� So, we need the image evened out a little bit.� For our purposes, we can use the High Pass Filter (Filter > Other > High Pass) to achieve this effect.

Follow these steps:

  •  
  • Start the High Pass Filter (Filter > Other > High Pass).
  •  
  • Set the Radius to ~16.
  •  
  • Click OK.
  •  

At first, it might look like High Pass only made the image darker.� But I assure you, there was more done.� Don't believe me?� Copy both layers and set the contrast up higher (Image > Adjustments > Brightness / Contrast).� Before High Pass, the image had bright and dark colors grouped together unevenly.� After High Pass with Radius 16, they are much more evenly mixed.
The High Pass Filter evened the cloud texture out for us so we can use it as a base of our texture, instead of just a solid grey (we could use a solid grey, but that's… boring).� The High Pass Filter does bring some unwanted results, such as possibly darkening/lightening the overall image and creating seams on the edge of the image.� In our case, the image darkened, so we will deal with that first.

Follow these steps:

  •  
  • Open the Brightness / Contrast dialog (Image > Adjustments > Brightness / Contrast).
  •  
  • Set Brightness to +25 and Contrast to +30.
  •  
  • Click OK.
  •  

Now we need to deal with the seams.

Follow these steps:

  •  
  • Open the Offset dialog (Filter > Other > Offset).
  •  
  • Set Horizontal and Vertical to 128, and check Wrap Around.
  •  
  • Click OK.
  •  

You should now be able to see a seam 128 pixels from the left and top of the document.� We need to get rid of those.

  •  
  • Select the Clone Stamp Tool (S).� Set the brush to a decent size (~65px).� Hold down ALT and left click somewhere on the image away from the seam.� This sets the clone source.
  •  
  • Paint over the seams, but be careful.� The source moves when you move, so don't let the source touch the document bounds or you will create more seams.
  •  

Now we're ready for the studs.

Three – Creating the Studs
Follow these steps:

  •  
  • Open New Document dialog (CTRL + N).
  •  
  • Set Width to 32 pixels, Height to 128 pixels.
  •  
  • Set Background to Transparent.
  •  
  • Click OK.
  •  
  • Revert to default colors and white foreground (D then X on the keyboard) and fill the layer with white (Alt + Backspace).
  •  
  • Make Guide Lines on all edges of the image, and two in the center of the image (one vertical and one horizontal).
  •  
  • (See Figure 1)
  •  

[To create Guide Lines first make sure rulers are enabled (CTRL + R), and that Snap and Snap To > Document Bounds is checked in the View tab.� Once all are enabled, go back to the canvas and click and drag the left ruler to create a vertical Guide Line.� Click and drag the top ruler to create horizontal Guide Lines.]

  •  
  • Using the Rectangular Marquee Tool (M) and the vertical, center Guide Line created earlier, make a selection of the right side of the image, and fill it with black (D then Alt + Backspace).
  •  
  • Deselect (CTRL + D).
  •  
  • Using the Polygon Lasso Tool (L), make a diamond-shaped selection at the points where the center grids meet the document borders.
  •  
  • Inverse the selection (SHIFT + CTRL + I) and clear (Backspace).
  •  
  • Deselect.
  •  
  • Set image size to 4 x 16 (Image > Image Size…).
  •  
  • Select All (CTRL + A), Copy (CTRL + C).
  •  
  • Open New Document dialog (CTRL + N), set Width and Height to 16.
  •  
  • Click OK.
  •  
  • Paste (CTRL + V).
  •  
  • Start Free Transform (CTRL + T).
  •  
  • Rotate 45 degrees clockwise (Holding shift while dragging will limit to 15 degree changes in rotation).
  •  
  • Select All (CTRL + A) and define a new pattern (Edit > Definte Pattern). Click OK.
  •  
  • Close the document (CTRL + W), save if you want ;).
  •  
  • Go back to the original document (512 x 512), and create a new layer (Layer > New > Layer or SHIFT + CTRL + N).
  •  
  • Fill the layer with our pattern (Edit > Fill… Change Use to Pattern and find the pattern in the list. Click OK) .
  •  
  • Duplicate the layer (Layer > Duplicate… Click OK).
  •  
  • Select the duplicated layer (Should be "Layer 1 Copy"), and flip it horizontally (Edit > Transform > Flip Horizontal).
  •  
  • Open Offset dialog (Filter > Other > Offset).
  •  
  • Set Horizontal and Vertical to 8, and check Wrap Around.
  •  
  • Click OK.
  •  
  • In the Layer panel, make sure "Layer 1 Copy" is above "Layer 1", and merge the two layers together (CTRL + E).
  •  
  • Load the selection of the merged layer ("Layer 1") by holding CTRL and clicking on the layer thumbnail in the Layer panel.
  •  
  • Contract the selection by 1 pixel (Select > Modify > Contract…).
  •  
  • Inverse the selection (Select > Inverse).
  •  
  • Clear (Backspace).
  •  

Now you should have the basic metal texture we set out to create.� The tutorial is over, but the job is not done.� Using the offset and clone stamp techniques explained above you could throw some scratches in with the line tool and fade them with the eraser.� You could find an orangish-metal texture on the net, apply High Pass, and then use the clone tool and offset to make it seamless.� Apply the layer to overlay above the base texture, and you may get a nice effect.� While High Pass does convert most of the image to greyscale, it doesn't get rid of all colors.� And using High Pass on an orange-colored texture for me created a sort of blue shade in the result, which always goes nice with a metal texture.� Adding a low opacity white border to some of the studs could also give them the look of being pushed in, if you want a rugged / beat up look.� The sky's the limit, as long as it's seamless. 🙂