All vector images (and illustrations for that matter) are flat and two-dimensional. While we can’t create three-dimensional vectors, well, at least not yet, we can use techniques to create the illusion of that third dimension, Depth. We can mimic the effects that light plays on an object in the physical world, we can overlap objects, we can simplify backgrounds to symbolize their distance, and we can use shadows strategically to make things pop out. There are many tricks to add depth vector art and illustrations.

Overlap

Overlapped objects help create a sense depth. When we see two objects that overlap with our eyes we know from experience that one of those objects is in front of the other. Overlapping objects is one of the easiest ways to create depth in a vector illustration. For example in the picture below the phone, briefcase, and notebook are all relatively the same size, when in reality those objects shouldn’t be. Because the phone is in front of the other objects we assume that it is closer to us. Things that are closer to us take up more of our field of view so they appear larger. By placing the phone in front, the designer has been able to add more detail because it is larger. If the phone was in back it would have to be smaller and the details would be lost.

overlap

Light & Shape

Think of a circle. Without a light source, the circle appears flat and two-dimensional. Spheres, however, have brighter parts and darker parts determined by the light source. Choosing a consistent light source when designing can help create a sense of depth and photorealism even on very stylized graphics. Take the stylized icon set below as an example. The popcorn, drink, and megaphone gain a stronger sense of depth from the established light source. The megaphone breaks the rule of a vertical split light and shadow. This is because of the way the cane shape of the megaphone refracts light and shadow. By putting the split down the height of the cone, it helps define the shape and give it depth. The inside of the cone is also in shadow which helps define the shape.

light

Shadow

By using shadows you can make flat Vector Illustrations pop out. The moon in the image below uses overlapping shadows to create a multi-layered icon. The icon is still flat, but with what we know about shadows in the real world, we can deduce one cloud is in front of the moon, the other is behind the moon, and they are all in front of the background circles. You may also notice that the circles seem to pop off the background as well without shadows. Sometimes a consistent shadow pattern is enough to imply that it would continue throughout the entire piece.

shadow

Simplicity

Our eyes can focus on planes of depth to allow us to see detail at that distance. Outside of that depth of field objects become blurry and less detailed. Adding blur to objects in Vector Illustrations is almost always a bad idea, instead, we can simplify to mimic the real world. The trees in the image below are simplified to a silhouette. Trees in real life have individual leaves and we see all of those leaves. If there is a value (lighter/darker) contrast between the tree and the background then we can make out the shape of the overall tree. Here the designer separated the trees in the foreground from the background using value contrast. The background trees are also grouped together as a single shape to show the idea of a forest without drawing attention to themselves.

simplicity

Video Tutorial

Tutorial Graphics from 10 Top Tips on Creating Flat Design Graphics by Yulia Sokolvia.

 

Brent Fisher
Follow me

Brent Fisher

Brent loves vector illustration and abstract photography. He builds custom PCs, wakeboards, and plays video games in his free time.
Brent Fisher
Follow me

Latest posts by Brent Fisher (see all)