Welcome
Arachne's Web
A group focused on serving the AW community by providing help and discussion on topics such as HTML, CSS, web design, homesite decorating, netiquette and issues important to web artists.

Designing in AncientWorlds (3 threads, 1391 posts)
    Coding for Homesites & Groups (709 posts)
    Social Thread

    Formerly AW formatted decor, now offering an area to display common code used in AW homesites, and Q & A for code! ...
    85 Members have made 571 Posts here to date.
    Google
    AncientWorlds.net Web
    Next: Here's another way...
    Prev: GIFs and backgrounds
    Aaphrodite; re gifs and backgrounds
    Feb06Avatar.gif
    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:

    animal7.gif

    With this:

    tigerbg.gif

    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:

    tigerINbg.gif




    NEXT: Here's another way...
    PREV: GIFs and backgrounds
Rome - Rome, Season 1 - The Stolen Eagle


Copyright 2002-2008 AncientWorlds LLC | Code of Conduct and Terms of Service | Contact Us! | The AncientWorlds Staff