How to turn a sketch into a clean computer image

A simple process to turn a hand drawn sketch into a vector image than can be later edited, reused in other drawings. Vector drawings are also sharper and can be displayed perfectly on every screen resolution. They can be zoomed and stay readble. Now days most graphics and icons are designed as vector strokes and saved in svg.

SVG pictures as part of web pages or applications can be styled using stylesheets (css), have links to other documents or animations in javascript. All things bitmaps pictures can’t have. So the process has a cost but benefits are also present.

1) Do a simple sketch with a black pen and a white paper. Keep it very simple, outlines.

2) Scan it un png. Don’t use jpeg or tiff. Jpeg would loose the precise borders, tiff would onely keep black and white and this creates very complex borders.
Hint: If use Kneaver Tray this is [shift] [F8]


Note: the pic is taken from my idea library and represents learning as knowledge getting in one’s head. Guess how Self Directed Learning is represented.

3) Start Inkscape on the file

4) use POTrace

5) Place colors (optional)

6) save in svg


7) convert to png at the best precision (right click). PNG keeps sharp images, transparency.

8) derive all precisions from this master file.

Update: I have a script file now to chain all the steps without using or installing Inkscape.

The benefit of using Inkscape or an svg capable editor is to add computer text in place or below hand written text. Group the parts of the drawing. This makes the picture searchable and allow to build links behind them.

Below color was changed using an editor.


One can see that the selection process is easy and perfect.


Finally, last but not least, benefit: Kneaver supports SVG images both for contents and templates. So an SVG picture can be reused as a template. This is used for example for generating pictures for Twitter Chats.