Pixel Stork Gif

Iterating through animations to create a pixelated stork to bring PHP to all.

Pixel Stork Gif

Code Climate was introducing a new PHP service and we needed a nice little graphic. Code Climate already does static analysis of Ruby and Javascript so PHP was our new baby. Our initial ideation went right to showing a baby with the letters "PHP" on his or her bib. A colleague mentioned that "babies are polarizing" so we moved onto the next best thing, a stork.

The final animated gif used for the Code Climate PHP beta release.

My initial concepts looked a lot like the ducks from Duck Hunt - I think that was for the better. Interesting to see that a difference of about 2 pixels makes the stork on the bottom left look a lot more like a duck than the top stork concept.

Initial stork concepts. Almost looks like Nintendo Duck Hunt.

Once I had the right concept to move forward I started on the flying animation. Here is the "wing down" animation. To get the wings back up we just use the same frames in reverse.

Stork animation sequence.

Now the stork had to actually hold something. Making a pixelated bag is quite difficult. It either looked like a bomb or something more offensive...which is not what we were going for. I quickly tried some sort of box but that seemed a bit flimsy.

Well the stork needs to carry some sort of bag.
All the different bags. Trying to not make them look offensive.

Iterating Through Animations

The tricky part was not the flying, it was how the bag responded to the flight of the stork. It needed to move a little bit but not so much as to be distracting or pull the eye away from the flight dynamic of the bird.

The first version had the bag being totally stationary - it looked fake.

Trying a different bag, this looks like the stork is carrying a bomb.

Finally a bag that looks decent although there is no movement.

Putting a little bounce in there gives it some life but the bag animation does not have the same smoothness as the stork's wings.

Experimenting with a little shaking...yeah that doesn't work.

A little less up and down with no shake seems to be the best.

Finally ending up with the finished product below. Actually I ended up delaying the shaking of the bag until the wings of the stork start to go up indicating that the bag has significant weight. As well as reducing the up and down of the bag even more.

The final animated gif used for the Code Climate PHP beta release.

Related posts