The click-to-reveal trick on Twitter has been all the rage for about the past year. Recently I worked with THE PLAYERS Championship to figure out how to do it.
How it works:
Twitter has a different background color (white) for the container when a photo is on your timeline compared to when you click on it (black). This trick uses the ability to have a transparent background in a PNG file to its advantage. This article on Medium explains the theory the best. In fact, this image they created gives you a good idea of what’s happening:
As the Medium article even gives a guiding rule to it.
The Guiding Rule:
Anything you want displayed inline, make it black. Anything you want displayed in preview, make it white.
‘Click to Reveal’ with photographs:
Illustrations are great, but many working in sports would love to show off the brilliant work of our photo staff too. How do we that? Think of when someone is drawing with charcoal on a white piece of paper. All they’re doing is determining how much black to put on the white background to give different amounts of shading. We’re doing the opposite. We are figuring out how much white to put on a black background.
Step 1: Open regular image in Photoshop
Step 2: Desaturate the image – (CTRL+Shift+U) or (Image -> Adjustments -> Desaturate)
Step 3: Select the entire image and copy the entire image (CTRL+C). We will be pasting it in Step 6.
Step 4: In the Layers panel, go from Layers to Channels
Step 5: Create a new channel (same looking button as creating a new layer in the bottom right) – the new channel should automatically be called Alpha 1
Step 6: Paste image into the Alpha 1 Channel (CTRL+V)
Step 7: Deselect the image (CTRL+D)
Step 8: Click ‘Load Channel Selection’ – it’s two spots to the left of the create a new channel button that you pressed in step 5
Step 9: Go back to ‘Layers’ and create a new layer
Step 10: Click on the brush. Make sure it’s big enough to cover the ENTIRE image in one stroke and that the hardness is at 100%. Have the color be white and stroke across the ENTIRE image on the blank layer that you created in step 9.
Step 11: Get rid of the original image, add in a layer of pure white and pure black to see what will be visible before and after clicking (already in the PSD file)
Finishing the project:
We’ll add some black text/logo to show up when it’s in the timeline. We need to do it underneath the layer that we painted white onto, or else it will just show up as pure black after it is clicked on too. In addition, this means that parts of the image that you are hiding until after the click will be visible when from this black being behind it. For that reason, I suggest keeping it fairly small.
You can use color, but remember that it will be visible on before and after the click. I would suggest keeping it simply for your logo purposes.
Again, the order of the layers should be:
White that you painted on
Black text or black logo of what you want beneath
White background to see what it would look like before clicking
Black later to see what it would look like after clicking
Finally, make sure the white and black background layers are turned off and then save as a PNG with transparency. Be careful when uploading to Twitter. Sometimes if you message the image to yourself using iMessage, it will change it from a PNG to JPG.
If you would like to download the PSD file for this, CLICK HERE.
AUTHOR’S NOTE: This trick works well when viewing on desktop and Twitter app for Android. The Twitter App for iPhone uses an off-white, revealing the image and when the Twitter app on Android is in night-mode it uses a dark blue. Be sure to know if most of your followers use desktop/iPhone/Android before using this trick.