How can I make a semi transparent image?

O

Out50Stang

[H]ard|Gawd
Joined
Jun 10, 2002
Messages
1,635
I have an image, and i want to make it semi-transparent for my webpage. I tried to turn down the opacity, and when I save it as a GIF it asks if I want to limit colors to 256, I say yes. and it saves looking like it is transparent, but when I put it on my page it is not.

the image was orginally a JPG, but i saved it as a GIF , then re-opened it, and go from there.

If I open the saved "transparent" image, then the opacity is locked.

Im using Photoshop 6, what am I doing wrong?
 
I don't think you can make a "semi transparent" image. It would have to have a background.
 
I put a transparent back ground, and turned down the opacity on the top layer (the picture)

I forgot to mention that till now
 
You can't save a low opacity image over a transparent background though.
 
I'm not sure why not exactly, I'm just pretty sure it's not possible. I guess the image just has to have some type of background to sit on...for example, if you have a piece of glass, it's clear, you can see through it, so no matter what it's always going to have a background because the background is going to be whatever you see through the glass. Does that makes sense? lol

You're going to be putting it up on your page right? So the image is going to be on a background anyway.
 
I have a stationary image as my background, and wanted to make this one I am trying to make, allow the background to show though. So as you scroll down the page, you still can see the backgound even if the picture is over it. i can't find any way that will alow me to do this.
 
Yes, PNG 24 bit with an alpha channel is what you're looking for if this image is meant for the web. Jpg doesn't support alpha channels (transparency) which is why the option is locked out. Gif files support a ghetto one color=transparent scheme, which works for most stuff. However, when you want more than 256 colors, and smooth "antialiased" edges then a png with alpha is the best bet.
 
I tried saving as PNG, yes. and i put it on my site, and the picture would not load, all I got was a red x.

Can i save a PNG as translucent?
 
In PS, on the layer that you want partially transparent, create an opacity mask on that layer, and start painting in your black/white until you get the effect you want.

Once you've done painting, then goto File -> Save For Web. You'll notice a huge difference in quality going from .gif to .png24.

I've attached a semi-transparent Stewie from Family Guy below:
partial_transparency.png


Not sure why you would see the red X on a .png image unless it wasn't on the server, or mislinked?

Even with IE6, which doesn't support .png transparency, will show the image as if it weren't transparent at all. Try a different browser like Opera or Mozilla.

THC
 
Originally posted by Out50Stang
I tried saving as PNG, yes. and i put it on my site, and the picture would not load, all I got was a red x.

Can i save a PNG as translucent?
Click to expand...
lol, i'm not aware of an image format that supports translucency :p
 
PNG with an alpha channel, on a non brain damaged browser can be transparent. Unfortunately, it would appear that IE is incapable of correctly rendering the png correctly, typical.
 
Alpha
What you require is an alpha channel. What this means is that a
standard JPEG, GIF or BMP typically has three colour channels,
namely Red, Green and Blue. These are the primary colours of
the additive colour system. Each of these colour values are
represented by 8-bits which means that you have 256 shades of
every colour. You thus have roughly 16.7 million combinations of
red, green and blue.

An alpha channel is an adittional 8-bit value for every pixel
indicating the transparancy of that pixel. This means that you can
literally paint transparency onto your raster image.

Beta
However, there are no web formats (aside from PNG aka Portable
Network Graphics) that support a 32-bit image format in which an
8-bit channel is reserved for alpha information.

The only files that can succesfully store alpha are propriatary
formats used by high en raster applications e.g. PSDs (Photo
Shop Documents) and CPTs (Corel PhotoPaint).

Gamma
Getting back to PNG, the only problem with PNG is that IE discards
the alpha channel and the whole aim of using a png is thus
negated, so in short ... don't bargain on file formats, but rather
on CSS to save your ass! ;)
 
As usual, Lord Hyperion finds a link that explains it better than I ever could...

Don't blame IE, it TRIES to be more restrictive since more people use it and it has more security and format problems to worry about.

But in short, if it doesn't work in IE, don't use it because 93% of people won't be able to see your work (the typical percentage of IE users on the 'net at any given time).
 
Rocketpig, I think dakonis deserves the credit for the link though! ;)

What I want to know is: how well that treatment works for non-
flat arbitrary alpha information, say for exampe a linear alpha
gradient from left to right across the image in question.
 
You must log in or register to reply here.
Back
Top