How to create a small building in 10 steps

Learn here how to create and use plugins.

Moderator: KoalaGuy

Post Reply
User avatar
theotheoderich
Graphic designer
Reactions:
Posts: 821
Joined: Thu Jan 24, 2008 14:11
Location: Ruhrgebiet
Plugins: Show

How to create a small building in 10 steps

Post by theotheoderich » Sun Feb 12, 2017 18:54

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

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
The box label said, "Requires Windows 10 or better.", so I bought an Amiga Computer.

User avatar
Barky
TheoTown Cartographer
Reactions:
Posts: 2081
Joined: Mon Apr 17, 2017 22:13
Location: Ireland
Plugins: Show

Re: How to create a small building in 10 steps

Post by Barky » Sat Jun 17, 2017 1:37

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)
Supreme leader of Reagold

"Only the dead have seen the end of the war"
-Plato

"It's all banter in the end" -Barky


Will leave forum if the tunnel issue is not (properly) resolved.

Online
User avatar
KINGTUT10101
1,000,000 inhabitants
Reactions:
Posts: 1598
Joined: Thu Jul 07, 2016 22:50
Location: 'Merica
Plugins: Show
Version: Beta
Phone: Moto Z Force Droid

Re: How to create a small building in 10 steps

Post by KINGTUT10101 » Mon Jun 26, 2017 22:29

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: 2207
Joined: Sat Mar 11, 2017 19:20
Location: The Netherlands
Plugins: Show
Version: Beta

Re: How to create a small building in 10 steps

Post by Josh » Mon Jun 26, 2017 22:33

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.
Proud TheoTown player sinds update 1.1.50

Creator of Aldorria, Covinton Empire, West Country, Sunnydale

Save nature, before it kills you🌲

User avatar
PhillipTheBuilder
Townsman
Reactions:
Posts: 87
Joined: Tue Jul 04, 2017 13:50
Location: TheoTown,Military HeadQuarters
Plugins: Show

Re: How to create a small building in 10 steps

Post by PhillipTheBuilder » Wed Jul 12, 2017 10:18

Guys im lost.How to do the pixel?
Im just starting and im an idiot
Whats up?
Member of R.M.C
Hates vegetables.
-Likes TheoTown :bc
-Still have questions :bq
-Deals with money B)
-Started with making plugins

Online
User avatar
KINGTUT10101
1,000,000 inhabitants
Reactions:
Posts: 1598
Joined: Thu Jul 07, 2016 22:50
Location: 'Merica
Plugins: Show
Version: Beta
Phone: Moto Z Force Droid

Re: How to create a small building in 10 steps

Post by KINGTUT10101 » Wed Jul 12, 2017 16:07

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

User avatar
KoalaGuy
TheoTown Veteran
Reactions:
Posts: 6422
Joined: Mon Mar 06, 2017 21:45
Location: Koalafornia
Plugins: Show
Version: Beta
Phone: SamsungGalaxyJ5 2017
Contact:

Re: How to create a small building in 10 steps

Post by KoalaGuy » Fri Nov 03, 2017 20:21

I screenshooted the process of making the new 2x2 tree park (added in 372). Here's how it was done:
Screenshot_20171103-185443.png
Screenshot_20171103-185455.png
Screenshot_20171103-185512.png
Screenshot_20171103-185527.png
Screenshot_20171103-185545.png
Screenshot_20171103-185557.png
Screenshot_20171103-185606.png
:mine :space

User avatar
Bearbear65
Inhabitant of a Universe
Reactions:
Posts: 4196
Joined: Fri Feb 10, 2017 14:53
Location: Earth
Plugins: Show
Version: Beta
Phone: Asus zenpad 10

Re: How to create a small building in 10 steps

Post by Bearbear65 » Tue Nov 07, 2017 12:56

KoalaGuy wrote:
Fri Nov 03, 2017 20:21
I screenshooted the process of making the new 2x2 tree park (added in 372). Here's how it was done:
Screenshot_20171103-185443.png
Screenshot_20171103-185455.png
Screenshot_20171103-185512.png
Screenshot_20171103-185527.png
Screenshot_20171103-185545.png
Screenshot_20171103-185557.png
Screenshot_20171103-185606.png
:mine :space
You made it!?
Amazing work, I very like this park to be honest. ;)
But I'm not quite sure about the new 4x4 park. :?
ImageJust my opinion

User avatar
KoalaGuy
TheoTown Veteran
Reactions:
Posts: 6422
Joined: Mon Mar 06, 2017 21:45
Location: Koalafornia
Plugins: Show
Version: Beta
Phone: SamsungGalaxyJ5 2017
Contact:

Re: How to create a small building in 10 steps

Post by KoalaGuy » Tue Nov 07, 2017 14:01

@Bearbear65
Thanks :)
About the 4x4 park, it was made just to be better than old empty 4x4 park. If you want, I can post the process of making it too

TheOneAndOnlyJack
Settler
Reactions:
Posts: 6
Joined: Sat Dec 02, 2017 19:54
Plugins: Show
Version: Beta

What program did you use for that?

Post by TheOneAndOnlyJack » Tue Jan 23, 2018 17:40

KoalaGuy wrote:
Fri Nov 03, 2017 20:21
I screenshooted the process of making the new 2x2 tree park (added in 372). Here's how it was done:
Screenshot_20171103-185443.png
Screenshot_20171103-185455.png
Screenshot_20171103-185512.png
Screenshot_20171103-185527.png
Screenshot_20171103-185545.png
Screenshot_20171103-185557.png
Screenshot_20171103-185606.png
:mine :space
A little boi from freaking 12 year's so B)

User avatar
Matison55557
Inhabitant of a Universe
Reactions:
Posts: 4552
Joined: Mon Jul 04, 2016 18:49
Location: Poland
Plugins: Show
Version: Beta
Phone: Huawei P9 lite mini

Re: How to create a small building in 10 steps

Post by Matison55557 » Tue Jan 23, 2018 19:12

This program is called Pixly, and it's for download for free in Google Play
454454: New residences!

   plugins
Suggest/request a plugin!

Post Reply

Return to “Tutorials and Documentation”

Who is online

Users browsing this forum: No registered users and 1 guest