Transcript Adobe Photoshop Workshop

Adobe PhotoShop Workshop
Tips and Techniques for Beginners
EDET 722
N M Swygert
Adobe PhotoShop Workshop
Overview
• Introduction to PhotoShop
• The PhotoShop Workspace
• The Toolbar
• PhotoShop Project
EDET 722
N M Swygert
Section 1
• Introduction to PhotoShop
– PhotoShop is the leading digital
image editing application for the
Internet, print, and other new media
disciplines.
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
Introduction to PhotoShop
• Dimensions
– The amount of pixels contained in the
width and height of an image is
referred to as an image’s dimensions.
EDET 722
N M Swygert
Introduction to PhotoShop
• Dimensions
– The amount of pixels contained in the
width and height of an image is
referred to as an image’s dimensions.
Screen Dimensions
640 x 480
EDET 722
Dimensions in Browser
600 x 300
800 x 600
760 x 420
1024 x 768
955 x 600
N M Swygert
Introduction to PhotoShop
• Color Depth (Bit-Depth)
– Color depth describes the maximum
amount of colors an image can
contain.
Bit-Depth
Colors
1 bit
2
8-bit
256
24-bit
16.7 million
32-bit
16.7 Million +256 Color Alpha Channel
EDET 722
N M Swygert
Introduction to PhotoShop
• Digital Image Types:
– Bitmaps
– Vectors
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
Section 2
• The PhotoShop Workspace
– The PhotoShop workspace consists
of four main components: the Menu,
the Toolbar, the Options Bar, and the
Palettes.
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
The PhotoShop WorkSpace
• The Toolbar
– The Toolbar contains a collection of
Tools for creating, selecting, and
manipulating images.
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
The Toolbar
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
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
EDET 722
N M Swygert
The Toolbar
• Marquee Tools
– Used for making rectangular,
elliptical, or single row selections.
EDET 722
N M Swygert
The Toolbar
• Move Tool
– Used for moving the contents of
selections or layers
EDET 722
N M Swygert
The Toolbar
• Lasso Tools
– Used for making selections.
EDET 722
N M Swygert
The Toolbar
• Crop Tool
– Used for cropping image borders.
EDET 722
N M Swygert
The Toolbar
• Magic Wand
– Used for selecting areas.
EDET 722
N M Swygert
The Toolbar
• Slice Tools
– Used for dividing images into
independent areas.
EDET 722
N M Swygert
The Toolbar
• Healing Brush
– Used for seamless merging of
cloned image data.
EDET 722
N M Swygert
The Toolbar
• Brush Tools
– Used for painting.
EDET 722
N M Swygert
The Toolbar
• Clone Stamp
– Used for painting with copied
image data.
EDET 722
N M Swygert
The Toolbar
• History Brushes
– Used for painting.
EDET 722
N M Swygert
The Toolbar
• Eraser
– Used for removing portions of
images.
EDET 722
N M Swygert
The Toolbar
• Gradient Tools
– Used for adding, and editing
gradient color blends.
EDET 722
N M Swygert
The Toolbar
• Blur Tool
– Used for retouching.
EDET 722
N M Swygert
The Toolbar
• Dodge Tool
– Used to lighten tones.
EDET 722
N M Swygert
The Toolbar
• Path Selection
– Used for selecting path
components.
EDET 722
N M Swygert
The Toolbar
• Type Tools
– Used for adding type to images.
EDET 722
N M Swygert
The Toolbar
• Pen Tools
– Used for creating paths.
EDET 722
N M Swygert
The Toolbar
• Shape Tools
– Used for creating paths in
geometric shapes.
EDET 722
N M Swygert
The Toolbar
• Notes
– Used for attaching text, and
audio notes to files.
EDET 722
N M Swygert
The Toolbar
• Eyedropper
– Used for finding color values,
and choosing colors.
EDET 722
N M Swygert
The Toolbar
• Hand Tool
– Used to move the view of an
image.
EDET 722
N M Swygert
The Toolbar
• Zoom Tool
– Used to change the image’s
magnification.
EDET 722
N M Swygert
The Toolbar
• Foreground and Background
– Used for choosing foreground and
background colors
EDET 722
N M Swygert
The Toolbar
• Quick Mask
– Used for making precise
selections
• ImageReady
– ImageReady is PhotoShop’s
web-specific companion
Program
EDET 722
N M Swygert
Section 4
• PhotoShop Project
– This section covers the process of
creating new images and using the
toolbar and palettes in Photoshop.
EDET 722
N M Swygert
PhotoShop Project
• Creating New Images
– If you haven’t already started Photoshop
start it now.
– Creating a new image involves five (5) key
decisions:
•
•
•
•
•
EDET 722
Image Name
Dimensions
Resolution
Mode
Contents
N M Swygert
PhotoShop Project
• Creating New Images
EDET 722
N M Swygert
PhotoShop Project
• Create your first image
– Image name – Basic Shapes
– Dimensions – 300 x 250 pixels
– Resolution – 72 ppi
– Mode – RGB
– Contents - Transparent
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
PhotoShop Project
• Choose the foreground color square
• Next let’s make a border on the rectangle,
an operation known as stroking the
selection.
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
PhotoShop Project
Create your second image
– Image name – Pearly Button
– Dimensions – 300 x 300 pixels
– Resolution – 72 ppi
– Mode – RGB
– Contents - Transparent.
EDET 722
N M Swygert
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 let’s fill the square with a gradient
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
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)
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
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
don’t get this the first time, just do it
again. Ctrl-d to deselect. Ctrl-s to save.
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
PhotoShop Project
• The outer part in the finished example
has a nice beveled effect. Click on the
square’s 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.
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
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 tool’s 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.
EDET 722
N M Swygert
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.
EDET 722
N M Swygert
PhotoShop Project
• Email me the Basic Shapes.psd, the
button.psd and the button copy.jpg.
• My email address is written in your
manual.
EDET 722
N M Swygert
Adobe PhotoShop Workshop
Tips and Techniques for Beginners
Please refer to your manual for reference and
questions.
EDET 722
N M Swygert