A few weeks ago I got turned on to an artform called cinemagraphs and perfected by photographer and graphic designer Jamie Beck & Kevin Burg. What is a cinemagraph? I think supermodel Coco Rocha said it best “it’s more than a photo, but not quite a video”. To see what this artform looks like taken to its highest level see below and then make sure to visit their webiste cinemagraphs.com.
I enlisted the help of a friend to begin experimenting in trying to recreate this form factor. We knew it was a gif but the output didn’t look very gif like in the work they were doing. I also really wasn’t inclined to buy Adobe AfterEfx or other expensive software packages. We centered our efforts on using the animation capabilities in Cs5. You will need extended version of CS5 for this. My first attempt is below. I got carried away and started some photo adjustments before knowing what I was fully doing and you will see a unprocessed area under the flag. Of course my masking of the photo and the video is a little jerky and closer to a gif than a real cinemagraph.
My First Attempt
(give me a break its numero uno)
There are some tutorials starting top emerge and I found these two good posts by photographer Fernando Jbaez and Christopher Matthews blog, also Amit Agarwal features a video tutorial by Russell Brown which is excellent and I urge all to watch this video. To aid you with this I took notes from the video which you can cut and paste and use to remind you of some steps. My inital learnings:
- Less is more. I think really subtle movments are best and find those will be key
- Masking the video into the still will also be important
- I think you can add some dimension by adjusting the timing of the individual animiation frames themselves.
- I’m looking to to do more and try to improve.
Creating a Cinemagraph Tutorial Notes on Russell Brown Video.
Open video file from Cs5 and assign your calibrated monitor as the working space
Then open the animation window by going to menu-window-animation. You must have CS5 extended for this to work.
Pull the time line scrubber across top of time line. Goal is to isolate particular region and play in a loop. Keep file size small as possible.
- Go to fly out menu and click on document settings and change FPS to 15.
- Isolate in on area you want to work with and find a starting point. You can view the video by moving your time line scrubber line and see the frames pass you by. Once you have found a good start point (this will be your stationary frame) leave your time line scrubber there.
- Then go back to the left and click and hold the work area start point tab and pull it to where you left your scrubber. Hold down you shift key and snap it into place.
- 4. Capture 12 frames of video. Want to use as few as possible. Go to base of panel and click the next frame play button 12 times.
- Grab work area end point and click and hold and drag to left and snap it to scrubber line. Play button will only that section.
- Select fly out menu again and then select “Trim document duration to work area” This cuts the rest of the video out.
- Now you need to freeze the frame you like to be stationary-find frame you like. The menu-select-all. Then menu-edit-copy merged, then menu-edit-paste.goto edit and copy merged, from edit goto paste and paste new frame onto layer.
- Now to quick mask mode and paint in the areas you do not want to move. The areas painted in red will not moved
- Now press q key for selection
10. Goto layer panel and deselect the video layer
11. Press option/alt key and press mask button to create a mask. You may need to play around with inverting the mask to get it the way you like. I then played with the mask to get a better effect.
12. Add some layers now but in my first one I had to much movement and my adjustment didn’t take hold underneath some areas of movement due to my masking.
13. Now turn into animation
14. Now goto fly out menu and choose flatten frames into layers.
15. You see that all the frames have come into there own layers and that your original working docs have been turned off. Go ahead and toss your original docs.
16. Now at the base of the animation panel find the “convert to frame animation icon” looks like three windows.
17. You will see only one frame appear yet you will have one less layer now. So go to fly out menu again and select “make frame from layers”
18. This will now animate all your layers into frames. Click play button. But the frames don’t loop yet.
19. You will see that there is a time associated with each frame. Click on the pointed arrow icon and select “no delay”. This should make all time tags zero seconds now.
20. Now look in the lower left hand corner and you will see the word “once”. Click on that and then select forever, this is how you will get a loop.
21. What’s powerful is each frame of animation is now linked to a layer so the world is your oyster. if you know how to open it.
22. Goto menu-file-save for web and devices.
23. First thing you want to do in this menu is adjust the size of the image. If your not sure. set width to 500-600px
24. Then at the top make sure gif is selected and for color selection make sure “selective” is selected.
25. You will need a dither choose selected and pattern is good. I have also found noise to work in some cases as well. Make sure your gif doesn’t have weird banding if it does go back and play with the dither.
26. Make sure that 256 colors are selected.
27. Make sure convert toSRGB is selected.
28. Press the preview button to view in browser.
29. Then select save and you’re done.