Adobe Photoshop Tutorials

Forward

The Beauty of Bitmaps

Adobe Photoshop is a very versatile program. Some people use it primarily used to edit and retouch scanned photographs, others use it create graphics for CD-ROM-based multimedia, while some rely on it to create graphics for the World Wide Web. Others use it as if it was a sort of “digital paintbox.” It is a credit to the power and flexibility of Photoshop that it serves all these purposes – and many others – so well.

Throughout this book, we shall be examining techniques applicable to all of these tasks, which are all parts of the general category of "digital imaging." Examples of digital imaging are everywhere: think of any number of ads where a photo-realistic special effect makes you do a double-take. A decade ago, these were typically done by laborious manual airbrushing and collage work; today, they are nearly universally done with digital imaging techniques.

Photoshop is also used to create a wide array of type treatments these days. Many company logos now look like they are made of some organic material or are floating a few centimeters off the page. As we shall see, these and many other type treatments are easy to accomplish with Photoshop.

Table of contents

The Beauty of Bitmaps

Section 1

Hidden Power in the Toolbox

Let's begin by reviewing some of the more subtle features of Photoshop’s Toolbox tools. Shown on the left is the Windows version of the Toolbox; on the right is the Mac version (Adobe also markets a Unix version for Sun workstations). These two versions of Photoshop are so similar, users of either platform can switch between them with ease when the job demands it. Throughout this tutorial, I will use PC terminology: In Photoshop, the Mac’s Command key (hereafter referred to as “”) and Option key are equivalent to the PC’s Control and ALT keys. It’s that easy.

This information is applicable to all versions of the program, but focuses on features in the LE version.

Windows toolbox

Mac toolbox

To get started, select the Oval tool by clicking on it. What oval tool? Click the rectangular marquee while holding the Alt key.

On your Photoshop page, click and drag an oval shape. Now try drawing another one partially overlapping the first while holding either Shift key and note the difference. Try starting to drag the oval before and after depressing the Shift key.

Review the following tool options, in case there are any you are not familiar with.

Marquee Tool - Option-click to toggle to or from an Oval Marquee. Shift constrains to square (or an oval to a circle). Double-click (all tools) to see other settings.

Lasso - Option-drag to draw in “rubber band mode.” Press Shift to add to a selection; Alt to remove from a selection (this works with ANY selection tool).

Magic Wand - Click to choose areas of similar color. Double-click to set Tolerance. Higher Tolerance numbers allow more shades to be selected.

Selection Move tool - useful for moving items on a Layer, or any selection.

Grabber Hand - Same as pressing Space Bar and dragging pic.

Magnify tool. Option zooms out. Same as CTRL-Space / Alt-CTRL--Space.

Crop Tool. Drag corner while holding Option to rotate and crop – perfect for skewed scans.

Text Tool - Press CTRL-Backspace to fill with Foreground color (this works with all selections).

Paint Bucket - acts like Magic Wand, but fills with foreground color or defined pattern. Affected by Tolerance setting.

Gradient tool - fills from Foreground to Background by default - Double-click to see other settings.

Line tool - Double-click to set arrowheads and other settings.

Eye Dropper tool - Alt-click to choose background color.

Eraser tool - option-click for “Magic Eraser” – erases to previously saved image of same resolution and bit-depth.

Pencil tool - the only tool that is always “aliased.” Useful for setting precise pixel colors.

Airbrush tool - like all brushes, size is set with F5 key brush palette.

Paintbrush tool - Press F5 to set size. Double-click to see other settings. Press Shift to paint straight lines.

Rubber Stamp - “magic cloning tool” – option-click to set source. Double-click to see other settings.

Smudge tool – good for anti-aliasing jagged edges. Double-click to set smudge amount and other settings.

Focus tool - water drop defocuses images. Alt-click to set “awful sharpen” mode.

Dodge/burn/sponge tool - option-click to switch tools, or double-click to see all settings. Dodge lightens; burn darkens; sponge decreases or increases color intensity, depending on (double-click) palette settings.

Foreground/Background color. Double-click to see all colors. Click small B&W icon to return to default values. Click arrow to switch foreground/background colors.

Marquee / QuickMask mode. QuickMask mode allows you to “paint” a mask with paint tools. (Background color erases mask.)

Three display options:

Windows and menu
Gray background and menu (slightly faster)
no menu or windows (press TAB to hide or show palettes)

Speed Up Your Work in Photoshop

Any project that you work on in Photoshop will have some repetition. Certain projects (like creating seamless pattern tiles) will have a lot of repetition. By following the next two steps, you should be able to speed up your work considerably.

First, learn some common key strokes. It will only take a few minutes, and I promise you won't regret it.

Here are the keystrokes that I use most often: (Substitute for CTRL on a Mac)

CTRL+A Select all

CTRL +C Copy

CTRL +V Paste

CTRL +S Save

CTRL +D Deselect

CTRL +Z Undo

CTRL +X Cut (useful for layers)

Another trick to help speed up your work is to edit the Command palette.

From the menu bar, click on Window/Palette/Show Command. The Command palette will pop up on your screen. You can have it visible at all times.

If you have commands imprinted on your brain from other programs, you can change Photoshop's Function key assignments to match what you already know. For example, F2 and F3 are zoom tools in CorelDraw, and if you wish, you can set up Photoshop the same way by editing the Command palette.

You can also assign a color to each Command, or a group of Commands on your palette. It's also possible to save and load different palettes.

You can set Commands for your favorite filters, too.

Marquee Options

Let’s explore the Marquee tools.

As you probably know, the marquee is usually used as a selection tool... and Photoshop is all about selections.

Load a sample file from the Tutorial folder (say, the picture called Fruit). Double-click on the Marquee tool in the toolbox, and explore the options.

The Shape option presents a few options. (Did you know you can choose Ellipse by Alt-clicking the Marquee tool in the toolbox too?) Single row and single column are useful for eliminating border lines on poorly cropped images.

Some of the Style options below it are available from the keyboard, too.

The rectangle can be constrained to a square via the “Constrained aspect ratio” option, or by simply creating a rectangular marquee with the Shift key depressed. The same goes for an oval, which is constrained to a circle with the Shift Key down. This is a common feature in many Mac and PC programs, so be sure to try it in other programs that have drawing tools, too.

The Fixed size option is handy when you need to create icons, buttons or other graphics of specific sizes.

Note also, the Feather option in this palette. You can feather your marquee selection this way, or as a separate operation, using the Select menu’s Feather... option.

Generally, you would want your selections to be anti-aliased, unless you wanted to limit the number of colors (as Web designers sometimes do), or deliberately wanted the jaggies.

More Marquee Techniques

Let’s make sure you are operating at peak efficiency with your selection techniques. Set the Marquee options style to “Normal” before proceeding.

Make a selection using a rectangular marquee while holding down the Alt key (note it grows from the middle out).
Make another selection partially overlapping the first, while holding down the Shift key.
Make another, partially overlapping the previous selection, while holding down the Alt key.
Using the rectangular marquee, make a rectangular selection around an object on a plain background. Select the Magic Wand tool. Click on a blank area inside the selected rectangle while holding the Alt key.
Note that the Magic Wand now subtracts from the existing selection, leaving the object selected.
Clicking while holding the Shift key allows the Magic Wand to add to an existing selection. Experiment.

While we’re discussing the Magic Wand, it’s worth reviewing its features, too. Double-click the Magic Wand tool in the Toolbox.

Magic Wand default settings

The most important option is the Tolerance setting. This setting dictates how several functions behave, including the Select menu’s Grow and Similar options. While 32 is a good default setting, small values of 0 to 5 are useful for selecting a very limited range of colors. For example, setting the Tolerance to 0 and choosing the white background of a word typed in anti-aliased text and then “inversing” the selection (Select:Inverse) will yield a selection that includes all the anti-aliased edges of your foreground object, allowing you to paste it into another image with maximum image quality.

This technique of making a selection (of, say, a background), then choosing Select:Inverse to yield everything but the selection (i.e., the foreground object) is one I use frequently. It’s worth experimenting with.

Resizing graphics

There are many cases where you will need to resize graphics.

Typically, you will paste an object into a picture and find that it is too small or too large.

Resizing is accomplished with the Scale tool in the Image menu. But did you know that some color modes handle resizing better than others?

Indexed color mode is increasingly common, now that many graphics are in the GIF mode for use on the World Wide Web. It is an 8-bit color mode that does not scale well. Also, many of Photoshop’s tools don’t function correctly in indexed color mode. All tools that support “soft edges” in RGB, CMYK or LAB color modes are impaired in Indexed color mode. You should switch to a true-color mode, do your editing, and then switch back.

If you scale an indexed color graphic without doing this, it introduces serious jaggies. To resize effectively (indeed, to perform any image-editing at all), convert it to true-color mode (RGB, CMYK, LAB) first, resize, and then convert it back.

Note that Photoshop’s Save As... option does not support GIF89a. If you want to save an indexed color file in this mode, you must use the GIF89a option in the Export... menu of Photoshop. (A GIF export filter is optionally available for earlier versions, but was not part of the standard program until version 3.0.5.)

Resizing Images

To resize your image, select Image/Image Size from the menu bar. Leave the Proportions checkbox checked. Photoshop will do the math for you and figure out how big the other dimension needs to be in order to retain the correct proportions for your image. Note that you must uncheck File Size to alter the actual number of pixels in your image. The Image Size command then changes the size of your image by anti-aliasing it.

To quickly preview how big your image will print on the currently selected page, hold the mouse button down in the lower-left corner of the document window. To see the number of channels, resolution and height and width dimensions, press Alt as you hold the mouse button down in this spot.

Changing the Document Size

To change the width and/or height of your image you need to use the Canvas Size function. What the Canvas Size does is to add pixels to your image, and it fills them with whatever background color you have selected. Canvas Size changes the size of your image by adding to it, leaving the original image unchanged. A Placement graphic allows you to position your document in the center, or in any corner of the new Canvas. An alert will warn you if the new size will cause clipping of the original image. Sometimes, you will want to trim a few pixels this way.

Getting the Right Cut - Cropping to a Specific Size

This is another resizing tip. There will be times that you want to use part of a larger image, and you need your new image to be a certain size.

Let's say you're creating a series of images that need to be the same size, 75 x 175 pixels.

1. Double-click on the selection tool, which will open the Marquee Options Palette.

2. Change the Style from Normal to Fixed Size. Enter 75 for the width and 175 pixels for the height. Now, when you click the selection tool on your image, the area within the selection will be 75 x 175 pixels. To reposition the selection without moving the image within the selection area, hold down the Ctrl and Alt keys, and either drag or nudge the selection into position. (You can nudge the selection one pixel at a time by using the arrow keys on the keypad). When you've achieved the correct placement, select Edit/Crop.

How Big is that Selection?

Most drawing and DTP programs have guidelines and rulers that you use for measurement. Photoshop doesn't exactly use guidelines, but you can use your selection tool as a measuring device.

Let's say that you need to know how many pixels are between two lines of type, or how much area the important part of an image takes up. Use the rectangular selection tool to select the area you want to measure.

Then, from the menu bar select Window/Palettes/Show Info. The last measurement on the palette will give you the dimensions of the selection you have created.

DOs

Do use keyboard shortcuts to access functions you use frequently. There are too many to mention here, but they are all listed on the Quick Reference card that comes with the program.

A few for common tools in the toolbox:

Q for Quickmask mode
W for Wand
E for Eraser
R for Focus tool (R toggles blur/sharpen tool)
T for Pen Tool
Y for Text tool (hey, I didn’t invent the key equivalents!)
U for the smudge tool
I for the Eye Dropper
O for Dodge/Burn/Sponge (press O repeatedly to switch between them)
P for Pencil
A for Airbrush
S for Rubber Stamp
D for Default colors (black and white)
F for file/menu hide
G for Gradient
H for Hand
K for Paint bucket
L for Lasso
Z for Zoom
X for Exchange foreground/background
C for Crop
V for move tool
B for Brush
N for Line
M for Marquee

The CTRL key and the number keys will select channels, and the number keys alone will set opacity values (in 10% increments) in the airbrush and paintbrush tools.

I use the F5 key to display the brush palette frequently, too.

DO use the Variations command to colorize pictures – it’s incredibly easy!

Other Important keyboard shortcuts:

CTRL -D to Drop the selection

CTRL -H to toggle “hide selection.”

Tab: hides all tools and palettes

CTRL -spacebar: zoom in

Alt-spacebar: (or CTRL -Alt-spacebar, if you prefer): zoom out

Spacebar: grabber hand

DON'Ts

Don't leave extra channels after you are sure you are finished with them. They significantly increase the size of your file, and slow things down. Delete them using the Channels palette’s trash bin.

Don’t resize objects in Indexed color mode.

Don’t use Brightness/Contrast to brighten a picture. Use Levels (or Curves, if you are going for maximum control) instead. Brightness is a linear adjustment; it is destructive to gray scales. Levels is a gamma-type control, that “pins” black and white points at set positions and adjusts the points in-between as if they are on a curve.

Don’t apply Dust and Scratches filter to areas with fine or important detail. Lasso around them.

Don’t use Sharpen to sharpen a photo - use Unsharp Mask instead.

Don't worry too much if you have trouble taming the pen tool -- those Bezier curves take practice!

Exploring Advanced Configuration Options

1) Launch the program. Photoshop will load any plug-in filters that are in its defined plug-ins folder, and will open to a blank document page. On a Mac, you’ll see the Mac desktop; on a PC, it puts up a gray backdrop.

(If you need to install the program or configure it, see the Installation and Configuration information in Appendix A.)

2) Using the mouse, select the File menu’s Preferences option and select General.

Here are a few important settings you might want to change.

1) The Tool Cursors option for Painting Tools is definitely worth exploring. Setting it to Brush Size allows you to see a representation of your actual brush dimensions when you paint with any of the brush tools (airbrush, paintbrush, rubber stamp, etc.). This is very handy. Remember, too, that depressing the Caps Lock key will give you a precise “cross hair” in Standard or Brush Size modes.

2) Clicking the More... button displays a few more interesting options. If your graphics are destined for the World Wide Web, you should turn off all the Image previews, as this information is not uploaded or needed in Web graphics.

I have seldom found it necessary to change the other settings in these dialogs. Click OK to close the dialog(s)

Other Configuration options

Photoshop requires between three and five times the RAM as your largest image. If it runs out of RAM, it uses your scratch disk(s) as temporary storage. Setting up your scratch disks is important.

Open the File:Preferences>Plug-ins and Scratch Disks

1) Set your primary scratch disk to be your fastest hard drive.

2) set the secondary scratch disk to be your largest hard drive.

If you generally work in pixels, as web designers and multimedia authors often do, you can set the Units preferences to pixels. Paper-oriented designers can choose between inches, points, picas or centimeters.

Creative Possibilities

Think of an advertisement or picture you think the others in the class might have see, that might have been created with Photoshop. Now try and think of a project you’d like to work on that might be possible in Photoshop.

In addition to its print-oriented fame, Photoshop is gaining a dedicated following among those who create graphics for the World Wide Web. Indeed, Photoshop is an excellent choice as a Web graphics tool. In fact, I might go as far as to suggest that Adobe Photoshop is probably the best tool for the creation of bitmapped graphics for the Web. It's certainly one of the most popular. And, surprise, surprise: you can download a free (save-disabled) demo version of Photoshop, too, at its Web site (http://www.adobe.com/). A demo CD of other Adobe applications is available from Adobe for a nominal charge.

To capture a screen dump from any program (including “save-disabled’ demo versions) on a PC, just press PRINT SCREEN to copy the image to the Clipboard. (Similarly, press -Shift-3 on a Mac. This yields a PICT file on the Mac hard drive’s root level.)

The process to save a file from the demo version of Photoshop is identical to that of Fractal Painter and other useful demo versions, with only one exception: you can hide the Photoshop menubar and window borders by clicking the icon in the extreme bottom-right of the toolbox (you'll have to press the F key or use the bottom-left icon to bring them back!). You can now hide the toolbox and palettes by pressing the TAB key. It makes PRINT SCREEN dumps of Photoshop images particularly easy to work with. You might not need to crop the images at all. To return the toolbar after you've dumped the screen, press TAB again.

The full version of Photoshop is, of course, highly recommended and adds a bevy of useful features, including direct GIF89a and JPEG support. The full version also permits you to save alpha channels and layers -- both functions that are, of course, unavailable in the save-disabled Tryout version.

Tech Article

IT Library