graphics for the web online, CIS58.53B
lessons 1 2 3 4 5 6 7 8

Examples
123
Resources
Surf Form

Lesson 1 Logos

Assignment #1 in Brief
Reading
Review Existing Logos
Create Logos for Each Client
Display Logo in 3 Sizes

Turn in Homework



Assignment in Brief (please look on the homework page to see detailed explanations of assignments)

1. Review existing logos to gather ideas
2. Create logos for each client
3. Display logo in 3 sizes for one client
4. Log on to your Gracie account and change the Password

5. Turn in homework as web pages

Reading
Read the Begin and Logos sections of the CD
Visit the Start Here page and become familiar with the website
Read this Lesson 1 page all the way through

Visit the Lesson 1 Examples pages to see many examples of logos



Review of Exisitng Logos
Corporate logos are an essential component for effective branding and marketing. Sometimes you will be asked to create a logo for a company, more often you will need to adapt an existing logo for use on the web.

The essence of an effective logo is simplicity. Most logos are simple shapes with the initials or name of the company. Complex ornate logos which include drawings or photos are not as effective, versatile, or recognizable.

This week you will be asked to design a logo for 2 clients and then display one of those logos in 3 sizes. The CD demonstrates logo design using Photoshop, however I encourage anyone who is familiar with Illustrator or Freehand to use these programs instead. For manipulating shapes and text, a vector based drawing tool is your best resource.

I have included a few examples of logos which are simple, effective and extremely recognizable.

Apple Logo Adobe Logo Macromedia Logo
PBS Online Logo Fed Ex Logo AT&T Logo
MSN Logo Canon Logo A&E Logo
NBC Logo CNN Logo Virgin Logo



Now lets take a look at how 2 companies adapted their logo for use on the web:

CBS - www.cbs.com

CBS Logo 1 CBS Logo 2 CBS Logo 3
CBS Logo 4 CBS Logo 5 CBS Logo 6


NIKE - www.nike.com

Nike Logo 1 Nike Logo 2 Nike Logo 3
Nike Logo 4 Nike Logo 5 Nike Logo 6


Creating a New Logo for Client
The tricky thing about a logo is it's size, they need to be small, I require students to create the logos in 3 sizes
  1. maximum 200 by 200 pixels
  2. maximum 100 by 100 pixels
  3. maximum 50 by 50 pixels
  4. the logo does not need to be a square, however all images are ultimately rectangles and the shape cannot exceed the dimensions provided

Here are my recommendations for logo design:

  1. Start with a simple shape
  2. Use solid colors (avoid elaborate patterns or blends
  3. Provide strong contrast between the shapes or words
  4. As you shrink the logo, take out elements, or simplify the shapes
  5. Retype text as the image is shrunken, (in Illustrator this is not necessary)


Resizing a Logo
It is easier to create an attractive logo which is 200 pizels in size. When that logo is resized to only 50 pixels, it gets more difficult to retain the shape and character of the image. I recommend you keep the shapes and letters simple, remove elements as you make the logo smaller, and use initials instead of the entire word. Review the Examples pages, and the JC and WWW examples section for ideas.


Turning in Homework
Place a logo on both the opening screen and second level page for each client. Flatten the page and save the flattened image in your campus directory or optional directory.

Next create a seperate Photoshop file which contains the logo elements. Create 3 versions of one of the logos, one which does not exceed 200, then one at 100 and finally a logo which is no more than 50 pixels on each side. Create a web page with all 3 logos. Add links on your homework page for the following items

< A href="campus/campus-logo.gif">
view my campus opening screen with a logo</A>

< A href="campus/campus-second-logo.gif">
view my campus second level page with a logo</A>

Follow this pattern for the optional client as well. Finally add a link for the logos at various sizes.

< A href="templates/logos-3sizes.html">
logos for 1 client displayed in 3 sizes</A>

 


instructor:
Corrine Haverinen  voice mail: 707.527.4999 X9206
e-mail:
haveart@sonic.net

top | home | start here | syllabus | homework | grading | message | instructor
lesson 1 | lesson 2 | lesson 3 | lesson 4 | lesson 5 | lesson 6 | lesson 7 | lesson 8


© 2001-2002 Linda Hemenway and Corrine Haverinen All Rights Reserved.
Designed and edited with permission by Corrine Haverinen.
This site is prepared for CIS 58.53B Designing Graphics for Web Pages students,
Santa Rosa Junior College, California. Reproduction in whole or in part in any form or medium without written permission is prohibited.