documentsn.com

Gimp 2.6.6 Tutorial Handout 2009Gimp 2.6.6 – Open Source Graphic Editing Software – TutorialDownload as of June 09: http://www.gimp.org/Table of ContentsPart 1: Software Overview / Objectives / Corresponding Assignment Intro 2Part 2: Gimp Interface . . 2Toolbox & Buttons 3Main Menu and Opening an Image .4Screen Resolution and Pixels 4-5Part 3: Layers .6Understanding and Organizing Layers .6-8Part 4: Zooming, Cropping, Adding Text, and Exporting .9Zooming . .9Cropping . .10Adding Text, Borders, and Saving & Exporting . . 10-121E-Learning Content Developed by Robert B. SchneiderLawrence Technological University – Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009PART 1: Objectives / Overview / Corresponding AssignmentObjective: 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 Adobe’sPhotoshop software. It is used to manipulate a pre-developed image or to creategraphics that are suitable for various needs. Gimp is available free of charge andmany tutorials can be found from their website.Assignment: What will I need to do? Homework 1 – Gimp - While working with this tutorial, have Gimp openand complete the practice activity. When the practice activity is complete,save your file and submit the activity to the digital drop box withinBlackboard. Project 1 – Blackboard Homepage – You will be creating a digital homepagewithin Blackboard. The specifics of this project will be found within theproject 1 rubric. You will import this manipulated image into yourBlackboard homepage.PART 2: Gimp Interface1. Open the Gimp interface. You should see the below image. Read thecaptions, which point out the main features that we will be using.2E-Learning Content Developed by Robert B. SchneiderLawrence Technological University – Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 20092. The image to your left is the Toolbox. This is wheremany of the graphic manipulations will take place. Eachbutton has a specific purpose. Below are a few of thebuttons that you may use often. These actions aresimilar to commercial brand image manipulationprograms.Crop an objectMove an objectText toolScale toolFill tool3. Download the sample image that you will be using foryour practice activity. It is located on Blackboard withinthe Gimp module, if you have no done so. Save it to yourcomputer, preferably on your desktop.Notice the size of the image. It is approximately 3 Mbwhich is very large. Depending on your Internetconnection, this image could take a few minutes todownload. It’s because this image is untouched thatcame directly from a digital camera. This image is about7 megapixels. Most Web applications will not need thatmany megapixels. Basically, the more megapixels meanthe clearer the image. If this image were for print, youwould want a bigger pixel size, especially if you intend tocreate a very large image or poster. Since this is for theWeb, we will want to compress and resize the image for fastest Webrendering. The general rule of thumb is to try and find the balance of size3E-Learning Content Developed by Robert B. SchneiderLawrence Technological University – Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009and quality. Have you ever loaded a webpage and the images seemed totake forever to load? The reason is most likely due to an image that is toobig for the site.4. Now let’s take a look at the Main Menu centered in the middle of thescreen. Note that each of the 3 panels can be moved to you preference.Throughout this tutorial, you will see the ( ) button, which means anotherbutton 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 thedesktop, your image will be located there.4E-Learning Content Developed by Robert B. SchneiderLawrence Technological University – Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 20095. Notice the size and amount of pixels. 3072 X 2304 is notvery Web-friendly. We will need to resize this later.6. After the practice file has opened, it will be placed withinthe middle of your screen. Below is an example with a fewkey elements.In many Web 2.0 applications, adding images allows you to customize yourapplication. The applications will usually specify the size of the image thatwill be allowed to be uploaded to the web 2.0 applications. Example theabove image is 3072 X 2304. The image we will be creating in this tutorial is500 X 500. The image that you will be uploading to Blackboard is 150 X150. The units are pixels.5E-Learning Content Developed by Robert B. SchneiderLawrence Technological University – Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 20097. More about images and the Web When uploading an image to the Web for a Web 2.0 application, often asize in terms of pixels will be given. Some applications will allow you toupload an original, uncompressed image and set the parameters within theWeb 2.0 application. The upside is that this method was designed to saveyou 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 sameamount of time to load as the original. Keep this in mind when developingWeb images. You save time during development but the user adds waittime 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 GoogleSites . When developing a website, your image size will vary according toyour needs. Remember, the larger the image means the more time it willtake for the image below. When considering image sizes, your very firstconsideration is screen resolution. Below is a table with sample screenresolutions:600 X 400 pixelsVery basic. Monitors smaller than 17 inches.800 X 600 pixelsAverage 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 aboutWeb design and Google Sites PART 3: LayersOrganizing your Layers1. With the practice image in view, let’s begin by exploring layers. Thinkof layers as overhead transparencies, stacked on top of each other.Below is a graphic that demonstrates how layers work.6E-Learning Content Developed by Robert B. SchneiderLawrence Technological University – Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 20092. Look at the Layers panel that is located at the right of your screen. The imageis called Background. Be sure that the eye to the left isvisible like the picture. If it’s not, click within the eyespace to make sure your layer is visible. Click on the“Background” text and change it to “image”. Now thename of the layer has changed and this will keep yourproject organized.3. To create a new layer, right-click within the white areaof the layers pane and select “new layer”. A new box willappear.4. Rename this layer to Text. Set the background toTransparent. See image example below.7E-Learning Content Developed by Robert B. SchneiderLawrence Technological University – Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009Leave the width and height from thenewly created layer.5. You should now see two layersdisplayed in the Layers panel. We nowhave a layer for text and a layer for ourimage.6. Now Delete this layer by RightClicking on the text layer in the layerspanel and selecting delete.7. Why did I just do that? Each timewe add new items to our project, Gimpwill create them as layers. The nextimage was taken from our Final project. We will have 3 total layers. Be sure thatthe layer you are working on is visible and selected.8E-Learning Content Developed by Robert B. SchneiderLawrence Technological University – Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 2009PART 4: Zooming, Cropping, Adding Text, and ExportingBringing an object in closer or zooming 1. To begin, we need to enlarge the object to create the illusion of bringingthe image closed to the screen. Select the View Zoom Zoom in. You willneed to do this 3 times. Within the Zoom button, you will see that theimage 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 wantto 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 theimage below:9E-Learning Content Developed by Robert B. SchneiderLawrence Technological University – Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 20094. Double-click on the girls. Your imageshould look like the one to the left. Youcropped 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 textbox will appear. Type in Summer 2009.You will notice that the text is very smalland black. In the tools panel at the left, change the font size to 46. Changethe 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 theFilters Décor Add Border. A new window will appear.Leave the X and Y values as is and select a color for yourborder.See here.10E-Learning Content Developed by Robert B. SchneiderLawrence Technological University – Multimedia Development 2

Gimp 2.6.6 Tutorial Handout 20098. Our last step is to Save and Export our newly created image. Select theFile 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 thebox by dragging out the edges. Save the image as your first initial, lastname, followed by gimp practice. Example mine would berschneider 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 weshould optimize or compress our image. Click on the Export button. Thefollowing box appears. Move the Image Quality slider to 80%. Notice thechange in the file size. be sure to Click the Show Preview in ImageWindow. This will display the file size of 81.8 kb. Select save.10. Notice the size comparisons toother units. Typically we usemegabytes as a standardreference. Think of an Mp3music file as 6 megabytes. A DVDcan hold 470,000 megabytes!Our original image was about 3megabytes. See the table on thenext page.11E-Learning Content Developed by Robert B. SchneiderLawrence Technological University – Multimedia Development 2