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
200
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
310
ECMAScript 6 - part 1
sayanee
3
400
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
230
Styling with SASS
sayanee
9
620
Other Decks in Design
See All in Design
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
100
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
190
今日から意識できるアクセシビリティ
fumiko
0
280
#Dubois Challenge 2025: Economics
ajstarks
0
140
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
680
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
580
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
760
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
390
AI時代に淘汰されないデザインのしごと
akinen
1
160
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
450
Goodpatch Tour💙 / We are hiring!
goodpatch
31
870k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
We Have a Design System, Now What?
morganepeng
53
7.7k
Faster Mobile Websites
deanohume
308
31k
For a Future-Friendly Web
brad_frost
179
9.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Six Lessons from altMBA
skipperchong
28
3.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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