Stereographic Animations Tutorial

Claire Enkosky - October 18th, 2012

The last post got a lot of responses (and we do love an adoring public), so now we'll share the secret to our stereoscopic animations.

Take this image from the fantastic Buffalo Olmsted Parks Postcards & Stereo Views collection:

Right click the image and select "copy image." In Photoshop, create a new file and paste the image:

Using the 'Rectangular Marquee Tool' (or "Boxy Select Tool," as I like to call it), select the first half of the stereoscopic image:

Copy this (CTRL + C), open a new file in Photoshop (it will be the right size by default), and paste it in (CTRL + V):

Return to your stereoscopic image file in Photoshop. Move the 'Rectangular Marquee Tool' (AKA "Boxy Select Tool") over to the second half of the image:

Copy this (CTRL + C) and paste it (CTRL + V) on top of your other half in the second file. Click to open your Layers panel (on the right side). You should see the two halves, each with its own layer:

In the Layers panel, you can adjust the opacity of one layer at a time. This is helpful for lining up the two halves of the stereoscopic image. Select a layer (it'll be blue in the panel when it's selected), and reduce the opacity to about 50%. Then you can move the layer around on top of the first layer to line up the outline. Don't line up the contents of the two halves, or you'll defeat the purpose of the stereoscope!

After adjusting the placement of your top (second) layer, return the opacity to 100%. In the main menu, under Window, click Animation. This will bring up a new tool panel called Animation. You can see the frames of an animation as you build it. You begin with one. Click the icon to create a new frame:

Having created a new frame, remove visibility for your top layer. This is done by clicking the little eye icon in the layer panel:

Now you have two frames in your animation panel. One shows the bottom layer and one shows the top layer. By default, the frames are set at 0 seconds each. Click on the frame in the animation panel and select 0.1 sec or 0.2 sec. Do this for both frames:

In the animation panel, you can press the play button for a preview of your GIF!

In Photoshop's main menu, go up to File -> Save for Web & Devices. Click Save on this new window:

You now have an animated GIF of your sterescopic card!

Stereograph Animations

Claire Enkosky - October 17th, 2012

A reproduction Holmes stereoscope by Davepape from Wikipedia Commons

Inspired by the New York Public Library's Stereogranimator (http://stereo.nypl.org/), we've created a few animated stereographs from the collections on New York Heritage!

Stereoscopic cards were precursors to the iconic View Master toy.  Users slid the stereograph into a viewer and looked at each half of the image with a different eye, causing an optic illusion of depth because each separate image was taken from a slightly different angle.

You might not be able to spot the subtle differences between the two halves of this stereographic image, Burial Mound of the Seneca Indians at the Old Castle, Kanadesaga, (Geneva, N.Y.) from 1879:

But by layering these two halves on top of each other and animating the result into a gif, we can produce a similar result:

Here are some other examples at work:


Image shows stereograph postcard with view of Ivy Arch bridge in Delaware Park with flower beds and a well maintained carriage road underneath the bridge, circa 1905-1910.


The oldest church bell in Western New York State west of Utica. Cast at Gibbonsville, (now West Troy) N.Y. June 1819. Hung in the First Presbyterian Church steeple, Geneva. Nov. 1819.

Another alternative to the GIF is a javascript animation, explained here: http://sunpig.com/martin/archives/2005/12/12/wiggle-stereoscopy-a-new-ap...