The secret sauce of Envoy Passport stamp images

If you use Envoy Passport, you might already know that we recently announced an awesome feature that allows you to share stamps of the places you’ve visited on your social networks. Real-time visitor sign-in dashboard at Envoy HQ Question: have you ever wondered how those beautiful stamps are made? The truth is, unfortunately, rather brutal: to make […]

If you use Envoy Passport, you might already know that we recently announced an awesome feature that allows you to share stamps of the places you’ve visited on your social networks.

Real-time visitor sign-in dashboard at Envoy HQ

Question: have you ever wondered how those beautiful stamps are made?

The truth is, unfortunately, rather brutal: to make beautiful stamp images for the thousands of companies who use Envoy, we put our poor designers (Amy Devereux, Sze Wa Cheung, Wells Riley and Jon Rundle) on call 24 hours a day, 7 days a week. Their task? Manually create stamp images with Photoshop whenever a new customer signs up.

Just kidding! That’s not how things are done in Envoy (phew!). At Envoy, one of our core values is:

Automate the mundane

As such, we actually built software for making stamp images. Even though it might just seem like an image you show on your phone, we spent a lot of time and effort to make sure it looks perfect.

Why creating stamps is difficult

At first glance, turning a company logo into a stamp image is not that hard. With basic image processing knowledge, you simply convert the company logo as a monotone color, then draw it as a mask with the theme color on the canvas. Voila! Done.

Original logo images
Stamp images converted from logo images

This actually works fine for most company logos. However, the world is more colorful than you may expect. Most companies use only a single color in their company logo, but there are still many which do not.

Original colorful logo images
Stamp images converted from colorful logo images

Oops! As you can see, the problem is that there are components with different colors in the logo. When they are converted into monotone colors, there is no way the distinguish the boundaries originally defined by differing colors.

The solution: look for the edges

To address the problem, a straightforward approach is to stroke the edge between color components. But here’s another problem: how can we know where the edge is? For example, given a real-life photo like this:

Picture from Wikipedia https://commons.wikimedia.org/wiki/File:Valve_original_(1).PNG, CC-BY-SA-3.0

…how can you find the edges? By definition, it’s the pixels where the difference between neighborhood pixels is huge.

There is actually a well-developed image processing technique called edge detection that can be used to solve this problem. We tried different edge detection algorithms, and realized that a Sobel filter provides the best result.

The fundamental idea of a Sobel filter for edge finding is this: there are two filter matrixes to be applied on the picture pixels:

These two matrices subtract nearby pixel values from horizontal and vertical directions to, essentially, produce the difference of nearby pixels. By combining the signal strength of nearby pixel difference

We get a edge stroked image:

Sobel image result from Wikipedia https://commons.wikimedia.org/wiki/File:Valve_sobel_(3).PNG, CC-BY-SA-3.0

With the edge image, we can finally make the edges of colorful company logos distinguishable in stamp images.

Logo image stoked with edge image generated from Sobel filter

Let’s make it even better

The story doesn’t end here. Although the non-distinguishable edge in stamps is now distinguishable, we noticed there was a drawback to this approach.

Since the original distinguishable edge, like the outer edge between the visible and invisible area, is also stroked, it actually slightly shrinks the logo image.

Logo image edge shrinks a little bit due to edge stoking, the blue color on edge indicates the shrinked area

Even though shrinking of the logo size on the edge is barely noticeable by the human eye, we wanted to make the stamp image as perfect as possible. To achieve that, we came up with an idea: the alpha channel also has an edge.

Alpha channel of logo image

We can also get the edge for it.

Sobel image of alpha channel

As we only wanted to stroke the real non-distinguishable edges, we used the edge of the image of the RGB channel to subtract the the image of Alpha channel. Here are the real non-distinguishable edges:

RGB channel Sobel image subtracts Alpha channel Sobel image

Finally, we stroked the real non-distinguishable edges on the stamp and made the perfect stamp image.

Logo image stored with non-distinguishable edge image as mask

The result looks great (if we do say so ourselves.)

Envoy is hiring

Admittedly, we’re a bit crazy. If you’re as crazy about pursuing quality and building the best product in the world, join us. As an exponentially growing startup, the work you craft will directly impact millions of people around the world. Here are the open positions:

iOS Product Engineer

Ruby Backend Engineer

Shoot us your resume if you’re interested!


The secret sauce of Envoy Passport stamp images was originally published in Envoy Engineering on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: Envoy