Changing a Black/White Logo to a Light-on-Dark Logo

The Problem: I had a jpg of a black logo on a white background. I wanted to use it on a website, but in gold on brown. Now, it would be easy if I had the vector file. No sweat; just modify the original and place it in a Photoshop file where I can create my website header. If I wanted the put a dark colored logo on a light background, that too would be a piece of cake. I would just place it in the Photoshop file and change the Blend Mode to Multiply (more about that below). But that would get me this result:



In an ideal world, it would be simple. But it gets a little tricky if, like me, you don’t live in an ideal world.

So here’s what I did:
1. Open the .jpeg in Photoshop.
2. Add a layer above the background and fill it with the color you would like the logo to be. (A shortcut to fill: Shift+Delete).
3. Right click on this new layer. Click Blending Options…
4. At the bottom of the dialog box, make sure it says Blend If: Gray. Pull the underlying layer’s white slider to the left until your logo appears. Press Option (Mac) / Alt (PC) and click on the slider to separate it. This allows for a smoother color blend. Adjust until the logo has no black showing around the edges. Click OK.

5. Open up your file where you want the logo to be. (Or create a new file and fill with the background color of your choice.)
6. Go back to your original file and drag only the bottom layer (the Background layer) onto the file where you want the logo to be. (If you need to make any scaling adjustments choose Edit > Transform > Scale or press Cmd+T (Mac) / Ctl+T (PC). Click the Maintain Aspect Ratio button and write down or remember what percentage you used.)

 

7. In the original logo file, combine the two layers by selecting the top layer and pressing Cmd+E (Mac) / Ctl+E (PC). (Layers > Merge Down in the menu.)
8. Drag this new layer into the file in which you want the logo to be. (If necessary make the exact same scaling adjustments as the other layer.)
9. Line these two layers up exactly. You can do this easily by making sure View > Snap is checked and View > Snap to > Layers is checked.
10. Make sure the black/white layer is under the color layer.

 

11. Invert the black/white layer by selecting the layer and pressing Cmd+I (Mac) / Ctl+I (PC).
12. Change the blend mode of the black/white layer to Screen in the Layers palatte.
13. Change the blend mode of the color layer to Multiply.

 

Voila! Why does this work? The key is BLENDING MODES. The Screen blending mode drops out black and the Multiply blending mode drops out white. If you don’t remember anything else, just remember this: Screen drops out Black; Multiply drops out White (SuBMaWine. You know, like submarine, only not. Is that a useful mnemonic? I don’t know.) These two blending modes are opposites of each other. This is one of the most simple and useful things I know about blending modes. (which isn’t saying much because I don’t know a lot). It’s useful to understand the way blending modes work because you can do so many things with them.