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
940
Rails API
sayanee
5
500
Learning with Open Source
sayanee
3
300
ECMAScript 6 - part 1
sayanee
3
370
ECMAScript 6 - part 2
sayanee
1
260
Minimalist Designer behind the curious Developer
sayanee
8
390
Responsive Web Design for Beginners
sayanee
9
930
Travel to Balkans + Hungary
sayanee
2
220
Styling with SASS
sayanee
9
590
Other Decks in Design
See All in Design
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
270
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.5k
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
810
portfolio2025_kanakoohata
kanako106
0
660
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
510
ネットワークセキュリティ科 学科紹介
sklbj_unz
0
160
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
110
TUNAG BOOK 2024
stmn
0
470
Personal Story Sequence - Vendetta(WIP)
elrns88
0
400
LLMによるRAG評価用合成テストデータの生成
licux
6
660
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
210
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Typedesign – Prime Four
hannesfritz
40
2.5k
Adopting Sorbet at Scale
ufuk
74
9.2k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Why Our Code Smells
bkeepers
PRO
335
57k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Code Review Best Practice
trishagee
66
17k
Gamification - CAS2011
davidbonilla
80
5.1k
It's Worth the Effort
3n
184
28k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
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