Getting Started Photoshop

Photoshop and Fireworks are two of the most commonly used tools in the web designer's arsenal. From the preparation of initial design comps to generating optimized graphics for a web page, most web designers rely heavily on these two programs.

In this introductory chapter I'll cover some of the basic tools and tasks that we'll draw on in the later chapters. I'll also share some of the shortcuts and time-savers that I use frequently. This chapter won't give you an exhaustive review of the many things that Photoshop can do, but it should provide the bare bones that will help get beginners started. If you're already familiar with the interface and can perform tasks like making selections, applying gradients, and working with layers, you might want to skip ahead to the next chapter.

So what are you waiting for? Open up Photoshop and let's go!

The Photoshop Workspace

Photoshop's "out of the box" workspace consists of the following components:

• menu bar - You will probably already be familiar with the menu bar from other programs. This runs across the top of your Photoshop window, and contains various menu options for Photoshop's tools.
• options bar - The options bar sits beneath the menu bar and holds contextualized options for different tools. It also contains the workspace menu, where you can save and load arrangements of palettes.
• toolbox - By default, the toolbox sits to the left of your Photoshop window, and contains shortcuts to Photoshop tools.

• palettes - Individual "panes" that hold information or options for working with your file, known as palettes (or panels), float on the right-hand side. Each palette is labeled with a tab, and can be minimized, closed, grouped with other palettes, or dragged in and out of a panel dock. In the example that follows, the Navigator palette contains a thumbnail of the image that allows you to zoom in or out of the image quickly, and to change the part of the image displayed on the screen.
• document windows - Each open document has its own document window with a status bar along the bottom. The status bar sits to the right of the zoom percentage displayed in the bottom left-hand corner, and displays information that's specific to the document.

Customizing your Workspace

You can customize your Photoshop workspace to suit you or your project -- almost everything within your workspace can be repositioned and reconfigured! You might choose to customize your workspace by:

changing the look of the menu bar

You can change which menu items are visible in your menu bar, and even add color to your menu items. If you wanted, you could also assign new or different keyboard shortcuts to menu commands (which I don't recommend until you feel very comfortable with Photoshop or have a compelling reason to do so!). Go to Edit > Menus and use the dialog box to modify the menu bar and palette menus.

moving the options bar

If you want to move the options bar, you can do so by clicking on the handle on its left side and moving it around. The options bar will "dock" to the top or bottom of the screen automatically if moved near those areas.

moving the toolbox

The toolbox is extremely portable, and can be moved to any location on your screen. Move the toolbox by clicking on the light gray area at the top of it and dragging it around. You can switch between different toolbox layouts by clicking the double arrow along the top of the toolbox.

rearranging palettes

There are many ways to rearrange your palettes. You might want to separate a palette from its palette group, and move it into another group. You can do this by dragging the palette tab out of its original group and into the new group. You may want to expand or collapse a dock, by clicking on the double arrows at the top of the dock. You might also decide to drag some of your palette tabs out of their dock, and close the rest. To display a palette that has been closed, go to Window and select the palette you want to show.

displaying different information in the document window status bar

The status bar displays the document file size by default. The file size is shown as two numbers separated by a forward slash: the first number is an approximation of the image file size with all layers merged (known as "flattening" the image), and the second number is an approximation of the total file size of the image with layers intact. If all this sounds new to you, don't worry -- we'll be discussing layers shortly. You can set the status bar to display different information, such as the document dimension in pixels, or the version number of the file. To do this, click on the arrow icon next to the status bar, select Show and choose the information you'd like to see.

Saving your Customized Workspace

As you become more proficient with Photoshop, you may discover that you use certain sets of palettes for different types of projects, and that there are some palettes that you don't use at all. Photoshop allows you to save and load different workspaces -- different arrangements of palettes, menus, and even different keyboard shortcuts -- to help you work more efficiently.

After you've customized your workspace to your satisfaction, select the Workspace menu in the options bar, click Save Workspace and enter a name for your workspace, such as Creating Thumbnails or My Default Workspace. You can then load your different workspaces by opening Workspace and selecting your custom workspace from the menu list.