We help IT Professionals succeed at work.


lexusgs430 used Ask the Experts™

Ive been having a problem I havent been able to figure out for quite some time.

I like to use different % layer transparency when designing for web, and saving them as png 24 images which I use to layer divs atop bg images and what not. In photoshop, if ever I try to save an individual layer which I have set to a lower opacity (say 37% for example), when I save the image it saves it as if I were to have selected "normal" layer blending mode, instead of the overlay I see on the screen.

Does anyone have any idea why this is, or if it is possible to save individual overlay layers as png24's?
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I tried this out and as far as I can see the upper layer delivers with the Overlay look.

Are you using Save for Web and Devices... ? with transparent background?

Saving individual layers is as simple as turning other layers off, click on the eye in the Layers panel.
For many different versions of the same file, like saving different layers, it's convenient to save them first as Layer Comp (see: Window > Layer Comp. When you have made all the Comps you want you can batch save it using File > Scripts > Layer Comps to files and select the format you need.

Hope this gets you at least half way.
oh, and saving individual layer lets say one color with Overlay does not seem to deliver anything because the overlay is not over anything.


Ya that is my point, the overlay layer is dependent on the layers below it seems like. So Id like the overlay I export to act like it does within photoshop ie, overlay itself when stacked ontop of a background image, like it does with 2 layers within the photoshop file.
For what are you using the png's? Web design? If so, isn't there transparency command for images?

However, when I place this kind of a png file into Illustrator it acts exactly like you are after. Transparency respected.

I put: web design png transparency  into Google and found tons of related articles about transparency in web design.
In Photoshop, the Blending Mode multiplies or screens the colors, depending on the base color. Patterns or colors overlay the existing pixels while preserving the highlights and shadows of the base color. The base color is not replaced, but mixed with the blend color to reflect the lightness or darkness of the original color. (from the Photoshop manual)

You cannot reproduce this effect in today's browsers using a png (too bad - otherwise you could do some really interesting things)

All that you can do is adjust the png's transparency to show part of all of the pixel underneath. Be thankful, just a few years ago, you couldn't even do that!