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
950
Rails API
sayanee
5
510
Learning with Open Source
sayanee
3
300
ECMAScript 6 - part 1
sayanee
3
380
ECMAScript 6 - part 2
sayanee
1
270
Minimalist Designer behind the curious Developer
sayanee
8
410
Responsive Web Design for Beginners
sayanee
9
940
Travel to Balkans + Hungary
sayanee
2
220
Styling with SASS
sayanee
9
600
Other Decks in Design
See All in Design
セブンデックス カルチャーブック
sevendex
1
8.3k
Dive Deep into Communication
yomtsu
0
240
The Golden Whitney
ohtristanart
PRO
0
140
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
770
今日から意識できるアクセシビリティ
fumiko
0
180
横断組織デザイナーの働き方
mixi_design
PRO
0
430
Personal Story Sequence - Vendetta(WIP)
elrns88
0
460
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.3k
Tableau曲線表現講座(2024.11.21)
cielo1985
0
340
苦労が多かった多言語対応をFigmaで楽にした話
pioneer_devrel
PRO
0
130
NAHO SHIMONO_Portfolio2025
nahohphp
0
360
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
130
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A Tale of Four Properties
chriscoyier
158
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Building an army of robots
kneath
304
45k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Designing Experiences People Love
moore
141
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
What's in a price? How to price your products and services
michaelherold
245
12k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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