I've got a .psd that needs to be cut up for a site. There are multiple times where the artist uses solid-colored square blocks with an inner glow applied to it, and instead of cutting out each one as an image I'd rather just overlay the glow over solid colors. Is it possible to get a glow that goes from transparent to white instead of from a certain color to white?

enter image description here


Two ways:

The easy way -- Right click on the layer effect and select "Create layers" from the context menu. This rasterizes the layer effect(s) and moves it to its own layer. Note that when you choose 'Create Layers' PS does this for ALL effects attached to that layer; you can't rasterize them individually.

The slightly less easy way-- Select the gradient tool, then select the gradient itself from the top menu in order to open up the gradient editor. Set both of gradient colors to white, then set the opacity of the left color to 0%. Voila, a gradient that goes from transparent to white.

  • Perfect, this works for other layer effects and gets pixel-perfect accuracy – carpat Feb 5 '13 at 22:33

A possible way to do it (good for rectangles) is by using Blur (gaussian or motion blur). You'd first need to draw a white circle in the middle of a transparent canvas, stretch the circle to create an oval, and then apply a Filter > Blur > Gaussian Blur to it until you have the desired effect:

enter image description here

You could recreate a transparent to white gradient using Gradient Overlay. Right click on the layer > Blending Options. In Gradient Overlay choose Style: Radial, pick an existing gradient that goes from black to transparent and choose white for the solid color. You won't have that much control over the gradient, though, and I think it only works for perfect squares.

Alternatively, you could use CSS3 to achieve an inner glow effect.

  • Takes quite a bit of playing around to get it right, but I think that's because I care more about pixel-perfect accuracy than the artists do :) – carpat Feb 5 '13 at 15:08

Another way to do this is to create a white image with the glow as an alpha channel and export as PNG with alpha. The glow will remain white, and the alpha channel creates a transparency which allows the underlying color(s) to show through.

Note alpha PNG support is not universal across browsers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.