The importance of light simulation

Luis Manjarrez
Aug 23, 2017 · 4 min read

It all started with me trying to change a graphic asset from our website. We are an online name badge creator company and right in our home screen you can see a badge with a lanyard. It’s beautiful, but it’s not accurate.

The lanyard is not accurate, we don’t have flat lanyards like that, we have corded tube-like ones and they have a hook at the end, a j-hook, as some people call them.

This creates confusion in some of our customers. Probably a standard: “Images in this site might not reflect the final product” disclaimer might be the simplest thing, but it’s also… not cool.

So, with my limited design skills, I went ahead and tried to draw a lanyard that resembles a bit more the real thing.

The first problem I encountered was creating a something that would look like a cord (I used Sketch for my design), but I wanted something vectorized and not a pixelated image from Google. After some web surfing I found out I could create pattern.

I found that the pattern below could eventually look like a cord. So I went ahead and tried (not very accurately) to copy the outline of sample.

Patterns are hard.

I was worried because the model was not exact and the pattern didn’t “clicked” perfectly, but I continued anyway. Once I applied colour, it started to look a little better.

Weird squid-looking pattern

But to be honest, this doesn’t look at all like a corded string, it looks like a weird squid or something. But then I realized, what if I used different shades of black-grey-white to simulate light! I know this must be basic when studying design, but I skipped that class (that’s not true, I didn’t study design)

I applied some degradation, but it looked off.

It’s worse now

BUT, what if I just observed a real lanyard for 5 minutes and understand how light bounces or obscures certain parts of the fabric? Oh yes.

All right it looks better!

And boom, it started to look better by just rotating and adjusting the direction of the degradation.

Now I just needed to draw the ring that’s attached to the clip and the j-hook. Without light simulation it looked like this:

Which is not that bad, I actually like the simplicity, but the website’s graphic assets all have a little volume. So again, I spent a few minutes understanding how the light touches the object.

AND if you attach a good looking name badge, it looks like this:

It’s incredible to see what a simple colouring trick can do. Also, if for some reason you want the lanyard file in Sketch, just leave a comment, I’ll be happy to send it to you.


Conference Badge

Name badges. Easy and fast.

Luis Manjarrez

Written by

Conference Badge

Name badges. Easy and fast.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade