TV tower

Story by Pavel Gerasimchuk

One time we had to create a promo page featuring Ostankino Tower for the Discover Moscow website.

As in the State Historical Museum story, the idea is to demonstrate key events in the building’s history as though they all happened at the same time.

Unlike the Museum page, the Tower page is arranged vertically and is supposed to be very long. Page layout is prepared and approved.

backstage tv tower 01


Meeting with the tower press office to discuss main events.

backstage tv tower 02

Marking up all the interesting facts on the sketch. One important condition is not to concentrate too much on the technical specifications of the tower and emphasize the events. For example, the height of the tower is a technical spec, but a visit by Fidel Castro is an event.

backstage tv tower 03


First, we need to prepare the tower.

It’s not easy to take a picture of such a high structure to make sure it remains in focus over its entire length. One solution is to take pictures in fragments using a long zoom lens.

backstage tv tower 04

Then we retouch the fragments and assemble them into a single photograph. The more fragments we use, the better the final result.

backstage tv tower 05

We cut the tower out from background with a raster mask using the Color Range function from the Properties palette.

Marking a cutting plane on the surface along the entire height of the tower and drawing a particularly harsh shadow along it.

backstage tv tower 06


Paying special attention to the surrounding environment. Choosing option number six, but with a significant increase of sunset intensity at the base.

backstage tv tower 07

Elevator shaft

The tower is ready, now we can start adding the events.

One of the most complex fragments is the quarter cut-away in the middle of the tower. It has to include fire barriers, elevator shaft and the elevator itself.

It’s good to start with the most difficult pieces, this will make working on the simpler ones later on much easier.

backstage tv tower 08
Defining the shape of the cut-away, sketching the volume of the main niche
backstage tv tower 09
Placing the elevator shaft with mounts
backstage tv tower 10
Adding details to the shaft, hanging the power cable
backstage tv tower 11
Adding the round fire barrier
backstage tv tower 12
Arranging lighting
backstage tv tower 13
Estimating the position of the elevator

Sections of the shaft are properly arranged to ensure the correct perspective.

backstage tv tower 14
backstage tv tower 15
backstage tv tower 16

Time to add textures to the inside of the tower. Finding a suitable photograph, retouching and placing on the surface.

backstage tv tower 17

Detailing sections of the elevator shaft.

backstage tv tower 18
Drawing the niche
backstage tv tower 19
Breaking the niche into segments, hanging the elevator
backstage tv tower 20
Turning on the lights

Later we discover tower blueprints that reveal its internal structure.

backstage tv tower 21

Making corrections: the high-speed elevator shaft is moved closer to the center; we get a clear understanding of the location of the fire escape where we decide to place runners who until recently have been taking part in speed climb competitions.

backstage tv tower 22
Now the elevator is in place
backstage tv tower 23
Cutting out a shaft for the fire escape

Using the stairs leading to the seventh floor of the studio. Fixing the geometry.

backstage tv tower 24
backstage tv tower 25
backstage tv tower 26
Attaching the stairs
backstage tv tower 27
Adding athletes
backstage tv tower 28
And more runners

There is an observation deck in the center of the tower’s shaft. Turns out, it is located at the height of 85 meters (278 feet).

backstage tv tower 29
Making a sketch
backstage tv tower 30
Adding a hint of the elevator and fire escape doors
backstage tv tower 31
The first visitors are taking pictures
backstage tv tower 32
The central part of the protective railing is cut out to expose the tourists
backstage tv tower 33
The crowd is growing
backstage tv tower 34
The segment is finished

The number of events has increased, which means that the cut-away in the tower has grown in height.

Steps of drawing the quarter cut-away:


There is an LED display mounted on the tower, which is made of an array of luminous elements. To show it we simply need to prepare a mask that would modify the picture being displayed.

Preparing the mask template in Illustrator.

backstage tv tower 35
backstage tv tower 36
backstage tv tower 37
Bending the dotted canvas to match the shape of the tower
backstage tv tower 38
Creating the selection
backstage tv tower 39
Mask based on selection
backstage tv tower 40
Drawing the guide lines
backstage tv tower 41
Adjusting the LED grid based on the guide lines
backstage tv tower 42
Activating the display

We get the idea to bring the display to life by creating an illusion of a rotating image. Giving the mask that can show any picture to the technologist.

Besides the LEDs, the mask includes reflections on the tower structures.

backstage tv tower 43
Dot mask for the display
backstage tv tower 44
Operational display


Finding a photo in the archive that shows construction of the tower base. Showing this on the website is an ambitious and interesting task.

backstage tv tower 45
backstage tv tower 46
Trying the slide fragment on the tower

Using the photograph as the base, as it’s difficult to make out what’s what on it. There’s a round disk at the base of the structure, that’s what we’ll start with.

Using the Extrude & Bevel effect in Illustrator to create the disk.

backstage tv tower 47
backstage tv tower 48
A guide line is drawn along the finishing tile line on the exterior of the tower
backstage tv tower 49
The guide line is used to adjust the angle of the prepared structure
backstage tv tower 50
The wheel is rotated several angles. To increase detalization, a cove is added in the Extrude & Bevel settings
backstage tv tower 51
The structure is positioned at the tower base

Time for the polygonal structure. The shape is sketched and aligned according to the perspective. Simultaneously adding the guide lines for the mesh structure.

backstage tv tower 52
backstage tv tower 53
The elevator shaft tube appears
backstage tv tower 54
A texture is applied to the tube. The structure’s color tone is equalized
backstage tv tower 55
Only the left part of the tower will be “constructed,” the right part will remain untouched
backstage tv tower 56
A hint of lighting appears. The cut plane is moved a couple degrees to the right

Next we draw and install the reinforcing mesh structure. Most of the geometry elements are best created in Illustrator as it’s much easier to make changes when necessary.

backstage tv tower 57
Making the window layer partially opaque to estimate the proportions and position of the mesh
backstage tv tower Ps
backstage tv tower 58
Preparing the structure
backstage tv tower Ai
backstage tv tower 59
Removing unnecessary cells
backstage tv tower Ai
backstage tv tower 60
The mesh is put in place. As a smart object, of course
backstage tv tower Ps
backstage tv tower 61
Because there is always a chance we might need to make it longer
backstage tv tower Ai
backstage tv tower 62
The result is instantly updated in the main file
backstage tv tower Ps

backstage tv tower 63
The structure is filled with mesh duplicates
backstage tv tower 64
Odd sectors are filled with a solid mesh
backstage tv tower 65
Continuing all around the tower
backstage tv tower 66
Adding volume to the reinforcing structure, making the base opaque where needed

One secret to drawing a precise image is using enough guide lines. Just be careful not to get confused by so many of them.

backstage tv tower 67

Adding scaffolding to the supports.

backstage tv tower 68
Drawing sketches using shapes
backstage tv tower 69
Adding railings and a drop shadow
backstage tv tower 70
Detailing the wooden texture

Time to go back to the internal structure beams. There is a polygonal wheel around the elevator shaft. Similar to the previous disk, we use the Extrude & Bevel effect on the wheel and put it in place.

backstage tv tower 71

Adding more beams. Adjusting the color and some rough lighting.

backstage tv tower 72
backstage tv tower 73

It would be a miss not to borrow the crane from the historical photo. In one of the articles we find an illustration with a caption mentioning the crane’s model. Using it to find lots of useful materials.

backstage tv tower 74

To determine the exact perspective, we resort to the traditional method of using ellipses, smart objects which circumscribe rectangular shapes.

backstage tv tower 75
1. Drawing an ellipse with its dimensions matching the level above the horizon
backstage tv tower 79
2. Drawing a circle circumscribing a square
backstage tv tower 76
3. The shape is placed inside the ellipse
backstage tv tower 77
4. And rotated to a required degree
backstage tv tower 78
5. The shape is placed on the photo of the crane

Using our workflow we can now easily draw the crane. There are many repeating elements in its design which can be easily reproduced in Illustrator using the Blend instrument.

backstage tv tower 80

The final touch of the construction segment are workers and back sunset lighting that allows us to avoid adding too much details to the crane and the tower’s beams.

backstage tv tower 81
backstage tv tower 82

Key stages of drawing the construction of the tower’s base.

At this time the tower goes to the technologist as most of the work has been finished. The only question that remains is the number of illustrated facts that can be added at any moment.

New interesting events that come from the press office or that we find on the internet are drawn and immediately sent to the technologist.

backstage tv tower 83
Olympic Bear
backstage tv tower 84
Fidel Castro visiting the tower
backstage tv tower 85
An architect with a delegation
backstage tv tower 86
Truck with an antenna part
backstage tv tower 87
backstage tv tower 88
BASE jumpers who broker the record for the number of people simultaneously jumping off a tower

Main stages of drawing the fire:


When working with such a long vertical illustration it’s important to make sure each screen features a bright and attractive element. It feels like there is a shortage of graphics around the elevator area. An elegant way to solve this is to add some fireworks.

Templates of sparks are drawn in Illustrator. Preparing simple brushes to draw them. The more brushes there are, the more different shapes there will be and the more diverse and interesting the final drawing will become.

backstage tv tower 89

Working on the firework “body” spark by spark. First the left part.

backstage tv tower 90
backstage tv tower 91

Now the right.

backstage tv tower 92

The sparks are transferred into the main scene in Photoshop as smart objects.

backstage tv tower 93

One after another, adding filters and effects that allow us to achieve the required level of realism.

The smoke from the fire on top of the tower is going right, which means the wind is blowing to the left. This should also be reflected in the fireworks by moving the spark direction slightly to the right.

backstage tv tower 94
Changing the vector part
backstage tv tower 95
Turning the filters affecting the smart objects back on

The final touch is to add linear background illustrations.

backstage tv tower 96
backstage tv tower 97

Adding the text in both languages to the illustration.

backstage tv tower 98

Deciding to go with the more laconic design.

backstage tv tower 99

The tower is ready. Sending all the elements to the technologist.

Request a design...