Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Photoshop CS4 for the Web

with Jan Kabili

Video: Welcome

How to optimize graphics and photographs so they download quickly in a web browser.
Expand all | Collapse all
  1. 5m 5s
    1. Welcome
      1m 18s
    2. What you'll learn in this course
      2m 58s
    3. Using the exercise files
  2. 34m 58s
    1. Looking over the interface
      7m 31s
    2. Working with tabbed documents
      7m 50s
    3. Customizing panels
      6m 29s
    4. Customizing web shortcuts
      7m 0s
    5. Saving a custom web workspace
      6m 8s
  3. 13m 9s
    1. Setting preferences for the web
      3m 38s
    2. Choosing color settings for the web
      9m 31s
  4. 30m 20s
    1. The decline of web-safe color
      1m 48s
    2. Choosing color with the Color Picker
      4m 44s
    3. Sampling color with the Eyedropper tool
      5m 24s
    4. Choosing color with the Swatches panel
      6m 49s
    5. Making a custom color swatch
      5m 51s
    6. Recoloring web graphics
      4m 8s
    7. Copying color as HTML
      1m 36s
  5. 35m 11s
    1. Touring the Save for Web interface
      6m 45s
    2. Optimizing photos as JPEGs
      9m 22s
    3. Adding metadata
      4m 46s
    4. Optimizing graphics as GIFs
      6m 8s
    5. Locking GIF colors
      4m 15s
    6. Optimizing graphics as PNGs
      3m 55s
  6. 27m 51s
    1. Designing web backgrounds
      2m 37s
    2. Optimizing a tiling background
      5m 21s
    3. Building symmetrical background
      7m 57s
    4. Building a striped background
      5m 8s
    5. Using a full-screen background
      6m 48s
  7. 29m 1s
    1. Understanding transparency
      5m 1s
    2. Optimizing transparent graphics for solid backgrounds
      5m 46s
    3. Optimizing transparent graphics for patterned backgrounds
      4m 41s
    4. Optimizing transparent graphics with shadows and glows
      5m 11s
    5. Starting with a non-transparent graphic
      3m 4s
    6. Simulating transparency for JPEGs
      5m 18s
  8. 36m 41s
    1. Building a simple navigation bar
      8m 31s
    2. Building a simple button with layer styles
      4m 40s
    3. Creating a navigation bar with Smart Object buttons
      6m 54s
    4. Creating a navigation bar with custom shape icons
      9m 29s
    5. Building a gel button
      7m 7s
  9. 18m 33s
    1. Following a web photo workflow
      6m 32s
    2. Resizing a copy for the web
      5m 35s
    3. Sharpening for the web
      6m 26s
  10. 17m 53s
    1. Starting a new file from scratch
      6m 1s
    2. Storyboarding
      4m 52s
    3. Adding images
      7m 0s
  11. 28m 27s
    1. Why slice?
      3m 12s
    2. Creating user slices
      5m 53s
    3. Creating layer-based slices
      6m 12s
    4. Adding slice options
      4m 21s
    5. Optimizing and saving slices
      8m 49s
  12. 28m 55s
    1. Understanding Photoshop and rollovers
      1m 55s
    2. Creating rollover graphics with layer comps
      5m 53s
    3. Optimizing rollover graphics
      7m 13s
    4. Installing the rollover script
      2m 43s
    5. Exporting rollover graphics
      4m 29s
    6. Making rollover graphics from layer visibility
      6m 42s
  13. 35m 18s
    1. Creating animations from layer visibility
      11m 27s
    2. Tweening with opacity
      5m 35s
    3. Tweening with position and layer effects
      4m 54s
    4. Optimizing transparent animated GIFs
      5m 31s
    5. Creating simple animated slideshows
      7m 51s
  14. 36m 21s
    1. Using the Image Processor
      7m 12s
    2. Creating a web gallery in Bridge
      9m 0s
    3. Displaying high-resolution web images with Zoomify
      4m 59s
    4. Creating graphic variations with variables
      10m 22s
    5. Importing values for graphic variations
      4m 48s
  15. 34m 40s
    1. Dreamweaver Smart Object integration
      9m 53s
    2. Dreamweaver Copy/Paste integration
      5m 3s
    3. Fireworks integration
      7m 5s
    4. Exporting from Illustrator to Photoshop
      2m 50s
    5. Illustrator vector Smart Object integration
      4m 37s
    6. Flash integration
      5m 12s
  16. 20s
    1. Goodbye

please wait ...
Photoshop CS4 for the Web
Video duration: 0s 6h 52m Intermediate


Photoshop CS4 offers designers a rich assortment of editing tools with which to create compelling imagery for the web. Photoshop CS4 for the Web covers a wide range of uses for Photoshop in the web graphics workflow. Instructor Jan Kabili explains how to optimize graphics and photographs so they download quickly in a web browser. She covers the why and how of image slicing, and demonstrates practical techniques for designing layouts, backgrounds, navigation bars, and buttons in Photoshop.

Download the free Layer Comps to Slices script from the Exercise Files tab.

Topics include:
  • Working with color for the web
  • Optimizing images in Photoshop’s Save for Web & Devices window
  • Making web page backgrounds
  • Creating transparent graphics for the web
  • Making navigation graphics
  • Preparing photographs for the web
  • Laying out a web page comp
  • Slicing
  • Making graphics for rollovers
  • Animating
  • Creating a web gallery
  • Displaying high-resolution graphics with Zoomify
  • Making graphic variations with variables
  • Integrating with Dreamweaver, Fireworks, Flash, and Illustrator


If you are a web designer, a blogger, an illustrator, a photographer, or anyone who wants to share images online, you will find Photoshop to be a flexible and creative resource for preparing your images for the web. (Music playing) I am Jan Kabili, Senior Trainer at and this is Photoshop CS4 for the Web. For you Photoshop users out there, I have designed this course so that you can take the next step in putting your content on the web or designing effective web interfaces.

We will cover the principles of optimizing your images for the web with the Save for Web and Devices feature. We will also look at how to create animations. I'll show you how to design a comp for your web pages, including how to design graphics for rollovers and navigation. I'll spend some time going over how and why to slice images, plus I'll show you a great feature that can automatically make a website from your images. Photoshop integrates with Dreamweaver, Fireworks, Flash and Illustrator. I'll show you how so you can use Photoshop in combination with other programs in the Adobe CS4 Suite to get the results you have envisioned onto the screen.

If you are ready, I'm ready. Let's get started with Photoshop CS4 for the Web.

There are currently no FAQs about Photoshop CS4 for the Web.






Don't show this message again
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Photoshop CS4 for the Web.

Return to your organization's learning portal to continue training, or close this page.


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a Member and Create Custom Playlists

Join today and get unlimited access to the entire library of online learning video courses—and create as many playlists as you like.

Get started

Already a member?

Log in

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

You started this assessment previously and didn’t complete it.

You can pick up where you left off, or start over.

Resume Start over

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.