The following is designed to be used as a tutorial. You can work through this tutorial using multi-tasking (i.e. switching back and forth between your web browser and Paint.net), or you can print this web page and just work in Paint.net.

This tutorial will introduce you the tools found in graphics programs to change a file's format and to manipulate the basic characteristics of an existing graphic. Paint.net will be used to demonstrate and experiment with these processes. You should try to DO each of the processes described here (more than once) and also do a little experimenting on your own. Contact your instructor if you have any questions.

Manipulating Graphic Files

Image processing programs can be used to manipulate existing graphics. Other than editing an image (which will be considered in the following lecture/tutorial), these programs also provide the means to ...

• change the format of the file
• change the size of the graphic
• change from a color image to a grayscale (aka: black & white)
• crop the image
• adjust brightness and contrast
• flip and rotate the image
• edit the color table (for images using 256 colors or less)
• change the bit depth (i.e. color depth)
• set a transparent background color (for GIF's)

Warning: Some of these changes may result in a loss of quality of the original image. You should always compare your results with the original.

Recommendation: Always work with a copy of the original image. If changes reduce the quality of an image too much, or if you mess up, or if you need the original to create another graphic; you can always start over with a fresh copy.

The rest of this lecture/tutorial will use Paint.net to demonstrate of each of these operations.

Required Software

To complete the rest of this lecture/tutorial and the following project, you will need a copy of the Paint.net program installed on your computer (it's free).

For distance education students, to install Paint.net from the course CD ...

1. Insert the CD into your computer's CD drive.
2. The CD should auto-start a menu that lists the contents of the CD (be patient, it may take a minute or so).
• If the CD does not auto-start,
  1. Double-click on My Computer
  2. Double-click on the icon for your CD drive.
  3. Double-click on the PaintDotNet folder.
  4. Double-click on the installer file.
  5. Continue with step 4 below.
3. Click on the Paint.net option in the auto-start menu.
4. Follow the on-screen directions (accept any defaults).

Needed Graphic Files

To complete this lecture/tutorial, you will also need copies of the following files.

• Lighthouse.jpg
• Artist.gif

Therefore, before continuing this tutorial, get copies of these files by right-clicking on their links (one at a time) and selecting Save Target As (Internet Explorer or Netscape) or Save Link As (FireFox) . This will download copies of these files to your computer. Be sure to take note of where you save them. Copies of these files can also be found on the course CD.

Introduction to Paint.net

Paint.net is a photo and graphics editor that was originally developed as an undergraduate senior design project at Washington State University and is currently being maintained by some of the alumni that originally worked on it. Paint.net can read and export several graphic file formats and it also includes tools for creating, editing, and manipulating raster images. All instructions and examples in this and the following tutorial will use version 3.01 of this program.

The image below shows the default Paint.net screen layout when the program is started. Basic elements of the screen include the following (move the cursor over these links and the corresponding item will be circled in red in the image).

Menus: Standard pull down menus containing the commands of the program.

Standard Toolbar: Contains buttons for basic file management, printing, cut/copy/paste, undo/redo, zoom controls, and others.

Settings Toolbar: Contains buttons for settings that determine how several of the tools will operate. This toolbar changes, depending on the tool that is currently selected.

Image List: Contains thumbnails of all open image files. Switch images by clicking on the thumbnail.

Tools Palette : Contains buttons for selecting the paint editing tools. This palette can be turned on/off with the F5 key.

Color Palette : Contains the controls to determine and select colors. There are always two active colors: primary & secondary. In most cases, the primary color is tied to the left mouse button and the secondary color is tied to the right mouse button. This palette can be turned on/off with the F8 key.

Layers Palette : Contains the controls used to manage image layers (more on this in the next tutorial). This palette can be turned on/off with the F7 key.

History Palette : Provides information about the history of operations used to manipulate/edit the graphic. This palette can be turned on/off with the F6 key.

Information Bar : This line at the bottom of the window provides instructions for the selected tool, size of the image (in pixels), and the cursor location (in pixels from the top left corner) on the image.

Work Area: The rest of the screen is used to view and edit images. Notice that the palettes become translucent when not in use when they cover part of the image.

What is the difference between a toolbar and a palette? Toolbars are fixed in position at the top of the application's window. Palettes are allowed to "float." This means that they can be placed anywhere on the screen as needed/desired. The four palettes can be moved by dragging their title bars (the colored area at the top of the palette). They can also be turned off by clicking the little x at the top right corner of the palette. The four palettes can also be turned on/off as needed using the F5 through F8 function keys or the Window menu.

• F5 = turn the Tools palette on/off
• F6 = turn the History palette on/off
• F7 = turn the Layers palette on/off
• F8 = turn the Colors palette on/off

Try it!

Zooming In and Out

While working with an image, it is often necessary to zoom in on an area (to see and work with more detail) or zoom out (to see the entire image). To experiment with the following zooming tools, open the file Lighthouse.jpg (you should have downloaded this file as instructed above).

IMPORTANT NOTE: These commands only affect the view. The size of the actual graphic is not changed. Changing the actual size of the image will be discussed later.

The zoom controls are found near the middle of the standard toolbar as shown below.

The three options include the following (Try them all!) :

• Zoom in: The button on the right (the little magnifying glass with a + on it) is used to zoom in on the image (i.e. makes the view of the image larger). Each successive click zooms in further. After zooming in, you may need to use the scroll bars to view the exact portion of the image as necessary. Try it! Zoom in 3 or 4 times and then use the scroll bars so that the the lighthouse is in the middle of the screen.
• Zoom out: The button on the left (the little magnifying glass with a - on it) is used to zoom out (i.e. makes the view of the image smaller). It is used exactly like the zoom in button. Try it!
• Zoom size select menu: Between the two magnifying glass buttons is a select menu (click on it and a menu pops up) that specifies the current zoom size. If you click on the menu, you can quickly jump to any zoom size. Try it!

Zoom controls can also be found in the View menu. In addition to zoom in and out, the following commands are in this menu.

• Zoom to Window - The program does a best fit of the image in the viewing area, making it as large as possible but never exceeding 100%.
• Zoom to Selection - Allows you to first select a region of the image using one of the selection tools (later) and then zoom in on that selected region of the image.
• Actual Size - Sets the zoom level to 100%.

Changing the Format of a Graphic File

Due to how a graphic was created and how it is to be used, it is often necessary to change the file format of a graphic. For example, an original graphic might be created in Paint.net using its own proprietary PDN format, but if the image is to be used on a web page it must be changed to a JPG or GIF.

Graphic editing programs use either the Save As... or Export... command to accomplish this task. In Paint.net, Save As... is used. The following will lead you through an example of changing a JPG file to a GIF using the Save As... command:

1. If you haven't already, open the file Lighthouse.jpg in Paint.net.
2. From the File menu, select the Save As... command.
3. At the bottom of this dialog box, find the Save as type: select menu (the current value in this field should say JPG (*.jpg, *.jpeg, *.jpe, *.jfif)).
4. Click on the Save as type: select menu and a list of file formats will be displayed. Find and select the one that says GIF (*.gif).
5. (Optional) Edit the file name. Note that the extension will automatically be set to to .gif when the file is saved. Do NOT include the extension with the filename. Paint.net will append the correct extension. Edit only the name of the file (if desired).
6. (Optional) Use the navigation tools in the upper portions of the dialog box to select the destination of the file. Although this step is optional, don't ignore it (i.e. always take note of where the file will be saved).
7. Click the Save button and then click the OK button. The last dialog box provides some options unique to the particular format specified. For now, just use the defaults. When a JPG file is being created, this is where you would specify the amount of compression (later). If the file already exists, you will be given a warning that you are about to replace the old file (click Yes to replace the old file with the current one). If you do not want to replace the old file, click No and change the filename, location, and/or file type.

NOTE & Warning: The most important step in the above process is step #4. A common mistake is to just manually change the filename extension. This does not work. If this was done in the above example, you would end up with a JPG graphic stored in a file with a filename extension of .gif. This would result in a file that is unreadable by most programs.

Compare the Results

When changing the format of a graphic file there will be changes to the image (depending on the image, these differences may be very obvious, very subtle, or barely, if at all, noticeable). In the above example, the original image uses 38,438 colors and the GIF version uses 249 colors (I used another program to determine these numbers), so there must be some differences.

By the way, you might be wondering why the JPG image only uses 38,438 colors since JPG always uses a 24-bit color depth (which means 16.7 million colors). 24-bit color depth means that a maximum of 16.7 million colors can be used. Few, if any, images will use all of the possible colors. The actual number of colors used by a 24-bit image has nothing to do with the file size. Each pixel still requires 24-bits (3 bytes) of memory.

To see the differences in the image quality, close the file (you have to close the file because even though the file format has been changed, Paint.net retains much of the lost or changed data) and then reopen both files in Paint.net. Zoom in several times on both images (to at least 400%) and compare the sky around the lighthouse. Since this picture has little color variance, the GIF image is pretty close to the original. However, with some photos there will be a more noticeable difference.

Another change will be the file size. Since the GIF uses a lot fewer colors, you might expect it to be smaller. But the original JPG file in the above example uses 35.2 KB of disk space. The resulting GIF file is 161 KB (over 4.5 times as large). Why is the GIF larger? Because JPG is better at compressing photos. But this does not mean a JPG will always be smaller. The results are dependent on the image.

How do you determine the size of the file? There are at least three ways, none of which use Paint.net.

• In Windows, point to the icon for the file. If you are using a recent version of Windows, after a brief pause, a tool tip will be displayed that describes the file (including its size).
• In Windows, right click on the icon for the file and then select the Properties command (its the last one) from the menu. A dialog box will be displayed that, among other things, gives the size of the file. Actually, you will see two sizes. The second one (Size on disk) will be slightly larger and is dependent on the storage device used. Therefore, always use the first size.
• If the file is in a folder in Windows, change the folder view to Details and the file sizes will be displayed.

Changing the Size of a Graphic

WARNINGS: Before changing the size of a graphic, it is important to be aware of some things.

• This is NOT the zoom command. This will actually change the image.
• Changing the size of a graphic WILL reduce the quality of the image.
• Making the image smaller results in discarding some of the data (i.e. pixels). Therefore, some detail will be lost. You cannot recover this lost data by making the graphic larger.
• Making the image larger requires more pixels whose color is determined by approximation and interpolation methods (i.e. mathematical calculations). The result is normally a fuzzy or grainy image (you do not get more detail).
• Making an image smaller will produce better results than making it larger. That is, it is better to start with a larger image and make it smaller than to start with a small image and make it larger.

To change the size of a graphic, with the file open and active ...

1. From the Image menu, select the Resize... command. The dialog box contains two radio buttons that are used to determine the method to be used to resize the image.
   • By percentage: Scales the image by a specified percentage, preserving the aspect ratio.
   • By absolute size: Resizes the image using specified values (in pixels or inches).
2. To resize by percentage:
   1. Select the "By percentage" radio button.
   2. Use the textbox to the right of the radio button to specify the scaling factor. For example, 50% would result in an image one-fourth as big as the original (half of the image in both directions: 50% by 50% = 25%)
3. To resize by absolute size:
   1. Select the "By absolute size" radio button.
   2. To preserve the aspect ratio, make sure the "Maintain aspect ratio" checkbox is selected. NOTE: The aspect ratio is the ratio of the width of the image to the height of the image. When preserved, only one dimension can be changed, the other dimension will be automatically calculated. Preserving the aspect ratio will keep the image from being distorted.
   3. Use the text boxes below to specify the new size. Note that you can specify the size in pixels, inches, or centimeters. Pixels is most often used.
4. When finished with the above settings, click the OK button.

Try the following operations on the original Lighthouse.jpg image:

• Change the width and height to 40% of the original and then save it with a different name (Lighthouse-40.jpg).
• Reopen the original Lighthouse.jpg image (it is always better to start with the original than to change the changed image) and then change the width to 150 pixels while preserving the aspect ratio (i.e. the height will be determined for you). Save again with a different name (Lighthouse-150.jpg).

Compare the Results:

• Since both of the above processes made the original image smaller, the quality should look pretty good with the images displayed at their actual size.
• Open all three images and then use the zoom command to make the smaller images about as large as the original. You should see some obvious differences.
• What about the sizes of these files? NOTE: Your file sizes might be different than mine due to your JPG compression quality setting which is set when you save the file (after clicking the Save button and before clicking the OK button). I used a compression quality factor of 50.
  • The original image is 35.2 KB.
  • The 40% image is 5.91 KB. Is this what you would expect? 40% of 35.2 is 14.08. Actually there are two things going on here. First, the image is being reduced by 40% in both directions, therefore the final area is only 16% of the original (i.e. 40% of 40%). Therefore the expected size would be 16% of 35.2 = 5.632. But, due to the compression settings, it actually ends up a little larger than expected (this could go either way depending on the image and the JPG compression settings).
  • The dimensions of the original image is 640x416 (i.e. a total of 266,240 pixels). The dimensions of the 40% image is 256x166 (i.e. a total of 42,496 pixels). 42,496 is 16% of 266,240.
  • The 150 pixel wide image is 2.79 KB. 150 is 23.4% of 640 (the original width). Therefore you might expect the resulting size to be 23.4% of 23.4% of 35.2 (remember, both directions) giving 1.98 KB. Again, the discrepancy here is due to the compression settings and the image (the actual result was, again, a little larger than expected).

Changing a Graphic from Color to Grayscale (aka: Black & White)

A color image can be changed to a grayscale (aka: black & white) image with one simple command. When this is done, each color is changed to its closest shade of gray (actually, it is changed to the gray color that matches the lightness value of the original color). The results look like black & white film was used in a camera or the image is a frame from an old black & white movie.

To experiment with this process, in Paint.net, open the original Lighthouse.jpg graphic and then proceed as follows.

1. From the Adjustments menu select the Black and White command.
2. Save the graphic with a different filename (use: Lighthouse-gray.jpg).

Compare the results (other than the obvious fact that the image now only uses shades of gray):

• Original image size was 35.2 KB.
• The grayscale image is 33.2 KB.
• JPG normally uses a 24-bit color model (16.7 million possible colors). But, since there are only 256 possible shades of gray, a grayscale JPG uses only a small fraction of the possible colors. Therefore, you would expect the file size to be much smaller than the original. However, JPG's still use the 24-bit model. The difference here is a result of the JPG compression (the grayscale image compresses a little better the the full color image).
• Images that do NOT use the 24-bit model (like GIF) would NOT have a significant change in the size of the file because all that changes is the color table. The only difference would be as a result of compression which could increase or decrease the file size slightly. Try this one. Open the Artist.gif file, change it to a grayscale, save it as Artist-gray.gif, and then compare the file sizes.

NOTE: The same process can be used to create a Sepia image as well (just use the Sepia command instead of the Black and White command). What is Sepia? Sepia is like a grayscale image except it uses shades of brown (makes it look like an old fashion photo). Try it!

Changing the Brightness and Contrast of a Graphic

Sometimes graphics can be a bit dark or washed out. This can be especially true with photos due to lighting conditions a the time the photo is taken. The brightness and contrast command can be used to correct this problem. To experiment with these commands, open the original Lighthouse.jpg file and proceed as follows:

1. From the Adjustments menu select the Brightness/Contrast... command.
2. Move the dialog box (drag on its title area at the top) so that it does not cover most of the image.
3. Use the controls in the dialog box to make adjustments.
   • Adjust the brightness using either the slider or the text box. Values can range from -100 (darker) to +100 (lighter). The reset button will set the value back to 0.
   • Adjust the contrast using either the slider or the text box. Values can range from -100 (little contrast of colors) to +100 (sharp contrast of colors). The reset button will set the value back to 0.
   • As values are changed, the results are viewed on the image (that's why you want to move the dialog box).
4. Experiment with different values for brightness and contrast to determine their affect.
5. After experimenting, set the brightness to 75 and the contrast to 25. This should make the photo look like it was a much brighter day.
6. Click the OK button and then save this image as Lighthouse-bright.jpg.

Compare the results (other than the obvious fact that the image is now lighter):

• Original image size was 35.2 KB.
• The lightened image is 34.5 KB (As above, I have used a JPG compression factor of 50. If you used a different setting, your results will be different.)
• Why the change? Are fewer colors used? Yes, but this does not directly affect the file size. The JPG image still uses 24-bits per pixel. The difference here is a result of compression (the lightened image just compresses a little more than the original). Depending on how the brightness and contrast are changed and the compression factor, the file size may increase or decrease.

Cropping a Graphic

Cropping is the process of trimming or cutting out portions of an image. For example, the photo of the lighthouse (Lighthouse.jpg) also includes a lot of sky, the ocean, and the shore. But you may want just a graphic of the lighthouse and the surrounding buildings (i.e. you need to discard the rest of the photo).

Cropping requires two basic steps: select the region to be preserved and then discard the rest of the image. To accomplish this task, open the original Lighthouse.jpg file and then proceed as follows:

1. Select the lighthouse and the surrounding buildings as follows:
   1. Click on the Rectangle Select tool in the tools palette (it's the first button at the top left corner of tools palette).
   2. Drag a rectangle around the portion of the image that is to be preserved. You will get a rectangle of "marching ants" with the interior changed to blue tones.
   3. (optional) To adjust the selection rectangle, click on the Move Selection tool in the tools palette (it's the second button in the second row of the tools palette). Eight "handles" (little squares) will be displayed on the border of the selection rectangle. Drag on these "handles" to adjust the size of the selection rectangle. To move the selection rectangle, click and drag on the interior of the selection rectangle. Try it!
2. Click on the Crop to Selection button found in the standard toolbar (it's the 8th button on the toolbar) and the rest of the image will be discarded.
3. Save the results with a different name (use: Lighthouse-cropped.jpg).

Flipping and Rotating a Graphic

Graphics can also be flipped (horizontally or vertically) or rotated. Open the cropped lighthouse (Lighthouse-cropped.jpg) file and experiment with these operations as follows:

• From the Image menu, select the Flip submenu, and then select the Horizontal command. This will produce a mirror image of the original.
  • To get the image back to its original state, either repeat this command or click the Undo button in the standard toolbar.
• From the Image menu, select the Flip submenu, and then select the Vertical command. This will turn the image upside down. Note that this is NOT a 180° rotation.
  • To get the image back to its original state, either repeat this command or click the Undo button in the standard toolbar.
• There are two ways to do rotations in Paint.net
  • From the Image menu, select the Rotate submenu, and then select the desired amount of rotation. This option only allows for rotations of multiples of 90 degrees. CW means clockwise. CCW means counterclockwise. Note that with 90 degrees and 270 degrees, the original height and width values are switched (e.g. a 200x100 image will become a 100x200 image).
  • For rotations of any amount, from the Layers menu, select the Rotate/Zoom command and then use the following options to obtain the desired effect.
    • The Angle value determines the amount of rotation. Positive numbers will rotate counterclockwise; negative numbers will rotate clockwise. Try some values and see what happens. NOTE: You might need to move the dialog box over so that you can see the image.
    • You will notice that the dimensions of the image do not change. Therefore, rotations will cause some of the image to be cut off.
    • The X Pan and Y Pan settings can be used to move the position of the resulting rotation. Try it!
    • In the region above the pan settings, drag the cross around to visually set the pan values. Try it!
    • Experiment with the rest of the settings in this dialog box to discover what they do. Try them!

Changing the Bit-Depth of a Graphic

NOTE: This option is not available in the current version of Paint.net.

Changing the Color Table of a Graphic

NOTE: This option is not available in the current version of Paint.net.

Setting a Transparent Color of a Graphic (GIF Images Only)

NOTE: This option is not available in the current version of Paint.net.

Where to go from here...

If you understand the above concepts as well as the concepts from the previous tutorial, you are ready to start working on the next project.

[an error occurred while processing the directive]