Welcome back to another Affinity Designer tutorial, in which we’re going to learn how to quickly create a set of glyph icons using some basic geometric shapes which we will adjust here and there.
That being said, grab a fresh cup of that magic bean juice and let’s get
started!
Oh, and don't forget you can always expand your library by heading over to GraphicRiver where you'll find a great collection of hand-picked icons.
1. How to Set Up a New Project File
Assuming you already have Affinity Designer running in the background, bring it up and let’s create a New Document by going to File > New (or by using the Control-N keyboard shortcut) and adjusting it as follows:
- Type: Web
- Document Units: Pixels
- Create artboard: checked
- Page Width: 64 px
- Page Height: 64 px
- DPI: 72
2. How to Set Up the Artboards
Once we’ve created the document, we need to take a couple of moments and structure our project using a couple of Artboards, one for each icon, in order to maintain a steady workflow.
Step 1
To do this, select the default Artboard from within the Layers panel, and create three copies by either right clicking > Duplicate (or by using the Control-J keyboard shortcut three times), which we will then rename as follows:
- first artboard: back button
- second artboard: front button
- third artboard: home button
- fourth artboard: settings button
Step 2
Position the Artboards next to one another, by first selecting all four of them from within the Layers panel (making sure to start with the bottom one) and then opening up the Arrange panel and using the Align Horizontally > Space Horizontally option, making sure to uncheck Auto Distribute and enter a custom value of 28 px.
Step 3
With the Artboards in place, quickly lock each and every one of them so that you won’t move them around by accident, moving on to the next step once you’re done.
3. How to Create the Reference Grids
The reference grids (or base grids) are a set of precisely delimited reference surfaces, which allow us to build our icons by focusing on size and consistency.
Usually, the size of the grids determines the size of the actual icons, and they should always be the first decision you make once you start a new project, since you’ll always want to start from the smallest possible size and build on that.
Now, in our case, we’re going to be creating the icon pack using just one size, more exactly 64 x 64 px, which is on the smaller side of the scale.
Step 1
Position yourself
onto the first Artboard, and using the Rectangle
Tool (M) create a 64 x 64 px square,
which we will color using #FF6100 and then center align as seen in the
reference image.
Step 2
Add a smaller 56 x 56 px square,
which we will color using #FFFFFF and then position in the center of the larger
one since it will act as our active drawing area, giving us an all-around 4 px padding to work with.
Step 3
Select and group the two squares together using the Control-G keyboard shortcut, making sure to name them using the “reference grid” label, and then use to populate the remaining Artboards using three copies (Control-C > Control-V). Take your time, and once you’re done, move on to the next step.
4. How to Create the Back Button
As soon as we’ve finished setting up the reference grids, we can position ourselves on the first Artboard, where we will start working on the back navigation button.
Step 1
Create the main shape for the background using a 56 x 56 px ellipse which we will color using #FFD44D and then
center align to the underlying Artboard.
Step 2
Start working on the arrow, by adding the main shape for its head using
a 24 x 16 px triangle which we will color
using white (#FFFFFF) and then center align to the larger underlying circle.
Step 3
Adjust the shape that we’ve just created by rotating it to the left by right clicking > Transform > Rotate Left, and then positioning it 14 px from the active drawing area’s left edge.
Step 4
Give the resulting shape an outline using the Stroke method by creating a copy of it (Control-C) which we will paste in front (Control-V) and then adjust by setting its Width to 4 pt and its Join to Round. Once you’re done, select and group the two shapes together using the Control-G keyboard shortcut.
Step 5
Add the main shape for the arrow’s tail using a 12 x 4 px rectangle (#FFFFFF), which we will center align to the
head’s right edge as seen in the reference image.
Step 6
Adjust the Radius of the rectangle’s right corners, by first unchecking the Single Radius option, and then setting both its top right (TR) and bottom right (BR) corners to round, giving them an absolute value of 2 px.
Step 7
Finish off the icon, by giving the resulting shape an outline, making sure to select and group the two together using the Control-G keyboard shortcut.
Step 8
As soon as you’ve finished working on the icon, take a couple of moments and group (Control-G) its different sections, naming them so that you’ll have a clear idea of their contents. Take your time, and once you’re done, move on to the next one.
5. How to Create the Forward Button
Our next item is the forward button, which we will quickly create using an adjusted version of the icon that we’ve just finished working on.
Step 1
Start by creating a copy (Control-C) of the icon that we’ve just grouped, which we will paste in place (Control-V) on the second Artboard.
Step 2
Quickly adjust the icon by horizontally reflecting it (right click and Transform > Flip Horizontal). Once you’re done, move on to the next step, where we will focus on the next icon.
6. How to Create the Home Button
Assuming you’ve already positioned yourself on the third Artboard, let’s start building the little home button.
Step 1
As we did with the first icon, start by creating the background using a 56 x 56 px ellipse, which we will color
using #FFD44D and then center align to the underlying Artboard.
Step 2
Add the main shape for the house’s lower body using a 20 x 12 px rectangle which we will
color using white (#FFFFFF) and then center align to the underlying Artboard,
positioning it at a distance of 16 px
from the active drawing area’s bottom edge.
Step 3
Create the little door cutout using a 12 x 8 px rectangle (highlighted with red), which we will center align to the previous shape’s bottom edge and then remove using the Subtract function.
Step 4
Give the resulting shape a 4 px thick
outline (#FFFFFF), making sure to select and group the two together using the Control-G keyboard shortcut.
Step 5
Create the roof using a 28 x 12
px triangle (#FFFFFF) with a 4 px thick
outline (#FFFFFF), which we will group (Control-G)
and then position on top of the house’s lower body.
Step 6
Finish off the icon by adding the chimney using a 2 x 8 px rectangle (#FFFFFF) with a 4 px thick outline (#FFFFFF), which we will group (Control-G) and then position onto the
lower section's top-right corner as seen in the reference image. Once you’re done,
make sure you select and group (Control-G)
all of the icon’s composing shapes before moving on to the next one.
7. How to Create the Settings Button
We are now down to our fourth and last icon, so make sure you position yourself on the remaining Artboard, and let’s jump straight into it.
Step 1
Create the background using a 56
x 56 px circle, which we will color using #FFD44D and then center align to
the underlying Artboard as seen in the reference image.
Step 2
Add the button’s main body using a 28
x 24 px rounded rectangle (#FFFFFF) with an 8 px corner radius, which we will center align to the larger circle.
Step 3
Give the resulting shape a 4 px
thick outline (#FFFFFF) using the Stroke
method, but don’t group them just yet.
Step 4
Finish off the icon by creating two 16 x 4 px rounded rectangles with a 2 px corner radius, which we will vertically stack 4 px from one another, and cut them out from the center of the button’s main body using the Subtract function. Once you’re done, select and group (Control-G) all of the main body’s composing shapes together, doing the same for the entire icon afterwards.
8. How to Adjust the Color Palette Using Global Colors
At this point we’ve finished working on the icons, but let’s say we aren’t all that happy with the color used for the background.
Unfortunately, Affinity Designer doesn’t have a dedicated tool that enables you to select multiple objects based on the same fill/stroke color, but it does come with Global Colors.
By definition, a global color is a value that can be applied to any shape and then used later to easily change the colors for all of them at a global level, without having to individually select them.
Normally, you would start a project by defining the global colors, and then apply them to your shapes as you go on, but that doesn’t mean you can’t do it after the project is finished, as we’ll see in the following moments.
Step 1
Start by selecting the first icon’s background shape, and then simply right click > Add to Swatches > From Fill as Global Color.
Step 2
Our newly created global color should now be visible within the Swatches panel, which means we can select all of our icons’ background shapes and apply the color to them by simply selecting it from within the panel.
Step 3
Once our global color has been applied to the desired shapes, we can easily use it to change their color by simply double clicking on it within the Swatches panel and then choosing a new value.
Great Job!
As always, I hope you had fun working on the project and most importantly learned something new and useful along the way.
If you have any questions, feel free to post them within the comments section and I’ll do my best to get back to you as soon as I can!
New to Affinity Designer?
If this is your first time using Affinity, you should definitely check out the following tutorials, which should get you up to speed in no time!
Unlimited Downloads.
