How We Made a Simple Avatar Generator for Our Fitness Interviews

My name is Mads Phikamphon and I'm the founder of Bulk Hackers.

At Bulk Hackers we interview people who do great in fitness. A lot of stuff in fitness is going on on Instagram, so we wanted a way to build an attractive Instagram profile where we could share our interviews.

Simplifying our workflow
Many fitness Instagram profiles look a bit the same, so we decided to go for making avatar images of every person we interview and use those images on our Instagram.

Now, we could have done all these images manually, but that would create a potential bottleneck in our workflow as none of us are that good at drawing. It would also take time/money to keep creating the images manually 😨

So instead of doing things manually, we built an online avatar generator, so we could easily make new images ourselves without involving an illustrator again and again.

Putting the avatars together
Our site Bulk Hackers runs on Wordpress, so our avatar generator is a Wordpress plugin. It basically works by layering images of face shapes on top of each other like this:

The layering is done in JavaScript using the merge-images NPM package, which makes our own part of the layering code quite simple.

To make it possible to create many different avatars, so there's something that match almost everybody, we have so far created close to 200 face shapes that can be layered.

We also planning to make many more shapes, so we can cover other subjects than fitness. For example, I run a Danish food site, Madlisten, that might need some food related shapes (aka. chef hats, aprons, etc.).

Shapes in many different colors
Most of our face shapes can be colored in different ways, so the same hair for example can be both blond, brown and red.

Manually creating shapes in each and every color would take a lot of time and hurt my programmer heart, so we also create a routine for coloring the shapes automatically.

All the shapes we get are delivered in the same three grey colors. A main grey, a dark grey and a light grey.

We then have a PHP function that runs through the shapes and create colored versions as needed (i.e. if they don't exist already).

Sharing the avatars on Instagram
When an avatar has been designed, we want it to get ready for our Instagram. The way we do that is to run the generated avatar image through some more PHP code that crops the image a bit and adds the name of the person + the title of their interview.

Finally, the avatar is ready for Instagram, so now it's queued and will be shared on our Instagram through with the help of Buffer's API.

Final thoughts
All in all, it turned out to be much simpler to build an avatar generator than expected. After all, merging images together with code isn't noble price stuff 😄

But I hope you found this walk-through useful anyway.