Author: * Laurels Curius -
52 Posts
on this thread out of
2,713 Posts
sitewide.
Date: Sep 18, 2007 - 15:44
I am completely guessing here (again!) but I think you mean to take an image that has no background, and put it INTO a background. Like, to combine this:

With this:

If you want the images to retain their transparency, you have to understand the science behind transparent gifs. Don't stress, it isn't as difficult as it sounds.
Transparent gifs retain their transparency by having every single pixel of the area that has transparency set to one color. That one color can not be present any where else in the image. For example, if you look at that tiger in your graphics program and not in a browser, it's not transparent, the background is really a very very dark grey, only just barely different from the dark grey in the tiger's stripes.
So basically, transparency is acheived by telling your graphics software program that anything in one particular shade of blue (for example) is to be displayed as transparent. That's it.
So, to meld two images, both with their own transparency, this is what you do:
Open up first image (in this case, the tiger) in your graphics software program of choice.
Then choose your selector tool, in paint shop pro this is a magic wand. Actually I think it is in photoshop too. Anyway, make sure in the tool's options, that the "tolerance" is around 10. Click one time in the solid colored background that makes this image transparent when viewed through a browser. For my tiger, it's dark grey. You will see "marching ants" everywhere that is transparent.
Go up to Selections in your graphics software, and down to Invert. Invert your selection so that now the marching ants are all around the object itself, not the background (in my case, the tiger!)
Copy that image (CTRL, C).
Open up second image, in my case the grassy knoll, in yours a water image. Go up to Colors tab in graphics software, down to Increase. Increase the colors as high as it allows.
Then go up to Edit, and down to Paste. Paste your saved tiger from previous transparent image (or dragon, or whatever it is) onto the second image as a new layer. Using the position tool, position your clipped tiger/dragon/whatever wherever you want it on the second image.
That's pretty much it. Now you have to save it as a .gif to retain both image's transparency. To do that, just to into Colors, and down to SEt Transparency. There are a bunch of options in there no matter what your graphics program is. Play around with them, just make sure to use the background color in the second image as the transparent color, and click on "proof" to test it's transparency. When it's where you want, save it and upload it.
Here was my result:

|