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.
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.
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
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
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
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.
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
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%
Now we’ll build the button,
Start with the coloured face from the first shape
Overlay the full face white/transparent gradient
Add the glass reflection highlighting
Add the blurred inner shadow
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.
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.
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.