3D DESIGN IS IN - BECOME A PRO IN 10 MINUTES

The page loads—a three-dimensional blob hits me—squishing around like a dismembered Pillsbury doughboy. 3D is in and I have no idea how to get started...

It's Thursday, 1pm. Another shit-ass wintry day in NYC. I've just had a green smoothie (like an asshole) and design twitter is raging. A new, early access product has launched. I click.

Fuck...that's cool.

The page is littered with 3D designs and animations.

Have you ever been here? Blankly staring at some design—desperately wishing you made it. I imagine that fucked up Mucinex-Booger whispering: "Brendan, you're a shit designer. You're too old? busy? stupid? 3D design is for cooler, hotter, less insecure designers."

The self-pity continues. I go up-and-down the site, looking at each carefully crafted detail. I want it.

It's now 1:30pm and I'm murdering Mr. Mucinex. Today, we're taking a 2D shape and making it 3-fucking-D.

What we'll do

1. Find inspirational 3D design
2. Figure out the tools we'll need
3. Learn how to turn a 2D vector into 3-Dimensions
4. Add a simple animation

Things I wish I did

Time to get inspired.

Inspiration (for me) is finding work that makes me feel terrible (cause everything is about me right?). In return, I am driven to be less terrible.

I'm working on a new brand and wanted to see how designers are starting to use 3D on websites. I found 3 that got me feeling some type 👏of 👏 way.

Pitch

The aforementioned site that started this journey. A gateway drug: www.pitch.com

Plink

I've reloaded this page ~10 times: https://useplink.com/en/

Ueno

Why does Ueno only make shit that rocks—ugh: https://interview.ueno.co/

Tools we'll need

Feeling inspired? Grande.

Before this 3D pilgrimage, I had been working on a new logo. This felt like the best place to start. The question is: how do we take a 2D vector and make it 3D? T-gourd for Youtube.

Design tools

To take a shape that was previously in 2D, and convert it into 3D, you'll need:

1. Adobe Illustrator. If you don't already have this, you can sign-up for a 14 day free-trial here. Make sure to mark your calendars and cancel before it's too fucking late.
2. Other design tools like Figma, Sketch, XD are optional. We'll be taking the vector from these tools and importing it into AI though.

3D tools

One of the most powerful 3D tools, which also allows you to animate, is called Cinema 4D (c4d if you know whats up I guess?).

• Download and start your 14-day free trial here (don't need a CC): https://www.maxon.net/en-us/try/.
• Once the trial is up, shit ain't cheap—starting at a horrid $60/mo

Sidenote: I've heard Adobe Dimension is another easy-to-use 3D tool. Let a boy know if you'd like to do another "deep-dive" there.

Time to fuck it up

It is now Thursday, 3pm.

Tools downloaded, GPUs firing, and a bead of sweat has formed on our communal brows.

It's time to pop this shit into another dimension...

1. Export your vector

I made the logo in Figma. Is that lame?

• In Figma, or any other vector-based design tool (exluding AI), export your 2D design as an SVG.

• Once exported, open your svg in Adobe Illustrator
• In AI, go to File → Save As → Change the version from Illustrator CC to Illustrator 8 (it's the only version C4D supports)

2. Import into Cinema 4D

• Open Cinema 4D (C4D) and create a New Project.
• Go to File → Merge Project → and select your .ai file

• Boom. 2D Fast 2D Furious. Vin Diesel is fucking shaking.

• Sidenote, sometimes there might be some issues with the import from AI. A fairly helpful thread here: https://www.c4dcafe.com/ipb/forums/topic/93984-importing-from-ai-to-c4d-broken-shapes/

‍

3. Extrude your vector

• Remove all the "Path" objects (i.e. layers) from the parent (the parent In this example is called contrastlogo).
• Delete the parent (i.e. contrastlogo) object once the paths have been removed.

• Right-click and hold the "Generator" button and click "Extrude"

• Move all paths into the Extrude Object.

• In my case, I had to click the "Hierarchical" checkbox to have the extrude apply to every path. TBH, I just clicked around here till that worked—like a pro.

‍

4. Add color and texture

The default 3D texture/color is butt-hurt so let's make it not suck.

• In the bottom corner click Create → Materials → New PBR Materials

• Double click the Material icon that will be titled "PBR"
• In this example, I wanted to make my vector look like a colored plexiglas object. To do this, check Transparency → Open the Refraction dropdown and click Plexiglas → Choose your color. Also be sure to check the "Color" checkbox as well

• Drag & Drop your material on the "Extrude" Object to have it apply to every Path

• Press the "Render View" button in your toolbar to view what your object looks like with the material applied.

‍

5. Animate it

At this point, you could export this 3D shape as a static png. However, if you want to impress your ex, then it's time to animate. Quick heads up, C4D uses keyframes so if you've used other animation tools in the past—you're in luck!

• Underneath the preview, you'll see your animation timeline with the default set at 90 Frames. Starting at the 0 Frame, Click the red Keyframe button (Record Active Object).

• Move to the last frame i.e. 90F
• Change the rotation to 360 degrees in the H category → Press Apply → Add a Keyframe

• Press Play.

‍

6. Export it

Holy shit—look what we've done. Are we 3D pros? Should M. Night Shyamalan hire us to do VFX for "Avatar the Last Airbender 2: When Ang Sees Dead People????" Probs.

‍

Now, all we do to do now is export. What I learned is the more frames you have, the longer it will take to render your final video. If you want to just do a quick test—follow along.

‍

Reduce frames

• Reduce the amount of frames from 90F to 24F. This way, when you go export, it won't take 2 hours.

• Go to Render → Render Settings

• In the Output section, you can change the video's dimensions/aspect ratio. Also, if you want to render the entire animation, go to Frame Range → All Frames

• Go to Save → Format → Choose your desired format (i.e. MOV for Quicktime etc.). Close the Modal.

• Click "Render to Picture Viewer"

• Watch as your video is rendered! Huzzah!!!

The sun has set. The rain has stopped. I can hear tires slide through the slicked cement outside.

It's Thursday night and today, we took a 2D shape and made it 3-fucking-D.

A new webpage loads—a three-dimensional blob hits us—squishing around the page like a dismembered Pillsbury doughboy. 3D is in and we know how to get started...