Recipe for Creating Animated GIFs in the General Purpose Labs

  1. Start up Adobe Photoshop CC 2018.
  2. The Adobe PhotoShop window opens. You now need to open all of the images that will make up the frames of your animated GIF. On the menu bar, click on 'File' then click on 'Open'. The Open dialog window will appear. In the 'Look in:' drop-down list, navigate to the folder that contains the images for your animation. Click on one of the images you would like to use. For all the rest of your images, press down and hold the control (Ctrl) key then click on the next image to also include. You will end up with all of you images that you are using being shown as 'selected'. Click on 'Open'. You can, instead, if necessary, open each image, one at a time. The end result will be several images all open at the same time in PhotoShop.
  3. Click on the window containing the image that you would like to make the first frame of the animation. This will become your background layer. If the 'Layers' window is not open, click on 'Windows' then 'Layers' and it will appear.
  4. You need to save this first frame as a PhotoShop image. Click on 'File' then 'Save As'. Make the file name anything within reason but be sure to make the format 'PhotoShop (*PSD,*PDD, *PSDT)'. Save it in the same folder from which you fetched the frames for your animation. The file extension should be .PSD.
  5. Your x.PSD file is your base file. You now need to save each frame, in the order that they should appear, "on top" of the base image in layers. In the order in which you would like the frames to appear, do the following for each.
    1. Click on the window containing the next frame in the animation.
    2. On the menu bar, click 'Select' then 'All'.
    3. On the menu bar, click 'Edit' then 'Copy'.
    4. Click on the window that is you PSD file.
    5. On the menu bar, click 'Edit' then 'Paste'
  6. Click on the "timeline" tab in the bottom area of the screen then click on "Create Frame Animation". If the Timeline window is not open, at the top of the screen, click on Window then Timeline. It should now appear on your screen.
  7. In the Timeline window, at the center, if you see a dropdown box and it says "Create Video Timeline", click on the down arrow and select "Create Frame Animation". Now click on it.
  8. In the 'Animation' window, click on the animation selection list. This is on the top, right-hand side of the Animation window. A list of options will appear. Click on 'Make Frames From Layers'. You will see that your Animation window now contains the number of frames that you included in your animation.
  9. Notice that there is a number below each frame. This is how long the image will be displayed. If you would like to change the value, click on the down-arrow and choose something there. To preview how your animation will look, click on the play button below the frames. It will display in the window that has your PSD file. If it doesn't seem to play, make the PSD file window larger (maximize it) so that you can see it. Based upon what you see, make adjustments to the timing as desired.
  10. Save your animation as an animated GIF image. On the menu bar click on 'File' then 'Export' then 'Save for Web'. In the 'Save for Web' window, click on the 'Save' button. This brings up the 'Save Optimized As' dialog window. Make sure the 'Save as type:' listbox says 'Images Only (*.gif). Save it to the same folder as your original images. Make sure you give it a new name.