Assignment #2: Selection, layers and typefont

This is what your making

First make a new file 300 Pixels per Inch. 11 inches long by 8.5 inches high. Give it a name.

Remember File->New

Start by Downloading this picture (right Click on this text)

Now use the marquee tool to get the marching ants

First make a selection using the rectangular selection tool (see image above) and choose an area across the top you're planning on adding the title bar. With that selection made, create a new layer .
Call this layer title border. Open the colour picker (get it by clicking on two overlapping colour-squares - black and white by default - at the at bottom of the toolbar). In the hex entry for colour enter HEX:#4f002f.
In your layers panel select your title border layer. This should be empty, but you should see the rectangular marquee (looks like 'marching ants'). You will now fill this selection we made on the image.

Layers panel, blend modes and opacity

We want to see through this solid colour so there are a variety of ways we can go about doing this. We can either choose to select the blend-mode (which applies mathematical relationships between the layer chosen, and all layers underneath it)
or change the opacity -which simply allows a % of the current layer to be seen. We're going to do both. We'll choose Overlay as a blend-mode and change the opacity to 80%.

I'm a paragraph. Click here to add your own text and edit me. It's easy.

Layer select and modifying selections

Our next step is to adjust the border of our original title border. To do so we'll hover our mouse over the thumbnail (the small picture of the layer in the layers panel). By pressing and holding the Command button.
Notice that the icon changes slightly to look like this in the sunglasses examples below. When you CMND-click the thumbnail you make a selection based on the content of the layer you're currently on.
We are going to do this on our Title Border layer. This will re-select the title border and allow us to make an adjustment based on it.

After Command-clicking our Title Border thumbnail, notice how crisp the edge of the box is (image below far left). We are going to 'feather' the edge. This means that we will allow our fill colour to bleed out to nothing over a range of
pixels that we define. To do this we need to click on the rectangular marquee tool again. At the top, where all refinements for photoshop tools appear, we will click on 'Refine Edge' (image below center). What will happen is that
a dialogue box will appear. We want a 5 pixel Radius and 15px feather distance. This will allow us to fill our colour out over a distance of 15 pixels. We are going to Alt-Backspace again, and re-fill our new selection. This will result in
a 'bleed' at the edges of our original box that will be aesthetically pleasing (image below right)

From this

To this

Size adjusting using the select tool & adding layer styles

Next we're going to add a final layer of text to our project.

We will create a new type layer with Lift Tours using the default text settings we had last time (white colour, arial font, bold-italic, 40 point). It's really really small for this image. So, we'll resize it.

Rather than change the type size, we're going to select the right layer in the layers panel. Then we're going to hit 'V' (or click on the Move Tool on the toolbar - the one at the top that looks like a black arrow - seen at left). We will then either press Command-T or go to the top area for Photoshop where the tool options are, and click on 'Show Transform Tools'. Regardless of how we get it, we will now see a transform box around our text. Should we want to stretch it horizontally, or vertically, or scale size, or rotate the selection, we can do this by hovering our cursor around the edges of the selected region - in this case the text. We will go to the top and under W: we will enter 800%. Notice how the text stretches badly. We will now click on the link icon so that the vertical (H) aspect will also stretch. We could also achieve this by clicking on a corner and pulling the text to rescale (note: press shift while doing so to 'constrain proportions'). Entering values in the tool options area is a more exact way of doing things, but sometimes if you want to adjust something by feel, dragging it is a good option. You can also use your arrow keys to nudge your content for fine adjustments of positioning.

The overall result is a bit flat however. Let's spice it up with a layer style. To get layer styles simply double-click in the area to the right of any layer text identification. For example, we're going to pull Lift Tours out of the page a bit by adding a layer style called a drop-shadow. So, double click on the Lift Tours layer just to the right of its name. A menu will pop up and make sure you change the following settings.

layer_style.png

Of special note, make sure that you change the blend mode to Vivid Light. Click on the black colour. We want to make it the same default hex code we've used all along. Change the opacity to 64% and the angle to 130 degrees. Play with the distance, spread and size settings to see how your overall drop shadow is affected.

Layer styles are part of the bread and butter of design work. Play around with other options like shadows, glows, strokes and bevels to see how you can make the Lift Tours pop out at the viewer. In the end, I threw on a bit of bevel as well using the following settings:

Double click

Vectors and paths

There's still something missing from our project. To adhere to the principals of good design (our C.R.A.P. rules from grade 10 a MUST-read for you) -
In the end, we want some repetition of our theme of travel. To do so I'm going to include a plane shape vector. I could draw it by hand, but Photoshop has default paths that we can include in our project. To do so we'll create a new layer at the top (ctrl-shift-N) called plane. We'll now add a custom shape. We'll go to the top of the screen and choose a plane shape. To get the plane shape click on the tiny 'play button' beside the options for shapes.

We'll choose the Symbols option and we'll APPEND. This will give us the default shapes AND the symbols. Choose the airplane shape. Holding down shift (to constrain the proportions) go ahead and draw the shape of the plane into our project. The way a path works is it appears as a traced object on our stage until we do something with the path. Notice by clicking on the eyeball next to the plane layer the plane itself doesn't disappear? This is because it's a path. In our layers area, click on the tab called paths. Notice the layer here called Work Path? We want tocontrol click this thumbnail (to make a selection), then go back to our Layers panel by clicking on the Layers tab. I'll next fill our shape by alt-backspace. *Note in Photoshop CS5, the path is embedded as a mask and you'll need to click on your plane layer and choose "Rasterize Layer". Once filled I'm going to rotate the object by using our move tool (V) and grabbing a corner until the rotate icon pops up for the cursor. I rotated it, and moved it to where I wanted.

Drag its layer down so that it is behind everything (other then the picture and background).

adjust the blend mode to Colour the fill of the layer to 24% and add in an Inner Glow with the following settings. Multiply as a blend mode. Opacity 75%. Choose a green colour as the glow. This will allow us to see the image outline, but very little of the fill. We're done! This can now be used to slice up and create a web-page for Lift Tours.

You are to turn in the PSD of your work as well as a 250KB large JPG for evaluation.