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 where we could share our interviews. an attractive Instagram profile 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. Simplifying our workflow 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 , so we could easily make new images ourselves without involving an illustrator again and again. an online avatar generator 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: Putting the avatars together The layering is done in JavaScript using the , which makes our own part of the layering code quite simple. merge-images NPM package 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, , that might need some food related shapes (aka. chef hats, aprons, etc.). Madlisten Most of our face shapes can be colored in different ways, so the same hair for example can be both blond, brown and red. Shapes in many different colors 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). 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. Sharing the avatars on Instagram 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 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 😄 Final thoughts But I hope you found this walk-through useful anyway.