How to Create a Scrolling Background in Affinity Designer

Final product image
What You’ll Be Creating

In this tutorial we’ll go through the process of creating a horizontal, tileable background that is perfect for side-scrolling 2D games (action, adventure, hack & slash) for PC, mobile and browsers. We’ll be using the basic vector tools of Affinity Designer, and you’ll see how we can make the image seamless in a fun and convenient way. Let’s begin!

In this particular case we’ll be
designing a stylized forest with a mysterious color scheme, giving it a proper
gloomy atmosphere suitable for mystic adventure games or quests. However, you
can apply these techniques for any other kind of background, whether it is a
sunny meadow or a seaside for casual games, or maybe some dark, deep caves or
even alien planes for a scrolling shooter or platformer. It’s up to you to
decide! 

Feel free to gather as much inspiration as you can, and for
this purpose check out the game backgrounds section of Envato Market, which will help you to
find some interesting solutions and original ideas.

1. Build the
Composition

Step 1

Let’s start by making a New Document. Select the Web Type and find the 800 x 600 px Preset.

create a New Document

Step 2

Here we have our horizontal canvas, and
let’s start filling it up from the top left corner. We’ll start with the trees,
which will cover all the top area of the image with their bushy crowns.

Take the Ellipse Tool (M) and make a 170 x 170
px
circle, holding down Shift.

start making the trees with the ellipse tool

Step 3

Continue holding down Shift and make more circles, varying their sizes from big to tiny,
making them look like foam bubbles.

Select all circles and head to the upper
context toolbar. Use the Add Operation to
merge all the circles into a single shape.

merge the circles with the add operation

Step 4

Fill the shape with dark-purple color,
using the color wheel in the Colour
panel.

apply color to the tree crowns

Step 5

Take the Ellipse Tool (M) again and let’s make another layer of circles,
using the same technique and varying sizes. Merge the circles together with the
help of the Add Operation.

add another layer of circles

Step 6

Fill the created shape with lighter purple
color and Move it to Back (Shift-Command-[), beneath the
darker layer.

color the shapes and move to back

Step 7

Now let’s move to the bottom part of our
background. Use the Rectangle Tool (M)
to form the dark-purple shape for the ground. Convert it to Curves
from the upper context toolbar. Now we can edit the shape, changing its form.

add ground with the rectangle tool

Step 8

Take the Node Tool (A), select the upper left corner and drag it up a bit,
making a slope. Double-click on the upper edge of the shape to add a new node.
Move the right node handle down to form a light curved line, depicting a smooth
hill. Add another node on the opposite side of the ground, making another hill.

edit the ground with node tool

Step 9

Add another shape beneath, forming another
ground shape in the distance. Make this shape a bit lighter. This way we’re
showing the aerial perspective of our image, making it look more three-dimensional.

edit the ground with node tool 2

2. Render the Trees

Step 1

Now we’ll start rendering the trees, making
a deep forest. Use the Rectangle Tool
(M)
to make a narrow, vertical stripe for the tree-trunk. Convert it to Curves, take the Node
Tool (A)
and move the upper nodes closer to each other, making the top of
the trunk much narrower.

make a tree trunk with rectangle tool

Step 2

Let’s add some small
branches at the top of the trunk. Use the Pen
Tool (N)
to make a curved line. Set the Width to 10 pt in the Stroke
panel, making the branches somewhat thicker.

make branches with strokes

Step 3

Make some more branches
and add a group of smaller dark-purple circles to cover the blank tip of the
branch, forming stylized leaves.

edit details to the trees

Step 4

Continue adding trunks,
varying their width and rearranging the branches to make more trees. Remember
to Group (Command-G) similar objects
to make them easier to work with.

add more trees

Step 5

Make another tree and
fill it with the same light-purple color as the distant ground layer. Move the light tree to Back (Shift-Command-[), making the
elements blend. This way the tree seems to be farther than the darker trees in
the foreground.

add trees in the background

Step 6

The distant area of our background still looks blank.
Let’s fill it up with some additional elements. Start by making an even 150 x 150 px circle with the Ellipse Tool (M). Make this shape lighter to create some more air
and distance between the objects. This contrast will be noticeable when
we place the new elements in the back a few steps later.

form the bushes from ellipses

Step 7

Make some smaller circles, creating
a bush, and use the Add Operation to
merge the shapes.

form the bushes from ellipses 2

Step 8

Now we can select our bush and Move it to Back (Shift-Command-[), hiding it behind the trees. Add more bushes, forming them from circles, filling the empty spots
of the background.

add more bushes in the background

Step 9

Let’s add some more trees in order to make
the forest thicker and, hence, the whole image more detailed. Make them even
lighter and put some of them in front of the bushes and some of them behind the
bushes, making the composition more balanced and versatile.

add more trees

Step 10

The white area in the background can be
very distracting, so let’s dim it a bit. Create an 800 x 600 px rectangle and Move
it to Back (Shift-Command-[), at
the very bottom. Fill the shape with greyish-blue color, adding a misty
atmosphere to our fantasy forest.

add a rectangle background

Step 11

Let’s add some minor elements that will
enliven our forest a bit more. Use the Ellipse
Tool (M)
to create tiny wisps of grass or leaves, consisting of three
ellipses each.

add more details to the ground

Step 12

What we can also do here to spark the
viewer’s interest is to add even more details. The more detailed the
background is, the more interesting it is for the viewer. Try adding another shape
in the bottom of the image, making a darker layer of ground.
Speckle small ellipses above it, depicting stones and creating an
illusion of the ground being sliced like a pie.

Add more branches or leaves or bushes,
whatever is needed to make the composition more filled and versatile.

add ellipse stones to the ground

3. Make the Background Seamless

Step 1

Now let’s see how can we make our
background seamless and repeating.

First of all, select everything (Command-A) and Cut (Command-X) it. Make an 800 x 600
px
rectangle (of any color). Keeping it selected, go to Edit > Paste Inside. Now we have our
forest framed inside the rectangle, as if inside a clipping mask, which allows
us to move it around easily.

hide the scene inside the rectangle mask

Step 2

Let’s move our image 400 px to the left. To do this, head to the Transform panel and apply the -400
px
value to the X axis. The Y axis should be set to 0 px.

move the image to the left

Step 3

Duplicate the image (Command-C > Command-V) and now we need to move the copy to the
right. Set the X value to 400 px in the transform panel.

Now if you look at your picture, you’ll see
that its left edge matches its right edge. As a result, if we stick
several images together, they will create a long, seamless panoramic image that
can be repeated endlessly. This is so that we can form a scrolling horizontal video-game background.

The only thing we need to do here is to fix
the central part of the image, making both halves match.

copy the image and move to the right

Step 4

Now we can drag both forest groups out of
their mask rectangles in the Layers
panel. And let’s start combining the darkest bottom layers of the ground. 

Select
both shapes and merge them with the Add Operation. Take the Node
Tool (A)
and select the dimple that appeared on the upper edge of the
ground. Delete (Backspace) it,
making the shape smooth.

merge the shapes with the add operation

Step 5

If the ground spots on the left side of the
image turned out to be somewhere beneath, find them in the Layers panel and drag them on top.

rearrange the objects

Step 6

Repeat the same for the next layer of the
ground—select the two halves and use the Add
Operation
to merge them. Delete
the unneeded node using the Node Tool
(A).

merge the shapes with the add operation 2

Keep using the same technique for the third layer, creating a single shape with the Add Operation.

merge the shapes with the add operation 3

Step 7

Select one of the bushes that popped out in
the foreground and Move it to Back (Shift-Command-[). Then move it one position up, placing it right above the greyish-blue background (Command-]).

rearrange the objects

Step 8

Now that we’ve stitched all the parts
together and rearranged the elements, our image should look like this. We can’t
really see the edge between the pictures, which makes it perfectly seamless. 

As
you may notice, I’ve added some small circles above the bushes in the
background in order to make the composition more busy and balanced. You can add
more stones in the bottom part or more grass if you feel that you need to
cover any empty spots of the image.

add more details to the image

4. Using Gradients to Make the Background
Vivid

Our background is already complete by this
stage, and you can leave it as it is and proceed to export. However, we can tweak
it even more, adjusting the colors and enlivening the whole scene. Let’s go on
and try out the Fill Tool (G)!

Step 1

First of all, select the top dark-purple
layer of the tree crowns and take the Fill
Tool (G).
Click and drag over the object, placing the gradient in a vertical
position. 

Now you can select the upper marker of the gradient fill slider (the
circle tip) and set the color you want using the color wheel in the Colour panel. Make the top of the shape
lighter and brighter, applying a pinky-purple color.

apply gradients with the fill tool

Step 2

This method works only for the shapes, but
not for strokes and outlines. So if we want to apply a smooth gradient fill to the
trees, first of all we need to turn their branches into shapes. Let’s select
those trees in the background and go to Layer
> Expand Stroke
.

Great! Now if you select any expanded
branch and check the Colour panel,
you will see the fill color applied. However, if you face the problem that your
branches are still strokes, then you may need to select the branches inside each tree group, using the Layers
panel. And then expand them. Try both options and see what works for you.

apply gradients with the fill tool 2

Step 3

Use the Fill Tool (G) to apply a vertical linear gradient to the trees. You
don’t need to apply it to every tree one by one—just select the entire group
in the foreground and drag the slider of the Fill Tool (G). Adjust the colors, making the top of the trees a bit
darker than the bottom.

apply gradients with the fill tool 3

Step 4

Apply the gradient to the distant bushes as
well, making their top a bit lighter.

apply gradients with the fill tool 4

Step 5

As for the ground, I’ve decided to apply a
gradient only to the first, darker layer in order not to make the image
overloaded with gradients. Make the difference between the gradient colors of
the ground barely visible, just adding a bit more depth to the picture.

apply gradients with the fill tool 5

Step 6

Let’s add a few more details in order to
finish the background. Use the Ellipse
Tool (M)
to add a group of circles in the upper part of the image, filling
the top of the tree crowns. Leave some space between the circle groups and keep
them away from the edges, so that the image remains seamless.

Apply a pinky-purple vertical gradient to
the circles, slightly darker than the tree crowns. This will make the trees a
bit more three-dimensional, without making the image overloaded with details.

add more details to the trees

Here’s what you should get.

seamless game horizontal background

Step 7

You can File > Export the picture in the desired format and combine several
copies together in order to get a seamless result. Or you can extend the width
of the document in Affinity Designer, using the Document Setup in the upper control toolbar.

expand the width of the document

Copy the picture and move it 800 px to the left and to the
right, making sure that it is perfectly seamless.

copy the background and make it long and seamless

Awesome! Our Seamless Game Background Is
Finished!

We’ve finished designing the
background and did a great job, using basic shapes, gradients and some
simple operations to make a balanced forest composition for a nice, seamless
game background.

Feel free to use these techniques to create various backgrounds, such as green forests, rocky mountains, sandy deserts, or whatever you can imagine.

If you want to get this particular background
in other vector formats, such as EPS, that are ready to be imported in a game
and also include alternative color schemes, then feel free to take a look at
this seamless game backgrounds pack, which might be useful!

Have fun with Affinity Designer, and don’t
forget to share your results!

horizontal seamless scrolling background for video games