Bigosaur blog
Get My Mom is a Witch on Steam

How to draw a ring with Inkscape

On of the artifacts in my game is the mythical Ring of Gyges. I decided to improve my graphics skills and learn Inkscape better. Rings and other metal surfaces are rather simple to draw, you just need to combine proper gradients.

I started with basic eclipse, duplicated the shape multiple times and then created unions and intersections needed to assemble the ring. I used a brown-gold-white-gold-brown gradient (it's easy to make a custom gradient like this in Inkscape). To get the proper gradient (straightforward or reverse) I put a real ring on my desk and watched the colors.

This is the basic ring. But lets make it look really good. First I rotated it about 180 degrees and then added a gem to it:

As you can see the gem has multiple layers. On the bottom we have a black circle with white border. Border is not the same everywhere, it has a gray-white gradient stretching from left to right. Outside it, there's another border, with black-to-transparent gradient. This is used to create a 3D effect on the ring's metal surface. Over that, we have a half-circle with another gradient. This time the gradient is radial, extending from the bottom-left corner which has a white point. That point looks like a point where the light enters the gem. This is the base. Now we will add color. You can pick any color. I choose blue.

First, we create the dark blue overlay (one the the right in the image above). Note that is also has a slight gradient going from left to right. The light blue layer on the top is used to complement the bottom-left white point in the black and white base. As the light enters in the bottom-left corner it goes through the gem and exits in it's top-right part. There is no sharp point there, although you could put one if you want to achieve a different effect.

Finally, here's the artifact's card in my Gods of Sparta game:

read more...   Bigosaur, 2014-10-08

<< Gods of Sparta factions

Understanding relations between setOrigin, setScale and setPosition in libGdx >>

Presskit and screenshots Website Home Page Website Home Page Blog main page YouTube channel Twitter account Google+ page Facebook page