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.
First, go to File > New. Then, set up a document with the following properties.
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.
Third, set the Fill color of the rectangle to the following color (or you can use a color of your choosing).
With the rectangle selected, go to the Context toolbar. Select Corner and click Rounded. Set the roundness to 10%.
Grab the Rectangle tool again and draw a rectangle over top the first rectangle.
With the second rectangle selected, go to the Context toolbar and select Convert to Curves.
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.
Select the top right node. Then, hold Shift and drag it to the left.
Next, select the second rectangle. Press CTRL + J to duplicate it (or right-click on it and select Duplicate).
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.
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.
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.
Grab the Rectangle tool. Draw a rectangle beneath the original rectangle on the left side. Set the rectangle to the following Fill color.
After that, go to the Context toolbar. Go to the Corner section and select Rounded.
Deselect the Single Radius. Set the TL and TR corners to 10%. Leave the BL and BR corners at 25%.
With the rounded rectangle selected, hold ALT + Shift (or CTRL + Shift) and drag a copy of the rounded rectangle over to the right side.
Grab the Rounded Rectangle tool. Draw a rectangle between the two ellipses. Give it the following Fill color.
Now, grab the Rectangle tool. Draw a rectangle on top of the rounded rectangle. Give it a black Fill color.
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).
Go to the Layers Panel. Select the three rectangles. Drag them inside of the rounded rectangle.
Now, grab the Rectangle tool. Draw a rectangle on the light blue curve shape. Set it to the following Fill color.
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%.
Make sure the rectangle is still selected. Press ALT + Shift (or CTRL + Shift) and drag a copy of that rectangle to the left side.
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.
In the Stroke Panel, set the stroke Width to 1pt.
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.
Grab the Rectangle tool. Draw a vertical rectangle on the light blue curve shape at the top in the center of it.
With the Rectangle tool still active, draw a horizontal rectangle below the vertical rectangle you just created.
Select the horizontal rectangle. Go to the Context toolbar. Go to the Corner section and select Rounded. Leave the corner percentage at 25%.
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).
With the rectangle still selected, go to the Toolbar and select Move to Back.
Grab the Rectangle tool and draw a rectangle on top of the previous rectangle.
With the new rectangle selected, go to the Context toolbar. Set the Corner to Rounded.
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.
With the mirror (the rectangle group) selected, press CTRL + J to duplicate it (or right click on it and select Duplicate).
Go to the Rotation Panel in the Toolbar and select Flip Horizontal.
With the duplicated group selected, hold Shift and drag the duplicated mirror to the right side of the car.
Press CTRL + A to select all the car elements. Then press CTRL + G to group all the car elements together.
Grab the Rectangle tool. Draw a rectangle that covers the entire artboard.
With the rectangle selected, go up to the Toolbar and select Move to Back so that the rectangle is behind the car.
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.
Automated page speed optimizations for fast site performance