Assignment #12 -- GNU Image Manipulation Program (GIMP)

• This assignment will demonstrate:
  • Installing and using GIMP for some basic image-editing operations
  
  
• If GIMP is not installed on the computer you are using (For instance, if you are in the Lab, GIMP is probably not installed.), install it. You may download the GIMP installer at http://www.gimp.org/downloads/. On a Windows computer, I recommend that you use the link on this page which says "Download GIMP 2.10.6". On a Mac computer or a UNIX-like computer, look for the link which says "Show other downloads."
  
  
• Start GIMP. The first time you start GIMP, it takes a few minutes to locate and configure some tools and filters. Be patient.
  
  
• You will make a new image for this assignment. (Most of the techniques which you will use for this assignment are also useful for changing existing images, also.) Press <Ctrl>+N, or click "Edit", "New...". Accept the default settings (usually 640 by 400 pixels). Click OK, or press <Enter>.
  
  
• Follow these steps to use some of GIMP's basic tools:
  1. Fill the image (on the "Background" layer) with a color other than white.
  2. Save the image's information as an *.xcf file.
  3. Add a new layer to the image. You can use the default values, including "Transparency".
  4. Add a circle to the new layer. Use a color, of course, which contrasts with the color you filled the "Background" layer with. (HINT: Use the <Shift> key to constrain the selection to a circle.)
  5. Select yet another contrasting color, and fill the circle with this new color. Don't overwrite the circle itself. (HINT: Use the "Fill similar colors" option.)
  6. Add some text to the image. Use a color which contrasts with all of the other colors that you have used so far.
  7. Rotate the text to about 45 degrees from horizontal.
  8. Center the text in the circle.
  9. Scale the image to 600 by 375 pixels.
  10. Add a drop shadow to the text. You can use the default settings, or you can be creative with the settings. Have fun!
  11. Add another layer, and make sure it has a transparent fill color. Now position the layer in the "Layers" listing so it is "behind" the text layer. If the drop shadow (from a previous step) is on a separate layer, also make sure you position this new layer behind the drop shadow layer.
  12. Click on the circle's layer in the "Layers" list, and use the "Select by Color" tool to (re-)select the circle's fill color.
  13. Using the new layer which is "behind" the text, fill in the circular selection with a gradient. (HINT: Make one of the colors in the gradient tool the same as the fill color that is in the circle. This is just a suggestion and not actually a requirement.)
  14. Change the image's opacity to about 70%.
  15. Export the image as a *.jpg file. Save it into an images directory under the directory where you have saved your html and css pages so far.
  
  
• You may put another <img> tag into the body of your index page, or you may add the new <img> tag to another page, such as the Portfolio page, using the image that you created in GIMP as the src. Put this new <img> tag wherever it fits into your page.
  
  
• Validate your HTML page that you put the image into, with the W3C's HTML Validator page. I will also be validating your page, so this validation will be part of your grade.
  
  
• If you made any changes to your stylesheet, validate your stylesheet with the W3C's CSS Validator page. I will also be validating your style sheet, so this validation will be part of your grade.
  
  
• Upload your modified page (the page where you added your new <img> tag), your GIMP image file, and your stylesheet page (if you made any changes to it) to your Freehostia server's folder.
  
  
• You can test your page on the class server by selecting the "Student Sites" link on the class site and then clicking your name in the bulleted list. Make sure you refresh/reload the page with F5 to get the new version of your page!