Menu

The other thing we do

newsletter signup
Search
Store

Blog
DIY
Inspiration
Gear
Photo Technique
Weird
Photojojo Newsletter

Email Address
submit
The other thing we do

How to Make Cinemagraphs Still Photos that Move Like

Movies!

SHARE

Yup, that picture moves.

Nope, youre not going crazy!
Cause who said photos can only feature still life?
Inspired by the moving pictures created by photographer and motion designer duo Jamie Beck and
Kevin Burg, we set out to make the magic happen.
Make your pictures move like ours did with a some Photoshop magic!
MakeDIYMovingPhotos!

What Makes Em Move?

Photos can show movement when made into GIFs.
Extra photos for bloggers: 1, 2, 3
GIFs stand for Graphics Interchange Format, and its a bitmap image format that supports animation.
This supported animation is what makes any movement possible.
This magical movement hit the world wide web in the late eighties, so its nothing new. However, the animation in GIFs are generally
characterized to be rather jumpy and irregular.
Then came along Jamie Beck and Kevin Burg. This talented team of fashion photographer and motion designer crafted cinemagraphs
incredibly sleek and sophisticated GIFs.
So celebrate the smooth comeback of GIFs by making your own photos join the movement!
List of Ingredients:
A camera that can shoot video
A tripod
Ideas for scenes to make into a cinemagraph!
A model and/or whatever props needed
A computer
Access to a video editing program (optional)
Access to Adobe Photoshop (for this tutorial, we are using the CS4 version)

STEP 1: Scheming your Scene

First, plan out a scene you would like to record.
For your rst round of cinemagraphs, try to keep it simple.
Some helpful hints & tips:
Remember that for this sort of GIF, you want to show some sort of
subtle movement; you want to create the intrigue of what a nice photo
whoa, it moves!!
Besides showing some movement, you also want to make sure you
have something in your scene that stays consistent to contrast and
emphasize that movement.
Try to think of a scene or movement that would be fairly easy to loop
since your nal GIF will be set to loop forever.
Your scene can involve a person but it doesnt necessarily have to.
Some of the ideas we came up with were:
Tree leaves gently moving in a breeze
Someones eyes blinking or moving
People or things moving as shown in glass window reections
STEP 2: Shoot the Scene
Once you have your scene gured out, set it up with whatever characters or props needed.
Then set up your camera up on your tripod and start lming away!
Make sure your tripod is standing on a solid surface to make sure your camera can lm as still as
possible.
You dont have to lm your scene for very long; 10-20 seconds of footage is more than enough to make a
cinemagraph.
STEP 3: Have the Right Video File
When youve shot what you needed for you scene, transfer your video
le(s) to your computer.
Before you can open and edit your video le through Adobe
Photoshop, you have to make sure the le is something that can be
opened in Photoshop.
Adobe Photoshop can open MOV or AVI video les.
If the video les you shot arent either of these les or any other video
les that can be opened in Photoshop, open your video les in any
standard video editing program to convert your les.
STEP 4: Frame your Video
To open and edit your video in Photoshop, go to File > Import > Video Frames to Layers.
A window will pop up where you will be given the option to:
Import your entire le into frames, or
Import a selected portion of your video le.
As a general note, having a lot of frames will make your resulting GIF animate much more smoothly.
However, more frames means more memory, and thus a larger le to work with. And you dont want to
work with a huge le on Photoshop because itll slow down the program (and your computer in general).
So, the best is to aim for a under 100 frames to start with. You can (and probably will) get rid of more
frames as youre making your cinemagraph.
For our cinemagraph, we decided to import a selected portion of our videothe particular moment where
our lovely model happened to look up from her book to gaze at the viewer.
Before you click OK, make sure youve checked the appropriate import options you want on the left side of the window, as well as to check
the box next to the Make Frame Animation option.
STEP 5: Your Video File, Layered Like cake
Once your video le has been imported into frames in Photoshop, nd your layers window.
You will see that each frame of your video has been made into its own separate layer.
STEP 6: Framed Again
To view these layers as frames, go to Windows > Animation.
In the animation window, click on the bottom right icon of a lm reel to
see the animation as frames.
Now youll see that each frame corresponds to each layer of your
video le.
This means that these layers and frames are linked to each other.
Keep this in mind when youre editing and deleting layers and/or
frames!
STEP 7: Catch that moving moment
Now that you can see all the
frames in your video, gure out
what frames capture the
movement you want for your
cinemagraph.
Hit the space bar to play your
video le so you can nd the
movement you want.
Once youve identied what these
frames are, isolate them by getting
rid of both the frame AND the layer, as these are linked to each other.

Note that when you delete frames, Frame 1 in your animation window will always be the very last layer in your Layer window, regardless if its
Layer 1 (the original Frame 1) or Layer 92 (as in our case). If this break in coordinating frames and layers numbers bothers you, you can
rename the layers to match to the frames when youve nished deleting all the unneeded frames and layers.
STEP 8: Alpha Layer In, Over
Within your now edited video le, choose one layer to show the consistent, non-moving elements of your
cinemagraph.
Duplicate this layer and place it on top of all the other layers in the Layers window.
Name this layer Alpha, since itll be the layer that you want to consistently show on top of each and
every layerand thus frame.
STEP 9: Masking time
Now that you got your Alpha layer chosen and situated, its time to
show the movement in your GIF.
Youll be editing your Alpha layer to show this movement by using a
vector mask and masking out the elements in that layer that you want
to show moving.
Dont know what a vector mask is or what masking means? Find out
here.
For our cinemagraph, we masked out the areas of our models eyes
and some of her hair, as well as the bushes in the background, since
these were the elements that we wanted to show some movement.
STEP 10: Testing, testing, 1 2 3
Once youve masked out what you wanted in your Alpha layer, its time to do a test run of your
cinemagraph!
In your animation windowmake sure its viewing the framesmake sure your animation is set to loop
Forever. Then play your animation.
From this test run, you should be able to see what further edits you need to make to your layers and/or
frames for your nal GIF.
STEP 11: Feelin Loopy?
One of the challenges you may see from your initial test run of your
GIF is in making a fairly smooth loop in the movements shown.
This can be resolved in the following ways:
After the last frame in your animation window, add a frame that
contains the Alpha layer as well as the very rst layer (the bottommost layer). To do so, duplicate the last frame, and then change what
layers show up in it in the Layer window.Then, tween the last frame
and this added frame to help ease the transition that happens in the
loop.For our cinemagraph, we chose this method to solve the looping
challenge.
Depending on the movement youre featuring in your GIF, you may want to have reversed frames of your animation to make a smooth
transition.To do this, rst select all your frames in the Animation (frames) window, duplicate them, and place them after all your original
frames.Then, select all these duplicate frames and set them to reverse by clicking on the little down arrow on the top right of the Animation
(frames) window.
Dont forget to test your cinemagraph by playing it through the animation (frames) window as you gure out how to smoothly loop it.
STEP 12: Color your Cinemagraph
As your cinemagraph will be a GIF le, its important to know that GIF les cant hold a lot of color
memory like other image le formats. This means your richly colored frames right now will not look as
vibrant when converted to a GIF le.
To accommodate to this challenge, apply a color effect that will work with less color memory. Such effects
include duotone or color-processing effects.
You can do this manually by playing with an adjustment mask over all your layers, or you can search the
web for free Photoshop actions for color effects that you can just apply over all your layers.
We used cross-coloring Photoshop actions from this site for our cinemagraph.
STEP 13: Resize to Optimize
We know youre probably stoked to show off your nished
cinemagraph after ya get through this tutorial.
To help optimize your GIF so that itll show up nicely on the weblike,
say, your awesome blogwe have to make sure your GIF le wont be
more large than is necessary. The internet is not friendly to large GIF
les.
With so many layers in your le already, its already bound to be a
large le, so how can you make it smaller?
Why, resize your image, of course!
Resize your image according to your preference in Image > Image
Size.
Make sure the resolution of your image is also set to 72 pixels/inch; thats all the resolution needed for images on the web.
Our cinemagraph, for the purposes of this tutorial, is set at a rather large size of 600400 pixels.
Note: If youve optimized your GIF le as best you can, and you later nd its still having trouble being uploaded on the web, there are free
GIF resizers available online that can make your GIF le more web-friendly.
STEP 14: Save Twice
Huzzah! Now youre ready to save your cinemagraph le as a GIF.
First, save the le youve been editing (if you havent done so during this process) as a PSD le so you can come back for more edits if
needed.
Then do a Save for Web & Devices.

In the window that pops up, make sure in the top right hand corner that youre saving a GIF le with 256
colors before you click to save.
STEP 15: Cinemagraph Success!
You now have a cinemagraph done under your belt!
Its time to show the digital world your spectacular creation so upload
away to your blog, Tumblr, or web site!
More GIF Greatness

The design process gets GIF-ted in the image above from a funny site called I AM NOT AN ARTIST. Bonus: Make a GIF to upload to the
site!
Havent seen the cinemagraphs by Jamie Beck & Kevin Burg? Check em out on Jamies blog here.
Visit the Cinemagraph Flickr group for inspiration and advice!
Fashion cinemagraphs arent just for the ladiescheck out the GIFs by Tim Barber of fashionable men rocking out in this online lookbook!
Special thanks to Fernando J. Baez, from whose cinemagraph tutorial this tutorial was loosely based on. You rock our neon socks, Mr. Baez!

Photojojo nds the best photo DIY projects, tips, and gear.
tay@swizzle.com
submit
Photojojos newsletter is why I got an email address in the rst place"- A. Endorsement

INEXPLICABLY POPULAR POSTS

DIY Photo Stands: How to Train Your Photojojo Dinos

How to Make Cinemagraphs Still Photos that Move Like Movies!

Top 20 Ultimate Ways to Use a Disposable Camera

PHOTOJOJO SHOP

Iris Lens Series

The Pocket Spotlight

tay@swizzle.com
submit
Subscribe to the best newsletter youll read all week.

PHOTOGRAPHY LOVING, U.S.A. BASED