Inspiration

Making the MyLaCroix.com can

by

on

View all posts

This year, Nelson Cash launched MyLaCroix.com, a website where you can create your own custom can design and imaginary flavor of LaCroix. The primary inspiration behind the site was LaCroix’s iconic packaging, and it was imperative the can look just right.

So, just how did we take it from IRL to GIF? Here’s a behind-the-scenes look at our creative process:

Step 1: Prepare can

Ever cut an aluminum can? Neither had we. Luckily, this lady had. Turns out cans aren’t perfect cylinders, so most crafters discard the mouth piece. However, we needed to save this element because the design was full bleed. So we cut the mouth of the can into chunks and flattened to scan all of the pieces.


Step 2: Create the SVG

Using Photoshop, we pieced the can back together and used Select Color Range to separate and clean each of the 6 colors. We then took the layered PSD into Illustrator and used Live Trace (a necessary evil ?) to vectorize each layer. We ensured placement of the art was correct (more on that later) and exported the final file as a SVG.

Rain, Drake, and Wacom —a winning combination.

Rain, Drake, and Wacom —a winning combination.

Step 3: Create 3D render

While our developer was busy prepping the SVG, a fellow developer at Nelson Cash created the 3D render using 3D software. Like many art forms, working in 3D is all about building in layers—broad strokes at first, then relentless refinement as you go. Therefore, the initial rendering resulted in a plain can.

3D rendering of a plain can.

3D rendering of a plain can.

Step 4: Apply texture

Once we had the foundation of the can ready, it was time to apply texture. To do this, we completed a process called UV unwrapping. This provided the computer instructions to wrap a 2D image to the 3D object, similar to how we “unwrapped” the physical LaCroix can.

lacroix-can3

Step 5: Translate to code

We then used Three.js to translate the 3D assets into a browser 3D render. Three.js is a JavaScript 3D library that makes WebGL—the engine that allows you to see 3D in your browser—substantially simpler for developers. Three.js supplies a myriad of tools to help recreate real-life effects, including lighting, reflection, shadows, and texture details, that really allows the LaCroix can to jump off the screen.

Lacroix

Adding real-world effects like lighting and reflection made the can pop.

There you have it! The can in all its natural essence.

Create and share your own flavor at MyLaCroix.com.

Disclaimer: MyLaCroix.com is not affiliated with the manufacturers or distributors of LaCroix products, National Beverage Corp., or any of its related companies, in any way, shape, or can. None of the flavors generated on this site are real. They’re simply figments of your fizzy imagination created by fans, just like you.

This was originally posted on Medium.

Read more from Nelson Cash

Author

Sarah Gless
Designer at Nelson Cash, a creative studio with roots in Chicago, New York & Los Angeles. Follow us on Medium and Twitter.

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.