Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question
add comment

3 Answers 3

up vote 1 down vote accepted

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.

share|improve this answer
    
Perfect, this works for other layer effects and gets pixel-perfect accuracy –  carpat Feb 5 '13 at 22:33
add comment

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.

share|improve this answer
    
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
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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