Start learning with our library of video tutorials taught by experts. Get started

Photoshop CS2 for the Web Essential Training
Illustration by Bruce Heavin

Photoshop CS2 for the Web Essential Training

with Tanya Staples

Video: Interface Overview

In this movie we're going to take a look at the main elements that make up the interface in Photoshop CS2 and ImageReady CS2. The first element is the Toolbox, which is, by default, docked in the top left hand corner of the screen. I can click and drag, and reposition it anywhere I like on screen. Now the Toolbox has a number of different options. At the top you can see there's the link "Go to www.adobe.com", and if I click that, that will take me to the Adobe Photoshop CS2 website on Adobe.com. Next, we have the tools, and we're going to talk about those in just a second.
Expand all | Collapse all
  1. 37m 59s
    1. Interface Overview
      8m 11s
    2. Customizing Palette Locations
      7m 1s
    3. Saving Custom Palette Locations
      5m 9s
    4. Customizing Keyboard Shortcuts
      7m 17s
    5. Customizing Menus
      6m 56s
    6. Saving Custom Workspaces
      3m 25s
  2. 35m 10s
    1. Using the Welcome Screen
      1m 44s
    2. Understanding the Bridge Interface
      9m 23s
    3. Organizing Assets
      9m 3s
    4. Rating and Labeling Images
      7m 21s
    5. Keywording and Searching Images
      7m 39s
  3. 30m 50s
    1. The Decline of Web Safe Color
      3m 5s
    2. Choosing Color
      8m 0s
    3. Using Swatches
      5m 4s
    4. Creating Custom Swatches
      6m 54s
    5. Recoloring Images
      5m 51s
    6. Copying Color as HTML
      1m 56s
  4. 1h 10m
    1. Understanding the Benefits of Layers
      3m 24s
    2. Creating and Renaming Layers
      6m 9s
    3. Reordering, Flipping, and Moving Layers
      6m 53s
    4. Adjusting Blending Mode, Fill, and Opacity
      5m 23s
    5. Moving and Aligning Layers
      7m 54s
    6. Linking Layers
      2m 18s
    7. Using Layer Groups
      7m 32s
    8. Using Layer Comps
      5m 5s
    9. Using Layer Comps for Web Pages
      5m 57s
    10. Using Adjustment Layers
      4m 26s
    11. Using Fill Layers
      2m 26s
    12. Using Layer Styles
      6m 47s
    13. Using Clipping Masks
      1m 33s
    14. Merging and Flattening Layers
      4m 35s
  5. 34m 49s
    1. Understanding Vector-Based Type
      4m 23s
    2. Creating Character Type
      8m 33s
    3. Creating Paragraph Type
      7m 52s
    4. Checking Spelling
      1m 47s
    5. Finding and Replacing
      1m 32s
    6. Warping Type
      3m 33s
    7. Creating Type on a Path
      5m 42s
    8. Rasterizing Type
      1m 27s
  6. 40m 46s
    1. Understanding Web File Formats
      2m 4s
    2. Optimizing JPEGs
      7m 11s
    3. Selective JPEG Optimization with Alpha Channels
      4m 24s
    4. Optimizing GIFs
      6m 56s
    5. Locking Colors with GIF Optimization
      2m 33s
    6. Selective GIF Optimization with Alpha Channels
      5m 19s
    7. Previewing Images in a Web Browser
      3m 5s
    8. Optimizing JPEGs in ImageReady CS2
      5m 2s
    9. Optimizing GIFs in ImageReady CS2
      4m 12s
  7. 24m 40s
    1. Understanding Web Backgrounds
      3m 30s
    2. Defining and Previewing Web Backgrounds
      1m 40s
    3. Optimizing and Saving Web Backgrounds
      2m 54s
    4. Creating Symmetrical Web Backgrounds
      4m 9s
    5. Creating Seamless Web Backgrounds from Photographs
      4m 12s
    6. Creating Full-Screen Backgrounds
      3m 58s
    7. Using Directional Tiles
      2m 1s
    8. Defining Web Backgrounds in Photoshop CS2
      2m 16s
  8. 59m 20s
    1. Creating a Horizontal Navigation Bar
      6m 32s
    2. Creating Elliptical Buttons
      4m 21s
    3. Editing Multiple Buttons with Smart Objects
      6m 47s
    4. Creating Pill-Shaped Buttons
      5m 5s
    5. Creating Rounded Rectangular Buttons
      6m 41s
    6. Creating 3-Dimensional Buttons
      5m 46s
    7. Creating a Tabbed Navigation Bar
      14m 29s
    8. Creating a Navigation Bar with Icons
      9m 39s
  9. 20m 6s
    1. Optimizing and Saving Transparent GIFs
      8m 31s
    2. Optimizing Transparent GIFs in Photoshop CS2
      3m 36s
    3. Creating Transparent GIFs from Non-Transparent Images
      4m 20s
    4. Simulating Transparency with JPEGs
      3m 39s
  10. 26m 58s
    1. Creating Animations from Layer Visibility
      4m 50s
    2. Tweening with Opacity
      4m 2s
    3. Tweening with Position and Layer Styles
      3m 20s
    4. Optimizing and Saving Animated GIFs
      5m 48s
    5. Optimizing Transparent Animated GIFs
      4m 28s
    6. Creating an Animated Slide Show
      4m 30s
  11. 20m 50s
    1. Creating SWF Files for the Web
      8m 1s
    2. Creating SWF Animations for the Web
      12m 49s
  12. 43m 11s
    1. Creating User Slices
      6m 36s
    2. Creating Layer-Based Slices
      5m 19s
    3. Renaming Slices
      5m 56s
    4. Optimizing and Saving Slices
      10m 1s
    5. Assigning Alt Text, Status Bar Messages, and URLs to Slices
      7m 17s
    6. Using Slice Sets
      8m 2s
  13. 56m 5s
    1. Using Preset Rollover Styles
      6m 4s
    2. Optimizing and Saving Rollovers
      5m 19s
    3. Creating and Saving Rollover Styles
      5m 18s
    4. Creating Rollovers from Layer Visibility
      5m 0s
    5. Creating Rollovers with Type
      8m 37s
    6. Creating Remote Rollovers
      6m 51s
    7. Creating Remote Selected States
      8m 26s
    8. Creating Animated Rollovers
      10m 30s
  14. 23m 52s
    1. Using the Image Map Tools
      5m 49s
    2. Creating Layer-Based Image Maps
      5m 16s
    3. Renaming, Optimizing, and Saving Image Maps
      5m 47s
    4. Assigning URLs
      2m 32s
    5. Creating Image Map-Based Rollovers
      4m 28s
  15. 19m 2s
    1. Creating Web Photo Galleries
      4m 14s
    2. Customizing Web Photo Galleries
      10m 17s
    3. Creating Collaborative Web Photo Galleries
      4m 31s
  16. 13m 15s
    1. Automating Tasks
      8m 38s
    2. Using Conditional Actions
      4m 37s
  17. 31m 31s
    1. Understanding Data-Driven Graphics
      4m 44s
    2. Creating Visibility Variables
      4m 27s
    3. Creating Text Replacement Variables
      2m 49s
    4. Creating Pixel Replacement Variables
      5m 4s
    5. Exporting Data Sets
      7m 9s
    6. Importing Data Sets from Spreadsheets
      7m 18s
  18. 31m 49s
    1. Exporting Illustrator Files as Photoshop Files
      3m 10s
    2. Embedding Illustrator Content as Smart Objects
      6m 3s
    3. Creating PDFs
      7m 12s
    4. Creating PDFs with Password Protection
      6m 5s
    5. Creating Multipage PDFs
      3m 43s
    6. Creating PDF Presentations
      5m 36s
  19. 27m 26s
    1. Exporting Photoshop Files to Flash
      2m 28s
    2. Exporting Files with Pixel-Based Layers
      5m 56s
    3. Exporting Files with Vector-Based Layers
      7m 19s
    4. Exporting Files with Layer Styles
      9m 14s
    5. Using the PSD2FLA Plug-in by Media Lab
      2m 29s
  20. 20m 24s
    1. Using GoLive Smart Objects
      7m 44s
    2. Variables
      7m 41s
    3. Dreamweaver
      4m 59s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Photoshop CS2 for the Web Essential Training
11h 8m Beginner May 27, 2005

Viewers: in countries Watching now:

Adobe Photoshop CS2 for the web Essential Training with Tanya Staples teaches beginning to intermediate-level users how to design Web graphics in Adobe Photoshop CS2. The training covers designing effective navigation, optimizing images for the Web, creating background images, working with transparent images, slicing images, creating rollovers, creating image maps, designing animations, exporting images to Macromedia Flash, and much more. Integration with other applications, such as Adobe GoLive, Macromedia Dreamweaver, and Macromedia Flash, is also covered. Sample files are included so you can work along with Tanya as she instructs.

Topics include:
  • Optimization
  • Color
  • Navigation
  • Animated GIFs
  • Exporting to the Macromedia Flash Format
  • Rollovers
  • Slicing
  • Background Images
  • Image Maps
  • Integration with GoLive
  • Integration with Dreamweaver
  • Automation
  • Data Sets
Subjects:
Web Web Graphics Prototyping Web Design
Software:
Photoshop
Author:
Tanya Staples

Interface Overview

In this movie we're going to take a look at the main elements that make up the interface in Photoshop CS2 and ImageReady CS2. The first element is the Toolbox, which is, by default, docked in the top left hand corner of the screen. I can click and drag, and reposition it anywhere I like on screen. Now the Toolbox has a number of different options. At the top you can see there's the link "Go to www.adobe.com", and if I click that, that will take me to the Adobe Photoshop CS2 website on Adobe.com. Next, we have the tools, and we're going to talk about those in just a second.

You can see they basically take up about three quarters of the Toolbox. Then we have our foreground and background color swatches, we're going to talk about those in detail in the Color chapter. We have our Edit in Screen Mode and Edit in Quick Mask Mode, so if you have a channel or a mask in your file you'll be able to see that really quickly by using the Quick Mask Mode. And we have the Standard Screen Mode, Full Screen Mode, and Full Screen Mode without the menu bar options. These are different ways, as you can see, to view your document inside the document window.

I'm going to return that to Standard Screen Mode. And last we have this really handy option called Edit in ImageReady, and you're going to find yourself using this a lot when you're designing web graphics, because you'll often design something in Photoshop CS2 and then want to go to ImageReady CS2 to use some of the features that are there, such as creating a rollover or creating an image map, exporting to Flash. Whatever the case may be, it's very tedious to have to save your changes, exit Photoshop, open ImageReady, open the file.

All you have to do is click this Edit in Image Ready button. You can see I have this Java Co. Tea file open. Click it... There it is. It's already open in ImageReady CS2. If I want to go back to Photoshop CS2, you can see that at the bottom of the ImageReady Toolbox I have the Edit in Photoshop option. I can click that, and voila, I'm back in Photoshop CS2. So, as I said, you're going to use that a lot when you're designing web graphics because you'll often want to go back and forth between the two programs. Now let's talk a little bit about the tools and the Toolbox.

They are organized into different sections, and the first section is basically the Selection Tool, the Move Tool, the Crop Tool and the Slice Tool. The second section are the photo retouching tools, so things like the Spot Healing Brush, the Clone Tool, the Eraser Tool, and that kind of thing. We're not going to spend a lot of time in this movie focusing on the photo retouching tools because this is strictly about designing web graphics, but if you are interested in learning more about photo retouching there are a number of titles in the Online Training Library that you can refer to on those topics.

Next we have the vector-based tools: the Type Tool, the Shape Tool, the Path Tools, and the Past Selection Tools. Last we have what I refer to as the navigation tools -- things like the Zoom Tool, the Hand Tool, the Eyedropper Tool, the Notes Tool -- and those are basically there to help you navigate inside the document. So zooming in and out, panning around your file with the Hand Tool. Now you've probably noticed that some of these tools have this little black arrows or triangles in the bottom right hand corner, and what those indicate is that there are tools underneath in a flyout.

So to access those tools I'm just going to click and hold, and without releasing my mouse, I'm going to position my cursor over the tool I want to select and when I release my mouse, you can see it automatically chooses the appropriate tool. Take a look at that again. We'll go down to the Shape Tools flyout... I'm going to choose the Rounded Rectangle. When I release my mouse you can see it automatically changes. Now, as I've been working with the tools in the toolbox you may have noticed that at the top the options bar has been changing, and that's the next element of the interface we're going to talk about.

Just like the Toolbox, I can click and drag and reposition the Options Bar anywhere I like onscreen. I prefer to leave it at the top, docked right below the menu bar. The purpose of the Options Bar is to give you access to controls depending on which tool you have selected. As I said, it's contact sensitive. So, if I have the Type Tool selected, you can see I have a number of options on how to format my type. If I have the Slice Tool selected, you can see it gives me options on how to slice my image. Likewise, the Crop Tool, and the Selection Tools, and the Move Tool.

I have a number of different controls. And the Options Bar is great because it saves you from having to dig around in palettes and dialog boxes to have access to the controls that you need when you're working with specific tools. Now, the Options Bar also contains this button called Go To Bridge, and if I click that button, that's going to launch a new program in Adobe Photoshop CS2 called Adobe Bridge. And, if you've used past versions of Photoshop before, you'll remember the File Browser.

Well, Adobe Bridge is basically the File Browser on steroids. Adobe has made it into its own application and added a significant amount of new functionality to it. We're not going to talk in detail about Adobe Bridge in this particular movie, but if you'd like to learn more about Adobe Bridge there is an entire chapter dedicated to it later on in this training. So I'm just going to go to the Bridge menu and choose Quit Bridge. If you're on a PC, you're going to want to choose File + Quit Bridge. And, the last thing on the Options Bar, you can see I have these three tabs, and if I click them, I see palettes.

This little area up here is called the Palette Well, and basically it's a container where you can put some of your palettes, and we're going to talk about that a little bit more in the next movie when we talk about how to customize our interface. But for right now, just remember that this is the Palette Well, and it's a location where you can actually store your palettes. So that leads us into the last element of the interface, which is the palettes themselves. And you can see that in addition to the palettes in the Palette Well, we also have a number of palettes that are open on screen. And, they're all defined by tabs, and they are grouped together in different configurations.

You can see at the top we have the Navigator, the Info, and the Histogram palette all grouped together. We also have the Color Swatches and Styles palette grouped together, the History and the Actions palettes, and the Layers, Channels and Paths palettes. And you can see that what I've been doing is just simply clicking the tab, and that brings that particular palette forward so that you can see the controls. You can see if I click the Channels palette, I see all of the options for the Channels palette. I click the Layers tab, you can see I see the options for the Layers palette. Now there are some ways that you can customize your palette configuration, and we're going to talk about that in the next movie.

But for now, it's just important to remember the main elements of the interface that we talked about: the Toolbox, the Options Bar, the palettes, and the Palette Well. So now that we've taken a look at the interface elements in Photoshop CS2, let's take a look at the elements in ImageReady CS2. I'm going to click the Edit in Image Ready button, and here we are in ImageReady CS2. You can see that the basic configuration of the interface is the same. Just like Photoshop, we have a Toolbox, an Options Bar, and a series of palettes.

There's a couple things that I want to point out about the difference. First, you'll see that the Toolbox has less tools in it, and you can see that it's also organized a little bit differently, so that's something to keep in mind. The next thing is that the palettes look a little bit different in some cases. I'm going to take a look at this Slice palette for example. You can see that there's these little arrows, and, basically, if I click the arrow I can expand the contents of the palettes. That's something that Photoshop CS2 doesn't have.

Just as in Photoshop, I can click the tabs and access the palettes, but you can see that some of them have these little arrows that allows you to expand them. So that's one important difference in the interfaces that you're going to want to remember as you're working between the two applications. You also might just noticed that I clicked and dragged to reposition this palette on screen, and that's one of the ways that you can customize the interface in both Photoshop CS2 and ImageReady CS2, and that's exactly what we're going to talk about in the next movie: customizing the interface.

There are currently no FAQs about Photoshop CS2 for the Web Essential Training.

Share a link to this course
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.
Upgrade now


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.

Upgrade now

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

Congratulations

You have completed Photoshop CS2 for the Web Essential Training.

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


OK

Course retiring soon

Photoshop CS2 for the Web Essential Training will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


Become a member to add this course to a playlist

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

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

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:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com 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 lynda.com.

Sign up and receive emails about lynda.com 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.