Thought Merchants

People. Process. Product.

Pixel Stork Gif

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

design, code climate,

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 collegue mentioned that "babies are polarizing" so we moved onto the next best thing, a stork.

Pixelized 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.

stork concepts
Initial stork concepts. Alost looks like Nintento 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 flow
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.

stork bag iterations
Well the stork needs to carry some sort of bag.
different bags
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.

animation test 1

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

animation test 2

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

animation test 3

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.

animation test 4

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

animation test 5

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

animation test 6

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.

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