Making a Simple Animated Gif

This tutorial explains how to make a simple animated gif that toggles back and forth between three images.

• The file ENIAC00.gif
• The file ENIAC01.jpg
• The file ENIAC02.jpg

1. Open up Adobe Photoshop by going to the Start menu --> programs --> Adobe Photoshop Elements
   


2. Click on file-->new
   The following menu should show up, make sure the values on your screen are identical to the ones below:
   
   Your screen should look similar to this.
   
   We now have a a complete image to work with, much like an artist with a canvas.


3. Click on the layers tab in the top right corner. Rename the first later, ENIAC Picture 00
   Click on Layers-->new-->layer and create two new layers called:
   • ENIAC Picture 01
   • ENIAC Picture 02
   
   


4. Go to file->open, and open the following files:
   • The file ENIAC00.gif
   • The file ENIAC01.jpg
   • The file ENIAC02.jpg


5. First, we will alter all three images so that they are approximately same size (about 300 X 225) using both resize and crop.
   
   • Select the files ENIAC02.jpg, and then go to image-->resize-->image size. Change your settings to match the ones below to change the size of the image to 275 X 225.
     
     Save the file and leave it open.
   
   
   • Select the files ENIAC01.jpg, and then go to image-->resize-->image size. Change your settings to match the ones below to change the size of the image to 300 X 226.
     
     Save the file and leave it open.
   
   
   • Select the files ENIAC00.jpg, this image is longer then we want it to be. Using the select tool , select a portion of the picture:
     
     then go to image --> crop. Check on on the size of the iamge by going to image-->resize-->image size. The goal is to get a picture of the approximate size 300 X 225.
     Hint: if you cropped the picture to much go to edit undo. Hint: If the image is too big, using the select tool to select a smaller section fo the picture and click crop again or try resizing the image.
     When you picture is close to being 300 X 225, save the file and leave it open.


6. Copy and paste ENIAC00.jpg to layer ENIAC Picture 00, ENIAC01.jpg to layer ENIAC Picture 01, and ENIAC02.jpg to layer ENIAC Picture 00]2


7. Now it is time to add text. Make a new layer, and call it text.
   Next select the text tool
   A menu should appear near the top of your screen, there you can select your font type, size, and color.
   Type in your Name.
   Hint: Choose a large font size and a bold color
   Hint: Clickon the layers tab in the top right corner and make sure you have 4 layers: three with images and one with text


8. Click File-->Save for the Web
   You should see a menu like the one below.
   
   First we want to click in the box next to animate, to make sure the box is checked. This tells photoshop we want this to be an animated gif.
   
   This allows us to edit the animation settings. We are concerned with two settings, loop and frame delay.
   If you leave loop unselected, your image will animate through once and then stop.
   
   
   If you select loop, your image with animate continously
   
   
   Frame Delay determines how fast it toogles through your image, the more time you leave between each fram change, the longer it will stay on each image. The first image has a Frame Delay setting of 5.0, the second had a Frame Delay setting of 0.5.
   Leave loop selected and select a Frame Delay time that you like, click save and name your file MyEniacAnimation.gif.