How to create a small building in 10 steps

Learn here how to create and use plugins.

Moderator: Plugin Moderators

User avatar
theotheoderich
The Theo in TheoTown
Reactions:
Posts: 821
Joined: 24 Jan 2008, 14:11
Location: Ruhrgebiet
Plugins: Showcase Store

How to create a small building in 10 steps

#1

Post by theotheoderich »

Welcome to our small tutorial how to create a simple 1x1 building for TheoTown.

Basics:
First you need a graphics program.
You can use any program that supports PNG files and transparency. Possibly GIMP, paint.net or another program in which you can disable antialiasing.

It is important to know that TheoTown is using an isometric angle of view for all ingame buildings.

Some words about the scale in TheoTown.
A human being is about two meters tall. These are about three pixels in the game.
Due to some restrictions in the game, it is not possible to display a very huge factory scale to scale.
This is also the reason why a nuclear power plant has the same size of the base area in the game as a skyscraper.
Also keep in mind that even such a skyscraper can´t be higher than 256 pixel in height.

We start with the ground-area:
image.png
image.png (203 Bytes) Viewed 14666 times
Light and shadows are based on the following template:

Original size:
Image
Enlargement:
Image


Ok, let´s begin to create a small house for TheoTown.

Step 1:
Original size / Enlargement
ImageImage

We start with some basic walls.


Step 2:
ImageImage

Then we add the first part of the roof.


Step 3:
ImageImage

Now we extend the roof to the other side of the building.


Step 4:
ImageImage

In this step the roof is filled with color and slightly lowered on the wall of the house.


Step 5:
ImageImage

Now we add the window frames. Always pay attention to where the light comes from.
On the bright side the frames are dark and on the dark side bright to have a good contrast in the game.


Step 6:
ImageImage

For a "realistic" roof or window color it is worth to use a photo of a building.
Copy the photo to the graphics program and read out the corresponding color values using the color pipette.
This prevents a comic-looking look that does not match the other buildings in TheoTown.


Step 7:
ImageImage

Now we put a chimney and some structure on the roof, so it does not look too simple. Larger roofs (eg for an industrial warehouses) can also be filled with textures.
Depending on the side of the building, these textures must be rotated in order to adapt to the angle used in the game.

Image

In addition, the future owner of the building has been added to look at the construction of his house :wink:


Step 8:
ImageImage

Then some grass is added to the front yard.
Again, it is good practise to get the grass color values from a photo to have "realistic" colors.


Step 9:
ImageImage

In this step shadows are added.
For shadows I use black as a color with 20% color coverage.
The chimney throws its shadow on the roof, the homeowner has its shadow on the grass, and the right wall of the house also throws its shadow on the grass.

The length of the shadow corresponds to the height of the object that throws the shadow.

Shadows must not be drawn outside the ground-area.


Step 10 and final work:
ImageImage

In the last steps I adjust the color saturation and the contrast values (in this example using the unsharp mask in Paint Shop Pro 9...maybe it is different in other programs)
This makes the picture more contrasting and the appearance "more realistic".

ImageImage

In the last step, I cut the empty image borders exactly to the building size, so there is no blank border around anymore.

Image

User avatar
Barky
TheoTown Cartographer
Reactions:
Posts: 2056
Joined: 17 Apr 2017, 22:13
Location: Ireland
Plugins: Showcase Store

Platform

Re: How to create a small building in 10 steps

#2

Post by Barky »

This is probaly a dumb question but how do you get the scale perfect? Like the height and with of the building and keep it perfect like that? :?

(Yes I know this topic is old)

User avatar
KINGTUT10101
1,000,000 inhabitants
Reactions:
Posts: 2220
Joined: 07 Jul 2016, 22:50
Location: 'Merica
Plugins: Showcase Store
Version: Beta
Contact:

Plugin Creator

Platform

Re: How to create a small building in 10 steps

#3

Post by KINGTUT10101 »

If you want a tip on keeping a realistic size use the person. A human in TT is always 3 pixels tall. That should help with scale.

User avatar
Josh
Graphic designer
Reactions:
Posts: 2214
Joined: 11 Mar 2017, 19:20
Location: The Netherlands
Plugins: Showcase Store
Version: Beta

Plugin Creator

Platform

Re: How to create a small building in 10 steps

#4

Post by Josh »

Or just look at the windows, or theos buildings, that helped me a lot. Just keep "Copying theo's buildings" Until you can make them yourselves. I learned this in a week doing this.

User avatar
PhillipTheBuilder
Townsman
Reactions:
Posts: 89
Joined: 04 Jul 2017, 13:50
Location: TheoTown,Military HeadQuarters
Plugins: Showcase Store

Platform

Re: How to create a small building in 10 steps

#5

Post by PhillipTheBuilder »

Guys im lost.How to do the pixel?
Im just starting and im an idiot

User avatar
KINGTUT10101
1,000,000 inhabitants
Reactions:
Posts: 2220
Joined: 07 Jul 2016, 22:50
Location: 'Merica
Plugins: Showcase Store
Version: Beta
Contact:

Plugin Creator

Platform

Re: How to create a small building in 10 steps

#6

Post by KINGTUT10101 »

If you don't know any pixel art editors, Pixly and Novix (on Android) are pretty good.

User avatar
darcy123
Settler
Reactions:
Posts: 1
Joined: 19 Nov 2019, 11:55
Plugins: Showcase Store

Re: How to create a small building in 10 steps

#7

Post by darcy123 »

This is very useful.

User avatar
Kilobeastreptile
Settler
Reactions:
Posts: 1
Joined: 11 Apr 2020, 18:55
Plugins: Showcase Store

Re: How to create a small building in 10 steps

#8

Post by Kilobeastreptile »

can some one link a download file for the ground. the one in the forum wont open for me :(

User avatar
Lobby
Developer
Reactions:
Posts: 3705
Joined: 26 Oct 2008, 12:34
Plugins: Showcase Store
Version: Beta

Platform

Re: How to create a small building in 10 steps

#9

Post by Lobby »

Thanks, I fixed it. You'll find more ground templates here: viewtopic.php?f=108&t=3207

User avatar
Designer Anthony
Reactions:

Re: How to create a small building in 10 steps

#10

Post by Designer Anthony »

There is no doors!

User avatar
The_Real_Michael_1
Black Hole
Reactions:
Posts: 1511
Joined: 23 Mar 2020, 15:16
Location: Bing Chilling
Plugins: Showcase Store

Plugin Creator

Platform

Re: How to create a small building in 10 steps

#11

Post by The_Real_Michael_1 »

Designer Anthony wrote:
09 Feb 2021, 06:36
There is no doors!
What about the back of the house?
There may be a door there.

User avatar
TheFennekin
Neighborhood fox
Reactions:
Posts: 2728
Joined: 24 Aug 2017, 11:17
Location: Wandering around
Plugins: Showcase Store
Version: Beta

Plugin Creator

Platform

Re: How to create a small building in 10 steps

#12

Post by TheFennekin »

Designer Anthony wrote:
09 Feb 2021, 06:36
There is no doors!
ArE yOu QueStIoNInG ThE tHEo oF ThEOtoWn?! :76:

User avatar
Designer Anthony
Reactions:

Re: How to create a small building in 10 steps

#13

Post by Designer Anthony »

The_Real_Michael_1 wrote:
09 Feb 2021, 07:59
Designer Anthony wrote:
09 Feb 2021, 06:36
There is no doors!
What about the back of the house?
There may be a door there.
Did they rotate the house to see the door and the back of it?

User avatar
Designer Anthony
Reactions:

Re: How to create a small building in 10 steps

#14

Post by Designer Anthony »

TheFennekin wrote:
09 Feb 2021, 14:52
Designer Anthony wrote:
09 Feb 2021, 06:36
There is no doors!
ArE yOu QueStIoNInG ThE tHEo oF ThEOtoWn?! :76:
No, I did not. I did asked this question because it is missing something: doors.

User avatar
CommanderABab
AB
Reactions:
Posts: 11086
Joined: 07 Jun 2016, 21:12
Plugins: Showcase Store
Version: Beta

Plugin Creator

Platform

Re: How to create a small building in 10 steps

#15

Post by CommanderABab »

Maybe you could make a rotation aware version. With a door on one side. :)

User avatar
TheFennekin
Neighborhood fox
Reactions:
Posts: 2728
Joined: 24 Aug 2017, 11:17
Location: Wandering around
Plugins: Showcase Store
Version: Beta

Plugin Creator

Platform

Re: How to create a small building in 10 steps

#16

Post by TheFennekin »

Dude it was a joke :|

User avatar
Designer Anthony
Reactions:

Re: How to create a small building in 10 steps

#17

Post by Designer Anthony »

Why this building has square windows?

User avatar
The_Real_Michael_1
Black Hole
Reactions:
Posts: 1511
Joined: 23 Mar 2020, 15:16
Location: Bing Chilling
Plugins: Showcase Store

Plugin Creator

Platform

Re: How to create a small building in 10 steps

#18

Post by The_Real_Michael_1 »

Designer Anthony wrote:
22 Feb 2021, 03:32
Why this building has square windows?
Why not?

User avatar
Designer Anthony
Reactions:

Re: How to create a small building in 10 steps

#19

Post by Designer Anthony »

Oh yeah, square windows are normal.

User avatar
Alparingitlgnd5
Townsman
Reactions:
Posts: 76
Joined: 31 Jul 2020, 17:45
Location: Las Pinas, Philippines
Plugins: Showcase Store
Version: Beta
Contact:

Plugin Creator

Platform

Re: How to create a small building in 10 steps

#20

Post by Alparingitlgnd5 »

I forgot it again what is the maximum height and size of the building btw?

Post Reply Previous topicNext topic

Return to “Tutorials and Documentation”