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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
And there we have it! 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!
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.
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.
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.
Step 4
Select a lighter green tint and continue
using the Ellipse Tool (M) to make
smaller and lighter circles, depicting simple stylized bushes.
Step 5
Continue using the same technique and fill
the top of the canvas with light-orange circles, depicting stylized clouds.
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.
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.
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:
How to Create a Scrolling Background in Affinity Designer
How to Create a Game Character Sprite Sheet in Affinity Designer