Upload
kosovoireland
View
832
Download
0
Tags:
Embed Size (px)
Citation preview
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