Transparent Web image?? 1

[UrbanVandal]

Is it possible to put images on a website that are not always bound by a "box." In photoshop i can make the background of a picture transparent..how do I get the image on a website and maintain the transparent areas? check out

http://www.urbanvandals.com

to see an example of this problem.
Thanks- John

 

[jshurst]

If you use Fireworks, you could edit the picture iteslf. Cut out all of the black from the background and then right click on the canvas. Then go modify -> fit canvas (or trim canvas). I believe this is right but don't have Fireworks in front of me at the moment.

 

[wantstolearncfm]

JSHurst, i think you would get issues doing that, the image may fit to canvas but it would stll be locked in a grid i think.
You can use background "transparent" now using a png that would work in firefox, however in microsofts infinite lack of wisdom they decided not to inclue png alpha image transparency. So you get a grey blob.
So the easiest way is to get your current site background and make that image background, or using some sort of image map

http://google.com

http://support.microsoft.com/

CF Reference
The links of my knowledge

 

[jshurst]

I am not so sure what you mean by "locked in a grid." Do you mean squaring the canvas off rather than creating an exact fit for the image? Because I am talking about eliminating the image background altogether (although I will have to try this when I get home). Image mapping could work also (and is very cool), but here you need to be careful setting this image as the background. If a 800 x 600 background is displayed on a 1024 x 768 resolution then you will get repeating patterns which will be fine for a brick wall but not when an image is going on top, you certainly don't want a duplicate. But you could go with the old rule and assume that 50% of the computing world is using 800 x 600.

 

[jshurst]

Another option is to make a flash file. It won't be hard because you will only need one frame and nothing will be "moving." Their backgrounds can be clear.

 

[Cheech]

you can make a transparent gif in fireworks

[Peace][Pipe]

 

[CTekMedia]

Use Fireworks. "Cut out" the image you want to keep. If you have Photoshop and know what you're doing it has better tools for extracting complex images.

Anyway - back to fireworks.

Set canvas color to white or black whichever works better. Go to export preview. set format to .gif as per Cheech. Pallette is Web Snap adaptive (usually).

Look for the pulldown menu that says "No Transparency". Select "Index Transparency". Export. Your graphic will now have a transparent background.

http://www.bluetone-media.com

BT

 

[wantstolearncfm]

God i wish i knew what i was really doing with fireworks, i can just about make my menu graphics that will do!

http://google.com

http://support.microsoft.com/

CF Reference
The links of my knowledge

 

[jshurst]

Fireworks is a good program. Doesn't have near as many things as PhotoShop, but it doesn't require a lot of system resources either. Did you try to Trim the background around the image? Just wondering if that worked, as I still haven't tried it yet for rounded objects.

 

[UrbanVandal]

I have been creating images in photoshop and leaving the backgrounds transparent. As long as I save the image as a compuserve (GIF) file and select "transparency," the baground of the image maintains its transparency...letting the background of my website contour to the edges of the actual image. This works well for me. Thanks for your help.

 

[CTekMedia]

UrbanVandal brings up a good point. It is frequently best to set the background color the same as the color which the graphic will be placed against. This avoids the presence of a "halo" of pixels around the image that look out of place.

http://www.bluetone-media.com

BT