Creating Reusable & Versatile Background Patterns

With transparent pattern image, users can easily customize the background color by altering the hex color.

Photoshop Trick: Extracting Pattern

This Photoshop trick works on most pattern images. For this demonstration, I'm going to use a tiled pattern image below. Follow the steps below to extract the pattern from the image. You will learn how to use Photoshop Channels to create selection.

Step 1

First you have to turn the image layer to black and white (go to Image > Adjustments > Destaturate). Then go to Image > Adjustments > Levels. Slide the: shadow, midtone, and highlight stopper to adjust the level. The goal here is to make the transparent area completely white.

Step 2

Now you should have a black and white pattern. Go to Image > Adjustments > Invert (or press Cmd + I for shortcut). Select all and copy the pattern. Go to the Channels palette, add a new Channel and then paste the pattern into the Channel layer. Remember: the white pixel in the Channel layer will be the selection.

Step 3

Go back to the Layers palette. Create a new layer. Go to Selection > Load Selection and select the Channel that you've just created in the previous step. Then fill the selection with a solid color (eg. black).

Shortcut tip for loading the Channel selection: hold down the Cmd key and click on the Channel layer thumbnail. Learn more Photoshop shortcuts here.

Opacity

To control the instensity or the darkness of the pattern, adjust the layer's opacity.

Final

Save the final pattern as a transparent PNG file. Now you may use CSS to easily change the background color to any hex code.

.pattern {
	background-image: url(pattern.png);
	background-color: #666;
}