Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Create a Cinemgraph
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Sayanee
May 15, 2012
Design
210
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Create a Cinemgraph
Sayanee
May 15, 2012
More Decks by Sayanee
See All by Sayanee
Podcasting with Jekyll
sayanee
1
1k
Rails API
sayanee
5
580
Learning with Open Source
sayanee
3
330
ECMAScript 6 - part 1
sayanee
3
440
ECMAScript 6 - part 2
sayanee
1
310
Minimalist Designer behind the curious Developer
sayanee
8
460
Responsive Web Design for Beginners
sayanee
9
1k
Travel to Balkans + Hungary
sayanee
2
240
Styling with SASS
sayanee
9
670
Other Decks in Design
See All in Design
Frontier
rwang05
0
230
インターンから2年新卒フロントエンドエンジニアから見たサイボウズのアクセシビリティ
taku10101
0
170
「惜しいデザイン」 を生み出さないための AIレビューループ
0b1tk
3
4.5k
The Art of Caring
klemens
0
470
Decksh keywords
ajstarks
0
140
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
karad
0
210
noteらしさを織り込むハーネスエンジニアリング
uto
0
1.8k
全員がアウトプットを出せる時代、 誰を採用する?
nishame
0
680
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
nishame
1
1.5k
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
abokadotyann
4
1.1k
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ~継承と挑戦を両立するデザイン手法~
cygames
PRO
4
5.3k
TOPOSTOPOS
shoheyey
0
220
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
Darren the Foodie - Storyboard
khoart
PRO
4
4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
1k
Navigating Team Friction
lara
192
16k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
250
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
1k
Leo the Paperboy
mayatellez
10
2.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
3k
GitHub's CSS Performance
jonrohan
1033
470k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
380
Paper Plane (Part 1)
katiecoart
PRO
2
11k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
520
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