Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Create a Cinemgraph
Search
Sayanee
May 15, 2012
Design
220
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Create a Cinemgraph
Sayanee
May 15, 2012
Transcript
34 slides
Cinemagraph Tuesday, May 15, 12
@sayanee_ Tuesday, May 15, 12
once upon a time... Tuesday, May 15, 12
.gif Tuesday, May 15, 12
video photo Tuesday, May 15, 12
video cinemagraph photo Tuesday, May 15, 12
Tuesday, May 15, 12
repetitive Tuesday, May 15, 12
repetitive Tuesday, May 15, 12
subtle Tuesday, May 15, 12
random Tuesday, May 15, 12
continuous Tuesday, May 15, 12
continuous Tuesday, May 15, 12
motion Tuesday, May 15, 12
motion Tuesday, May 15, 12
motion Tuesday, May 15, 12
random Tuesday, May 15, 12
random Tuesday, May 15, 12
text Tuesday, May 15, 12
all the animated pictures are copyrights from cinemagraphs.com by Jamie
Beck & Kevin Burg @_FromMeToYou @kevinburg Tuesday, May 15, 12
what is a .gif ? what is the full form
of .gif when was it invented Tuesday, May 15, 12
what is a .gif ? graphic interchange format 1987 composition
of a .gif Tuesday, May 15, 12
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
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
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
steps to creating a cinemagraph 3. Open photoshop. File >
Import > Video Frames to Layers Tuesday, May 15, 12
steps to creating a cinemagraph 4. Window > Animations >
Play Tuesday, May 15, 12
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
steps to creating a cinemagraph 7. Reduce Image width/height as
required Tuesday, May 15, 12
steps to creating a cinemagraph 8. File > Save for
Web & Devices > GIF Tuesday, May 15, 12
steps to creating a cinemagraph 9. Open the created *.gif
in a browser Tuesday, May 15, 12
resources on cinemagraph 1. official cinemagraph website 2. blog of
Jamie Beck 3. cinemagraph tutorial and another tutorial Tuesday, May 15, 12
Q&A Tuesday, May 15, 12
@sayanee_ slides Tuesday, May 15, 12
More Decks by Sayanee
See All by Sayanee
Podcasting with Jekyll
sayanee
1
1k
Rails API
sayanee
5
590
Learning with Open Source
sayanee
3
340
ECMAScript 6 - part 1
sayanee
3
440
ECMAScript 6 - part 2
sayanee
1
320
Minimalist Designer behind the curious Developer
sayanee
8
460
Responsive Web Design for Beginners
sayanee
9
1k
Travel to Balkans + Hungary
sayanee
2
250
Styling with SASS
sayanee
9
670
Other Decks in Design
See All in Design
広い関与の可能性に どう向き合うのか? 私たちは。|Timee MarketingDesign 2026-06-18
bebe
0
1.3k
もっともらしさ生成器と暮らす – AI懐疑派の試行錯誤
sekiguchiy
0
220
東京都市大学 都市生活学部×一般社団法人オープン企画イベント 「誰もがデザイナーである」とはどういうことか? 【エツィオ・マンズィーニ氏 特別来日・基調講演】
a2k
1
170
柔軟性のあるUIで、多くの環境でアプリを活躍させる/iOSDC26
noppefoxwolf
0
1.9k
飲み会を妻に伝えるベストタイミング分析
kudaranai
0
120
The ISO 25964 standard on Information and documentation — Thesauri and interoperability with other vocabularies
accessinnovations
0
490
日経電子版を支えていく Kasane Design System
taitotnk
0
600
Jun Wei | Information Design & Presentation Portfolio
wjw100788
PRO
0
240
デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み
kotasaito_cnt
0
1.4k
エンジニア経験0のデザイナーが アプリを0からリリースまで 作ってみる
abokadotyann
2
500
コールセンターのオペレーターに6時間だけなってみた
h0sa
0
470
このスロップ時代に良きデザインをつくるには? / good-design-in-the-slop-era
kgsi
1
1.3k
Featured
See All Featured
Leo the Paperboy
mayatellez
11
2.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.2k
Marketing to machines
jonoalderson
1
6k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
2
350
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Google's AI Overviews - The New Search
badams
0
1.7k
Producing Creativity
orderedlist
PRO
348
41k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
23k
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.5k
Ruling the World: When Life Gets Gamed
codingconduct
0
440
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
1
310
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.4k