Tutorial: Creating buttons with metal and glass

This tutorial shows how to create great looking buttons with metal and glass effects using a vector graphics tool such as Inkscape.

Firstly we’ll go through the process of creating the button then we’ll quickly have a look at the optics of what is actually happening and hopefully this will give an idea of how important it is to understand the way light interacts with shapes and materials in real life, in order to be able to design effective graphics.

Target design

Target design

In this tutorial we’re going to demonstrate how to create the metal and glass looking button shown here.

We’re going to use just five quite simple layered elements to build the button, with they key features being gradients and blurring.

The core shape

The core shape

Create a rounded rectangle with a width and height of 256.

Round the corners with a radius of 32 – we find between 10 and 15% of the dimension works nicely – not too sharp and not too rounded.

Colour the shape according to the desired face colour of the button

The bezel background

The bezel background

Duplicate the shape and enlarge about it’s centre by an amount equal to the width of the bezel around the edge of the button, somewhere between 32 and 64 depending on the final intended size of the button

Create a metallic looking gradient and slant it off to the top left. The gradient should be very light at the top but not white and very dark at the bottom but not black and usually has at least one darker section in the middle with light either side of it.

Give the shape a mid grey edge stroke with a width somewhere between 2 or 3 – we’ll see in the next step why mid grey works so nicely

The cutout bezel

The cutout bezel

Next, copy the first shape over the top of the second one so that it’s centred exactly, and subtract it – we just created the bezel of the button.

Note how the mid grey edge stroke look lighter compared to the dark bottom and lighter compared to the light top

The inner shadow

The inner shadow

Now we going to create an inner shadow around the edge of the glass face

Copy shape 1, remove the fill and give it a black edge stroke of width somewhere between 3 and 5, and blur it with a factor between 2 and 5, depending on the final size of the button and the desired effect.

A thinner line needs the lower amount of blur.

The gradient for face curvature

The gradient for face curvature

Duplicate the first shape again, and give it a gradient from white near the top left to transparent towards the bottom middle – giving the same slanted offset used in the metallic gradient.

Then make the shape 50% opaque. This will give the face of the button a raised look instead of making it look completely flat

The reflected highlight

The reflected highlight

Finally, duplicate this last shape and reduce the size about it’s centre and by no more than 10% (eg 234)

Distort the shape by moving the bottom up more on the right and less on the left – still with the same slanting angle in mind that we used for the metallic gradient and the previous shape.

The sharper changes in the curves of this shape should be nearer the left and right edges, with smoother curves across the middle.

Give this shape an opacity of 60%

Building it up: step 1

Building it up: step 1

Now we’ll build the button,

Start with the coloured face from the first shape

Building it up: step 2

Building it up: step 2


Overlay the full face white/transparent gradient

Building it up: step 3

Building it up: step 3


Add the glass reflection highlighting

Building it up: step 4

Building it up: step 4


Add the blurred inner shadow

Building it up: step 5

Building it up: step 5


Finally, place the bezel over the top.

And we’re done

Some detail of the button we just created. Note that we used the same metallic gradients for creating the bezel around the magnifyers.

Detail of the button

Detail of the button

Below are a couple of diagrams showing top view and side view of the button and how light hitting the surfaces may be refracted, or reflected, and how areas in light and shadow affect the shading.

Direction of light on the button as seen from above

Direction of light on the button as seen from above

Direction of light on the button as seen from the left side

Direction of light on the button as seen from the left side

Finally a few examples of how we can generate variations on a theme by slightly changing various aspects of transparency and colour of one or more of the layers we have created.

Variations on a theme - transparency

Variations on a theme - transparency

Variations on a theme - colour

Variations on a theme - colour

Want to share?
Sorry - comments are now closed on this post