Transparent image over background image

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,
-Phrygiu

phrygiu
———————————————————— ———– Posted via http://www.forum4designers.co
———————————————————— ———– View this thread: http://www.forum4designers.com/message28229.htm

I am building a web page that has a background
image. I would like to add transparent images over
this on the page. My problem is, the top layer images
have either glow or drop shadow effects. How can I
preserve these effects and maintain transparency?

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.

James

++++++++++++++++++++++++++++++++++++++++++++++++
Remove "NOSPAM" from my address when sending me e-mail. ++++++++++++++++++++++++++++++++++++++++++++++++
–

JamesStep wrote:

I am building a web page that has a background
image. I would like to add transparent images over
this on the page. My problem is, the top layer images
have either glow or drop shadow effects. How can I
preserve these effects and maintain transparency?

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.

James

++++++++++++++++++++++++++++++++++++++++++++++++
Remove "NOSPAM" from my address when sending me e-mail. ++++++++++++++++++++++++++++++++++++++++++++++++
–

Here’s another possibility that works in certain cases. Better for drop shadows than glows.

http://www.sover.net/~hannigan/lucyinthesky.html

—
Comic book sketches and artwork:
http://www.sover.net/~hannigan/edjh.html

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.)
[snip]

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 work.

—
Rude T-shirts for a rude age: http://www.villaintees.com Art, literature, shareware, polyamory, kink, and more:
http://www.xeromag.com/franklin.html

edjh-

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.

Thanks,
-Phrygiu

phrygiu
———————————————————— ———– Posted via http://www.forum4designers.co
———————————————————— ———– View this thread: http://www.forum4designers.com/message28229.htm

phrygius wrote:

edjh-

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

Thanks,
-Phrygius

phrygius
———————————————————— ———— Posted via http://www.forum4designers.com
———————————————————— ———— View this thread: http://www.forum4designers.com/message28229.html

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.

—
Comic book sketches and artwork:
http://www.sover.net/~hannigan/edjh.html

In article <DO3Kb.809$>,
edjh writes:

… It’s really very simple once you see the trick.

Yes, it’s perfectly obvious after somebody clever points it out. 🙂

—

Warren S. Sarle SAS Institute Inc. The opinions expressed here SAS Campus Drive are mine and not necessarily
(919) 677-8000 Cary, NC 27513, USA those of SAS Institute.

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 work….at 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.

Thanks,
-Phrygiu

phrygiu
———————————————————— ———– Posted via http://www.forum4designers.co
———————————————————— ———– View this thread: http://www.forum4designers.com/message28229.htm

phrygius wrote:

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

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

Thanks,
-Phrygius

phrygius
———————————————————— ———— Posted via http://www.forum4designers.com
———————————————————— ———— View this thread: http://www.forum4designers.com/message28229.html

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?

—
Comic book sketches and artwork:
http://www.sover.net/~hannigan/edjh.html

Phrygius,
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

"edjh" wrote in message

phrygius wrote:

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

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

Thanks,
-Phrygius

phrygius
———————————————————— ———— Posted via http://www.forum4designers.com
———————————————————— ———— View this thread: http://www.forum4designers.com/message28229.html

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?
—
Comic book sketches and artwork:
http://www.sover.net/~hannigan/edjh.html

Aaron wrote:

Phrygius,
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

/snip/

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.

—
Comic book sketches and artwork:
http://www.sover.net/~hannigan/edjh.html

Aaron,

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 it.

-Phrygiu

phrygiu
———————————————————— ———– Posted via http://www.forum4designers.co
———————————————————— ———– View this thread: http://www.forum4designers.com/message28229.htm