Join Jan Kabili for an in-depth discussion in this video Working with tabbed documents, part of Photoshop CS4 for the Web.
- View Offline
There are times when you want to have more than one document open in Photoshop. For example, let's say that you want to add different images to a webpage design like this one or let's say that you want to compare a couple of photographs to find the best one to use in the design. Multiple documents behave a little bit differently in Photoshop CS4 than they did in previous versions of the program, as I'm going to show you in this movie. When you open multiple documents in Photoshop CS4, they open into docked tabs. So for example, I have a tab here for home2.PSD and then I have another document open here in the wetsuit_ graphic1 tab and another document open in the navbar1 tab and so on.
Sometimes if so many documents opened at once that they won't all fit in this area. In that case you will see a double pointed arrow here and you can click that arrow and you can select from the menu of all the open documents the one that you want to see. Another way to move through open documents is to cycle through them using a keyboard shortcut. On either Mac or Windows, you can hold down the Ctrl key and then click on the Tab key to cycle through open documents in the order in which they were opened and if you hold down the Shift key as well, so that's Ctrl+Shift and then press the Tab key, you will cycle back the other way.
And on the Mac there is yet another shortcut which is Command+~ or Shift+Command+~ to cycle in the other direction. You can change the order of the tabs up here. So if you want one particular image to be somewhere else in the order of open tabs, you can just click and drag that tab and when you are ready to close any of the documents, you click the X on its tab. Let's say that you want to see more than one image at a time. There is a new menu in Photoshop CS4 that will help you with that. It's called the Arrange Documents menu and its icon is located here in the application bar on a Mac and up in the menu bar on a PC. I'm going to click the Arrange Documents icon to open this menu of multiple document layouts. I could choose any one of these. For example, a 2-Up layout, a 3- Up layout. I'm going to go down to the 5-Up layout here and click on it and now I can see each one of my documents in a separate document window.
Let's say my goal here is to compare these two surfer photos, the orange one and the blue one. Right now, the photos aren't showing me the surfer and they are too big to fit in their document windows. So I'm going to make the surfer_photo1 the active document by clicking on its tab and you can see that tab is now lighter than the other opened Document Window tabs. Then I'm going to select the Zoom tool in the Applications bar or from the toolbox. I'll come into the image and I'll hold down the Alt key on the PC, the Option key on the Mac to change the Zoom to a Zoom Out mode and I'll click in the image. In the tab for this image, I can now see that I have zoomed out to 66.7% and you will notice in the tab for the blue surfer_photo that image is zoomed to 100%. I would like to see these photos at the same zoom level and I also want to see the surfer in both of the photos.
So I'm going to get the Hand tool and I'm going to come in and drag in surfer_photo1, so that I can see the actual surfer on the wave. And then to bring surfer_photo2 to the same zoom level and the same location, I'm going to go back to the Arrange Documents menu, click on it and there at the bottom of this menu you see that I can choose to Match Zoom Levels, Location or both. I'm going to choose Match Zoom and Location. Now I can see the same part of both photos and in fact, all of the opened documents have been zoomed to the same zoom level 66.7%, and if they are too big to fit in the document window, they are moved to the same location.
I am going to close both of these surfer photos now by clicking the X on each of these two surfer_photo tabs. And now I have just three opened documents. I want to be able to see all three of these opened documents, so I'm going to go back to the Arrange Documents menu, click there and I'm going to choose a different layout. This 3-Up vertical layout. These layouts are all customizable. I can adjust the layout by moving my mouse over the border between these open Document Windows and when it changes to a double pointed arrow, I can click and drag and change the arrangement. The reason that I want to see all three of these documents at once is so that I can drag this navigation bar up into this webpage design that I'm building and I also be able to drag this logo into the webpage design.
To move an image from one open document to another, I have to get the Move tool. So I'll click on it here in the toolbox or I can just press the keyboard shortcut V to access the Move tool. And then I'll come into the navbar1.PSD document window, click on it to make that the active document and all I have to do is click and drag with the Move tool up into the homepage2.PSD document and release my mouse and the navigation bar is copied from one document to the other.
Then with the Move tool I can drag to get the navigation bar just where I want it and I can also use the arrow keys on my keyboard to just nudge it into place. I'm going to close navigationbar1 .PSD and then I'm going to consolidate both of these opened documents into one window, because I want to show you another way that you can move documents from one window to another in Photoshop CS4. To consolidate the two document windows that are still open, I'm going to go back to the Arrange Documents menu, click on it and I'm going to choose the first icon here Consolidate All. So that's how you put multiple document windows back together once you have separated them out. I also want to go back to 100% here, so with home2.PSD as the active window, I'm going to click on the Zoom tool and I'll choose Actual Pixels to go back to 100%.
And now I'm going to click on logo1.PSD, so that I can access this logo. I want to move this into the home2.PSD document. So again, I'll need the Move tool and this time rather than open two separate document windows, I'm just going to click on the logo and drag up and hover over the tab for home2.PSD and that switches me back to the home2.PSD document window, and with my mouse still hold down, I haven't let up on the mouse yet, I'm going to come down and just drop that logo into place on the navigation bar and then I can drag it down where I want it.
The new tab documents in Photoshop CS4 make it easier than ever to keep track of all of your open images, rather than allowing them to float free in separate windows where one document window can get hidden behind another. If you do what to have your document windows floating free, you can always pull one of these tabs away from the others and it will float free like this. The danger though is that if you click back on another document, for example, if I click on this logo I can lose the free floating document and to get it back, I'll have to go up to the Window menu and choose from the bottom of Window menu the home2 document and that will come back to the foreground. I could also set all of the open document windows to float free by going to the Arrange Documents window and choosing Float All in Windows. And now they are arranged in this cascading pattern on my screen.
So as you can see, using tab documents gives you more control of where your documents are on the screen. It's just one more interface improvement that will make your life easier when you are designing for the web in Photoshop CS4.
Download the free Layer Comps to Slices script from the Exercise Files tab.
- 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
- Making graphics for rollovers
- Creating a web gallery
- Displaying high-resolution graphics with Zoomify
- Making graphic variations with variables
- Integrating with Dreamweaver, Fireworks, Flash, and Illustrator