Learn how to use your Photoshop skills to create and save graphics for the Web. You'll create these graphics for a Web site of your choice as you develop a Web page lesson-by-lesson, from idea to Internet. Master the creation of animated GIF files, buttons, rollovers, and remote rollovers--elements that make your Web pages come to life.

You'll follow the development of one Web site throughout the course as you learn about the GIF and JPG formats, discover the inner details of color for the Web, learn how to make compact Web backgrounds, and slice graphics for faster screen display.

You'll pick up tips to help you get the most quality from your Web pages while using the least amount of download speed. You'll also learn how working with vector paths and shapes can speed the creation process. If you've already mastered the basic features of Photoshop and understand layer and layer masks, then working through this course will give you the confidence you need to tackle any graphic challenge for the Web.

Recommended Courses:

Students who enrolled in Creating Web Graphics with Photoshop CS3 were also interested in the following courses:

Syllabus:

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 the lesson is released, but you must complete each lesson within two weeks of its release.

A new section of each course starts on the second or third Wednesday of each month. 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.

Week One

Wednesday - Lesson 01

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.

Friday - Lesson 02

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.

Week Two

Wednesday - Lesson 03

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.

Friday - Lesson 04

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.

Week Three

Wednesday - Lesson 05

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.

Friday - Lesson 06

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.

Week Four

Wednesday - Lesson 07

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.

Friday - Lesson 08

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.

Week Five

Wednesday - Lesson 09

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.

Friday - 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!

Week Six

Wednesday - 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.

Friday - 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.

This course includes a knowledgeable and caring instructor who will guide you through your lessons, facilitate discussions, and answer your questions. The instructor for this course will be Sherry London.

Sherry London is a noted Photoshop and Illustrator expert, fiber artist, writer, and teacher. Her art has been featured in magazines and exhibitions. Her published works include Photoshop CS2 Gone Wild, Photoshop Magic, Photoshop Effects Magic, Photoshop In Depth, Photoshop Textures Magic, and Illustrator f/x and Design. She writes the Tips and Tricks column for Photoshop User magazine and is a two-time nominee to the Photoshop Hall of Fame. She has taught for the prestigious Thunder Lizard Photoshop Conference and the Professional Photographers of America seminars, as well as for Drexel University, Moore College of Art, and Gloucester County College. Sherry holds a Master's Degree in Information Systems and has taken doctoral level courses in curriculum design.

Requirements:

This course uses screen shots from Adobe Photoshop CS3. You need one of the following versions of Photoshop:

Adobe Photoshop CS3 for Mac or Windows
Adobe Photoshop CS2 for Mac or Windows
Adobe Photoshop CS for Mac or Windows (though some steps will need modification)

The Windows versions of Photoshop require Windows XP or 2000; Vista users need Photoshop CS3. The Mac versions of Photoshop require Mac OS/X and either a G4 or G5. If you have an Intel Mac, you need Photoshop CS3.

Note: software must be installed and fully operational before the course begins. You also need Internet access, e-mail, the Microsoft Internet Explorer or Mozilla Firefox Web browser, and the Adobe Flash and PDF plug-ins (two free and simple downloads you obtain at http://www.adobe.com/downloads by clicking Get Adobe Flash Player and Get Adobe Reader).

You need to have taken Sherry London's Intermediate Photoshop CS2 course or have equivalent experience. You should have a good working knowledge of the basic tools in Photoshop and be able to make selections and use layers and layer masks.

Student Reviews: