Creating Seamless Textures from Scratch in Photoshop

Creating Seamless Textures from Scratch in Photoshop

Creating Seamless Textures from Scratch in Photoshop
Creating Seamless Textures from Scratch in Photoshop
The 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. 🙂