January 28th 2013

Translating a Photoshop Gradient and Pattern Overlay to the Web

I thought this might be useful to someone...

Here's the Setup
You've got a pattern and a gradient, created using Photoshop layer styles. You need to recreate it on the web, but the content (height) is unknown.

The Problem
You can't create a repeatable pattern with the gradient in it because you don't know the height of the final content. But, when you hide the Gradient Overlay layer style, the Pattern Overlay doesn't have a transparent background, so you can't place it over top of a CSS gradient.

Step 1
Select a repeatable section of the pattern. This can be tricky, but zooming in until you see the pixel grid helps. (Alternatively, if you know where to find the original pattern file then that would work, and you can skip to Step 3).

Step 2
Hide the Gradient Overlay. The Pattern Overlay is likely black-on-white, and we need to make that transparent. Copy the selection. Create a new file, and then paste. You could do this all on a new layer in the original file if you want, too.

Step 3
On the new repeatable-pattern-section file, switch to the "Channels" tab, which is usually next to the "Layers" tab. Apple+select (Ctrl+select on Windows?) the RGB channel. Now you've got just the white selected. Since we used channels instead of layers here, white is compelety opague and black is completely transparent. Grays are in between.

Step 4
Switch back to layers, and create a new layer. Invserse the selection and fill the selection with black.

Step 5
Hide the original pattern layer. You now have a transparent pattern overlay to Save for Web as a png with transparency.

Finish Up
In HTML/CSS, create your element with the gradient background using CSS, and create a new div inside of it with absolute position, 100% width, 100% height and the transparent pattern as a repeating background image.