An Animated Gif in Photoshop is so much fun to make!

While they may seem like a daunting task it is rather easy to make an animated GIF in Photoshop.  You have probably seen animated GIFs around.  They were big in the late 90’s when the Dancing Baby appeared all over the web and even on television with the show “Ally McBeal”, I can still remember those episodes!  Moving into the early 2000’s they kind of faded out and were seen less and less around the web.

Now with the advent of a site called Giphy, we are seeing more and more of these Animated GIF’s pop up all over the web and more specifically Facebook.  My wife and I routinely send GIF messages to one another to flirt while I am at work.  Of course, I choose the most appropriate ones 😉

Animated GIFs don’t have to be for fun, though.  We can use them on our Websites and Facebook Pages in a more artistic manner to give the viewer a small animated video to go along with their viewing experience.  You can see this in the examples at the bottom of the page where I used them to make moving images of the ocean.

It is relatively easy to make an Animated GIF in Photoshop; you just have to know the procedure.  In today’s tutorial, we will make a “practical” animated Gif that you can use on websites.  The procedure looks like this:

  1. Open all images in Adobe Bridge or Lightroom
  2. Create a Stack or Group and edit them with the same settings in Lightroom or Adobe Camera Raw
  3. Open the entire Stack or Group in Photoshop using “Load Files Into Photoshop Layers”
  4. Create a Timeline by navigating to Window – Timeline
  5. Select Create Frame Animation
  6. Go into the Timeline Options and select “Make Frames From Layers”
  7. Organize your layers accordingly so they play in the correct order
  8. Attribute the appropriate amount of seconds to each frame (we chose .35 seconds per frame in the video)
  9. Press CTRL + SHIFT + ALT + S (CMD + OPTION + SHIFT + S on Mac) to go into the Save For Web Dialog
  10. Use either of the settings found below to save your image.  Refer to the examples to see the difference dithering will make

To share your images on Facebook you cannot drag and drop them into the Post area like a normal photo. Nor can you upload them like a normal photo as Facebook will only select the first frame to share. They must be hosted on a Website such as  Wordpress site, your Adobe Portfolio, or Giphy. To get them into your Facebook Timeline you would insert them the same way you’d insert a link.

As of right now you must embed the link and Facebook will fetch it from the hosted site.

Enjoy the tutorial and have fun with those would be throw away images!

 

Diffusion Dither

Take a look at the Gif below along with the coinciding settings for saving.  With a Diffusion Dither selected you get a more natural looking image free of splotches of color.  This does add to the image size.  This GIF is ~527 KB.

01 Selective-Diffusion-100-Bicubic

01 Diffusion 100 Selective Bicubic

No Dither

With No Dither selected you can see splotches of color that are not rendered like the original photos.  This cuts down on image size if that is important to you.  This GIF is ~383 KB almost half the size of the dithered Animated Gif.

02 Selective-No-Dither-Bicubic

The Experience of the Scene

Here this Animated GIF has been created from several shots of the same scene.  Normally these shots would be throw away images as they did not capture the shot I was looking for.  However, they have been used as a moving picture to show you the experience of the ocean while I was shooting.

Animated Gif in Photoahop 1

Repeated Backwards

In this Example the Layers were duplicated and repeated backwards in the layers palette prior to making the Animated GIF.  It appears as if the ocean is in continuous motion rather than starting over from its beginning position.

Animated Gif in Photoahop 1

Blake Rudis
f.64 Academy and f.64 Elite are the brainchildren of Blake Rudis. While he is a landscape photographer, he is most passionate about post-processing images in Photoshop and mentoring others.

For Blake, it's all about the art and process synergy. He dives deep into complex topics and makes them easy to understand through his outside-the-box thinking so that you can use these tricks in your workflow today!
Blake Rudis on EmailBlake Rudis on FacebookBlake Rudis on InstagramBlake Rudis on PinterestBlake Rudis on TwitterBlake Rudis on Youtube