Web Graphics with Photoshop

Accelerated Technical Training for Web Authors

About this Course
  1. Overview
  2. Courseware
  3. Format
  4. Audience
  5. Prerequisites
  6. Objectives
  7. Method
  8. Textbook
  9. Classroom Setup
  10. Site

Overview

 Do a good job with images and graphics and your Web pages will convey your message and invite repeat visits. Alas, many Web authors lack the techniques for using graphics well, and overload their pages -- and precious network bandwidth -- with clumsy images and oversized files.

The challenge is to deliver dramatic, high-quality images while maintaining small file sizes. Meeting this challenge demands both a well-chosen set of image processing techniques, and a solid foundation in the technology of computer imaging.

Photoshop is the Rolls Royce of image processing tools. Its capabilities are immense. It is the tool of choice for most professional website developers.

Step-by-step procedures for conducting common graphics preparation tasks for the Web are presented here.

Courseware

 This is an instructor-led, hands-on class. The training materials are on the Web at http://www.keller.com/photoshop/.

Format
  • Two full days.
    Note: For advanced audiences, Day One (Photoshop basics) can be skipped.
  • Emphasis on practical skills.
  • Hands-on.
  • Classroom-based.

Audience

 This course is for the beginning Photoshop user who wants to produce graphics for web pages.

Prerequisites

 Check the boxes for the prerequisites you satisfy.
    You are comfortable with the PC or workstation environment.
    You can find, add and delete files from the file system.
    You can use a mouse.
    You know HTML well enough to add images to web pages.
If you checked three boxes or more, you're well-equipped to get the most from this class.

Objectives

 In Day One, you will practice and learn to:
  • Paint images with Photoshop's drawing tools.
  • Create a composite image from multiple image sources.
  • Manipulate photographs by deleting, editing and adding elements.
  • Explore image compression for different types of images.
  • Touch up an old black and white photo.
  • Create images with transparent backgrounds.

In Day Two, you will:

  • Build intuitive website navigation systems with buttons, text and icons.
  • Create and use images to make your pages more effective and appealing.
  • Optimize performance with GIF and JPEG compression and palette reduction.
  • Add drama with drop shadows and perspective.
  • Use masks and channels to isolate and manipulate elements of images.
  • Grab reader attention with powerful headlines.

Method

 The course consists of a series of lessons, each with a hands-on exercise. The lessons during the first day concentrate on the basic tools and methods of Photoshop. Included are exercises in which you learn to use:
  • Drawing tools to create orginal artwork or touch up existing work
  • The marquee selection tools to isolate and manipulate specific sections of images
  • Detailed analysis of compression schemes for saving images
  • Layers to control movement and size of selections within images
Day Two concentrates on the design elements of complete Web pages:
  • Background -- seamless and tiled nicely, muted colors, and textures and embossing must not detracting from the primary message
  • Headline -- large type filled and textured with a variety of fonts, fills, marquees, and filters
  • Main image -- a product, corporate logo, portrait, sketch, or photograph enhanced and made more appealing -- and downloading efficiently -- with drop shadows, collage, fine-tuning of colors, reduction of palette, and GIF or JPEG compression
  • Navigation system -- buttons, colors, shapes, well-chosen text and icons make this essential website feature intuitive and pleasant to use
Each lesson in Day Two builds on the one before it. It starts by showing the finished page, and then conveys the techniques that produce it. In the exercise, Photoshop techniques are applied to generate images. The images are then inserted into an HTML template, saved as a web page, and viewed in Netscape.

The course materials are delivered on the web and exemplify the techniques they propound. Each lesson provides step-by-step procedures for using successively more complex methods.

Textbook

 Lynda Weinman, Designing Web Graphics 2, New Riders Publishing, 1997, ISBN 1562057154, $55 (discounts can be found)

Classroom Setup

 Delivery of this course requires a classroom equipped with:
  • A PC or workstation for each student
  • A PC or workstation for the instructor
  • A projector for the instructor's computer screen
  • Connection to the Internet
  • A Web browser on each PC or workstation
  • Photoshop 4.0 (or newer) on each PC or workstation

Site

 The course can be taught in your classroom, anywhere in the world. Travel outside the San Francisco Bay Area requires reimbursement of the instructor's travel expense.

Copyright © 2020

Dan Keller Technical Services
2248 International Blvd., Oakland
California, USA 94606
tel: 415 / 861-4500