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
210
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
580
Learning with Open Source
Avatar for Sayanee sayanee
3
330
ECMAScript 6 - part 1
Avatar for Sayanee sayanee
3
430
ECMAScript 6 - part 2
Avatar for Sayanee sayanee
1
300
Minimalist Designer behind the curious Developer
Avatar for Sayanee sayanee
8
450
Responsive Web Design for Beginners
Avatar for Sayanee sayanee
9
1k
Travel to Balkans + Hungary
Avatar for Sayanee sayanee
2
240
Styling with SASS
Avatar for Sayanee sayanee
9
660

Other Decks in Design

See All in Design
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.8k
Frontier
Avatar for Renny Wang rwang05
0
200
いいUIとは？初心者向けに事例をもとにUIデザインを分解
Avatar for 原 佑一｜クリエイティブディレクター yuichi_hara7
4
1.8k
染み出し好きの、 染み出しコントロール論
Avatar for Takeru Mukai mukai_takeru
0
420
(2026 FlowCon Keynote) Sociotechnical Architecture Finding Flow
Avatar for xinyao xinyao
0
110
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
Avatar for NishaMe nishame
1
1.4k
Jun Wei Portfolio 2026
Avatar for Wong Jun Wei wjw100788
PRO
1
230
ボタンUIの冪等性の話をしたらVimmerに刺さっちゃった
Avatar for たと ottatto
3
1.8k
kintone開発における​ライターの役割の変化​〜AI活用を添えて〜 / Changes in the Role of Writers in Kintone Development
Avatar for keroyama keroyama
0
180
CULTURE DECK／Creative Director
Avatar for M-HAND,Inc. mhand01
1
1.6k
設計の進め方と 品質特性品質特性
Avatar for harachan harakeishi
0
1.2k
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
4
30k

Featured

See All Featured
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
220
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
450
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
560
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.1k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.8k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
580
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.8k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
310
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
340

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