Upload File

15 ways to animate your content with gifs

67
#GIF4docs @fosteronomo

Upload: daniel-foster

Post on 21-Jan-2018

915 views

Category:

Business


2 download

Report

TRANSCRIPT

Page 1: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 2: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

15 Ways to Animate Your Content with

Daniel Foster

Page 3: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 4: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 5: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://www.google.com/trends/explore#q=gif
https://www.google.com/trends/explore#q=gif
Page 6: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

http://cinemagraphs.com/travel/
http://cinemagraphs.com/travel/
Page 7: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://www.reddit.com/r/perfectloops/comments/1z0aqi/hmb_while_i_switch_my_ride/
https://www.reddit.com/r/perfectloops/comments/1z0aqi/hmb_while_i_switch_my_ride/
Page 8: 15 Ways to Animate Your Content with GIFs

#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

Page 9: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #1: Steps

Page 10: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

http://docs.helpscout.net/article/593-custom-fields
http://docs.helpscout.net/article/593-custom-fields
Page 11: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 12: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://docs.oracle.com/cloud/latest/reportingcs_use/BILUG/GUID-C20AF9E2-FAA9-416E-A00E-D52A4542B3F0.htm#BILUG465
https://docs.oracle.com/cloud/latest/reportingcs_use/BILUG/GUID-C20AF9E2-FAA9-416E-A00E-D52A4542B3F0.htm#BILUG465
Page 13: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://docs.oracle.com/cloud/latest/data-visualization-cloud/BIDVC/GUID-A498DC2D-A815-408F-839D-22F4EA1E03C3.htm#BIDVC-GUID-816A00C6-856C-4B22-BD2C-0B340F129547
https://docs.oracle.com/cloud/latest/data-visualization-cloud/BIDVC/GUID-A498DC2D-A815-408F-839D-22F4EA1E03C3.htm#BIDVC-GUID-816A00C6-856C-4B22-BD2C-0B340F129547
Page 14: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://support.google.com/helpouts/answer/6093046?hl=en
https://support.google.com/helpouts/answer/6093046?hl=en
Page 15: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://support.google.com/maps/answer/1610636?hl=sv&rd=1&co=GENIE.Platform=Android&oco=1
https://support.google.com/maps/answer/1610636?hl=sv&rd=1&co=GENIE.Platform=Android&oco=1
Page 16: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #2: Series of Steps

Page 17: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 18: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #3: Interactive Elements

Page 19: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

http://docs.helpscout.net/article/99-traffic-cop
http://docs.helpscout.net/article/99-traffic-cop
Page 20: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #4: Cause and Effect

Page 21: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://knowledge.autodesk.com/support/maya/learn-explore/caas/CloudHelp/cloudhelp/2016/ENU/Maya/files/GUID-AA669F09-9CDB-4327-BC37-3E4ECD6A0E69-htm.html
https://knowledge.autodesk.com/support/maya/learn-explore/caas/CloudHelp/cloudhelp/2016/ENU/Maya/files/GUID-AA669F09-9CDB-4327-BC37-3E4ECD6A0E69-htm.html
Page 22: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

http://www.geforce.com/whats-new/articles/crysis-2-directx-11-ultra-upgrade
http://www.geforce.com/whats-new/articles/crysis-2-directx-11-ultra-upgrade
Page 23: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 24: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 25: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #5: Compare Techniques

Page 26: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

http://www.overthemonster.com/2015/4/22/8450353/hanley-ramirez-manny-ramirez-swing-mechanics-red-sox
http://www.overthemonster.com/2015/4/22/8450353/hanley-ramirez-manny-ramirez-swing-mechanics-red-sox
Page 27: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

http://www.tastingtable.com/entry_detail/national/14983/How_to_Chop_an_Onion___Ignacio_Mattos_and_David_Tanis.htm
http://www.tastingtable.com/entry_detail/national/14983/How_to_Chop_an_Onion___Ignacio_Mattos_and_David_Tanis.htm
http://www.tastingtable.com/entry_detail/national/14983/How_to_Chop_an_Onion___Ignacio_Mattos_and_David_Tanis.htm
http://www.tastingtable.com/entry_detail/national/14983/How_to_Chop_an_Onion___Ignacio_Mattos_and_David_Tanis.htm
Page 28: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #6: Compare Similar Things

Page 29: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

http://imgur.com/vHDMwVR
http://imgur.com/vHDMwVR
Page 30: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #7: Before and After

Page 31: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

http://www.ehow.com/contributor/debbie_williams/
http://www.ehow.com/contributor/debbie_williams/
Page 32: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 33: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #8: On-boarding / Walkthrough

Page 34: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 35: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #9: Mini-Demos

Page 36: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 37: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://docs.adobe.com/docs/en/aem/6-2/release-notes.html
https://docs.adobe.com/docs/en/aem/6-2/release-notes.html
https://docs.adobe.com/docs/en/aem/6-2/release-notes.html
https://docs.adobe.com/docs/en/aem/6-2/release-notes.html
Page 38: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://docs.intercom.io/intercom-s-key-features-explained/what-s-included-with-real-time-messaging
https://docs.intercom.io/intercom-s-key-features-explained/what-s-included-with-real-time-messaging
Page 39: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 40: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://helpdesk.lastpass.com/
https://helpdesk.lastpass.com/
Page 41: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 42: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #10: Teaser

Page 43: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://twitter.com/periscopeco/status/686880399751036928
https://twitter.com/periscopeco/status/686880399751036928
Page 44: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://twitter.com/knownissues/status/732303944035106817
https://twitter.com/knownissues/status/732303944035106817
Page 45: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #11: Concept Illustration

Page 46: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://confluence.atlassian.com/display/Purchasing/Introducing+Atlassian+account
https://confluence.atlassian.com/display/Purchasing/Introducing+Atlassian+account
Page 47: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://confluence.atlassian.com/bitbucketserver/bitbucket-server-4-3-release-notes-794211212.html
https://confluence.atlassian.com/bitbucketserver/bitbucket-server-4-3-release-notes-794211212.html
Page 48: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #12: Prototyping

Page 49: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 50: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #13: Bug Report / Helpdesk Ticket

Page 51: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 52: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 53: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #14: Quick Tip or Answer

Page 54: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 55: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Email client support for animated GIF

https://litmus.com/blog/a-guide-to-animated-gifs-in-email
https://litmus.com/blog/a-guide-to-animated-gifs-in-email
Page 56: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 57: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

https://litmus.com/blog/a-guide-to-animated-gifs-in-email
https://litmus.com/blog/a-guide-to-animated-gifs-in-email
Page 58: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Use #15: Reaction

Page 59: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 60: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 61: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 62: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Page 63: 15 Ways to Animate Your Content with GIFs

#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)

Page 64: 15 Ways to Animate Your Content with GIFs

#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

Page 65: 15 Ways to Animate Your Content with GIFs

#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

Page 66: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Questions and Discussion

• …

• …

• …

• …

• Anyone using GIF?

• What did I miss?

• Did you fill out the presentation feedback survey on Sched?

Page 67: 15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo

Get in touch!

Daniel Foster@fosteronomo

[email protected]

linkedin.com/in/danielfoster

https://twitter.com/fosteronomo
mailto:[email protected]
https://www.linkedin.com/in/danielfoster

Gifs de Cinema #2!

V3.00 1 PREFACE PRESENTATION Many of the graphics in this presentation are animated GIFs or animated graphics. They will not animate unless you view in

Gifs from Government Records

3 Ways GIFs Can Boost Your Digital Marketing Campaign

Go Animate

101 Ways to Teach Children Social Skills - GIFS

Animate Beamer

Animate Form

Funny Animated Gifs

Flash Animate

gifs in pdf

Funny gifs

PHYSICAL SCIENCES - GIFS

Popping Up: New Ways to Animate Old Spaces

425 -Cats and gifs

CREE VERB PARADIGMS · 2018-06-05 · 3 animate singular proximate, 3' animate nearer obviative, number indifferent . 3p animate plural proximate . indf animate indefinite . General

Natural Sciences - GIFS

Slide gifs

Más gifs chuscos

2017 · Cosplay animate cosplay 200 2 500 10:00-24:00 1-21-1 TECH35 B1F-7F animate SEGA 60 UNIQLO UNIQLO animate 5. animate animate animate animate 13 / 16

PROGRAM OVERVIEW th International Conference on …...15 Ways to Animate Your Content With GIFs Things You Shouldn’t Write Ms. Paula R. Stern (WritePoint Ltd., Israel) Dakota Session:

Gifs de lujo

Supplemental Material: Animated GIFs

16 Shots of an Animate/In-animate Object

Historias con gifs

Lwd2 Animated Gifs

FINANCIAL MATHEMATICS - GIFS

Scariest GIFs

Naruto Slide Gifs

Animate Text

Independent Study Packet - GIFS

BUSINESS STUDIES NOTES - GIFS

Communicating with GIFs

Fifi Finegold - Illustrator & GIFs · Fifi Finegold - Illustrator & GIFs. Fifi Finegold - Illustrator & GIFs. Fifi Finegold - Illustrator & GIFs. i ptyque EAU . PaJumt . BOA AAA AAA

Animate pp1