How to create 3D illustrations in Sketch

A short tutorial with download file and CSS excursion

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 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.

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.

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.

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