Solved

Make image take on background color

Posted on 2012-04-13
12
386 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
  • 6
  • 6
12 Comments
 
LVL 26

Expert Comment

by:David Brugge
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 30

Author Comment

by:LZ1
Comment Utility
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
Comment Utility
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
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 26

Expert Comment

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

Author Comment

by:LZ1
Comment Utility
I could have sworn I uploaded it.  

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

Expert Comment

by:David Brugge
Comment Utility
Give me a day on this.
0
 
LVL 30

Author Comment

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

Accepted Solution

by:
David Brugge earned 500 total points
Comment Utility
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
Comment Utility
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

I. Introduction In a previous article (http://www.experts-exchange.com/Web_Development/Document_Imaging/A_6537-PaperPort-Upgrade-How-to-download-and-install-updated-versions-of-PaperPort-11-and-12.html) (now deprecated), I discussed how to upgrad…
I. Introduction In a previous article (http://www.experts-exchange.com/Web_Development/Document_Imaging/A_6537-PaperPort-Upgrade-How-to-download-and-install-updated-versions-of-PaperPort-11-and-12.html) (now deprecated), I discussed how to upgrad…
The goal of the tutorial is to teach the user how to make his/her own presets while editing so it is easier to edit there photos. Create a preset you like and copy that setting then save it in to your presets folder.
Learn how to download your full Prezi presentation for offline presenting. Prezi doesn’t have to be viewed and shared in a web browser, even with a free account you can download your full presentation to share with others. Be sure to download any vi…

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now