Click on the image to reveal the hidden layer |
Here's what the image looks like at first blush compared with the hidden layer:
Here's a quick and dirty rundown of what I've learned so far trying to make these. (In the fastest, laziest way possible.)
There are two main parts to this:
- Making the image
- Posting the image
and some other tips about drawing.
Making the Image
I drew these on an iPad using SketchesPro2 by Tayasui, which is great at handling layers. You can access these by clicking the stack icon at top right.
Here you can see my three layers:
- The skeleton
- Mary Poppins
- Mary Poppins image I traced*
*yes, I am lazy
Right now I have my 3rd layer hidden, and the skeleton layer on top of Mary. This makes the skeleton easier to draw - if I draw it on the second layer I can't see it because the default background is white. (White on white...you get it.)
When I'm done drawing I swap layers 1 and 2 to put the skeleton under Mary (achieved by long hold and drag) and the merge the layers. It is *important* to merge the layers in the right order - if you merge with the secret layer on top, it will likely be somewhat visible at all times, which is the opposite of what you want to do.
Once I merge the layers, I export to my camera roll.
Then I unmerge, in case I want to go back and edit either one.
Go to camera roll - you should have up to 4 images depending on how many layers you used:
- JPG of all layers merged automatically by sketches
- JPG of background (just white)
- PNG of individual layer (traced image, for me)
- PNG of individual layer (merged Mary and skeleton)
Camera Roll is a bit deceptive in displaying PNGs - it will give you the white background, even when you've selected the layer (which should have no background and inherit the background of where it is placed, or have a black background, which is how we'll get our reveal).
Google Photos is better with this, and I use this to check on my images to make sure they are working the way I want them to.
Once you've got your image set, now you're ready to post.
Posting the Image
I've found this to be a little tricky, and you may need to experiment a little to find out exactly what works for you.
In a nutshell, you want to post your image as a PNG on your chosen platform.
In Twitter (and I presume Tumblr) the image will show with a white background when scrolling past a post, or selecting and viewing the post (the entire post). Reveal happens when you click on the image itself - pulling it away from that inherited white background.
Uploading directly from my phone or the iPad doesn't work for me (I have an Andriod phone) because the app converts the PNG to a JPG.
Best method I've found is to upload it to Google Photos (which I do automatically anyway, you should to) then post the image from a laptop using a browser (Chrome, in my case).
Tips about drawing
Since you will typically be dealing with white and black backgrounds, you have to choose colors for your image that work well with this.
Thinking about those red and blue glasses I played with as a kid, that would reveal 'secret messages'.
Easiest way to get at this is with using pure black and pure white. The reveal will make all your black works or drawings disappear.
However, darker greys will also nicely eliminate.
In Mary's case, the white pops through pretty well because it is so bright against the darker blue and red.
In this one, the white arms and face don't pop through as well because it is competing with lighter colors.
And in this one, the words on the right are flawless because they aren't competing with anything.
click on image to check it out |
Oh hey, and watch out for resizing. If you try to crop your image in Photos or Camera roll it'll convert it to a JPG.
In Summary
Thanks for bearing with me on this brain vomit. Will update more and try to clarify as I keep tinkering around. Hopefully this is enough to get anyone started.
Happy doodling!