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.

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.


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.


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

image opacity

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

Courtesy: webdesignerwall.com