Stuff for Geeks

In this part of the tutorial we finally get to finish our gem, but not before we put in a bit of wrist numbing grunt work.  The hard part of creating a gem is tracing out each facet, which is made more tedious by the curved edges of the gem.  In the last part of the tutorial we’ll look at some short cuts to make things quicker (mainly by not having curved edges in the first place).

Step 1: Get everything ready

Unlock and make all the layers visible.  Then, select everything except the “Base” and “Table” layers and make the stroke colour light blue and ensure that there is no fill for anything.  #BFDFF6 is a suitable colour, but you can use whatever you like, just make sure that you can easily separate the guidelines visually from the facets that you are about to draw.

Step 2: Draw the pavilion facets

Firstly, lock and hide all layers except “Pavilion_Guide” and “Pavilion”, lock “Pavilion_Guide” and select “Pavilion”.  This will allow you to trace from the guide without accidentally drawing in the wrong layer or disturbing the guide.  Now, zoom in so that each facet is nice and large (I find it easier to trace over the lines at about 800% zoom).

Using the pen tool, trace over each facet in the guide layer (there are eight diamond shaped facets and sixteen pie slice shaped facets) with the pen tool so that you create a closed path (the start and end points must join).  I find it easier to use a red stroke for the active facet, and then change the colour to black when I’m done with it.  Once you have completed a facet you might want to rename it in the layer window for convenience.

The diamond shaped facets are easy; they only consist of four lines, but for the pie slice shaped facets you will need to trace over the curved part using 10-15 points.  If the lines don’t quite match the guides you can use the “direct selection” tool to move them, and add more points using the “add anchor point” tool.

Keep going until every facet has been traced; don’t be too concerned if you don’t trace the facets perfectly.  Have fun!

Step 3: Draw the crown facets

Firstly, lock and hide all layers except “Crown_Guide” and “Crown”, lock “Crown_Guide” and select “Crown”.  For the crown you will follow exactly the same procedure as you did for the pavilion, tracing over central octagonal facet, 8 triangular facets bordering the octagon, 8 diamond shaped facets and 16 pie shaped facets around the edge.

That’s it for the grunt work, now it’s all plain sailing.

Step 4: Complete the base

The base doesn’t form part of the gem as such, but it does provide a simple way for us to abstract the gem colour so that it will be easy to change to create gems of different colours.  For now, select the base circle and make the fill solid red (#FF0000) and remove the stroke colour.  Lock the base layer, but keep it visible.

Step 5: Complete the pavilion facets

The gem we are trying to create is translucent (lets light through) so the facets should be created in such a way that they give the impression of translucency and allow the colour of the base to show though, making the gem appear coloured.  By making the facets white with a transparency gradient does this, and gives the impression of light reflecting off the facets (the more white and less transparent, the more “reflective” the facet appears.

So, unlock the “Pavilion” layer and make it visible (and zoom in to make it easier to work).  You should see a red circle with black bordered facets within it.

Select one of the facets and make the fill a gradient fill, with both gradient stops white.  At this stage, the facet is just white and occludes the red background.  Now, set the left gradient stop alpha value to 0% and the right gradient stop alpha value to 50%.  Lastly, select the Gradient Transform tool and randomly draw a linear gradient across the facet, ensuring an even colour gradient.  You should have something that looks like this:

Now, repeat this for every facet (just select them all and change the fill for all of them), ensuring that the gradient direction is random for all the facets (you’ll need to do this one by one).  Finally, select all the facets and remove the stroke.  Now things are looking much better!

Step 6: Complete the crown facets

Lock and hide the “Pavilion” layer and unlock the “Crown” layer and make it visible (and zoom in to make it easier to work).  You should see a red circle with black bordered facets within it like you did with the pavilion.  Finally, edit all the facets in the same manner as before, but this time make the right gradient stop opacity 30% (not 50%).  You can play with the pavilion and crown gradient opacities to get different effects.  The crown looks something like this now:

Step 7: Complete the table

Lock and hide the “Crown” layer and unlock the “Table” layer and make it visible (and zoom in to make it easier to work).  Select the octagon and give it a gradient fill like the others, but make the right tab stop opacity 60%.  Use the Gradient Transform tool to create a linear gradient horizontally from left to right, taking care to stop and start at the borders.  Also remove the stroke.  The table should look something like this:

Step 8: Putting it all together

Make all the layers visible, except the two guide layers, to see the almost complete gem.  Finally, select the base circle and add a drop shadow effect with the following settings:

Your finally gem should look very similar to the one below:

Step 8: Change the colour of your gem

Changing the colour of the gem is very simple, just change the fill colour of the base circle and set the drop shadow effect colour to the same colour and you’re done!  Changing the opacities of the transparent gradients also allows you to modify the brightness of the gem.

In the last part of this tutorial we’ll look at some ways of simplifying the process (you have to admit, tracing all those facets wasn’t much fun), different gem styles and different effects to make your gems stand out.

Creating Gems with Expression Design Tutorial

• Part 1
• Part 2
• Part 3
• Part 4

written by Paul \\ tags: Expression Blend, Gems

In this part of the tutorial we’ll learn how to create the basic outlines for the pavilion, crown and table of the gem.

Create a new Expression Design document (640×480 is fine) and create the layers shown below.  Unless otherwise stated, all drawing is done with a line thickness of 1, a black stroke and no fill.  You will need to lock and hide layers where appropriate to make it easier to work.

The layers are all self explanatory.  The base is just used to create the circle that is common to the pavilion and the crown, while the two guide layers are used to create the geometry that will be used to trace out the gem facets.

Step 1: Create the base

This is the simple part, just draw a 200×200 circle in the middle of the “Base” layer.

Step 2: Create the pavilion guide

Copy the circle from the “Base” layer and the paste it into the “Pavilion_Guide” layer (ensure that it overlaps exactly with the base circle).  Next, draw a star polygon that fits neatly into the circle with all points just touching the edge of the circle, with the properties below:

Finally, draw four straight lines through each pair of opposing inner points of the star polygon that extend to the circle boundary (shown in blue).

Step 3: Create the crown guide

Copy the circle from the “Base” layer and the paste it into the “Crown_Guide” layer (ensure that it overlaps exactly with the base circle).  Draw a square that is approximately half the diameter of the circle and centre it in the middle of the circle.  Make a copy of the square and paste it in the middle of the circle, after which select it and rotate it by 45^o (shown in red).  Then, connect each corner of the squares to the edge of the circle with straight lines (shown in blue).

Finally, create another eight point polygon and adjust the inner depth (between 25% and 30%) and the position and angle until it fits as shown below (shown in blue):

Step 4: Create the table

Select the “Table” layer and then draw an eight sided polygon with an inner depth of 0% (a regular octagon) and then rotate and size it to fit exactly in the octagon made by the intersection of the two squares in the “Crown_Guide” layer (easiest if you hide all the layers except the “Table” and “Crown_Guide” layers”.  You might find it easier to temporarily use a stroke of a different colour so that you can see what you are doing.  The image below shows the table in blue overlaying the crown.

In the next part of the tutorial you’ll learn how to create the individual gem facets from the guides that we have created and finish the gem.

Creating Gems with Expression Design Tutorial

• Part 1
• Part 2
• Part 3
• Part 4

written by Paul \\ tags: Expression Blend, Gems

This four part tutorial series will focus on how to draw gemstones for 2D games, so the main focus will the technique to quickly produce gemstones of varying degrees of realism and make it easy to change colours and features so that a range of gemstones can be easily produced.  Obviously, producing a super realistic gemstone image is a lot of work but the techniques outlined here will get you well on your way.

This is the sort of thing we will produce in the end:

So, now that we’ve established the obvious, let’s have a look at the anatomy of a typical gemstone.  The most obvious features of a gemstone are the numerous facets that reflect light in all directions.  There are many different cuts of gemstone but for the most part they all consist of three parts.  The bottom part is known as the pavilion, the top part the crown and the single large face on the top is the table.

If you don’t have any nice big diamonds lying around to look at and are struggling to visualize the parts of a gemstone, have a look at the diagram below which shows the three parts; and imagine a 3D gemstone composed of the three parts on top of each other.

The purpose of the pavilion and the crown are obvious, but the purpose of a separate table part seems a bit odd since it looks exactly like the middle face of the crown (and it is).  The purpose of the table is simply to create a different reflective effect for the topmost face (you’ll understand once we get to actually drawing the gemstone.  If you’ve played around with Expression Design 3 (and I’m assuming you’re familiar with the basics of the software) you’ll realize that the three gemstone parts will map directly to three layers and that we’ll make heavy use of transparency and gradients to get the effect that we want.  In the next part of the tutorial we’ll learn how to create the outline layer templates for the three parts of the gemstone.

Creating Gems with Expression Design Tutorial

• Part 1
• Part 2
• Part 3
• Part 4

written by Paul \\ tags: Expression Blend, Gems