Here’s a hair-puller that I run into time and again when turning design files into HTML/CSS.
I have a button under which I’d like a nice shadow effect that can’t be accomplished with CSS3. The only way to use this in a web page is with a transparent png for the shadow.
The shadow I’ve been given by the designer is a bitmap that goes from dark gray in the middle to opaque white on the outside. In a graphical editor, I can use this on any background color without showing the opaque white by using a blending mode like multiply or darken.
My question is, how can I get this shadow into a usable png for the web that does not show the opaque white? Basically, I want to trade all of the “white” values above a certain gray value for opacity. For example, #fff would equal opacity:0, #ddd = opacity:0.5, and #ccc = opacity:1.
Is this possible in Fireworks, Photoshop, or GIMP?
My reason for needing to do this is that I would like to have the option of changing a CSS background color in the page and not have to go generate a new shadow png that matches that background color.
I may be missing something here, as I’m a graphics noob, but it should be quite easy to do this. In Photoshop (and presumably in Fw), you can create a gradient that fades to transparent. I usually have a transparent layer in the background, too. Then if you save as a png (probably best png 24) that transparency is preserved. Is that what you mean, or am I missing the point?
If you can’t get the gradients working, or if you have a solid image that should fade to transparent at some point, you can use one of various techniques to fade the image to transparent. From memory, one way involves creating a new channel and using the gradient tool to create a gradient overlay (solid to transparent), applying that gradient to the new channel (which selects pixels to be deleted) and then delete. As I say, though, I’m inexperienced, so hopefully someone can give a better explanation, or you could Google things like “create a fading gradient in Fireworks”.
Am not sure i understand what you want to happen, other than having a shadow effect that shows the BG.
Here is the rub, CSS does NOT have blending mode. You can overlay transparencies, but it is NOT blending. After understanding that it wont look exactly like in PS you have a few of options for a nice “fading-transparent shadow” PNG-24. And yes, you MUST SAVE in PNG-24 to have multiple levels of transparency. Here is the easiest one:
In PS (FW is essentially the same)
create a layer shape-layer below your image (which I assume has a transparent bg already, if not you will have to mask it out so that it does) with a black rectangle shape that covers your entire canvas.
add a layer-mask to said layer ( the button right of “Fx” at the bottom of the layers palette)
paste your “shadow” into the layermask
with the layer-mask selected go to image->adjustments->invert
and that should give you a fade-to-transparent shadowed image wich you can then export to PNG-24
Hi Ralph! Thanks for the welcome.
I just discovered Sitepoint today – there’s a lot here and I’m looking forward to engaging some of the forums.
The method you mention is definitely the ideal situation. I’m a front-end developer and am often handed mockups from designers who have use blending modes on layers. For instance, a white to black gradient blended with darken to simulate a transparent to black gradient. Up to this point, I have always had to just flatten the image to use the effects, or try to redo it with a transparent gradient manually.
Increasingly I’m building these designs into WordPress themes where I’m allowing users to set background colors from within the theme settings. This means that all of my image-based shadows need to be completely without color, just black/gray to transparent gradients. Basically, alpha channel only.
From a technical aspect, I would need software to look at a blended layer and the layer over which it is transposed .
Next, it would need to use some a pattern to simulate the “luminosity” of each blended pixel – i.e. take the rgb values observed in the flattened image and pick a shade of gray that it roughly matches. It would have to calculate that shade of gray using rgba(0,0,0, x) where x is equal to the opacity over a white background.
But what happens when you’ve taken a shadow that was designed on a light yellow background, and want to place it over a dark blue background, and still get a shadow effect (not a glow)? To work around situations where the darkest pixel value of a shadow gradient is lighter than a chosen background color we could do the following: If all of the pixel values in the shadow gradient were shifted so the darkest pixel value was always adjusted to rgba(0,0,0,1), then you could re-adjust opacity later in CSS to make it look “good” over any particular background.
Just some thoughts. I don’t think there is any way to currently pull this off in an image editor.
Is it possible to paste a white to black bitmap gradient into a layer mask? Sorry to sound like an old man, but I’m having difficulty finding how to do this step in Photoshop.
you can edit a RASTER ( make sure you arent in the vector mask; I believe the raster mask is displayed as the first mask thumbnail) layer mask the same way as any other layer except it will always be grayscale, representing the level of transparency. Option click on the raster layer mask icon… and it will take you to it. At this point you can paste, paint and edit. click on any other layer to get out of the layer mask itself.
