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
Sayanee
May 15, 2012
Design
220
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
340
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
インターンから2年新卒フロントエンドエンジニアから見たサイボウズのアクセシビリティ
taku10101
0
190
分散するデザイン組織をつなぐ デザインミートアップの取り組み/nikkei-tech-talk49
nikkei_engineer_recruiting
1
380
広い関与の可能性に どう向き合うのか? 私たちは。|Timee MarketingDesign 2026-06-18
bebe
0
1.2k
RawrXD: The Sword
seanvraj_arts
0
220
Bet AI Day 2026丨デザインハーネス:専門職の判断基準をコードのように運用する
layerx
PRO
6
7.7k
凡庸を落とすハーネス
hiromimaeo
2
1k
BeatBoards
fizzyfiree4
0
110
【Designship2026】「社内受託中心部署」から、事業とカルチャーを動かすデザイン組織へ
sugiyama_sukedachi
0
220
Edmonton River Slidedeck
edmontonriver
0
460
UNION TEC GROUP | 2026' Project Portfolio
uniontec2000
0
110
コールセンターのオペレーターに6時間だけなってみた
h0sa
0
430
From Desktop to Spatial Interfaces UX Design Implications of Evolving Interaction Paradigms
hcrane
0
140
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
3.3k
The Pragmatic Product Professional
lauravandoore
37
7.5k
Rails Girls Zürich Keynote
gr2m
96
14k
Building Applications with DynamoDB
mza
96
7.3k
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
371
20k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
550
Measuring & Analyzing Core Web Vitals
bluesmoon
9
1k
Information Architects: The Missing Link in Design Systems
soysaucechin
1
1.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
20k
Making the Leap to Tech Lead
cromwellryan
135
10k
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