How to create gemstone icons using Sketch App - Emerald and Ruby (Part 2)

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 the Emerald and Ruby.

2. The Emerald

Step 1

Create a new Artboard (if you have one already from the diamond tutorial). Set the width and height to 300px.
Set up Smartguides on the rulers on the top at -60, -40, 0, 40, 60 and on the left at -60, -40, 0, 40, 60


Step 2

Add a rectangle shape to your Artboard. The dimensions should be 120x120.


Remove the border. Open the fill menu and switch to the second square at the top which is the linear gradient option. Use the default green at the bottom of the menu and ensure the gradient runs from left to right, that is, the lighter colour on the left and then darker on the right.


Next, double-click the shape to enter Path mode. Click on the second Smartguide line to add a new point as shown below. Sketch will likely default to the Mirrored path option on the right so be sure to change this to Straight.


Drag the point on the left down, as shown below, to the next intersecting Smartguides.


Continue adding points (ensuring your points are Straight and not Mirrored) until your shape looks like this:


Step 3

Now we're going to start adding the facets to the emerald. Add a rectangle shape.


Double-click to enter Path mode and delete the point on the bottom left.


Now move then remaining points as shown below.


Remove the border and open the fill menu. Select the linear gradient option again. My greens here are (left to right on the menu) #A1C741 and #82CA27.


Duplicate the shapes below and place them around each 'corner' of the emerald. I altered the direction and strengths of the gradients slightly.


Step 4

Add a rectangle shape.


Double-click to enter Path mode and add a point in the centre and at the bottom as shown below.


Bring the centre point down to then middle of then shape.


Drag the top points as shown below. You're essentially making a diamond shape.


Change the size of then shape to 110x55 and position it so that the bottom point sits in then middle.


Remove then shape's border. Open the fill menu and change colour to #B6B173. Change then blending to Soft Light.


Lastly, duplicate the shape and flip it vertically. Position it as below.


Step 5

Next, we're going to duplicate the very first layer we made for the emerald. Simply right-click and select Duplicate. Drag it to the top of the layers so it sits on top. You'll also need to switch the direction of then gradient by dragging the points to opposite sides from the Fill > Linear Gradient menu.


Resize the shape to 80x80.


Drag the shape to the centre.


Step 6

The final step is to add then sparkles and grey background as we did with the diamond. I made then background 180x180 for this one as my emerald was slightly larger :D


3. The Ruby

Step 1

Create a new Artboard. Set the width and height to 300px.
Set up Smartguides on the rulers on the top at -60 0, 60 and on the left at -60, 0, 60.


Step 2

Add a rectangle shape.


Rotate the rectangle 45 degrees (Transform option on the right) and change then size to 86x86.


Remove the border and add a linear gradient to the fill. Use the default red option at the bottom. Drag the top point to the left corner and drag the bottom point to the right corner. 


Step 3

Add a rectangle shape.


Double-click the shape and delete the top left point.


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


Duplicate the shape and flip it so that it is now in the top right quadrant. Change the fill colour to #FF7689.


Repeat this step for the triangle in the bottom left quadrant. Change the fill colour to #E42554.


And one more time for the lower right quadrant. Change then fill colour to #D7133D.


Step 4

We're now going to add two facets to the ruby. Create a rectangle shape.


Double-click to enter Path mode and delete the point on the top right.


While still in Path mode, drag the two outermost points in to the centre just a bit as shown below. I haven't measured this and just used my best judgement as to what looked good.


Remove the border and change the fill to a linear gradient. Change the direction of the gradient as shown below. Change the Fill Blending mode to Screen and change the Opacity to 80%. My yellow is #D1B560 with 50 Opacity and my red is #FF4474.


Duplicate the shape you've just made and flip it. Move it in place on the right hand side and change the direction of then gradient as shown below. I only changed then red to #FF7689.


Step 4

Last few actions to go! Duplicate the very first rectangle you created. Bring this to the top of then layers.


Change the size to 60x60 and ensure it sits in the centre.


This should already be a gradient so we're just going to change then colours and opacity.

My left side is now a peachy #FFD0B0 at Opacity 50 and my right is a rosy #F5515F at Opacity 50.


Next, add your stars. You can copy and paste stars from the previous gemstone or create new ones.


Lastly, add your background. This is a rectangle with a size of 150x150, radius 40, Fill #D8D8D8.