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

-
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.
  1.  In Inkscape, create a blank document set to a desired output dimension, e.g. 128 by 128 pixels.
  2. 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.


  3. Press CTRL+C. Then press CTRL+ALT+V.

    A copy of the rounded rectangle is placed on top of the original rectangle.
  4. Reduce the dimensions of the copy to e.g. 88 by 88 pixels.


  5. 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 centered on the page.

  6. Select Path | Object to Path.

    The copied rectangle is converted to a path.

  7. Press F2. Then drag a rectangle to cover the bottom nodes as shown.

    The bottom nodes are selected.

  8. Click on the Delete segment between two non-endpoint nodes icon.

    The selected segments are deleted.

  9. Press F2. Drag a rectangle to cover the bottom two nodes. Press the ARROW UP key to nudge them upwards until they are at the half of the rectangle.


  10. Press F1. Click on the original rectangle. Then remove the stroke.
  11. In the Fill and Stroke pane, under the Fill pane, click the Linear gradient icon.


  12. Then click the Edit button.

    The Gradient editor dialog box appears.
  13. For the first stop, set it to a color of your choice with full opacity (alpha value of 255).


  14. For the second stop, set it to a darker shade of the color of your choice with full opacity. Close the Gradient editor.




  15. On the canvas, drag the node of the lighter color gradient to the top and the darker shade node to the bottom.


  16. Press F2. Click the stroke path.
  17. In the Fill and Stroke pane, change the Stroke style width to a larger value e.g. 2 pixels.


  18. Under the Stroke Paint tab, change to a linear gradient. Click the Edit button.

    The Gradient editor appears.
  19. For the first stop, set the stop RGB color to white with an alpha value of 178.


  20. For the second stop, set the stop RGB color to black with an alpha value of 0. Close the Gradient editor.


  21. Press F2. Drag the lighter gradient node to the top. Drag the more transparent gradient node to the bottom.


  22. In the Fill and Stroke pane, change the stroke blur to a slightly larger value e.g. 2.

    The button base with a slight 3-D effect is now done.
  23. Place any artwork above the button to complete the icon.

Comments

Post a Comment

Popular posts from this blog

Image background removal using Krita

-
Image
Like other image editing software such as Gimp or Photoshop , Krita has similar tools to remove the background of an image non-destructively using transparency masks. The following steps show how: Open up an image in Krita . In the Layers pane on the right, mouse right click on the paint layer. A pop up menu appears . Choose Add | Transparency Mask . A transparency mask sub layer is created underneath the paint layer . Draw a selection polygon roughly around the foreground object in the image using the Polygonal Selection Tool , as shown below. Then in the File menu, click Select | Invert Selection . Choose Black as the foreground color. Choose a Brush e.g. Basic-1 Ink . Make sure the transparency mask layer is selected or active. Then paint over the background. Choose Select | Deselect to remove the selection polygon. The marching ants selection polygon is removed . Make the brush size smaller and zoom closer  to the background - foreground boundary. Brush over the r
Read more

How to copy and paste the color from one object to another using Inkscape

-
Image
In Inkscape , it is possible to copy the color from one object to another object using the Pick Color   tool. This saves a bit of time since you don't have to note down the source color and type in the new RGB color values in some dialog box.  To illustrate how to do this, see the following steps. In Inkscape , click the Pick Color tool    icon in the left tool bar or press F7 on the keyboard. The cursor changes to an eye dropper . Hover the cursor over the object with the source color e.g. green S , as shown below. Then press CTRL+C . The color underneath the cursor is copied over to the clipboard . Then click the Select and transform objects tool or press F1 . Now click on the object to be changed, e.g. blue G , as shown below. Press CTRL+V . The selected object's color is changed from blue to green. 
Read more

Create an embossed text effect using Inkscape

-
Image
I learnt how to use Inkscape to create a 3-D embossed effect on text objects simply by using the text object's fill blur property. An example of the effect is shown in the image below. The following steps show how the effect was created on an existing text vector drawing. In Inkscape , open up the Fill and Stroke pane by selecting Object | Fill and Stroke  in the menu bar. Press F1 . Click on the text object. The text object is selected with handles around it . Press CTRL+C . The selected text object is copied to the clipboard . Press CTRL+V twice. The text object is duplicated twice . Press F8 . Click on one of the text object. In the Fill and Stroke pane, click the Fill tab. Change the selected text object's  fill color to black . In the Fill and Stroke pane, adjust the Blur property to define the emboss effect e.g. 10 . The selected text object is blurred . Press F8 . Click on another text object. In the Fill and Stroke pane, click the Fill tab. Adju
Read more