Posts

Showing posts from December, 2012

Fast method to create a button icon with a 3-D effect using Inkscape

Image
Inkscape can be used to create nice looking button icons with a touch of 3-D like the example on the left. It can be achieved simply by applying a linear fill gradient to the button and a linear gradient to the path's stroke segment on top, with appropriate gradient colors and opacity values; and a little blurring.  The following illustrates how it can be done.  In Inkscape , create a blank document set to a desired output dimension, e.g. 128 by 128 pixels. Click the Create rectangles and squares (F4) icon. Place a rounded rectangle on the canvas. Change the rectangle width an height to the desired values e.g. 96 by 96 pixels. Press CTRL+C . Then press CTRL+ALT+V . A copy of the rounded rectangle is placed on top of the original rectangle . Reduce the dimensions of the copy to e.g. 88 by 88 pixels. In the Align and Distribute pane, set the alignment to be Relative to Page . Then click the Center on horizontal axis and Center on vertical axis icons. The copy is center