Transcript Slide 10 of 16 CS38: Graphics Production for

Using Dreamweaver, Photoshop, and Fireworks:
Graphics Production for the Web
Stanford University Continuing Studies CS 38
Mark Branom
[email protected]
http://www.stanford.edu/people/markb/
Course Web Site: http://www.stanford.edu/group/csp/cs38/
Week 1
1
Course Description
In this hands-on class, students will learn basic graphics production skills for the Web.
Topics include:
–
–
–
–
–
–
–
–
creating web pages using Dreamweaver
digital image basics
image formats
image manipulation using Photoshop and Fireworks
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.
CS38: Graphics Production for the Web
Week 1
Slide 2 of 16
Administrivia
Grading
You have the option of taking this course for a letter
grade, CR/NC, or as an Audit.
Letter Grade
Attendance Required
Homework
Required
Project
Required
By request
CS38: Graphics Production for the Web
CR/NC
Required
Required
Required
NGR
Recommended
Recommended
Not required
By Request
Default choice
Week 1
Slide 3 of 16
More Administrivia
• Resources
– Each week you will receive a handout with the week’s 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:
– [email protected]
– 650-725-1717
CS38: Graphics Production for the Web
Week 1
Slide 4 of 16
More Administrivia
• You will need:
– Access to a computer
– Familiarity with computer basics
– Access to the internet (many free ISPs exist)
– A geocities account (we’ll do it in class)
– Access to the following tools:
• A text editor (Notepad / TextEdit) or
a web creation tool (e.g., Dreamweaver)
• A web browser (Firefox / Internet Explorer)
CS38: Graphics Production for the Web
Week 1
Slide 5 of 16
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.
CS38: Graphics Production for the Web
Week 1
Slide 6 of 16
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
CS38: Graphics Production for the Web
Week 1
Slide 7 of 16
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)
CS38: Graphics Production for the Web
Week 1
Slide 8 of 16
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, we’ll focus on obtaining free
artwork.
CS38: Graphics Production for the Web
Week 1
Slide 9 of 16
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.
CS38: Graphics Production for the Web
Week 1
Slide 10 of 16
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/graphics/clip_art/
CS38: Graphics Production for the Web
Week 1
Slide 11 of 16
Downloading Graphics
• In Firefox & 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.
CS38: Graphics Production for the Web
Week 1
Slide 12 of 16
Downloading Graphics example
•
Suppose you came
across this website I’ve
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/pictures.html
CS38: Graphics Production for the Web
Week 1
Slide 13 of 16
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”
CS38: Graphics Production for the Web
Week 1
Slide 14 of 16
Downloading Graphics example
(cont.)
•
Step 3: Choose the location on your computer where you want to save
the image. I’m going to save it on my floppy disk.
•
That’s it!
CS38: Graphics Production for the Web
Week 1
Slide 15 of 16
Class Exercises
1) Obtain a graphic from a free artwork site
and download it onto your computer.
2) Insert the downloaded graphic on a web
page on your computer.
3) Establish a Geocities account
4) Publish the web page and graphic using
Geocities.
CS38: Graphics Production for the Web
Week 1
Slide 16 of 16