Photoshop Overview

Menus   -   Tool Bar Options   -   Status Bar -   Toolbox   - Palettes  -   Opening & Creating Images   -   Saving Images  -   Terminology   -   Sizing for the Web  

Photoshop is used extensively in the photography business (image editing and` retouching) and in the print business (photo retouching and image manipulation). It has been increasingly used in the web arena.

Photoshop can be used to create original text, banners, logos, manipulate images, layer images, and "enhance" images. Photoshop is integrated with ImageReady to optimize and preview images for the web. However, other simpler programs may be faster and easier for some techniques.

Photoshop is different from other software programs in that it does not open a blank document window. Photoshop does this because most work is done on an existing object.

On first opening Photoshop, you will notice the numerous panels and palettes that come with Photoshop.

A Closer Look…

Photoshop contains three major work areas: the menus, the toolbar, and the palettes/panels.

Menu Options

The pull down menus are similar to other programs.

File - Create, open, close, save, scan, import (from scanner or digital camera), export, or print an image. "Jump to" connects to helper applications, such as ImageReady. Exit Photoshop.

Edit - Editing commands: copy, paste, recolor, fill, stroke, transform, brushes, patterns, shapes. Purge frees up memory. Clear and Undo are also part of EDIT. Transform is used to scale, skew, distort, and rotate selections. Set preferences and manage color settings.

Image -

• Mode - an image can be converted to 8 image color modes. Mode allows you to select a color mode to work in (should be RGB most of the time)
• Adjust - adjusts hue, saturation, brightness, or contrast
• Image size - modifies image file size, dimensions, or resolution
• Canvas size - add or subtract from an image's editable canvas area
• Rotate Canvas - rotate the image
• Crop - trimming the image
• Correct perspective -
  • drag over the area that will be "tilted"
  • select a corner to drag until the item selected is correctly positioned
  • click to accept (to apply the changes) or double-click inside the cropping box
• Layer - combine images, create collages, "correct" flaws in images, create layered image effects.

TIP: Most of these features are on the Layer's palette and more easily selected via the palette.

• Select - modifications allowed when used with the Selection Tools found in the Toolbox.
  • Select All - selects an entire layer or the entire image
  • Deselect - removes the marquee from the image
  • Reselect - redo the marquee if you accidentally deselected it
  • Inverse - select everything but one item, then select INVERSE and the reverse occurs
  • Color Range - create a selection based on color
  • Feather -
    • o Select using the appropriate marquee tool
    • Select > Feather > enter amount of feathering
  • Modify - enlarge, contract, smooth…
• Filter - Special effects - blue, sharpen, distort, colored pencil…

  TIP: Digimarc filter embeds a copyright watermark into an image

• View - viewing options (zoom, fit-on-screen, pixel sizing, ruler specifications, grids, guides, and slices).

  TIP: set your rulers in pixels for web photos

• Window - show and hide palettes
• Help - access the Photoshop online manual or to perform selected tasks via on-screen prompts

Return to the Top

Tool Options Bar

New to Photoshop 6, the options bar contains modification options for various tools in the Toolbox. As you click on Toolbox tools, the options bar will change to match the tool.

TIP: The Toolbar Options bar can be moved to any location on the screen.

Image Window/Work Area

The editing area of Photoshop.

Foreground Image

You can edit only one image at a time. Click on the title bar of the image you wish to bring to the foreground - the image you wish to edit.

TIP: click CTRL + TAB to move a window to cycle through the images until the correct image is in the foreground.

Background Image

You can view the images in the background (non-editable). To edit , either click on its title bar or cycle through to the foreground.

Status Bar

Displays the file size of the active window, and a description of the current Tool.

• Zoom percentage - up arrow or down arrow to zoom in or out
• Image/layers memory sizes
• Tool Tip - brief explanation on how to use the active tool

Return to the Top

Toolbox

The toolbox is the "working" set of tools in Photoshop.

Photoshop's Toolbox is divided into four types of tools:

· Selection Tools
· Painting Tools
· Text/Path Tools
· Viewing Tools

Notice that each "icon" includes a tiny black triangle in the lower-right corner. The "triangle" opens to more tools. Either right click on the triangle or hold down the mouse key while clicking the icon to open the sub-menu.

Return to the Top

Selection Tools

Selection Tools are used to select all or part of a picture. The six selection tools all work the same way: select the tool, click and then drag over the area you wish to select.

Marquees

Select an area of an image. Notice that there are 4 different types of Marquee Tools (square, circle, horizontal, vertical).

Click and drag to select all or part of the image to work with.

Move Tool

Click and drag to "move" a selection to another part of an image, to another image or to another layer. Example: cut & paste one image onto another.

Lasso Tool

Click, drag and click again to "draw" around the desired selection. The Lasso Tool is used when you wish to select an irregular shaped area (Ex: the state map of Texas)

Lasso -

• Click the lasso tool
• Click and carefully drag the cursor around the desired item. Do not release the cursor until you have the desired shape.
• Photoshop will automatically connect the beginning and ending points.

Polygonal Lasso -

• Click the polygonal lasso tool
• Click and carefully drag a very short distance (notice that Photoshop is drawing a small line)
• Click again at each "point" of the item that will "turn away" from the straight line.
• Continuing drawing the "connected" lines until you have the desired shape.
• Photoshop will automatically connect the beginning and ending points.

Magnetic Lasso -

• Click the Magnetic Lasso tool
  • width - how close to the edge for lasso detection
  • edge contrast - how different the pixels must be for lasso recognition
  • frequency - how often the lasso sets its anchor points
• Click and carefully drag a very short distance (notice that Photoshop is drawing a small line).
• NOTE: Notice how the magnetic lasso "hugs" the edge of the shape a little better than the polygonal lasso.
• Click again at each "point" of the item that will "turn away" from the straight line.
• Continuing drawing the "connected" lines until you have the desired shape.
• Photoshop will automatically connect the beginning and ending points.

Magic Wand Tool

Click to select an area of color (selecting an area of pixels) with similar brightness values. Click with the wand on the color you like. The wand allows you to set the amount of similarity in color you wish to have.

TIP: The Magic Wand Tool can also be used to select areas you wish to edit but don't want to spend time using the Lasso Tool if the image has an area to select of one color.

TIP: To "add" to the wand area - hold down the SHIFT key as you select areas of the image.

Magic Wand Tool Options Menu

Tolerance - number of similar colors that are selected when you click in an area. (Ex: 32 means that 32 tones lighter and darker than the Color selected). The higher the number (up to 255), the more shades will be selected.

Contiguous - adjacent pixels. If you "uncheck" this, all similarly colored pixels in the image will be selected (no matter where they are located in the image)

Crop Tool - crops the "canvas"

Slice Tool - slices images for the web

Painting Tools

• Airbrush - sprays paint
• Paintbrush - applies brushstrokes
• Clone/Rubber Stamp - duplicate a selected portion, used in retouching images.
  • Click on the rubber stamp tool.
• Hold down the ALT key, click on the spot that will be duplicated.
• Click on the spot that will be "replaced".
• History Brush - alternative to the eraser. restores pixels from a designated state
• Eraser - erases pixels
• Gradient - creates color blends, often used in backgrounds and textures. Click where you wish the gradient to start, then drag to where you wish it to end.
• Blur/Sharpen/Smudge - blurs edges
• Dodge/Burn/Sponge - lightens pixels

Text & Path Tools

• Path Component Selection Tool - Selects paths
• Text - creates text
• Path Tools- draws curved or straight paths
• Shape Tools - draws rectangular or irregular shapes (includes a panel of pre-defined shapes)

Viewing Tools

• Notes - creates non-printed annotations, comments
• Color Selector, Eyedropper & Measure Tool - sample a color from the image and Photoshop will set that color as the foreground color. The Ruler measures dimensions and angles in an image
• Hand - moves the image around within the window
• Zoom - enlarges or reduces the image viewing size

Background & Foreground Color

Foreground/Background Color - color picker for the foreground and background colors

Arrows - switch foreground/background colors

Quick Mask & Standard Modes

• Standard mode
• Quick Mask mode
• Window Modes

Screen View

Standard (image in a normal window)
Full Screen with no Menu Bar
Image Display Against a Black Background

Image Ready Toggle

Return to the Top

Panels/Palettes

Palettes are small windows used in Photoshop to verify settings or modify documents. By default, the palettes appear in stacked groupings in panels on the right side of the window.

The "groupings" can be separated and moved around the screen by dragging the palette's name tab. Palettes can be "re-grouped" by dragging the name tab to the desired palette.

Each palette contains a menu that is viewable by clicking the list arrow in its upper-right corner. The appearance of a palette depends on which Tool is currently active. Palettes allow you to select colors, modify layers are set preferences.

TIP: if the Save Palette Locations box is checked in the Edit > Preferences > General box, palettes that are open when you quit Photoshop will reappear in the same location when you open Photoshop again.

TIP: To restore the original locations, select Window > Reset Palette Locations

Navigator/Info

Navigator

• Move an image or change an image's view size

Info

• Displays a color breakdown of the pixel currently under the cursor
• Displays the x/y location of the cursor on the image

Color/Swatches/Styles

Color

• Used for mixing and selecting colors
• Used with the Paint or editing tools
• Mix a color using the sliders
• To open the color picker, select the Foreground/background color block.

Swatches

• Selecting already mixed colors

Styles

• Apply previously saved effects

History/Actions/Layers/Channels/Paths

History

• Undo or review previous steps
• Nonlinear history option - do not have to undo all steps in consecutive order

Actions

• Record a series of commands and replay on one or a series of images
• Used to create keyboard shortcuts

Layers

• Add, delete, show/hide, duplicate, group, link or restack layers on top of the background
• Editable type layers - used for writing text on an image

Channels

• Color channels

Paths

• Paths are drawn with shaping or pen tools

Character/Paragraph

Character

• To open this palette - click the Type Tool, click Palette on the options bar.
• Displays font faces, font weights, font sizes, font colors

Paragraph

• Apply paragraph-wide attributes to type (ex: indent)

Return to the Top

Opening & Creating Images in Photoshop

Create a New Image

• File > New
• Name: Enter a name in the NAME field
• Width/Height: Select a unit of measurement
• Resolution: (pixels per inch). Choose the minimum resolution necessary to obtain output quality. Web - generally 72 dpi
• Mode: RGB for the web
• Contents: white
• Background color - if you wish to select a background color
• Transparent - if background will be layered
  • NOTE: few applications can read Photoshop's layer transparency.
• Click OK.

Opening an Existing Image from Your Images Folder

• File > Open > locate the image > open

Return to the Top

Saving an Image

• File > Save > file name > select the file location > save as (select a file format)

Save As a Copy

Allows you to work with a duplicate, save prior to making drastic changes… Give this copy a new name.

Save for Web

Same SAVE as seen in ImageReady to optimize the image for the Web.

Return to the Top

Terminology

Formats

• PSD - Photoshop native format.
  • TIP: turn off the maximize backwards compatibility in Photoshop format under EDIT > PREFERENCES > SAVING FILES.
• TIFF (tag image file format) - used for images in QuarkXPress, InDesign and other print publishing programs. Not compressed, thus saving all the color information. Used for high-quality images.
• JPG - doesn't accommodate layers but does compress well (set quality at 8 or more)
• PDF - exporting to other programs as vector-based
• PNG (portable network graphics) - not supported by Netscape/Explorer but superior image format in compression and quality

Vector images - contain a series of lines, curves, and shapes that form objects through mathematical instructions. Good for line drawings, illustrations, text.

Color Modes

• RGB - amounts of red/green/blue contained in an image. Used for computer and TV screen colors. There are 256 possible values for each of the 3 colors.

  You determine how many colors your hardware will display, right-click on the desktop. A pull-down menu will appear. Select properties, display properties, choose settings.

• CMYB - primary print inks (cyan/magenta/yellow/black). Used in the printing world.
• Grayscale - displays up to 254 shades of gray

Resolution - Quality of the image, measured in DPI (dots per inch). The higher the resolution of an image, the more pixels it contains and thus the more detail contained. A computer monitor displays 72 dpi.

Dithering - minimize the effect of color reduction on image quality.

Dithering=0 use with text on an image
Dithering=100% see more scattered pixels

Brightness - difference between light and dark areas in the image

Hue - Intensity of color. The amount of red, green, blue in a particular color.

Saturation - amount of color being used. Increasing this value will increase the amount of color in the image, decreasing this value decreases the amount of color until you reach gray

Anti-alias - edges of the selection will be blended with the adjacent colors of surrounding pixels, softening the transition between the edges (better for oval and curved items)

Sizes for the Web*

Small icon 25 x 25
Medium icon 40 x 40
Horizontal bar 600 x 1

Standard ad sizes

Full banner ad 468 x 60
Half banner ad 234 x 60

*Interactive Advertising Bureau

Return to the Top