Cinemagraph with Photoshop

posted in: Uncategorized | 0

*Featured Image from https://kitchenghosts.carbonmade.com/

More examples: http://www.superwhite.cc/demon/cinemagraph      *www.superwhite.cc/demon/cinemagraph

 

Cinemagraph is a Gif that has infinite movement in part of the footage. In this tutorial I will go over the steps of how to create a cinemagraph in Photoshop.

 

If you want to make a Gif with the easy way, you can select a YouTube video and use http://freegifmaker.me/. If you want to challenge yourself, you can check out Jen’s tutorial on how to make Gif by yourself in Photoshop here.

 

In this tutorial, I’m using this Gif:

freegifmaker-me_29tox

 

  1. Window-Timeline
  2. Select all layers on the right-Crop the picture if you don’t like the watermark on the bottom.
  3. Use space key to play the Gif over and over again to see how the footage could be a loop in motion, instead of letting viewers notice an obvious gap between the end and the beginning of the Gif. Delete unnecessary frames.
  4. Paint over the section where you want the movement to be. This layer can be seen as a layer mask. You don’t have to be extremely precise when painting.
  5. Click on covert to video timeline.
  6. Go to the very end of your Gif, make a new layer – shift+ctrl+alt+e (Mac: shift+option+command+e) to make a stamp visible layer (when doing this, make the paint layer invisible, you can make it visible again after this step).
  7. Move the stamp visible layer all the way to the left.
  8. Move the paint layer up, and ctrl+click on the part that I highlighted (Mac: command+click).
  9. Select stamp visible layer and click on layer mask.
  10. Click on the mask, ctrl+I (Mac: command+i) to inverse the mask.
  11. Preview everything to see the result.
  12. File-export-save for web

Here is the final product:

freegifmaker-me_29tox

Leave a Reply

Your email address will not be published. Required fields are marked *