Inspirational Cinegraphs

I was blown away by the possibilities of cinegraphs when I discovered them taking a online Animation education course from the Adobe Education Exchange a great resource for learning how to use many of the Adobe products as well as applying them across the curriculum.

If you enjoy the media be sure to check out photographer Romain Laurent's Tumblr blog. This wonderful artist does a loop portrait every week.

Some of his more fun images can be found on Laughing Squid.

History of the Animated .gif

This is a short but great documentary explains where animated .gifs came from and showcase some great uses of the images.  Gifs are experiencing a renaissance now that everyone is blogging and digital slrs include video capabilities.

First Attempt at Cinegraph

My first attempt at a Cinegraph was a portrait of my husband.  Not really fond of posing for the camera I thought a cinegraph would be perfect to capture the repeative nature of building.

Learn from my mistakes

Asking a bunch of neighbors who had been drinking on a Sunday afternoon to help you recreate the head spinning scene from the exorcist may not have been the most brilliant idea.  But I did learn that there are some challenges in shooting cinegraphs and building your masks.  We tried spinning my neighbor on a stool but could not quite get the head to stay on a single axis.  I used the align function in Photoshop but it didn't quite work to keep the head on a single axis.

How to create Cinegraphs

Cinegraphs are pretty easy to create if you have good understanding of how to shoot video on your digital slr. The preferred output for cinegraphs is an animated .gif but unfortunately if you want to show them off to your friends, posting on Facebook is a challenge (I've yet to see it done).  They are great for blogs like blogger.com. You have a choice of creating a frame animation or video animation.  I find timeline a little easier to use.

STEP BY STEP-quick start guide

1. Use a tripod when you shoot. The background must remain perfectly still. Consider how your action will loop.  Subtle effects work best but don’t be afraid to experiment.  Shoot horizontal for video  or TV display.

2. Go through the video and use Quicktime to trim your video to a 2-4 seconds to loop.

3. Export as .mov file  Rotate and correct canvas before export.

4. Go to Photoshop>File>Import Video Frames to Layers from beginning to end make frame animation.

5. Group all the layers into a folder, except the first layer.

6. Create a layer mask on the folder revealing the portion you want animated.

7. Choose the first frame of the animation in the timeline and select “Match Layers across Frames” in the side menu of the timeline panel.

8. Save for web as a .gif (Watch your image size if you intend to post). You can also export to video for an movie file but looping is not an automatic output and only works if the viewer selects it in the Quicktime movie player.

For more detailed instructions please check out these tutorials. 

http://tinyurl.com/cinegraphhowto

http://tinyurl.com/cinegraphhowto2

Simple Cinegraph Spin

The hardest thing about creating this cinegraph was creating the pin wheel. A scene like this is very simple to create because all the movement is on one side of the screen so creating a layer mask is very easy.  If you look closely you'll see the stick move slightly between my fingers.

Stop Motion Animated GIF

Beside using video to create cinegraphs you can also easily create stop motion animated .gifs in photoshop. These looping stop motion old lady walk and shoelace tying were created by setting a camera on a tripod and shooting a frame of the shoes moving a little at a time, shooting another frame and repeating this action for as long as it took to move the shoes across the frame of vision. It's a good idea to shoot in .jpg to keep your file sizes down. Working in Photoshop you can add an adjustment layer to easily change the look of the all the images, as in this sepia old shoe .gifs.
Check out this tutorial to create stop motion in Adobe Photoshop.

Very similar to creating a cinegraph from video you create stop motion by loading images into stack under File>Scripts>Load to Stack in Photoshop.

Camera Capture of Hand Drawn Animations

Drawing exercises in my animation class are done with a copy stand and animation registration, it's a great way to preview movement before recreating in flash.