Getting Started with Photoshop

You've heard of Photoshop, right? Of course you have -- you wouldn't be reading this book otherwise! You've probably heard of Photoshop's sidekick, Fireworks, too, but you might not be quite sure of what it does or where it fits in.

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, which has been adapted from The Photoshop Anthology, 101 Web Design Tips, Tricks and Techniques, 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 (where would it end!), 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.

Comps and Turtlenecks: Designer Lingo
Now that you're going to be working in Photoshop, you might want to start talking like a designer. Designers, like professionals in most specialist fields, have their own terminology and words for things. A comp (short for "composite") refers to a mockup of the final solution that a designer has in mind. Traditionally, "comp" is used in the print world to refer to page layouts, but for web designers it usually refers to a static interface prepared entirely in Photoshop for the client to look over before he or she decides to proceed. You might even hear it being used as a verb: "comping" is the process of creating that mockup site.


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.

The Photoshop workspace (click to view image)

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.

Changing the status bar (click to view image)

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.

Working in Photoshop
Now that you've been introduced to the Photoshop workspace and have a basic idea of where everything is, let's start getting our hands dirty.

Creating New Documents

The New dialog box (click to view image)

You can create a new document by selecting File > New from the menu bar, or pressing the keyboard shortcut Ctrl-N on a PC or Command-N on a Mac. The New dialog box will appear,where you can specify the document size and other settings.

Opening Files

Open files by selecting File > Open from the menu bar, or pressing Ctrl-O (Command-O on a Mac). You can select and open multiple files by holding down Ctrl (Command on a Mac) and clicking on all the files you require in the file dialog box.

Saving Files

Save a file by selecting File > Save, or pressing Ctrl-S (Command-S on a Mac). For a newly-created document, this will save your work in Photoshop Document (PSD) format. If you would prefer to save a copy of the document, you can use File > Save As or pressing Ctrl-Shift-S (Command-Shift-S on a Mac) instead.

Snappy Presets
If you're designing for a web site with a minimum screen size of 800×600 pixels, I'd recommend you start with a 750×550 pixel document. The smaller dimensions give you a better estimate of your actual screen area after you take into account scroll bars and menu bars. Also, be sure to set the resolution at 72dpi to reflect the actual screen resolution. If you want easy access to these dimensions for other new documents, it's probably a good idea to click Save Preset and give the settings a name like Web Page. The next time you create a new document, you will be able to load your Web Page settings from the Preset list.