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
930
Rails API
sayanee
5
490
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
580
Other Decks in Design
See All in Design
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
510
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
240
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
230
Personal Story Sequence - Vendetta(WIP)
elrns88
0
370
最速[要出典]アクセシビリティチェック
magi1125
2
150
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
240
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.7k
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
580
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
240
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
61k
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.3k
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
680
Featured
See All Featured
RailsConf 2023
tenderlove
29
970
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Typedesign – Prime Four
hannesfritz
40
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
5
200
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The World Runs on Bad Software
bkeepers
PRO
66
11k
The Cult of Friendly URLs
andyhume
78
6.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
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