: How to make a .PNG that shows one image on a black background and a different image on a white background? This image was put up by the NHL on Twitter. In the feed this is the image,

@Phylliss782

They've used the normal image data as a mask for the part of the image outside of the Sabres' logo and full opacity inside the logo. Here's the alpha data:



Here's the greyscale image to which that mask is applied:



If you use the first image as a layer mask for the second, you can recreate the effect. As other users have mentioned, this works because Twitter's lightbox uses a black background.

Vote Up Vote Down

@Si6392903

In the original image, the player image is actually a layer mask on a solid white layer over top of the team logo; the darker the image tone, the more transparent it will be - but there's nothing there that isn't white with differing degrees of transparency. The logo itself is black, so against a white background you only see the logo and whatever part of the player image is over top of it. Flatten the image to make a PNG out of it and whatever was overlaying the logo becomes mixed in with it, and whatever was outside of the logo remains transparent white.

White is not visible against white, no matter how solid or transparent it is. Put a black background behind the image, and the logo disappears (black over black is no more successful than white over white), and all you're left with is the white that was originally laid over the logo plus the white that exists outside of the logo.

Vote Up Vote Down

@Sims5801359

Why it occurs is answered here:

Why does this PNG image on twitter look different when clicked?

Just looking at the images without trying myself it appears the How is by having inside the circle blacks present and whites are transparent. Outside of the circle whites are present and blacks are transparent.

Vote Up Vote Down