Logo, Banner, and Icon

In this second assignment, you'll create a logo, Web-site banner and icon for a real or imaginary client (an organization, business, class, etc., or perhaps for yourself).

You will produce these three graphics using Photoshop, and may combine non-optically created graphics, photographs, scanned images, text, etc. Though I'm not requiring you actually to work with your client for this assignment, my ideal would be for you actually to give these images to your client for immediate use on Web sites and possible adaptation to stationary and business cards.

I will also evaluate the effectiveness of your logo in the graytone printout since the Logo should work in black-and-white print documents as well as in color.

Be sure to read the article on logos from webreference.com and refer to its ideas and techniques in your annotations.

Your work will be evaluated for how well the three graphics work visually and rhetorically (that is, appropriately for the client and audience). The three graphics are distinguished by their relative sizes and different uses:

1. The Logo (for print or the Web)

The logo (for print or the Web) is a full-sized combination of visual and verbal elements combined to identify the client, appeal to the intended audience, and set the tone for a document. The logo could be used anywhere the client needs an institutional "signature." The logo should work in color or graytone/black-and-white.

3. The Banner (for the Web)

This graphic would use the elements of the logo in a banner meant to appear at the top of the home page, or perhaps at the top of all the pages of a site to unify them. An example would be the "Document Design" banner at the top of this page.

4. The Icon (for the Web)

The icon is a small graphic (about 20 pixels wide like this star), which could be used by your client throughout the Web site as bullets, end marks to provide visual continuity and continued branding. The icon should visually refer back to an element (or elements) of the logo--dominant colors, letter, graphic designs--but be identifiable and attractive in this very small size. For more samples, look in the tray at the bottom of your Windows screen at the line-up of programs you have open or available. The icon will probably best be saved in as GIFs (more on GIFs vs. JPEGs, etc. later)

An important part of this assignment is also writing your annotations. The annotationed printout will be your chance to explain how each of these graphics work well technically, creatively and rhetorically.

Submission Directions for the Logo, Banner, Icon

To submit this project, you'll need to do the following:

1. Mount the images on a Web page. We'll do this together in class.
2. Post the Web page "index.html" and the image files to your Web space at www/5220/logo (that is, in your "www" folder, have a folder called "5220" and inside of that save the .html page and image files in a folder called "logo"). See the handout "Transferring Files to the Web with Dreamweaver" for a refresher.
3. Go to the Web address of the page you posted to make sure it's there, and that the images are functioning and visible. If you've named the Web page "index.html" and arranged your folders as I've suggested, the URL should be
   <http://www.d.umn.edu/~youruserid/5220/logo>
4. Send the URL. In a message to the Webx discussion "Logo, Banner, Icon Project URLs" paste in the URL from the browser and post the message.
5. Printout a black-and-white copy of the Web page using your browser and turn it into my box in Humanities 420 by 4 p.m. on Wednesday.
6. Sign up for a conference via Webx.

<top of page>

Resources for the Logo, Banner, Icon

• Article on logos from webreference.com
• HTML Color Names
• O'Reilly's Color Names
• Color Matters
• RGB/HSB Color Picker
• Rich Franzen's Wheel of Saturation, Intensity, and Hue