$30 off During Our Annual Pro Sale. View Details »

Create a Cinemgraph

Sayanee
May 15, 2012

Create a Cinemgraph

Sayanee

May 15, 2012
Tweet

More Decks by Sayanee

Other Decks in Design

Transcript

  1. Cinemagraph
    Tuesday, May 15, 12

    View Slide

  2. @sayanee_
    Tuesday, May 15, 12

    View Slide

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

    View Slide

  4. .gif
    Tuesday, May 15, 12

    View Slide

  5. video photo
    Tuesday, May 15, 12

    View Slide

  6. video cinemagraph photo
    Tuesday, May 15, 12

    View Slide

  7. Tuesday, May 15, 12

    View Slide

  8. repetitive
    Tuesday, May 15, 12

    View Slide

  9. repetitive
    Tuesday, May 15, 12

    View Slide

  10. subtle
    Tuesday, May 15, 12

    View Slide

  11. random
    Tuesday, May 15, 12

    View Slide

  12. continuous
    Tuesday, May 15, 12

    View Slide

  13. continuous
    Tuesday, May 15, 12

    View Slide

  14. motion
    Tuesday, May 15, 12

    View Slide

  15. motion
    Tuesday, May 15, 12

    View Slide

  16. motion
    Tuesday, May 15, 12

    View Slide

  17. random
    Tuesday, May 15, 12

    View Slide

  18. random
    Tuesday, May 15, 12

    View Slide

  19. text
    Tuesday, May 15, 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. 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

    View Slide

  24. 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

    View Slide

  25. 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

    View Slide

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

    View Slide

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

    View Slide

  28. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. Q&A
    Tuesday, May 15, 12

    View Slide

  34. @sayanee_
    slides
    Tuesday, May 15, 12

    View Slide