SPR14-ITEC2110-09:Project 1

From GGCWiki
Jump to: navigation, search

Back to the Class Page


The Digital Image Project

Due: Tuesday, February 25, 2014, 11:59 pm

Overview: You will complete several graphic design artifacts, including a desktop wallpaper, an icon for a mobile app, and an Instagram-style photo.

Topics: Digital Images, GIMP, Inkscape, GGC Wiki

Project Template: Project 1 Template

Instructor's Submission: CuneoJoshua_2110_Pjt1

IMPORTANT NOTES: Please read all instructions thoroughly and carefully before calling on the instructor for help. Please remember that your neighbors, the Inkscape and GIMP help menus, and the internet are also all resources that you can consult. Please begin early to give yourself time to ask questions and resolve any technical difficulties.

If you want to work on your own computer, download Inkscape from the Inkscape website and GIMP from the GIMP website. If you use a Mac, you will have to download and install XQuartz to run Inkscape. You are also welcome to use other image editing programs, but this class only supports the aforementioned software.

If you want me to look over your project before you turn it in, please see me in person during class or during my office hours. I will not review projects submitted via e-mail.

I will edit this page over time to provide clarifications and additional resources.

Before You Begin

1. Edit your Student Profile page to include a link to your Project 1 page. Give this page the name LastnameFirstname_2110_Pjt1 (ex. CuneoJoshua_2110_Pjt1).

  • How do you add a link to your profile page? Check out Picard,_Jean-Luc_ITEC2110 for an example. You can click the underlined "Ab" button in the Edit window to insert the syntax you need.

2. Copy and paste the following template on your Project 1 page: Project 1 Template.

  • Remember to click on the Edit tab. You will be copying the text in the Edit window.

Part I: Make a Desktop Wallpaper

A desktop wallpaper image is the image that sits behind your icons and windows on the desktop of your operating system. You may have had experience setting your wallpaper using custom images from the internet, but you can design your own as well. Many of the wallpaper images that you find online (such as the ones here) are created with digital image programs like Inkscape and GIMP.

1. Get the screen resolution of your current monitor (use the System Properties or Control Panel on your computer, or go to http://www.whatismyscreenresolution.com/).

2. Open up Inkscape and set the properties of your document to the same width and height as your screen resolution (File -> Document Properties, Custom Size window, Width and Height, Units = px).

3. Now create a custom wallpaper using the shapes, fill, and curve tools found in Inkscape. Your design can be whatever you wish (but not obscene or offensive) so long as it has a coherent pattern or design and contains at least the following:

  • A background color other than plain white.
    • Create a background by drawing a colored rectangle that covers the white drawing canvas.
  • At least four distinctly different shapes types (including freehand shapes) not drawn with the Bezier Curve tool.
    • All instances of a shape type count only once. For instance, all rectangles count as one shape type, as do all freehand shapes.
    • A shape and a separate piece of that same shape (ex. a circle and semi-circle) count as one shape type.
    • The rectangle you use for your background does not count toward your four shapes.
  • At least eight distinctly curved Bezier Curves.
    • Straight lines do not count. Your curve must bend in an obvious way.
    • Remember that Bezier curves are not the same as freehand shapes.
  • At least five different colors.
    • At least two colors cannot be black, white, or gray.

I recommend a separate layer for the background, each shape and each Bezier Curve.

4. Save your wallpaper (early and often!) as a SVG file (a vector graphic file format) with the name LastnameFirstname_Pjt1_Wall.

  • SVG is the native file format that Inkscape uses. Do not save in another format until you are finished with this part of the project, or you may lose some of your information.

5. When you are finished with your wallpaper, save it, and then export it to PNG format.

  • Remember that you can use either File -> Save As -> Cairo PNG or File -> Export Bitmap... -> Page. Remember that if you use the latter, you must flatten your file in GIMP first before uploading it to the wiki.

6. Open your PNG file in GIMP and export it out as an uncompressed bitmap (File -> Export, then choose "Windows Bitmap" under "Select File Type (By Extension)").

  • Accept the defaults in any pop-up window.

CuneoJoshua ExportBMP.png

7. Go back to Inkscape. Delete approximately half the shapes in your wallpaper, then save it out again as an SVG file with the name LastnameFirstname_Pjt1_HalfWall.

8. Repeat steps 5 - 6 for this modified wallpaper.

9. In GIMP, open up either of your BMP images and change it to grayscale (Image -> Mode -> Grayscale). Export it out as another uncompressed bitmap with the name LastnameFirstname_Pjt1_GrayWall.

10. Upload your seven graphics files (2 SVG, 2 PNG, and 3 BMP) to the wiki.

  • Please do not panic if your SVG files do not display correctly after uploading. This is normal. All of your SVG information is still there, but the wiki is not rendering it correctly.

11. Edit your Project 1 template to display your PNG file and link to your SVG and BMP files.

  • Wikis cannot display SVG files correctly, and BMP files are not well-suited for web display.
  • Scale your PNG file to about 300 px in width when you display it.

12. Add the file size of each file.

  • The sizes of your two SVG files should be different.
  • The sizes of your two PNG files may be the same or different.
  • The sizes of your first two BMP files should be the same. The size of your last BMP should be different.

13. List at least four shapes and at least eight Bezier Curves that you use in your wallpaper.

14. Describe the theme of your wallpaper. How are the elements related? What idea or scene are you trying to convey?

Part II: Make a Mobile Phone App Icon

Mobile app development is all the rage these days, and icon creation is a crucial part of that process.

1. Open up Inkscape and resize the drawing canvas to 512x512 px (see Step 2 of Part I).

2. Design an icon that might appear on a mobile phone. Your design can be whatever you wish (but not obscene or offensive) so long as it has a coherent pattern or design and contains at least the following:

  • At least one shape type
  • At least one gradient fill
    • The gradient fill must not contain white.
  • The rounded corners customarily seen on iPhone icons
    • HINT: When creating your background, look for the values Rx and Ry and change them to 100.
  • The icon is the same size as your canvas.
    • Be careful not to make your icon so big that part of it gets cropped off.

A really thorough tutorial on icon creation in Inkscape is available here: http://www.cocoawithlove.com/2009/11/creating-iphone-and-mac-icons-using.html.

3. Save your file as an SVG with the name LastnameFirstname_Pjt1_Icon512.

4. Save your file again as a PNG.

5. Most mobile phones require icons to be submitted in a variety of sizes. Open up your PNG file from the previous step in GIMP.

6. Resize the file to 256x256, 96x96, and 57x57, exporting it out to a PNG after each resize.

  • HINT: In GIMP, look at Image -> Scale Image.
  • I recommend adopting a file naming convention to tell the different sizes apart. For instance, LastnameFirstname_Pjt1_Icon256.

7. Upload your SVG and four PNG files to the wiki.

  • Please do not panic if your SVG files do not display correctly after uploading. This is normal. All of your SVG information is still there, but the wiki is not rendering it correctly.

8. Edit your wiki page to display the four PNG files and create a download link to the SVG file.

9. Add the file size of each file.

10. Describe the theoretical app for which you created an icon. What does the app do?

Part III: Make an Instagram

Instagram is a mobile phone app that allows users to apply digital filters to images before uploading them. These same filters can be found in most professional image editing programs.

1. Go online and find a photograph of your choice (or use a photograph of your own) that meets the following criteria:

  • It has a size of at least 300x200 pixels (although bigger is better)
  • It is in color
  • It was taken in a well-lit area
  • It has a clear, sharply defined foreground and background (i.e. neither is very blurry or pixelated). The background should not be black, white, or another solid color.
  • The foreground and background are distinguishable from one another.
  • It has had no apparent manipulations done to it already

2. Open your photo up in GIMP and save it in GIMP's native .xcf format (the name doesn't matter, since you won't be uploading this file). Be sure to save early and often! Export your original image to a JPG file if it is not in that format already. Use the name LastnameFirstname_Pjt1_GIMP1.

3. Find a second image online with a clearly defined foreground and background. Open that image up in GIMP, cut out at least one foreground object, and paste it into your first image so that the object looks like it's part of your first image.

  • Paste your foreground object to a second layer. This will make it easier to move around and edit.
  • Cut out your foreground object carefully so that you don't take part of the background with it. You can also clean the foreground object further once it's pasted into your image.

4. Export your image as LastnameFirstname_Pjt1_GIMP2 in JPG.

  • NOTE: If your GIMP file has layers, you may get an error message saying JPG doesn't support layers. Select Export on the pop-up menu. You can leave all other options to their default values.

5. Apply at least three digital filters of your choice to your image. One filter must alter the color of your image (ex. a grayscale or sepia tone filter), and the other two are up to you. Export out another copy of your image as JPG after you apply each filter (LastnameFirstname_Pjt1_GIMPX, where X = 3, 4, or 5).

  • Each filter must be cumulative. That is, the filters must be applied on top of one another in succession.
  • The same filter must be applied to both foreground and background. To make this easier, I recommend flattening your image before applying filter.
  • Each filter should be distinct. There must be obvious visual differences in each successive image.

6. Now add a border and a digital signature to your image. Export this image out as LastnameFirstname_Pjt1_GIMP6 in JPG.

  • There are several ways to do borders. One way is to create a new layer above the others, fill it in with a color and use the selection tool to delete the stuff you don't want.
  • Resource: Adding Text to a Picture Using GIMP
  • Be sure to make both your border and digital signature visually obvious.

7. Open up your last JPG file in GIMP and export it as a Windows Bitmap file with the name LastnameFirstname_Pjt1_GIMP_Bitmap.

8. Open your BMP file from the previous step and change it to an Indexed Color image (Image -> Mode -> Indexed). Export it to BMP as Lastname_Firstname_Pjt1_GIMP_Indexed.

9. Show the color palette for this image (Windows -> Dockable Dialogs -> Colormap). Take a screenshot of this palette and save it out as a JPEG or PNG with the name Lastname_Firstname_Pjt1_GIMP_Palette.

  • Take a screenshot of or crop your screenshot to JUST the palette. I don't want a shot of your entire monitor.

10. Upload all nine images to your Project 1 template. Below each of your first six images, list the filter or modification applied. List the file sizes for your two bitmap files.

Part IV: Answer the Questions

On D2L is a PDF with some final questions for you to answer for this project. Please open up a text file, save it as LastnameFirstname_Pjt1, and answer the questions in the PDF. Submit your file on D2L when you're done.


How do I create a Project 1 page on my profile?

Take a look at the syntax on the example student profile to see how it's done.

Can I use Inkscape and GIMP on Windows? Are the programs the same on both Windows and Macs? Can I transfer files back and forth between Windows and Macs?

Yes to all. I encourage you to keep your project on a thumb drive. Then you can plug it into any computer running Inkscape and GIMP, regardless of the operating system.

How do I create a colored background in Inkscape?

You cannot simply "fill" in the background in Inkscape. To create a colored background, draw a rectangle that covers the entire page and then fill it with the background color of your choice.

How do I construct an open Bezier curve in Inkscape?

Draw your curve, and when you get to the last point you want to draw, double-click the mouse.

I get a MIME-type error when I try to upload one or more of my images to the wiki.

Try the following steps:

1. Open up your image in GIMP and flatten it, then export it out in the same format.

2. If that doesn't work, try uploading using a different browser.

3. If neither of these options works, please contact me.

Additional Tips and Resources

  • Jim Rowan's Captured Videos from last semester - Dr. Rowan also teaches Digital Media and captures all of his lectures to video, including walkthroughs of most of the software we use in this class.
  • Misc Software Tutorials

Back to the Class Page

Personal tools