Argh, NEED HELP! (pic transparency)

[Afterthered]

I have used this site a ton in the last few months and I noticed there are no tutorials here that cover how to create a "fading transparence" effect. I need to make a picture fade into a web page but I cannot find a feature in photoshop that allow this. I don't even know if one exists. I have used something similar in Digital Image Pro but you cannot make a transparent background in it. This is aggrivating. Someone please help me.

[Tamlin]

Do you want the whole background to be transparent, or do you want it to have some kind of gradient fade (i.e. from full opacity to full transparency)?

[Afterthered]

gradient. full opacity to full transparency

[Tamlin]

Hmm...that might be a bit of a problem. If the image is for display on the web then you're limited to GIF or PNG if you want to use transparency. Unfortunately, there are problems with both formats. GIF has a limited palette of colours, so it does not handle gradients well, while with PNG there are well-known issues with transparency not working correctly in Internet Explorer.

The other option (if your web page background is a solid colour) is to use a JPG and fade the background colour of your image into the same colour as the background of your web page. I've used this trick before and it seems to work OK.

Any chance of posting the image that you want to fade? Actually seeing it might give someone an idea of how to do it.

[Afterthered]

ok, here it is. I haven;t had many problems with the PNG format making buttons but with a pic with colors it might be complicated. the gif wont work though. too crappy looking

[arb]

Aftherthered,

To have tranparency on a picture you need to save it as a gif.
The only drawback of a gif is the support of 256 colours and your talking about a picture. No to lose quality too much quality you have to save it as a jpg (16.7 million colours).
Did you to consider this: Make a layer with the color of the background of your webpage. Put on top of that a layer with the picture (save the image now as a PSD so you can start easy over again if something is not goodlater on). Apply on that layer the "fading transparency" and merge the layers to one and save it as a jpg.

Ton

[Afterthered]

ok. I cannot do the single color background because there's a graphic on the web site I'm making. It's actually metal renders from one of your tutorials here. I can show you my basic idea. the beginning of the project.


Marty Smith MX Clinic- Home

[arb]

Afterthered, I can't help you anymore.

Ton

[Tamlin]

Originally Posted by Afterthered

I cannot do the single color background because there's a graphic on the web site I'm making.

Unfortunately, in that case you're limited to PNG format if you still want to go with the fade-to-transparency idea. Here's a link to a fix for the PNG/IE transparency problem: PNG in Windows IE

If you don't want to go down that route, how about using a different effect on your image - maybe some kind of a metal frame (rendered in the same way as the background) or something?

[MoodsR4Cattle]

The background is pretty consistent. Why not take a copy of the background and lay it on top of the image and erase what you want to be shown - erasing using a large faded brush and lessening the opacity as you go? Then crop the picture and make it a .jpg.

[Afterthered]

ok, moods. i would do that, but, on the page i will be using the code:

background-repeat: no-repeat;
background-attachment: fixed;

check the "view source" for all info plz

[MoodsR4Cattle]

I viewed the source and downloaded your background. On my monitor, your background is too short. I would suggest using a tiled background, so I made a seamless tile from your metal background. This way you won't need to make the background fixed - just a regular repeating background. Your large background was around 380k and that's too big ... this tile is 24k.

I know this doesn't fix the image problem.