Saturday 22 November 2008

File Picker

During 2007 and 2008 I designed and implemented a new file picker for mtPaint. Dmitry then refined my efforts to make the picker even better, with the final results now in version 3.30 of mtPaint:


Designing and implementing a new file picker was a big effort but I felt I had no choice due to my increasing frustration with the existing GTK+ file pickers. For a few years I tolerated the Motif style GtkFileSelection, but the time finally came to improve things. I also found that the GtkFileChooser is even worse due to its lack of functionality compared to more orthodox and mainstream file pickers.

The general design of the new mtPaint file picker was deliberately conservative as I was looking to preserve the simplicity and ease of use I have seen in programs like OpenOffice, and most Windows/Qt/KDE systems.

The picker also has the luxury of tab completions and wildcards. If you type "p" into the entry box and press tab, only files beginning with "p" will be displayed. If you type "dsc*.jpg" into the entry box and press tab, the file list will only display files beginning with "dsc" and ending with ".jpg". As you would expect the * wildcard represents any number of characters and the ? wildcard represents exactly one character.

I consider this new design to be far better than the rather feeble GTK+ designs, but some people may prefer the GtkFileSelection dialog, so if that is the case you can re-compile mtPaint with:

./configure gtkfilesel
make

I have also started using this new picker in my other programs such as my 6502 disassembler mt6502dis and my spreadsheet mtCellEdit. As well as my own programs this new picker can be added to any GTK+ program, so I decided to add it to Leafpad: I call this fork mtLeafpad.

Colour Ramps & Palette Copying

Version 3.30 of mtPaint has some new tools that allow you to easily create smooth horizontal or vertical ramps on the canvas. See section 4.8 of the handbook for details on ramps.

For this example I want to demonstrate how easy it is to use these tools to create a smooth palette based on just 4 primary colours. Lets start by following these steps:

* Create a new RGB image with a size of 16x16.
* Place 4 colours in the corners of a 5x5 square (red, yellow, white and black in this case). This is a screenshot of what this looks like:


* Use the rectangle selection to outline a 5x1 rectangle from the red pixel to the yellow pixel.
* Use the Selection menu to choose the horizontal ramp.
* Repeat these steps for the white and black pixel and you should see this:


* Select the full 5x5 area of the canvas and select the Vertical Ramp option from the Selection menu.
* Lastly choose the "Copy to Palette" option from the Edit menu and you should get these smooth blends in the palette like this:


This is a uniform 2 dimensional palette. Its also possible to create non uniform 1 dimensional palettes. To try this out follow these steps:

* Create a new RGB image at size 25x5.
* Place different coloured points at random positions along a line like this:


* At this point we need to use the rectangle selection and the horizontal ramp as above to fill in each of the gaps. As an aid to productivity I used the menu tear off the feature by clicking the horizontal dashed line at the top of the Selection menu like this:


* Select the whole line and then choose the "Copy to Palette" option from the Edit menu and you should get these smooth blends in the palette like this:

Sunday 9 November 2008

Uniform Colour Cube Palettes

I have always had an artistic penchant for high contrast small palettes. The best way of generating high contrast palettes with equally spaced colours is to chop up the colour cube in a uniform fashion. The default mtPaint palette does this with the first 8 colours which are the 8 corners of the RGB colour cube.

These 8 colours are formed in the 3 RGB dimensions by 2 divisions (i.e. 2x2x2). However a 256 colour palette is large enough to house several other palettes:

3x3x3 27 colour palette

4x4x4 64 colour palette

5x5x5 125 colour palette

6x6x6 216 colour palette

If you are a C language programmer you might be interested in trying out the program I wrote to generate these palettes and images:

pal3456-0.2.zip source code

I have used my own libmtpixel library to make palette and image creation possible with just a few lines of C code.

Dithering Effect

As explained in section 6.8 of the mtPaint handbook, the "Convert To Indexed" tool in the Image menu is very powerful and allows many types of effect to be created on photos or other RGB images.

Here is a photograph:


I then converted this to 32 colours using a PNN quantize, and the "Dithered (effect)" option:


If you look closely, you can see that the dithering adds its own texture to all of the objects in the image, perhaps similar to fabric or canvas.

To see the above images in all their glory you will need to click them to view them at 100%.

Pointillism & Stippling Effects

Pointillism is a style of painting which can produce some very interesting results by blending just a few primary colours. When creating paintings like this manually it can take an inordinate amount of time as each dot is individually placed. However, mtPaint is able to create these images quickly and easily with a large amount of control over how the colours and dots are chosen.

Here is a photograph:


By using the "Convert To Indexed" tool in the Image menu I created this:


I used 8 colours, Use current palette and Floyd-Steinberg options. I changed the default settings to use Separate/Split error propagation with a propagation value of 90.

To see the above images in all their glory you will need to click them to view them at 100%. As you can see from the results, although only 8 colours have been used, mtPaint has been able to blend the coloured pixels well enough to capture the essence of the original colours.

A related technique is stippling, where only 2 shades are used. This is most commonly done with a black ink pen on a white page. This can be done in mtPaint as you can see from this image:


I achieved this by loading the original JPEG, moving the white palette colour 7 to position 1 (hold the shift key, left click the white colour 7, and drag it to position 1 and then release the left mouse button), and then doing the same steps as above, but having only 2 colours in the final image.

To learn more about the specific options in the "Convert To Indexed" window, see section 6.8 of the mtPaint handbook.

Wednesday 22 October 2008

Keyboard Shortcuts

The keyboard is often a sadly underused input method for graphics programs. mtPaint doesn't fall into the trap of being "mousebound" as it contains many keyboard shortcuts that can greatly increase productivity and the pleasure of painting.

For example you can use the arrow keys to move the cursor by one pixel at a time. When you hold the shift key down as well you "nudge" the cursor by a pre-determined amount as set by the preferences window (press CTRL+P to set this value). By selecting a round brush (by pressing F3) I was then able to create this screenshot by moving the cursor with Shift+Arrows and then the Enter key to commit the brush action:


I was able to quickly change the brush colours by pressing the "[" and "]" keys which change the current colour A. Colour B can be change by using Shift and the same keys. Colour B is used if you ever want to paint using one of the pre-defined brush patterns, which can be chosen by pressing the F2 key:


Another useful set of keys regard the zoom feature. If you press the "6" key you will immediately be zoomed in to 800% like this:


Other number keys zoom to different percentages, with 4 returning you to 100%. The "+" or "-" keys zoom up or down by one level. You can then quickly navigate around using the pan window by pressing the "End" key, and then use the arrow keys to move the main view:


There are many other useful keyboard shortcuts. Some are listed alongside the menu options, and the others are listed in the mtPaint handbook in section A.1.

Tuesday 21 October 2008

Brush Spacing In Non-Continuous Mode

As explained in section 3.5.1 of the mtPaint handbook, it is possible to paint on the canvas in continuous or non-continuous mode so that brush points are either joined together or spaced apart. Normally continuous mode is preferable for sketching and painting, but non-continuous mode allows some interesting effects to be achieved.

For this example I shall be painting with non-continuous mode and with opacity mode switched off, so I press F7 to display the settings toolbar and then adjust as follows:


I then right click on the continuous mode icon to set the brush spacing:


Now I can select a brush and colour of my choice and paint on the canvas with equal spaces between each of the brush marks on the canvas:


Brush spacing also works well for pasting so I created this by dragging and pasting a piece of clip art:


The clip art I used was this:

To get this clip art as a paste I needed to start another instance of mtPaint, load the blue orb, press Ctrl+A to select the image, and then Ctrl+F9 to save this as image 9 in the multiple image clipboard. I can then load this clipboard into the first instance of mtPaint by pressing Shift+F9 and start pasting with it.

While you have 2 instances of mtPaint running, there is another trick you can try. If you change the hue of the blue orb (press the "Insert" key to display the transform image dialog) you can change the orb's colour:


By using the multiple image clipboard you can then easily switch between colours for pasting with say Shift+F7, Shift+F8 and Shift+F9:


Another trick to try is where you set opacity to 40 and then brush spacing to 1 which creates these effects:

Monday 20 October 2008

Colour Protection Mask

When I first created mtPaint in 2004, one of the most important features I wanted was a colour protection mask (as described in section 3.3.4 of the mtPaint handbook). This feature allows the artist to protect certain areas of the canvas according to their colour so that they don't get painted over.

To demonstrate the value of this feature, here is a simple example. Firstly I create a new RGB image in mtPaint with a size of 500x400 pixels. I then create a hill effect using a round brush with colours 227-230 from the default palette, and then a few birdlike creatures in the sky, as per this screenshot:


At this point you can quickly test the protection mask by clicking on the area to the right of colours 228-230 in the palette, which should bring up the crosses to show that these colours are now protected:


To test this protection we can scribble a new colour across the canvas:


As we can see the 3 colours in the hills have been protected. However the black background, the white birds the the rearmost green shade have not been protected. Before we colour the sky, we must therefore also protect colours 227 and 7 in the palette.

The simplest way to create a sky in mtPaint is to use the gradient tool. Firstly you select the 2 colours you wish to use at either end of the gradient so left click on colour 4 (blue) and right click on colour 7 (white). Now you must place the gradient start and end points so choose the gradient placement tool from the toolbar. Lastly you left click near the top of the canvas and then left click further down which should result in this:


Notice how this preview still respects the colour protection mask as the birds have not been hidden in the same way as the unprotected black canvas. The next stage is to configure the gradient so that there are no black bands above and below the start/end points. To do this right click on the gradient placement icon on the toolbar which should bring this dialog up:


You should then change "Extension type" to "Level" which extends the colours beyond the end points. If you click OK you should then see this new gradient in action. At this point the gradient has not been committed to the canvas so you can move the endpoints to suit your artistic whim. To do this simply click near an endpoint, move the mouse to the new point and then click again to fix the new position:


At this point I am now happy with the results so I want to commit this to the canvas. Firstly I must switch the painting mode to use the gradient, so I press F7 on the keyboard to bring up the settings toolbar:


I must then click the gradient bar so that gradient mode is switched on. The easiest way to paint this gradient over the whole of the canvas is to paint a rectangle over the whole picture. To do this press Ctrl+A, and then click the "Fill Selection" icon on the toolbar which should then commit the gradient paint to the canvas. If you intend doing any more painting with other tools, remember to turn the gradient mode off so you can paint as normal. Here is the final picture: