How to Create a Flat Diamond Icon with Sketch App

How to Create a Flat Diamond Icon with Sketch App

With this tutorial you will be guided through the process of creating a flat style diamond icon, using vector tools and layer styles in Sketch 3 by Bohemian Coding.

Step 1

Launch Sketch and create a new document, then draw a rectangle with the dimensions 180 x 160 pixels. design flat icons with sketch app

Step 2

Give the rectangle a gradient fill from #FFCF35 at the top to #FF9F21 at the bottom. design flat icons with sketch app

Step 3

Show rulers (ctrl+r), then create 4 new vertical guides at 60 pixel intervals. And create 3 horizontal guides at 0, 50 and 160 pixels. design flat icons with sketch app

Step 4

Double click the rectangle to enter the edit mode, select the top left point and nudge it 30 pixels right. Then select the top right point and nudge it 30 pixels left. design flat icons with sketch app

Step 5

Create two new vector points and align them with the guides as shown below. They will have a bezier curve by default, you can remove this by selecting the Straight option in the sidebar. design flat icons with sketch app

Step 6

Delete one of the bottom points and nudge the other point 90 pixels left or right towards the center. This should form a basic diamond shape. design flat icons with sketch app

Step 7

Enter the path edit mode again and select all of the points. Then enter 5 for the Corners value. design flat icons with sketch app

Step 8

Draw a small rectangle shape using the guides for alignment, delete one of the top points and move the remaining top point 30 pixels to the center to form a triangle. design flat icons with sketch appdesign flat icons with sketch app

Step 9

Duplicate the triangle and flip horizontally, then repeat until the top section of the diamond is covered by black triangles design flat icons with sketch appdesign flat icons with sketch app

Step 10

Draw a tall rectangle shape using the guides for alignment, delete one of the bottom points and move the remaining bottom point 30 pixels to intersect with the bottom point of the diamond. design flat icons with sketch app

Step 11

Duplicate the shape and flip hozintally. design flat icons with sketch app

Step 12

Draw another tall rectangle shape using the guides for alignment, delete one of the bottom points and move the remaining bottom point 30 pixels to intersect with the bottom point of the diamond. design flat icons with sketch app

Step 13

Select the diamond shape (which should be below all of the black triangles), and in the layers panel right click the layer and select Use as Mask. design flat icons with sketch app

Step 14

Select all of the triangle layers and set the blending mode to Soft Light. design flat icons with sketch app

Step 15

One by one select each triangle and enter either 0, 20, 40, 60, or 80 percent into the fill opacity field as shown in the image below: design flat icons with sketch app

Step 16

Select all of the triangles again and apply a new Inner Shadow and Shadow layer style: design flat icons with sketch appdesign flat icons with sketch app

Step 17

Select the diamond shape and apply a new Inner Shadow and Shadow layer style: design flat icons with sketch appdesign flat icons with sketch app

Step 18

Draw a new rounded rectangle on a layer below all of the others. The corner radius should be 40 and fill color #DFE8E6. design flat icons with sketch app

Step 19

Use the Star shape tool to create two new white shapes with 4 points and 30% radius. Place them as shown below: design flat icons with sketch appdesign flat icons with sketch app

Final Result

design flat icons with sketch app

Comments

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

See all
X

You've successfully logged in!