Join Jan Kabili for an in-depth discussion in this video Looking over the interface, part of Photoshop CS4 for the Web.
Understanding the Photoshop CS4 interface is important for web designers and developers who want to work faster and smarter in Photoshop. If you are new to Photoshop, learning the interface is essential. If you're a more seasoned Photoshop user, you will need to know about some changes to the interface in this version of the program. So in this chapter, I'll review interface fundamentals and new features that I've covered in more depth in another course in the lynda.com library that's called Photoshop CS4 Essential Training which is also a good place to go for background on other Photoshop fundamentals like layers and selections.
I am going to start by taking you on an overview of the Photoshop CS4 interface. On the right side of the screen are panels that contain controls and information that you will use as you work on your web images. Here, you will find panels for working with color, with photo adjustments, with layers and lots more, and I'll be returning to the panels to look at them in more detail in another movie. Over on the left side of the screen is the toolbox that you will use to create and edit your web images in Photoshop. To select a tool, you just click on it like the Move tool here, the very first tool. And when you do, the options for that tool change up here in the Tool Options bar.
You will notice that some of the tools have a black triangle in the bottom-right corner like this tool, the Crop tool. That means that there are other tools hidden behind. In this case, if I click and hold on the Crop tool, I see that there is a Slice tool, and a Slice Select tool behind the Crop tool. These are important tools for web work, and they have actually moved in this version of Photoshop CS4 behind the Crop tool. To select one of them, you just release your mouse on top of the tool in the fly-out menu and that tool is now the active one and its options are displayed in the Tool Options bar.
Photoshop CS4 offers something new in tools and that is the ability to temporarily move between tools. This is called the spring-loaded tools feature, and it works like this. Each tool has a shortcut. The shortcut for the Move tool for example is V. If I hold down the V key on my keyboard and keep it pressed down, I'll be temporarily switched to the Move tool with which I could click and drag to move the content of a selected layer in a document. Then when I release my finger from the V key, I automatically go back to whatever tool was selected before that. In this case, the Slice Select tool.
At the top of the screen is the menu bar where there are drop-down menus. You may see some items up here that you don't see in your copy of Photoshop. That's because I happen to have Photoshop CS4 Extended installed on this machine, which contains some additional scientific analysis, 3D, and video features that are outside the scope of this course. You can feel comfortable using either Photoshop CS4 or Photoshop CS4 Extended for this course. If you are on a Mac, you will see a new bar right here that's called the application bar. If you are on a PC, all the icons that you see here on this application bar will be up in the menu bar on your screen.
The application bar offers quick access to some features that you will use all the time. So for example, over here is a menu that contains quick access to Guides, Grids, and Rulers, features that help you to position and align items in your web layouts. Then there are some navigation features, a menu of commonly used zoom percentages, a Hand tool, and a Zoom tool. You can access the Hand tool or Zoom tool either from here in the application bar or from the toolbox. If I click on the Zoom tool, I can come down into my image and click to magnify my view of the image.
If you have a powerful enough graphics card in your computer to support OpenGL technology, in Photoshop CS4 you can click and hold with the Zoom tool and you get continuous zoom like this. When you zoom in far enough, you will see this grid around individual pixels. To zoom out, I can go to the Tool Options bar, which now shows options for the Zoom tool, and select this minus symbol. Then I can come into the image and click, or click and hold for a continuous zoom out.
When I'm zoomed-in so far that I can't see the entire image like this, I can access the Hand tool from the application bar or from the toolbox and then, I can come in and click and drag in the image to see another part of it. With OpenGL technology, I can click and flick, and the image moves itself across the document window. The Hand tool and the Zoom tool offer a couple of buttons in the Tool Options bar that I think are really useful. One is Fit Screen. If I click that, then the image is automatically taken back to whatever percentage will automatically fill the screen, and if I click Actual Pixels, I'm taken back to 100% view.
The next icon in the application bar is a new tool called the Rotate View tool, which is accessible either from here or from the toolbox. With this tool selected, I can come into the image, click and drag, and I'll be changing the orientation of the image temporarily. So that it's more comfortable to work on, particularly if I have a pen tablet attached to my computer, which allows me to draw. By the way, when I use the Rotate View tool, I'm not changing the orientation of the actual document; I'm just changing the working image temporarily. The next menu is the Arrange Documents menu. If I had more than one document open, I could use this menu to select different layouts that would allow me to see more than one document at a time.
Finally, the Screen Mode menu, which gives me options for three different screen modes in Photoshop CS4. One that I really like is the Full Screen Mode. If I click that and then click the Full Screen button, the image is displayed against this plain black background, which is a great way to show your designs to clients. Then when you want to go back to regular view, just press the F key on the keyboard. Another new interface feature in Photoshop is the Application Frame. If you are on a PC, you won't notice anything unusual, but if you are on a Mac, you may not be used to seeing this gray area behind your image that stretches all the way from the toolbox on the left to the panels on the right.
In fact, this is not the default view on a Mac. On a Mac, the document window is free-floating by default. I'll show you what that looks like by going up to the Window menu and down to Application Frame to disable it. With the Application Frame disabled, you can see my desktop behind here and if I had icons on my desktop or I had another application opened, it would be showing down here as well, which can be distracting. With the Application Frame disabled, there is always the danger that you will accidentally click on the desktop which takes you out of Photoshop, and requires you to click back on the document window to go back into Photoshop.
You may prefer to enable your Application Frame on a Mac, by going up to Window and down to Application Frame. The other thing the Application Frame allows you to do is to resize and move Photoshop as a whole. I can do the same here from the bottom or from the corner and now if I had another application, say Dreamweaver, I would be able to quickly go back and forth between the two applications. I also could come up to this top bar, and click and drag and move Photoshop as a whole. I can even drag it off onto a second monitor. I'll put it back where it was and I'll stretch it out for now.
These new interface features in Photoshop are part of Adobe's effort to make the look and feel of the various Creative Suite programs more consistent. That's good news for you as web designers and developers, because you often find yourself working across programs and across platforms. The new consistent interfaces will make your work a lot easier.
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