I have a logo image which I need to make transparent for my web page. I need the black parts of the image to be transparent while the white is opaque and the greys are of various levels of transparency depending on each pixel's luminosity.

  • Can we have a look of the image .. I think i have an answer to that – Codart Sep 3 '16 at 0:28
  • Ok I see .. the white part of your logo is already opaque. So that's one problem resolved. But you need to understand how transparency work, having a transparent black on your logo, who a white background will automatically turn to grey. Now if that's what you want then all you have to do is create a "mask layer", select each black part of the picture with the "Magic Wand tool", then paint on the mask over the black parts with a 50% opacity brush. Make sure your forground colour is set to "white". After that, put a white solid color underneath the layer who got the mask on. 1/2 – Codart Sep 3 '16 at 0:55
  • You can't do much with the grey, because on your logo is set as a shadow, and a shadow already has a various level of lighting. Unlike Cai up there who has a transparent background, you want a white background, there it is impossible for you to have any transparency on those greys or black. The best you can do is reduce their opacity. to do that for the greys. Select the red parts of your logo with "the Magic wand tool", then press CTRL+SHIFT+I, then with the "eraser tool" set at 50%, paint over the greys part only. Hope that helps my friend 2/2 – Codart Sep 3 '16 at 0:59

Use the image as an alpha mask. Take this black and white "logo" as an example:

enter image description here

  1. Select All and Copy (or Copy Merged if you have multiple layers).

  2. Create a new mask with the "New Layer Mask" button in the Layers panel (either on the your logo layer or a group containing your logo if it has multiple layers).

enter image description here

  1. Alt+Click the mask thumbnail to edit the mask (your canvas should turn completely white), then paste the image you previously copied. Click the layers thumbnail to finish editing the mask.

enter image description here

  1. As you can see, the semi-transparency defined by the various levels of gray are still gray in color too. If that isn't what you want then select all and fill the layer completely with white (or whatever color you want the logo to be).

enter image description here

Your now transparent logo:

enter image description here

| improve this answer | |
  • You don't need to flatten it – Ryan Sep 3 '16 at 3:20
  • @Ryan very true. It was late and I was half asleep – Cai Sep 3 '16 at 7:24
  • Thanks for the help. Your technique worked perfectly and it looks great on my website. – Lang Straub Sep 3 '16 at 9:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.