Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Create a Cinemgraph
Search
Sayanee
May 15, 2012
Design
2
190
Create a Cinemgraph
Sayanee
May 15, 2012
Tweet
Share
More Decks by Sayanee
See All by Sayanee
Podcasting with Jekyll
sayanee
1
960
Rails API
sayanee
5
520
Learning with Open Source
sayanee
3
300
ECMAScript 6 - part 1
sayanee
3
390
ECMAScript 6 - part 2
sayanee
1
270
Minimalist Designer behind the curious Developer
sayanee
8
420
Responsive Web Design for Beginners
sayanee
9
960
Travel to Balkans + Hungary
sayanee
2
220
Styling with SASS
sayanee
9
610
Other Decks in Design
See All in Design
Kid Cowboy 103
marilutwin
0
270
クライアントワークにおける UXリサーチの実践
kozotaira
0
700
AI時代に淘汰されないデザインのしごと
akinen
1
140
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
portfolio_YumiYasuda
yum0418
0
290
7 Core Values of Round-L
wired888
0
150
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
100
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
450
250131_product meetup
motokoishida
0
210
NAHO SHIMONO_Portfolio2025
nahohphp
0
870
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
980
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
BBQ
matthewcrist
89
9.7k
Into the Great Unknown - MozCon
thekraken
39
1.9k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Fireside Chat
paigeccino
37
3.5k
A Tale of Four Properties
chriscoyier
160
23k
A designer walks into a library…
pauljervisheath
207
24k
Raft: Consensus for Rubyists
vanstee
140
7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Designing for Performance
lara
610
69k
Transcript
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