I gave superpowers to my emoji app
When I originally created Emojipic, in 2023, it was a very simple web-app: you picked a background color and chose an emoji. Then you pressed the download button and received an image of that emoji on that background color. That's it, done.
As with most of the mini-apps I've programmed in my free time, this was built mostly for me: I wanted my Instagram highlights to have a minimal and consistent look, and I went with this "emoji on pastel color" style:
At the beginning I was creating those on a Mac, using Sketch. However, if I was traveling and didn't have a Mac with me, I had to wait until I got home so I could create the new highlight. No existing mobile app, in fact, seemed to cover this very basic need. This triggered the idea for me to create a simple tool that does exactly that.
After using it for almost 2 years I realized something: yes, there's an emoji for almost everything. But what if what I want to represent is not covered by an emoji? In that case I needed to design a custom illustration, check if somebody online already created something like that, or use generative AI. In any case, I still needed a computer to put everything together and keep the same level of consistency.
Let's add AI to it!
Yes I know, what a cliché. I wonder how many times this sentence has been said in the last couple of years... However this can be interesting: I can in fact add an AI mode where the custom emoji is generated based on a custom prompt.
So this is what I started to build: I introduced the AI mode toggle (that toggle didn't last long, more on that later) and added the input field for the prompt. For the image generation I'm using dall-e-3 and this is why the user needs to provide an OpenAI API key for using this feature. The key is stored in the browser's local storage, so that it doesn't need to be provided every time.
The basic idea is that the user is only providing the description of the emoji. Then I'm enriching the final prompt by adding all the specifics of the emoji style we want to generate.
First issue - alpha transparency
It doesn't matter how clear your prompt is about the fact that you want to obtain a PNG with an alpha transparency layer: the AI will 95% of the time return a background, no matter what. I also checked if there's a specific parameter for requesting an image with transparent background but this doesn't seem to be the case, at least with Dall-e.
The solution
After stubbornly trying to fix this via prompt I just gave up and started to ask for a white background instead. Then I'm doing background removal on my end. This seems to have fixed the issue consistently in all of my tests.
Second issue - shadows
I realized that AI tends to add shadows to the main subject. More than 80% of my test generations contained a shadow, which I never asked for.
I tried to fine-tune it, with a prompt like this:
But this made it even worse. This is a common issue with AI: when you mention something you don't want, you are actually giving some relevance to that topic. It's like the story of the guy who was trying to get an image with absolutely no elephant in it.
At this point, the emojis were often looking like this:
So the lesson seems to be: don't mention the shadows. Focus more on what we want, rather than on what we don't want.
So I went with this prompt:
This seemed to have, in most of the cases, solved the shadows problem:
However there's still something that doesn't convince me: the illustrations are quite good, however they don't really look like emojis, definitely not Apple emojis, even though this is what I'm trying to obtain via my prompt.
After some experiments I realized that this style is a consequence of me requesting "simple shapes" and "vibrant".
Again, it appears that, against my expectations a simple prompt is better than a complex, elaborate prompt.
So I ended up with this:
To my surprise this works better than everything I have tried so far:
The result is so good that, in my opinion, it's even better than a Genmoji produced with the same prompt:
A third scenario
It's not a coincidence that I mentioned Genmojis earlier. It can be, in fact, that we already have an image we want to use and we just need the tool for putting everything together.
This is why I came up with a 3rd mode called "Paste Mode". When using this mode we will just paste the image that we have in the clipboard and it will appear in the preview zone. Then we will be able to change the background color and download the PNG, exactly as for the other modes. Paste Mode also works on mobile, by just doing a long tap on the dedicated input area.
Scaling Tool
With Standard Mode I didn't need to worry about proportions because with regular emojis I was already enforcing a precise size. However, when using generated or pasted images, I often had the problem that the emoji was covering the whole image area, and therefore making it hard to maintain consistency with previously exported images. For this reason I also introduced an Image Size tool, which allows to shrink the image as we want. On top of that I also introduced an Icon Grid, that becomes visible only when using the image size tool. In this way we can keep the exact proportions and enforce consistency.
The whole flow with image sizing can be seen on the following video:
The image size tool is available on both AI Mode and Paste Mode.
Conclusions
Overall I'm quite satisfied with the results. What started as an incredibly simple web-app has now evolved into a quite powerful little utility that can serve multiple purposes and provide a good level of customization.