
Create a Sliced Head Manipulation in Affinity Photo
April 7, 2020
Learn Video Editing with DaVinci Resolve
April 23, 2020Create a Car Icon in Affinity Designer

Today we’re going to create a car icon in Affinity Designer using basic shapes! Icons are images or symbols that are used to represent files or programs on an operating system. And, icons help users identify these files and programs.
Here is a site that shows the Average Size for App Icons on Apple’s devices.
Here is a site that shows the Average Size for App Icons on Android devices.
Step 1
First, go to File > New. Then, set up a document with the following properties.

Step 2
Second, make sure your snapping is turned on. Next, grab the Rectangle tool. Then, draw a rectangle that touches the left and right edge of the artboard.

Step 3
Third, set the Fill color of the rectangle to the following color (or you can use a color of your choosing).

Step 4
With the rectangle selected, go to the Context toolbar. Select Corner and click Rounded. Set the roundness to 10%.

Step 5
Grab the Rectangle tool again and draw a rectangle over top the first rectangle.

Step 6
With the second rectangle selected, go to the Context toolbar and select Convert to Curves.

Step 7
Now, grab the Node tool (press A on the keyboard for a shortcut). Select the top left node of the second rectangle. Hold Shift and drag this node to the right with your mouse.

Step 8
Select the top right node. Then, hold Shift and drag it to the left.

Step 9
Next, select the second rectangle. Press CTRL + J to duplicate it (or right-click on it and select Duplicate).
Step 10
The next step for creating this car icon in Affinity Designer is to change the Fill color of this shape to the following color. Then make it smaller. Press CTRL + Shift and drag any of the corners inward to decrease its size.


Step 11
Now, grab the Ellipse tool. Hold CTRL + Shift and draw an ellipse on the left par of the original rectangle. Give it the following color.

Step 12
With the ellipse selected, press CTRL + J to duplicate the ellipse. Then hold Shift to drag the duplicated ellipse to the right side of the original ellipse.

Step 13
Grab the Rectangle tool. Draw a rectangle beneath the original rectangle on the left side. Set the rectangle to the following Fill color.

Step 14
After that, go to the Context toolbar. Go to the Corner section and select Rounded.
Step 15
Deselect the Single Radius. Set the TL and TR corners to 10%. Leave the BL and BR corners at 25%.

Step 16
With the rounded rectangle selected, hold ALT + Shift (or CTRL + Shift) and drag a copy of the rounded rectangle over to the right side.

Step 17
Grab the Rounded Rectangle tool. Draw a rectangle between the two ellipses. Give it the following Fill color.

Step 18
Now, grab the Rectangle tool. Draw a rectangle on top of the rounded rectangle. Give it a black Fill color.

Step 19
With the smaller rectangle selected, press ALT + Shift (or CTRL + Shift) and drag a copy of the rectangle slightly down. Then press CTRL + J to make a duplicate of the second rectangle (the third rectangle should appear equidistance from the second rectangle).

Step 20
Go to the Layers Panel. Select the three rectangles. Drag them inside of the rounded rectangle.

Step 21
Now, grab the Rectangle tool. Draw a rectangle on the light blue curve shape. Set it to the following Fill color.

Step 22
With the rectangle selected, go to the Context toolbar. Set the Corner to Rounded. Uncheck the Single Radius. Set the TL and TR corners to 15%. Set the BL and BR to 0%.

Step 23
Make sure the rectangle is still selected. Press ALT + Shift (or CTRL + Shift) and drag a copy of that rectangle to the left side.

Step 24
Next, grab the Ellipse tool. Draw an ellipse in the center of the brownish rectangle on the right side. Get rid of the Fill color and give it a Stroke color of black.

Step 25
In the Stroke Panel, set the stroke Width to 1pt.

Step 26
Now, let’s move to the next step in the car icon in Affinity Designer tutorial. Go to the Layers Panel. Next, drag the ellipse inside of the rectangle. Then (on your illustration), hold Shift and pull the ellipse down so that only half of it is showing.

Step 27
Grab the Rectangle tool. Draw a vertical rectangle on the light blue curve shape at the top in the center of it.

Step 28
With the Rectangle tool still active, draw a horizontal rectangle below the vertical rectangle you just created.
Step 29
Select the horizontal rectangle. Go to the Context toolbar. Go to the Corner section and select Rounded. Leave the corner percentage at 25%.

Step 30
Now, grab the Rectangle tool. Draw a rectangle on the left side of the upper half of the car. Rotate it -30 degrees (as seen in the Transform Panel).

Step 31
With the rectangle still selected, go to the Toolbar and select Move to Back.

Step 32
Grab the Rectangle tool and draw a rectangle on top of the previous rectangle.

Step 33
With the new rectangle selected, go to the Context toolbar. Set the Corner to Rounded.

Step 34
Select both rectangles. Press CTRL + G to group them together (or right click on it and select Group). Set the Fill color of the rectangles to the following colors.

Step 35
With the mirror (the rectangle group) selected, press CTRL + J to duplicate it (or right click on it and select Duplicate).
Step 36
Go to the Rotation Panel in the Toolbar and select Flip Horizontal.

Step 37
With the duplicated group selected, hold Shift and drag the duplicated mirror to the right side of the car.
Step 38
Press CTRL + A to select all the car elements. Then press CTRL + G to group all the car elements together.

Step 39
Grab the Rectangle tool. Draw a rectangle that covers the entire artboard.

Step 40
With the rectangle selected, go up to the Toolbar and select Move to Back so that the rectangle is behind the car.

Step 41
Finally, give the rectangle a Fill color of your choosing.

Congratulations! You now know how to create a car icon in Affinity Designer. For more icon tutorials in Affinity Designer, check out this one on how to create an envelope icon.