A better visual guide on shading, shadows and detail

[rtobby]

This is an updated visual guide on shading, shadows, depth and noise. To find the old version, click this.

This visual guide covers shading, shadows, depth (windows, parapet), noise, roof and ambient occlusions in a visual manner. This guide contains some text, however, you should be able to understand most stuff from just looking at the images. A compiled version of the guide (in one image, no text) can be found at the bottom of this tutorial.


PART 1: SHADING

Light in TheoTown comes from the left side. This means that the left side will be lighter, while the right side will be darker.

image.png (1.32 KiB) Viewed 7945 times

This rule must be applied when making structures. Adding outlines to walls will ruin the quality of your plugin.

image.png (4.23 KiB) Viewed 7945 times

However, one of the most important factors of quality will be your implementation of contrast. Generally, the higher contrast can be achieved by making darker (decreasing the value, V) colors brighter (increasing the saturation, S) and closer to the blue (#0000FF; hue, or H = 240, why darker colors are closer to blue is explained in the second part.) color.

image.png (1.55 KiB) Viewed 7945 times

By tinkering with the HSV values, higher contrast will be achieved, making structures look less dull.

image.png (2.48 KiB) Viewed 7945 times

Applying the HSV rule, this is how our structure looks now.

image.png (1.41 KiB) Viewed 7945 times

PART 2: SHADOWS

As mentioned in Part 1, light comes from the left side. Therefore, any shadows will be going diagonally to the right.

image.png (3 KiB) Viewed 7945 times

Shadow lengths are usually equal to drawing a 45 degree line from the top of a structure to the bottom.

image.png (998 Bytes) Viewed 7945 times

It is important to note that shadows also affect walls. However, it is important that you do not make them too long.

image.png (1.43 KiB) Viewed 7945 times

Another important thing: shadows are slightly blue in color, which is why darker areas (see HSV in Part 1) are closer in color to blue.

image.png (925 Bytes) Viewed 7945 times

One final thing: shadows look better when they fade out rather than disappear instantly. This is how our structure looks now.

image.png (1.47 KiB) Viewed 7945 times

PART 3: WINDOWS AND DEPTH

When adding windows, it is recommended you add windowsills which create more depth to your buildings, making them look nicer.

image.png (1.9 KiB) Viewed 7945 times

Bright blue windows are to be avoided. It is suggested you go much darker with window colors, pure black (#000000) is also acceptable.

image.png (1.91 KiB) Viewed 7945 times

When making windowsills, you can color the vertical side in the other side's color, while the horizontal side can be the color of the flat roof. Make sure to mind the shadows. This (left) is how our structure looks now.

image.png (3.2 KiB) Viewed 7945 times

As a bonus, if you want to keep the roof flat, you may want to add a parapet to make your building more realistic. Mind the shadows.

image.png (1.74 KiB) Viewed 7945 times

PART 4: NOISE

Adding noise to a structure gives a sense of texture, which alleviates the issue of your structure looking flat and plastic. Noise can be achieved by making random pixels lighter or darker.

Noise can be done by tools. However, make sure you do not overdo it.

image.png (6.49 KiB) Viewed 7945 times

Noise can also be made manually, like I did by making pixels darker in "crack" formations. The advantage to creating noise manually is that you have better control over which algorithm you want to use and what texture you want to convey. However, doing so is slower and takes more effort. This is how our structure looks now.

image.png (2.47 KiB) Viewed 7945 times

PART 5: ROOF

Roofs come in all shapes and sizes, however, you are most likely to use one of either these roof shapes. The numbers show how much you should raise a pixel (draw it higher vertically) for each horizontal pixel. As mentioned in Part 3, completely flat roofs are also a possibility; it is recommended to add a parapet in that case.

image.png (1.54 KiB) Viewed 7945 times

Applying the 1/2 roof to the building gives this:

image.png (2.42 KiB) Viewed 7945 times

Add shadows and noise to the roof, and this is how our structure looks now.

image.png (3.13 KiB) Viewed 7945 times

PART 6: AMBIENT OCCLUSIONS

Ambient occlusions help making walls stand out more. They are achieved by adding dark transparent pixels (I use the same color as shadows) to corners and edges.

image.png (2.03 KiB) Viewed 7945 times

Add ambient occlusions, and this is how our finished structure looks now.

image.png (3.46 KiB) Viewed 7945 times

FINALE

Applying all the given tricks to your plugins can make them look much more pleasant and raises the likelihood that your plugin will be approved if you upload it to the Plugin Store, if you choose better colors. Please note that you should first get done with the structure and then add noise, ambient occlusions and shadows.

[dnswodn]

Very helpful, thank you!

[PingoG]

[OMDGDeveloper]

This is amazing! Great work