ETSU Logo

CSCI 1210

Essentials of Web Development

Lab 2

Part 1

  1. In your labs folder on your removable drive, make a new folder named lab2
  2. Download waterfall.jpg and save it on your external drive in your lab2 folder. Depending on what browser you're using, you may have to copy the file to your removable drive from the Downloads folder
  3. Click the Cortana Button
  4. In the search bar, type in gimp
  5. Click on the GIMP [GNU Image Management Program] application that appears under Programs (at the top)
  6. GIMP is a cross-platform image editor available for GNU/Linux, OS X, Windows and more operating systems. It is free software, you can change its source code and distribute your changes.
        Whether you are a graphic designer, photographer, illustrator, or scientist, GIMP provides you with sophisticated tools to get your job done. You can further enhance your productivity with GIMP thanks to many customization options and 3rd party plugins.
  7. Once GIMP loads (and it'll take a little while), click File → Open
  8. Navigate to your lab2 folder and select waterfall.jpg. Either double-click on the file name or click on it and then the Open button
  9. Click Image → Scale Image...
  10. In the dialog that appears, change the resolution to 72 Pixels/Inch (see the picture below)
GIMP Image Size dialog window
GIMP scale image dialog window
  1. Unfortunately, GIMP isn't real good about letting you know how your changes will affect the file size until you just go ahead and save it, then look. Photoshop is better about that
  2. Now change the picture's width to 450 pixels After that, hit the Tab key. Notice that GIMP automagically calculates the appropriate height for you

    IMPORTANT! Make sure that the units are set to Pixels, not Inches. If you try to save two files that are 450 inches wide, you will lock up your computer

GIMP Image Size dialog window with new size settings
GIMP scale image dialog window with new size settings
  1. Again, GIMP doesn't do a real good job of telling you ahead of time how your changes are going to affect the resulting file.
  2. Click Scale
  3. Since the file size was changed, the picture now looks much smaller
  4. Click on the Zoom Tool (looks like a magnifying glass): GIMP zoom tool
  5. Hover the mouse over the image and left-click a couple of times
  6. Now, with the mouse still hovering over the image, press and hold the Ctrl key and scroll the mouse's scroll wheel back and forth. Notice how the display changes
  7. Click File → Export As...
  8. In the dialog window that appears, change the file name to waterfall2.jpg. Make sure you're in the right directory, etsu_id.csci1210.com/labs/lab2
    GIMP export
    Exporting an image in GIMP
  9. Click Export
  10. <sigh> Once again, GIMP is great but it doesn't give you much idea how your changes are going to affect the resulting image...
  11. Change the Quality to 80. What this does is increase the compression ratio when the image is saved. I've found, over the years, that 80 (out of 100, in GIMP, vs. 8 out of 12 in Photoshop) works really well
  12. Click Export to save the file
  13. Now, download the file linvillegorge.jpg and save it to your lab2 folder
  14. Open linvillegorge.jpg in GIMP
  15. Notice that, once again, we have a file that's too big for the web
    linvillegorge.jpg's file size
    Waaaaaaay too big!

    NOTE: If you're not familiar with file sizing, 15.4 MB is 15,400,000 bytes [give or take]. What we're shooting for here on the web is something around 100,000 bytes. So the original file is 15.4 times what we want!
  16. Click the Cropping Tool: GIMP's Cropping Tool Icon or GIMP's Cropping Tool Icon
    • Here's where things get a little tricky
    • In the tool options window, make sure Fixed is checked and Aspect Ratio is selected (see below)
    • Set the size to 450 x 300
    • Click Highlight and select Rule of Thirds
    Cropping Tool Options
    Cropping Tool Options
  17. Place the cursor above and to the left of the waterfall in the picture
  18. Press and hold the left mouse button
  19. Drag the mouse down and to the right, to a point below and to the right of the waterfall

    Cropping an image with GIMP
    Cropping an image with GIMP

    (Your selection doesn't have to be exactly the same as the example above)
  20. Notice that, if you don't get it exactly the way you want the first time, you can "grab" one of the handles in the selection area and adjust the selected area

    Resizing Handles
    Resizing Handles


    If you're interested, note that the selected area is divided into thirds. This comes from photography's Rule of Thirds, which says that to make a photograph interesting, its focal point should be along one of the lines or at one of the four intersections, not in the center of the viewing field.

    Rule of Thirds
    Rule of Thirds


  21. Once you're satisfied with your selected area, hover the cursor inside it and double-click
  22. Click Image → Scale Image
  23. As you can see, even cropped, the image's file size is still wayyyy too big, so let's resize it here
  24. Once again, change the resolution first to 72 dpi. Then change the width to 450 pixels
  25. Now, click File → Export As...
  26. Give it a file name of lg2.jpg (I like short file names)

    Saving lg2.jpg
    File save options


  27. Make sure the compression ratio ("Quality") is set to 80

    Image Size Window
    File save options


  28. Click Export to save the file

Next »