Adobe PhotoShop Workshop

Tips and Techniques for Beginners

Adobe PhotoShop Workshop

Overview
Introduction to PhotoShop
The PhotoShop Workspace
The Toolbar
PhotoShop Project

Section 1
Introduction to PhotoShop
PhotoShop is the leading digital
image editing application for the
Internet, print, and other new media
disciplines.

Introduction to PhotoShop
RGB Color Space
(Red, Green, Blue)Essentially your
computer has a Palette that holds a
swatch or blob of red paint, green
paint, and blue paint. By mixing these
colors together, other colors are
created.

Introduction to PhotoShop
Image Resolution
Resolution in digital imagery refers to
pixels per inch (ppi) or density, similar
to how many square feet a particular
room in a house might have.

Introduction to PhotoShop
Dimensions
The amount of pixels contained in the
width and height of an image is
referred to as an images dimensions.

Introduction to PhotoShop
Dimensions
The amount of pixels contained in the
width and height of an image is
referred to as an images dimensions.
Screen Dimensions
640 x 480

Dimensions in Browser
600 x 300

800 x 600

760 x 420

1024 x 768

955 x 600

Introduction to PhotoShop
Color Depth (Bit-Depth)
Color depth describes the maximum
amount of colors an image can
contain.
Bit-Depth

Colors

1 bit

8-bit

256

24-bit

16.7 million

32-bit

16.7 Million +256 Color Alpha Channel

Introduction to PhotoShop
Digital Image Types:
Bitmaps
Vectors

Introduction to PhotoShop
Bitmaps
Bitmap files map out or plot the image on a
pixel-by-pixel basis. Computer displays are
made up of a collection of individual points
or dots, called pixels, organized in columns
and rows (similar to a table or a grid) where
each cell represents each pixel in the
image.

Introduction to PhotoShop
Vectors
Vector images do not plot images on a pixelby-pixel basis. Instead, vector files contain a
description of the image expressed
mathematically. Essentially, the file tells the
computer about the image and the computer
draws it.

Introduction to PhotoShop
Internet Image Standards
GIF (Graphics Interchange Format)
JPEG (Joint Photographic Experts
Group)
PNG (Portable Network Graphics
Each of these formats is a bitmap file. Currently, browsers do not
support the display of vector-based images without a plug-in.

Section 2
The PhotoShop Workspace
The PhotoShop workspace consists
of four main components: the Menu,
the Toolbar, the Options Bar, and the
Palettes.

The PhotoShop WorkSpace

The Menu
The Menu contains controls for
common functions such as opening
and saving files, as well as specific
functions, such as copying and
pasting, calling up specific windows
or Palettes, and controlling the
PhotoShop workspace.

The PhotoShop WorkSpace

The Toolbar
The Toolbar contains a collection of
Tools for creating, selecting, and
manipulating images.

The PhotoShop WorkSpace

The Options Bar
The Options Bar, by default, is placed
just below the Menu. Whenever a
Tool is selected in the Toolbar, the
Options Bar displays the available
Options for the currently selected
Tool.

The PhotoShop WorkSpace

Palettes
Palettes contain additional controls
for other features in PhotoShop, such
as the use of Layers, Colors, Layer
Styles, and other features that you
will learn about and use as you
progress through the program.

Section 3
The Tool Bar
This section covers the
PhotoShop toolbar detail. In this
section we discuss the each of
the tools and how they are used.

The Toolbar

The tools fall roughly into the following

categories:
Selection tools - used for creating closed
boundaries - marquee tools, lassos, magic wand,
& quick mask.
Painting tools - used for adding color by using
the mouse like a brush, or by simply filling areas
with a selected color - brush, history brushes,
airbrush, gradients, paint bucket, & pencil tool.

Retouching tools - used for editing existing

colors & image details - healing brush & patch tool,
the clone stamp, erasers, dodge, burn, sponge,
blur, sharpen, & smudge tools.
Vector tools - used for creating, & editing vector
shapes - pen, path select, shape, & line tools.
Change view tools - used for moving &
magnifying the view of an image, without affecting
the image, itself - hand, & zoom tools

The Toolbar
Marquee Tools
Used for making rectangular,
elliptical, or single row selections.

The Toolbar
Move Tool
Used for moving the contents of
selections or layers

The Toolbar
Lasso Tools
Used for making selections.

The Toolbar
Crop Tool
Used for cropping image borders.

The Toolbar
Magic Wand
Used for selecting areas.

The Toolbar
Slice Tools
Used for dividing images into
independent areas.

The Toolbar
Healing Brush
Used for seamless merging of
cloned image data.

The Toolbar
Brush Tools
Used for painting.

The Toolbar
Clone Stamp
Used for painting with copied
image data.

The Toolbar
History Brushes
Used for painting.

The Toolbar
Eraser
Used for removing portions of
images.

The Toolbar
Gradient Tools
Used for adding, and editing
gradient color blends.

The Toolbar
Blur Tool
Used for retouching.

The Toolbar
Dodge Tool
Used to lighten tones.

The Toolbar
Path Selection
Used for selecting path
components.

The Toolbar
Type Tools
Used for adding type to images.

The Toolbar
Pen Tools
Used for creating paths.

The Toolbar
Shape Tools
Used for creating paths in
geometric shapes.

The Toolbar
Notes
Used for attaching text, and
audio notes to files.

The Toolbar
Eyedropper
Used for finding color values,
and choosing colors.

The Toolbar
Hand Tool
Used to move the view of an
image.

The Toolbar
Zoom Tool
Used to change the images
magnification.

The Toolbar
Foreground and
Background
Used for choosing foreground and
background colors

The Toolbar
Quick Mask
Used for making precise
selections

ImageReady
ImageReady is PhotoShops
web-specific companion
Program

Section 4
PhotoShop Project
This section covers the process of
creating new images and using the
toolbar and palettes in Photoshop.

PhotoShop Project
Creating New Images
If you havent already started Photoshop
start it now.
Creating a new image involves five (5) key
decisions:

Image Name
Dimensions
Resolution
Mode
Contents

PhotoShop Project
Creating New Images

PhotoShop Project
Create your first image
Image name Basic Shapes
Dimensions 300 x 250 pixels
Resolution 72 ppi
Mode RGB
Contents - Transparent

PhotoShop Project
Basic Shapes
Find your Layers palette and
click the New Layer icon at the
bottom right next to the trash
can.
Double-click on the layer in the
layers palette and name the new
layer - Basic Shapes.

PhotoShop Project
With the Basic Shapes layer selected in
the layers palette, choose the Rectangular
Marquee tool in the toolbar. Then drag a
rectangle across your canvas as I have
done here.

PhotoShop Project
Choose the foreground color square
Next lets make a border on the rectangle,
an operation known as stroking the
selection.

PhotoShop Project
Repeat with the other tools.
different layers and colors.

Try using

File -> Save As and name this first project

Basic Shapes.psd. Leave the file type as
PSD. This will maintain your layers and
the quality of your work.

PhotoShop Project
Create your second image
Image name Pearly Button
Dimensions 300 x 300 pixels
Resolution 72 ppi
Mode RGB
Contents - Transparent.

PhotoShop Project
Pearly Button
Make a SQUARE selection in the middle of
your canvas.
Now create your square. File -> Save As
and think of a name for this. Leave the file
type as PSD. This will maintain your layers
and the quality of your work.
3. Now lets fill the square with a gradient

PhotoShop Project
Pearly Button
The gradient tool is between the type
tool and the eyedropper. Choose the
Diamond Gradient tool. Choose your
favorite color for your foreground
color.

PhotoShop Project
Beginning in the center of the
square, drag the gradient out to one
of the corners of the square.
Stroke the selection.
deselect. Ctrl-s to save.

Ctrl-d

to

PhotoShop Project
Now we are going to put a pearly
looking button in the center of this
square. Make a new layer.
Name the layer Circle. Then starting
from the center of the square, drag out a
perfect circle. (Alt-Shift-drag)

PhotoShop Project
From your gradient tool, choose the
Radial Gradient Tool. Switch your
foreground and background colors by
clicking on the arrow above and to the
right of the color squares in your Toolbar.

PhotoShop Project
Drag a gradient from about where I have
the red dot in the circle along the red
arrow to the far edge of the circle. If you
dont get this the first time, just do it
again. Ctrl-d to deselect. Ctrl-s to save.

PhotoShop Project
Now lets create a shadow under the
center circle? Do that by clicking on the
circle layer in the layers palette and then
Layer -> layer effects -> drop shadow.

PhotoShop Project
The outer part in the finished example
has a nice beveled effect. Click on the
squares layer in the layer palette and in
the top menu bar, click on Layer -> Layer
Effects -> bevel/emboss. While you are
there, add a drop-shadow to that layer.

PhotoShop Project
Make a new layer, name it Glow and
drag it beneath the circle layer in the
layers palette. Choose alight yellow for
your foreground color and your airbrush.
Using a brush that is just about the same
width as your button, hold it in the center
of the button and hold it till the ball
glows. Ctrl-s to save.

PhotoShop Project
Select the circle layer in the layers
palette and choose the Dodge tool. It is
between the pencil tool and the type tool
on the burn tools flyout. It looks like a
black magnifier. Use a fairly large
feathered brush and stroke repeatedly
over that area until you have the effect
you seek. Ctrl-s to save your work in
psd form.

PhotoShop Project
Make a copy of this in jpeg format.
To save as a jpeg do the following: File
-> Save as and choose .jpg from the
format types in the dropdown box.
Because your file is still in a layered
format it will automatically tell you to
save it as a copy. Find a suitable place
for it and then click save.

PhotoShop Project
Email me the Basic Shapes.psd, the
button.psd and the button copy.jpg.
My email address is written in your
manual.

Adobe PhotoShop Workshop

Tips and Techniques for Beginners
Please refer to your manual for reference and
questions.