Learning objectives

When you have completed this session, you should be able to

• define term "paintbrush modes",
• make adjustments in a picture,
• transformate the image,
• save a picture,
• use filters,
• write a text in a picture,
• create buttons.

Paintbrush modes

In case of most operations when new points are placed in the picture Gimp offers the adjustment of paint mode. Paint mode defines how to paint the new point in the designated part of picture and what effect the original color of the picture have on the painting. Since applying modes requires great experience in the description below the reference is taken from Deke McClelland; the author of Photoshop Bible.

Influence the way of drawing

In normal usual mode the result is the adjusted color of the pixel;

Dissolve: this mode spreads colors accidentally around the brushstroke;

Behind can only be applied on transparent layer. It looks like colors put behind the layer thus it paints only on transparent areas;

Influence colors

Multiply: it multiplies the original color and the color of the drawing. This way it creates a third color. The effect is similar to when making lines on top of each other with highlighters;

Screen: it is the opposite of the previous mode. The created color is lighter than the original one.

Overlay: the mixture of two colors results a bright transmission.

Soft light places soft gazing color layer in the picture.

Hard light has an effect as the picture has been treated with a dense, more non-transparent solvent. Shadows can be deepened and bright areas can be highlighted.

Color dodge: this mode lightens the pixels of the picture respecting the lightness or darkness of drawing color.

Color burn: this mode darkens the pixels of the picture by respecting the lightness or darkness of drawing color.

Darken changes the color of picture only when the selected color is darker than the color of the original pixel.

Lighten does the opposite of the previous one.

Difference subtracts from the brightness value of the picture the brightness value of the drawing. If the result is negative changes that to positive.

Exclusion the “official” way of how it works is possibly the fuzzy-set theory. Applies symmetric difference in all channels. It is better to try it first.

Hue applies the hues of the drawing colors without changing the saturation or brightness of the picture.

Saturation corresponds to the previous one for saturation.

Color changes the colors and saturation of the picture without changing brightness values

Luminosity changes the brightness values of pixels without changing coloring and saturation.

Adjusting the Picture

The task is to correct the colors of bad photos or badly scanned pictures. The commands of Colors menu are used. We point out the most important ones among them.

With Levels command the adjustment of levels can be done.

With the help of curves the levels can be adjusted in a graphically.

Color Balance adjusts the balance of colors.

Brightness-Contrast regulates the brightness and contrast of the picture.

In the Hue-Saturation window the coloring of the picture can be influenced.

With the help of Colorize command saturation of colors can be fully decreased and this way gray colors can be created.

The next two menus are designated to adjust colors.

Threshold level converts the picture into a black and white picture according to the given intensity (the smaller values become black while the higher ones become white).

Posterize command modifies the picture to look like a poster. It builds a picture that has homogeneous, single colored areas. The number of colors per channels can be given.

No need to say that this effect only involves on the active layer.

Levels

The ratio of lighter and darker portions of colors in the picture can be adjusted. In the Channel list we can select the channel we intend to adjust.

A large part of the window is made of a graph [ROSSZ LINK!!!] (histogram) showing the amount of colors (or rather the amount of intensity).

On the horizontal axes of the graph [ROSSZ LINK!!!] from 0 to 255 the intensity is shown. The graph [ROSSZ LINK!!!] shows in what ratio each intensity exist in the picture. If, for example in the beginning of the graph [ROSSZ LINK!!!] there are small values that means small intensities (darker colors) are represented in small number in the picture.

Input levels: if the left side input level is adjusted to a higher value than 0 intensities under will be changed to the smallest intensity. So, if for instance we put 50 here all intensity values under 50 will be changed to minimal intensity (in default setting it is 0 which is black) and will darken the picture.

Intensity values having higher level than the right side input level will be changed to maximal intensity values (the default parameter is 255). If 180 is entered in this gap all colors having higher intensity will be changed to maximal intensity. This effect lightens the picture.

The middle input value shows the location of middle tone (mid-gray) between the darkest and lightest intensity. If this value is closer to dark the ratio of dark areas decreases lightening the picture this way.

Output levels define which intensity is to be the smallest or the biggest respectively. If for example we enter here 60 and 220 there will be no color in the picture with the intensity under 60 and over 220 greatly decreasing the contrast of the picture this way.

Hue-Ssaturation

With this function the colorings of the picture can be modified.

With the Hue slide the shading, with the Lightness the lrightness, and with the Saturation the saturation is defined.

When Preview switch is being active modification become visible right at the moment. By adjusting slides properly the picture contains only the shades of the color selected. With this technique pale yellowish brownish shaded pictures can be created that look like the old ones.

Cutting pictures

With scanned pictures often happens that not wanted bright lines appear at the edges. Maybe the picture is a bit tilted or larger than needed etc.

In this case the edges of the picture should be cut off. Certainly there might be several other reasons for cutting pictures. For examples we may need only a part of a larger picture.

Cutting pictures can be made in two ways.

First, with the help of the Cut Tool This is similar to rectangular selecting but after having the selection four small boxes appear and in the dialogue window the cutting can be adjusted precisely. When finished click on the Cut button and cutting will be executed.

Another solution is to make the area selected with the rectangular selection than use the Cut picture command from the Edit menu.

Transformation and resizing of full pictures

Sometimes the entire picture must be rotated or a mirror image has to be made. To do this select the right command from Transform Tools at Tools menu.

Resizing a picture can be done with Scale menu at Tools.

The new size can be defined at Scale size.

When choosing the Scale command of Tools menu the printing size can be defined If the resolution is selected here (X, Y resolution) the picture is scaled properly.

When the Link switch is connected the program saves the ratio of the sides.

The algorithm of scaling can be selected from the opening list of Interpolation. The Cubic gives the nicest result the None gives the coarsest (but this is the fastest executed).

When adjusting quality not only the typographic resolution and the printed size can be defined the picture size measured in pixels is also changed so the difference between the sizes becomes visible on the screen.

Drawing modes

For most operations when placing new points in the picture Photoshop offers the opportunity for adjusting the mode of painting. The mode of painting defines how the new points of the picture should be painted in the given location and what sort of effect the original color of the picture has on the painting. Since using modes requires a lot of experiences in the description below we refer to Deke McClelland the author of Photoshop Bible.

Influence the method of drawing

In normal usual mode the result is the adjusted color of the pixel;

Dissolve: this mode spreads colors accidentally around the brushstroke;

Behind can only be applied on transparent layer. It looks like colors put behind the layer thus it paints only on transparent areas;

Influence colors

Multiply: it multiplies the original color and the color of the drawing. This way it creates a third color. The effect is similar to when making lines on top of each other with highlighters;

Screen: it is the opposite of the previous mode. The created color is lighter than the original one.

Overlay: the mixture of two colors results a bright transmission.

Soft light places soft gazing color layer in the picture.

Hard light has an effect as the picture has been treated with a dense, more non-transparent solvent. Shadows can be deepened and bright areas can be highlighted.

Color dodge: this mode lightens the pixels of the picture respecting the lightness or darkness of drawing color.

Color burn: this mode darkens the pixels of the picture by respecting the lightness or darkness of drawing color.

Darken changes the color of picture only when the selected color is darker than the color of the original pixel.

Lighten does the opposite of the previous one.

Difference subtracts from the brightness value of the picture the brightness value of the drawing. If the result is negative changes that to positive.

Exclusion the “official” way of how it works is possibly the fuzzy-set theory. Applies symmetric difference in all channels. It is better to try it first.

Hue applies the hues of the drawing colors without changing the saturation or brightness of the picture.

Saturation corresponds to the previous one for saturation.

Color changes the colors and saturation of the picture without changing brightness values

Luminosity changes the brightness values of pixels without changing coloring and saturation.

Saving Pictures

In order to save every information Gimp is able to use (layers, alpha-channels, effects, layer masks, etc.) the picture must be stored in the program’s own format. It has an xcf extension. Saving can be done by choosing Save or Save as from the File menu.

If we intend to save the picture in some other format, for example jpg, we can choose the Save Copy command too. This way a copy of the picture is made in the chosen format.

If the picture is explicitly created for a web page chose jpg , gif , or png formats. The formats offer new adjustments We can also take a look at the compressed picture if the preview box is checked.

Adjusting the different types of pictures

In JPG the quality of compression, smoothing, or optimizing can be adjusted. Progressive jpg picture appears constantly in the browser. In the beginning in poorer quality than, as there are more and more data available, in better quality.

The interlaced selection of GIF similarly to progressive jpg in the beginning provides a poorer quality than, as more data available the quality is improved.

In PNG interlaced display, the compression can be selected too. Moreover if ticking are removed from some boxes the size can be decreased. The definition of the picture, the date of creation or notes might all be unnecessary when making pictures for web pages.

Using filters

By using filters picture can be greatly modified. Gimp knows numerous filters and the number of these can be extended with adding Plugins. These modules can be simply copied in the right libraries or can be installed. Following this new filters appear in the Filters menu.

Due to the fact that there are many filters and they have several adjustments they are not described here.

The description of most filters can be found in Photoshop 5 Bible from and most of those can be found in Gimp as well.

Sample Drawings

Creating patterns for web pages

As we know browser programs fill the background of the web page with a given picture mosaic-like (if there is such). Pictures for backgrounds must be created the proper way. It has several practical ways. Small rectangular picture looking like a homogeneous texture (joining are not visible);

Tile pattern. Using the mosaic-like order we can make a pattern looking like tiles;

Long, narrow horizontal lane. If the browser displays it in tile format the pattern will be created from the lines that get under one another (usually it is in some vertical order or horizontal color transmission).

Making texts

On web pages often found some nice texts made by some picture editor programs. Gimp can also create such texts. The result only depends on us. Adding new plugins gives even more opportunities.

Let us make texts

Do not forget when making texts with Gimp that it must be always created on a new layer. It is a special layer, the text layer. On the Layer page there is a capital T as a reminder. When double clicking on this T the text can be edited.

Certainly, there are some features that cannot be applied for the text layer. First it must be rastered. From that stage it cannot be edited any more; becomes a set of pixels.

Rastering can be done by clicking with the right button on the layer and from the local menu drop text information. Rastering should be done when the text do not need further editing.

Creating simple buttons

Practically any kind of button can be created with Gimp. The number of variations is infinite. Imagination means the only limit.

Usually a button has three different images for the different states.

In normal condition the cursor [ROSSZ LINK!!!] is not located above the button.

The next condition is when the cursor [ROSSZ LINK!!!] is above the button. In this case there is some visual change (that might be accompanied with a sound effect) on the button.

The third condition is when there is click with the mouse on the button (the button is pressed).

There might be a switched off condition (the button is inactive and cannot be pressed). It is very rare on web pages.

Let us look at some buttons.

These examples are only for illustration. All of them can be further developed or can be a starting point for creating an individual button