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
980
Rails API
sayanee
5
530
Learning with Open Source
sayanee
3
310
ECMAScript 6 - part 1
sayanee
3
400
ECMAScript 6 - part 2
sayanee
1
280
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
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
210
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.8k
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
830
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
ドルちゃん
design_dolphins
0
410
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
150
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
210
佐藤千晶|ポートフォリオ
chimi_chia
0
220
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
700
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Statistics for Hackers
jakevdp
799
220k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
How GitHub (no longer) Works
holman
315
140k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
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