Photoshop: Web graphics

It is useful to be able to do some collage work in Photoshop as a way of digital 'sketching'.

Readings

pp 81-86;

pp. 138-140, Type graphics

On the Web

PhotoshopContest.com
Worth1000.com
Why does the Whitney Museum logo work so well as a web graphic?

Using Photoshop to edit/create digital images

Photoshop is probably the standard tool for dealing with photos and related graphics, both in print and web media. Some other software options to know about:

Paint Shop Pro is a much less expensive tool that runs on PC's, that allows for many similar manipulations,
MacroMedia Fireworks is optimized for web graphics, and offers many neat shortcuts,
Gimp is a free package that runs on Linux.
Picasa is free software from Google that lets you organize a collection of digital photographs and accomplish many routine photo editing tasks. Also allows you to post images to the web.

Web design settings for Photoshop

Go to "Preferences | Units & Rulers" and choose to show rulers and type in pixels rather than points.

Selection tools

The latest version of Photoshop has added two new selection tools

the magnetic lasso-- tries to find edges for you (based on contrast). You can finish up any lasso selection with a double-click.,
the quick selection tool-- lets you "paint" a part of the image you'd like to select.

You can also use...

the magic wand-- selects all the pixels adjoining, and within a specified color range of the pixel you click on.
the marquee-- make a rectangular or elliptical selection from your image.
the lasso-- lets you draw a line--freehand--around a selection.

Hold the (left) mouse button down on any Photoshop tool to show or select related tools.

Here's a photo of Ben and George W. to practice on...

The most important key combination in Photoshop is probably Ctrl-Z which means Undo!

Refine your selection

Once you've made an initial selection, you may wish to add to it, or subtract from your selection.

<shift>-select to add to the current selection.
<alt>-select to subtract,
or use the button menu at right to select add or subtract.

Use the Select menu to

Turn off your selection ("deselect"), or
Invert your selection: change selected pixels to unselected ones and vice versa, or
Modify the edges of your selection: Feather the edges before you copy your selection (to be pasted in to another image).

Choosing colors

Many tools use the foreground or background colors (at left, purple, and white respectively). Clicking on the foreground (or background) color box brings up a color picker that can be used to set colors. If you want a color that already exists in the image you're editing, select the eyedropper tool. Left-click on a color to select that color as the foreground color. Right-click to select as background color.

Using the paintbucket/gradient tool

Hold the mouse button down on the paint bucket/gradient tool to see both options. The paint bucket tool lets you fill part of your image with the currently selected foreground color. You'll fill pixels the same color as the one you click on (plus/minus the "tolerance" that you enter) with the foreground color.

One use of the gradient tool: You can create a picture with a transition from the foreground color to transparent by choosing the "foreground to transparent" option, and a linear gradient (see right). The transition between the two will happen from the point at which you press your mouse down till the place you let it go.

For tiling background images, you want to make sure the gradient is precisely up and down (or horizontal). Hold the shift key down to lock in the direction to precisely horizontal or vertical.

Using the text tool

Anti-aliasing is a technique for making diagonal lines, smooth curves, and similar objects that do not correspond very well to the rectangular pixel grid look less jagged by subtly varying the pixel colors near the boundaries.
Photoshop automatically places text in a new layer, which you may then move around and delete later at will.
To add shadows, or a "glow" around your lettering, or many other effects, click on your text layer and choose "Blend Options" from the layers menu.

Screen shots

PC: Hit the PrintScreen key to put a snapshot of the entire computer screen onto the clipboard.

Mac: Shift-Control-Apple-4 will turn the cursor into a cross-hair pointer, and you can drag to define a rectangle which ends up on the clipboard when you release your mouse.

With either one, you'll switch to Photoshop, select "File | New", accept the suggested dimensions, and then paste from the clipboard.

Layers window

You should be able to use the layers window to:

switch the active layer by clicking on the one you want,
re-arrange the stacking order by dragging layers,
show/hide a layer by clicking the eye,
change the opacity of a particular layer.
"unlock" the background layer by double-clicking it.