A Beginner’s Guide to 3D Photography – Part 5: ‘Wobble Gifs’

The third technique involves the creation of a looping gif animation which is in effect oscillating between the two images (left and right) rapidly. This will give an impression of looking into a 3D space, although arguably it is not as pronounced as the previous methods.

To create the ‘wobble gif’ first open your two images and close all other open files in Photoshop.

The first part of the procedure is much the same as that for the stereograph. You need to create a new file that has your two source images contained within as separate layers.

Go to…

File > scripts > Load Files into Stack…

 

Once again, click add open files and Photoshop will now create the required new file for you.

The procedure from here on will depend on which release of Photoshop you are using as Adobe has changed the animation panel in recent versions. I will attempt to cover all eventualities by referring to differences between CS3 and CS6 (and later), as appropriate.

Photoshop CS3, go to…

Window > Animation

Window > Animation

In CS6, the ‘Timeline’ panel is probably visible by default, at the bottom of the screen. If not, go to…

Window > Timeline

In order to persuade the Timeline panel to look like the Animation panel of earlier versions, click on the timeline menu, top right of the panel.

In all versions…

On the animation panel, create a new frame by clicking the new frame icon…

With the new frame selected, go to your layers panel and switch of the visibility of the top layer, by clicking on the eye icon

Ensure that the playback is set to loop ‘forever’ and press the play button. Your image should now ‘wobble’ back and forth continuously.

By default there is no delay between the frames, and so when exported and viewed in a web browser, the speed of the animation will probably be a little too fast.

 

Add a short delay to the wobbly of 0.1 sec. to both frames

Resize your image to something more appropriate for screen display.

Image > Image Size…

Make sure that ‘Resample Image’ is checked then change the width in the Pixel Dimensions. I recommend something like 600 px across. You can ignore the ‘Document Size’ stuff, it is entirely irrelevant to this exercise (see my article ‘Vive La Resolution‘).

Next, save your image as a gif file. Go to…

File > Save for web and devices…

Select ‘gif’ as the format, and 256 Colors.

If using CS6 the ‘Save for Web’ dialogue box appears a little different, but the principle is the same.

(update: In CC the ‘Save for web and devices option is hidden. Use the key stroke combination “cmd/ctl+alt/opt+shift+S” to open the dialogue box)

Come out of Photoshop, locate your new file and open with a web browser, (Internet Explorer, Chrome, Safari, etc.). Your finished ‘wobble gif’ should now display and play continuously, just like this one…

So there we have it, three relatively simple methods for generating 3D photographs. This type of image may not end up being the principle thrust of your portfolio, but in completing these tutorials it might help to extend and reinforce your understanding of Photoshop. For example, I use the anaglyph workshop as a way of introducing students to the concept of ‘channels’ and what we mean by ‘RGB’. Have a go if you like, it might be fun. Let me know how you get on…

Leave a comment

Your email address will not be published. Required fields are marked *

Duncan Shepherd .co.uk

Enjoying this blog? Spread the word