ITEC2110 Project 1

Part 1

Overview, Part 1: You will be creating a bitmapped image of your initials, using Bezier curves in Inkscape to trace around the letters and produce a vector graphic, then posting the images and making them available for download.


  • Review the Inkscape resources at our course wiki page to get acclimated
    Using TextEdit (text software found on the mac).
  • Create your initials in upper case (mine would be RL) in a font you choose and a font size of 144 (or larger).
  • Assign a color of your choosing to these letters.
  • Using Grab (screenshot software found on the mac)  or Snipping Tool (Windows) select then capture the full sized image that contains your initials.
  • Save this file as a tiff image. (You’ll need to do an extra conversion to get a tiff on Windows).
  • Open your new .tiff image using preview (preview is software found on the mac inside the applications folder)
  • Save the .tiff image as a .png using preview (you’ll be displaying the .png version in your table because .tiff will not directly display in a wiki)
    (Note: you can of course do the preceeding steps on a Windows PC. You’ll need to use tools like WordPad and the Snipping tool). Repeat the same process, creating a jpg from the original tiff.
  • Start Inkscape.
  • Import your .tiff file.
  • Now, using the Bezier curve tool, trace those letters creating two closed shapes.
  • Apply another color to these new objects.
  • Save these two objects as an .svg (a vector graphic, this is the default format for Inkscape). Remember to delete the original bitmap within inkscape before saving the svg file!
  • Upload the .tiff, the .png, a jpg and the .svg file to your project 1 page, following this template:  The Template for all 3 parts. This will allow you to publish and share your files, also allowing them to be downloaded.Optional: add two or more bitmap background images to your inkscape project to create a composite image. Set the fill color for initials to be semi-transparent. Upload as a separate svg file and provide another entry for this file in your web page. A placeholder in the template is already provided for these optional images.Hint for the optional part: you will want to insert different background images on different layers in Inkscape and then use the transparency setting on each layer to build your composite image.

Part 2

Part 2: GIF Animation

You are going to be building a simple 2D animation using both Inkscape and GIMP. The animation will use the method employed with physical flip books, where multiple frames are show in succession to provide the illusion of motion. The graphics used are of you own choosing. This graphic can be anything that you like, animal, vegetable, mineral… You will animate a thought bubble with an embedded text thought as illustrated below.

This exercise follows the same workflow you’ve already performed with the animated heart exercise. Interestingly, Google published an animated gif as part of the default google search page for Valentine’s Day on February 14, 2015. The gif is displayed here:

Valentines-day-2015-5081660856991744-5748755743637504-ror.gif

View animation / download full size image: here

Requirements for your image

  • Two line thicknesses
  • Three different colors
  • A GGC logo somewhere
  • You should animate at least 5 frames, more are ok

Here is an example of an animation that I build that would meet all of the project requirements.SPLutz-animated.gif

Post the following items to your Project 1 wiki page for Part 2:

  • the Inkscape svg project you used for creating your vector graphics
  • the GIMP xcf project you used to generate the animated GIF
  • the animated GIF file

HINT

This walkthrough may be helpful

Part 3 – Bitmapped Images

Introduction to Part 3

GimpTT.jpg

The purpose of this project is to perform a variety of modifications to a bitmap image. Once you have familiarized yourself with the tutorial material, you should be able to crop, blur, change colors, add borders, and add your signature to an image. You’ll also do something creative and unique making it your own creation.

  • Recall in-class image editing research we have pursued in class. You may want to return to the GIMP Essential Training on lynda.com as well.

Project Requirements:

As you perform each modification to your image, you must save them as you go along so you may display your progression:

  • Original Image
  • Blurred Image
  • B&W Background Image
  • Bordered Image
  • Final Product with Signature Image
  • Your Own Creation (peruse http://docs.gimp.org/en/filters.html to find something unique!)

This is a total of (6) Images.

  • You will use a table to house the images, a (3) column x (2) row table.
  • Include reflection questions at the bottom of your project page.
  • As was done earlier in parts 1 and 2, you may use this template for your project page.

Reflection of Project:

Answer these questions with your Bitmap Project page.

  • What file extensions are most common to bitmap images? Name at least 3.
  • Are bitmap images easier to work on than vector? Why or Why not?
  • Why are bitmap images more common in everyday usage? Include its advantages in your answer.
  • What were the most useful feature(s) used in GIMP that helped you with your project?

HINT

Several walkthroughs in the course’s resource list may be helpful