How We Made a Simple Avatar Generator for Our Fitness Interviews

Must Read

10 Design Tips For E-commerce Sites

Using up-to-date technologies people are able to buy goods and pay for services sitting at home. No...

Get A Second Chance Through Robot Body

"Smarter mobility" refers to cleaner, safer, and more efficient ways of transportation. Most envision self-driving cars or...

Cloud-Native Yay or Nay: Reasons to Use Cloud-Native Technologies

Cloud-native has been the talk of the town for quite some time now. Some developers think...
James Hook
An experienced Content Writer to work with a Big 4 consultancy on an exciting programme in the technology/AI (artificial intelligence) field, specifically within the transportation sector. Key responsibilities for the Content Writer include: Create white papers discussing subject matter in the technology/AI field, for applications within the transportation sector Utilise existing content ensuring it meets brand guidelines and drives the strategic priorities of the organisation Work collaboratively with colleagues The Successful Applicant will ideally have: Ability to produce written content, including editing and proofreading Strong understanding of technology language, drivers and outcomes Understanding of MS Office applications, Adobe Acrobat, Photoshop etc. Unrivalled attention to detail Good organisational skills including the ability to manage and reconcile competing priorities Good communication and interpersonal skills Ability to interact with stakeholders at various levels and ensure objectives are met Self-motivated, flexible and proactive attitude Exceptional English language skills

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 matches almost everybody, we have so far created close to 200 face shapes that can be layered. 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’s 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. The main grey, dark grey, and light grey. We then have a PHP function that runs through the shapes and creates 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.

- Advertisement -

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisement -

Latest News

10 Design Tips For E-commerce Sites

Using up-to-date technologies people are able to buy goods and pay for services sitting at home. No...

Get A Second Chance Through Robot Body

"Smarter mobility" refers to cleaner, safer, and more efficient ways of transportation. Most envision self-driving cars or underground tunnels.

Cloud-Native Yay or Nay: Reasons to Use Cloud-Native Technologies

Cloud-native has been the talk of the town for quite some time now. Some developers think it’s just hyped way too...

Fintech Software Development Trends to Expect in 2020

There’s no doubt that the Fintech software development industry has attracted a lot of attention from consumers and investors alike. In Finance,...

How to Choose a Blockchain Platform to Develop Your Project

There are many blockchain networks out there, each considers themselves the best in terms of scalability, unique features, or capabilities. But...
- Advertisement -

More Articles Like This

- Advertisement -