Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Create a Cinemgraph

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Sayanee Sayanee
May 15, 2012
Design
200
2

Create a Cinemgraph

Avatar for Sayanee

Sayanee

May 15, 2012

More Decks by Sayanee

See All by Sayanee
Podcasting with Jekyll
Avatar for Sayanee sayanee
1
1k
Rails API
Avatar for Sayanee sayanee
5
560
Learning with Open Source
Avatar for Sayanee sayanee
3
310
ECMAScript 6 - part 1
Avatar for Sayanee sayanee
3
420
ECMAScript 6 - part 2
Avatar for Sayanee sayanee
1
300
Minimalist Designer behind the curious Developer
Avatar for Sayanee sayanee
8
440
Responsive Web Design for Beginners
Avatar for Sayanee sayanee
9
980
Travel to Balkans + Hungary
Avatar for Sayanee sayanee
2
230
Styling with SASS
Avatar for Sayanee sayanee
9
650

Other Decks in Design

See All in Design
【優秀賞＋特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
Avatar for Shoko shoko_seven11
0
120
コンテンツ作成者の体験を設計する
Avatar for Chiaki Okamoto chiilog
0
130
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
200
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
400
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
1.7k
つくり方を変えていく | change-how-we-build
Avatar for mottox2 mottox2
2
890
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
320
Diverse Design Team Deck
Avatar for Diverse diverse
0
1.2k
研修担当者が一番伸びた　熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
Avatar for @Garyuten garyuten
2
340
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
Avatar for Kimura Atsunobu a2k
0
140
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
6
980
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
280

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
170
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.9k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
780
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
6.2k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
170
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
340
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
64
54k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
880
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
870
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k

Transcript

  1. Cinemagraph Tuesday, May 15, 12

  2. @sayanee_ Tuesday, May 15, 12

  3. once upon a time... Tuesday, May 15, 12

  4. .gif Tuesday, May 15, 12

  5. video photo Tuesday, May 15, 12

  6. video cinemagraph photo Tuesday, May 15, 12

  7. Tuesday, May 15, 12

  8. repetitive Tuesday, May 15, 12

  9. repetitive Tuesday, May 15, 12

  10. subtle Tuesday, May 15, 12

  11. random Tuesday, May 15, 12

  12. continuous Tuesday, May 15, 12

  13. continuous Tuesday, May 15, 12

  14. motion Tuesday, May 15, 12

  15. motion Tuesday, May 15, 12

  16. motion Tuesday, May 15, 12

  17. random Tuesday, May 15, 12

  18. random Tuesday, May 15, 12

  19. text Tuesday, May 15, 12

  20. all the animated pictures are copyrights from cinemagraphs.com by Jamie

    Beck & Kevin Burg @_FromMeToYou @kevinburg Tuesday, May 15, 12

  21. what is a .gif ? what is the full form

    of .gif when was it invented Tuesday, May 15, 12

  22. what is a .gif ? graphic interchange format 1987 composition

    of a .gif Tuesday, May 15, 12

  23. tips on creating cinemagraph  shoot a video, not series

    of photos  use a tripod for steadiness  crop around 2-4 seconds of video  convert to 20-40 frames of static pictures  choose a few areas in the picture frame to animate  take extra note of shadows & mirrors Tuesday, May 15, 12

  24. tools to create a cinemagraph OS X 10.6.8 quicktime player

    photoshop CS4 any browser DSLR with video shoot crop process view Tuesday, May 15, 12

  25. steps to creating a cinemagraph 1. open the video in

    quicktime player 2. Edit > Trim > crop a portion of the video as *.mov Tuesday, May 15, 12

  26. steps to creating a cinemagraph 3. Open photoshop. File >

    Import > Video Frames to Layers Tuesday, May 15, 12

  27. steps to creating a cinemagraph 4. Window > Animations >

    Play Tuesday, May 15, 12

  28. steps to creating a cinemagraph 5. Window > Layers >

    Add black layer mask > paint with white 6. Option + Drag to copy Layer Mask to other layers Tuesday, May 15, 12

  29. steps to creating a cinemagraph 7. Reduce Image width/height as

    required Tuesday, May 15, 12

  30. steps to creating a cinemagraph 8. File > Save for

    Web & Devices > GIF Tuesday, May 15, 12

  31. steps to creating a cinemagraph 9. Open the created *.gif

    in a browser Tuesday, May 15, 12

  32. resources on cinemagraph 1. official cinemagraph website 2. blog of

    Jamie Beck 3. cinemagraph tutorial and another tutorial Tuesday, May 15, 12

  33. Q&A Tuesday, May 15, 12

  34. @sayanee_ slides Tuesday, May 15, 12