Advertisement
  1. Design & Illustration
  2. Game Design
Design

How to Design a "Match Three" Game Screen in Affinity Designer

Final product image
What You'll Be Creating

In this tutorial we’ll be designing a game screen for a “match three” kind of game. We’ll be transforming basic geometric shapes to create lovely animal icons and applying various types of gradient fills to make the objects vivid and three-dimensional. We’ll finish up by creating a background to set up a game screen template.

“Match three” games are very popular, especially for mobile devices. The gameplay is quite simple yet addictive: put three identical objects in a row to score more and more points. In this tutorial we’ll be designing a vivid game panel with fancy square animals. What is more, this lesson will help you to get inspired and design any other type of match three game screen, for example a game with precious gems or flat fruits. Feel free to browse Envato Market for more ideas of flat game screen design, and let’s get started!

1. Create a Square Bear

Step 1

Start by creating a New File of 600 x 800 px. If you don’t like working on a white background, use the Rectangle Tool (M) to create a shape covering the canvas and fill it with yellow. Lock it in the Layers panel by clicking a tiny lock icon on top. We’ll keep this shape in the bottom and will be able to recolor it later.

Start by creating a New File

Step 2

Let's start forming the head of our first animal: a cute bear. Take the Rounded Rectangle Tool (M) and make a 200 x 200 px lilac shape. Remember that you can adjust the Corner Radius of your shape from the control toolbar on top. Let’s keep it at 25%.

Take the Fill Tool (G), hold Shift and place the Fill slider vertical across the shape, applying a two-colored Linear gradient fill.

We can adjust the color of the fill by clicking the tips of the slider and picking the appropriate color in the Colour panel. Let’s pick a light lilac color for the upper tip and a darker color for the bottom of the shape, thus adding dimension.

shape the head from rectangle with linear fill

Step 3

Let’s start forming the eye. Take the Ellipse Tool (M), hold Shift and make an even circle of 50 x 50 px. Switch to the Fill Tool (G) and change the Fill Type to Radial in the control panel on top. Apply a white color to the center of the shape and grey color to the edge, making the eye spherical.

Now let’s shape the iris. Copy and Paste (Command-C > Command-V) the eyeball, hold Command-Shift and make the copy smaller, shrinking it down to about 35 x 35 px with the help of the Move Tool (V). Fill it with radial fill of turquoise color in the center and dark turquoise at the edge.

Duplicate (Command-C > Command-V) the iris and make the copy smaller, forming a pupil. Fill it with dark-turquoise solid color. Make a small white highlight on top of the eye, using the Ellipse Tool (M).

make an eye from circle with radial fill

Step 4

Now that the eye is ready, Group (Command-G) all of its elements, hold Option-Shift and drag to the right, making a copy. Group both eyes, select them together with the head shape and use the Align panel on top to Align the shapes Horizontal to the Centre.

Continue using the Ellipse Tool (M) to make a squashed nose of 50 x 15 px size. Apply a vertical linear fill from light pink on top to darker pink at the bottom. Make a smaller dark-pink ellipse on top and switch its Blend Mode to Screen in the Layers panel, thus forming a semi-transparent highlight.

make a nose from ellipse

Step 5

Next we’ll form a mouth. Use the Pen Tool (P) and hold Shift to make a squared line. Set the Fill color to none in the Colour panel and apply a dark-lilac color to the Stroke. Head to the Stroke panel and set the Width to 2 pt, leaving all other options as default.

Take the Corner Tool (C) and make the corners of the shape fully rounded by pulling the corner nodes up.

Duplicate the shape and use the Flip Horizontal function from the control toolbar on top to mirror the shape.

shape the mouth with pen tool

Step 6

Now we’ll add the ears. Use the Ellipse Tool (M) to make a 70 x 70 px circle. Let’s make it blend nicely with the head by picking the proper color. Find the Color Picker tool in the Colour panel, hold and drag it over the bear’s head. You will see a magnifier, helping to locate the color you need. Pick the light-lilac color next to the ear and release the mouse button. Now you can select the ear and apply the color from the swatch next to the Color Picker. There we have it!

Now let’s see how we can copy the complex fill style from other objects. Duplicate (Command-C > Command-V) the ear and make the copy smaller. Copy (Command-C) the head, select the top element of the ear and go to Edit > Paste Style. Edit the position of the fill using the Fill Tool (G). Add a second ear at the opposite side of the head.

As you can see, we can copy not only the objects themselves, but also their appearance.

shape the ears from circles

Step 7

Let’s finish up with the bear by adding one more element: a stylized tummy. Use the Ellipse Tool (M) to make an oval and fill it with dark-lilac color, switching the Blend Mode to Screen in the Layers panel.

We can place the created ellipse inside the head shape, this way hiding the unneeded pieces. Select the created oval in the Layers panel and drag it over the head shape until you see a narrow blue stripe as shown in the image below. Drop the ellipse, placing it inside the head layer.

And we’re done! Let’s move to the next animal icon.

place one object inside the other

2. Create a Square Panda

Step 1

Let’s use the bear icon that we’ve already created to make a new element. Duplicate it and let’s change the colors of the linear fill to white on top and grey at the bottom. Then recolor the ears from lilac to a very dark grey. Change the linear fill of the nose to dark grey as well, and adjust the color of the mouth Stroke, switching it to pink.

Finally, adjust the color of the eyes by changing the radial fill to light brown in the center and darker brown at the edges, applying the dark-brown color to the pupil as well.

recolor the bear icon

Step 2

Next we’ll add dark spots around the eyes to make our character look more like a real panda. Use the Ellipse Tool (L) to make a 75 x 95 px shape, filling it with linear fill of dark-grey tints.

Rotate the shape about 45 degrees and place it beneath the eye by dragging the shape down in the Layers panel.

Notice the difference between placing one shape inside the other and placing one shape beneath the other. This time you’ll see a longer blue marker, as in the image below.

add a spot around the eye

Step 3

Duplicate (Command-C > Command-V) the spot and Flip it Horizontal to the other side, using the Transforms function in the control toolbar on top. Move the copy of the spot, making it fit the second eye.

And there we have our panda! Let’s move on.

Flip the spot Horizontal

3. Create a Square Raccoon

Step 1

Let’s duplicate the panda character and turn it into a cute raccoon! First of all, change the color of the head shape to a vertical linear fill from light blue on top to darker blue at the bottom.

Proceed by changing the colors of the eyes to pinkish-red, and let’s replace the mouth. Use the Pen Tool (P) to create a cornered mouth shape with dark-grey Stroke.

change the color of the head shape

Step 2

Now let’s modify the ears. Select the bigger circle of the ear shape and Convert to Curves, using the button in the control toolbar on top. Take the Node Tool (A) and select the top node of the shape. Convert to Sharp from the control panel on top, making the ear pointed. Do the same for the inner part of the ear: Convert to Curves and Convert the top node to Sharp.

modify the ears making them pointed

Step 3

Change the color of the ear, making it fit the head and rotate the ear 45 degrees. Duplicate the ear and Flip Horizontal, placing the copy on the opposite side.

Duplicate the ear and Flip Horizontal

Step 4

Select the spot around the eye with the Fill Tool (G) and adjust the colors of the fill, changing them to lighter and darker tints of blue. Copy (Command-C) the spot, select the second spot and Edit > Paste Style, applying a new appearance.

Finish up with the character by adding a light-grey ellipse beneath the nose area. And that’s it for the raccoon! Let’s proceed to our last icon!

recolor the elements and finish the icon

4. Design a Square Parrot

Step 1

Let’s duplicate our very first icon—the purple bear—and use it to make a funny parrot. Change the color of the head to linear fill from light green on top to darker green at the bottom. Delete the elliptical tummy shape and the bear's mouth as we won’t need them any more.

Change the color of the eyes to orange-brown.

recolor the head to green

Step 2

Let’s turn the bear’s nose into a parrot’s beak! Rotate it 90 degrees and Convert to Curves. Select the bottom node with the Node Tool (A) and Convert to Sharp from the control toolbar on top. 

Change the colors of the linear fill to yellow on top and orange at the bottom.

turn the bears nose into a beak

Step 3

Take the Ellipse Tool (M) and make a narrow shape of 15 x 40 px. Fill it with light-green color and change the Blend Mode to Multiply, making a dark semi-transparent feather.

Hold Option-Shift and drag the feather to the right, making a copy. Press Command-J a couple of times to make two more copies.

make feathers in multiply blend mode

Step 4

Let’s add one final detail to our parrot. Use the Ellipse Tool (M) to make a 40 x 70 px shape in the middle on the forehead, picking the proper color from the lightest spot of the forehead and applying a light-green color to the shape.

Add two smaller ellipses on both sides of the middle shape. Select all three shapes and use the Add Operation from the control panel on top to merge all the ellipses into a single shape.

Duplicate (Command-C > Command-V) the shape and move the bottom copy down a bit by pressing the Down Arrow key a few times. Change the color of the shape to dark green, making a flat shadow.

add elliptical feathers to the forehead

And there we have it! Our parrot icon is ready!

Our parrot icon is ready

Step 5

Here is our set of cute square animals that we’re going to use as the elements of a “match three” game. Let’s move on and make a simple game screen to see how it works together!

set of square flat animal icons is finished

5. Design a Match Three Game Screen

Step 1

Let’s unlock our background shape and change its color to a gentle orange. Use the Rounded Rectangle Tool (M) to make a 415 x 600 px yellow shape with 10% Corner Radius.

unlock our background shape and change its color

Step 2

Duplicate (Command-C > Command-V) the shape and make the copy smaller, changing the fill color to darker yellow. 

Duplicate the new shape and decrease the size of the copy again, switching the color to the same light yellow as we have for the larger rounded rectangle.

Finally, duplicate the largest rounded rectangle and move the bottom copy down a bit by pressing the Down Arrow key a few times. Make the copy somewhat larger and change the Blend Mode to Multiply in the Layers panel, forming a subtle shadow. All in all we have four rounded rectangles for the game panel.

make a game panel from rounded rectangles

Step 3

Use the Ellipse Tool (M) and hold down Shift to make a large green circle in the bottom part of the canvas. Place it between the game screen and the background shape. Add more circles, covering the bottom part of the canvas.

add circles in the bottom of the screen

Step 4

Select a lighter green tint and continue using the Ellipse Tool (M) to make smaller and lighter circles, depicting simple stylized bushes.

continue using the Ellipse Tool to make circles

Step 5

Continue using the same technique and fill the top of the canvas with light-orange circles, depicting stylized clouds.

depict stylized clouds from circles

Step 6

Now we can start placing the animals icons onto the game panel. Here I use a simple trick to make all the elements equal. As you probably noticed, our parrot is slightly smaller than the rest of the characters, because it doesn’t have ears. This can make aligning the shapes a bit complicated, and that’s why I copy the ears from the panda icon and attach them to the parrot. Make the ears completely transparent by setting the Fill and Stroke colors to none, and then group the elements together.

Now we can place the icons in a row and decrease the size, making them fit the game screen. Keeping the icons selected, head to the control toolbar on top and open the Arrange panel. From here, click Space Horizontally and untick the Auto Distribution checkbox, setting the gap value to 0 px.

You can Align the shapes to Bottom as well, using the same Arrange panel.

start arranging the icons

Step 7

Group (Command-G) the row of icons, hold Option-Shift and drag it up, making a copy. Press Command-J multiple times, filling the game screen with icons. Select all the rows, head to the Arrange panel, and click Space Vertically. Uncheck Auto Distribute and set the gap value to 2 px, making narrow gaps between the edges of the icons.

You can adjust the layout by making the icons smaller or bigger and adjusting the distance between the rows, making the icons fit the game panel.

Right after that, we can shuffle the icons randomly, making the whole scene look like a real game screen. Double-click the row of icons to isolate the group and move the icons inside the group horizontally while holding Shift.

add icons and shuffle them

Congratulations! You’ve Got a Level Up!

Great job! Our match three game screen is ready! I hope you’ve enjoyed following this tutorial and discovered some useful tips and tricks while working with basic shapes, gradient fills, and various transforming operations of Affinity Designer. Feel free to apply your knowledge while creating new game and character designs, and don’t forget to share your awesome results!

If you're keen on learning how to create some more game design stuff in Affinity Designer, be sure to check the following tutorials as well:

Match Three Games Screen with Flat Animals in Affinity Designer is ready
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.