[brettxw]

So Im using Adobe Photoshop and I want the image to be transparent so its the same colors as the background. When I created a new image I clicked the box "transparent" for the background, still nothing happened. Can anyone help?

www.theshopatspazzo.com

The main image is what I am trying to do. Right now its part of the background because I cant make a transparent image.

[Advertisements]

Would you by any change be trying to save it as a JPG?

[Michael]

Would you by any change be trying to save it as a JPG?

[thenotch]

What Michael said... make sure it is a .GIF or .PNG otherwise transparency will not render.

You will need to flatten the image and set the mode to Index Color and not RGB.

[kws_divine]

Hello brettxw,
When you save an image to the file you have it set to in photoshop, there will be these options to choose.

• .PSD,PDD
• .BMP,.RLE,.DIB
• .GIF
• .EPS
• .EPS
• .EPS
• .JPG,.JPEG,.JPE
• .PSB
• .PCX
• .PDF,.PDP
• .RAW
• .PCT,.PICT
• .PXR
• .PNG
• .PBM,.PGM,.PPM,.PNM,.PFM,.PAM
• .SCT
• .TGA,.VDA,.ICB,.VST
• .TIF,.TIFF

Out of that list since you want a transparent background, select .PNG. Now host it on whatever image hosting site you use, I prefer www.imageshack.us or www.photobucket.com. Then you know what to do from there I'm guessing. Good luck!

-KWSD

[Michael]

He is going to put in on his web site, in which case he would not want to put it on www.imageshack.us or www.photobucket.com. You should alway host images you use on you web site on your web hosting.

[brettxw]

how come .jpg wont work with the transparant background? and I never even heard of .png what is that? I will try those though and see how it works.

[Michael]

Because .jpg does not support it, it was made for photos and photos are never transparent.

PNG means Portable Network Graphic, and as far as I am concerned the king of all web image formats. It can produce image about the same size as GIFs, supports alpha transparency (though IE does not display it right) can used indexed colors or 16, 24, 32 or 48 bit color. If you don't use it, it is about time you started.

Edited by Michael, 26 December 2006 - 08:20 PM.

[Tyger]

If you want to make the orange background you're using blend into the background color for the page, at least it sounds like that's what you want, the possiblities are pretty limited. Not many browsers support tranparency in .pngs, although they are the better format, so you are pretty much stuck with .gif. Only one color can be made transparent in a .gif (or .png) and the .gif has only a limited selection of colors. You could make a semitransparent .gif, where every other pixel is the transparent color and the background color should show through. But the limited range of colors will make it difficult to have a smooth graduation in the intensity, so the quality won't be as good.

You may just have to make a different background for each page. But there are a lot of things you can do to make the backgrounds interesting and work with other parts of the page. You can use transparent .gifs for the buttons, you can make the body of the .gif a solid color and the text transparent so the background image shows through the text. Something that works well is to use a larger image with the links text on it and use "maps" to reference the links, you can do this with the background picture so you don't have to have any individual buttons or even text on the page.

[Michael]

He just wanted his logo taken out of the background image, since he is using some fancy font style. A GIF would be find for this.

Using image maps is not a good idea, it involves some usability problems. Except for maybe logos you should avoid using images for text, as people with poor vision (a lot of people one the wrong side of 60 or so) have problems reading it. And unlike normal text, it can't be resized.

[Dragon]

Is this what you are trying to accomplish?

note the white area is actually transparent, but because of the way the forums are set up I can't prove the transparency.

However if you save the file and then place it on the website using the following tag it will be transparent. Make sure you place it in the correct area. you can use the following code for it or you can even use CSS for it if you want to take the time to make a new div id/class for just that section of the page. not hard to do really.

<div align="center"><img src="spazzo.png" alt="The Shop At Spazzo"></div>

Attached Thumbnails

• 

Edited by Dragon, 24 January 2007 - 07:40 PM.

[Dragon]

Not many browsers support tranparency in .pngs, although they are the better format, so you are pretty much stuck with .gif.

This is only true if you use Netscape Navigator 4, or IE 5.5
if you are using those browsers then you don't deserve seeing the web page the way it's designed, those browsers or extremely outdated now and it is the users fault for not updating to the latest versions.

98% of all browsers being used today can render PNG formats with full transparency. that two percent that can't are still running windows 95 or 3.1 with IE5 or they are running Netscape 4 which in the numbers of the people on the net that only turns around to be about 2 people for every 1000 with internet access. Almost all windows machines have been updated to IE7 if they are using auto update. and most people using Netscape are now using Netscape Navigator 6.

[Michael]

Efwis IE6 does not display pngs that have varying levels of transparency correctly. If you want an example and can send as many as you want. Other wise your correct IE does display pngs that have only one level of transparency.

Edited by Michael, 26 January 2007 - 04:57 PM.

[Dragon]

Michael, I never said anything about varying levels of transparency, and from what I have seen in this topic, that was never even brought up. Hence the reason I replied the way I did.

98% of all browsers being used today can render PNG formats with full transparency.

I know about the lack of ability for IE to render transparency. Even IE7 still has issues. My personal recommendation is to not mess with partial or varying transparency but rather stick with full transparency. That way it never is an issue.

But that is my personal opinion.

[Michael]

It is implied kind of. Fonts often use rounded edges, using different levels of transparency to achieve a nice smooth finish. So if you save text as an png it will mess up if you don't know what your doing.

I agree with you 100% other wise.

Edited by Michael, 27 January 2007 - 12:46 AM.

[Dragon]

thats exactly why I don't save text as an image. but rather than try and get into more semantics on this issue, suffice it to say that we both agree