Making our own Emoji
I’m making a real Apple-esque emoji for every one of my colleagues in Bakken & Bæck. The first finished set includes everyone from our Amsterdam office.
It all started with Drake. As a surprise, I wanted to create a real what-if-Apple-made-it emoji of 6 God for my colleague Ole Martin. This made me wonder: what would our own emoji look like? I got excited about the possibilities: we could use them in Slack, create a big poster with all our emoji to hang in each office, or print them on mugs!
I had never done anything like this and I didn’t know where to start or how to approach this. I opted for a systematic approach and divided my process in steps. I’ll take you through it and provide some tips so you can try it yourself.
Preparations
I’ve used Affinity Designer to draw the emoji. It’s fast and I love its friendly UI, non-destructive effects and outline view. You’re free to use Photoshop, Illustrator or Sketch yourself; whatever you prefer.
I collect a few photos of the person I’m creating an emoji of. The photos should be of high quality so the details (eye colour, hair colour, nose shape) are easily recognisable. It’s easier to capture facial features if you have many photos taken from different angles. I also refer to a collection of various original Apple emojis to learn from the visual style and the execution of details.
Step 1: picking an emoji for reference
To make sure proportions remain consistent I grab an existing emoji that looks like the person I’m recreating. This way it’s easier to mimic the facial features.
Step 2: tracing the original emoji
Next, I’ll trace the original emoji using a neon-green stroke. After tracing the emoji, I’ll fill some of the shapes with white to hide overlapping lines.
Step 3: outlining the new emoji
In this step I’ll tweak the emoji I traced to make it resemble the person. I start with the shape of the head, hair and ears because they impact the look of the emoji the most. It doesn’t have to be perfect or detailed. All you need is a sketch of the most recognisable features.
Detailing outlines by hand
Most of the emoji are pretty easy to design by tweaking the curves. But, in the case of Marijn’s emoji — with all her curly hair — it was impossible to capture all the details without sketching them by hand first.
Step 4: basic colouring
This step is straight-forward. The point is to switch the outlines to filled shapes, worrying about the exact shade of the colours later.
Step 5: lighting and shading
This step takes the largest amount of time. Below are a few tips on how to achieve the best result.
Layering
The lighting and shading of the emoji all comes down to layering and masking shapes with varying colours and effects. You can use gradients and gaussian blur or play around with the opacity to create a good-looking, lifelike emoji.
Shading the bottom lip
The bottom lip should be a bit darker to resemble a smile when using the emoji in small sizes.
Adjusting the iris shape
When you look closer at some of the original emoji, the iris is not in the shape of a circle. Instead, it’s vertical ellipse. I assume it’s done like that to make the eyes look more dynamic.
The final result
After a few hours of fiddling around with the details, this is what the final emoji looks like. Pretty accurate, right? 🎉
What’s next?
It took a lot of time to finish the emoji of everyone in our Amsterdam office. I’ve finished 7 emoji so far which means I have 33 to go. It takes approximately 8 hours to create one emoji. Add more time to do something special, like a different haircut or adding an accessory.
It would be amazing if there was a way to automate parts of the process…
If you also want to have your own emoji, take a look at our open positions. We’re looking for talented people like you!
Grab the file (Affinity Designer) to take a look at the finer details or follow me on Twitter for more emoji updates.
