Tutorial 4.1

Typography

Setting up your file

1. Create a new file (new document) in Adobe Photoshop starting with the Web / Web Most Common blank document preset.The document details should be set as follows – highlighted items differ from the preset default:
   • Width: 1366 pixels
   • Height: 768 Pixels 
   • Orientation: Landscape, Artboards (checkbox): Off
   • Resolution: 72 Pixels / Inch
   • Colour Mode: RGB Color, 8 bit
   • Background Contents: #004C9B (TMU Blue)
   • Colour Profile: Adobe RGB (1998)
     
   • Pixel Aspect Ratio: Square Pixels
2. Re-save the file as [ PP_Chptr04_Typography_Working.psd ]. 

Using the Type Tool

3. Set your colours to the default by clicking the Black/White swatch icon just above the colour swatches in the toolbar, or using the hotkey D. Click the two-sided arrow to switch the foreground and background colours (hotkey: X) so that White is now the foreground colour.
4. Activate the Horizontal Type Tool (hotkey: T). Click near the centre of the canvas to create a new text layer, set the text alignment to Centre Text and the Font Size to 75pt, and select a sans serif font (such as Arial, Helvetica or Trade Gothic). You can set these parameters either in the context bar that appears below the Lorem Ipsum text, or the top toolbar, or the Properties tab, or in the Paragraph and Character tabs).
5. Type Toronto Metropolitan to replace the Lorem Ipsum placeholder text that appeared when you clicked with the text tool. Click the Checkmark in the contextual toolbar at the top of the screen, or click anywhere else on the canvas with your cursor to exit the text editing mode. Once you’ve typed text into this layer and exited the editing action, the layer name will automatically update to the text that you typed.
6. With the Horizontal Type Tool still active, click an area below your previously entered text to create another text layer and type University – the text settings you set previously (size, alignment, font) should still be active so you do not have to set them again. Note: if you click too close to the previous text layer, you will re-edit the previously entered text rather than creating a new text layer.

Moving and Aligning Layers

7. Activate the Move tool (hotkey: V) and select both text layers in the Layers tab (click one, then shift-click the second to select them both). Note how the layers have a “T” icon, indicating that these are text layers – not pixel layers. Use the Align Horizontal Centres icon at the top of the screen (on the contextual toolbar) to centre-align the two layers of text to one another.
8. Still using the Move tool, move the text layers so that they comfortably close to each other vertically by selecting one layer in the layers tab, and then clicking and dragging it into position with your cursor. Hold the Shift key here so that you only move the layer vertically and do not misalign it horizontally while doing so.

Resizing Layers

9. Select the University text layer in the Layers tab. Still using the Move tool, ensure the Show Transform Controls is selected (checked on) on the contextual tool bar at the top. Holding the Alt / Option key, drag the lower right handle of the Transform Control box out until the word University is the same width as the words above it. Holding Alt / Option makes the object transform from the centre-point. Note that in Photoshop the default transform controls will always scale uniformly – you do not need to hold shift to change the height and width of an object evenly when scaling like this.
10. Select both layers together in the Layers tab, and use the Move tool to bring them up towards the upper left of your image.

Moving and Aligning Layers

7. Activate the Move tool (hotkey: V) and select both text layers in the Layers tab (click one, then shift-click the second to select them both). Note how the layers have a “T” icon, indicating that these are text layers – not pixel layers. Use the Align Horizontal Centres icon at the top of the screen (on the contextual toolbar) to centre-align the two layers of text to one another.
8. Still using the Move tool, move the text layers so that they comfortably close to each other vertically by selecting one layer in the layers tab, and then clicking and dragging it into position with your cursor. Hold the Shift key here so that you only move the layer vertically and do not misalign it horizontally while doing so.

Working with Text Boxes

7. Activate the Horizontal Type Tool again. In the space you’ve created in the lower-right of your image, click and drag with the type tool to create a text box – when you click and drag, a marquee style outline shows you the area you creating the text box in. The text box will fill with Lorem ipsum filler text as previous, and starts of highlighted so that you can enter your own text or copy and paste text in. Before completing the action, change the paragraph alignment to Left and the font size to 30pt.
8. Copy and paste the following text into the new text box:
   Photoshopped! The Art of Image Retouching
   Adobe Photoshop is very powerful image manipulation software. Colours can be corrected or modified completely and image elements can be added and removed. With proper technique, a retouched image will not only look good on screen, but will stand up to the requirements of the intended output process.
9. Use the handles on the Text Box to resize and reshape your text area here. Note how you can change the line breaks by narrowing or expanding the box. This is different from the text entry done in earlier steps. You can further modify aspects of your text at this point, such as making the body text a lighter font to visually distinguish it from the sub-heading. 

 Save & Wrap Up

10. Save your .PSD working file (Crtl / Cmd + S).
11. Save-As a .PDF  file (Shift + Crtl / Cmd + S). If you open this file in a PDF reader like Acrobat, you’ll see that your text remains selectable and editable!

(Coming Soon)

Tutorial 4.2

Selections and Adjustment Layers

Setting up your file

1. Open the provided file: [ PP_Chptr04-2_AdjLayers_Original.webp ] in Photoshop.
2. Re-save the file as [ PP_Chptr04-2_AdjLayers_Working.psd ]

Preparing the Layers

3. On the Background layer, click on the Select Subject (under the Select menu) to select the figure in the shot. Adjust the selection as needed to ensure the subject is fully selected.
4. Click the Layer Mask icon on the bottom Layers tab (the icon looks like a rectangle with a circle in the middle) to apply a Layer mask based on the current selection. Name the layer Subject. 
5. In the Layers tab, click on the Create new fill or adjustment layer icon (the icon looks like a circle that is half-filled) and create a Solid Color layer. Set the colour of the new layer to Black (#000000). Name this layer Black Background, and move it below the Subject layer.
6. Duplicate the Black Background layer (Ctrl / Cmd + J), and rename this layer Silhouette. Move it above the Subject Layer, so that it is the upper-most layer on the stack.
7. Duplicate the layer mask from the Subject Layer onto the Silhouette Layer by holding the Alt / Option key and dragging the thumbnail of ther layer mask onto the Silhouette Layer. Click Yes when asked if you wish to replace the existing layer mask. Turn the visibility of the Subject layer off.

Moving and Aligning Layers

7. Create a new, blank, layer and name it Spotlight. Move it beneath the Silhouette layer and above the Subject and Black Background Layers.
8. Attach the Silhouette Layer to to the Spotlight layer by holding Alt / Option and clicking the line between the two layers.
9. With the Spotlight layer selected, activate the Elliptical Marquee tool (M) and draw a circle selection (roughly) around the subject, holding the Shift key to keep it proportional. Make sure that your background colour is set to white (hitting D will reset the foreground/background colours to Black/white) and then use the hotkey Ctrl / Command + Delete / Backspace to “delete” the selected area to white. Then click Ctrl / Command + D to deselect the selection.
10. Right-click the Spotlight layer and convert it to a Smart Object.
11. Still on the Spotlight layer, Go to Filter, Blur, and select Gaussian Blur. Set the radius to ~18 and click OK.
12. Adjust the positioning of the Spotlight and/or Silhouette layers to resize and reposition the silhouette within the white ellipse. Use the Free Transform tool as needed to adjust.

 Save & Wrap Up

13. Save your .PSD working file (Ctrl / Cmd + S).
14. Save a Copy as a .PNG  file (Shift + Ctrl / Cmd + Alt / Option + S).

(Coming Soon)

Tutorial 4.3

The Eyedropper Tool

Setting up your file

1. Open the provided file: [ PP_Chptr04-3_Eyedropper_Original.webp ] in Photoshop.
2. Re-save the file as [ PP_Chptr04-3_Eyedropper_Working.psd ]

Create and Use a New Swatch

3. Select the Eyedropper tool (I). Hover your cursor over the image, and click on the blue TMU sign on the far right. The selected colour will sbe set as your Foreground colour.
4. Click the Foreground swatch below the tools to open the Color Picker and see the colour’s information.
5. Click Add to Swatches to save the colour in your Swatches Panel. Name the swatch to TMU Sign Blue. The swatch will appear under the Swatches Panel.

Using Sampled Colours

6. Select the TMU Sign Blue swatch and activate the Text Tool (T).

7. Click on the image area and type Welcome to TMU. Select the text, and under the Swatches tab, click the TMU Sign Blue swatch to change the text’s colour.

8. Enlarge the text using the Free Transform tool (Ctrl / Command + T) and place it near the bottom right corner of the image.

9. Click on the Background Layer.

10. Select the Rectangle Tool (U), click and drag with your cursor to create a rectangle behind the text layer you added. With the rectangle selected, select the Eyedropper Tool (I) and click on the white building in the background. The rectangle should now have the white colour as a fill.

11. Add the white colour under the Swatches tab by clicking on the square with a plus button. Name the swatch to Building White and click OK. 

 Save & Wrap Up

10. Save your .PSD working file (Ctrl / Cmd + S).
11. Save a Copy as a .PNG  file (Shift + Ctrl / Cmd + Alt / Option + S). 

Additional Tips for working with the Eyedropper:

• The default setting for this tool uses a point sample (individual pixel sample), but you can modify this in the contextual tool bar at the top of Photoshop to instead sample from an average the colour of a larger area (e.g. the average of a 5 pixel by 5 pixel area centred on your cursor).
• Once you’ve clicked with your cursor, you can move the Eyedropper tool outside of your image – even to other windows and applications – to sample colours from outside of Photoshop, anywhere on your screen. This means you can sample colours from other files, websites and programs if needed.
• If you hold the Shift key when clicking with the Eyedropper tool, you’ll drop a numbered colour info targetting reticle on the image with information about the colour at that clicked part of the image showing on the Info tab.
  • These targets can be moved by hold Ctrl / Command to click and drag to relocate the point.
  • To remove these, select the Color Sample Tool (I) and click Clear All on the top toolbar.

(Coming Soon)

Tutorial 4.4

Smart Objects

Setting up your file

1. Open the provided files: [ PP_Chptr04-4_SmartLayers_Original.webp ] and [ PP_Chptr04-4_SmartLayers_Original2.webp ] in Photoshop.
2. Re-save the [ PP_Chptr04-4_SmartLayers_Original.webp ] file (only) as [ PP_Chptr04-4_SmartLayers_Working.psd ]

Combine the Images and Make one a Smart Object

3. Drag the Background Layer from the PP_Chptr04-4_SmartLayers_Original2.webp document to the PP_Chptr04-4_SmartLayers_original.webp file. It will be added to that file as Layer 1. Rename it Downtown.
4. Right-click on the Downtown layer and select Convert to Smart Object.
5. Activate the Free Transform tool (Ctrl / Command + T) and resize the Downtown layer to fit onto the computer screen of the Background layer.
6. At any time: Double-click on the Downtown layer thumbnail in the Layers tab to open this Smart Object in a secondary window. Any edits made here will apply to the adjusted image in the file when saved in that secondary window. Note that the resolution of the smart object remains as it was when converted to a smart object, even thought it has been resized in place on your working file.

Files within Files

7. Double Click the Downtown smart object layer to open it in its own file window.
8. Select the Text Tool (T) and type Explore the City in the middle of the image. Set the font to Arial Narrow and the font size to 140 pt, and change the text colour to White (#FFFFFF).
9. Select the Free Transform tool (Ctrl / Command + T) and move the text to the middle of the image.
10. Double-click on the Explore the City Text Layer to access its Layer Styles.
11. Select the Drop Shadow layer Style by clicking its checkmark. Set the Blend Mode to Normal and the Blend Mode Colour to Black. Set the Opacity to 75%, set the Distance to 25, and set the Size to 16 px. When complete, click OK.
12. Save the Smart Layer file window to return to your working file. The changes made in the smart layer file window are now visible in the working file when saved.

Smart Objects and Filters

13. In your working file, select the Downtown layer and go to Filter, Blur, and select Gaussian Blur. Set the Radius to 4 px and click OK. Note how the Gaussian Blur is added to the layer stack, and can be double-clicked to return to the Gaussian Blur Filter settings dialogue box.

 Save & Wrap Up

10. Save your .PSD working file (Ctrl / Cmd + S).
11. Save a Copy as a .PNG  file (Shift + Ctrl / Cmd + Alt / Option + S). 

(Coming Soon)

Tutorial 4.5

Layer Effects

Setting up your file

1. Create a new file (new document) in Adobe Photoshop starting with the Web / Web Most Common blank document preset.The document details should be set as follows – highlighted items differ from the preset default:
   • Width: 1366 pixels
   • Height: 768 Pixels 
   • Orientation: Landscape, Artboards (checkbox): Off
   • Resolution: 72 Pixels / Inch
   • Colour Mode: RGB Color, 8 bit
   • Background Contents: #004C9B (TMU Blue)
   • Colour Profile: Adobe RGB (1998)
     
   • Pixel Aspect Ratio: Square Pixels
2. Re-save the file as [ PP_Chptr04_LayerEffects_Working.psd ]. 

Inner Glow Layer Style (Soft Glow Effect for Text)

• Select the Text Tool (T) and type Toronto. Set the text to the font Forte (or something of your choice) and the size to 115 pt.

• Double click on the Toronto Text Layer to open the Layer Styles window.

• Select the Inner Glow Layer Style by clicking its checkbox.

• Change the Opacity to 50%, and change the size to 49 px. When finished, click OK.

Inner Shadow Layer Style
(Soft Glow Effect at an Angle for Text)

• Uncheck the Inner Glow Layer Style.

• Select the Inner Shadow Layer Style by clicking its checkmark.

• Change the Blend Mode to Screen, and its Blend Mode Colour to White (#FFFFFF)

• Change the Opacity to 100%, change the Angle to 45 degrees, change the Distance to 20 px, and change the Size to 35 px. When finished, click OK.

Layering Inner Shadow + Stroke Layer Styles
(Non-Destructive Cartoon Highlight for Text

• Use the + icon in the Layer Styles window to duplicate the Inner Shadow Layer Style from the previous section, so that there are two Inner Shadows being applied to your text.
• Select the top-most Inner Shadow Layer, and change the Blend Mode to Multiple, and change the Blend Mode Colour to Black (#000000).
• Change the Distance to 0 px and change the Choke to 20%.
• Select the Stroke Layer Style by clicking its checkmark.
• Increase Size until the text is completely filled in colour and no shadow is visible.
• Change the Color to grey, which will act like a threshold adjustment–where the lighter the colour is, the more that highlights will show.
• Change the Opacity to 98% to smooth out the highlights’ edges. When finished, click OK.

Group Folder with Colour Overlay and Drop Shadow Layer Styles
(Adding Colour and Drop Shadow for Text)

• Put your text layer and layer styles you’ve applied into a Layer Group (folder) by selecting all the layer styles, and clicking the folder icon at the bottom of the Layers tab.

• Click on the Group Folder layer to open the layer effects panel for the layer group – this allow you to apply layer styles on top of combined layers housed within the group non-destructively.

• On the Group’s Layer Styles, activate the Colour Overlay Layer Style by clicking its checkbox. Set the Colour to Blue and change the Blend Mode to Screen.

• Activate the Drop Shadow Layer Style by clicking its checkbox. Set the Opacity to 100% and set the Distance to 20 px.

• Duplicate the Drop Shadow Layer Style from the previous step, and select the bottom-most Drop Shadow Layer. Set the Opacity to 60% and set the Distance to 30 px.

• Duplicate the Drop Shadow Layer Style from the previous step, and select the bottom-most Drop Shadow Layer. Change the Blend Mode to Normal and change the Blend Mode Colour to a Light Gray (#BBBBBB). Set the Size to 0, set the Opacity to 100%, and set the Distance to 40 px. When finished, click OK.

Bevel & Emboss Layer Style (3D Effect for Text)

• Select the Bevel & Emboss Layer Style by clicking its checkbox.

• Set the Depth to 200% and set the Size to 90 px.

• Change the Highlight Mode to Linear Dodge (Add) and increase the Opacity to 55%.

   

• Click on the Contour Option under the Bevel & Emboss Layer Style by clicking its checkbox. Select the Contour drop-down menu and change it to the Half Round option. When finished, click OK.

Save & Wrap Up

10. Save your .PSD working file (Crtl / Cmd + S).
11. Re-Activate any layer style of your choice, or a combination of layer styles, and Save a Copy as a .PNG  file (Shift + Ctrl / Cmd + Alt / Option + S)

(Coming Soon)

Tutorial 4.6

Creating Vector Objects

Setting up your file

1. Open the provided file: [ PP_Chptr04-2_CollegePark_Original.webp ] in Photoshop.
2. Re-save the file as [ PP_Chptr04-2_CollegePark_Working.psd ]

Create a Layer Mask for Image

3. Duplicate the background layer (Ctrl / Command + J) and hide the original image layer. Rename the duplicated layer to Skateboarder.
4. With the Skateboarder layer selected, click Select Subject on the bottom toolbar or under the Select menu. Using the Quick Selection tool (W), and holding the Alt / Option key to remove from the selected area and the Shift key to add to the selected area, adjust the selection to be the person on the skateboard only (including the skateboard, but not their shadow). Add a layer mask.

Prepare the Subject to Vectorize

5. Add a Hue/Sautration Adjustment layer, and set the Saturation to -100 in the properties panel to completely desaturate the image. Attached this adjustment layer to the Skateboarder Layer by holding Alt / Option and Clicking the dividing line between the Adjustment layer and the Skateboarder Layer – an arrow with a square beside it will appear to let you know your cursor is in the correct position. Attaching the Adjustment layer like this makes it ONLY affect the layer it is attached to (the Skateboarder Layer which has a layer mask) – leaving the rest of the scene in colour. 
6. Add a Levels Adjustment layer, adjust the midpoint arrow to 0.90, and the high range of the Output Levels to 245. This will darken the tonality of the image. As in the previous step, attached this to the Skateboarder layer by Alt / Option clicking the dividing line below this layer.
7. Add a Posterize Adjustment layer, and set the Levels to 2 in the properties panel (to reduce the number of colours to just two – Black and White). As in the previous step, attached this to the Skateboarder layer by Alt / Option clicking the dividing line below this layer. You should now have three Adjustment layers attached to the Skateboarder layer, with the Posterize layer being at the top of the three. 

8. Right-Click on the Skateboarder Layer and click Convert to Smart Object.

9. From the Filter menu, under Stylize, click Oil Paint. Adjust Stylization to 6.0 and the Cleanliness to 5.0. This will smooth out some of the jaggedness of the image. When finished, click OK.

10. From the Filter menu, under Blur, click Surface Blur. Adjust Radius to 2 and adjust the Threshold to 100 levels. This will further smooth out the jaggedness of the image. When finished, click OK.

Further Refinement

11. Add a Stroke layer style (fx icon at the bottom of the Layers tab) to the Skateboarder layer. Make the Stroke size 1px and the colour Black. The Position should be Outside, the Blend Mode Normal and the Opacity 100%.
12. Turn off the visibility of the Background layer by clicking the Eye icon to its left.
13. Select all of the visible layers in the layer tab and put them in a layer group by clicking the Create a new group icon (folder icon at the bottom of the Layers tab). Name this group Skateboarder – Editable
14. Select the entire image (Ctrl / Cmd + A), and go to Edit / Copy Merged (Ctrl / Cmd + Shift + C). Paste the merged layer, and turn off the Visibility of the Skateboarder – Editable layer group. Rename the new, merged layer, Skateboarder – Merged.
15. Double-Click the Skateboarder – Merged layer to bring up the Blending Options controls. Under the Blend If: subheading, slide the highlights point of the Current Layer slider to 240 so that the white in the image is no longer visible. This essentially tells Photoshop that anything lighter than 240 (on a scale of 0 to 255) we do not want to be visible on this layer.

Converting to a Vector Shape

11. Right click on the Skateboard – Merged layer and select Convert to Smart Object.
    Note: This is neccesary for the next step to select only the black areas of the layer.
12. Hover over the thumbnail image of Skateboard – Merged layer and click while holding Ctrl / Command. This will select all of the visible pixels.
13. Select the Marquee tool (M), right click on the image and select Make Work Path. Adjust the Tolerance to 2. When finished, click OK. This will outline the image with an active work path.
14. Select the Shape Tool (U), right click inside the active work path, and select Define Custom Shape. Name the shape to Skateboarder and click OK.

Using your Custom Vector Shape

15. The Skateboarder vector graphic item can now be used in other projects. To do this, select the Custom Shape Tool (U), open the Shape drop down menu in the top toolbar and click on the Skateboarder vector. You can now click and drag on the canvas to set the size of the vector image. Hold Shift to place it proportionately. Set the Fill Colour to fill the shape.

    Tip: To make edits to the shape of the vector image, select the Direct Selection tool (A), and double click the anchor points to move them as desired. Photoshop will show a pop-up message to turn the live shape into a regular path. Select Yes to do so.

 Save & Wrap Up

10. Save your .PSD working file (Crtl / Cmd + S).
11. Save a Copy as a .PNG  file (Shift + Ctrl / Cmd + Alt / Option + S)

(Coming Soon)

Tutorial 4.7

Liquid Text Effect

Setting up your file

1. Create a new file (new document) in Adobe Photoshop starting with the Web / Web Most Common blank document preset. The document details should be set as follows – highlighted items differ from the preset (default) setting here:
   • Width: 1366 pixels
   • Height: 768 Pixels 
   • Orientation: Landscape, Artboards (checkbox): Off
   • Resolution: 72 Pixels / Inch
   • Colour Mode: RGB Color, 8 bit
   • Background Contents: #000000 (Black)
   • Colour Profile: Adobe RGB (1998)
     
   • Pixel Aspect Ratio: Square Pixels
2. Re-save the file as [ PP_Chptr04_LiquidText_Working.psd ]

Adding Text

3. Select the Text Tool (T) and type TORONTO. Set the font to Arial Bold, change the text size to 200 pt, and change the text colour to White (#FFFFFF).
4. Duplicate the TORONTO Layer (Right Click, Duplicate Layer or Ctrl / Cmd + J), name the newly created layer TORONTO Rasterized and turn the visibility of the original TORONTO text layer off.
5. Right click on the TORONTO Rasterized layer and select Rasterize Type (bet you saw that one coming…)
6. Select the Move tool (hotkey: V) and move the text to the middle of the canvas. Use the automatic guides to ensure it is centred.

   Alternately: In the Move tool, you can open the Align settings (by pressing the … at the right side of the contextual tool bar) and change the Align To: drop-down to Canvas, and then use the align buttons along the contextual tool bar here.

7. Select the Free Transform tool (Ctrl / Command + T), right-click on the TORONTO Rasterized text, and select Perspective. Click and drag the top left or right corner anchors towards the middle of the canvas to angle the text.

Liquifying the Text

5. Select the Smudge tool and increase the brush size to 65 pixels, hardness of 0%, and Strength to 90%, and change the brush profile to a wide ellipse (from the default of a circle). Use the tool on the canvas to click and drag down on the bottom the rasterized text to smudge and smear the text downwards. This will create the liquid effect for the text. Vary the strength and size of the Smudge brush to change the amplitude of the liquification effect. Reposition the layer as needed to accomodate the additional height you’ve added.

6. To add colourize to the text, apply a Gradient Map Adjustment Layer above the TORONTO Rasterized layer. Set the left-most part of the gradient to the background colour you want to have in your final image. The remaining colours will be mapped to the different shades of grey in your image.

 Save & Wrap Up

10. Save your .PSD working file (Crtl / Cmd + S).
11. Save a Copy as a .PNG  file (Shift + Ctrl / Cmd + Alt / Option + S)

(Coming Soon)