How to make animated GIFs, both freely and with Photoshop. The presentation uses animated GIFs itself, so it's probably better offline and in presentation mode. But still useful without the animations. Be sure to follow the Smithsonian Libraries' Tumblr blog, Turning the Book Wheel, http://smithsonianlibraries.tumblr.com for more.

1. GIF Maker, GIF
Maker, Make Me
A GIF
Richard Naples
October 30, 2014

2. Correct English is the slang of
prigs who write history and
essays.
- George Eliot, Middlemarch, 1872
We don’t really have much fiction.
library.si.edu
GIF – Hard G or Soft G? Who cares!

3. GIF – Spare me the debate…
JIF is the Format, GIF is the Culture
https://medium.com/message/jif-is-the-format-gif-is-the-culture-af8673796c44
library.si.edu

4. About GIFs– Why use them at all?
Animated GIFS can help make your content stand
out, expand to new platforms, and increase
engagement.
If a picture is worth a thousand words, a GIF is
worth 10,000—it tells a story.
library.si.edu

5. Twitter Tumblr
No larger than 1.75MB
No more than 500 pixels wide.
library.si.edu
IMAGE GUIDELINES – Tumblr & Twitter
No larger than 3MB
GIFs are limited to 256 colors. Using less color (or going
greyscale) lets you show more.
GIFs contain a series of frames to allow for simple animation.
The more frames, the bigger the file size.

6. SOURCE MATERIAL – Formats
ANY VISUAL MATERIAL WILL WORK:
• Photography
• Video
• Illustrations
• Screenshots/Screencasts
library.si.edu

7. SOURCE MATERIAL – Where to get things
Where to get content?
• Camera (iPhone/Android)
• Collections Search*
• YouTube*
• Archive.org
• Anywhere that the law allows
Nothing fancy needed, just your iPhone!
*OK technically this might be bad. Ask first!
library.si.edu

8. But how do you make them?!?!
library.si.edu

9. Making GIFs– To Have (Photoshop) and to Have Not
I create animated GIFs with Photoshop, but there
are free or low cost alternative tools & methods!
(*Since I use Photoshop, I’m not the most up to date on these, so
seek out your own!)
library.si.edu

10. Online GIF makers– compiling photographs
library.si.edu
GIFMaker.me
Method:
1. Upload pictures
2. Set canvas size and speed
3. Create

11. Online GIF makers– compiling photographs
library.si.edu
ezGIF.com
Method:
1. Upload pictures
2. More options! resize, optimize,
special effects, speed, split,
ADD TEXT!
3. Create
ezGIF also lets you edit
existing GIFs and turn
Video to GIFs

12. library.si.edu
Online GIF makers– video to GIF
Imgflip.com
Method:
1. Enter YouTube video URL or upload video
2. Set start & end, width, frames, etc.
3. Create!
Caveat emptor: they add a
watermark with the imgflip URL.
Lame. But you could crop it with
ezgif.com

13. library.si.edu
Online GIF makers– video to GIF
Gifilike.com
Method:
1. Enter YouTube video URL or upload video
2. Set start & end, width, frames, etc.
3. Create!
Caveat emptor: they also add a
watermark.

14. library.si.edu
Online GIF makers– video to GIF
Makeagif.com (free account)
Method:
1. Enter YouTube video URL or upload video
2. Set start & end, width, frames, etc.
3. Create! (And delete if you don’t want it there)
No watermark with a free account.

15. If you have Photoshop & some know-how…
library.si.edu

16. PHOTOSHOP– Basics first.
PHOTOSHOP HAS LAYERS:
Layers are the basic building block in Photoshop.
To make an animation in Photoshop, you have two
basic actions:
1. Make layers visible or invisible.
2. Move a layer.
That’s it. Between the frames of your animation, you
need to either move a layer or turn it on/off.
library.si.edu

17. library.si.edu
STEP BY STEP – Butterflies!
First, bring an image into
Photoshop.
Ramón de la Sagra, Histoire physique, politique
et naturelle de l'ile de Cuba, 1838-1857

18. library.si.edu
STEP BY STEP – Butterflies!
Separate the object into
layers:
Change the background to the
paper color and hide.

19. library.si.edu
STEP BY STEP – Butterflies!
Create Layers to show
movement:
1. Separate the big butterfly to a
new layer.
2. Split the copy into constituent
parts: left wing, right wing, body.
3. Use groups, layer names, and
colors to keep things in order.

20. library.si.edu
STEP BY STEP – Butterflies!
Turn on animation:
1. Under Window, select
Animation.
2. In the Animation options, make
sure it is on Frame Animation if
it isn’t already.

21. library.si.edu
STEP BY STEP – Butterflies!
Change Layers:
Using Transform, reduce the width
of each wing.

22. library.si.edu
STEP BY STEP – Butterflies!
Animate:
1. Turn on the original open
butterfly and turn off the
changed group.
2. Add a frame in the Animation
window, then turn off the
original open butterfly and turn
on the group.

23. library.si.edu
STEP BY STEP – Butterflies!
Animate:
1. Set the frame timing
underneath each frame.
2. Set the animation to loop
forever

24. library.si.edu
STEP BY STEP – Butterflies!
Close-up!:
1. Set the frame timing underneath
each frame.
2. Set the animation to loop forever.
3. Add new frames (copies last one)
4. Delete frames.
5. Preview.
6. “Tween” (Google it!)

25. library.si.edu
STEP BY STEP – Butterflies!
Create a GIF!:
1. Save your work now as PSD
just in case!
2. Go to FileSave For Web &
Devices to get GIF window.

26. library.si.edu
STEP BY STEP – Butterflies!
Create a GIF!:
1. Set it to GIF.
2. Adjust number of colors.
3. Adjust image size.
4. Check file size to keep within
limits.

27. library.si.edu
STEP BY STEP – Butterflies!
Create a GIF, closeup!:
1. Set it to GIF.
2. Adjust number of colors.
3. Adjust image size.
4. Check file size to keep within
limits.

28. Ta-da!
library.si.edu

29. PHOTOSHOP– Other Competencies
IT’S USEFUL TO KNOW MORE ABOUT:
• Ways to remove backgrounds (Magic Wand,
Background Eraser Tool,
• Filling gaps in background (Healing Brush)
• Manipulation (Liquefy, Warp)
• Special Effects (i.e. search “Tilt-Shift Photoshop”)
library.si.edu

30. STEP BY STEP – Videos to GIF in Photoshop!
Import video
File  Import  Video
Frames into Layers
(This only works in later
versions of Photoshop.)
library.si.edu

31. STEP BY STEP – Videos to GIF in Photoshop!
Adjust time
If longer than a few seconds,
choose “Selected Range
Only” and limit to every few
frames (between 2-10).
Adjust time with black
markers under sample.
library.si.edu

32. STEP BY STEP – Videos to GIF in Photoshop!
Save as GIF
Like before, select GIF, and
adjust image size and colors
to get desired file size.
library.si.edu

33. STEP BY STEP – Videos to GIF in Photoshop!
library.si.edu
Finished

34. library.si.edu
Thanks!
Richard Naples
naplesr@si.edu
smithsonianlibraries.tumblr.com