slide1 l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS PowerPoint Presentation
Download Presentation
Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS

Loading in 2 Seconds...

play fullscreen
1 / 16

Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS - PowerPoint PPT Presentation


  • 376 Views
  • Uploaded on

Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS 38 Mark Branom markb@stanford.edu http://www.stanford.edu/people/markb/ Course Web Site: http://www.stanford.edu/group/csp/cs38/ Course Description

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS' - Gabriel


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the WebStanford University Continuing Studies CS 38

Mark Branom

markb@stanford.edu

http://www.stanford.edu/people/markb/

Course Web Site: http://www.stanford.edu/group/csp/cs38/

Week 1

course description
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.

Week 1

administrivia
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 Required Recommended

Homework Required Required Recommended

Project Required Required Not required

By request By Request Default choice

Week 1

more administrivia
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:
    • markb@stanford.edu
    • 650-725-1717

Week 1

more administrivia5
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) ora web creation tool (e.g., Dreamweaver)
      • A web browser (Firefox / Internet Explorer)

Week 1

assignments final project
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.

Week 1

course syllabus
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

Week 1

week 1 agenda
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)

Week 1

graphics and the web
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.

Week 1

types of web graphics
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.

Week 1

obtaining artwork
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/

Week 1

downloading graphics
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.

Week 1

downloading graphics example
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

Week 1

downloading graphics example cont
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”

Week 1

downloading graphics example cont15
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!

Week 1

class exercises
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.

Week 1