Serif Designer – Web Icon Tutorial
Web Icon Tutorial
1. Download and Install the Software
First, you’ll need the software. Serif’s programs are fairly lightweight and most of their downloads weigh in under 500 megs. Install it wherever you would like.
2. Open the Program
Simple!
3. Select File and then new.
This will open up the New Document Dialog.
4. Change Type to Web
This will change Page Preset and Dimension measurements to the standardized units of measure and size for whatever type of document you create. Example: if you select print measurements will be in mm and standard print page sizes will be available to change.
These can be changed regardless of whatever Type you select further down in the New Document Dialog.
5. Check Transparent Background
This will default the background to a transparent layer so your icon blends in better wherever you place it on a web page.
6. Change Dimensions to 200×200 px
This is a decent size to start working with for this icon.
7. Hit OK
This creates your new document.
8. Select the Rounded Rectangle Tool
This tool allows you to create a rounded rectangle. With this we’ll create the first shape of our web icon. In this tutorial we’re going for an email icon. So, we’ll need to create a fairly elongated rectangle.
9. Hit Fill
This is located in the upper left next to the selected objects name.
10. Hit Swatches
This opens the Swatches sub-menu.
11. Change Grays to Colors
This menu lets you select palettes to use as swatches for your project. Serif supports a wide variety of color libraries out of the box.
For this tutorial we’ll stick to the standard web palette.
12. Select No Color for Fill
This will make the fill color transparent. For this tutorial we’re going to be making an outline style icon.
13. Select Stroke
This is located just to the right of Fill.
14. Select Swatches and then Select a Color
I like green. But, you can use whatever you like. If you’re going to use this for your website, take a look at a color wheel to select a complementary color for the other colors on your website. It might work really well!
15. Change Stroke Weight to 3 pt
The stroke weight is just to the right of the stroke color selection. I’m going with 3 pts for this tutorial, select whatever looks good to you.
16. Adjust Corner Radius to 15%
This option is near the middle of the screen above the main canvas. This adjusts the corner radius of the rectangle. Higher radius means sharper corners. I’m going to stick with 10% for this tutorial but adjust for your own taste.
17. Select the Pen Tool
The pen tool allows you to select two points on the canvas and then create a line between them. While there’s a lot of ways to create lines in Affinity Designer, this is my preferred way. Once you get the hang of it it’s pretty fast to make straight lines.
18. Click the Top Left of the Rectangle
This places the first point of the line using the pen tool.
19. Click again somewhere towards the bottom middle of the rectangle
This creates a line between the two points.
20. Copy and Paste the Line
This creates a copy of your line. We’ll use this to mirror it and create the flap of the envelope.
21. Hit the Flip Horizontal Button
This flips the copied line.
22. Move the copied line to the Right Using the Move Tool
Use the move tool to move the copied line to the right side of the envelope. We’ve created the flap!
23. Hold Shift and Select the left Line
Holding shift lets you select multiple objects at the same time. We’re doing this to group the two lines together for further manipulation.
24. Right Click on the Selection and hit Group
This groups the objects together. They can now be manipulated (resized, deleted, recolored, etc) as one selectable object.
25. Use the Resize handles to move and resize the flap
Adjust the flap to your liking.
26. Drag Select all objects and group them
27. Right Click on the Envelope, hover over Alignment and then select Align Center
This aligns the object to the center of the canvas.
28. Do the same only this time select Align Middle
This aligns the object to the middle of the canvas.
29. Hit File and then Export
This brings up the Export menu.
30. Select PNG
The PNG format allows images to have transparent backgrounds.
31. Hit Export and Export the Icon
This saves the icon as a PNG file, letting you use it however you see fit!
That’s it! Pretty easy right? If you’re familiar with Adobe products I’m sure you felt right at home. Here’s my icon:
