How to create depth in Sketch
Learn how to use shadows, gradients and blurs to breathe life into your designs
Looking to give a little more realism to your designs? Maybe you’re familiar with working with depth or are even a big skeuomorphism enthusiast. Or maybe you’re a diehard fan of flat design. We get it! Flat can be sleek, simple and versatile. But sometimes your designs just need more. More realism, more depth, more life.
Take illustrations, for example. There’s just something eye-catching about a design that seems to come out of the screen. While you don’t have to go super crazy and photorealistic, adding a bit of depth can really spruce up your icons and interfaces.
In this tutorial, Joseph will show you how to create depth intuitively. We know it can be tricky to discern how others might’ve achieved the effect. When done well, the seams of depth are unnoticeable. Take a look at the switch below as an example. Our eyes can tell the difference between flat and realistic, but it’s hard to figure out the steps to follow. Below, we’ll teach you how different techniques to achieve this look.
A switch made in Sketch, before and after applying depth effects.
We’ll show you how to use:
- Simple style properties to make basic shapes look 3D
- Shadows and highlights to mimic how light hits surfaces
- Gradients to illustrate the falloff of light
- Blurs to blend surfaces
Ready? Let’s dive in 🪂
You can watch Joseph’s tutorial now, or go at your own pace with our guide 👇
1. Draw a switch container and knob
To get started, let’s focus on creating a flat shape that we can later improve on. In this case, we’ll need a gray rectangle with rounded corners and a white circle to create the container and knob. We’ll be working with a 50x30 px switch container and a 26x26 px knob — just to give you a sense of scale.
2. Tone down the background
Now we can start thinking about realism. Let’s get into the mindset that each layer is a physical surface being hit by a light source. This will help you figure out where to add highlights and shadows. In this case, let’s imagine the light source is right above our design. To help you out, select the background and turn it from white to light gray.
3. Add a gradient to the switch container
Using this new mindset, let’s darken the switch container. To show how the container is casting a shadow on itself, let’s apply a gradient that’s darker at the top.
4. Add an inner shadow to the switch container
It’s also important to think about how a light source with a warm tone will create cooler shadows. Let’s add a bit more depth with an Inner Shadow. The default color will work well for this exercise, but reduce it to a Y position of 3 and soften it by increasing the blur to around 8.
5. Add a drop shadow to the knob
Our container is looking good! Let’s focus on the knob next. Since the knob is sticking out, it should be casting a shadow. Let’s go ahead and add a shadow using the same Y position of 3 and blur of 8. You can also darken this shadow a little bit by increasing its alpha.
6. Mask the knob and shadow into the switch container
When working with depth, we’ll often need to combine a few techniques to create the desired effect. In this case, the switch container protrudes out further than what we’d want if our goal is for the knob to look more flush with the background layer. So how do we make sure the knob only casts its shadow into the switch container?
Easy! Let’s mask the knob and container by selecting both layers, Control-clicking, and choosing Mask Selection from the menu. Now that the knob and shadow will be clipped within the path of the container.
7. Add a gradient to the knob
But we’re not done with the knob yet! Let’s make it a bit more tangible by replacing the white fill with a subtle gradient. We want the surface to seem as if it’s slightly bulging out, so make the top part lighter than the bottom part. Always keep in mind that the light is coming from above.
8. Soften the knob edges
Edges in the real world aren’t as sharp as those of vector shapes. In this case, we’d be able to gain some realism by rounding the edges of the knob and allowing it to catch a bit of highlight at the top and shadow at the bottom.
We can create this effect by using Inner Shadows.
Start by adding a white inner shadow and increasing the alpha value to 100 since white on light gray is already subtle. To make it easier to see what we’re doing, let’s set the blur to 0 temporarily. At this scale, even a Y position of 1 is pushing things a bit too far, so let’s set it to something like 0.5. Once you’re happy with the outcome, you can set the blur to 1.
Next, add a black Inner Shadow to show the light rolling off the bottom edge. But let’s tone down the alpha to 1 so it doesn’t look too heavy. This shadow is the inverse of the highlight we just created, so set the Y position to -0.5 so it peeks up from the bottom. Then finally set the blur to 1.
9. Duplicate and shrink the knob
If you find yourself squinting your eyes to notice the difference between steps, don’t worry! That’s totally normal. The key to realistic depth is subtleness, so it will take a while for it all to come together.
With this next step, you’ll finally be able to see what all the hard work has been leading up to. Select the knob and press ⌘D to duplicate it. Hold ⇧⌥ and resize it to about 16x16 px. Finally, disable the shadow. This should result in a bulge sticking out of the knob.
Take this opportunity to increase the contrast of the Gradient Fill and bring up the alpha of the dark Inner Shadow to make it look a bit more pronounced.
10. Flip the extrusion vertically
If you’re wondering why we created a protrusion instead of an indentation… it’s because we’ve got to flip it! Click on the Flip Vertically button under the Layer Properties section of the Inspector, and watch the magic happen.
11. Soften the indentation
Right now, the edges are looking a bit too crisp and totally not in line with our subtle approach. A Gaussian Blur will help solve that. Just apply it to the whole thing with a radius of 1.
12. Add a slight outer bevel
For the finishing touches, let’s add some regular shadows outside the container to contour the top edge. Add a dark shadow at the top to make the surface appear to round inward slightly. Then, add a light shadow at the bottom to highlight the edge as it rolls back out.
13. Add a gradient to the background
To help us unify the whole look, change the background from a solid fill to a gradient that’s slightly lighter at the top. This way, it’ll be consistent with the position of our implied light source. And there you go!
As you can see, there are many techniques you can use to create depth. For simple designs, you might just need one. If you want to create more complex or realistic designs, then stacking up on techniques will help you achieve the best results.
Remember, it’s all about subtlety — and complex subtlety takes time! If you’re ready to take your depth game to the next level, check out David Blum’s tutorial on how to create a one-layer strawberry. Just beware: the strawberry looks so real that it might just make you hungry.
