How to Design Icons in Affinity Designer

Edited 1 month ago by ExtremeHow Editorial Team

Affinity DesignerIcon DesignGraphic DesignMacTechniquesSoftwareUI/UXCreativeProfessionalDesign

Creating icons is a separate art that combines creativity with technical skills. Icons serve as a visual language for apps, websites, and digital products. They are used to communicate concepts, actions, and objects to users. Designing icons in Affinity Designer is a fun process, and with a few tips and techniques, you can create beautiful and effective icons. Let's dive into the process of designing icons using Affinity Designer.

Understanding the basics of icon design

Before you start designing, it's important to understand what makes a good icon. Icons should be simple but effective, conveying a clear message or function without the need for words. Here are some characteristics of effective icons:

• Simplicity: Icons should be easily recognizable at a glance. Avoid unnecessary details that can clutter the icon.
• Scalability: The icon should look good at different sizes. Design your icons in vector format to ensure they can scale without losing quality.
• Consistency: Maintain a consistent style across a set of icons. This includes using a similar color palette, stroke weight, and design style.
• Clarity: The message or purpose of the icon should be immediately obvious. Avoid ambiguity by selecting universally recognized symbols.

Setting up Affinity Designer

Affinity Designer is a vector graphics editor widely used for UI/UX design, and it offers a versatile toolset for creating icons. Here's how you can set up your workspace before you start designing:

1. Open Affinity Designer: Launch Affinity Designer on your computer. If you don't have it installed on your computer, you can download and install it from the official website.
2. Create a new document: Click File > New. Enter the dimensions for your canvas. Common sizes for icon designs include 64x64 pixels, 128x128 pixels, or as large as you need. Always make sure you set the document units to pixels.
3. Set up grids and guides: Use a grid to maintain alignment and consistency in your icons. You can enable the grid by clicking View > Show Grid. Customize your grid settings in View > Grid & Axis Manager. Set an appropriate spacing for your grid, such as 8 px or 10 px.
4. Layers panel: Organize your artwork by renaming layers and grouping related objects. Keeping elements separate gives you flexibility and control when designing.

Drawing basic shapes

Icons are often made up of simple geometric shapes. In Affinity Designer, you can use various tools to create these basic shapes. Let's explore how you can use these tools to create basic icon shapes:

• Rectangle tool: Select the Rectangle tool from the toolbar or press M. Click and drag on the canvas to create a rectangle. Hold down Shift key to constrain the proportions and create a perfect square.
• Ellipse tool: Select the Ellipse tool or press U. Click and drag to create an ellipse. For a perfect circle, hold down Shift key while dragging.
• Polygon tool: This tool allows you to create a polygon. Select it from the toolbar, click and drag so that a polygon shape is formed. If necessary, modify the number of sides in the context toolbar.
• Pen Tool: For custom shapes, use the Pen Tool. Click to create anchor points and create paths. Curved lines can be achieved by clicking and dragging.

Using boolean operations

Boolean operations are essential for combining and modifying shapes. Affinity Designer provides several Boolean operations, which are available in the context toolbar when multiple shapes are selected:

• Combine: Merges the selected shapes into a single shape.
• Subtract: Subtracts the shape above from the shape below it.
• Intersect: Keeps only the overlapping area of the selected shapes.
• Split: Divides shapes into separate parts based on their overlapping areas.

These operations are useful for creating complex icon shapes from simple geometric shapes. To apply a Boolean operation, simply select the shapes and click the desired operation in the context toolbar.

Working with colours and strokes

Color and stroke are important design elements that enhance the aesthetic appeal of icons. Here's how to use them effectively in Affinity Designer:

• Fill: To apply a solid color fill, select the shape, then click the color swatch in the toolbar. Choose the color you want from the color picker. Use the fill tool to apply a gradient if necessary.
• Stroke: To add a stroke, select the shape and click the Stroke swatch in the toolbar. Adjust the stroke width in the Stroke panel. Consider the final size of the icon when determining the stroke weight.
• Color harmony: Use the color palette and harmony rules to ensure that your icons have a consistent color scheme. The Swatches panel is useful for saving color swatches.

Creating a consistent icon style

Icons in a set should look like they belong together, often referred to as a consistent icon style. Here's how to ensure consistency in your icons:

• Use consistent motifs: Use the same style throughout the icon set, such as outline or filled.
• Equal Stroke Weight: Make sure all icons have the same stroke weight.
• Uniform Grid: All icons should follow the same grid structure to align elements coherently.
• Keep dimensions consistent: Where applicable, icons should be the same size and shape.

Exporting icons

Once your icons are designed, the final step is to export them. This process ensures they are in the correct format and resolution for their intended use:

1. Select icons: If you want to export multiple icons at once, click the icons or select them using the selection tool.
2. Switch to Export Persona: Switch from Draw Persona to Export Persona by clicking the icon in the top left corner.
3. Add a slice: Click the Slice tool (represented by the knife icon), then select your icon. You'll see a slice automatically created in the Slices panel.
4. Set export options: Choose an export format such as PNG, SVG, or JPEG depending on the requirements. Set the appropriate resolution. For example, 1x, 2x, and 3x for standard, retina, and high-resolution displays, respectively.
5. Export icons: Click the Export button and choose the destination folder for your exported icon files.

Practical example: designing a simple home icon

Let's create a simple home icon to illustrate the process:

1. Create a square base: Use the Rectangle Tool to create a square. Hold down Shift to keep the proportions equal. This will be the base of our house.
2. Add the roof: Select the Polygon Tool, set it to three sides, and create a triangle. Place it on top of the square to create the roof.
3. Combine the shapes: Use the Align tool to center the triangle on the square. Select both shapes and use a Boolean Add operation to merge them into a single form.
4. Apply color: Fill the shape with a color of your choice, such as white or black for simplicity.
5. Refine the details: Add a small rectangle in the middle to represent the door, and small squares or circles for windows.
6. Ensure consistency: Check stroke weights and colors to make sure they match your overall style guide.
7. Export the icon: Follow the export steps to save your home icon in the desired format.

Conclusion

Learning how to design icons in Affinity Designer is a useful skill to have, whether you're a designer working on a project or an enthusiast wanting to explore digital art. Mastering basic shapes, Boolean operations, color consistency, and following design principles can help you create beautiful and functional icons. Always keep the goal in mind for each icon - simplicity, recognizability, and functionality. With practice, your icon design skills will improve, and you'll find yourself creating attractive icons that serve their purpose effectively.

  Share This Article

If you find anything wrong with the article content, you can request an update