Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Affinity Designer
Design

How to Create an Icon in Affinity Designer

by
Difficulty:BeginnerLength:LongLanguages:
Final product image
What You'll Be Creating

In today’s tutorial, we’re going to take an in-depth look at the process of creating an icon in Affinity Designer. You'll see how you can take some basic geometric shapes and turn them into a usable, functional product.

So, if you've always wanted to create an icon from start to finish but never knew exactly how, launch the software and let’s jump straight into it!

Oh, and don't forget you can always expand your vector library by heading over to Envato Elements, where you'll find a huge selection of beautifully crafted icon packs just waiting to be picked up.

1. How to Choose the Right Size

With every new creative project that you take on, there will always be a couple of decisions that you need to figure out. When it comes to icon design, one big question that you need to answer really early in the process is in regards to your base size, which will be the smallest size variation taken by your icons.

Luckily for us, these size variations have already been standardized, which means that all we have to do is figure out if we need to start really small, or small enough to correctly address the space that it will end up occupying.

The reasoning behind this approach has to do with the process of implementing and maintaining a pixel-perfect workflow, where each and every shape is perfectly snapped to the underlying pixel grid in order to produce a final result that is as crisp as possible.

So that means that you’ll always want to start from the smallest addressable size possible, and later on build the required variations by scaling it up using value multipliers, which will prevent your shapes from breaking down during the resizing process.

If you want to learn more, I strongly recommend you go over my How to Scale Icons Correctly in Adobe Illustrator tutorial, which will teach you all you need to know about the role that numbers play when it comes to icon scaling.

Now, in our case, we’re going to create a simple email icon that is going to be based on a 64 x 64 px base grid. While the size isn’t the smallest, it’s definitely a good starting point to which you can easily add larger size variations later on.

2. How to Set Up a New Project File

Now that we’ve decided upon the based grid, we can move on and create a New Document by heading over to File > New (or by using the Control-N keyboard shortcut) and adjusting it as follows:

  • Type: Web
  • Document Units: Pixels
  • Create artboard: checked
  • Transparent Background: checked
  • Page Width: 64 px
  • Page Height: 64 px
  • DPI: 72
setting up a new document

Quick tip: once you’ve created the actual document, it would be a good idea to lock its Artboard by opening up the Layers panel and then using the little Lock/Unlock toggle, so that you won’t accidentally end up moving it later on.

example of locking the artboard

3. How to Set Up the Layers

Once we’ve created our document, we need to take a few moments and structure the project using a couple of layers, so that we can implement and maintain a clear and steady workflow by separating our reference grid from the actual icon.

Step 1

Open up the Layers panel, and then create two layers using the Add Layer button, naming them as follows:

  • bottom layer: reference grid
  • top layer: icon
setting up the layers

Step 2

Once you’re done, make sure you lock the reference grid layer by selecting it on the Layers panel and then using the little toggle as we did with the Artboard.

locking the reference grid layer

4. How to Create the Reference Grid

As soon as we’ve finished layering our document, we can focus on building the reference grid, which will help us define the actual size of the final icon while allowing us to add a small protective padding that will prevent it from being clipped when used by someone else that doesn’t have the same level of experience within the field.

Step 1

Select the bottom layer, and then create the main reference surface (the base size) using a 64 x 64 px square, which we will color using #F15A24 and then position in the center of the underlying Artboard using the Alignment panel’s Align Center and Align Middle options, making sure the alignment is set to Spread.

creating the main reference surface

Step 2

Add the active drawing area using a smaller 64 x 64 px square (#FFFFFF), which we will position in the center of the Artboard, which will give us an all-around 4 px protective padding to work with. 

As the name suggests, this will be your main working area, where all your shapes will end up being displayed. As a general rule, your icon should always occupy the entire Width and/or Height of the active drawing area, which is a process that can vary in difficulty depending on the subject or theme that is being depicted.

adding the active drawing area

Step 3

Once you have the shapes in place, select and group both of them together using the Control-G keyboard shortcut, making sure to individually label them and the group by double clicking on them within the Layers panel.

example of naming the shapes

5. How to Create the Email Icon

As soon as we’ve finished setting up our project file, we can begin working on the actual icon, which we will gradually create one section at a time.

Step 1

Start by creating the envelope’s main body using a 56 x 32 px rectangle, which we will color using #FFCD50 and then center align to the larger Artboard, positioning it at a distance of 2 px from the active drawing area’s bottom edge.

creating the main shape for the body of the envelope

Quick tip: when working on a new icon, you usually start out by defining your basic composing shapes and then tinkering around with their width and height values, and coordinating the positioning until you find the perfect form. In our case, I’ve already done the math and figured out the different sizing and gap values, which allows me to give you precise instructions to overcome all of these little problems.

Step 2

Adjust the shape that we’ve just created by first unchecking the Single Radius option, and then setting both of its bottom corners (BL & BR) to Rounded, making sure to give them absolute values of 4 px.

adjusting the shape of the larger body

Step 3

Grab the Triangle Tool and create the top flap using a 56 px x 20 px triangle, which we will color using #FFA852 and then position on top of the larger body’s top edge.

As I pointed out a few moments ago, when working on a new icon, you need to make sure that the final design fills in the entire Width and/or Height of the reference grid. In our case, our main building blocks manage to occupy the entire Width of the active drawing area, leaving a small 2 px gap between it and the latter’s top and bottom edges, which allow us to perfectly align it to the vertical axis of the grid.

creating the top flap

Step 4

Add the next section using a copy (Control-C > Control-V) of the shape that we’ve just created, which we will adjust by first changing its color to #D87E35 and then vertically flipping it (right click > Transform > Flip Vertical), making sure to center align the resulting shape to the larger body’s top edge.

adding the throat section

Step 5

Since at this point we’re pretty much done working on the envelope, we can select and group all of its composing shapes together using the Control-G keyboard shortcut, naming both them and the group by simply double-clicking on them from within the Layers panel in order to easily target them later on if you need to.

grouping and naming the composing shapes of the envelope

Step 6

Start working on the letter by creating a 48 x 32 px rectangle, which we will color using #FFF3DE and then center align to the underlying Artboard, positioning it at a distance of 8 px from the flap’s tip.

creating the main shape for the letter

Step 7

Adjust the shape that we’ve just created by first unchecking the Single radius option, and then checking the Absolute sizes one, making sure to set its top-left corner (TL) to Round, giving it a radius of 4 px.

adjusting the left corner of the envelope

Step 8

Create the main shape for the folded corner using a 12 x 12 px square, which we will color using #F4D4AE and then align to the larger body’s top-right corner.

creating the main shape for the folded corner

Step 9

Next, we’re going to convert the letter’s main body to curves using the Convert to Curves operation so that we can adjust its path, and then add two new nodes to its top and right edges by simply clicking on them with the Node Tool (A), using the smaller square as our main guide.

adding two new nodes to the body of the letter

Step 10

Continue adjusting the current shape by selecting its top-right node using the Node Tool (A) and then immediately removing it by pressing Delete.

adjusting the top-right corner of the letter

Step 11

Select the smaller square, and turn it into a folded corner by first converting it to curves and then removing its top-right corner as we did with the letter’s larger body. Once you’re done, select and group the two composing shapes together using the Control-G keyboard shortcut.

adjusting the shape of the folded corner

Step 12

Set the Radius of the resulting shape’s bottom-left corner to 4 px, making sure to select and group the two composing shapes together using the Control-G keyboard shortcut.

adjusting the bottom-left node of the folded corner

Step 13

Start adding the dummy text lines by creating the narrower one using a 12 x 2 px rounded rectangle with a 1 px corner radius, which we will position at a distance of 8 px from the letter’s left edge and 10 px from its top one.

creating the narrower text line

Step 14

Add the remaining lines of text using three 32 x 2 px rounded rectangles (#5E6572) with a 1 px corner radius, which we will vertically stack 4 px from the narrower one, making sure to select and group all of them together afterwards using the Control-G keyboard shortcut.

adding the remaining text lines

Step 15

Create the main shape for the subtle shadow using a copy (Control-C) of the triangle from the envelope, which we will paste (Control-V) on top of the text lines as seen in the reference image.

creating the main shape for the subtle shadow

Step 16

Adjust the copy that we’ve just created by first changing its color to #5E6572 and then flipping its Fill with its Stroke using the Shift-X keyboard shortcut, making sure to set its Width to 4 px afterwards.

flipping the fill of the shadow with its stroke

Step 17

Open up the resulting path by adding a new node to the center of its top edge using the Node Tool (A), and then selecting it and using the Break Curve action.

opening up the path of the shadow

Step 18

Remove the extra nodes created during the process by individually selecting them using the Node Tool (A) and then pressing Delete. Take your time, and once you’re done, move on to the next step.

removing the extra nodes from the path of the shadow

Step 19

Lower the resulting path’s Opacity to 20%, and then open up the Layers panel and mask it using a copy (Control-C) of the letter’s main body which we will paste on top (Control-V), by simply dragging the shadow onto the larger shape. Once you’re done, make sure you remove the clipping mask’s fill, selecting and grouping (Control-G) all of the letter’s composing shapes before moving on to the next step.

masking the shadow

Step 20

Next, we need to create the clipping mask that we’re going to use for the letter, using a copy (Control-C) of the top section, which we will paste in front (Control-V) and then adjust by adding two new nodes to its top edge, which we will then reposition as seen in the reference image.

creating the clipping mask for the letter section

Step 21

Finish off the icon by removing the resulting shape’s fill color, and then using it to mask the letter’s composing shapes by simply dragging them over it from within the Layers panel. Once you’re done, select and group all of the icon’s composing sections together using the Control-G keyboard shortcut.

masking the entire letter

6. How to Maintain the Icon’s Protective Padding

Now that we’ve finished working on our little icon, we need to take a few more steps in order to ensure that it won’t get clipped by accident when being used later on, once the product gets shipped to the client.

This is something that I really encourage you to do, since sometimes the user doesn’t have any real experience working with the tools that we use on a daily basis. Just imagine a scenario where the client might try to export the final design after doing some color adjustments, but the shapes get clipped due to bad alignment. I’ve had my share of experiences where my otherwise pixel-perfect icons ended up distorted or clipped because the person on the other end didn’t have the Snap to Pixel option on, and decided to make a few “small” changes.

Step 1

Start by creating a 64 x 64 px square (highlighted with green), which we will stack on top of the Layers panel, making sure to center align it to the underlying Artboard.

creating the main shape for the larger clipping mask

Step 2

Mask the entire icon by simply dragging the larger group on top of the shape that we’ve just created, which will make it act as a clipping mask.

masking the entire icon

Step 3

Since we want the mask to remain fully transparent, we’ll have to select it from within the Layers panel and then open up the Color panel and remove its green fill.

finishing off the icon

7. How to Add Size Variations

So we've seen how easy it is to create a good-looking icon using nothing more than some basic geometric shapes. Now let’s take a look at the process of creating size variations.

As I pointed out in my scaling tutorial, icons usually come in different size variations that are almost always created by doubling the Width and Height values of the base size.

Since Affinity doesn’t come with a dedicated scaling/resizing tool, we’ll have to do things the old-fashioned way, but don’t worry since the end result is all that matters.

Step 1

Start by creating a New Document (File > New or Control-N) which will be double the size of the one that we currently have, so 128 x 128 px.

setting up the larger document

Step 2

Create a copy (Control-C) of the icon that we’ve just finished working on, which we will paste onto the larger document, making sure to center align it to its underlying Artboard.

pasting the icon onto the larger artboard

Step 3

All we have to do now is open up the Transform panel and adjust the Width and Height values of the copy by entering the desired values (128 x 128 px), or by using a 200% increment, which should give us our first size variation.

Using the same process, you can generate larger and larger icons depending on your overall needs.

creating the larger size variation using the transform panel

8. How to Export the Icon

At this point, we've seen how to create our icon, and we’ve talked about the process of creating size variations, which leaves us with the final step of exporting our little asset.

Step 1

Start by opening up the Layers panel, and then hiding the icon’s reference grid by unchecking the little blue box found on its right side.

example of hiding the reference grid

Step 2

Once we’ve hidden the reference grid, all we have to do is go to File > Export (or use the Control-Alt-Shift-S keyboard shortcut) which will bring up the following window prompt. Here, you’ll want to make sure that the Preset is set to PNG and the exporting Area to Artboard1 (which is the default label used for the current Artboard), and then simply hit Export once you’re done.

example of exporting the icon

Great Work!

As always, I really hope you had fun working on the project and most importantly managed to learn some new tricks along the way.

That being said, if you have any questions, feel free to post them within the comments section, and I’ll get back to you as soon as I can!

finished project preview

Expand Your Icon-Building Skills!

Want to become a professional icon designer but are just starting to grasp the complex notions involved in this line of work? Well if that's the case, today's your lucky day since we've hand-picked a set of in-depth tutorials that will help you become a master of your craft in no time!

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.