• Have any questions?
  • contact@thecreativehagja.com
the creative hagja logothe creative hagja logothe creative hagja logothe creative hagja logo
  • Tutorials
    • Affinity Designer
    • Affinity Photo
  • History & Facts
    • Graphic Design
    • Logos
    • Typography
  • Inspiration
  • Recommendations
    • Courses
    • Products
    • Books
  • Resources
  • About
  • Contact
✕
sliced head manipulation cover pic
Create a Sliced Head Manipulation in Affinity Photo
April 7, 2020
video editing with davinci resolve cover pic
Learn Video Editing with DaVinci Resolve
April 23, 2020

Create a Car Icon in Affinity Designer

car icon tutorial in affinity designer
Tweet

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.

car icon in affinity designer step 1

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.

car icon in affinity designer step 2

Step 3

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

car icon in affinity designer step 3

Step 4

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

car icon in affinity designer step 4

Step 5

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

car icon in affinity designer step 5

Step 6

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

car icon in affinity designer step 6

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.

car icon in affinity designer step 7

Step 8

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

car icon in affinity designer step 8

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.

car icon in affinity designer step 10
car icon in affinity designer step 10a

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.

car icon in affinity designer step 11

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.

car icon in affinity designer step 12

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.

car icon in affinity designer step 13

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%.

car icon in affinity designer step 15

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 16

Step 17

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

step 17

Step 18

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

step 18

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 19

Step 20

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

step 20

Step 21

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

step 21

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 22

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 23

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 24

Step 25

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

step 25

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 26

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 27

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 29

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 30

Step 31

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

step 31

Step 32

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

step 32

Step 33

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

step 33

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 34

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 36

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 38

Step 39

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

step 39

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 40

Step 41

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

step 41

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.

Share
The Creative Hagja
The Creative Hagja

Related posts

travel app design
November 14, 2022

How to Create a Travel App in Affinity Designer


Read more

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

eight + 7 =

Newsletter

Pages

  • About
  • Affiliate Disclaimer
  • Contact
  • Home
  • Privacy Policy
  • Resources
  • Terms of Use

Privacy Policy | Terms of Use| Affiliate Disclaimer

© 2023 The Creative Hagja. All Rights Reserved.