Icon Set in Affinity Designer
Affinity Designer is a graphic design app for Mac created by Serif. It stands between Adobe Illustrator and Adobe Photoshop, with support of vector based tools and raster graphics. While it is a pretty new app and sometimes I miss some functions, it's still quite powerful and can handle day to day design work. Ability to export your work to PSD or SVG makes it easy to work in conjunction with Photoshop or other graphic design tools which is pretty neat.
So, today I want to show you how to create small icon set in Affinity Designer. Let's get started!
Usually, I start with sketching the ideas for icons. It shouldn't be a perfect and precise representation of the final icon. The main goal is to communicate the idea to a client or your team. In most cases you don't need serious skills in hand-drawing to make simple sketches. If you can draw a line, circle, and rectangle — you're ready to go.
Here are sketches of icons we are about to draw:
Let's begin with preparing a document in Affinity Designer.
Setting up a document
One of the nice features that Affinity Designer have is its advanced
Grid and Axis Manager. You can create all sorts of grids using it, but for now, we'll only need
64x64 grid of squares to align our icons.
Open Grid Manager by going to
View → Grid and Axis Manager...
By default it'll be in Basic mode:
Hit on Advanced button, uncheck
Use automatic grid and turn on
Uniform grid. Now you can set Grid Spacing to
64px, Divisions to
4 and Gutter to
Our new grid will look like this:
Pretty neat! Now we can draw our icons inside of each of these squares.
But before we dig into this, let's turn snapping to pixel grid, this will ensure that all icons will look crisp without any blurry pixels. Find Snapping Options on your toolbar and turn on
Force pixel alignment and
Move by whole pixels:
It is also important to keep an eye on pixel preview of your icons. Affinity has a nifty feature called Split View, which can be accessed through
View → View Mode → Split view or just
Now you can drag a split to see how your shapes will look in pixels:
Always check back to pixel preview to make sure that all your pixels are aligned properly.
Okay, it's time to draw some shapes.
To focus solely on shapes, I draw monochromatic versions of the icons first. I tend to add colors when all icons are ready. As main color I will use
#FCC6A0 and background
#1F2129 , but you can use any colors you find comfortable to work with.
While Affinity Designer has a special tool to draw chat bubbles called Callout Rounded Rectangle Tool, we'll draw it by hand using
Rectangle Tool [M] and
If you want to make your shapes editable, you have to convert them to curves first. I use hotkey
cmd+Enter for this, but there's also a special button on the toolbar:
Here's how you can draw a chat bubble:
Next, we'll apply some rounded corners using
Corner Tool [C] and our first bubble is ready:
To "cut-out" one bubble from another I use outer stroke with the same color as the background:
If I need to change width of gutter or appearance of some shapes, it'll be easier to do with a stroke, than with real cutted-out shapes:
After we finish with the icons, I will expand this stroke and cut it out from the main shapes.
Let's save stroke settings as a style in
View → Studio → Styles for further use
Now let's move on to the next icon!
Start with two rectangles:
Node Tool [A] we can easily create top part of the folder:
Now, we can round outer corners using
Corner Tool [C]:
And to finish the icon let's add a circle in the middle of the folder:
Top part of the hat can be made of tilted rectangle with some corner radius applied:
Bottom part of the hat is created using simple rectangle and ellipse:
Finally, add brush-tail and our hat is ready. I also scaled entire icon a bit to match it with other icons:
Let's start with a cup. It can be simplified to just three rectangles:
Taper bottom rectangle and round some corners:
To finish our cup, we'll add drinking straw, which is just tilted rounded rectangle:
Now let's get to the hamburger part. It can be built from a circle and two rectangles:
Round some corners and shrink circle a bit and here's our hamburger:
Now let's put them all together to finish the icon:
Let's start with a plane. There are lots of ways of drawing it, but for the sake of presentation, I'll show you how to do it using Stroke Profile feature.
Stroke Profile gives you ability to dynamically setup width of your stroke. You can make pretty fun results with it:
You can hold Alt-key to adjust extreme points separately.
We'll use it to create main body shape of the plane. Start with drawing a straight line using
Pen Tool [P]:
And edit its stroke profile to form a plane body:
Wings and tail can be made out of basic rectangles:
Rotate whole thing by 45° and our plane is ready:
Let's make a globe! Start with a circle:
Then duplicate it and shrink virtically:
Finally, combine globe with a plane to finish the icon:
Lamp is a bit complex to draw, but bear with me. We will start with a basics — rectangles:
Combine all shapes using
Layer → Geometry → Add or just hit
Union button on toolbar:
Time to get creative! Form a shape that look like thick glass of wine:
Final shape should look something like this:
Now let's round some corners:
Add some details subtracting rectangles from the main shape:
And miror whole shape to form a body of the lamp:
Top part of the lamp is just trapeze drawn using
Trapezoid Tool with rounded corners:
Add brush-tail from our hat icon to create a lamp switch and our icon is ready:
Usually, I start with a palette. I try to select as many various colors as I can. I might not use all of them at the end, and some of them could be changed in the process but having something to start with is always a good idea. Here's palette I've made for the icons:
To make our life easier we'll use Affinity's Global Colors feature; it will help us manage our colors if we decide to alter them.
First let's create Document Palette in Swatches panel, which can be found under
View → Studio → Swatches:
Now let's add our colors as Global Color swatches, you can do this by clicking on palette icon, like this:
Notice that our colors now have a little triangle at the bottom left corner. It means that this color is a global one. If we apply it to different shapes and then we decide to alter it, this will affect all layers with this color. Pretty useful feature.
Now just select each shape of our icons and apply corresponding global color:
If you ever want to change colors in the whole set, you can just alter its Global Color swatch:
I think, it's a good time to get rid of all stroke-placeholders that we've made. You can expand stroke to fill using
Layer → Expand Stroke menu.
Now you can use boolean operations (Subtract) to cut everything out. It's pretty mechanical work, but it takes some patience. Usually, I make background color to something bright to see what I need to cut out better:
I also like to keep my layers clean and organized, so I grouped each icon to its own folder:
Let's move to slicing part.
Affinity Designer has special mode for dealing with assets, called
Export Persona, you can switch to it, by clicking on the third button on the top left corner:
Your toolbar should switch to a new look:
Now create slice for each group in Layers panel:
Now we need to resize each slice to 64x64, grid and Transform panel (
View → Studio → Transform) will help you make it more precise:
The more slices you resize, the easier it will be to align the rest of them:
Now we can select our slices in Slices Panel and configure export options:
I used pretty much default settings for SVG output with unchecked
Set view Box property.
Okay, let's export some icons! First of all, you'll have to turn off your background layer, since we need transparent background for all of our icons.
Now you can click on
Export Selected button to save our icons as SVG.
Continuous checkbox on and Affinity will auto update all assets each time you modify your icons.
And icons are ready to use on the web:
Affinity itself isn't hard to grasp, but in case you want to learn some basics, Serif's website has a comprehensive section with video tutorials.
There's also active community over the forum, where you can ask questions and request new features directly from the developers. They also have features roadmap, so you can see what's coming next to Affinity Designer.
There you have it! Hope you enjoyed this overview of icon design workflow in Affinity Designer.