This animated gif of the Babe working the room for his supper yesterday afternoon took us untold hair-tearing hours to complete. Nobody ever said working without tools was going to be easy. PLUS. Despite using our tripod for successive images, the background jumps around. See below for the story behind the story and suggested solutions.
"I wonder what percentage of Photoshop users do make use of ImageReady [a bitmap graphics editor designed for quick editing of web graphics]. None that haven't been classified insane," quips poster Hecate on GraphicForumZ, a question-and-answer forum we stumbled into during a bout of temporary insanity of our own yesterday evening and this morning as we struggled to create and save the above animated gif of the Babe using the Think System on us during the usual supercharged half hour of the countdown to supper. Three things [those of our readers who have zero interest in such things should skip ahead to Thing #3]:
1. Since we'd just created an animated gif of Tiny only a week and a half ago, what were the chances we would have already forgotten how? But we had. As usual, PhotoShop/ImageReady's built-in "Help" was of no use. [See our post "Photoshop not responding," the top result in a google search, for circumstantial evidence.] We ended up googling for assistance and eventually abandoned the results of several hours' work and started from scratch. Apparently we had unwittingly clicked on something or other that rendered our animation unsavable in the gif format required for publication on our blog.
2. How to make an animated gif in ImageReady. A step-by-step guide for next time we forget: In Photoshop create a multi-layered image of all the stills that will make up your animation. Switch to "Edit in ImageReady" and select "Animation" from the drop-down menu in "Window." Click on arrow in upper right corner of Animation window and select "Create Layer for Each New Frame." Click on "Duplicates Current Frame" to create the desired number of frames. Use the Layers window to select, copy and paste individual stills into the frames. Use "Save Optimized As" in the File drop-down. That was easy (see animation below).
'Glad the insanity was only temporary.
3. Even though we have mastered the tripod, the successive images in both animations above are jumpy. The camera is presumably moving ever so slightly when we manually click the shutter. Solution:
'Gotta get one of these, a Pentax Electronic Cable Release. Our old snail remote cable is incompatible with Optio 450 digital.
Ahhh. Now maybe we can get back to the "serious" post we were working on yesterday afternoon when madness struck, a classic Queen-of-the-Segueway linking of the lard-killing Crisco "big lie" with the unintended consequences of Al Gore's inconvenient prevarications amongst what Tom Borelli calls "CEOs who are under the corporate social responsibility (CSR) spell."
Update: Speaking of serious posts, don't miss Carnival of the Cats #187 with Zed Monster at Bad Kitty Cats.
Update II: Pajamas Media links.
Update III: Professor Reynolds is hiding under the bed: "CAT PHOTOSHOP MADNESS: Be very afraid."
Computers, thy name can be frustration at times. Glad you survived and look forward the Queen story.
Posted by: goomp | October 21, 2007 at 06:12 PM
I used ImageReady heavily during the last Presidential election and still have some nasty John Kerry animations on my drive... ;)
Posted by: pam | October 21, 2007 at 07:31 PM
LOVE the motion images...
brilliant.
Posted by: hnav | October 23, 2007 at 04:16 AM
Next stop: animated LOLCATS!!!
Posted by: Dr. Kenneth Noisewater | October 23, 2007 at 07:41 AM
Fascinating!
Posted by: GM Roper | October 23, 2007 at 08:33 AM
You Win! :) Thanks for the link Sissy. Now we are flooded! If we ever would have imagined we we would be having so many guests, tea would be served! And maybe Zed would be a bit more friendly. Wait, no not Zed. He is a Bad Kitty Cat! I was glad to see it was real traffic and not those internet terrorists trying to blogjack my MySql database and send out nice anti-American and anti-British messages again on my dime.
Sending many scritches for your beautiful Kitty Cats and thanks:) Yes A Sisulaunce Indeed!
Posted by: Megan | October 23, 2007 at 10:20 AM
Camera movement isn't the only issue. If you'll notice, there's a difference in the lighting in each shot, due most likely to using a flash. The shadows thrown by the light are subtly different in each shot, and that increases the perception of movement in each shot.
Posted by: Dave | October 23, 2007 at 10:36 AM
There's a slight change of exposure between the two frames in version 2 (look at the book titles).
In the Old Days (of film), you'd just set shutter speed and f/stop, and both frames would come out the same. You could probably fix that in Photoshop.
There are a lot of gif-animating programs Out There - "GIF Construction set" is one, and the Pro version is $25.
You might try putting a 5- to 7-second delay before the second frame comes up, and have it somewhere on the screen that would likely be visible for 10 seconds or so.
The "lookin' at you" pose in the second set is perfect. For Halloween, you might try changing the green-eyes to red (but real red, not "red-eye red).
Posted by: ZZMike | October 23, 2007 at 02:13 PM
Lovely Animation. Cats are the best! I've experienced this madness myself over a protracted period of time, still experiencing it, actually. I have a blog devoted to just this sort of thing. At the risk of sounding pedantic, may I offer a few suggestions?
- Try using layers in Photoshop to eliminate the background shift. Copy the frame with the smaller head. Select/copy/paste the area surrounding the larger head. Merge the layer with the large head over the duplicated layer with the smaller head.
- tween, which I haven't mastered on Image Ready yet but I'm getting close, performs a morph function that is more easily grasped with another free program, Morph X. Very intuitive, can master in a few sessions. Here, the head is captured at 25%, 50%, and 75% in between the two original frames. The stack of frames is duplicated and reversed so the cat's head doesn't snap back. The morph program twisted other items in the image and automatically resizes it, so in Photoshop resize it back to original dimensions and select only the head. The head had to be moved around a tiny amount to make the transition slide more smoothly. All three new heads, and one of the original heads is copied onto one cat background. The frames are duplicated and their order reversed so the cat turns his head back to the original position without snapping its neck.
The cat's tail is made to wag.
It helps a lot to label your layers as you go along. Morph x images can be named for their intended positions in the animation as they're saved one by one to desktop, then picked up in Photoshop, shifted over to Image Ready as needed.
One could get carried away. Lasers shooting out of the cats eyes, a tongue that blithely snatches a mouse like a frog snatches a fly, etc.
Posted by: bour3 | October 23, 2007 at 04:02 PM
Sissy,
A little OT but I thought of you as I was reading this.
Posted by: Rick Ballard | October 23, 2007 at 05:35 PM
I used ImageReady to create the animated "Cast of Characters" pic on my sidebar. It's trickier to do a good, clean lap dissolve, but I figured out how, by using layer transparency and the tweening function.
Great program - I've only scratched the surface of its capabilities.
Fun with images!
Posted by: Elisson | October 24, 2007 at 01:10 PM