Making the MyLaCroix.com can

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.

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.

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.

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.

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

• The typography of ‘Stranger Things’