Digital Learning

Image Editing with Paint.Net

CHAPTER 1: Understanding the digital image

A digital photograph consists of a rectangular grid of tiny squares called pixels similar to a needlepoint or a tile mosaic.

The small size of each pixel creates the illusion of continuous tone.

Enlarging the image reveals the actual pixels.

3 Ways to describe a digital image 1) Pixel dimensions

This is simply a counting of the number of pixels along horizontal & vertical axes. This is determined by settings you choose in camera.

Canon and Nikon camera menus

Pixel dimensions are the best way to describe your image. They tell you exactly how much information you have to work with.

Digital Learning

2) Total number of pixels

Length times width. Measured in ‘megapixels’.

The greater the number of pixels in your image the larger size you can print and maintain fine detail.

3) File Size

Indicates how much space your image takes up on a hard drive or in your computer’s memory. Usually measured in megabytes or kilobytes.

If you save your image as a JPEG, this file size will be affected by the quality setting you choose.

Saving an Image JPEG vs GIF.

The two most popular image formats for the web are JPEG (JPG) and GIF. These

formats represent very different approaches to the problem of delivering an image

with minimum file size and download time.

While GIF is great for computer generated images with limited palettes, JPEG is far

better for photographs. It gives better quality images for the same file size. Below is a

comparison. The image on the left is a blowup of a very small region of a large image

compressed with JPG. The image on the right is the same region compressed using

GIF. The GIF file is 2.4 times bigger than the JPG, but is clearly of lower quality.

Digital Learning

Resolution In your camera or on your hard drive, a digital image has no inherent physical size ...

it’s just a series of numbers.

It only gains physical size when you display it as a print, on a monitor, or project it.

The way you determine this size is through setting the resolution; by saying how

many pixels will fit into an inch.

Resolution is the density of pixels in a displayed image.

The unit of measurement for resolution is pixels per inch (ppi).

The greater the pixel density (a higher ppi number); the smaller each pixel must be to

fit into the given measurement and the better illusion of continuous tone will be.

Referring to your image only by the ppi resolution is almost meaningless. It's like

saying, "I have 6 inch tiles on my kitchen floor. How large is my kitchen?" You must

know the pixel dimensions in addition to the resolution to make any sense of the

image.

Resizing an image

When resizing an image it is important to remember the difference between changing

the height/width and changing the number of pixels. Resizing an image by changing

the original size by a Percentage or by increasing the height/width in Print size does

not change the number of Pixels in the image. This means that increasing the size of

an image in this way can reduce the quality of an image in terms of sharpness and

detail. This is because the number of pixels in the image remains the same but they

are spread over a greater area.

Digital Learning

If you choose to modify the print size of an image, the pixel size will be based on the

resolution, which defaults to 96 pixels per inch, which is the same as 37.8 pixels per

centimetre. For example, if you specify the image to be 1 inch wide, and the

resolution is 96 pixels/inch, then the image will be resized to be 96 pixels wide.

You can use this dialog to affect the print size of an image by adjusting just the

resolution. Note that if you only modify the resolution of the image, the pixel size will

remain the same and no resampling is performed.

There are multiple types of resampling that you may choose. "Resampling" is the

process of computing what the new pixels should be based on what the old pixels

are. Some algorithms produce better looking results, but take longer to complete. It is

recommended that you use the default option, "Best Quality," unless you have a

specific need for and understanding of the other choices (Bilinear, Bicubic, and

Nearest Neighbour). Best Quality will automatically choose either Bicubic or Super

Sampling depending on the new size that you specify.

Key Points to remember:

High resolution = Best Quality + Big Prints (difficult to send via email and consumes lots of hard drive space).

Low Resolution = fast emails + lots more pictures

Cropping a picture will result in less quality of image when enlarged to original size.

Digital Learning

CHAPTER 2: Working with Paint.Net.

Main Window Components

The Paint.NET user interface is broken up into 10 major areas:

Paint.NET Main Window

1. Title Bar

This tells you the name of the image you are working on, as well as the current zoom level and the version of Paint.NET you are using.

2. Menu Bar

This is where you can access the various menu items. Quite often, commands accessible from this location will be referenced using Menu → Command notation. For example, File → Exit means to click on the File menu, and then click on the Exit command.

3. Toolbar

Immediately below the menus is the toolbar. It contains several buttons and controls for executing various commands and adjusting parameters for the active tool.

Digital Learning

4. Image List

Each image that has been opened has a thumbnail displayed in the image list. This works much like a tabbed web browser: just click on an image to switch to it.

5. Image Canvas

This is where the image is shown, and is the area where you may draw and perform other actions.

6. Tools Window

This where the active tool is highlighted, and where you may choose from other tools.

7. History Window

Everything you've done to an image since you opened it is listed in this window. You may step forward or backward in the History window by clicking an entry.

8. Layers Window

Every image contains at least one layer, and this window is your primary area for managing them.

9. Colors Window

This is the primary area for selecting colours to draw with. It consists of a colour wheel and a brightness slider. If you have expanded the window with the "More" button then it will also contain several controls for fine tuning and exactly specifying colour values.

10. Status Bar

This area is divided into several sections. On the left, it displays quick help and status information. On the right, it displays rendering progress (if pertinent), image size, and the cursor location within the image.

Digital Learning

Image Menu

This menu contains commands that affect all layers of the current image.

Cropping images

Unnecessary parts of an image can attract attention away from its main focus.

Removing these unwanted parts can greatly improve the image. As a general rule,

cropping an image should be one of the first stages of image editing-decide what the

subject of the image is and remove everything else. This is because when automatic

correction features such as tonal correction are used, they read the information

contained in the entire image in order to determine what and how much correction to

apply. If the image is cropped first, automatic correction produces better results as

only the cropped image is read.

Crop to Selection

This menu item is only available if a selection is active. Clicking on this menu

item will cause the image to be replaced with only the area that was selected.

If the selection is not a rectangle or square, then the bounding rectangle

around the selection will be used. However, the pixels that were not in the

selection will be made transparent.

Original image:

Digital Learning

Here we have selected the area we want to crop:

Here is the new image after having clicked on the Crop to Selection menu

item. Note that the bounding rectangle of the selection outline was used to

determine the new image's size, but that any pixel that was outside of the

selection was made transparent. Also, keep in mind that the checkerboard

pattern is used to indicate areas of the image that are transparent. It is not

actually part of the image.

Alternative method:

Select the ‘Rectangle Select’ key (top left of the tool bar).

Click inside the image and drag the selection rectangle to surround the area of the image you wish to keep.

Select the Crop tool on the tool bar at the top of the page.

Digital Learning

Resize

This command lets you change the size of the image. In so doing, the image is either

stretched or shrunken to the size you specify. You may specify a relative percentage

to resize the image by, or you specify the absolute pixel or print size that you desire.

If the "Maintain aspect ratio" option is checked, then typing a new Width value will

maintain a proportional Height value, and vice versa.

Original image:

After being enlarged, using the Resize command:

Digital Learning

After being shrunken, using the Resize command:

Canvas Size

This command lets you enlarge or shrink the image canvas without changing the size of the image itself. It works similarly to the Resize dialog, but adds an Anchor selection.

Digital Learning

Original image:

After enlarging the canvas and using the centre anchor point:

After shrinking the canvas and using the centre anchor point:

Flip

This submenu allows you to flip the image horizontally or vertically.

Original image:

Digital Learning

After being flipped horizontally:

Rotate

This submenu gives you several commands for rotating the image by 90, 180, or 270 degrees in either the clockwise or counter-clockwise directions.

Original image:

After being rotated 90 degrees clockwise:

One Step Photo Fix

The One Step Photo Fix is an inbuilt automatic feature that applies tonal and colour

corrections to a photo. To use this feature select Adjustments from the top toolbar

and click on Auto-Level from the drop down list. It takes a few seconds to apply all of

the filters. Often this is all that is needed to enhance a photograph.

Digital Learning

CHAPTER 3: Tasks.

Activity 1:

View the tutorial by clicking on the image. Use the tutorial as a guide to create your own Alien using the same procedures as in the video.

http://www.youtube.com/watch?v=2ZoWz_owZX0

Activity 2: Basic Image Editing

Import image Rotate Image Crop Image Resize Add Border/Frame Remove Red-Eye

Import an image Find an image on the internet that you would like to work with. Save the image to the desktop. From the File menu select File > Open and select the image from the desktop using the options on the left of the ‘open dialogue’ box.

Digital Learning

Rotating Images

To rotate an image:

From the File menu select Image > Rotate and select the rotation that turns the image

If the result is unsatisfactory press Ctrl + Z to undo the crop

Clone (duplicate) images:

Click on the clone tool.

Change brush width on tool bar at top of page.

Hover over section you wish to clone.

Press and hold the ‘CTRL’ button on the bottom left of keyboard. Click the mouse and release the ‘CTRL’ button.

Move mouse to location you wish to place the clone and click the left hand button on the mouse.

Resulting image (cloned head) Before After

Resizing images

To resize an image:

From the File menu select Image, Resize (see earlier explanation for more details)

Adding a border/frame to an image

Click on the rectangle shape tool at the bottom of the tool bar.

Select the size and colour of border you want to use.

Digital Learning

Click and drap the box around the image to create border.

If the result is unsatisfactory press Ctrl + Z to undo

Removing Red-Eye.

The red-eye effect in photography is the common appearance of red pupils in color photographs of eyes. It occurs when using a photographic flash very close to the camera lens (as with most compact cameras), in ambient low light.

Find photograph of person on the internet with Red-Eye Save and open in Paint.Net

Select elliptical tool and drag over red area of pupil

Go to Effects>Photo>Red-eye removal

Move sliders until desired effect

Digital Learning

Activity 3: Layers

This window allows you to manage the multiple layers that an image may contain in Paint.NET. There is always one active layer, and all drawing affects only that layer. Each layer may be given a name, and may have a blending mode and opacity set. You may also make a layer visible or invisible by setting the checkbox appropriately.

You may think of the layers of an image as representing a stack of transparency sheets placed one on top of the other. Images that are on lower layers will show through to the top, but only if the layers on top do not occlude them

Layer Window Icons

Add New Layer

This will add a new, completely transparent layer to the image. It will have a generic name that indicates what layer position it has been placed at, such as "Layer 4."

Delete Layer

This will delete the active layer from the image. You may not delete a layer if it is the only one in the image.

Duplicate Layer

This will take the active layer, duplicate its contents and attributes, and place it in the image after the original layer.

Merge Layer Down

This will take the current layer and merge (combine) it into the layer below it.

Move Layer Up

This will move the current layer to a higher position in the layer order.

Digital Learning

Move Layer Down

This will move the current layer to a lower position in the layer order.

Layers Window Components

Layer Properties

This will bring up the properties for the active layer. From here you may give the layer a different name, toggle its visibility, and set its blending properties.

Layer Properties Window

Working With Layers

For this discussion the following two images will be used for the background layer and for the 1st layer that is placed on top of the background layer:

Background Layer - Seattle

Digital Learning

Top Layer - Apple

You may think of "layers" as a stack of transparency slides that, when viewed together, form a complete image. Paint.NET displays this stack as if you were viewing it from the top and with no perspective (layers do not get "smaller" when they are closer to the bottom of the stack, which would place them "farther away"). To better visualize how layers work, here is a diagram that relates the layers in a document to the Layers Window:

Layers Visualized

Pixels and Transparency

Every layer in Paint.NET is composed of pixels which contain a color and an alpha, or opacity value. This alpha value may range from 0 (completely transparent) to 255 (completely opaque). (Other software may refer to this as ranging from 0% to 100%.) If a pixel is transparent, then pixels from the layers below will show through. Paint.NET uses a technique called alpha compositing to be able to display a layered image on a standard computer monitor.

However, transparent pixels cannot be displayed on a computer monitor. In order to simulate this Paint.NET uses a checkerboard pattern, which looks like this:

Transparency

Digital Learning

If you see this then it means that part of your image is transparent -- the checkerboard pattern is not actually part of the image. If you save the image and then view or load it with other software then the checkerboard pattern will not be there (unless that other software also uses a checkerboard pattern to simulate transparency).

In the following example, the background has been removed from the apple. When placed on another layer you can see the checkerboard represents the transparent area where lower layers show through:

Example

Background removed, represented by checkerboard pattern

Apple placed on background image of Seattle

Layers and Opacity

While every pixel has transparency information associated with it, every layer also has an associated opacity value. The two terms are similar and in most cases can be treated as the same. You may think of a layer's opacity value as a "dimmer" for the alpha values of every pixel in the layer.

For example, if we take the top layer and adjust its opacity from 255 gradually down to 0, we will get the following images:

Digital Learning

Example

Top Layer at 255 opacity (100%) Completely opaque: The apple picture obscures the Seattle picture.

Resulting Image 1

Top Layer at 128 opacity (about 50%) Partially transparent: The picture of Seattle is partially visible.

Digital Learning

Resulting Image 2

Top Layer at 0 opacity (0%) Completely transparent: The picture of the apple is not visible.

Resulting Image 3

Activity 3: Import two images into Paint.Net using the ‘Layers Tab’. Using the instructions above create an image with the two layers of photographs you have imported. Make the top

layer at 128 opacity (about 50%) Partially transparent, as shown in resulting image 2