I haven't written any Photoshop tutorials for a while. Today I'm going to share a simple tutorial on how to create reusable background patterns with Photoshop and CSS. I learned this trick from designing WordPress themes. The trick is to create one reusable transparent PNG background and use CSS background-color property to create various color skins. It is particularly useful for creating customizable and dynamic templates (see demos).

What is so cool about this?

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

overview

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.

pattern image

Step 1

First you have to turn the image layer to black & 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.

image levels

Step 2

Now you should have a black & 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.

channels

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).

load channel selection

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.

image opacity

Final (see demos)

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;
}