Advertisement
  1. Design & Illustration
  2. Affinity Designer
Design

How to Create a Scrolling Background in Affinity Designer

by
Difficulty:IntermediateLength:MediumLanguages:
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
Advertisement
Advertisement
Looking for something to help kick start your next project?

Envato Market has a range of items for sale to help get you started.