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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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:

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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.

Our company’s mission is to simplify an event organizer’s life when to it comes to creating name badges. Whether they’re for a Fortune 500 company or small gathering at the local school gym.

Conference Badge

Name badges. Easy and fast.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store