mtPaint - Simple paint tutorial

[don570]

Simple paint tutorial

I made this video tutorial as an experiment to test whether it is
possible to make a useful tutorial with no microphone and only
a low-end machine without a video editor.
The video assumes some knowledge of the alpha channel.

http://www.datafilehost.com/d/f0b8dc3f
untick box to avoid the downloader program


Instructions to paint with mtpaint program.

There is no need to use layers feature or a mask.
Additional benefit : the greys in a black and white drawing are preserved.
This protects the quality of the final result.

Start with a simple 24bit RGB drawing in black and white
(see my snowman drawing).
Be sure to use the default color palette.

Note: If your drawing is a GIF document you must convert it to 24 bit color
because pasting an indexed image into a 24 bit image causes the
color palette to become confused.



Select all the document and copy to clipboard.
Save the clipboard to disk.

The original image is still in mtpaint document window.


Use the paint brush or fill bucket to color the document.
Don't be afraid to use gradients or change opaque levels.
You can paint over black lines (see below).



Once the coloring is done, the last step is to fix the
black lines.

Edit > Load Clipboard

(If the clipboard and document size are the same,
then there will be no need to move the selection)

Set the A and B colors to white.

Selection > Alpha Blend A,B

(the clipboard paste now becomes transparent)

Press <ENTER> then ESCAPE keys to set the selection.

Save the finished image to disk.



Note that no layering or masking was used.

_____________________________________________

Next a more advanced example which uses a mask.

Make a clipboard file as in previous example.
Mask a region where you want a gradient.
Pour paint with paintbucket (low tolerance to paint over black).



Disable the mask.
Then load and paste clipboard like in previous example.
(Make sure that A/B colors are white to make white the transparent color)
There should be no need to move the loaded (pasted) selection
in the document window if document size hasn't changed.
Delete the mask ...

Channels > Delete

Proceed to mask another region if you wish.
(Gradient will need to be reset to new region of image as well)

This way you can color your entire image in different colors.
Note that the layers feature in mtpaint hasn't been used.
This technique is called 'alpha blending'.
Greys are pasted as well as black. This preserves quality.
Remember the way it is used. Both the A and B colors are set to the
color that you want to be the transparent color in your paste
(white in this example).


___________________________________________

[don570]

Another example..

- draw with several colors into a document with a black background
(or choose some other color to be your background)



- select and transfer to clipboard ( Ctrl-C )



Open a new image

File > Open

(or if you wish, you can work in a second layer)

Paste your drawing (CTRL -V)

- Change both color A and color B to black
(assuming that black is the background color).

- from the menu choose
Selection > Alpha Blend A,B

This has created a transparent paste.




The problem with this method is that anti-aliasing such as anti-aliased text
will have a strange outer border where the black changes to another
color. See the next example for a possible solution...

____________________________________________________

Another example ...

Transfer a gradient into an image



- select and copy the desired region
Edit > Save Clipboard > 1

- in the destination image set colors A and B
to be the same colors used in gradient .... red and black in this example.

- load and paste the selection
Edit > Load Clipboard > 1

- from the menu choose
Selection > Blend color A,B

Final result...


___________________________

[don570]

Replacing a head on a person's body is a common use of a paint program.
Mtpaint does this simply and quickly without the need of layers or
an alpha channel, just use a selection channel. I find it
simpler than Photoshop or Gimp.

First start with a source image to select a head.
Do a scaling if necessary

Image > Scale Canvas

You can change the hue of skin if necessary as well.

- The source head needs to be equal or slightly
bigger than destination head, but you don't need to be exact.
A crude approximation is all that is necessary.



__________________________________________________

To begin the selection process ---> Go to menu

Channels > Edit Selection (cleared)



With a brush tool paint the outline of head (don't go outside head) see image below


______________________________________________________

Use paintbucket tool to fill inside. This speeds up the process. (see image)


____________________________________________________

To fuzz the outer border of selection
use a gaussian blur to blur several pixels around the head.
The box doesn't need to be ticked. A number less than 10 is
possible if you are careful to select only the head region.
Note that this is the selected region that is being fuzzed not the image itself.





__________________________________________

Now return to editing the image itself. Use the menu...

Channels > Edit image

______________________________________________

- Select all (Ctrl-A)

Now select just the source head. Use the menu...

Selection > Lasso select

This puts the head in the clipboard,
however for extra safety, save the head to your hard disk.

Edit > Save Clipboard > 1

_________________________________________

Open the destination image in mtpaint.



If the head is too big then use smear brush to make
the head smaller. Stroke direction to the interior of head.



Now paste the source head. It should be
nearly impossible to see an outline. See final result...


______________________________________________________

[Pelo]

wonderful enfin on avance. Don 570 puppy tools are mini, but efficient. If we use all the properties of MTpaint, we can do a lot of things.
Thanks for this tuto
For titles i was using Gpaint here, easy to do.

[oui]

related pages: see please here

[don570]

It is possible to do the same work with the alpha channel.
I will demonstrate with the same head.

-go to menu

Channels > Edit Alpha (cleared)

Channels > View Alpha as an Overlay

Zero Alpha is shown by the blue hue



With a brush paint tool draw the outline of head (don't go outside head)

Use paintbucket tool to fill inside
These will be regions where alpha = 1

-use a gaussian blur to blur several pixels around the head

Now go back to editing the image, however alpha channel will remain.

- Channels > Edit image

If you wish you can add more paint. In this example I added a border
using the cut tool with gradient on.



- Select all (Ctrl-A)

- now select just the source head with its border

Selection > Lasso select

-This puts the head in the clipboard,
however for extra safety save the head on your disk

Edit > Save Clipboard > 1


If you want to edit with Gimp you should save the file as a PNG with no transparency i.e.
transparency index = -1

Gimp will open the image with four channels including alpha.

or alternatively you can use the system clipboard
Edit > Export Clipboard to System

Then in Gimp 2.8 in Puppy linux , paste into an opened file or create a new file...

File > Create > From Clipboard

Note that checkered pattern in Gimp means transparency i.e.
alpha = 0 in that region. You can do further editing in Gimp.
Note that there is four channels in a Gimp layer.
Alpha is the final channel. Here's the final result in Gimp...


____________________________________

[wjaguar]

It is possible to do the same work with the alpha channel.

It is also possible to do it with selection, and then turn result into alpha. Or vice versa.
In "Channels->New": channel type = Alpha, initial channel state = Selection. Or type = Selection, state = Alpha, for the reverse.

[don570]

Here is an example to make an oval cutout of a man's head plus a border.
I use the alpha channel. As well using the cut icon button will leave
a gradient in the cut selection.

______________________________________________________

Steps:

Start the same way as the previous example....

Channels > Edit Alpha (cleared)
Channels > View Alpha as an Overlay

Make a selection rectangle around the head

Selection > Fill ellipse



We have just chosen the head region.
Now we will make a border.

Channels > Edit Image

Right click on gradient placement tool icon
and set Length 10 and Linear. Color A red and Color B black.

With the same selection rectangle active
make an oval with the gradient placement toggled on

Selection > Fill ellipse



Now select and transfer to clipboard.

Paste in a white image and here is the result.
Note the fuzziness of the border. This is made possible
by making the border outline with the gradient placement toggled on.


_______________________________________________

[don570]

Here's an example to show colorful text.
Note 1: EDIT : Works in Windows version mtpaint 3.40
Note 2: To place a selection in place you press <ENTER> then <ESC>

Toggle on 'Snap to Tile Grid'

View > Snap to Tile Grid

Settings toolbar should be showing

Right click on gradient placement tool icon
and set Length = 100 and type = Linear.
( set Length to 60 for a more dramatic effect)

-Set color A to red and color B to orange. Click preview
to see the blend of colors in the settings toolbar.

Place the gradient line vertically

Note: It is NOT necessary to right click on the paintbucket tool and
choose 'Gradient-driven'. The default settings are fine.

Make sure that the gradient mode is set. You can use the gradient icon
in the settings toolbar window to toggle the gradient on and off.

Use the paintbucket tool to make gradient paint .



Turn off 'Snap to Tile Grid' feature

Now we will create an alpha channel i.e. there will be transparency around the text.
Channels > Edit Alpha (cleared)
Channels > View Alpha as an Overlay
-Click on text tool, choose text size 48 and bold.
Click the inverse option box.

- Click 'Paste text'. The text is in your clipboard.
Paste it in your document (see image below)




Channels > Edit Image
Select all (Ctrl-A) and copy to clipboard (Ctrl-C).
Save it to disk by going to the menu

Edit > Save Clipboard > 1

Now create slightly bigger fuzzy black text . We will use the alpha channel to fuzz
the text. Create the alpha channel.

Channels > Edit Alpha (cleared)

(Not necessary) Channels > View Alpha as an Overlay

Click on text tool, choose text size 50 and bold.
Click the inverse option box.
Click 'Paste text'. Now do a Gaussian blur of 5.



- To edit image go to menu

Channels > Edit Image

Select all and copy to clipboard

Edit > Save Clipboard > 2

Now you can construct the final text by combining both clipboards
in one document. White was chosen as the background, but
any other color is possible.

Here are some examples of various colors used for the text,
red to orange, red to yellow , dark blue to turquoise,
dark green to light green


_____________________________________

[wjaguar]

Click the inverse option box. (Version 3.40 doesn't have this feature)

How so? It does, just like 3.44.xx.
When pasting text into any of utility channels, you have "Invert" - in place of "Background color" which you get for image channel.

[Pelo]

moi en anglais j'y arrive pas.can you do a video please, because i don't understand anything. I am using Mtpaint, trying to re-do what is explained, nothing works. It's not yr fault, it's mine.
Paste : ok, but it's not really pasted, if you sve image.
fill; how to fill exactly the outline ?
Invert colors a and b
Transparency
Nothing works...

[don570]

can you do a video please

Your lucky day I happen to be learning how make video tutorials

Here it is...
Edit : Better pronunciation

http://www.datafilehost.com/d/f0b8dc3f

It assumes that you know something about the alpha channel.

Remember that every pixel in an image layer has four values associated with it.
Red Blue Green and alpha. If alpha is zero then the layer is transparent
i.e the paint below it will show.
If alpha is one then the color will show. Values between zero and one
give a transparency effect. One layer's pixel interacts with another layer's pixel in
an interesting way.



I wanted to avoid using a video editor and a microphone , and use a cheap PC.
Here's how I made the video.

1) Write a script

2) Play the script using espeak

Code: Select all

espeak -f script

3) Make changes to script to change pronunciation

4) Create a wav audio file of script
espeak -f script -w output.wav

5) Use Retrovol program to set capture volume and source 'MIX MONO'

6) play audio of script in background while I record screen
with pavrecord

I used 5 frames per second and X264 encoder. My screen resolution was
800 by 600 to make the text size bigger.

vlc player will play the file fine however I couldn't get a video editor to
open the file
________________________________________________

[Pelo]

It assumes that you know something about the alpha channel.
NO !
Video are easy to do. I can help you. Donnant Donnant
I am ready to study the Mtpaint application. Let me some time to go around.
But in english, it's not easy at all. Sure, video movies are easily understood by everybody. Speach : speak slowly please, for non commonwealth citizens.
Some audio are from USA Texans, awful. Furthermore they speak very loud as brazilian speakers watching their team winning the world cup futbol finale.
Don570, i am very interesred in your works. The good way to improve Puppy world, and to keep customers (users).

[Pelo]

Full screen :
Use drec (dpuprec) after having set up alsamixer or retrovol sound capture (make capture active, because disabled by default)
Start, don't forget comments during the recording !
Stop recording by CTRL alt "S" (stop) . let it cook, you will have a message when finished (choose the format)

Xvidcap : idem, activate capture in retrovol. Xvidcap can record the exact zone you want.
But it's so easy. I do it so everybody can do it.
E-speak ????? better to use google translation, you have a voice that reads the text ( as a robot).
one minute how to (xvidcap)

[don570]

I found an excellent free site that converts text to speech

http://www.fromtexttospeech.com/

I will redo the video with the improved pronunciation.

__________________________________________

[bill]

Fine business on your "mtPaint - Simple paint tutorial"don570 ! ,which I use both mtpaint and Gimp in trying to make small pictorial "How to" files for doing
basic functions in Puppy. This to my way of thinking is the way to go to inform
those like myself who are less informed on the ins and outs of Puppy Linux.Keep up the good work ! cheers

[don570]

I'm working on a tutorial to show how to put the head in a polygon.
I'll make a video with this script.

Let us make a polygon.
Open image file.
Show settings toolbar.

R G B image

Make a polygon shape with the polygon tool.

Copy shape to clipboard.
Create a new layer using the clipboard.

Choose Edit mask.
Make a rectangular selection around the head.
Choose Fill ellipse

Choose Gaussian blur two.

Choose edit selection.

Choose Gaussian blur one.
Choose edit image.
Right-click paint bucket.

Increase to Two hundred.


Paint with paint bucket tool.
Select all and copy to clipboard.
Paste into a new document.
The End.

_________________________________________________

Here is my first try at a video. I'll try a second time with better
audio from http://www.fromtexttospeech.com/

http://www.datafilehost.com/d/189547fc

_____________________________________________

[don570]

A small change is all that is needed to make the star's color a color gradient.

Make sure that a radial gradient is chosen.
Color a red Color B yellow

To show the transparency as checkerboard pattern---> copy and
choose from the menu....

Edit > Paste in New Layer



______________________________________

[don570]

To make a crude polygon border a scaling can be used rather than cutting
a selection. Here's how I did it...

- open an image document
-make a star pattern with polygon selection tool
-copy the clipboard (Ctrl-C)

-Make a new layer

Layers > New Layer (from Clipboard)

Channels > Edit Selection

To remove jagged edges do a gaussian blur of one or two
Return back to editing the image
Channels > Edit Image
Set all (Ctrl-A)
-copy the clipboard (Ctrl-C)

Edit > Save Clipboard > 1


Scale the image to be bigger by going to the menu...
Image > Scale

To remove jagged edges do a gaussian blur of one or two
_____________________________________________________

Return back to editing the image by going to the menu...
Channels > Edit Image


To make the polygon region bigger

Image > Scale Canvas


Right-click the paintbucket icon. Set tolerance to 200.
Using paintbucket tool fill document with a color (or gradient color)
by clicking with paintbucket tool in yellow area.
Load the previous smaller polygon by going to the menu...

Edit > Load Clipboard > 1
You may move the selection if desired.
Make sure that selection is dropped in document.



Select all (Ctrl-A)
-copy to the clipboard (Ctrl-C)
Make a new layer by going to the menu...
Edit > Paste to New Layer
Important note: Do not use the layers' menu

Save this layer to a file (PNG format with no transparency).

Now open the file in another paint program that supports PNG.
and transparency is shown by checkerboard pattern around the polygon region. Final result...

[bill]

@don570 :don ,for some reason I can't load a clipboard ? Can you explain what my problem may be.Thanks