Inkscape is a shining star in the free software graphics world. I've covered creating a simple ribbon in an earlier tutorial, so let's step things up a little. As part of my work I have often had to create icons for various situations. One of the more popular requests has been to create icons with a glass effect. This effect is surprisingly simple to achieve with something like Inkscape.
I'm going to presume you know your way around the Inkscape interface. If you don't, then perhaps it would be better to start with my first Inkscape tutorial. If you do then open Inkscape with a new document. Incidentally the source SVG document for this tutorial is available for download under a Creative Commons BY-SA licence. Where possible I have specified colours in the
RRGGBBAA format used throughout Inkscape.
777777ffand set the repeat of the gradient to be Reflected. Place the white centre of the gradient and the grey at the bottom of the circle
60cc60ff. Align the lighter colour with the white end of the Stroke gradient and the darker colour with the bottom of the circle.
ffffffff(white) with the black at the topand the white at the bottom
ffffff00(transparent) with the white at the bottom of the circle and the transparent at the top
That's the main glass ball done, now let's add some text. This is of course optional but most of these types of icons I have produced needed something "within" the glass ball.
Now we just add a shadow to give it a final flourish
000000ff(black) and 115 x 15px put this below but not touching the main drawing and aligned centrally with it
That's it, here's the final icon. There are other things you can do with like adding reflective highlight spots or some light reflections on the stroke of circle 1.
=TEXTBOX_START=Licensing Notice= This work may be distributed under the terms of the Creative Commons Attribution-ShareAlike License, version 3.0, with attribution to "Ryan Cartwright, first published in Free Software Magazine". Illustrations are released under the same licence with the same attribution. The SVG file this tutorial is based upon is available for download and convered by the same CC:BY-SA licence again with attribution to "Ryan Cartwright, basis of tutorial in Free Software Magazine. =TEXTBOX_END=