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
180
Create a Cinemgraph
Sayanee
May 15, 2012
Tweet
Share
More Decks by Sayanee
See All by Sayanee
Podcasting with Jekyll
sayanee
1
880
Rails API
sayanee
5
480
Learning with Open Source
sayanee
3
290
ECMAScript 6 - part 1
sayanee
3
350
ECMAScript 6 - part 2
sayanee
1
250
Minimalist Designer behind the curious Developer
sayanee
8
370
Responsive Web Design for Beginners
sayanee
9
920
Travel to Balkans + Hungary
sayanee
2
220
Styling with SASS
sayanee
9
570
Other Decks in Design
See All in Design
UXデザイナーが肩書きの私がいまUXデザインにそんなに興味がない理由 #uxd2024(字幕入り配布版)
versionfive
7
2k
Breaking News on the Web
souvikdg
0
380
プロダクトデザインは子育て/Product design is parenting
medley
0
510
WHAT ARE ME?
takuro_nakajima
PRO
0
1.8k
Mitra Manual
nnidhz
0
140
Installing and Running decksh/pdfdeck
ajstarks
1
570
スマートバンクのプロダクトデザイン
putchomsmartbank
6
2k
Building a mindful relationship with digital media for zillennials prone to anxiety
mastervicedesign
0
160
プロダクトを成長させる生成 AI のユースケース発見ワークショップ vol.3
icoxfog417
1
260
生成AIを活用したサービス設計のススメ〜仮説構築編〜
tomo1215
2
1.1k
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
800
TrollsTopia: Funtography- Part 1
kenijam
1
260
Featured
See All Featured
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Speed Design
sergeychernyshev
9
270
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
The Invisible Customer
myddelton
117
13k
Leading Effective Engineering Teams 2024
addyosmani
3
300
A Philosophy of Restraint
colly
200
16k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
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