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

Create a Cinemgraph

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
560
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
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
470
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
140
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
120
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
7
1.8k
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
1
220
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
380
Diverse Design Team Deck
Avatar for Diverse diverse
0
550
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k
TUNAG BOOK 2024
Avatar for 株式会社スタメン stmn
PRO
0
1.4k
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
PRO
0
160
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
290
UI/UX & Web Design Portfolio 2025｜Madoka Kumagai
Avatar for Madoka madoka_portfolio
2
110

Featured

See All Featured
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
190
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.5k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
140
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
190
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
130
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
930
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350

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