02-21-2007, 11:31 PM

I want to know how to create an image where only the picture or design is visible. I don't want the box that's around it. I try to save it with a transparent background, but when I put it into a website or bring it into another application it's got that stupid bounding box with a white background.
How can i fix this problem. (I'm referring to Photoshop)

02-21-2007, 11:32 PM

To have a transparent background, an image would have to be a .gif or a .png file.
I am assuming that you are working with a .jpg, which doesn't support transparencies.

02-21-2007, 11:44 PM

You have certainly hit on one of the most difficult issues in any photo editor because ultimately, this involves selecting the object of interest and then erasing everything but it. There are many tools to help you with the selection part, but the process, overall, is always the same.

If the image you are looking to isolate is on a fairly consistent background, you can use the Magic Wand tool to select that background, then invert the selection and do the erasing. I typically shrink the selection by a pixel or two after it is done just to get a good tight selection.

If the image you are trying to isolate in on a detailed background, it is a picture by picture call as to what too s best to do the selection.

02-21-2007, 11:47 PM

mac57 hit the nail on the head.

although if it's on a plain background there are tools to select by color. then you would just either remove the color, or cut the inverse to a new transparent layer and ditch the old layer.

gimp can do this - and it is free (though you will need to load x11 if you're running OS X).

btw, i made my avatar with gimp on a windows notebook. you'll notice it's a .gif with transparency.

02-22-2007, 12:04 AM

Yes, mac57 is dead on. Still, even if you remove the background in your editor, you are going to have the bounding box once again, when you save the image with a .jpg extension.
Your .psd will show that there is no background, but since .jpgs don't support the transparency it fills that in with white automatically when you save it as such.
Here is an example of what I mean:

02-22-2007, 02:36 AM

That fixed the problem.

02-22-2007, 02:47 AM

For anyone who doesn't have photoshop and wants to play around with transparencies have a look at the FreeWare Toy Viewer. Strange name, good software.

http://homepage.mac.com/t_ogihara/software/index.html

02-22-2007, 09:58 AM

torchy, the site you mention seems to have access controls. I was denied access - it said that I was not on the Access Control List.

02-22-2007, 12:48 PM

Sorry. Main Web site for Toy Viewer

http://homepage.mac.com/t_ogihara/software/index.html

02-22-2007, 01:22 PM

Thanks torchy, that did it.

02-22-2007, 03:04 PM

Just remember when using transparent .png files on a website that IE 6 doesn't support them.

There are workarounds available though...

02-24-2007, 03:34 AM

Originally Posted by Aptmunich

Just remember when using transparent .png files on a website that IE 6 doesn't support them.

There are workarounds available though...

heheh, NOT using IE?

One thing to take note of (if it hasn't been mentioned yet) is to effectively make use of matte colours with .gifs. While gif supports transparency, I don't think it's supports anything but completely transparent, or completely opaque. If the gif will be placed over a known coloured background, eye drop that colour (through Applications>Utilities>DigitalColor Meter) and enter the colour numbers as the matte colour for the gif. I think it's white by default, but if you're placing the gif on a grey background, that won't really help you - so eye drop that grey, and set it as the matte colour so things are smoother.

You won't have this problem with a png as it supports a full range of transparencies. Take this image I created for example.


The shadow is full black, but with opacity turned down - so it will still appear darker, no matter what colour it lies on.