None
GIMP is a free and very powerful image manipulation program. The user interface is not very intuitive, but once you master it, GIMP is a very useful and handy tool for quick image modifications.
In this lab we are going to first quickly cover four of the most common task performed by web designers. These tutorials are adapted from Gimp.org's official tutorials, which are rarely available because their website is rarely online and functioning.
We will be using images from the Astronomy Picture of the Day (APOD), provided by NASA.
It’s a common problem that you may have an image that is too large for a particular purpose (embedding in a webpage, posting somewhere online, or including in an email for instance). In this case you will often want to scale the image down to a smaller size more suitable for your use.
The image we’ll be using to illustrate this with is The Horsehead Nebula in Infrared.
When you first open your image in GIMP, chances are that the image will be zoomed so that the entire image fits in your canvas. The thing to notice for this example is that by default the window decoration at the top of GIMP will show you some information about the image.
Notice that the information at the top of the window shows the current pixel dimensions of the image (in this case, the pixel size is 1225×1280).
To resize the image to new dimensions, we need only invoke the Scale Image dialog by selecting the Image menu at the top:
This will then open the Scale Image dialog:
In the Scale Image dialog, you’ll find a place to enter new values for Width and Height. If you know one of the new dimensions you’d like for the image, fill in the appropriate one here.
You’ll also notice a small chain just to the right of the Width and Height entry boxes. This icon shows that the Width and Height values are locked with respect to each other, meaning that changing one value will cause the other to change in order to keep the same aspect ratio (no strange compression or stretching in the image).
For example, if you knew that you wanted your image to have a new width of 600px, you can enter that value in the Width input, and the Height will automatically change to maintain the aspect ratio of the image:
Change the Width to 600px.
As you can see, entering 600px for the width automatically changes the height to 627px.
Also notice different options under Quality → Interpolation. The default value for this is Cubic, but to retain the best quality it would better to use Sinc (Lanczos3).
If you want to specify a new size using a different type of value (other than Pixel size), you can change the type by clicking on the “px” drop-down menu:
Change the Width to 4 inches
A common use for this could be if you wanted to specify a new size for printing.
Notice that we can also specify resolution in terms of pixels per inch (PPI).
High resolution computer displays in the 1980's typically supported 72 PPI. In the 2000's, PPI values of typical monitors ranged from 90 to 130 PPI. Starting in 2008, laptops began to exceed 130 PPI. By 2010, small devices such as the iPhone began to exceed 300 PPI.
Once you are done scaling the image, don’t forget to export the changes you’ve made:
to export as a new filename, or:
to overwrite the original file (use caution).
Use what you just learned to resize your image so that it is exactly 5 inches on your screen. Assume your display is 90 PPI.
Be sure to save the image to your lab9 folder.
You can also modify the filesize of an image when exporting it to a format like JPEG. JPEG is a lossy compression algorithm, meaning that when saving images to the JPEG format, you will sacrifice some image quality to gain a smaller filesize.
To export, select the following from the top menu:
This will invoke the Export Image dialog:
You can now enter a new name for your file here. If you include the filetype extension (in this case, .jpg), GIMP will automatically try to export in that file format for you. Use the JPEG (.jpg) format.
This will then bring up the Export Image as JPEG dialog, where you can change the quality of the export.
From this dialog you can now change the quality of the export. If you also have the “Show preview in image window” option checked, the image on the canvas will update to reflect the quality value you input. This will also enable the “File size:” information to tell you what the resulting file size will be. (You may need to move some windows around to view the preview on the canvas in the background).
Be sure to hit the Export button to actually export the image.
Use what you just learned to save five different versions of the photo from the previous part
Be sure to save the image to your lab9 folder.
Using the same Horsehead Nebula image that you saved in the previous part, you resize it to 400px wide and then exported it using five different levels of JPEG compression (100%, 90% 80%, 70% and 60%)
When exporting, start with 100% compression and save the file as nebula100.jpg to your lab9 folder.
Repeat the export using JPEG compression 90%, 80%, 70% and 60% and save each version as nebula90.jpg, nebula80.jpg, nebula70.jpg and nebula60.jpg
Open each image of the 5 images in Chrome and examine them side by side. You should be able to fit four of them on the screen by resizing the browser window.
When can you detect a noticeable drop in quality, i.e., 90%, 80%, etc.???
Pick the image that is the smallest in filesize, but does not have a noticeable drop in quality from the original. How much smaller is it in terms of percentages. To compute this simply divide the filesize of the file you chose (i.e., nebula??.jpg) by the filesize of nebula100.jpg. If the value is say 0.5239, round to two decimal digits and multiple by 100, i.e., 52%
To answer the question, rename the file you chose to nebulaXX.jpg, where XX is the percentage you calculated. For example, if the files is 0.5239 of the original, the rename the file nebula52.jpg.
Note this filename is meaningful in the sense that it tells you that this version is 52% the size of the original, yet at 400px there is no noticeable decrease quality.
There are numerous reasons you may want to crop an image. You may want to remove useless borders or information for aesthetic reasons, or you may want the focus of the final image to be of some particular detail for instance.
In a nutshell, cropping is just an operation to trim the image down to a smaller region than what you started with:
The procedure to crop an image is straightforward. You can either get to the Crop Tool through the tools palette:
Or you can access the crop tool through the menus:
Once the tool is activated, you’ll notice that your mouse cursor on the canvas will change to indicate the Crop Tool is being used.
Now you can Left-Click anywhere on your image canvas, and drag the mouse to a new location to highlight an initial selection to crop. You don’t have to worry about being exact at this point, as you will be able to modify the final selection before actually cropping.
After making the initial selection of a region to crop, you’ll find the selection still active. At this point hovering your mouse cursor over any of the four corners or sides of the selection will change the mouse cursor, and highlight that region.
This allows you to now fine-tune the selection for cropping. You can click and drag any side or corner to move that portion of the selection.
Once you are happy with the region to crop, you can just press the “Enter” key on your keyboard to commit the crop. If at any time you’d like to start over or decide not to crop at all, you can press the “Esc” key on your keyboard to back out of the operation.
Another way to crop an image is to make a selection first, using the Rectangle Select Tool:
Or through the menus:
You can then highlight a selection the same way as the Crop Tool, and adjust the selection as well. Once you have a selection you like, you can crop the image to fit that selection through:
Use what you just learned to take the optimized 400px image from Task 2 and crop out everything except the most vivid and interesting 100 X 100px region.
Save your image as nebula100px.jpg and use the same quality level that you determined from the previous part.
The goal here is to create a representative thumbnail image that shows off the full images quality but uses the absolute minimum file size.
Compare this new image with the original and calculate filesize decrease as a percentage.
Rename the file nebula100px??.jpg where ?? is the filesize percentage. For example, if the precentage is 0.034 then the file name should be nebula100px03.jpg
There may be a time that you would need to rotate an image. For instance, you may have taken the image with your camera in a vertical orientation, and for some reason it wasn’t detected by GIMP as needing to be rotated (GIMP will normally figure this out for you, but not always).
There may also be a time that you’d like to flip an image as well. These commands are grouped together under the same menu item:
If you want to flip your image, the Transform menu offers two options, Flip Horizontally, or Flip Vertically. This operation will mirror your image along the specified axis. For example, here are all of the flip operations shown in a single image:
Image rotation from the Transform menu is constrained to either 90° clockwise/counter-clockwise, or 180°.
Don’t mis-interpret this to mean that GIMP cannot do arbitrary rotations (any angle). Arbitrary rotations are handled on a per-layer basis, while the image rotation described here is applicable to the entire image at once.
Download and save this Stick Figure Image
Use what you learned to create four versions of the image: Original, Mirror, Upside-down, and Upside-down Mirror
Each image should be saved as .gif with the file names: original.gif, mirror.gif, upsidedown.gif, and upsidedownmirror.gif
Create a zip file for your lab9 folder.
Upload lab9.zip to Blackboard.
