Gimp 2.6.

6 Tutorial Handout 2009

Gimp 2.6.6 Open Source Graphic Editing Software Tutorial

Table of Contents

Part 1: Software Overview / Objectives / Corresponding Assignment Intro2 Part 2: Gimp Interface...2 Toolbox & Buttons3 Main Menu and Opening an Image.4 Screen Resolution and Pixels4-5 Part 3: Layers..6 Understanding and Organizing Layers..6-8 Part 4: Zooming, Cropping, Adding Text, and Exporting..9 Zooming..9 Cropping..10 Adding Text, Borders, and Saving & Exporting...10-12

E-Learning Content Developed by Robert B. Schneider Lawrence Technological University Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009 PART 1: Objectives / Overview / Corresponding Assignment Objective: To use open source software to manipulate an image. Overview: What is Gimp? Gimp is commonly referred to as the open source or free version of Adobes Photoshop software. It is used to manipulate a pre-developed image or to create graphics that are suitable for various needs. Gimp is available free of charge and many tutorials can be found from their website.

Assignment: What will I need to do? Homework 1 Gimp - While working with this tutorial, have Gimp open and complete the practice activity. When the practice activity is complete, save your file and submit the activity to the digital drop box within Blackboard. Project 1 Blackboard Homepage You will be creating a digital homepage within Blackboard. The specifics of this project will be found within the project 1 rubric. You will import this manipulated image into your Blackboard homepage. PART 2: Gimp Interface 1. Open the Gimp interface. You should see the below image. Read the captions, which point out the main features that we will be using.

E-Learning Content Developed by Robert B. Schneider Lawrence Technological University Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009

2. The image to your left is the Toolbox. This is where many of the graphic manipulations will take place. Each button has a specific purpose. Below are a few of the buttons that you may use often. These actions are similar to commercial brand image manipulation programs. Crop an object Move an object Text tool Scale tool Fill tool 3. Download the sample image that you will be using for your practice activity. It is located on Blackboard within the Gimp module, if you have no done so. Save it to your computer, preferably on your desktop.

Notice the size of the image. It is approximately 3 Mb which is very large. Depending on your Internet connection, this image could take a few minutes to download. Its because this image is untouched that came directly from a digital camera. This image is about 7 megapixels. Most Web applications will not need that many megapixels. Basically, the more megapixels mean the clearer the image. If this image were for print, you would want a bigger pixel size, especially if you intend to create a very large image or poster. Since this is for the Web, we will want to compress and resize the image for fastest Web rendering. The general rule of thumb is to try and find the balance of size

E-Learning Content Developed by Robert B. Schneider Lawrence Technological University Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009 and quality. Have you ever loaded a webpage and the images seemed to take forever to load? The reason is most likely due to an image that is too big for the site. 4. Now lets take a look at the Main Menu centered in the middle of the screen. Note that each of the 3 panels can be moved to you preference.

Throughout this tutorial, you will see the (>) button, which means another button is nested within that particular tool button. Click on the File>Open> and select the location of your image. If you saved the image to the desktop, your image will be located there.

E-Learning Content Developed by Robert B. Schneider Lawrence Technological University Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009 5. Notice the size and amount of pixels. 3072 X 2304 is not very Web-friendly. We will need to resize this later. 6. After the practice file has opened, it will be placed within the middle of your screen. Below is an example with a few key elements.

In many Web 2.0 applications, adding images allows you to customize your application. The applications will usually specify the size of the image that will be allowed to be uploaded to the web 2.0 applications. Examplethe above image is 3072 X 2304. The image we will be creating in this tutorial is 500 X 500. The image that you will be uploading to Blackboard is 150 X 150. The units are pixels.

E-Learning Content Developed by Robert B. Schneider Lawrence Technological University Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009 7. More about images and the Web When uploading an image to the Web for a Web 2.0 application, often a size in terms of pixels will be given. Some applications will allow you to upload an original, uncompressed image and set the parameters within the Web 2.0 application. The upside is that this method was designed to save you time, but when the user attempts to view a Web page with the image, the user only see the resized image. This image will take the same amount of time to load as the original. Keep this in mind when developing Web images. You save time during development but the user adds wait time for the image to load. 8. When optimizing images for the Web, is there a typical size to use? Later in the semester, you will be developing a website using Google Sites. When developing a website, your image size will vary according to your needs. Remember, the larger the image means the more time it will take for the image below. When considering image sizes, your very first consideration is screen resolution. Below is a table with sample screen resolutions: 600 X 400 pixels Very basic. Monitors smaller than 17 inches. 800 X 600 pixels Average size. Many schools still use this resolution. 1024 X 768 pixels Very common today with LCD technology. More about images and the Web will be discussed when we learn about Web design and Google Sites PART 3: Layers Organizing your Layers 1. With the practice image in view, lets begin by exploring layers. Think of layers as overhead transparencies, stacked on top of each other. Below is a graphic that demonstrates how layers work.

E-Learning Content Developed by Robert B. Schneider Lawrence Technological University Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009

2. Look at the Layers panel that is located at the right of your screen. The image is called Background. Be sure that the eye to the left is visible like the picture. If its not, click within the eye space to make sure your layer is visible. Click on the Background text and change it to image. Now the name of the layer has changed and this will keep your project organized. 3. To create a new layer, right-click within the white area of the layers pane and select new layer. A new box will appear. 4. Rename this layer to Text. Set the background to Transparent. See image example below.

E-Learning Content Developed by Robert B. Schneider Lawrence Technological University Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009 Leave the width and height from the newly created layer. 5. You should now see two layers displayed in the Layers panel. We now have a layer for text and a layer for our image. 6. Now Delete this layer by RightClicking on the text layer in the layers panel and selecting delete. 7. Why did I just do that? Each time we add new items to our project, Gimp will create them as layers. The next image was taken from our Final project. We will have 3 total layers. Be sure that the layer you are working on is visible and selected.

E-Learning Content Developed by Robert B. Schneider Lawrence Technological University Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009 PART 4: Zooming, Cropping, Adding Text, and Exporting Bringing an object in closer or zooming 1. To begin, we need to enlarge the object to create the illusion of bringing the image closed to the screen. Select the View>Zoom>Zoom in. You will need to do this 3 times. Within the Zoom button, you will see that the image is now enlarged to 67%.

2. Select the cropping button within the tools panel. 3. Draw a rectangle around the center of the two girls, or the image you want to enlarge. Be sure to leave some room at the bottom of the rectangle. We will add text in a few steps. Your selection should look similar to the image below:

E-Learning Content Developed by Robert B. Schneider Lawrence Technological University Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009 4. Double-click on the girls. Your image should look like the one to the left. You cropped out the remaining image. 5. Now we will add text below the girls. Select the text tool from the tools panel. Draw a rectangle below the girls. A text box will appear. Type in Summer 2009. You will notice that the text is very small and black. In the tools panel at the left, change the font size to 46. Change the color to white.

6. Your image should look similar to the one below to the left. 7. Now to add a Border around our image, select the Filters>Dcor>Add Border. A new window will appear. Leave the X and Y values as is and select a color for your border.

See here.

10

E-Learning Content Developed by Robert B. Schneider Lawrence Technological University Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009 8. Our last step is to Save and Export our newly created image. Select the File>Save As button sequence from the toolbar. A small box will appear, indicating where and how to save your image. You may need to resize the box by dragging out the edges. Save the image as your first initial, last name, followed by gimp_practice. Examplemine would be rschneider_gimp_practice. Save the file to your desktop as a jpeg. 9. When you try to save your file, a new box appears and suggests that we should optimize or compress our image. Click on the Export button. The following box appears. Move the Image Quality slider to 80%. Notice the change in the file size. be sure to Click the Show Preview in Image Window. This will display the file size of 81.8 kb. Select save. 10. Notice the size comparisons to other units. Typically we use megabytes as a standard reference. Think of an Mp3 music file as 6 megabytes. A DVD can hold 470,000 megabytes! Our original image was about 3 megabytes. See the table on the next page.

11

E-Learning Content Developed by Robert B. Schneider Lawrence Technological University Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009

Our new image is eight hundredths of a megabyte! This image is optimized for the web and still maintains quality. When we exported the image, we moved the image quality slider to 80. The more we move this number down, the more the image will become distorted, but the image size will decrease. The key is to find the setting that still maintains quality but reduces the file size. Here is your final image. Submit to the digital drop box. Checklist for Your First Assignment Requirement Points Possible Download Image from BB 2 Zooming in and Crop are Evenly 2 Matched Add Text 2 Changed Font size and color 2 Added a Border 2 Compressed and Exported as a 2 jpeg and saved according to web structure [rschneider_gimp_practice] Submitted to the Digital Drop 3 Box Total Points Possible: 15

12

E-Learning Content Developed by Robert B. Schneider Lawrence Technological University Multimedia Development 2