Depth by Color - Vector Landscape

• Software: Inkscape (or Adobe Illustrator)
• Level: Intermediate
• Subject: Simple Landscape

As promised, this is a walk through of the practical application of the theory of ‘Depth by Color‘. In this article, you will see how a simple vector artwork is made interesting by adding to the depth perception of the shapes using color.

Simple Illustration

Here is a simple illustration of a landscape which leads the eye from the far vanishing point to the large leaf-less tree on the foreground.

Download the lineart to experiment: Landscape Lineart - SVG | AI

(I have used Inkscape to create the AI format of the lineart - not sure how compatible it would be while opening in Adobe Illustrator).

As you can see - the shapes does add to the depth and creates a layered effect. But this can be further enhanced by modifying the colors with varying degree.

Depth by Color

Before we start applying the color effect of depth, let us examine the different layers/objects in depths. The sky (1) is far back. After that we have a dune/hill (2) and in front of that, a tree - the farthest one (3). As depicted in the image, (1) is the farthest and (6) is nearest (ignoring the foreground).

Once you have understood the layering and depth of each object in a scene, make a copy of the background block and paste it exactly over the full image. In Inkscape, select the background sky shape and then use shortcuts  - [Ctrl]+[C] and [Ctrl]+[Alt]+[V]. Make it a gradient from slightly darker shade of the background (sky) to slightly lighter shade.

For clarity, in the above image, I have scaled down the background image - you should not be doing that. Instead, just copy it over all the other shapes, and then reduce the opacity to around 15% to 25%.  In Inkscape, having the gradient object selected, use shortcut [Ctrl]+[Shift]+[F] and then reduce the opacity using the slider at the bottom of the popup window. You may want to experiment a bit with the opacity percentage - it is dependent on the number of layers in a scene. For this particular landscape (and the color scheme), I kept the opacity to be 20%.

Cut this gradient object and copy into clipboard. Start pasting it over the different layers, starting from the background. Layer the object along following lines from farthest to nearest:

1. Sky
2. 20% Opaque rectangle
3. Dune/hill
4. 20% Opaque rectangle
5. Tree
6. 20% Opaque rectangle
7. Dune/hill
8. and so on…

You should get a nice depth effect in your illustration.

With some minor tweaking of the foreground colors, such illustration do not even need a outline stroke and turning them off gives a nice feel to it.

You can see a larger view of same illustration at deviantART.

Please post links of the results of your experiments in the comment section.

Stay tuned using KalaaLog.com feeds (or using the email subscription form above). The same theory can be applied to digital paintings too.