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:
- Draw 32 pixel icon in layer "32". Eventually remove overlapping pixels (
Object > Align and Distribute > Remove overlaps
may be helpful). - Clone the icon to layer "scaled", scale it by 50% and move it to the 16 pixel area.
- Draw 16 pixel icon in layer "16".
- 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