HandsOn Graphics Production for the Web Stanford University Continuing Studies CS 38

1
Hands-On Graphics Production for the Web
Stanford University Continuing Studies CS 38
Mark Branom markb_at_stanford.edu http//www.stanford
.edu/people/markb/ Course Web Site
http//www.stanford.edu/group/csp/cs38/
2
Course Description

• In this hands-on class, students will learn basic
  graphics production skills for the Web.
• Topics include
• digital image basics
• image formats
• image manipulation
• digital camera and scanner usage
• finding free artwork on the web
• roll-over effects
• image maps
• how to use "slicing" to make images seem to load
  faster.
• Students must be familiar with computer basics
  and should be familiar with the Internet. We will
  be working on the PC platform however, since
  graphics are cross-platform, you can apply what
  you learn to other computer platforms.

3
Administrivia

• Grading
• You have the option of taking this course for a
  letter grade, CR/NC, or as an Audit.

Letter Grade CR/NC NGR Attendance Required Requir
ed Recommended Homework Required Required Recomme
nded Project Required Required Not
required By request By Request Default choice
4
More Administrivia

• Resources
• Each week you will receive a handout with the
  weeks topics. Copies of the handouts and links
  to resources will be posted to the CS38 website
• http//www.stanford.edu/group/csp/cs38/
• How to reach me
• markb_at_stanford.edu
• 650-725-1717

5
More Administrivia

• You will need
• Access to a computer
• Familiarity with computer basics
• Access to the internet (many free ISPs exist)
• A geocities account (well do it in class)
• Access to the following tools
• A text editor (Notepad / SimpleText) or a web
  creation tool (Dreamweaver / GoLive / FrontPage)
• A web browser (Netscape / Internet Explorer)

6
Assignments Final Project

• The weekly class assignments will build toward
  the final project.
• The final project will be to turn in a web site
  with images created, downloaded, updated, and/or
  manipulated by the student.
• The assignment will be "turned in" by being
  loaded onto your geocities webspace.

7
Course Syllabus

• Week 1 Create simple web page with graphic and
  publish it on the web
• Week 2 Manipulate and digitize images
• Week 3 More image manipulation
• Week 4 Imagemaps Slicing
• Week 5 Roll-overs and animations

8
Week 1 Agenda

• Get graphic from a free artwork server
• Put graphic on web page using Dreamweaver
• Link graphic to a web page
• Establish Geocities account
• Publish the web page and graphic (using
  Geocities)
• Homework Bring in photos or artwork to scan!

9
Graphics and the Web

• There are a number of ways you can obtain
  graphics to put on a web site. You can use a
  drawing program such as Illustrator or Freehand
  to create your own graphics, you can obtain
  graphics from one of many artwork servers, or you
  can modify existing graphics to suit your own
  needs. This week, well focus on obtaining free
  artwork.

10
Types of Web Graphics

• GIF GIF (Graphics Interchange Format) is the
  most common graphic type on the web. It can be
  pronounced with a hard or soft g. GIF is
  limited to 8-bit color information (256 colors)
  and works best for line art. It allows for
  transparent and animated graphics.
• JPEG JPEG (Joint Photographic Experts Group)
  was designed for color-rich images, such as
  photographs. JPEG compresses graphics with high
  color depth (24-bit color -- up to 16 million
  colors) so that they are smaller and download
  faster. JPEG compression is "lossy" -- some
  image detail is lost during compression
• PNG PNG (Portable Network Graphic) was also
  designed for color-rich images, but unlike the
  JPEG format, PNGs are not lossy. PNGs use vector
  graphic technology to display images in rich
  detail regardless of the size of the image.

11
Obtaining Artwork

• There are a number of resources on the Internet
  for obtaining artwork. Some allow you to obtain
  artwork for free (usually with restrictions)
  other sites charge by the image still others
  allow you to download an unlimited number of
  images, but charge you a daily, weekly, monthly,
  or annual fee.
• http//dir.yahoo.com/computers_and_internet/graphi
  cs/clip_art/

12
Downloading Graphics

• In Netscape Internet Explorer
• Point your mouse over the image and right-click
  the image (on a Mac, control-click)
• Choose Save Image (Picture) As . . .
• Specify the destination location of the image
  file on your computer. Click OK.

13
Downloading Graphics example

• Suppose you came across this website Ive created
  which has some pictures of me. Suppose you
  really loved the picture of me on the left and
  you want to download it for use on your own
  website. How would you go about doing this?

BTW, the URL is http//www.stanford.edu/markb/pi
ctures.html
14
Downloading Graphics example (cont.)

• Step 1 Move the mouse over the image that you
  want and right-click on the image you want (on a
  Macintosh, control-click)
• Step 2 Choose Save Image As

15
Downloading Graphics example (cont.)

• Step 3 Choose the location on your computer
  where you want to save the image. Im going to
  save it on my floppy disk.
• Thats it!

16
Class Exercises

• 1) Obtain a graphic from a free artwork site and
  download it onto your floppy disk.
• 2) Insert the downloaded graphic on a web page on
  your floppy disk.
• 3) Establish a Geocities account
• 4) Publish the web page and graphic using
  Geocities.