Solved

Make image take on background color

Posted on 2012-04-13
12
422 Views
Last Modified: 2013-11-19
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
Comment
Question by:LZ1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 26

Expert Comment

by:David Brugge
ID: 37843478
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
 
LVL 30

Author Comment

by:LZ1
ID: 37843700
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
 
LVL 26

Expert Comment

by:David Brugge
ID: 37845108
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
Independent Software Vendors: 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!

 
LVL 30

Author Comment

by:LZ1
ID: 37850986
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
 
LVL 26

Expert Comment

by:David Brugge
ID: 37854378
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
 
LVL 30

Author Comment

by:LZ1
ID: 37855657
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
 
LVL 26

Expert Comment

by:David Brugge
ID: 37856269
Sorry, I'm not seeing the attachment
0
 
LVL 30

Author Comment

by:LZ1
ID: 37856287
I could have sworn I uploaded it.  

Try this again.
EE-PSD.psd
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 37858953
Give me a day on this.
0
 
LVL 30

Author Comment

by:LZ1
ID: 37860392
Thank you very much!  It's appreciated.
0
 
LVL 26

Accepted Solution

by:
David Brugge earned 500 total points
ID: 37887805
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
 
LVL 30

Author Closing Comment

by:LZ1
ID: 37888062
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

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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In a previous article published here at Experts Exchange, Signature Image with Transparent Background (http://www.experts-exchange.com/Web_Development/Document_Imaging/A_12380-Signature-Image-with-Transparent-Background.html), I explained how to cre…
In a previously published article (http://www.experts-exchange.com/articles/10331/Automatic-Duplex-Scanning-in-PaperPort-Versions-11-12-14.html) here at Experts Exchange, I explained how to achieve duplex (double-sided) scanning in Nuance's PaperPor…
Learn how to set up basic frames and paths in Prezi and understand the open space that Prezi allows you to create presentations in.
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

690 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question