Lesson 2
Creating
Background
Elements for
the Game
B ackground images are an important element of
game design.
They complement the atmosphere of the game and help
establish a sense of full immersion.
2
Creating Background Elements for the Game
Let’s consider how we can create a background image
for a game using Photoshop.
Create a new document.
Background size for games is usually 1920 × 1080 px, or
its aspect ratio is 1,6 : 1.
Since we create the background in Pixel Art, filling such
a huge area pixel by pixel takes a lot of time. This is why we
will take a smaller format for a test, but its aspect ratio will
be the same (Figure 1).
Figure 1
Enable the auxiliary grid again, as we did it in the
previous lesson.
3
Lesson 2
And remember that all objects must be created on separate
layers!
So, create a ground layer and use the Rectangular
Marque Tool to select a small area at the bottom of the sheet
(Figures 2 and 3). Here we will draw a section of a platform,
where our hero will stand, in order to copy and paste it to the
rest of the sheet later.
Figures 2 and 3
Take the Paint Bucket Tool, select a dark green hue on
the palette for the Foreground Color and click on the high-
lighted area to fill it ( see Figures 4 and 5 on page 5).
4
Creating Background Elements for the Game
Figures 4 and 5
Create a new layer and name it grass. Draw grass using
the Pencil Tool (Figure 6).
Figure 6
5
Lesson 2
Use various shades of green and dark brown to give the
grass volume by working on shadows (Figure 7).
Figure 7
It is important to grasp the principle of adding light
and dark shades. The lightest shades will be on the most
illuminated areas of the image, and the darkest ones will be
there where light never falls (Figure 8).
Figure 8
6
Creating Background Elements for the Game
Let’s go to the ground layer and draw massive gray stones
there (Figure 9).
Figure 9
Despite the fact that stones are underground, add light
and shadow to them (Figure 10). Sometimes, in order to
make the image look good, game artists use fiction.
Figure 10
A piece of ground is ready!
7
Lesson 2
And now let’s cover free space on the artboard with
ground.
On the Layers panel, select the layers grass and ground
by holding Shift and left-clicking on them one by one. Copy
the layers twice using the shortcut Ctrl + J (Figures 11 and
12).
Select only the first pair of copies and move them right.
Do the same to the second pair of copies.
You can see the result in Figure 13 on page 9.
Figure 11
Figure 12
8
Creating Background Elements for the Game
Figure 13
Let’s go back to the Layers panel.
First, select all grass layers by holding Ctrl and clicking
on them. Then merge layers by right-clicking on them and
selecting Merge Layers (Figure 14).
Figure 14
9
Lesson 2
Create a new layer and name it mountain. Draw an out-
line of mountains (Figure 15).
Figure 15
Increase the size of the Pencil Tool up to about 15 pixels
(Figure 16) and cover the mountain silhouette with paint
(Figure 17).
Figures 16 and 17
10
Creating Background Elements for the Game
Select faded shades and draw some more mountains in
the distance (Figure 18). This way you can create an illusion
of image depth.
Remember that the farther away the object, the more fad-
ed it will be.
It is called an aerial perspective.
Figure 18
11
Lesson 2
Draw a tree and add shadows to it (Figures 19 through
21).
Figure 19
Figure 20
12
Creating Background Elements for the Game
Figure 21
Copy and paste the tree several times. Use the Move
Tool to distribute trees throughout the canvas. Resize some
of them in the Transform mode (Edit > Free Transform).
Notice that the borders of the resized trees blur.
Now place the layers in the correct order.
13
Lesson 2
Move mountain on top of the Background layer on
the Layers panel. Place grass and ground on top. Move the
blurred trees below grass.
Figure 22 shows the order of layers:
Figure 22
14
Creating Background Elements for the Game
And here is the image itself (Figure 23):
Figure 23
Unlock the Background by clicking on the lock icon on
the layer (Figure 24) and fill it with a light color using the
Paint Bucket Tool (see Figure 25 on page 16).
Figure 24
15
Lesson 2
Figure 25
In your spare time, you can add more environment ele-
ments to the created background.
Look at colorful examples for inspiration (Figures 26
through 28):
Figure 26
16
Creating Background Elements for the Game
Figure 27
Figure 28
17
Lesson 2
Creating Background Elements
for the Game
© STEP IT Academy
[Link]
All rights to protected pictures, audio, and video belong to their authors or legal owners.
Fragments of works are used exclusively in illustration purposes to the extent justified by
the purpose as part of an educational process and for educational purposes in accordance
with Article 1273 Sec. 4 of the Civil Code of the Russian Federation and Articles 21 and 23
of the Law of Ukraine “On Copyright and Related Rights”. The extent and method of cited
works are in conformity with the standards, do not conflict with a normal exploitation of
the work, and do not prejudice the legitimate interests of the authors and rightholders.
Cited fragments of works can be replaced with alternative, non-protected analogs, and
as such correspond the criteria of fair use.
All rights reserved. Any reproduction, in whole or in part, is prohibited. Agreement of the
use of works and their fragments is carried out with the authors and other right owners.
Materials from this document can be used only with resource link.
Liability for unauthorized copying and commercial use of materials is defined according
to the current legislation of Ukraine.
