Day: January 9, 2018

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 …