Start learning with our library of video tutorials taught by experts. Get started
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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.