HW10 - Graphics

Rutgers University - Department of Computer Science

CS110 - Introduction to Computers and Applications

Jt - Summer 2017

 

Graphics Homework Assignment

Due Date:

Tuesday July 11

Printouts:

1. Version 1: Your original flyer. (in color)

2. Version 2: Your modified flyer. (in color)

3. Summary Document: List of features used on the flyer. (in black and white)

4. Presentation printed 6 slides per page. (in color)

Other Requirements:
• Name your drawing(s), summary document and presentation as explained in below.
• Make these all be part of your CS110 collection.
• Edit your HW4 website so one version of your flyer is included on the site.
• Edit your HW4 website so your presentation is presented on it.

Evaluation:

15 points

Related Materials:

The built-in help features for Drawing and Presentation in ScarletDocs.
http://docs.google.com/support/bin/topic.py?hl=en&topic=28131

Preparation:

You will be exploring two separate types of Graphics for this assignment, graphical editing and presentation software. Both are available in ScarletDocs/Drive where you will be creating a Drawing and also a Presentation.

Note: To get into the Drawing component of ScarletDocs/Drive, you can either use New Drawing off the File menu, once you are in Docs. Or, alternatively, in Drive, you can click the New button and select More, Google Drawing.

As usual, before beginning this assignment you may want to experiment with both the drawing component and also the presentation editor of ScarletDocs/Drive before working seriously on your assignment. It would be wise to sketch out your ideas for a flyer on a piece of paper before attempting to create it on the computer. Also, it is worthwhile to review your key websites to choose any interesting graphics related to you product that you may want to use within your flyer or presentation.

Experimenting with the software first is important. It is rather easy to make huge modifications to your drawing which you did not intend - effectively destroying it - if you are unfamiliar with the software. Spending time to learn ScarletDocs drawing well before setting out to do a real drawing is highly intelligent and can save you much grief and frustration later.  Also, note that the UNDO command is on the Edit menu. If you make a major mistake but react quickly to use UNDO, you usually will be able to recover from your error. Likewise, if you haven't noticed yet, all components of ScarletApps allows you to See the Revision History (File menu), which makes it easy for you to get back to earlier versions of your document (and also to track who is making what changes when you are sharing the document with others.)

A wise thing to do while learning the software is to go to the HELP menu.


Assignment Part I: Drawing:

The main goal for this part of the assignment is to make a one-page flyer advertising that you are looking to purchase a particular product and asking individuals to contact you if they are interested in selling you one for a good price. To make the flyer eye-catching, it should mainly consist of graphics. You will not be graded on your artistic ability, but rather on demonstrating the various graphical features of ScarletDocs drawing. You are encouraged to include graphics that you can copy and paste from the websites where you found info on your product. (Note: It is somewhat illegal to use material that you have taken off of some websites without permission. But since this flyer is not really to be posted and you are doing this work for academic reasons, there is some flexibility in the copyright laws. ) However, it is also important that a significant part of the flyer be created by your own utilization of the various drawing features within ScarletDocs drawing.

You will be printing three items:

  1. Drawing Version 1: First, once your flyer is presentable, you should print a copy in color. (Color printing counts 25 cents a page against your quota in the Rutgers computer labs. So if you plan to use the labs, DO NOT print there until you have perfected your flyer.)
  2. Drawing Version 2: Then you will demonstrate your understanding of the graphics software by making a number of modifications to the flyer and reprinting.
  3. Summary Document: Finally, using ScarletDocs, create a short two-part document describing how you used the graphics features. In part one of this description, you will list the graphics features you used to create the original flyer and tell which part of the document these features were used on. (Example: "Shape Tool: used to draw the round table.") In part two of the description, you will list the modifications made to the original flyer and what features you used to make these changes. (Example: "Horse turned 90 degrees: Rotate command off arrange menu".) You should be able to create this summary document very quickly (15 minutes?) The purpose of it is to help your TA see what features you used and to make fair grading possible. This printout should not be in color; use the regular black and white printer instead.

This assignment is rather free form. Simply use the drawing component of ScarletDocs to make a flyer. Use as many graphics features as you care to demonstrate. The design of the flyer is up to you. Hopefully, it will be attractive and interesting and draw attention to the product you would like to purchase. Your first submission will be of this flyer.

As the second major step of this drawing assignment, you will make various modifications to the flyer. If you do not wish to ruin the original flyer, then use the "Make a copy..." command off the File menu and use a different name. What modifications you make, and how you make them are up to you. Again, the point is to demonstrate your knowledge of the software. So, be sure to make an adequate amount of adjustments to the original flyer.

If you are unsure whether you have demonstrated enough features while creating the flyer and making the modifications, feel free to ask your TA in recitation, lab hours, or through email for their impressions.

The final chore you need to complete for this assignment is to create the document listing the features you used (as described above.)

Naming & Sharing Your Assignment; Modifying Your Website

Like you did for the other assignments please name and share your work for this assignment as explained here.

• Name the drawing(s):
HW10 Lastname, Firstname Version 1 (of course, use your name, and a differentg number for each version you want to save separately.)

• Name the summary document:
HW10 Lastname, Firstname Feature Summary

• Also, make sure your drawing(s) and summary document are added to your CS110 Summer 2017 folder.

• Finally, insert one version of your flyer in the product website you created for HW4. (Using Scarlet Sites again.)

Features to Investigate:

It would be wise to explore the following features before attempting to work on this assignment.

Before working on your assignment, experiment and see if you can do most of the following activites. It will probably take you no more than 15 minutes to learn everything listed here if you don't mind making a mess as you play with the tools.

General

  1. How do you create a new drawing?
  2. How do you give the drawing a name?
  3. How do you make a copy or duplicate of your work file?
  4. How do you make sure your drawing is part of a collection?
  5. How can you insert an existing drawing into a website using Sites?
  6. What is involved in printing? How do you make sure printouts go to the color printer?
  7. How do you find an old drawing to continue to work on it?
  8. How do you copy graphics from one document to another, or from a webpage to a ScarletDocs drawing? (You may be able to drag the images from a browser window, into the ScarletDocs drawing. If that doesn't work, use the feature on your computer and browser to save an image to the desktop. For example, on a Mac you can often hold the control-key while clicking the mouse button down on top of an image and use the Save Image To command that appears on the menu that pops up. After this you can use the Insert Image command inside of Google Docs drawing.
  9.  If you make a mistake, how can you undo what you have done?

Drawing

  1. How do you type text into a drawing? Set or change fonts, styles, sizes?
  2. How can you insert more interesting Word Art?
  3. Can you use the various shape tools? Rectangle, rounded rectangle, oval and many others?
  4. How do you draw a curved line?
  5. Can you make perfect shapes like squares and circles easily? (Hint: try holding down the shift key when you draw.)
  6. How do you you use the polyline tool?
  7. What tool do you use to scribble (or draw freehand)?

Modifications while Drawing

  1. How do select an object?
  2. How can you select all the objects?
  3. Can you select more than one object? (Hint: try clicking on one object, then shift-clicking on others. Hint: try dragging the arrow over many objects at one time.)
  4. How can you group objects together so they act as one (more complex) object. How can you ungroup such an object back to its individual components?
  5. How do you delete an object? (Hint: select one or more objects and then hit the delete key.)
  6. How do you change the size of an object? (Try dragging any corner once selected.)
  7. Can you move an object?
  8. After it has been drawn, how do you change the interior color of the a selected object?
  9. How can you select the thickness, color or pattern of the outline of a selected object?
  10. Can you place arrowheads on the ends of a line you draw?
  11. How do you make the fill of an object clear so you can see through it to other objects underneath it?
  12. How can you easily make an exact duplicate of a selected object?
  13. Can you line up (align) a number of selected objects by their top, or side?
  14. Can you order selected overlapping objects above and below one another in different ways?
  15. Can you distribute a number of selected objects so they are eqi-distanced across a section of the drawing?
  16. Can you reshape an object after it has been drawn?
  17. Can you rotate an object?

Assignment Part II: Presentation:

Now for the second part of this assignment you will learn a second category of Graphics software, designing a slideshow or presentation.

Do this by creating a new Presentation (use Slides) in Scarlet Docs which you will name appropriately and place in your CS110 collection in order to get credit.

Name it: "HW10 Lastname, Firstname Slideshow"

You will print this presentation - 6 slides per page - in color to submit along with your drawing printouts by the due date. (This might be two steps on some computers, the "printing" feature off the menu in scarlet docs might create a PDF file, which you can then print out in the traditional way on your computer.)

Finally, you will add (insert) this Presentation within your product website you made in HW4, just like you did with your drawing.

Your Presentation must be at least 12 slides long and include a variety of features including: Transitions and Animations; Word Art; a Table; change Background, and lists of different types off styles (bullets etc. - hint: use "List Options" at end of List submenu.)

The topic of your Presentation should be "What the Product Theme assignments in CS110 have taught me about ScarletApps so far."

Stick to that theme, but other than that, this part of the assignment is also very free form, allowing you to be creative and to explore and demonstrate as many features of Scarlet Docs presentations as you can.

Enjoy and Good Luck, -Jt