This is Kleki. It runs anywhere there is a browser.
On this side is the canvas. You can draw on it, move it around, rotate it,
zoom out, and zoom in.
When you zoom in, you see that the image is made up of little squares.
This is because Kleki is a pixel-based drawing tool.
Next to the canvas are all of the tools,
With the most important ones being probably these up here.
This highlighted button on the left indicates that I’m currently using the brush.
Then if I press on the hand I am using the hand tool.
With these buttons I can zoom. And with these I can undo and redo.
To access more tools I press on this little arrow, or the big button again,
This reveals other tools, such as the paint bucket.
When I change the tool this tab on the left changes.
This is because it is the active tool tab.
In it you can access all of the settings and actions of the currently active tool.
So for our brush I can change its color with the color picker.
Or if I press on the eyedropper I can pick a color from the canvas.
Or in this dialog I can manually type a color value.
If I want to draw really precise lines,
I can use the stabilizer dropdown, for smoother, more precise lines.
Here is another row of tabs. Each of these represents a different brush with its settings.
These sliders control the size and opacity of the pen brush.
When I double tap on a slider I can manually enter a value.
I can relatively change its value by dragging with the right mouse button.
Also while dragging, when moving the cursor away it becomes more fine grained.
Next to these sliders are pressure sensitivity toggles.
These are useful when you have a stylus because you can decide which setting
is affected by pressure sensitivity. The next brush tab is the blend brush.
Then here is a sketchy brush. The pixel brush is useful for pixel art.
And the Chemy brush which has symmetry and gradient.
Then these last two brushes here are special. The smudge brush doesn’t place new color,
it just pushes it around the canvas. And the eraser removes color.
Next let’s have a look at these 3 buttons up here, which you can also access in the file tab.
If you want to save your drawing, press on the blue save button.
And now a PNG file has been saved to our downloads folder.
Press on the New Image button to start a new drawing,
here you can choose the format and background color.
Which can also be transparent.
After creating a new image you can still go back with undo.
The button with the folder icon lets us import an image.
After choosing a file I see the import dialog.
Here I am given the option to import as layer, or image.
If I import as a layer, the image is placed on top of the existing.
Or if I import as image, It is just this image now.
Alternatively you can import by dragging an image into the tab.
I can directly decide to import as image or layer.
It is also possible to import an image by copy-pasting.
First I copy, and then I paste. This also brings up the import dialog.
One thing I’d like to mention about this dialog is that you can already crop your image in here.
So I could decide to only import the apple.
Since I’ve mentioned copy paste, you can also copy a drawing from Kleki into a chat
window or into a document that you are working on. You can do this by simply pressing Ctrl + C,
Selecting the area you’d like to copy, Right click, copy image,
Or press on the blue "To Clipboard" button if you see it.
Now the image is in your clipboard, And you can paste it anywhere you’d like.
You can also access the copy dialog by going into file and then copy.
Now let’s look at layers. Right now I have one layer, which is highlighted.
That means when I draw, I draw on this layer, "Layer 1".
I can add another layer, "Layer 2", which sits on top of "Layer 1".
So when I draw on "Layer 2", that drawing will sit on top of "Layer 1".
Let's add a third layer, "Layer 3", and let's draw with a different color.
Because this layer is on the very top, so is this line.
However I can change this by reorganizing the layers.
Now I put "Layer 3" underneath "Layer 2". So now, "Layer 2"'s line sits on top.
What else can I do? I can change the opacity.
And I can change the blend mode. This decides how the active layer
gets mixed with everything that is underneath. So with multiply, "Layer 2"'s line turns darker
when it intersects with the other lines. You can also duplicate layers
So now we have this layer twice. And you can merge layers, which
combines two layers into one. And when you merge you
actually have a list of options. These are there for specific clipping operations.
For example if I choose "destination-out" the shapes from the top layer will
be erased out of the bottom layer. Now we see that "Layer 1" turned transparent here.
You can also rename layers, And you can delete them.
Now let’s start with a new image.
And give it three layers. And let’s draw something.
Let’s use this simple drawing to explore the other tools that Kleki has.
First the paint bucket. With the paint bucket I
can fill enclosed areas with a color. However what you notice is that the edge
of the filled area doesn't look so nice. To avoid that there is a better
way of using the paint bucket. For that I choose the layer beneath the lines,
I choose a grow factor, in this case 2 works pretty well.
And then when I fill, the coloring is much cleaner.
Next the gradient tool. With this you can draw a
color gradient on the layer. Let’s draw a sky with this.
Here are different modes. Let's use the radial mode to draw some clouds.
Next up the shape tool,
This allows you to draw rectangles, ellipses and lines.
If you rotate your canvas, you can draw rotated shapes.
Let's draw a green rectangle for the ground, with two ellipses for a shadow.
And let’s add a speech bubble on top of everything.
For this we draw a white ellipse, and a little wedge.
All it needs now is some text.
You can use the text tool by clicking on the canvas where you'd like to place text.
This brings up the text tool dialog. Here I can zoom, and adjust the position.
As you type into this textbox the preview updates. You can also adjust color, size, font,
formatting, style, and opacity. Let's go with this.
Also like with the shape tool, if I rotate the canvas and I place text, the text will be rotated.
Let’s save this, and take a look at the saved image.
This file is a PNG, that means it can only ever have one layer.
If I open a new tab of Kleki, and I open this image, you can see it only has one layer.
So if I open this image again one day later, and I’d like to change the background,
that will not be so easily possible. It would be nicer to have all of the layers again.
For that we go into "File" and then instead of choosing "Save PNG" we choose "Save PSD".
Now we see that there is a PSD file. PSD is a file format which supports layers.
So if we open this in a new tab, you can see all of the layers again,
and I can easily change the background.
Then there is also the edit tab. In the edit tab you can make many
adjustments to your image. You can transform a layer.
You can crop it. You can flip it.
Rotate it.
Change the colors. You can distort it.
You can blur it. If you open a small pixel art image,
You can make it large while keeping it sharp. You can also easily color drawings
that lack transparency or layers. For that you use the "To Alpha" operation.
This isolates the lines from the image, and now I can quickly color it using the paint bucket.
The file tab is already a bit familiar to us. But we haven't looked at the browser storage yet.
If I press on "Store" you see that this preview updated,
including a time indicator of when I last stored.
Now if I reload Kleki, the drawing is restored with all of its layers.
So this image is stored in the browser. But, it is only stored on
*this* computer in *this* browser. That means if I open Kleki on my phone now,
this drawing will not restore on my phone. Also if I make some changes, you see that
the preview has not updated, and when I reload, my changes are now gone.
If I want changes to be stored, I need to explicitly press the "Overwrite" button.
Now if I reload my changes are restored. If I want Kleki to start with a
blank canvas again, I press "Clear". And now if I reload there is an empty canvas.
You can upload images with this button, which uploads to Imgur.
There it is hosted as an unlisted image,
meaning only people who have access to your link can view this image.
After uploading you are provided with a deletion link.
When you visit this link and press yes, your uploaded image will be removed from Imgur.
Lastly there is the settings tab. Here you can change the language,
and you can change the layout of the UI.
Finally let’s take a look at shortcuts. I showed you buttons for the hand tool,
zooming, undo, and redo. But you can also do many things with shortcuts.
For example, if I’m using the brush and I want to quickly move the canvas:
I can hold spacebar and then I drag, or I drag the middle mouse button,
or I press the arrow keys.
To rotate I could go into the hand tool here and press these buttons,
or I simply hold the R key and then I drag around the center.
Or I hold the R key and press the arrow keys. To zoom I could press these buttons,
or I could scroll, or press "+" and "-", or I could hold the Z key and drag horizontally.
To undo I can press Ctrl + Z, and to redo Ctrl + Y.
To use the eyedropper I could press here on this button,
or I simply hold the Alt key and then drag. Or I use the right mouse button.
I can bring up brush settings next to my mouse cursor by holding Ctrl and Alt.
Now in this overlay I can change the color, brush size, and opacity.
I can clear the layer with the Delete key or with Backspace.
Or I can fill the layer by pressing Enter. I can save my image with Ctrl + S.
And I can save to browser storage by pressing Ctrl + Shift + S.
The help page has a complete list of all shortcuts, also including touch gestures.
Kleki is a free tool, has no ads, and is open source.
So if you find it useful, please consider donating.