Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
26th December 2011

Create Cinemagraph animated gifs from video

Old-school animation goes next-gen with dynamic web images you can build in Photoshop CS5 Extended

Create Cinemagraph animated gifs from video

The internet is filled with strikingly beautiful photos, along with clever and entertaining animation. When these two elements are mixed together, the result is something that captivates by denying expectations. Enter the cinemagraph, an art form made popular by artists such as Jamie Beck and Kevin Burg. At first glance, these pieces appear to be merely another entry in an accomplished photographer’s gallery. But then a suggestion of movement catches the eye and the image suddenly comes alive with magic and mystery. This form of art makes the tired technology of the animated GIF relevant again. What once was used only for cheesy signature lines has now become something exceptionally artful.
This tutorial demonstrates how to create a cinemagraph from either a video clip or a sequence of photos. Note that the Extended version of Photoshop is required for its animation features.

tools | tech | trends:Photoshop CS5 Extended
expert: Kirk Nelson
tutorial files: download

01. Video layer
Create Cinemagraph animated gifs from video
Open Photoshop CS5 Extended and make sure the animation panel is visible by going to Window>Animation. If working with a video file, go ahead and open it here by dragging the file onto the empty Photoshop workspace. If working with the sequential images provided on the CD, you can feel free to skip forward to step 5.

02. The sweet spot
Create Cinemagraph animated gifs from video
In the Animation panel either press the Play button to preview, or drag the playhead handle to scrub through the video. Look for the best portion to keep as the animated part of the cinemagraph. Then drag the beginning and ending timeline markers to define the work area as just that portion.

03. Trim work area
Create Cinemagraph animated gifs from video
In the top-right corner of the Animation panel is an icon of a small triangle next to horizontal lines. Click it to trigger the flyout menu and choose Trim Document Duration to Work Area. This will cut off the ends of the video that lie outside the area specified in the last step.

04. Frames to layers
Create Cinemagraph animated gifs from video
From the same flyout menu, choose Flatten Frames into Layers. Photoshop parses the video and creates a new layer for each individual frame. The number of generated layers/frames is determined by the length of the video segment. If working with a video file, please now skip to step 6.

05. Photo sequence
Create Cinemagraph animated gifs from video
Note: This step is NOT for the video file! If using the photo sequence from the cover disc, please start here. Copy the photos of the swinging tyre to your hard drive. Then go to File>Scripts>Load Files into Stack. Use the dialog box to browse to and add the photo sequence.

06. Frame animation
Create Cinemagraph animated gifs from video
Photoshop views animation in two different ways. The first is a timeline, tweening approach that is very similar to the way Flash operates. The second is a frame-by-frame approach which is what is required for this project. If the file is in Timeline mode, open the flyout menu and click on Convert to Frame Animation.

07. Frames from layers
Create Cinemagraph animated gifs from video
Open the flyout menu again and choose the Make Frames from Layers option. Photoshop creates a new frame from each layer sequentially. All the layers are still present, but Photoshop hides all but a single layer for each frame. Click through each frame and see how the layers are revealed in sequence, creating the animation.

08. Timing adjustment
Create Cinemagraph animated gifs from video
In the bottom-left of the Animation panel, look for a small drop-down menu that controls the repeat of the animation. Set this to Forever. Then Shift-select all the frames in the animation and click the timing setting beneath one of them. From the pop-up menu select Other, and set the timing to 0.06 seconds.

09. Helpful setting
Create Cinemagraph animated gifs from video
Open the flyout menu once again and make sure the New Layers Visible in All Frames option is checked. This will ensure that the next few steps appear throughout the entire animation. Without this, one would have to reveal the new layers for each and every frame of the animation.

10. Freeze frame
Create Cinemagraph animated gifs from video
Go to the top layer and press Ctrl/Cmd+J to duplicate it. Be sure the layer is visible and rename it ‘Frozen’. The point of this layer is to cover up any extra movement taking place in the frame, so the movement of the swing will be what draws the viewer’s interest.

11. I see you!
Create Cinemagraph animated gifs from video
Use the small button at the foot of the Layers panel to add a mask to the Frozen layer. Make certain the layer mask is targeted (click on the thumbnail just to be sure) and then use a large, soft brush with black paint to reveal the animation layers beneath.

12. Troubleshooting and touch up
Create Cinemagraph animated gifs from video
Play back the animation and watch closely to make sure the Frozen layer is not concealing any of the swing’s movement. If it is, touch up the mask with the brush again. If the paint strays too far, use white paint to reverse the effect. That’s the beauty of using a mask in Photoshop!

13. Added effects
Create Cinemagraph animated gifs from video
Add in any additional effects like adjustment layers, vignettes, text, etc. Just be sure the items you add are layer-based. If on playback you find that things are shifting around between layers, try Shift-selecting all the frames and then adjusting the position of the elements so the change is applied to all the frames.

14. Save for web
Create Cinemagraph animated gifs from video
Go to File>Save for Web and Mobile Devices to get this dialog box. Set the file format to GIF – Photoshop detects the animation automatically. Even though JPEGs give better image quality, they do not support animation. Set the colours to 256, the maximum allowed by the GIF format. Then remove the Transparency checkmark. Don’t hit Save just yet!

15. Finish up
The method of dithering is going to be different for each image, but for this particular image, choose Adaptive and Diffusion. Notice that at the bottom-left is a Preview button, which allows a preview of the animation in a browser. Once the settings produce a satisfactory result, hit Save to finalise the project.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.