Opacity setting not being saved properly

[gmac6791]

Photoshop 7: I set the opacity for a layer using the Blending Options, and when I go to "Save for the web...", the opacity is no longer there. The image is back to having no opacity at all. I can't for the life of me figure out why. Does anyone know?

Thanks in advance.

[benihana]

what format are you saving for web in?

for TRANSPARENCY you need to save as a .png or .gif, and make sure the transparency is selected.

[gmac6791]

Hi benihana, :)

I'm saving it in gif. The background itself is transparent, and does not lose its transparency. It's only one of the layers that won't work right. I'm making a logo that has a sword behind the text. To make the text stand out better I want the sword to be faded a bit.

I click the correct layer in the palette, then I go to Layer -> Layer Style ->Blending Options, set the Blend Mode to Normal, and the Opacity to 51%. I don't touch the Advanced Blending options or anything else.

It looks exactly the way I want it until I go to save it. The effect is gone.

A few more details about saving it:
In the Save For Web window I have it set to GIF, Perceptual, No Dither. Transparency is checked, No Transparency Dither, 128 Colors.

I've done this before (a long time ago) but never had this problem. What am I missing?

[lZakl]

Ok I see what you are saying I think... You want the background of the site to kind of "show through" the sword.? I have done this and it is fairly easy, though the instructions may seem complicated, they really are not.

1) Make "Sword Layer" 100% Opacity

2) Create a New Layer. Make sure it is BEHIND the 'Sword Layer' We'll call this one 'Sword Mask'. It's not really a mask, but you'll see.

3) Select your 'Sword Layer' in the Layers box.

4) Go to 'Select' --> 'Load Selection' and make sure your Channel says 'Layer Transparancy'

5) Select the 'Sword Mask' layer in you Layer box. You should have an empty area selected now.

6) Fill that layer with your background color from your site... Yes, even if the bgcolor of your site is white.

7) Change the opacity of the sword.

This is the ONLY way to truly view what this is going to look like when gif'ed. And if your site background is grey, then you will already have the same grey as the background of your image, showing through the sword.

If this is not what you wanted, I misread your post and I am sorry.

Good Luck! :0)

-- Zak

[gmac6791]

Thank you, lZakl, that's a good detailed explanation. I'm afraid, though, that something more is wrong than just not knowing how to do this. I'm noticing that anything I do that uses opacity - a drop shadow for example - does not get saved the way I set it up.

It's like a setting got changed or something that affects Photoshop all around. A few minutes ago I was just working with a single layer text image with a faint drop shadow (25% opacity). The shadow looks fine - until I go to save it; then it is no longer faint, it is at 100% opacity; solid.

As good as it is, I'm afraid your suggestion won't do any good for me until that is solved. :(

[limbo]

If I have understood your question correctly...

You cannot preserve this level of transparency - Browsers do not support it. You will have to alias you image to your background colour and then export it all so it appears to be transparent.

They will allow index transparency but only on the one level - so graded/translucent blends between page elements are out :(

>> Added: That said, you can fudge it using colour replacement so you are replacing every other pixel in a grid with a transparent one to give the effect of a graded blend. You could also look at CSS dropshadows

[lZakl]

What limbo said is what I was trying to say, but failed. My work-around still works for what you are asking... Say you want a "Drop shadow" applied. Apply this Drop-Shadow at 100% Opacity, Make all other layers invisible, add a new layer, and then merge visible. This will make the dropshadow "part" of the "Sword Layer". THEN to the instructions that I gave. Like limbo said, your image needs to be aliased, which means that you cannot have "semi-transparent/semi-opaque" areas. The image is either Transparent, or it's not. Hence the need to give the "illusion" that the backround is showing through the areas where there are "semi tranparent" objects, like drop shadows ... Which is what my original post is all about :0)

-- Zak

[gmac6791]

My question is not being understood. I don't know how to say it any clearer. :( All the above is stuff I've NEVER had to do to make it work.

The issue is simple: A GIF with a transparent background does not get saved properly when there are opacity levels applied in one or more layers of the image.
Whether it is a drop-shadow with less than 100% opacity, or a background layer with less opacity than the foreground layer, or when I feather edges; anything like that, the effect is not saved.

For years I have applied drop-shadows, feathering, etc., with all different levels of opacity to GIFs with transparent backgrounds. And all I had to do was go to File -> Save for Web to save it as I created it. I never had to go through all the steps described in the above posts.

Something changed, and I can't figure out what it is. I was hoping someone would know. But maybe it's an odd issue that only a reinstall would fix.... I dunno. :-/

[gmac6791]

I apologize if I'm wrong but I feel like I'm being snubbed here now. Why? Because I was misunderstood in the first place and I pointed that out and tried to make things clearer? :(

Please, if there is any solution - even if it means a clean reinstall of Photoshop, please let me know.

[collymellon]

Hi,

Still have the problem?
Is the transparency box ticked in the save for web dialog box?

If youv'e solved what was causing?

[GuanoLad]

Your problem is that you don't understand how GIFs work.

Their transparency capabilities are extremely limited. All they can do is choose one colour as the transparent colour. They do not allow for 50% opacity so that things show through, they do not allow for gradient shadow opacity, and they don't allow for multiple colour blending to the transparent area.

However, PNGs can do all of those things. But the problem with PNGs is that Internet Explorer does not display their transparency like it should, and nobody knows why MS has decided this. There are clunky workarounds to make it happen, but they aren't always reliable.

So the basic answer is, you'll have to fudge it like the other posters suggested.