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

Create a Cinemgraph

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Sayanee Sayanee
May 15, 2012
Design
2
200

Create a Cinemgraph

Avatar for Sayanee

Sayanee

May 15, 2012
Tweet

More Decks by Sayanee

See All by Sayanee
Podcasting with Jekyll
Avatar for Sayanee sayanee
1
990
Rails API
Avatar for Sayanee sayanee
5
550
Learning with Open Source
Avatar for Sayanee sayanee
3
310
ECMAScript 6 - part 1
Avatar for Sayanee sayanee
3
410
ECMAScript 6 - part 2
Avatar for Sayanee sayanee
1
290
Minimalist Designer behind the curious Developer
Avatar for Sayanee sayanee
8
430
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
640

Other Decks in Design

See All in Design
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
140
From the Visible Crossroads: Turning Outputs into Outcomes
Avatar for takai_kanako takaikanako
2
860
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
1
490
プロダクトリニューアルと同時に進める初めてのデザインシステム
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
420
第18回サイゼミ
Avatar for LW lw
1
2.7k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
880
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
280
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
540
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
110
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
3k
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
180
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.6k

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
240
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
430
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
300
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
210
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.3k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
55
49k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
181
10k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
110
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k

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