• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 430
  • Last Modified:

Make image take on background color

Hey Experts!!

I have a PSD I was slicing up and I have a Facebook logo that sits on top of different color backgrounds. In the PSD the logo takes on the color of the background.  The layer itself has a Luminosity attribute tied to it.  

I just want to know how I can slice this so that it takes on the background no matter what background it's on.  Every time I slice it, it's just blue.
0
LZ1
Asked:
LZ1
  • 6
  • 6
1 Solution
 
David BruggeCommented:
In the Save for Web and Devices, you have the option to save this as a PNG-24 with transparency. This will allow you to make your logo keep the transparent areas. This will then let whatever background is behind it show through.
0
 
LZ1Author Commented:
I have that, but it's still showing a blue icon on the page. I thought I may have to do something with the levels or color and then mess with the transparency.  Every time I try something it stays blue.
0
 
David BruggeCommented:
Ah Ha! I read the part where you say, "The layer itself has a Luminosity attribute tied to it," but it didn't sink in. Luminosity mode result in a color with the hue and saturation of the base color and the luminance of the blend color. In other words, Photoshop is doing some quick math on the logo layer and the layer underneath to give you the end results.

Web browsers don't have that ability. They either show the image or not (yeah sure, some browsers support opacity but we'll ignore that for now.) Photoshop's approach to building web pages (and it's a very bad method by the way) is to flatten everything down and slice the image up into a table.

So any Luminosity affect will only happen once at the time of flattening.

Sorry about that.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LZ1Author Commented:
No problem.  So there really is no way to create a transparent png file so that it takes on the hue/colors of it's respective background?
0
 
David BruggeCommented:
No, I didn't mean that at all. Any png with transparency will allow the background image to show through. The problem is how you have your files set up and the way Photoshop slices an image to create a web page.

When saving for the web, the very first thing that Photoshop does is flatten all of the layers. This automatically removes all of the transparency. Even if you save as png with transparency, there is no transparancy to be saved.

The problem then is how to create a PNG with transparency for your logo. The normal way to do this is to turn off the background layer and save as a PNG, but you are depending on the background layer (using the luminosity blend mode) to affect how the logo layer appears. Turn off the background and the image changes.

If you are able to upload, either the PSD file, or if the image is of a sensitive nature, a file set up in exactly the same way, I may be able to offer some solutions.
0
 
LZ1Author Commented:
Thanks. I've attached the PSD so you can see what I mean.  I could be explaining it wrong too though.  

I'm talking about the Facebook logo(layer name: THIS LAYER) in the nav group.  It does have a layer property of luminosity, but I have several other PSDs like this with different background colors.  This one is green, but I have a blue, purple, red, etc.

Let me know if there's anything else I can do.
0
 
David BruggeCommented:
Sorry, I'm not seeing the attachment
0
 
LZ1Author Commented:
I could have sworn I uploaded it.  

Try this again.
EE-PSD.psd
0
 
David BruggeCommented:
Give me a day on this.
0
 
LZ1Author Commented:
Thank you very much!  It's appreciated.
0
 
David BruggeCommented:
Thanks for your patience LZ, I got covered up by work and had to claw my way back to the surface.

Here is what you need to make a logo take on the color below it. It is not perfect because of the way that color mixes in browsers. Like I mentioned before, Photoshop flattens your entire file before it slices things up for the web.

This is a very bad way to make a web site by the way. I comes from the old days when connections were slow and there was the mistaken idea by some that small images would load faster than a big one. Turns out that the opposite closer to the truth.

Anyway, since Photoshop flattens everything, any transparency that you had in your logo is removed by the flattening process.

The trick is to go ahead and run your save for web, then substitute the flattened logo with one that has transparency. The way to do this is locate the slice with the logo in the images folder and rename a png WITH transparency to the same name. You must make sure that it has the same pixel dimensions and exactly the same name as the original file, or this will not work.

Here is a sample of the logo with transparency. I have made it over-sized so that you can size it to fit. The way this works is by taking the original artwork and loading just the luminosity into a selection. This is done by holding down the CTRL and ALT key and pressing the number 2 key. Then you want to inverse this selection so that you have a negative image of the luminosity. Do this by Select > Inverse (Shift+ Alt+I).
Then on a new layer, fill the selection with white.

To tweak the contrast just a bit, I then inverted the selection again and added just a touch of black.

I say that it is not perfect, because it takes the color below it and mixes black and white to it. This will always leave you with a color that is lower in saturation than the base color, but I don't know of any other solution.

Once you have a table built with a semi-transparent logo, it is up to you to either change be underlying color by changing the page color or creating a colored div behind the image. The way that this is built, if the background is white (or very light) the logo will not show.

Let me know your thoughts.
test-logo.png
0
 
LZ1Author Commented:
Thank you very very much!  This works.  I'll just have to resize it down, but it'll work for this application.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now