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

Start Your Free Trial Now

Photoshop CS5 for the Web

with Jan Kabili

Video: Welcome

Shows how to use Photoshop CS5 for optimal web graphics workflow.
Expand all | Collapse all
  1. 2m 16s
    1. Welcome
      1m 23s
    2. Using the exercise files
  2. 23m 59s
    1. Customizing a web workspace
      5m 52s
    2. Creating web shortcuts
      5m 41s
    3. Setting preferences for the web
      4m 24s
    4. Color managing web images
      8m 2s
  3. 27m 39s
    1. The decline of web-safe color
      1m 43s
    2. Selecting color in the Color Picker
      4m 54s
    3. Other color selection methods
      5m 19s
    4. Working with custom swatches
      6m 49s
    5. Choosing color themes with Kuler
      1m 51s
    6. Recoloring a web graphic
      4m 51s
    7. Copying color as hex value and HTML
      2m 12s
  4. 50m 28s
    1. Touring the Save for Web window
      6m 46s
    2. Understanding file types
      6m 14s
    3. Optimizing photos as JPEGs
      10m 37s
    4. Optimizing graphics as GIFs
      9m 11s
    5. Locking GIF colors
      4m 52s
    6. Optimizing graphics as PNGs
      6m 53s
    7. Adding copyright information
      5m 55s
  5. 26m 42s
    1. Design considerations for web backgrounds
      3m 53s
    2. Optimizing a background graphic
      6m 27s
    3. Making a vertical/horizontal background graphic
      6m 49s
    4. Building a seamless background graphic
      4m 33s
    5. Creating a full-screen background image
      5m 0s
  6. 27m 57s
    1. Understanding web graphic transparency
      4m 13s
    2. Working with transparent graphics on a solid background
      5m 5s
    3. Working with transparent graphics on a patterned background
      4m 44s
    4. Working with transparent graphics with shadows
      4m 18s
    5. Starting with a non-transparent graphic
      3m 3s
    6. Simulating transparency in a JPEG
      6m 34s
  7. 21m 50s
    1. Building a navigation bar
      7m 45s
    2. Creating web buttons with layer styles
      4m 21s
    3. Creating web buttons as Smart Objects
      4m 34s
    4. Creating web icons from custom shapes
      5m 10s
  8. 22m 32s
    1. Understanding the web photo workflow
      7m 52s
    2. Resizing a copy for the web
      6m 56s
    3. Sharpening output for the web
      7m 44s
  9. 12m 35s
    1. Determining page size
      2m 46s
    2. Creating a new file from scratch
      4m 43s
    3. Laying out a page structure
      5m 6s
  10. 24m 27s
    1. Understanding slicing
      3m 8s
    2. Making user slices
      5m 40s
    3. Making layer-based slices
      6m 2s
    4. Optimizing and saving slices
      9m 37s
  11. 30m 2s
    1. Understanding rollovers
      2m 11s
    2. Creating rollover graphics from styles and layer comps
      7m 8s
    3. Optimizing rollover graphics
      6m 44s
    4. Installing the rollover script
      2m 46s
    5. Using the rollover script
      4m 44s
    6. Creating rollover graphics from layers and layer comps
      6m 29s
  12. 20m 33s
    1. Creating frame-by-frame animation from layers
      7m 20s
    2. Tweening layer opacity
      4m 55s
    3. Tweening layer position and styles
      3m 48s
    4. Building simple animated GIF slideshows
      4m 30s
  13. 35m 13s
    1. Speeding image prep with the Image Processor
      8m 58s
    2. Making a gallery of online images
      6m 37s
    3. Using Zoomify to put high-res images online
      4m 23s
    4. Using datasets and variables with web graphics
      10m 21s
    5. Importing dataset values from a spreadsheet
      4m 54s
  14. 32m 47s
    1. Integrating with Dreamweaver: Smart Objects
      9m 40s
    2. Integrating with Dreamweaver: Copy/Paste
      3m 48s
    3. Integrating with Fireworks
      5m 44s
    4. Integrating with Illustrator
      6m 9s
    5. Integrating with Flash
      7m 26s
  15. 29s
    1. Goodbye

please wait ...
Photoshop CS5 for the Web
Video Duration: 0s 5h 59m Intermediate


View Course Description

In Photoshop CS5 for the Web, author Jan Kabili shows a wide range of optimal uses for Photoshop in the web graphics workflow. This course shows the most efficient ways to optimize images so that they maintain quality and download quickly in a browser, the why and the how of image slicing, and practical techniques for designing web page layouts, page backgrounds, navigation bars, and buttons in Photoshop. Exercise files are included with the course.

Topics include:
  • Customizing a web workspace
  • Coloring web graphics
  • Optimizing images as JPEG, GIF, or PNG files
  • Creating background graphics for sites
  • Working with transparency
  • Building navigation bars, buttons, and rollover graphics
  • Designing web page mock-ups
  • Adding animation
  • Automating web-related tasks in Photoshop
  • Integrating with the rest of the Adobe Creative Suite


Hi! I'm Jan Kabili, and I'd like to welcome you to Photoshop CS5 for the Web. There is no doubt that the web is now the place for displaying creative work, whether you're a web designer, a blogger, or one of the millions who share images online. This course will teach you how to create exciting visual assets that will make your web sites, your photo posts, your ads, and other online projects really stand out. In this course, I'll show you how to optimize images for the web as JPEGs, GIFs, and PNGs. I'll walk you through a workflow for preparing photographs for the web, and another for designing a web page mock-up.

I'll explain why and how to slice a web page mock-up. I'll cover how to make graphics for rollovers in Photoshop. And I'll teach you how to install and use a special script for exporting multiple rollover buttons at once. I'll cover some time saving automatic features, like web galleries and Photoshop's image processor. And I'll give you a taste of how to integrate the creative assets you make in Photoshop with other CS5 applications: Dreamweaver, Fireworks, Illustrator, and Flash. This course assumes that you already have basic Photoshop skills.

It's designed to take you to the next level, when you're designing visual assets for the web. So I invite you to jump right in and get started learning Photoshop CS5 for the web.

There are currently no FAQs about Photoshop CS5 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 CS5 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.