Digital Learning Image Editing with Paint.NetCHAPTER 1: Understanding the digital imageA digital photograph consists of a rectangular grid of tiny squares called pixels similarto 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 image1) Pixel dimensionsThis 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 menusPixel dimensions are the best way to describe your image. They tell you exactly howmuch information you have to work with.
Digital Learning2) Total number of pixelsLength times width. Measured in ‘megapixels’.The greater the number of pixels in your image the larger size you can print andmaintain fine detail.3) File SizeIndicates how much space your image takes up on a hard drive or in your computer’smemory. Usually measured in megabytes or kilobytes.If you save your image as a JPEG, this file size will be affected by the quality settingyou choose.Saving an ImageJPEG vs GIF.The two most popular image formats for the web are JPEG (JPG) and GIF. Theseformats represent very different approaches to the problem of delivering an imagewith minimum file size and download time.While GIF is great for computer generated images with limited palettes, JPEG is farbetter for photographs. It gives better quality images for the same file size. Below is acomparison. The image on the left is a blowup of a very small region of a large imagecompressed with JPG. The image on the right is the same region compressed usingGIF. The GIF file is 2.4 times bigger than the JPG, but is clearly of lower quality.
Digital LearningResolutionIn 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 howmany 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 tofit 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. Its likesaying, "I have 6 inch tiles on my kitchen floor. How large is my kitchen?" You mustknow the pixel dimensions in addition to the resolution to make any sense of theimage.Resizing an imageWhen resizing an image it is important to remember the difference between changingthe height/width and changing the number of pixels. Resizing an image by changingthe original size by a Percentage or by increasing the height/width in Print size doesnot change the number of Pixels in the image. This means that increasing the size ofan image in this way can reduce the quality of an image in terms of sharpness anddetail. This is because the number of pixels in the image remains the same but theyare spread over a greater area.
Digital LearningIf you choose to modify the print size of an image, the pixel size will be based on theresolution, which defaults to 96 pixels per inch, which is the same as 37.8 pixels percentimetre. For example, if you specify the image to be 1 inch wide, and theresolution 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 theresolution. Note that if you only modify the resolution of the image, the pixel size willremain the same and no resampling is performed.There are multiple types of resampling that you may choose. "Resampling" is theprocess of computing what the new pixels should be based on what the old pixelsare. Some algorithms produce better looking results, but take longer to complete. It isrecommended that you use the default option, "Best Quality," unless you have aspecific need for and understanding of the other choices (Bilinear, Bicubic, andNearest Neighbour). Best Quality will automatically choose either Bicubic or SuperSampling depending on the new size that you specify.Key Points to remember:High resolution = Best Quality + Big Prints (difficult to sendvia email and consumes lots of hard drive space).Low Resolution = fast emails + lots more picturesCropping a picture will result in less quality of image whenenlarged to original size.
Digital LearningCHAPTER 2: Working with Paint.Net.Main Window ComponentsThe Paint.NET user interface is broken up into 10 major areas:Paint.NET Main Window1. Title BarThis tells you the name of the image you are working on, as well as the current zoomlevel and the version of Paint.NET you are using.2. Menu BarThis is where you can access the various menu items. Quite often, commandsaccessible 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 Exitcommand.3. ToolbarImmediately below the menus is the toolbar. It contains several buttons and controlsfor executing various commands and adjusting parameters for the active tool.
Digital Learning4. Image ListEach image that has been opened has a thumbnail displayed in the image list. Thisworks much like a tabbed web browser: just click on an image to switch to it.5. Image CanvasThis is where the image is shown, and is the area where you may draw and performother actions.6. Tools WindowThis where the active tool is highlighted, and where you may choose from other tools.7. History WindowEverything youve done to an image since you opened it is listed in this window. Youmay step forward or backward in the History window by clicking an entry.8. Layers WindowEvery image contains at least one layer, and this window is your primary area formanaging them.9. Colors WindowThis is the primary area for selecting colours to draw with. It consists of a colourwheel 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 specifyingcolour values.10. Status BarThis area is divided into several sections. On the left, it displays quick help and statusinformation. On the right, it displays rendering progress (if pertinent), image size, andthe cursor location within the image.
Digital LearningImage MenuThis menu contains commands that affect all layers of the current image.Cropping imagesUnnecessary 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 thesubject of the image is and remove everything else. This is because when automaticcorrection features such as tonal correction are used, they read the informationcontained in the entire image in order to determine what and how much correction toapply. If the image is cropped first, automatic correction produces better results asonly 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 images 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 LearningResizeThis command lets you change the size of the image. In so doing, the image is eitherstretched or shrunken to the size you specify. You may specify a relative percentageto 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 willmaintain 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 LearningOriginal 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 LearningAfter 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 FixThe One Step Photo Fix is an inbuilt automatic feature that applies tonal and colourcorrections to a photo. To use this feature select Adjustments from the top toolbarand click on Auto-Level from the drop down list. It takes a few seconds to apply all ofthe filters. Often this is all that is needed to enhance a photograph.
Digital LearningCHAPTER 3: Tasks.Activity 1:View the tutorial by clicking on the image. Use the tutorial as a guide to createyour own Alien using the same procedures as in the video.http://www.youtube.com/watch?v=2ZoWz_owZX0Activity 2: Basic Image Editing Import image Rotate Image Crop Image Resize Add Border/Frame Remove Red-EyeImport an imageFind 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 usingthe options on the left of the ‘open dialogue’ box.
Digital LearningRotating ImagesTo rotate an image:From the File menu select Image > Rotate and select the rotation that turns theimage If the result is unsatisfactory press Ctrl + Z to undo the cropClone (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 AfterResizing imagesTo 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 undoRemoving Red-Eye.The red-eye effect in photography is the common appearance of red pupils in colorphotographs of eyes. It occurs when using a photographic flash very close to thecamera 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 LearningActivity 3: LayersThis window allows you to manage the multiple layers that an image may contain inPaint.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 transparencysheets placed one on top of the other. Images that are on lower layers will showthrough to the top, but only if the layers on top do not occlude themLayer Window Icons Add New LayerThis will add a new, completely transparent layer to the image. It will have a genericname that indicates what layer position it has been placed at, such as "Layer 4." Delete LayerThis will delete the active layer from the image. You may not delete a layer if it is theonly one in the image. Duplicate LayerThis will take the active layer, duplicate its contents and attributes, and place it in theimage after the original layer. Merge Layer DownThis will take the current layer and merge (combine) it into the layer below it. Move Layer UpThis will move the current layer to a higher position in the layer order.
Digital Learning Move Layer DownThis will move the current layer to a lower position in the layer order.Layers Window Components Layer PropertiesThis will bring up the properties for the active layer. From here you may give the layera different name, toggle its visibility, and set its blending properties.Layer Properties WindowWorking With LayersFor this discussion the following two images will be used for the background layerand for the 1st layer that is placed on top of the background layer:Background Layer - Seattle
Digital LearningTop Layer - Apple You may think of "layers" as a stack oftransparency slides that, when viewed together, form a complete image. Paint.NETdisplays 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, whichwould place them "farther away"). To better visualize how layers work, here is adiagram that relates the layers in a document to the Layers Window:Layers VisualizedPixels and TransparencyEvery 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 layeredimage on a standard computer monitor.However, transparent pixels cannot be displayed on a computer monitor. In order tosimulate this Paint.NET uses a checkerboard pattern, which looks like this:Transparency
Digital LearningIf you see this then it means that part of your image is transparent -- thecheckerboard pattern is not actually part of the image. If you save the image andthen view or load it with other software then the checkerboard pattern will not bethere (unless that other software also uses a checkerboard pattern to simulatetransparency).In the following example, the background has been removed from the apple. Whenplaced on another layer you can see the checkerboard represents the transparentarea where lower layers show through:ExampleBackground removed, represented by checkerboard patternApple placed on background image of SeattleLayers and OpacityWhile every pixel has transparency information associated with it, every layer alsohas an associated opacity value. The two terms are similar and in most cases can betreated as the same. You may think of a layers opacity value as a "dimmer" for thealpha values of every pixel in the layer.For example, if we take the top layer and adjust its opacity from 255 gradually downto 0, we will get the following images:
Digital LearningExampleTop Layer at 255 opacity (100%) Completely opaque: The apple pictureobscures the Seattle picture.Resulting Image 1Top Layer at 128 opacity (about 50%) Partially transparent: The picture ofSeattle is partially visible.
Digital LearningResulting Image 2Top Layer at 0 opacity (0%) Completely transparent: The picture of the apple isnot visible.Resulting Image 3Activity 3:Import two images into Paint.Net using the ‘Layers Tab’. Using the instructions abovecreate an image with the two layers of photographs you have imported. Make the toplayer at 128 opacity (about 50%) Partially transparent, as shown in resultingimage 2