How to draw a pixel art icon with Inkscape - noyainrain/micro GitHub Wiki

Set up the document:

File > Document Properties >
  Page >
    Units: px
    Width: 48
    Height: 32
  Grids >
    Rectangular grid - New
    Major grid line every: 8

Create the following guides:

  • Vertical: 0, 32, 48
  • Horizontal: 0, 16, 32

Create the following layers top to bottom:

  • scaled (Opacity: 50%)
  • 16
  • optimized
  • 32

Create a single pixel rectangle and copy it. Drawing is now possible by simple pasting.

Process:

  1. Draw 32 pixel icon in layer "32". Eventually remove overlapping pixels (Object > Align and Distribute > Remove overlaps may be helpful).
  2. Clone the icon to layer "scaled", scale it by 50% and move it to the 16 pixel area.
  3. Draw 16 pixel icon in layer "16".
  4. To reduce scaling artefacts, copy the 32 pixel icon to layer "optimized", select all connected pixels and union them (Path > Union).

Export:

  • 32 pixel icon: Delete all layers but "32". Set the document width to 32. Save optimized SVG (File > Save a Copy > Optimized SVG).
  • 16 pixel icon:
File > Export PNG Image >
  x0: 32
  y1: 16