3D illustration of some UI elements, two spheres and a cloud hovering over dark background

How to create 3D illustrations in Sketch

A short tutorial with download file and CSS excursion

Manuel Blex
Mar 18, 2020 · 4 min read

Some days ago I wrote an Medium article on What I learned about UX from drinking tea and designed some visuals for it — stating at the very end:

“Visuals created in Sketch, heavily inspired by Peter Tarka. I wasn’t really aware you could achieve such 3D effects with Sketch but after a few experiments with shadow layers it worked out quite well. Ping me for the Sketch file, if you want to take a closer look.”

Many readers asked me about that file, telling that they probably underestimated Sketch. So I thought it would be a good idea to make a little tutorial out of this. I also liked the idea of digging even deeper by putting an example into code and of course I also make the Sketch file available to you here. So enjoy and happy sketching!

Our example

To make this tutorial a little bit easier and clearer, we will remove a few elements for our example file. So let’s focus on the browser interface in it’s plastic look and the two spheres floating on top:

A simplified version of the title image: 3D illustration of a browser window and two spheres hovering over mint background
A simplified version of the title image: 3D illustration of a browser window and two spheres hovering over mint background

A lot of people wrote that they would rather use something like Photoshop for such a design and that Sketch would not even occur to them here. Fair enough, considering that we’ve been designing flat UIs for years now. A way of thinking that is slowly fading away with the newly discovered neomorphism trends.

Two simple tricks

To recreate this haptic look and feeling, all you need are two simple tricks that should work regardless of your Sketch version.

A close-up of 3D browser window illustration
A close-up of 3D browser window illustration

Multiple shadow layers

The first trick is to apply more than one shadow, especially inner shadows. Something that seems a little bit strange for Photoshop users, although of course the feature is there too (“Bevel an Emboss”).

Taking a closer look at the control buttons of the browser in the example, you can see that it consists of five different layers — one fill, one drop-shadow and three inner shadows. Most remarkable here the two top layers: The incident light is half covered by another fill layer, thus creating the rounding effect.

Explaining the layer setup of multiple inner shadows to create an haptic look and feel to a button of the sample image
Explaining the layer setup of multiple inner shadows to create an haptic look and feel to a button of the sample image

Blurred light elements

For the second trick, let’s take a closer look at the spheres. In order to achieve the light reflections it is not enough to rely on the shadow effects of the single elements. We have to do a little handwork here and place some blurred fill layers as separate elements where we want them to be, masking them on the ground layer. By the way it doesn’t matter if you use the separate blur option of the effect palette or the blur amount in the shadow/inner shadow section. It will end in the same results.

In our example you can see three separate light layers, unmasked and outlined on the right side — two white layers for the incident light and and another reddish light reflecting from the smaller sphere onto the large one.

Explaining the layer setup of light elements reflecting on the two spheres of the sample image
Explaining the layer setup of light elements reflecting on the two spheres of the sample image

How to do this in CSS

What you can sketch, you can code, right?

Basically it is very easy to put all this into code. The only thing that was actually new to me (since you rarely do it) is that in CSS, just like in Sketch, you can apply multiple shadows on a single element. This simplifies things a lot without nesting several divs or using pseudo elements.

For example the five layers of the red control button from above is translated as follows:

background-color: #77BCF7;
box-shadow: inset -10px 10px 20px 0 #77BCF7, inset 20px -20px 20px 0 rgba(255,255,255,0.5), inset 20px -20px 20px 0 rgba(0,0,0,0.2), 10px 10px 20px 0 rgba(0,0,0,0.4);

Unlike in Sketch, you can’t use unfilled shadow layers for the second trick with the blurred elements. So it’s best to simply use filter: blur() here. Note to apply overflow: hidden to the parent element to mask the light reflections like in Sketch.

For more complicated shapes, it is certainly a good idea to switch directly to SVGs. The rounded edges can also be created directly in the SVG, as inner shadows can’t really be applied here. Also use filter: drop-shadow() instead of box-shadow to handle SVG shapes.

Download file

If you want to dive deeper go ahead and download the Sketch file of the original article to which I have added the example artboard from above:

https://www.mandolinie.com/downloads/how-to-create-3d-illustrations-in-sketch.sketch

Design + Sketch

The best collection of articles, tips, tutorials, and…

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