How to create gemstone icons using Sketch App - Amber, Sapphire and Amethyst (Part 3)

This tutorial assumes you have done Part 1. I'd advise starting with Part 1 first as I skip some of the steps in the later parts as I have assume you know how to do them.

Part 1 also explains how this tutorial came about and where the inspiration for these came from so please do take a minute to read it.

In this post, we'll be going through Amber, the Sapphire and the Amethyst.


4. Amber

Step 1

Create a new Artboard with Smartguides on the following points on the ruler:

Top: -60, -42, 0, 42, 60 | Side : -60, 35, 0, 35, 60

 

Create a rectangle shape.

 

Double-click to enter Path mode. Add a new point at top in the centre. Ensure your paths are Straight and not Mirrored. Drag this point to -60.

 

Do the same to the bottom to get your Amber shape.

 

Step 2

Create another rectangle shape.

 

Enter Path mode and delete the bottom right point.

 

Drag the top right point down.

 

Remove the border and change then fill colour to #FD9412.

 

Continue adding rectangles, or duplicate the existing triangle until you have added all the facets of the Amber as I have done below. The colours starting with the one we just did and going clockwise are as follows:

#FD9412, #FEB63F, #FFCE42, #FEB740, #FF7F00, #FD9515, #FFC63B, #FFD942

 

Step 3

Next, drag the Amber shape we create earlier to the top of the Layers panel.

 

Change then size to 48.6x70 and add a Linear Gradient Fill with the colours #FFCE42 and #F4AC34 and adjust the direction of the gradient as below:

 

Step 4

Add some sparkle.

 

Add your background and you're done!

 

5. Sapphire

Step 1

Create a new Artboard with Smartguides on the following points on the ruler:

Top: -60, -43, 0, 43, 60 | Side : -60, -43, 0, 43, 60

 

Change the setting of your polygon so that it has 8 sides with a width and height of 120.

 

Step 2

Start adding triangle shapes as shown below. Use #1A93E8 for the first wedge.

 

You can copy and paste the existing triangle and flip them as you need to. Continue adding new wedges until the sapphire is complete. The colours are as follows (clockwise):

#1A93E8, #44BFFC, #7DE0FD, #23A4E8, #147CE8, #2CA8EF, #48C5F5, #BDEFFE

 

If you find your shapes don't always line up, you can enter Path mode and adjust them manually so that they line up with the grids.

 

Step 3

Add another polygon shape, also with 8 sides with a width/height of 72. Add a gradient with the lighter colour being #BDEFFE and the darker being #44BFFC. Position it bang in the middle.

sapphire-step3.png
 

Step 4

Add some sparkles.

 

Step 5

Add your background and you're all done!

sapphire-step5.png
 

6. Amethyst

step 1

Start off with with a grid with the following guides:

Top : -70, -35, 0, 35, 70
Side: -60, -35, 0, 18, 35, 60

 

step 2

Add a triangle shape as shown below (I've removed the border here).

 

Add a triangle shape to the base. You may need to use Paths here to get the positioning 100%. I used the colour #9048C6.

 

Next, add the left facet of the amethyst with the colour #B667D8.

 

Flip the triangle so that you now have all three facets. Use the colour #D682FF.

 

step 3

Add another triangle shape. This time the top and base points are going to be pulled in slightly. Simply enter Path mode by double-clicking on the shape to manually adjust the points.

 

Duplicate and flip the triangle to the other side.

The right hand gradient is as follows:
Top (lighter) : #E793F5
Bottom (darker) : #D682FF

The left hand gradient is as follows:
Top (lighter) : #D785E5
Bottom (darker) : #B667D8

 

step 4

Add yet another triangle shape with a the width of 70.3 and height of 57.7. Add a gradient with the top/lighter colour being #CD96E7 and the lower/darker colour being #AD59D1.

Positioning this can be tricky but you want the base to line up with the three facets so these may not line up perfectly with the Smartguides.

 

step 5

Add the sparkles.

 

step 6

Add your background and you're done.