Posts

Showing posts from 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 c...

Restoring yellowed paper scan using self-screen blend mode in Gimp

Image
In Gimp or Photoshop , you can overlay an image with itself and blend the layers together with a blending mode e.g. multiply , dodge , burn , screen , etc. I found that a self-image blend i.e. an image with itself, with the screen mode can restore yellowed paper quite nicely and easily. By definition, the screen blend mode will lighten colors but leave black neutral and untouched. Using this technique, I managed to restore the yellowed paper scan below to a reasonably looking version quickly. Run Gimp . Open up the yellowed paper image. In the layers pane, right click on the yellowed paper image. A pop up menu appears . Choose Duplicate Layer . The layer is duplicated . Choose the duplicated layer. Then click the Mode combo box as shown below. In the drop down list, choose Screen . The screen blend mode is applied . The yellowed paper is restored and looks less aged .

Digital Traditional Color Palette

Image
I was having difficulty in locating a digital traditional color palette for digital painting so I made this digital traditional color palette from the default swatch of Photoshop .

Crop an image with the Fill Pattern command in Inkscape

Image
In Inkscape there is no direct image crop command similar to Photoshop's Image Crop command. But it is still possible to crop an image in Inkscape indirectly using the Fill Pattern command. An example of a cropped image is the screenshot on the right. The example below shows how it is done. Start Inkscape . Drag and drop an image file onto the page. The "image" Input dialog box appears . Click OK . The image is displayed . Use any vector placement commands to draw the cropping boundary e.g. the Create circles, ellipses, arcs (F5) command. Press F1 and select the image. Select Object | Pattern | Objects to Pattern . The image pattern is created . Delete the image. Select the cropping boundary. If the Fill and Stroke pane is not displayed, select Object | Fill and Stroke . The Fill and Stroke pane is displayed . In the Fill tab, click the Pattern icon. If necessary, choose a pattern from the Pattern Fill combo box. The image is displayed cropped within t...

How to make an Android menu icon using Inkscape

Image
The Android 2.3 Gingerbread menu icons have a standard look and feel to them, according to the Android Menu Icons Design Guide at  http://developer.android.com/guide/practices/ui_guidelines/icon_design_menu.html . It is possible to use Inkscape to create menu icons for Android as illustrated in the steps below. Create and setup the document Run Inkscape . Select File | Document Properties . The Document Properties dialog box appears . In the Width and Height fields, type in the largest menu icon hdpi size e.g. 72 pixels. Close the dialog box. Use the Create Rectangles and Squares (F4) command and place a square on the page to serve as the recommended bounding box 48x48 pixels for the icon. Select the rectangle. Change the Width and Height to 48 pixels. Select Object | Align and Distribute . The Align and Distribute pane appears . Set the Align Relative to Page . Click on the Center to Vertical Axis and Center to Horizontal Axis buttons.  Select Layer | L...