We draw pixel town hall in photoshop

If you already have some experience in creating pixel art, then you definitely should try yourself in drawing large buildings. Therefore, in this lesson we will try to draw a town hall or another state building with classical architecture, a dome and columns.

It is advisable that you already have some experience in drawing buildings. Otherwise, look at the other lessons in this series, especially about drawing a character, a private house, and a high-rise building.

1. Sizes

As usual, we will use the previously prepared pixel man to correctly determine the size of the elements that we will draw.

Step 1

First, determine the height of the floor. Height, as in the picture below, will be the best option. Such buildings, as a rule, have large rooms with high ceilings, but since we are going to paint a high-rise building, which even without such rooms will look impressive enough, we will not take too high floors.

In the image below, two parallel lines are at a distance of 80 pixels. Try to make the distance between them a multiple of 10, because while moving lines using the arrows on the keyboard and holding down the Alt key, we can simply hold down the Shift key and change the move step from 1 pixel to 10.

Step 2

We will create three main floors, so we duplicate the lines several times (Ctrl + J).

Step 3

The building is wide enough, so now we have to determine its width. And this time, too, we use values ​​that are multiples of 10. This is not at all necessary, but later, thanks to the same distance between the lines, it will be much easier for us to place the elements.

Above in the picture with blue lines I marked the area of ​​the facade, which will provide us with the effect of depth.

Step 4

I don’t think that such buildings make them so narrow, but we can recreate the most recognizable elements of architecture without taking up additional document space, but simply making the building a bit narrower, as in the picture below:

2. Basic form

So, we have determined the dimensions of the main part of the building, but our town hall will be not just a rectangular shape. Next, we will draw additional elements that will make the building interesting and recognizable. In this section, we will create only basic forms, and in the second part of the lesson we will begin to fill in all with color.

Step 1

“Extrude” the entrance, where we later add doors, columns and several other architectural elements.

Do not move the lines too far; a distance of 10 pixels from the wall will be enough.

Step 2

Now we begin to work with the dome. In the center of the roof draw a large square. It’s okay if it is wider than the ledge on the facade, where we will have an entrance.

Step 3

Next, create a new layer and continue working on it. We must create a circle that will be the base of the dome, i.e. the place where the dome connects to the roof.

To begin with we draw a new square a little less than the previous one.

We define its center with the help of two crossed lines.

Create a circle from the center to the edges of the rectangle. For this we use the tool Elliptical Marquee Tool (M) (Oval selection) with the Alt key pressed. The boundaries of the circle must be in contact with the boundaries of the inner square and it is very important that the width of the circle be twice its height. In the small cloud that appears during the creation of the selection, you will see the size of the selection you are creating and you can correctly calculate the height and width.

Having created a selection, fill it with any color and go Select – Modify – Contract (Selection – Modification – Compress), in the dialog box that appears, enter 1, click OK and delete the inside of the circle.

Make a duplicate of the circle (Ctrl + J), as we may need it later.

Step 4

Below the dome we will draw a wall with faces. Via Polygon Tool (U) (Polygon) create a circle with 16 faces. Try to make the two opposite faces parallel, for example, the top and bottom (respectively, the two opposite side faces must also be parallel).

You can smooth the figure – we will use it only as an auxiliary basis for creating the dome.

Step 5

Move the polygonal circle to a new layer and compress it vertically by 50%.

Then we place the figure inside the square with a circle and adjust its size to fit the ring.

On the new layer we draw the pixel contour of the polygonal circle, trying not to make it too jagged.

Now we have the contours of a circle and a polygon. The polygonal circle that we used as the base can be removed.

Step 6

Duplicate the polygon (Ctrl + J) and place the copy above at the height of the floor.

Step 7

We connect the sides and corners of polygons with vertical lines and remove the extra contour.

Step 8

Place the contour of the circle in the center of the upper polygon.

Step 9

Remove the auxiliary squares with which we draw the circle. To create a dome, we will use a sphere that looks like an ideal circle in an isometric view; make sure that the width of the sphere matches the width of the contour of the circle.

The lower part of the sphere is removed.

Place the sphere close to the contour so that it connects with the side vertical lines.

Remove the extra contour in the background.


The contour of the dome is ready.

Step 10

On the dome there will be another small object – the octagonal cylinder. As a basis for the cylinder, we will draw a rectangle whose width is 2 times the height.

Next, perform the same sequence of actions as with the polygon. Create an octagonal circle, compress it vertically to fit in the previously created rectangle.

Outline the contour of the octagon, remove the base and place on the top of the dome, almost touching the contour.

Step 11

Duplicate the octagon, move the copy above and connect both figures with vertical lines, as we did with the 16-gon.

Step 12

Now we can place the dome on the building. It should be located strictly in the center of the town hall.

Remove all auxiliary lines.

Step 13

At the top of the cylinder, add another dome. Create a circle and enter it in the upper part of the cylinder.

Create a sphere, remove its bottom, and connect it to the contour of a circle on the cylinder.

Step 14

Draw vertical lines on the walls.

Step 15

We have not finished creating volume. Before you continue working with the roof, create another small element. It is called the pediment and is quite important architectural elements in such buildings.

The gable has the shape of a regular triangle. The upper left line should be horizontal, and the upper right should be diagonally. Then duplicate the contour, move it a little further from the original to create volume, and paint it with color.

Step 16

Now let’s draw a roof on a new layer.

Since the slope of all sides of the roof is the same, and the general view is ¾, the uppermost and lowest lines will be vertical. All we need is to determine the slope of the left and right lines. The length of these lines will be ¼ of the length of the front and rear walls of the building. The points at which the diagonal lines are connected with the vertical ones, we connect with one solid line.

Step 17

Now we define the place where the roof connects with the dome, and remove the excess contour of the roof that crosses the dome.

Step 18

We want the dome to be slightly higher, just at the level of the top of the roof. To do this, we will use the octagon to create an additional element and lift the entire structure with a dome.

Create the same octagon as on the top of the dome, but a little wider and so that its height reaches the highest point of the roof.

Step 19

This octagon will be partially covered by a roof. We need to define the angular lines between the roof surface and the octagon.

We have already used these lines on the gable, but in case you have a different roof slope, we must find these lines in a logical way.

Below you see an abbreviated version of the roof, the red color indicates the pixels that are the center of the lines.

We just need to connect the dots.

We remove the back part as it intersects with the dome.

And we get the correct section of the roof and the lines that will connect to one of the faces of the octagon.

Step 20

Below you can see the finished lines. But we can only use them for one specific side of the rectangle. For the front we need other lines.

Step 21

The desired angle of inclination is fairly easy to determine, since the part of the octagon, which is slightly overlapped by the pediment, is already connected to the roof line, and all we need to do is to connect the two finished points by a line.

Try to keep the lines neat and jagged as little as possible.

3. Color

We are done with the creation of all the basic shapes and now let’s do the color casting!

Step 1

For the roof choose the color of aquamarine, similar to the color of aged copper. It seems, he met on my source code.

For the walls, choose a light cream color, almost white. Everything is standard here.

Step 2

Add shading on the walls. It is quite easy to do on the main part of the building, but more difficult on the dome; we will need more shades for the dome, although I would not recommend using a new color for each visible face of the dome.

The walls of a 16-sided polygon that look in the same direction as the walls of three floors should have the same shading.

Do not forget the planes, which are directed upwards, fill with a light shade.

Step 3

Different parts of the roof will have different shading. I advise you to fill the dome with several concentric circles, but perhaps you know an alternative method of shading rounded areas, which will give a more interesting result.

Step 4

We do not need so many dark lines. So let’s fill the protruding corners with a lighter shade.

Step 5

Also, we do not need all the concave corners to be painted black. Fill them with a darker shade than the one around them. This will give them softness, reduce the contrast and make the junction of the planes more accurate.

4. Details

We have not yet finished filling with color, however, at this stage it is already possible to proceed to the addition of the remaining architectural elements.

Step 1

Let’s add windows. Select the lower contour of the octagon and duplicate it twice (Ctrl + J) to create the upper and lower edges of the windows. We perform all actions on a new layer.

Step 2

Now we define the right and left sides of the windows on each visible face of the octagon.

Step 3

Copy the resulting window outlines onto a new layer and move them so as to get the inner outline of the window opening. This will give volume to the wall of the dome.

It is not enough just to raise the copies above – each window should repeat the distortion of the wall on which it is located, so pay special attention to this moment and use the picture below to simplify your task.

Step 4

Delete the extra lines and merge copies of the window contour together (Ctrl + E).

Step 5

Fill the visible sides with appropriate colors and a lighter shade – the corners.

Step 6

Now, using horizontal lines, create a frame on the windows.

Step 7

Then we add a vertical partition on the frame to complete the main form. Then fill it with the appropriate colors.

Step 8

Smooth the dark outline of the frame, making it a little lighter. Also add a darker line at the bottom of each cell in the glass frame. This creates a reflection effect on the windows.

Step 9

Now we have to finish the element on the dome. This is done very simply.

First we have to draw a small column, fill it with color and apply shadows. Then place it on one of the faces of the octagon. Remove excess lines and add partitions with some decorative elements.

Step 10

Here is the finished top of the dome.

We have completely finished the work with the dome.

Step 11

Now add some details on the gable. If you looked at photos with similar buildings, you probably noticed that this detail is rather detailed and has many human statues. But we will not greatly complicate this part of the building.

We will add some concentric triangles.

Step 12

Draw a dark triangle to create a depth effect. With this we are done.

Step 13

We can remove the bulging front part on the second and third floors. Later in these places we will add columns.

Step 14

Let’s draw several parallel lines crossing the entire first floor. Since the height of the floor is a multiple of 10, the distance between these lines is 10 pixels.

I’m not sure how these lines are called, but they are often found in similar buildings. We apply them only to the first floor.

Step 15

Naturally, they should not be black, so we will make them slightly darker than the base color of the wall (for example, you can reduce the brightness by 10%). Immediately below each line we add one more only light shade.

Also, let’s add a ledge on the first floor and on the roof.

Step 16

Now add the windows. Let’s start with the wall that is closest to the viewer.

You can take one of the dome windows with a suitable turn and multiply it on the wall with the same distance between the windows.

Step 17

Now, by the same principle, we can add windows on the front side of the town hall. Keep the same distance between them as on the previous wall. If there is enough space for another vertical row of windows, add them. In any case, the shape of the building allows us to easily lengthen or shorten its wings, without much affecting the shape of other elements.

When finished with windows, remember that the parallel lines on the first floor should go clearly along the upper and lower border of the windows. This is not necessary, but it is desirable to adhere to this.

We also add small details right under the roof ledge.

Do not forget to study as many photos with real buildings as possible and take the elements you like from there.

Step 18

That’s how I placed the columns on the facade of the building. The final version will not be so square and wide, this is just the foundation.

Step 19

Let’s cut out a round column. We will work with only one, and then duplicate it.

To begin, draw a circle that should not extend beyond the base of the quadrilateral column. This will be the basis on which we draw a smaller circle to determine the thickness of the column. And from this circle we draw vertical lines upwards.

We can leave the tip as it is or draw the same circle as at the bottom. But let’s create an element called volute instead. This is a decoration of a round or spiral shape.

We start with a small circle (this will be a rounded corner of the volute) and then turn it into a spiral, removing / adding pixels on one side. I created two versions of volutes (right and left) and, of course, their slope should correspond to the isometric projection.

Place volutes on the column, apply color and shadows, then smooth the contour with a lighter shade.

Now we have a column!

Step 20

That’s how the columns look on the town hall.

As for me, the place where the columns are connected to the gable looks too simple, so I added an additional row of pixels, approximately, like under a ledge on the roof. But for this column had to be shortened by several pixels.

Also the column, which is closer to the viewer, is the most open and looks unfinished, so we need to add one more detail in the form of an additional curl.

Step 21

Next we will add the window between the columns. To do this, we will use the ready-made windows from the previous steps, but will slightly modify them.

Create a high window, and above it add a small one. We will make the top of a high window in the form of an arch. To do this, draw a circle across the width of the window, then distort it 26.5 degrees vertically. Create a stroke in the shape of a distorted circle and paste it on the upper part of the window, while removing unnecessary corners.

Step 22

This is what the finished windows on the town hall look like.

Step 23

We can take the same high window, duplicate it and place it on the first floor where the entrance should be (the window will need to be shortened slightly).

Step 24

Remove the extra pixels and begin to transform one of the windows in the door.

Step 25

Add small details on the door. When finished, duplicate it to create two additional inputs.

Step 26

Our building is ready!

Additionally, I added a texture on the roof, and the lower boundary of the building, which touches the ground, slightly brightened.


You have finished the town hall! A large and complex building, the center of your city and an important place for all pixel inhabitants. Well done!

I hope the implementation of this lesson was not too difficult for you, and you created an excellent drawing. Experiment with other variants of buildings, add objects outside, expand your city, because there is no limit to perfection.

Like this post? Please share to your friends: