Transparent image over background image

Discussion in 'Photoshop Tutorials' started by Eric Gill, Jan 4, 2004.

  1. Eric Gill

    Eric Gill Guest

    Until png is supported properly by all browsers, you cannot.
    That's right.
    Same as everyone else.
    Right. Can you build it into the background?
    Eric Gill, Jan 4, 2004
    1. Advertisements

  2. Eric Gill

    phrygius Guest

    Can anyone help me?

    I am building a web page that has a background image. I would like t
    add transparent images over this on the page. My problem is, the to
    layer images have either glow or drop shadow effects. How can
    preserve these effects and maintain transparency? Every option I hav
    tried has added a white background to the image or destroyed the effec
    altogether. Am I doing something wrong? Or is it just not possible t
    have a complex, effect-heavy, transparent image?

    Thank you,

    phrygius, Jan 4, 2004
    1. Advertisements

  3. Eric Gill

    JamesStep Guest

    I am building a web page that has a background
    I ran into a similar problem when using images that had a
    glow around then. The glow never looked right after I made
    the background transparent. Here's the workaround I came
    up with (hope I can describe it clearly)...

    Let's say you've got a background on the web page that is
    mostly blue. You want to use a transparent GIF that contains
    a yellow glowing fringe, but after you make the GIF the yellow
    glow doesn't like right against the web page's blue background.

    Make your multi-layered Photoshop image on a transparent
    background. Add a bottom layer that is the same color blue
    (or whatever) as the web page. (If the web page background
    is multi-color, just pick the color used most often.) Add
    the glow effect, giving you a yellow glow against the
    blue background. Then on the blue layer, erase the blue
    (leaving just a transparent background) everywhere you want
    the image to be transparent, but *leave* the blue behind the
    glowing fringe.

    Use Save for Web and save it as a transparent GIF. The outer
    edges (where you erased the background blue) of the GIF will
    be transparent, but the central image, including the glow,
    will not be. The glow will appear to be against a blue
    background which hopefully will blend into your web page's
    background reasonably well.

    Now this may not give you a perfect effect, especially if the
    background is multi-colored or pattered, but it may be good
    enough to get by.


    Remove "NOSPAM" from my address when sending me e-mail.
    JamesStep, Jan 4, 2004
  4. Eric Gill

    edjh Guest

    Here's another possibility that works in certain cases. Better for drop
    shadows than glows.
    edjh, Jan 4, 2004
  5. Eric Gill

    Tacit Guest

    Make your multi-layered Photoshop image on a transparent
    Wow, that's the hard way.

    Instead, make the image over a transparent background. Use Save for Web. In the
    Save for Web dialog, you will see a control called "matte color."

    The matte color is the color the translucent areas should be rendered against.
    You simply choose a matte color that is the color of the Web page background.
    It basically does what your complicated procedure does--renderes the glow
    against the appropriate background color--but it does it automatically, with no
    Tacit, Jan 5, 2004
  6. Eric Gill

    phrygius Guest


    So, do you just put that layer of 1X1 black and white grid behin
    whatever you want to look transparent? I dont quite get how you di
    it. But it does look great. That translucent circle is exactly th
    effect I want to create.


    phrygius, Jan 5, 2004
  7. Eric Gill

    edjh Guest

    No, I use the grid to make a selection (Ctrl-click on layer or channel).
    The selection can be used to delete(make holes), add a color area with
    holes or mask out the spaces. The grid layer is turned off or thrown away.

    Download that circle or the other gifs and zoom in to see how the effect
    is done. It's really very simple once you see the trick.
    edjh, Jan 5, 2004
  8. Eric Gill

    Warren Sarle Guest

    Yes, it's perfectly obvious after somebody clever points it out. :)
    Warren Sarle, Jan 5, 2004
  9. Eric Gill

    phrygius Guest

    Hmmm, I cant seem to get that 1X1 grid thing to work. It might b
    because I am not doing it over a closed image like that circle. I a
    trying to do it on text.

    I intern with a multimedia production company, and I asked th
    Photoshop expert how to do it. I swear he did it in a just a fe
    seconds and it was exactly the effect I was trying to do. There wer
    no grids or anything. He just created a glow around some text ( whic
    happened to be "B.S. Text" because he didnt want to waste too much tim
    ) and merged it with a blank, transparent layer. He went to Save Fo
    Web, removed the matte, and sure enough it was there: a transparen
    .gif with the glow preserved. So, I came home and tried the sam
    thing. It didn't all. With that description, does anyon
    know how he did it? Theres got to be something I'm missing in th
    process. I'd like to get this done tonight, but I guess I can try t
    bother this guy again tomorrow. If I can get the same effect righ
    tomorrow, I'll try to describe it better.


    phrygius, Jan 6, 2004
  10. Eric Gill

    edjh Guest

    If it's on editable text you can't erase, but you can mask.

    As for what your guy did, I'm skeptical. Why merge with a blank
    transparent layer? How did it display on a colored background?
    edjh, Jan 6, 2004
  11. Eric Gill

    Aaron Guest

    Can you ask him to write the steps down for you or you write while he
    builds? I'm very interested in the process too since I'm trying the same
    thing to make some "gem" style buttons that need to work on multiple
    backgrounds (different colors and variations). I cannot figure out how to
    get the checkerboard method to work with shapes so that just the glow is
    transparent. If anyone can clarify (step by step and layer positioning), I'd
    appreciate it.This transparancy thing is killing me!

    Aaron, Jan 6, 2004
  12. Eric Gill

    edjh Guest


    I don't know why something so simple is so difficult. Maybe I haven't
    explained it well enough. I'd like to know specifically where people are
    having a problem.

    The goal is to punch holes in your graphic in a pattern so the
    background will show through. Like a screen door. Any black and white
    pattern can be made into a selection easily and any selection can be
    used to delete (make holds) or fill with color or mask.

    I may do a step-by-step walkthrough someday, but I won't have the time
    to do it in the near future. All the information is there in the
    mini-tutorial and if someone doesn't understand part of it I'll be happy
    to help out.

    You won't be able to get the same glow to work on a wide variety of
    backgrounds though. You have to get some of the main background color
    into the effect for it to work. A glow that works on a green background
    will not look good on a red background. Drop shadows are more forgiving.

    If someone else wants to do a tutorial based on what I've posted, feel free.
    edjh, Jan 6, 2004
  13. Eric Gill

    phrygius Guest


    That guy was really busy today, but he said that tomorrow would b
    free enough to give me a better run through of the method. Hopefully
    I will be able to reproduce that effect, and then tell you how he di


    phrygius, Jan 7, 2004
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.