Photo Slide Tutorial

Start a new document 125 x 95 pixels depending on how big you want the animation window. Then open up your image you want to animate, if its a high resolution image id resize the image to about 1024 x 768 or even 800 x 600 if you prefer. “copy” your photo or what ever image your using and “paste” it into your 125 x 95 document. Then goto “file > edit in ImageReady”

Once your image/photo has loaded up in “adobe imageready” you should have a layout like this.

Now in the top window where you see the actual size of your image drag your image to your 1st starting point, this will be the image the animation plays first.

Now select frame 1 and click “duplicate current frame”.

Then click frame 2 and move your image to another part of the photo by draging it in the top window.

Then duplicate your second frame and move your image again to another part of the photo.

Do the above steps as many times as you want depending on how many places/faces/things etc… you want the animation to look at.

Now click frame 1 then click on the “tween button”, Use settings in the below picture.

You will notice now that you have an extra 5 frames infront of frame 1 this is our tween between frame 1 and what was your frame 2. Now you need to find your frame 2 to which should be frame 7. Select frame 7 and do the same as above. This is how my time line looks.

Now if you look under your frames you should see “0 sec” this is a delay before the next image is shown, we need to set 3 delays on frames 1, 7 and 13. Click “0 sec” and change to “1.0”.

If you click the play button you can see how it plays. All thats needed now is to save as a .gif. Goto “file > save optimized as”

Heres mine.

6 thoughts on “Photo Slide Tutorial”

  1. For those who want’s to make the photo/picture animate with CS3 (without imageready), save it as: Save for Web and Devices… then it whill work

Leave a Reply

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