Adobe Photoshop Workshop

Adobe PhotoShop WorkshopTips and Techniques for Beginners

Adobe PhotoShop WorkshopOverview

• 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.


• 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.


• Dimensions– The amount of pixels contained in the

width and height of an image is referred to as an image’s dimensions.


• Dimensions– The amount of pixels contained in the

width and height of an image is referred to as an image’s dimensions.

Screen Dimensions Dimensions in Browser 640 x 480 600 x 300

800 x 600 760 x 420

1024 x 768 955 x 600


• Color Depth (Bit-Depth)– Color depth describes the maximum

amount of colors an image can contain.

Bit-Depth Colors1 bit 2

8-bit 256

24-bit 16.7 million

32-bit 16.7 Million +256 Color Alpha Channel


• Digital Image Types:– Bitmaps – Vectors


• 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.


• Vectors– Vector images do not plot images on a

pixel-by-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.


• 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 notsupport 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 Toolbar– The Toolbar contains a collection of

Tools for creating, selecting, and manipulating images.


• 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.


• 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 image’s

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 PhotoShop’s 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 haven’t 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 let’s make a border on the rectangle,

an operation known as stroking the selection.

PhotoShop Project• Repeat with the other tools. Try using

different layers and colors.

• 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 ProjectPearly 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

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. Ctrl-d to deselect. Ctrl-s to save.

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 don’t 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 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.

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 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.

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 WorkshopTips and Techniques for Beginners

Please refer to your manual for reference and questions.

Documents

Adobe Photoshop Workshop