Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

15 Ways to Animate Your Content with GIFs

1,106 views

Published on

(Download file and view in Slide Show mode in PowerPoint to see animations)

Animated GIFs are helping you quickly react to your friend's social media post or making your coworker laugh. But they're not just fun and games. See real-world examples of how animated GIFs are being used in documentation, support, and beyond. Get practical tips for when, how, and why to create them.

Published in: Business
  • Be the first to comment

15 Ways to Animate Your Content with GIFs

  1. 1. #GIF4docs @fosteronomo
  2. 2. #GIF4docs @fosteronomo 15 Ways to Animate Your Content with Daniel Foster
  3. 3. #GIF4docs @fosteronomo
  4. 4. #GIF4docs @fosteronomo
  5. 5. #GIF4docs @fosteronomo
  6. 6. #GIF4docs @fosteronomo
  7. 7. #GIF4docs @fosteronomo
  8. 8. #GIF4docs @fosteronomo Why GIF? Creation • Quick to capture • No audio hassle • No aspect ratio concerns Distribution • Goes where images go • No hosting hassle • Relatively lightweight • Device agnostic Consumption • Low friction (0 clicks) • No speakers needed • Motion attracts attention
  9. 9. #GIF4docs @fosteronomo Use #1: Steps
  10. 10. #GIF4docs @fosteronomo
  11. 11. #GIF4docs @fosteronomo
  12. 12. #GIF4docs @fosteronomo
  13. 13. #GIF4docs @fosteronomo
  14. 14. #GIF4docs @fosteronomo
  15. 15. #GIF4docs @fosteronomo
  16. 16. #GIF4docs @fosteronomo Use #2: Series of Steps
  17. 17. #GIF4docs @fosteronomo
  18. 18. #GIF4docs @fosteronomo Use #3: Interactive Elements
  19. 19. #GIF4docs @fosteronomo
  20. 20. #GIF4docs @fosteronomo Use #4: Cause and Effect
  21. 21. #GIF4docs @fosteronomo
  22. 22. #GIF4docs @fosteronomo
  23. 23. #GIF4docs @fosteronomo
  24. 24. #GIF4docs @fosteronomo
  25. 25. #GIF4docs @fosteronomo Use #5: Compare Techniques
  26. 26. #GIF4docs @fosteronomo
  27. 27. #GIF4docs @fosteronomo
  28. 28. #GIF4docs @fosteronomo Use #6: Compare Similar Things
  29. 29. #GIF4docs @fosteronomo
  30. 30. #GIF4docs @fosteronomo Use #7: Before and After
  31. 31. #GIF4docs @fosteronomo
  32. 32. #GIF4docs @fosteronomo
  33. 33. #GIF4docs @fosteronomo Use #8: On-boarding / Walkthrough
  34. 34. #GIF4docs @fosteronomo
  35. 35. #GIF4docs @fosteronomo Use #9: Mini-Demos
  36. 36. #GIF4docs @fosteronomo
  37. 37. #GIF4docs @fosteronomo
  38. 38. #GIF4docs @fosteronomo
  39. 39. #GIF4docs @fosteronomo
  40. 40. #GIF4docs @fosteronomo
  41. 41. #GIF4docs @fosteronomo
  42. 42. #GIF4docs @fosteronomo Use #10: Teaser
  43. 43. #GIF4docs @fosteronomo
  44. 44. #GIF4docs @fosteronomo
  45. 45. #GIF4docs @fosteronomo Use #11: Concept Illustration
  46. 46. #GIF4docs @fosteronomo
  47. 47. #GIF4docs @fosteronomo
  48. 48. #GIF4docs @fosteronomo Use #12: Prototyping
  49. 49. #GIF4docs @fosteronomo
  50. 50. #GIF4docs @fosteronomo Use #13: Bug Report / Helpdesk Ticket
  51. 51. #GIF4docs @fosteronomo
  52. 52. #GIF4docs @fosteronomo
  53. 53. #GIF4docs @fosteronomo Use #14: Quick Tip or Answer
  54. 54. #GIF4docs @fosteronomo
  55. 55. #GIF4docs @fosteronomo Email client support for animated GIF
  56. 56. #GIF4docs @fosteronomo
  57. 57. #GIF4docs @fosteronomo
  58. 58. #GIF4docs @fosteronomo Use #15: Reaction
  59. 59. #GIF4docs @fosteronomo
  60. 60. #GIF4docs @fosteronomo
  61. 61. #GIF4docs @fosteronomo
  62. 62. #GIF4docs @fosteronomo
  63. 63. #GIF4docs @fosteronomo Creation Tools GIF-specific • Recordit (Win and OS X) • Licecap (Win and OS X) • Giphy (iOS, OS X, web) • GIF Brewery (OS X) • Cinemagraph Pro (iOS, OS X) • ImgFlip (web) • GifMaker (web) • GIF Studio (Android) Multi-purpose • Snagit 13/4 (Win and OS X) • Camtasia (Win and OS X) • Photoshop (Win and OS X)
  64. 64. #GIF4docs @fosteronomo Uses Recap 1. Steps 2. Series of Steps 3. Interactive Elements 4. Cause and Effect 5. Compare Techniques 6. Compare Similar Things 7. Before and After 8. On-Boarding/Walkthrough 9. Mini-demos 10. Teaser 11. Concept Illustration 12. Prototyping 13. Bug Report / Helpdesk Ticket 14. Quick Tip or Answer 15. Reaction
  65. 65. #GIF4docs @fosteronomo Tips Recap • Ideal for 1-4 steps (video for > 4) • Overcome friction • Dimensions: balance clarity, file size, platform constrains • Cropping > scaling • Short duration (<10 sec) • Stately pace • Pause or fade at loop • Platform gotchas: email, PPT, Keynote
  66. 66. #GIF4docs @fosteronomo Questions and Discussion • … • … • … • … • Anyone using GIF? • What did I miss? • Did you fill out the presentation feedback survey on Sched?
  67. 67. #GIF4docs @fosteronomo Get in touch! Daniel Foster @fosteronomo d.foster@techsmith.com linkedin.com/in/danielfoster

×