We’re updating the homepage in an effort to get something accomplished this week. Just kidding – really we’re starting an email database and the homepage needs to streamline viewer subscription. While the hood was popped, I went ahead and upgraded a handful of other assets. After spending an inordinate amount of time on animating a header graphic, I thought it might be cool to share the iterations. Take a look..
Here’s my static header image.
The goal is to make an animated gif in which the sun rays rotated. It’s a pretty big graphic so file size is definitely an issue. However, for the first pass, we just want to get a benchmark. Enter “header-1.gif”
Okay not too bad. Length is one second and the timing is 24 FPS. Loop timing is off though — you can see a little “tick” when it restarts the loop. File size is 567 KB which is WAY too big. Let’s see what happens when we cut the frame rate down.
Whoa. Feels like watching Wheel of Fortune. In this version, the frame rate is 24 FPS but there’s only 4 frames. Let’s see what happens when we match make the frame rate AND the frame count equal (both at 4).
Seems too fast to me when I look at it now. At the moment of creation, though, this looked great compared to my first few iterations. At that point I was happy with the sun rays and decided to add some motion to the robot.
Overboard. Added several changes at once: back and forth movement to the robot, blinking eyes and motion blur. Since we’re still just dealing with 4 frames of animation, a small motion blur effect was added to every other frame to add the shaking effect. I wanted it to seem like the ground was shaking as the robot walked. Fun to see this but it needs to be dialed back.
Took out one of the blurred frames. Now the ground only shakes for every other rock/footstep he takes. Also dabbled with the eye blink. Still too much.
Reduced the frame rate a bit to slow down the animation. It’s better but still not where it needs to be. I ran it by Steve and he suggested the stomping might be too much for the homepage. We want people to feel relaxed, happy and engaged.
Went back to the smooth higher FPS look. Steve said we can make the file size work using technology of which I’m un-aware. Who knew. It’s nice to have a programmer as a partner. Eyes are kawaii.