Meeting 6

Quando il gioco diventa duro, i duri cominciano a giocare

Topics: Class Prep#2 (perspective), perspective adjustment, introduction to Layers, creating drop shadows using layers, creating drop shadows within photos.

Files needed from the server:

Go over Class Prep submissions, then review steps below.

Perspective adjustment
Even if you have a level horizon in a picture, the act of tilting a camera upwards or downwards will introduce perspective convergence into the picture. A common example occurs when you tilt a camera upwards to include the top of a tall building - the picture of the building has converging vertical lines and the building looks smaller at the top than the bottom.

In the past, view cameras or specialty architecture lenses (PC lenses) were necessary to overcome this fundamental physical principal, but Photoshop makes such corrections available now for everybody.

Open fake building.tif for perspective changes.

Select>All

Edit>Transform>Distort - (it has the advantage of more adjustments than the one called Perspective) Once the vertical lines are parallel, double click inside the picture to apply the adjustments. Crop after the adjustments are made to remove the non-picture stuff that results.

NOTE: Vertical guidelines can be dragged from the left ruler to aid your assessment. Rulers must be turned-on to do this. (To display rulers, select View>Rulers (or type Command-R).

If the building has all the vertical lines parallel to each other but it is merely tilted, choose Select>All, then use the Edit>Transform>Rotate command. Click and drag on the corner handles to rotate the vertical lines upright. Double click inside the picture to apply the changes. Use this only if necessary.

With most perspective adjustments, making the vertical lines of the building appear straight-up-and-down is usually sufficient to have the picture appear normal to the eye. However, one pitfall for beginners is to accidentally stretch or squash the picture making it look like something viewed in a fun-house mirror. Keep you eye on known geometric shapes like circles and squares to aid adjustments. Making the top and bottom adjustments equal but opposite on each side helps maintain the proper proportions too.

IMPORTANT TIP: If the top and bottom adjustments are truly equal and opposite, then the midpoint square on the left and right edges of the Distort selection should still lie on the picture's edges.

To see what's possible, view an assembly of four smaller images corrected for perspective (and for uneven lighting) that was created for a textbook illustration. The file Perspective_assy.pdf available in Exercises 1 shows how several photographs are assembled into one image. The file is also available over the web. Perspective_assy.pdf (138k)

Back in 2005, Photoshop CS2 included a new Lens Correction filter (starting in CC 2015, it's found under Filter>Lens Correction, Custom tab) which can also be used to correct perspective problems and to make horizons level. I find its use to be a bit more complicated than Edit>Transform>Distort, although some of the other adjustments can be handy if there is barrel or pincushion distortion, chromatic aberration, or vignetting that needs to be corrected.

Layers
Start the exercise by resetting all tools to their defaults. To reset tools and their presets, click the tool's icon on the upper left of the Options Bar, then click the little gear icon, and finally choose "Reset All Tools". Then follow the steps again, and this time choose "Reset Tool Presets..." This reinstates most default tool settings.

To begin, create a blank default size RGB file, with a white background. Create marks of one color on the background, add a layer using either Layer>New>Layer menu command or by clicking the Create a New Layer icon (looks like a turned-up page) in the Layers Palette. On the new layer, paint marks using a different color.

Use the Move tool (shortcut  is V) to move the upper layer around to see how layers are independent from each other and can be manipulated individually.

Change the order of individual layers by dragging them up or down in position in the Layers palette.

Hide the contents of a layer by clicking on the eye icon on the left of the layer in the Layers palette. Clicking the icon again returns the layer to visibility.

Lock two or more layers together to move them in "formation" by shift-clicking the additional layers and then clicking the little link icon at the bottom of the Layers palette. Clicking the link again, unlocks them from each other.

Use Image>Adjustments>Levels (or Curves, or whatever...) to see how these commands affect only one layer at a time. The current layer will have a different video tone superimposed over the layer  name. (Multi-layer document changes can be made using Adjustment Layers to be discussed later.)

Experiment with layer transparency, and with layer modes.
 

DROP SHADOWS
Create drop shadows that follow the internal contours of a line-art file:

Open eagle54.tif (Exercises 2).

Convert to grayscale (why this is necessary?)

Click the magic wand tool, select anti-aliased OFF in the Options Bar. Generally, anti-aliased is turned OFF when working with line-art images like eagle54.tif, and is turned ON for selecting parts of a photograph.

Select a black part of the image with the magic wand. (Click on something black)

Select>Similar to select the rest of the black image

Layer>New>Layer via Copy (or press Command+J)

Name new layer to identify it if desired -- double click on the layer name (it's probably named Layer 1 by default) in Layers Palette.

Hide the new top layer from view (clicking on the little eye icon beside the layer thumbnail)

Choose bottom layer in the Layers Palette by clicking on the layer name

If there are any selection marquees (marching ants) still active, choose Select>Deselect.

Image>Adjustments>Levels, and move the bottom black slider to a new position under light gray

Gaussian blur 3.2 pixels (Filter>Blur>Gaussian Blur)

Make the top layer visible again (click its eye icon)

Choose the top layer (Click on the name of the top layer in Layers Palette to make it the active layer)

Move top layer to offset shadows from image using the Move tool (or type a "V" as a shortcut to select the Move tool)

Flatten image (in Layers Palette, click the upper right arrow, choose Flatten Image from list).
 

Overall drop shadows on rectangular pictures
Steps for a simple way to make custom drop shadows on pictures. This is the most common type of drop shadow. It is seen on countless web sites and in numerous ads.

Open stella_and_sara.tif (in Exercises 4)

Select>All, or use the keyboard shortcut Command-A.

Layer>New>Layer Via Copy (or type Command-J).

Choose the background layer once again by clicking on the layer name in the Layers palette.

Make the top layer invisible by clicking on the eye icon for that layer in the Layers Palette.

Click on a light to medium gray color in the Swatches Palette and make it the foreground color.

Edit>Fill, and choose Foreground Color for contents.

Ensure that White is the background color before performing the next step (keyboard shortcut: type "d" to get the default colors).

Image>Canvas size, add ½ inch border all around by adding 1" to overall measurements (be sure bottom layer is the selected layer).

Make top layer visible again by clicking to display the eye icon in Layers palette.

Filter>Blur>Gaussian blur bottom layer. About 7 pixels blur works with this image.

Use the Move tool (v) to offset the upper picture to allow the shadow to show.

Note: When cropping pictures with a drop shadow, allow plenty of room past the shadow to allow it to fade to pure white. It may look white to the eye, but may still be fading out. Otherwise, it will have a sharp edge at the shadow when placed against a web page background, or when printed on white paper. Avoid this cut-edge look.

For those going further into web design, additional suggestions on file/layer construction, naming, saving, and a host of other things can be found, often in humorous terms, at Photoshop Etiquette: http://photoshopetiquette.com

Optional: Textured Picture Mat
Make a textured top layer to vignette an underlying  photo:

Open Musicians.tif (Exercises 1)

Duplicate layer by dragging the background layer to the New Layer icon in the Layers Palette.

Rename the top layer by double clicking on the layer's name. Call it "Overmat".

Default colors to black and white (Press the d key or click on the tiny default color icons in the Tool Box).

Filter> Render> Clouds

Filter> Stylize> Emboss -- adjust parameters to suite (makes the new layer textured like parchment or like leatherette.)

Try using the eraser tool to remove part of top layer. This will prove to be clumsy. TIP: If you don't see the size of the brush you are using to erase part of the image, change the brushes preferences (Photoshop>Preferences).

Edit>Undo

Use the elliptical marquee to select an area for deletion to show what's underneath and how hard it is to see where the "crop" is to be made. Press the keyboard's Delete key to remove the selected area and judge how accurately your selection was placed.

Edit>Undo

Now make the top layer about 60% opaque to see elliptical "crop" area underneath. The opacity can be changed by using the slider adjustment in the Layers palette.  Crop by pressing the delete key. Notice the hard edges made by the selection.

undo again

Now feather selection area (Select>Modify>Feather and use about 15 pixels) Press the delete key on the keyboard to see soft edges.

Change Opacity in the Layers palette back to 100% for the Overmat layer.

Note: There are two places where feathering a selection can be done. The amount of feather can be set in both the Marquee Options bar (which applies the feather automatically each time you use the Marquee tool) and through the Select menu   (Select>Modify>Feather) which modifies the selection after it has been made and is the choice that I most often use.

Crop the image tightly for appearance and to save file space, change the file to RGB mode (Image>Mode>RGB Color), and colorize the textured mat using Image>Adjustments>Levels. Change individual color channels in Levels to colorize the  musicians layer. Generally, to make a sepia color (orangish), add red and reduce blue by moving the gray sliders in the Red and Blue channels. Click OK.

Try using the Edit>Fade command. It will fade or reduce the last adjustment for the picture. For example, if you didn't like the color you selected for the layer, the Edit>Fade adjustment will reduce the amount of color and move it back toward grayscale. This command works for reduce the effects of many different adjustments that you make to a picture.

TIP: To use the same adjustments on other layers or pictures, click the little dialog button in the Levels dialog box and Save the adjustment to your desktop. After you apply the adjustment by clicking OK, then click on the next layer, click the dialog button in Levels again, and Load the setting you just saved.

Another way to colorize a grayscale picture is to use Image>Adjustments>Hue/Saturation. Check Colorize in the dialog box, and move the Hue slider to get the color you want, and adjust the Saturation slider to determine how much of the hue you want. Adjustments made using Hue/Saturation can also be saved as a Preset file for reuse.

Drop shadows again
One type of shadow is seen in composited commercial photography when an item or person is added to a scene. It's important that the lighting (and shadow!) match the rest. This method makes use of the new object's shape to create the shadow. We'll fake the addition of an object by selecting one object in Clocks1.tif from exercises 1. The selected clock will be duplicated twice onto new layers, and the middle layer will be filled with black, blurred, and set at ~50% opacity for this picture to match the rest of the scene. There are some tricks to doing this as you will see in the following steps.

Clock shadows step by step
Open clocks1.tif image from Exercises 1.

Select the low, rounded clock with the lasso tool. (Remember to use the shift and the option key to add or subtract from the selection.) In this exercise, it might be a good idea to select a little bit more than actually needed. The excess can be fixed later with careful edge erasing (or with Masking for which steps are given in a future lecture).

Layer>New>Layer Via Copy

Name the new layer "Shadow" (Double click on layer in the Layers palette to rename it)

Duplicate the layer that was just created to make a third layer. (Drag the layer to the New Layer icon in the Layers Palette, or choose Duplicate Layer in the layer pop-out menu).  Rename the new layer "Top Clock".

Hide the Top Clock layer containing the clock by clicking on the eye icon on that layer in the Layers Palette.

Choose the middle layer (Shadow) and check the "Lock Transparent Pixels" icon. The icon for locking transparent pixels is the small checkerboard button in the Layers palette. Using it prevents the transparent pixels on this layer from being filled or otherwise changed.

Fill with black (Edit>Fill>choose Black for contents). Only the clock shape should be filled with black at this point, not the whole rectangle. Note that this fill is different from the  shadow-gray we have used for shadows in the past - this will be fixed shortly. It's necessary for the shadow to look better when dropped over other objects in the picture.

Uncheck "Lock Transparent Pixels"

Gaussian blur (choose 7 or 8 pixels for this picture)

Change opacity of Shadow layer to ~30%

Make the top layer visible and trim around the edges of the top clock if necessary for realism.

Select the Shadow layer in the Layers palette.

Choose the Move tool and move the Shadow layer into desired position.

Done.

This animated GIF file shows the appearance before and after the shadow is added.

Straighten the leaning vertical lines in the original photo, tone and crop. It should look similar to this when done.		Make a drop shadow under any photo of yours. This photo © 2009 William Schneider

---