Dylan White wrote: I would say burst mode should generally work (anything better than 3fps), maybe masked in video for more fluid motions like hair or water.
You could still shoot the baseplate as in image.
You're right, shooting very high quality video and then using Final Cut to turn the fames into tiff's works well too.
This stuff started appearing all over sites like Tumblr about 18 months ago. Been getting lots of requests to do it this year.
Best way is to convert whatever video you've got to a Photoshop compatible format (it likes most standard formats - I usually convert to ProRes 422 with Compressor) then File -> Import -> Video to frames (or something)
All the frames in the animation play in layer order, from Layer 1 up.
Select a frame you want to use as a sort of mask - where you don't want movement. Copy it to the top layer and use a mask on that layer to reveal where you want the motion to show through. Very quick and simple to do. Sometimes you need to do a little rearranging when you want an animation to play one way then the other.
If you select an easy source, you can knock them out in minutes.
I've done a few for product stuff I've worked on as a designer. The best way to approach them is with photoshop and/or after effects. But really, all you need is Photoshop.
Best way to do this:
Create a video file. Yes you can burst shoot but even with frame tweaking you never get the fluidness you'd get in a .mov file. So, step one should be envisioning how you want the final moving image to look. These work best with a mostly still image with only a small part(s) moving. You have to take into account how big you'll be displaying this image and animated gifs can really be a bitch to load even with high speed internet. The more moving stuff the bigger the file which most likely mean the more concessions you'll have to make in terms of quality.
Secondly if everything moves the effect really has no effect. it's just a gif, not a cinegraph. So picture having only maybe a mouth or eyes moving. Something subtle that wont require a lot of moving pixels thus allowing you to keep a quality image at a decent size. Then you have to think about color. Gifs only allow 256 colors so you might want to plan ahead or just shoot in black and whit...again this helps with clarity/quality.
If you're shooting a model, let them know that what should be moving and what isn't. Whatever is still they should do their best to keep still as possible. Anyway I'm dragging on, cutting to the chase.
1. Load movie file into Photoshop. Just try to pick the section of video you're planning to use. It cant take awhile to load the video in PS since it will automatically generate frames, so just make your life easier and deal with the few seconds of video you truly plan on using.
2. In the animation panel select the frame/layer you want to be the primary image. If your image is just of a girl smiling, pic the best pic and activate the layer while highlighting all the frames. Also move that layer to the top of the layer totem pole. Now if you run the video preview you should see it scrub all layers, but the image should stay the same since in each frame the top layer will be visible.
3. Time to mask. If your clip is of a smile, mask out the mouth from the top layer which is your master layer of sorts. Now when you run the clip again you'll have the top image still creating a flat non-moving image animation but since you masked out the mouth, the lower frames will be visible. At this point you've pretty much got your moving photograph. Instead of looking like a videoclip, or spliced snapshots you'll get what looks like a normal picture with some Harry Potter action sprilnkled over it.
I will advise you to tweak the frame duration times. With the right time frames you can get the effect using half the frames which still look fluid and will create smaller file sizes.
You can add to the effect by masking out the very hair edges to give the effect of flowing hair. You will find even when standing perfectly still slight movements still happen that can subtract and in some cases kill the effect together.
When saving your gif remember to go to "Save for Web and devices" if you don't your only options are to save a as jpg or layer image.
When importing video always pick the skip frame option or "select every other frame". Since it's a video and most likely running 24-30 fps you can really afford to lose as many frames as possible.
Remember to set your loop for infinite in the animation panel. I am talking of course of PS versions CS2 and higher...I am on CS5 and have forgotten when Adobe nixed Image Ready.
When you have converted your video into a layered PSD file, treat it as a PSD file. Top layer can be the most visible, and should be visible across all frames. If you want to do some retouching/blemish removal make sure you have your frames set up the way you like them and that your animation is solid.
Then simply make your visual edits to that frame/layer only.
Frames=layers when you've first create this PSD. From there you can delete a frame without affecting the corresponding layer. As for Frame duration: set all the middle duration to the same timing. Only adjust the first and last frames duration independently. Some times its best to make them longer than the rest unless it's something like flowing hair or water, then you want them to be the same duration across all frames. If you're moving eyes or mouth, it's best to have the image completely still for a couple seconds, then have your elements move shortly.
Photoshop is the best for this, but Fireworks might be just as good or even better than PS. Personally I've used PS and After Effects to do these but Fireworks is built specifically for web images so I'm sure it's on par with Photoshop and might possibly have some easier options for doing them.
Never use the "tween" frame options. The frames it create will total kill the effect of the cinegraph.
gif's have been around along time. what has slowed them down is facebook which does NOT support gif format. wish it did! I loved doing them back during the myspace era. and yes I always shot with gif's in mind.
David S Dobb wrote: gif's have been around along time. what has slowed them down is facebook which does NOT support gif format. wish it did! I loved doing them back during the myspace era. and yes I always shot with gif's in mind.
It wasn't because of facebook, most likely the makers of FB did not support gifs in order to prevent FB from becoming Myspace. Gifs are their own worst enemy. What makes a gif good also makes it bad. Although I've been making cinegraphs for years now I had forgotten how awful from the geocity to myspace days. I honestly don't even consider a gif and cinegraph to be the same thing although they are one in the same. A great degree of care and technical knowledge goes into making a good cinegraph. You can make a gif just by posting a video link to sites like gifmaker.com.
If anything Flash killed gifs honestly. Or atleast killed well made gifs. After that gifs were simply play things of teen girls prettying up their live journals or myspace profiles.
With more and more people moving to high speed internet gifs are less painful than they used to be but I still hate to be on a site or forum and someone has a 5mb gif as a signature. It's good to see gifs living on with Tumblr being a great source to find some good ones and of course the niche factor of a cinegraph.
I've also edited my comment above since I typed it at like four in the morning and was half delirious from exhaustion and some people had asked some questions to things I might have omitted for thinking they were too obvious but werent.
RobertO van der Laan wrote: Heey, you cheated! It's morphed, right?
I will take you up on that!.. but much rather to do a collab of some sorts if you will? strangely enough, I havent done much here in holland actually..
But weird, the eyes have a strange distortion, you agree?
(Heb je toegevoegd, had niet eens door dat je lemarechal was, mr bubblegum )
The distortion is compression loss (noise, artifacts) that is normal with animated gifs. The image is pretty big to have animated parts so that really plays a part. Cropping the image or reducing it's over all size could help close up some of the distorted parts.