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
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
640

Other Decks in Design

See All in Design
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
2.1k
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
750
2026_01_07_３DプリントはじめましたLT.pdf
Avatar for HideakiTakechi hideakitakechi
0
130
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
8
9.8k
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
190
Signull 団体説明資料
Avatar for Signull signull
0
430
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
320
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
750
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.7k
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
310
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
890
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
1
270

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.3k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
160
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
48k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
700
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.1k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.2k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
150

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