Create a Cinemgraph - Speaker Deck

Slide 1

Slide 1 text

Cinemagraph Tuesday, May 15, 12

Slide 2

Slide 2 text

@sayanee_ Tuesday, May 15, 12

Slide 3

Slide 3 text

once upon a time... Tuesday, May 15, 12

Slide 4

Slide 4 text

.gif Tuesday, May 15, 12

Slide 5

Slide 5 text

video photo Tuesday, May 15, 12

Slide 6

Slide 6 text

video cinemagraph photo Tuesday, May 15, 12

Slide 7

Slide 7 text

Tuesday, May 15, 12

Slide 8

Slide 8 text

repetitive Tuesday, May 15, 12

Slide 9

Slide 9 text

repetitive Tuesday, May 15, 12

Slide 10

Slide 10 text

subtle Tuesday, May 15, 12

Slide 11

Slide 11 text

random Tuesday, May 15, 12

Slide 12

Slide 12 text

continuous Tuesday, May 15, 12

Slide 13

Slide 13 text

continuous Tuesday, May 15, 12

Slide 14

Slide 14 text

motion Tuesday, May 15, 12

Slide 15

Slide 15 text

motion Tuesday, May 15, 12

Slide 16

Slide 16 text

motion Tuesday, May 15, 12

Slide 17

Slide 17 text

random Tuesday, May 15, 12

Slide 18

Slide 18 text

random Tuesday, May 15, 12

Slide 19

Slide 19 text

text Tuesday, May 15, 12

Slide 20

Slide 20 text

all the animated pictures are copyrights from cinemagraphs.com by Jamie Beck & Kevin Burg @_FromMeToYou @kevinburg Tuesday, May 15, 12

Slide 21

Slide 21 text

what is a .gif ? what is the full form of .gif when was it invented Tuesday, May 15, 12

Slide 22

Slide 22 text

what is a .gif ? graphic interchange format 1987 composition of a .gif Tuesday, May 15, 12

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

steps to creating a cinemagraph 3. Open photoshop. File > Import > Video Frames to Layers Tuesday, May 15, 12

Slide 27

Slide 27 text

steps to creating a cinemagraph 4. Window > Animations > Play Tuesday, May 15, 12

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

steps to creating a cinemagraph 7. Reduce Image width/height as required Tuesday, May 15, 12

Slide 30

Slide 30 text

steps to creating a cinemagraph 8. File > Save for Web & Devices > GIF Tuesday, May 15, 12

Slide 31

Slide 31 text

steps to creating a cinemagraph 9. Open the created *.gif in a browser Tuesday, May 15, 12

Slide 32

Slide 32 text

resources on cinemagraph 1. ofﬁcial cinemagraph website 2. blog of Jamie Beck 3. cinemagraph tutorial and another tutorial Tuesday, May 15, 12

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text