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
180
Create a Cinemgraph
Sayanee
May 15, 2012
Tweet
Share
More Decks by Sayanee
See All by Sayanee
Podcasting with Jekyll
sayanee
1
860
Rails API
sayanee
5
470
Learning with Open Source
sayanee
3
290
ECMAScript 6 - part 1
sayanee
3
350
ECMAScript 6 - part 2
sayanee
1
250
Minimalist Designer behind the curious Developer
sayanee
8
360
Responsive Web Design for Beginners
sayanee
9
920
Travel to Balkans + Hungary
sayanee
2
210
Styling with SASS
sayanee
9
560
Other Decks in Design
See All in Design
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.8k
TrollsTopia: Funtography- Part 1
kenijam
1
210
Sociotechnical design for software and human systems
xinyao
2
490
MiKS inc. Company PR en_202404
zakkerooni
0
170
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
360
リリース1ヶ月後で機能をなくした話
hinofu
1
700
Web 組版の課題とその解法
yamatoiizuka
0
110
文化に寄りそうデザイン
recruitengineers
PRO
4
920
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
150
1人歩きする営業資料作成
yutoshukuya
0
150
「これをゲームにしたい!」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.2k
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
How GitHub (no longer) Works
holman
304
140k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Happy Clients
brianwarren
92
6.4k
Clear Off the Table
cherdarchuk
84
310k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Infographics Made Easy
chrislema
238
18k
How to name files
jennybc
65
93k
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