Icon Set in Affinity Designer

May 04, 2016

We have something interesting today! From this tutorial you will learn how to create a cute icon set in Affinity Designer, a new design App for Mac which stands between Illustrator and Photoshop.

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!

Sketches

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  64px:

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  ","  hotkey:

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.

Drawing icons

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.

Chat Icon

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  Triangle Tool:

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!

Folder Icon

Start with two rectangles:

Using  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:

Study Icon

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:

Food Icon

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:

Travel 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

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 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:

Adding Colors

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:

Preparing Assets

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.

Turn  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:

Conclusion

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.

written by

Kamil Khadeyev

Kamil Khadeyev is a graphic designer specializing on icon and UI design. You can see his latest works at his Dribbble account. Kamil also has a Blog where he writes about design related themes, such as workflow tips, scripts for Adobe Photoshop and more.