Image description


The illusion of 3D without needing glasses: creating layered animated gif images with Photoshop

Bookmark and Share

Read the webcomic

Explore the database


Basic knowledge of Adobe Photoshop. You will need the "full version" of Photoshop or a similar graphics program with layers and an animation panel, capable of exporting a .gif image. The work shown is done in Photoshop CS5, and I think that even a much earlier version of Photoshop would work fine, probably back to version 4 or 5. You could most likely use FireWorks – it might be great for this, and I think Flash would work, but not really well. Gimp and Photoshop Elements can be used to make animated gifs, but I think it would be very complicated to attempt this tutorial without an animation panel. As far as I know, in Gimp and Photoshop Elements you can only build animation by making each frame on a separate layer. That would make things quite laborious, but it could be done with a lot of copying and merging of layers.


Look at my mistakes and then you won't repeat them yourself

This article will follow the development of a 3D page in my webcomic, which consists of two very different panels. In building the page, many challenges of 3D simulation are encountered, and at the end (next installment will maybe not be published, this is uncertain) we'll look at a number of interesting faults and obstacles that are identifiable in the finished work. Knowing these obstacles ahead of time will help you plan work that is easier, faster, and more convincingly 3D. 


The basic idea

The method for making this type of 3D image is not actually complicated. The final image is an animated gif that simulates depth. It is created as a multilayer Photoshop file, with upper (foreground) layers moving to the right, while lower (background) layers move to the left. This movement is saved as three frames of animation in this example (plus a fourth frame that is merely the second frame repeated to create a loop). 


The animation is then reversed (by merely repeating the middle frame, frame 2, at the end as frame 4) and the foreground and background layers again move in opposite directions, moving back toward where they started. The cycle runs over and over, 1234, 1234, 1234, and the layers sway endlessly back and forth. The method is similar to parallax scrolling, but the movement is in both directions. 

Image description