Photoshop CS3, Creating Web Graphics with

A new section of each course starts monthly. If enrolling in a series of two or more courses, please be sure to space the start date for each course at least two months apart.

All courses run for six weeks, with a two-week grace period at the end. Two lessons are released each week for the six-week duration of the course. You do not have to be present when lessons are released. You will have access to all lessons until the course ends. However, the interactive discussion area that accompanies each lesson will automatically close two weeks after the lesson is released. As such, we strongly recommend that you complete each lesson within two weeks of its release.

The final exam will be released on the same day as the last lesson. Once the final exam has been released, you will have two weeks to complete all of your course work, including the final exam.

Lesson 1
You've probably worked hard to master the tools and techniques of Photoshop. But now you want to become an expert at using it to create images and applications for the Web. In this first lesson, we'll prepare for the course ahead by exploring ways in which using Photoshop for the Web differs from using it for print. You'll also meet the fictitious client for the Web site we'll develop throughout this course, and you'll learn about your own Web site, which you'll design in the course's assignments.

Lesson 2
Photoshop has a secret: It can sometimes be a vector program, too. That means you can use it to create vector graphics, which you can resize without losing quality. The vector tools (the Pen and Shape tools) let you create precise layouts that are very easy to preview and change. Today, you'll begin a prototype of a home page using Guides, Shapes, Paths, and custom shapes.

Lesson 3
How do Web designers cope with color that looks different on every computer? Do you still need a Web Safe palette? What is a Web Safe palette? In this lesson, we'll tackle the many color-related issues you must face when you're designing for the Web.

Lesson 4
Believe it or not, there are only 64 colors that are absolutely safe to use on the Web. But can an image possibly look good using only 64 colors? Many of them can, and today, you'll find out how an image's content affects the number of colors you need to produce a good quality image. The GIF file format is one of the two basic ways to save images for the Web. After today, you'll know how to create images that look great but don't take a long time to download.

Lesson 5
Optimizing images for the Web is a major part of effective Web design. After all, a site that takes 15 minutes to load isn't going to be successful no matter how wonderful it looks! In this lesson, we'll continue talking about image formats and optimization for the Web as we explore the JPG format. As a bonus, you'll set up a Web gallery of images and see how easy it is to make a slide show for the Web.

Lesson 6
Web designers need to add text as well as images to Web pages. But how do you do that when you have no idea what fonts are on a user's system and you can't easily format type? Today, you'll learn some nifty ways to decorate a page with type. You'll create text both as graphics (learning how to wrap it around an image) and as live HTML.

Lesson 7
Properly designing navigation buttons is one of the most critical things you can do to make a Web site useable. You can also use buttons to make a site's appearance more fun and interesting. In this lesson, you'll try out both the serious and the lighter side of button-making as you create tabs for navigation and a wildly styled button that you'll learn to animate later.

Lesson 8
An attractive background can add a lot to a Web site's appearance. But you have to use a small file for your background to ensure your pages load quickly. With that in mind, we're going to create Web backgrounds with stripes, plaids, and bars, and you'll find out how to produce seamless patterns. Want a background fill of jellybeans that loads in a flash? You'll learn how to make it in this lesson.

Lesson 9
How can you get each part of a Web page into its own file so the page loads quickly? Slicing your page cuts a large image file into manageable pieces. It's the most complex task in the process of getting from prototype to actual Web page. Today we'll do the process slowly, step by step, building useful slices and optimizing them for the Web. Your reward will be to see an almost complete Web page appear in your browser.

Lesson 10
When you hover your mouse over something on a Web site and the button seems to move, or another graphic appears, that's called a rollover. Rollovers are the easiest way to add interactivity to a page. In this lesson, you'll create both self-rollovers and remote rollovers. You'll also learn to use Layer Comps so you can save many different combinations of active layers in a single image file. That's great for impressing a client with lots of choices!

Lesson 11
Animations, when done in moderation, add interest to a Web page. Done to excess, they're very annoying. Today, we'll keep you on the safe side as you learn to animate the button you created in Lesson 7. Animations can be a lot of fun, and this one will start up every time site visitors mouse over it.

Lesson 12
All things must come to an end, and the end point of this course is when you see your Web page animate with working rollovers in your browser. Photoshop doesn't create all the code you need to make this happen, but you'll learn how to easily add a JavaScript to Photoshop-generated HTML without writing a single line of it. The only additional software you'll need is something that every computer already has: a text editor such as TextEdit for the Mac or NotePad on Windows. You'll also get pointers about some other ways to use your Photoshop-generated code.