Photoshop CS6 Section02(3)inlandempirecycling.com/College/rcc/CIS_56A/Photoshop_CS...copy the image into the Photoshop file as a new layer. Name the layer the same name as the original

Section 2 Adobe Photoshop CS6 for Web Design Spring 2014

J. Watrous Page 1 of 30 Version 5

Adobe Photoshop CS6 Notes for Web Design

By Dr. Jim Watrous

Objectives –

Create compositions with different placements, styles, and visibility

Learn to create masks to select what is visible and what is not visible

Learn to select parts of images for a composition

Learn to refine the edges of the images to remove halo effects

Learn to use layer blending modes and layer effects

Learn to create different arrangements, layouts, styles, and layer visibility to create different layer comps



In General

In Section 2 Notes we are going to create a new image composition from parts of other images in the Picture folder provided with this section. The image composition consists of a picture frame with two different background images and three different foreground images. The picture only occupies a portion of the canvas created when you created a new Photoshop file. The foreground image is a partial image obtained by using selection procedures. Examples are selecting a picture of a person or persons from one image and placing that selected image into another image. The background image is a general background image such as a sunset, a beach scene, a pool area, forest area, or whatever image in which you are placing persons, objects, cars, and so forth into this background image to come up with a new picture constructed of other images. Note that all images come from the Gallery 1 set of images. You can download this Gallery of pictures from my Web site for this class. Here is an example of one Photoshop file with two composition folders in it. Below is a display of the original images and their use in the Photoshop files.

One example of a finished composition

What to turn in on your CD-R is displayed in Bridge & shown here as an example of the originals included with their Photoshop file composites.



The selected .jpg’s and created .psd files shown in Adobe Bridge CS6

Please note that all work is saved in the LastName_FirstName_Assignment02 folder. This folder includes all original picture files selected (whether used or not) and the Photoshop file(s).



Getting Started Set all preferences as you did in Section 01 Notes. We will always use those preferences. Now, open a new Photoshop file by selecting File>New. When the New File window opens, enter 1820 pixels for the width, 1300 pixels for the height, 260 ppi for the resolution and choose a white background.

Two of the convenient shortcuts for filling a layer or selection with color are 1) Alt + Backspace key to fill with the foreground color in the tool box and 2) Ctrl + Backspace key to fill with the background color in the tool box. Another shortcut is the X key on the keyboard which swops the background color with the foreground color. The D key sets the foreground and background colors in the toolbox to the default of black and white.

Select the background layer. Click on the foreground color box in the tool box to bring up the color picker panel. Set the RGB colors to (R:255, G:128, B: 64) (as shown in red circle), and click the OK button.



Hold down the Alt key and press the Backspace key to fill the background layer with the foreground color. If the rulers are not displayed, then go to the View menu and select rulers or hold the Ctrl key and press the R key (Ctrl + R) to bring up the rulers. Return to the View menu and make sure that there is a check mark in front of the word Snap. If you have modified your preferences as shown in section 01 notes, then the rulers will display positions in pixels and the Shift key will not be needed to change the tools that are hidden below the current displayed tool in the toolbox. If for any given tool in the tool box that contains a small arrow in the lower portion of that tool, then there are tools stacked under that tool. Most all tools are selected by pressing a key on the keyboard. When that tool has a stack of tools under it, then repeated pressing of that letter changes the order in the stack of tools so that you can get to the next tool under the present tool.

In the Layers Palette, press the group/folder button to create a group and name it Picture. Next, press the add layer button three times. Name the top layer Frame, the middle layer Image content and the bottom layer of this group Picture bkgd.

The first step is to use the Rule of Third grid and select the picture frame layer for the placement of a picture frame for the new picture we are creating. The Rule of Thirds type Gris can be turned on and off with the use of the Ctrl key + ‘ key. We are using the Rectangular Marquee tool to create a rectangular area, which will become the frame for the picture. Place the marquee tool four grid lines from the left and four grid lines from the top – Guides (4, 4). Click and drag to guides (8, 8) and release. Press the D key on the Keyboard and then hold the Alt key and press the Backspace key or Alt + Backspace. Deselect the selection by holding the Ctrl + pressing the D key or Ctrl + D. Zoom in so that the black rectangle fills most of the screen and make sure that the Info palette is pulled out for use. Place your rectangular marquee tool at (880, 640). Click and drag to (1550, 1085) and then release. Press the delete key to delete the interior black region to create a black frame. Deselect the selection marquee with Ctrl + D. Name the layer Picture Frame.

Now select the Picture bkgd layer. Next, use Bridge to select a background image of your choice from Gallery 1 set of images. The image I chose was ks13637.jpg. While in Bridge, double click on the image to open in Photoshop. Duplicate background image layer with Ctrl + J shortcut key. Next, select this duplicate layer. Next, hold the Ctrl key and click on the Thumbnail inside the actual layer. This will create a rectangular marquee around the entire picture you chose. Copy this image using the Ctrl + C shortcut key. Return to your Photoshop composition file and make sure that your picture bkgd layer is selected. Now, use the Ctrl + V shortcut key to paste into the Picture bkgd layer. In most cases you will have to resize this image to make sure that it is larger than the frame. If it is larger than the frame, then you do not need to resize it. To resize this image use the Free Transform tool found in the edit menu or use the Ctrl + T shortcut key to activate this tool. The tool has adjustment handles (they are square) located at each corner and midway on each side. If you press the Shift key while dragging the corners, then the image retains its proportionality as you make it larger or smaller. If you press the Alt key while pressing the Shift key, the resizing uses the center of the image rather than the opposite corner to make it larger or smaller. This is worth exploring by practicing the variation of using the Shift key and/or the Alt key. Whether the image was larger than



the frame or you had to make it larger than the frame, we need to make sure that the image does not display outside to the frame. However, we do not want to delete any part of the image. Next, return to the Photoshop image of the chosen background and close this image without saving.

Creating Masks

Once the original Photoshop file of the background image is closed, we will be back in our composition Photoshop file. To make sure that the image does not display outside the frame, we will use a layer mask to block (prevent) the image from displaying outside the frame. However the entire image is still available if needed. To create this mask, we follow the next set of steps. First, select the Frame layer and then the Magic Wand tool in the tool box by pressing the W key twice. With the Magic Wand tool click the region outside of the frame layer. Next, reverse the selection by using Ctrl + Shift + I shortcut key. This will select the frame and everything inside of the frame. Now, select the Picture bkgd layer. At the bottom of the Layer Palette click the Add Layer Mask button. All parts of the background image are blocked outside of the picture frame. This converts our selection into a window in which the white color part of the Mask

Reveals the image and the black color Conceals the image. You can always get the selection to appear again by Ctrl click on the mask icon thumbnail in that layer. By default the mask and the image are locked together as indicated by the small vertical chain icon between the image thumbnail and mask thumbnail. If you click on this chain icon, then the mask and the image are not linked. This allows you to reposition the image or the mask with the Move tool depending on which Thumbnail you select in that layer. There is more to learn about Layer Masks. However, we will cover layer masks in different stages in this and other section notes. The image below is the result of our mask.



Adding Image Content to our Picture

Now select the background Image content layer. Next, use Bridge to select a person image of your choice from Gallery 1 set of images. The image I chose was 29000009124.jpg of a child. While in Bridge, double click on the image to open in Photoshop. In Photoshop click the Windows button at

the top and then find the Arrange command. Inside the second menu of the Arrange command select 2-up vertically. This will display the original Photoshop file and the new image just opened in a side by side format. Next, select the image file and chose the move tool or use the shortcut V key to choose the move tool. With the move tool click on the image and drag it into the Photoshop file. Do

Windows

Arrange2‐up Vertically



not release the mouse button. As you drag the image into the Photoshop file, continue dragging the move tool until it reaches the Photoshop title bar. Once it is over the title bar, the text will become white text. Now move the image into the Photoshop layer area and release the mouse. This will copy the image into the Photoshop file as a new layer. Name the layer the same name as the original image name. In most cases you will have to resize this image to make sure that it is smaller than the inside of the frame. If it is smaller than inside the frame, then you need to resize it larger as needed. The resizing of this image (larger or smaller) can be done by using the Free Transform tool that is in the Edit menu, or use the Ctrl + T shortcut key to activate this tool. Resize the child to fit well inside the frame. Return to the original Photoshop image of the child. Close this image without saving. For the second image we are going to use the same procedure for adding a second image into our composition.

Return to Bridge to select another person image from the Gallery 1 group of images. I chose image 29000009029.jpg of another child. While still in Bridge double click the image to open in Photoshop. In Photoshop select the Window > Arrange > 2-up vertically as done above. This creates the following view in Photoshop of two files.

Select the move tool in the tool box by pressing the V key. Now, place the move tool inside the image of the second child and drag it across the boundaries of the two Photoshop files into the composition Photoshop file and release. Return to the original image file of the child and close it without saving. Now, name the new layer 29000009029.jpg. Once again, we will need to resize this second child image with the Free transform tool by using the Ctrl + T. Resize it to fit well inside the



inside of the frame. The Free-Transform tool can also be used to rotate the image in a counter clockwise direction, so that the child is more vertical like the first child. The following image of Photoshop illustrates the sizes I created and the fact that I put the Image content layer on top of the Image content 2 layer.

Our next task is to hide the background portion of the children’s images.

Creating selections with the Quick Select tool

In order to hide the background portion of the children images we need to select only each child in its image with the Quick selection tool. Once we have the selection of the child, we can Add a Layer Mask to hide the background portion of the child’s image.

First, select the Image content layer. Press the W key to get the Quick select tool in the tool box. This brings up a circle with a plus sign in the middle of the circle. This tool functions like a brush tool and if you look at the Tool Option Bar. The down arrow next to the Brush tool on the Option bar brings up a window that let you resize it and change the edge of the tool from hard to soft. Make sure that is a 100% hard and a size of 30 pixels. Leave the other adjustments as they are. The image of Photoshop below demonstrates the Quick select tool and the choices.



Next, turn off all layers except the Image content layer for 29000009124.jpg. Hold down the Space bar and the Ctrl key to zoom to 100 % with the child in the center of our working area. Remember that the Space bar gives us the Hand tool. Space bar + Ctrl key gives us the Zoom in tool (make image larger) and the Space bar + Alt key gives us the Zoom out tool (make image smaller). When you release these keys, you return to the tool you selected previously. In our case the Quick select tool. This procedure brings up the Hand tool and/or the Zoom tool on the fly without ever selecting them in the Toolbox. Note that the use of the Spacebar, Spacebar + Ctrl, and Spacebar + Alt key combinations provide the Hand tool, Zoom-In tool, and Zoom-Out tool on-the-fly (temporary for the moment and when released all of these keys you are returned to the tool selected before the use of these on-the-fly tool modifications.

With the Quick select tool, start by painting over the face and blanket to create a selection of them. Make sure you do not paint over the background portion of the image. Making several strokes is the best way to use this tool. You may get a portion of the background image. If you do, then hold down the Alt key and the quick select tool subtracts from the selection to unselect that part of the image that you do not want to include in the selection.



In this case a portion of the beach got selected in the lower part of the image. After holding down the Alt key and selecting that portion of the beach in the lower right corner of the image, we get the following result.

Add a Layer mask by clicking the Add Layer Mask button at the bottom of the Layer Palette. When this is done, all of the background portion of the image is hidden as shown above in the right.

We are now going to select the Image content 2 layer and repeat these same steps to get the following result.



Zoom out and turn on the Image content layer so that both children can be seen. The result is shown below.

Now turn the frame layer on to see if they fit inside the frame. When we do, both images extend below the frame as shown in the image below.



To hide those portions of the images below the frame, we need to improve our layer mask on both images. Starting with the Image content layer (that is select it), select the Rectangular Marquee tool by pressing the M key. Start dragging from the left of the two images and just above the bottom of the frame to the lower right portion of the right child. Make sure you are to the right of the right child.

Make sure that the default colors are selected in the tool box by pressing the D key. In the Image content layer make sure to select the mask thumbnail. Hold down the Alt key and press the Backspace key to fill the selected mask of the Image content layer with the color black. Black color conceals an image in the mask and white color reveals the image in the mask. Now, select the Image content 2 layer and press Alt + Backspace key. This now hides that portion of the second child below the frame. Press the Ctrl + D to deselect the selection marquee. Turn the Picture bkgd and the orange Background layer on and collapse the Picture group folder. The Image below shows the result of our composition up to this point.

Marquee Outline



Select the type tool by pressing the T key. Put the type tool at the Guides (1, 2) and Click. Set the font to Arial, the style to Bold and the size to 30 pts. Type: Two Young Children then press the enter key and type & a Starry Night. Next, press the Enter key in the numeric key pad area (this Enter key is in the lower right of the keyboard).



You can also click the new type layer in the Layer Palette or click on the check markin the option bar at the far right (see the red circle above).

With the type layer still selected, click the fx button at the bottom of the Layer Palette to bring up a menu of style effect and choose Outer Glow. In the elements section, set the Technique to precise, the Spread to 40% and the Size to 30 px. Click the OK button to set this style effect on the text title.



Next, expand the picture group and select the Frame layer. Once again, click the style effect button at the bottom of the Layer Palette to bring up the Effect menu. Select Bevel & Emboss. Move the Layer Style window to a location that allow you to see most of the frame. Do the following, set: Style to Inner Bevel; Technique to Smooth; Depth to 100%; Direction to Up; Size to 25 px; and Soften to 0. Leave all other settings as they appear.

Click on the Color Overlay words on the left side to add another effect. Select the red color box to bring up the color picker and choose a good gold color.

Click the OK button to set this color overlay. Click the OK button to set these two effects on the frame layer. Select the type layer and drag it just inside the Picture Group/Folder. The result is shown below.



Before closing the Picture group, select the Frame layer. Next, hold the shift key down and select all the layers in this group. At the bottom of the Layers panel on the left side is a Chain Icon that locks layers together as if they were one layer. The advantage of this option is to allow you to select any one of these four layers and then use the Move Tool in the Toolbox to reposition the location of the picture group to another area of the canvas. The need for this step will become clear when the last part of this section 2 notes is covered below.

The next task is to create a second composition similar to the first composition. Click the “Add new layer group” button to add another group and name it Picture 2. Repeat all of the steps from above for creating this new composition using the same Rule of Thirds guide lines. Make your own image choices from the same image folder for this picture background and people foreground. Add a frame



layer. Add an appropriate Type layer with text of your choice. Finally, add Type layer effects and Frame layer effects of your own choice. The following figure is one example. However, you are encouraged to make your own choices.

For your Picture 2 composition, select the frame layer, people layer and picture background layer(s) while holding down the Shift key. Click of Lock layers button at the bottom left side of the Layers panel.

The choices I made were the following images: People – 29000006688.jpg; Picture bkgd A – 11002003202.jpg; and Picture bkgd B – 10107000409.jpg. For my text I chose the word Friends.

I created the frame using a different technique than the one in the Picture group done above. This technique uses a rectangular marquee as was done in the first picture group.



Next, go to Edit > Stroke and use the settings displayed in the figure below.

Settings are: Width: 50 px; Color: Black; and Location: Inside. Now, click the OK button.



The following Layer Effects were used on the Type layer for Friends: Drop Shadow; Outer Glow; Bevel & Emboss; and Color Overlay. The result is:

The following figures show the actual settings:

Adjustments made:

Distance – 18 px;

Spread – 20 %; & Size –

10 px



Only the Spread and

Size were changed.

Adjustments:

Inner Bevel; Smooth;

Size – 5 px



The following Layer Effects were used for the Frame layer: Drop Shadow; Bevel & Emboss; and Pattern Overlay. The result is shown in the following figure.

The following figures show the actual settings:

Color is a shade of

Silver.

Drop Show settings are:

Distance: 14 px

Spread: 13 %

Size: 32 px



Used the default

settings

Click on down arrow to display

the patterns that are currently

loaded.

Click the right arrow to bring up

more options that include

additional pattern groups like

Artist surfaces, Color Paper, etc

Additional patterns can

be downloaded from

Adobe as well as other

sources.



For the gallery of loaded patterns, click on each group of patterns and Append to the existing patterns so that you load all available patterns originally shipped with the Adobe Suite. The wood pattern selected is in this large set of patterns. At this stage you have two picture folders. In the Picture folder you have a title with effects, a frame with effects, two separate children images and one background image. In the authors Picture 2 folder he has a title with different effects, a frame with different effects, one image of two young men, and two different background images. Also note that the author added a frame around the entire layer (canvas).

Layer Comps

The last part of this section 2 set of notes is to learn how to use Layers Comps. Collapse your own Picture 2 Composition group and turning it off and turn on the first Picture Composition group, as indicated by the presents of an eyeball or the absence of the eyeball in a group layer. Select Windows > Layers Comp. to bring up this panel and the options available.

Select the Add New Layer Comp button (second button from the right as indicated by the lower red circle).

Layer Comp Menu

Layer Comp Panel

Three buttons: from right to left –

Delete, Add Layer Comp, Update Comp



Make sure that the Visibility, Position and Appearance boxes are all selected as indicated by the figure above. Note for each layer comp created, you can leave appropriate comments describing the nature of the layer comp. In the example above this layer comps is to be named Picture - Starry Nights 1, since that is part of the text title in Picture Group (First picture group).

Click the OK button to finish the creation of your first layer comp.

It is useful to turn off the guides while leaving their existence as part of the Photoshop file. Select View Menu > Snap to turn off snapping (no check mark in front of Snap). Select View > Show and verify that there is a check mark in front of Smart Guides. If there is not a check mark, then click this item to select it. Smart Guides can be very useful to align various elements and/or center any given element (image).



Next, press Ctrl + 0 to get full canvas view if the canvas is not already in this view. Select the frame layer and select the Move Tool in the Toolbox (or press the V key). Move the Frame to the center of the canvas. Select the Type layer. With the Move tool position the type layer below the picture and centered horizontally with the picture. Note as you move this type layer from left to right as a vertical

Note the Blue Vertical Line

‐ This represents a Smart

Guide to help you align the

text elements to center of

the picture.



blue line appears when the type layer is center with respect to the picture layer, as indicated by the blue line above.

Once you have completed the repositioning of the picture and Type layer, click the Add Layer Comp button to create another layer comp. Name this layer comp Picture - Starry Nights 2 and click the OK button



Next, move the type layer above the picture and create another Layer comp. Name this layer comp Picture - Starry Nights 3.

Note that I turned on the Outer Frame A layer before I made the third comp.

There are now three layer comps for Picture Group. There are left and right arrows at the bottom of the layer comp’s panel that will cycle through each of these 3 layer comps that have been created.



Next, turn Picture – Starry Nights group off and Picture 2 – Friends group on. Click the Add Layer Comp button to add another layer comp and name Picture 2 - Friends 1 as was done above. Next, turn sky bkgd off and reflecting water bkgd on. Create a new layer comp. Name it Picture 2 - Friends 2. The red circle indicates that the Sky layer is off.



Reposition everything a third time and create a sixth layer comp. Name it Picture 2 - Friends 3. Your Layer Comps palette (Panel) would look similar to the figure above.

Your layer comps may look different for Picture 2 Group than the ones displayed here, since I encouraged you to create your own version.

This completes the second assignment for Web Graphics Design.

Save your Photoshop file and place it in your Assignment Folder. Your assignment folder needs to be named LastName_FirstInitial_A02. Note the use of the Underscore Character which is the upper case minus sign character (sometimes referred to as a dash).

Documents

Photoshop CS6 Section02(3)inlandempirecycling.com/College/rcc/CIS_56A/Photoshop_CS...copy the image into the Photoshop file as a new layer. Name the layer the same name as the original