The Basics of Making a Texture

Post

Posted
Rating:
#8 (In Topic #8)
Avatar
Site staff
KINGTUT 10101 is in the usergroup ‘Super-moderators’
Hello,
Here I'll explain how to make a basic building in Cytopia's theme.  Keep in mind that Cytopia's style, scale, and aesthetic is heavily based on the one used in TheoTown, so I would highly recommend the game to you, as they have a good community and lots of tutorials as well.  

Anyway,
Before I start, I should define some terms:

Texture/Graphic - These both pretty much mean the same thing in my terms.  These would be any art used in Cytopia.  I might also refer to the patterns used on buildings as textures as well.
Texture Sheet - Texture sheets are patterns (like sand, concrete, etc) that you can apply to your buildings.  You can find the ones I've made here.
Texturing - The process of applying a texture sheet to a building
Assets - This includes any art or code used in Cytopia. For example, the Cytopia logo is an asset.
Tile - Cytopia is based on tiles.  Tiles are those squares that every building is built on.  One tile is 32 pixels in width and 15 pixels in height.  You can also stack multiple tiles together to make bigger buildings.
Depth Shading - Depth Shading is when you darken or lightens areas of a building in order to make it look more realistic and less flat.

Recommended Apps:
Pixly (Mobile)
Novix (Mobile)
GIMP (PC)
paint.net (PC)

Things to Keep in Mind
-Cytopia used the isometric point of view.  This means that something like our square tile is 2 times as wide as it is tall.
-One person in Cytopia is 3 pixels tall.  Make sure to scale your buildings accordingly
-Try to avoid using very bright and saturated colors in your final texture.  Try to use realistic colors
-Don't forget to add shadows
-Make sure you turn on the transparent background
-Make sure your image is saved as a PNG file
-I also have some videos on my second YouTube channel about pixel art tutorials.  YouTube Playlist
-When you name your image, it might be helpful to name it like this:
(building type)_(size in tiles)_(name of the building)

Now let's begin this tutorial.
I'll be splitting this tutorial into multiple parts, with each part in a separate reply in this topic.

Last edit: by KINGTUT 10101


I make the art for Cytopia and occasionally upload to YouTube.
Kingtut 101 - YouTube
Online now: No Back to the top

Post

Posted
Rating:
#9
Avatar
Site staff
KINGTUT 10101 is in the usergroup ‘Super-moderators’
Here I'll show you where to start when you make a building.

1) Start off by choosing how big you want your building to be.  For this tutorial, I'll be choosing a 1x1 building, like this:
step1.png
2) Next well create the basic shape of our building.  It might be helpful if you do this  on a new layer.  I would recommend using bright colors, as this will make it easier for you to tell where you will need to add texture later on.  Make sure that each wall has a different color.  It might also be helpful to give things different colors based on what texture they will have.
step2.png
3) Now that we have the basic shape of the building finished, let's add other details, like the roof.
step3.png
4) After that, we should apply a texture to our building.  I usually use texture sheets to do this, but you can use other methods if you prefer.
step4.png
And you're done… with the basic stuff at least.  You'll still have to add some shadows and details before your creation is finished.

I make the art for Cytopia and occasionally upload to YouTube.
Kingtut 101 - YouTube
Online now: No Back to the top

Post

Posted
Rating:
#10
Avatar
Site staff
KINGTUT 10101 is in the usergroup ‘Super-moderators’
Now I'll cover shading, which is an important part of texture-creation.

1) The first thing you should do is make sure the walls of your building have correct shading.  Here's how it should look.
step1SA.png
The green sides should be bright, and the red sides should be dark.  Here's what it looks like on the last building we worked on:
step4.png
The dark side should probably be about 30% darker than the light side.

2) After that, you will need to add a shadow.  Shadows should only appear on the left side of the building.  If you aren't sure where the shadow should end, use a diagonal line as a guide, like this:
step2SA.png
Here's what our building looks like with a shadow.  Make sure you cut off any parts of the shadows that doesn't fit on our tile.  Also, if you plan on having a transparent base, use the pencil tool at about 30% opacity to draw the shadow.
step2SB.png
3) Next we'll need to add shadows to the part of the wall underneath the overhang.  This will just be a simple one-pixel shadow.
step3SA.png
step3SB.png
Make sure these shadows are kind of faint.

4) Now that you have the basic shadows finished, you should try to add something I call Depth Shading (DS).  Depth Shading can be used to make buildings look less flat, as well as making it look more realistic.  Let's start by adding it to the vertical edges of the building.
step4SA.png
step4SB.png

5) Finally, let's add some more advanced Depth Shading to the walls.  First, take some sort of scatter-tool or a softened pencil tool at around 3-5% opacity with the color black and make small, circular motion on the blank areas of the wall.  Start off by making one big circle, and then continue to make smaller circle inside of it.  Don't be afraid of changing the opacity over time.  Try to stay away from the edges.  Your circular motion should look something like this:
step5SA.png
Once again, make sure this shading is fairly light.  It shouldn't be too drastic.  Here is a before and after of our building with and without the DS:
step5SB.png
I know it may be hard to tell, but trust me, it will help your building look nicer.  However, this technique does require a big of practice, so give it a few practice runs before you give it a go on your final building.  This technique works best with large areas of ground or large blank walls.

Anyway, here is our nearly-finished product:
step5SC.png
Now that we have most of the shading out of the way, it's time to add some details.

I make the art for Cytopia and occasionally upload to YouTube.
Kingtut 101 - YouTube
Online now: No Back to the top

Post

Posted
Rating:
#11
Avatar
Site staff
KINGTUT 10101 is in the usergroup ‘Super-moderators’
The final part of the texture creation process is adding details, like windows and people.  You may need to reuse some other techniques from the previous two tutorials.

1) First, let's start by adding a few windows.  Keeping in mind that people in Cytopia are only 3 pixels tall, our windows will be 2 pixels big.  Also, make sure the top half of the window is darker.  It helps make it look better.
step1D.png
Don't forget to darken the windows in the shadow.

2) Now let's add some DS to these windows.  This will help make your walls look more "3D".  Shade it like this:
step2DA.png
Darken where the blue is, and lighten where the red is.  The reason why we are doing this is to create contrast between the window and the wall.  Here what it'll look like when you're done:
step2DB.png
3) Now that we've finished that, let's add a family.  Like I've said before, adults in Cytopia are 3 pixels tall and children are 2 pixels tall.
step3DA.png
Let's also add some shadows.  I would recommend using black at about 20% opacity.
step3DB.png
And now we're finally finished.  Those are the very basics of making a buildings for Cytopia.  Although there are more advanced techniques out there, this should help you get started.

Last edit: by KINGTUT 10101


I make the art for Cytopia and occasionally upload to YouTube.
Kingtut 101 - YouTube
Online now: No Back to the top

Post

Posted
Rating:
#12
Avatar
Site staff
KINGTUT 10101 is in the usergroup ‘Super-moderators’
Here's the evolution of our building:
stepall.png

I make the art for Cytopia and occasionally upload to YouTube.
Kingtut 101 - YouTube
Online now: No Back to the top
1 guest and 0 members have just viewed this.