TUTORIAL: Adobe Photoshop CS3 for Absolute Beginners Ch.1

This is a tutorial for individuals who have no experience with Adobe Photoshop. This tutorial will help you to become familiarized with the user interface and some essential precepts you'll need to know to get started.

Introduction

Adobe Photoshop has been a tool in web developers' toolboxes for a long time. In fact, one could say that it is the defacto standard for working with images.

While there are altnernative softwares to Photoshop, there really isn't an alternative to knowing how to use Photoshop. It will be a requirement of almost any employment situation that deals with graphics on a professional level.

For this tutorial, we'll be using Adobe Photoshop CS3 for figures and references. However, all the concepts we'll be dealing with here, will exist in previous versions.

If you do not have Photoshop, you can download a trial version here.

Two Types of Images

Where computer generated graphics are concerned, there are two types of images.

A. Raster Images

Sometiems referred to as bitmaps or bitmapped images, raster images are based on pixels. The screen you're looking at right now is composed of a grid of many tiny dots. Each of these dots is a single pixel. Photoshop was originally developed for dealing with this type of image.

If I was to describe the letter "G" in pixels, it might look somehthing like Figure 1.



B. Vector Images

The other type of images are vector images. Vector images are created through a system of points (vertices, anchors, corners) and lines (paths). Vector based images help us create smooth organic curves. They have many distinct advantages over raster images.

Photoshop has the capability to create and use vector images. Vector images will be explained, in detail, in a later chapter.

The Application Interface

Let's launch Adobe Photoshop. This can be accomplished in several different ways including a desktop icon or quicklaunch bar. If we're using a Windows operating system, it can be launched from the "Start" menu (e.g. Start/All Programs/Adobe/Photoshop CS3).

When Photoshop is opened, the interface will look something like Figure 2.



Let's take a moment to observe the different components that make up this interface.

Across the top of the program, below the title bar is the text-menu. The text-menu has the words, "File", "Edit", "Image", "Layer", "Select"...etc. This type of menu, in this location, is probably familiar to us as it is common to the majority of programs on our computer (Figure 3),

Immediately below the text-menu, is the context-menu. The items in this menu will change to reflect the options associated with the tool being used. (Figure 3)



Along the left side of the interface, we find the Tools palette (Figure 4). If this is not present, choose Window from the text-menu and then Tools. This toolbox is where we will go when we want to select and create.

We will study the tools in more detail in the next tutorial.



On the right side of our interface, we have an area for Palettes (Figure 5). Palettes are a series of smaller windows. Each palette, or window, serves a specific function. In general, the palette area is where we go when we want to manipulate.

Individual palettes will be examined in detail over the entire tutorial series.



Photoshop Documents, Viewing Modes and Files

Let's start a blank Photoshop document by going to File in the text-menu and choosing New. The resulting dialog window will look something like Figure 6.1.



The first item is a field where we can establish a Name for this file. Let's type in the name that we'd like to have for this file, for instance, "website". If we skip this feild, the document will be named by Photoshop as "Untitled". This is fine, the file can be named later when it's saved.

Next, is a drop-down menu labeled Preset (Figure 6.2) that allows us to choose from some previously defined document types. For now, let's choose "Web". When we do this, many of the options that follow are changed for us. We will explore this interface in more detail in later sections of this series.



Let's accept these default values by choosing the OK button positioned in the top right of this dialog window (Figure 6.1). When we do that, a new window will open in our workspace (Figure 7).



Controlling the Viewing Mode with keyboard shortcuts

If our interface doesn't look like the image above, we may be in the wrong viewing mode. Photoshop gives us a convenient way of moving between viewing modes while we work on images.

A. We can toggle the interface palettes and context-menu on and off by tapping the TAB key on our keyboard.

B. We can toggle between window states by tapping the F key on our keyboard.

Let's take a moment to experiment with these keyboard shortcuts and observe the different views.

(**Thank you, George L.!!!)



Now, from the text-menu let's choose File, then Save. The save dialog appears on the screen.



The save dialog window should feel familiar to us as it is common in most of the programs on our computer. Here we can name our file, if we haven't already. Then we can choose a location for our file and save the work we've done (Figure 8).

The file type we use to save our work is a Photoshop Document. The extension of the file name is .psd. So, if we named our file "website", the file name of the saved file would be website.psd.

Conclusion

In this first chapter of "Photoshop CS3 for Absolute Beginners" we learned some fundamentals for working with the program including the parts of the user interface and file management.



Chapter 2 >

Please PM me with any suggestions for improving this tutorial or if you would like to submit a chapter of your own as apart of this series.

Thanks!
dM