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
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
1
490
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
410
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
260
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
590
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k
プロダクトリニューアルと同時に進める初めてのデザインシステム
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
420
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
290
AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験
Avatar for daitasu daitasu
1
130
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
130
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか？
Avatar for ふわり fuwarisprit
3
2.1k
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
1.4k
Treasure_Hunting
Avatar for Sol Metts solmetts
0
210

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
170
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
82
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
280
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
100
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Designing for Performance
Avatar for Lara Hogan lara
610
70k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
87

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