Join Jan Kabili for an in-depth discussion in this video Customizing panels, part of Photoshop CS4 for the Web.
- View Offline
Photoshop's panels contain lots of commands and features that you will use when you are designing for the web. It's rare that you will need access to all of the panels all of the time, so I suggest that you customize your panel arrangement, so that you have the controls you need most often at your finger tips without having extra panels taking up your valuable screen real estate. In this movie, I'll show you some ways that you can customize the arrangement of panels. Right now you are looking at the default panel arrangement. Panels are arranged in groups and if you click any one of the panel tabs in a group, like the Swatches panel tab here, it will bring the corresponding panel to the foreground of that group.
These panel groups are docked into a column on the right side of the screen by default. The dock helps to organize them and keep them in place. It also gives you the ability to collapse all of the panels at once, so that you have more room for your document window. So if you are working with a really wide document here and you need more space, you can come to the top-right of the column of panels and click this double pointed arrow, and the entire column of panels reduces itself to icons with labels. Then if you need to use any one of the panels, you can just click its icon and it pops out. When you are done using it, you can click the icon again and it pops down again. If you need even more space to work, move your mouse over the left hand border of the column of panels, until you see the cursor change to a double pointed arrow. Then drag to the right and you can reduce the column to just icons, which also pop out for your use and then pop back when you click the icon.
I am going to open this column again by clicking the double pointed arrow again. If you have a panel showing that you don't use, you can close it from this icon on the right side of the panel group. This is called the panel menu icon and it's an important icon to know about. If you click-and-hold on a panel menu icon, you will see lots of controls related to the selected panel. So in this case I have the Adjustments panel selected and down here I have all kinds of controls related to the Adjustments panel. I'm actually going to go to the bottom of this menu and choose Close in order to close the Adjustments panel. Now it's gone. If I want to open a panel, I can go up to the Window menu and choose the panel by name. So here I can reopen the Adjustments panel.
I can also close an entire panel group. That's a good way to save space. So I'm going to close this group of the Masks in Adjustments panel by going to the panel menu on that group and all the way down to the bottom and choosing Close Tab Group. You can collapse and expand panel groups by clicking in the blank area right here on the right side of the group. So right now this panel group is collapsed, I see nothing underneath it. If I want to expand it, I click in this area and it expands. Now I can see the layers in the Layers panel. I can do the opposite, collapse the panel group which I'll do up here by clicking in this blank area. That collapses the Color, Swatches and Styles panel group. I click again to reopen that panel group.
Another way to customize the column of panel groups is to reorder the groups in the column. So let's say I would like to have my Layers, Channels and Paths group at the top of the column. Again, I'll click in this blank area and I'll drag up to the top of the column, until I see this single light blue line. Then I release my mouse and now I have the Layers, Channels and Paths group above the Colors, Swatches and Styles group. You can move any panel out of the docked column by grabbing its tab, which I'll do here with the Layers panel, and dragging out of the column. Now you will have a free-floating panel. If you click on the title bar of the panel, you can move it wherever you want on your screen or even off to another monitor.
You can further customize by creating your own panel groups or your own columns of docked panels. For example, let's say that I want to add the History panel to the Layers panel here. I'm going to go up to the Window menu and go down to History. That opens the History panel, which happens to be a pop-out panel from an inner column, which has started to form here. I'm going to take the History panel by its tab, drag it over and drag it into the group with the Layers panel.
When I see this blue border around the Layers panel, I'll release my mouse. Now I have a group of these two panels, Layers and History. I'll go back to the Layers panel here and I'm going to bring out another new panel by going to the Window menu and going down to the Layer Comps panel. I have more to say about the Layer Comps panel in the chapter on rollover graphics. The Layer Comps panel is often used in conjunction with the Layers panel. So I'm going to take the Layer Comps panel by its tab, drag it over and rather than put it in a group with the Layers panel, I'm going to move it to the bottom of the Layers panel. When I see this light blue line, I'll release my mouse. Now the Layer Comps panel is docked to the Layers and History group.
So basically, I have created my own column, which I can move freely around the screen by clicking on this title bar and moving it. I can icon-ize this new column by clicking this double pointed arrow and I could then take that entire column. I could move it over and I could dock it here to the right of the existing column, so that now I have three columns here. Let me close this Notes panel, so you can see the three columns that I now have. I could also take that newly minted column that I made and drag it off to a second monitor.
If you have made a lot of changes to your panel arrangement and you want to get back to the way things were by default, you can always go to this menu at the top-right of the screen, click and choose Essentials. That reestablishes the default arrangement of panels. I don't think there is one single configuration that's always the best for web work because you find yourself doing so many different tasks as you prepare web graphics. One day you may be working on rollover graphics, another on type, another on slicing webpage layouts. The good news is that there is lots of flexibility to configure Photoshop's panels to suit whatever task you are doing at the moment using the flexible interface controls that I have shown you in this movie.
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