I start by finding a high-quality scan of an old stereoscopic image. This is a scene of Market Street in San Francisco from 1901 that the Metropolitan Museum of Art has made available.
These images were created using a stereoscopic camera, which is a camera with two identical lenses placed far enough apart to give a slightly different view of a scene. This is the same way your eyes view the world; you see from two slightly different perspectives and your brain combines the two images to produce a three-dimensional interpretation of what you are seeing.
Stereoscopes where very popular from the late 1800s until around 1920 or so. Some images date back to before the U.S. Civil War. These pictures where typically viewed using a stereoscopic viewer that shows each eye one half of the card.
(For a completely mind-boggling activity, check out this stereoscopic image I animated of a woman using a stereoscope).
I take these two images and animate them into a gif. Somehow our brains process these as 3D two, and you get an actual sense of depth when you look at them.
I do all my editing in Gimp, which is an open source image editing tool. (Free!) If you’d like to learn more about using Gimp, there are tons of online tutorials available. I’m just going to give a high-level overview of how I use it - the details are beyond the scope of this post.
To start, I use the select tool to copy the left picture and paste it as a layer in a new image. I then move the select box over to the right picture, copy it, and paste it as a second layer in that new image.
Next I align the two layers to achieve the best 3D effect. I set the top layer to Difference mode and move the layer around until the best alignment is somewhere in the center of the depth of the image. Black portions of the image have no differences, while white indicates a high difference.
It’s kind of a weird way to edit it, but you get a feel for it after a while.
You can change to top layer back to Normal mode and then toggle the visibility of the layer to get a feel for the 3D effect.
Occasionally you will need to rotate one of the layers to get the two in correct alignment. This is just trial and error, but in my experience most tweaks require less than +/- one degree of rotation.
Every once in a while I’ll come across one where it’s not just a matter of rotation, but a major issue with perspective or scale. You can try to adjust, but those are almost impossible to correct.
I should note here that I often abort an image at this point. Sometimes I find the 3D effect to be very unimpressive, or I decide the subject matter is not particularly interesting. Sometimes I don’t notice until now that the two images are damaged in away that is very visually jarring when viewed back to back.
You can see in the image above that there is a bit of a flash effect on either side of the image when transitioning from one layer to the next. It’s a bit distracting, but I’ll live with it. Sometimes I’ve used photo editing tricks to correct it, but it’s usually more trouble than it’s worth.
Next I will crop and then resize the image. Tumblr limits the size of animated gifs to 1 MB, which in my experience is usually between 750x750 and 850x850 pixels for this type of image and quality. You could make an argument that it would be best to do all of the editing at maximum resolution and then resize the image smaller as the very last step, but I find my workflow works best if I resize now.
This image needs some restoration! I start by reducing the saturation - I’ll explain why this is necessary in a bit. I work on one layer at a time, but I usually apply the exact same action to each layer so the end result is the same.
I don’t completely desaturate the image, because I like it to have a bit of that vintage feel. For this image I used Gimp’s Hue/Saturation dialog and reduced the saturation by -50.
Now I adjust the levels of the image. Since the image is basically monochromatic, I just adjust the value channel. I view the logarithmic histogram so I don’t accidentally trim actual data from the edges of the exposure.
A histogram like this is fairly typical for these older photos. These faded prints (and then their digital scans) often don’t have the broad dynamic range modern images do. Adjusting the levels basically takes this narrow band of data and stretches it across the full visual spectrum of black and white, creating more contrast in the image.
Looking much better! Notice how the levels adjustment brought back more of the sepia tone to the image? If hadn’t reduced the saturation before applying the levels changes, this image would be a heavy yellow shade now. You could reduce the saturation after the levels, but in my experience you then have to apply another levels adjustment to get it this clear.
I don’t change the hue of the image at all. Some are sepia, some are blueish, some have more of a red or yellow tint. I think the differences in color give variety to my images and make them unique. Some of the scans are in black and white, so the end result is grayscale. I just leave those as they are too - it seems silly to colorize and add hue.
The final step is to remove scratches, blotches, tears and imperfections from the image. This one is pretty clean, but some require a lot of work. The problem with these artifacts is that they are more visible when you animate the two images, because the spot is only present on one of the layers. Here’s a zoomed view of a section of this image:
Notice the blobs that just seem to appear in the sky? When they flash in and out like that, your eye is automatically drawn to it. Sometimes even small spots can be very distracting, especially if they’re white on a dark background.
Honestly, for most of my images about half of my work goes into this one step. I use a small healing brush tool and sometimes a clone tool to remove any flaws that detract from the animation. It takes some trial and error to get good at it. I often make some edits, toggle the top layer on and off a few times to see how it looks animated, and then make some more edits. I also turn on playback using the Gimp animation filter and look for anything that stands out, then fix it.
This is also another step where I abandon many pictures. After my levels adjustment increases the contrast, many of the problems become much more apparent. Sometimes I don’t feel like the image is salvageable.
Luckily this particular picture is very well-preserved; the few imperfections that are present are very small.
At some point before this, I set a defined frame rate for the two layers. I usually do this whenever I start viewing it in the animation dialog instead of just toggling the layers. For most images, I use 150 ms per frame, but some people prefer more or less. When the 3D effect is subtle, I sometimes use 125 ms or 100 ms so the differences between the viewpoints of the two images stand out more. In Gimp, you set the frame rate for a layer by adding “(150ms)” to the end of the layer name, as so:
Once I have both layers cleaned up and the animation squared away, all that’s left is exporting the image as a gif. In Gimp, you just select File -> Export and save the file with a .gif ending. A dialog will come up for you to set the gif export settings - be sure to click “As Animation” and “Loop Forever”. You can enter a comment if you want, but don’t check any of the other boxes.
If you’re sharing your image on Tumblr, make sure that the exported gif is less than 1 MB in size. In fact, you should probably be sure it’s less than about 990 KB, because sometimes Tumblr seems to make things a little bigger when it imports and processes them. If your image is larger than 1 MB, it will upload, and it may even look okay in your dashboard, but when you publish it the full-sized version will not be animated.
lf you need to reduce your file size, you can go back to Gimp (or your photo editor of choice) and either resize the image to smaller dimensions or crop it to smaller dimensions. You could also make all your images smaller when you start editing - say 500 px or 650 px maximum to a side, and then you will likely never have to worry about hitting up against the 1 MB limit for a simple two-frame animation like this. I prefer to keep my images as large as reasonably possible.
One other note - I’m not a big fan of optimization techniques to reduce the file size. Many programs are available to compress a gif, but the image quality is usually severely reduced. In my opinion, these pictures are works of art, and I want to preserve the clarity and beauty of them as much as possible.
When you’re done, hopefully your image looks something like this:
I want to walk down that street! I much prefer this way of viewing it to the static stereocard it came from.