Creating your own Roof Variations Part 2
April 7, 2022
March 15, 2022

Creating your own Roof Variations Part 2

Creating your own Roof Variations Part 2



April 7, 2022

In our latest art tutorial, it's time to learn to make a roof top to go on the octagonal tower from the RTP!

Have you ever looked at an octagonal tower like the one in the RTP and thought: “Man, it would be really cool if I had a roofed version of that”?

This of course does not only apply to octagonal towers or just this default one, whenever you try to create some more complex architecture, roofs and their correct creation can become a problem.

Today we will walk together through this specific example, and hopefully share some general knowledge on the way!

I will do the base construction in graphicsgale and the later light and shadows in Gimp, you are free to use the program you are comfortable with!

As a first step it is always good to have the actual dimensions visualized. For example, we can create a separate layer on top of our object and trace the outline of the floor print and fill that with a solid color. While that is not crucial, it can help a lot to work with a solid shape instead with a shaded object, as all we do here is straight logical constructions and any additional lines might confuse us ;3

Something that is already visible: the different sides have different lengths, this is just how this building is shaped. So our roof might as a result also look a little uneven, but if we construct it carefully it should still look good.

And how do we construct it?

Well, first we make a single dot at our desired height of the roof in the middle of our shape:

Pretty simple, right?

The next step is also just as simple: We take our middle dot and connect it to each of the corners.

If the area inside of the existing front lines cover corners in the back, we can leave them out. As you can see here, the two corners in the back would not be visible, but I have seen many people leaving out the ones on the sides, which is wrong and will result in the roof having an odd shape!

As a next step we can make all the parts we need to edit more visible by filling all the sides with a solid color. Again, this is not crucial, but it will help you to see what you have to do to get that part done. Aso we need to pick a roof style. Here I went with those reddish shingles that I edited to be a little longer than the default as the angle is steeper, but anything will work!

We are now just one simple step away from the part where things will get fiddly, but for now, we just need to cut out the front triangle out of our roof structure and add it to our template:

For the next step we will take a look at the outer, the turquoise parts:

To create them we need to rotate our structure by 90° and scale it down to the width of one of the sides. As you can see, the left one is as wide as the turquoise triangle above. We also need to mirror it for the other side.

It also helps if you trim your roof part to the height of the baseline of your roof triangle and add a dot to the middle of the side facing the tip, because now you have to slope this bit in a way that the baseline of your snippet lines up with the baseline of the triangle and the dot lines up with the tip of the triangle. Since this depends on the angles and height, there is no distinct value, but you can easily find the correct one by visually checking:

Now all we have to do is cut out the turquoise area of that snippet and add it to our template:

That already looks very convincing, right?

But now we have one nightmare left, the grey parts.

Since again the angles might vary, we need to take two steps to find out what we have to do to the roof so it fits into them perfectly:

First we rotate the triangle until the tip is in the middle of the baseline and keep that triangle.

Then we try around with slope to find the value which leads to a perfectly horizontal base line:

With our roof we have to go through these steps, just backwards!

With the rotated and sloped triangle as guide, we scale our roof to the right length and trim it to the correct width. The original length we have before scaling is the one of the front triangle. This is because all triangles in fact have the same height, but the ones which are more on the side are shortened by perspective!

Now we take that trimmed and shortened piece and slope it, to recreate the angle of the rotated tile to get the perfect amount of sloping.

Then we rotate our sloped roof piece so the base lines up with the one of the triangle and trim off the excess material.

This already looks pretty convincing, right?

I personally like to go the extra length and ensure the shingles line up as well as possible on all sides, but that is up to you!

Now we have the remaining pink lines, we might have tried avoiding by incorporating them into one of the sides, but I prefer to cover them with ridges, but that is something that is best to do after shading:

This sketch shows how it works:

grey becomes lighter than default, turquoise may stay the same, green becomes darker, and orange a lot darker.

This is how this would look like, translated onto our roof.

Then we cover up the ridges with 1 pixel wide stips with outline which we shade to match their places and we are done!

And there we go, fits like a glove!

Tip: if you erase the side parts, you can use that tower as a choir for a church:

And now, have fun making your own octagonal roofs!

Recommended Posts