Main Body

Tutorial 1 • Overview of Photoshop

The Photoshop Workspace

Before we get into the specific tools found in Photoshop, let’s look at the Photoshop Workspace.

Graphic highlighting where the menu bar, options bar, tools panel, other panels, and document window is located in the Photoshop user interface.
Photoshop interface
  1. Launch Photoshop.
  2. Create a new file that is 8×10″ and 300 ppi in the RGB colour mode.
  3. Let’s look at the following:
    • Menu bar – This shows File, Edit, Image, and other menus that will allow you to execute various commands, adjustments, and the enabling of panels.
    • Options bar – Displays options for the specific tool that you are currently using.
    • Tools panel – These are the tools that you can use for editing images. Similar tools are grouped together and can be found by clicking and holding a tool in the panel.
    • Panels – These are other panels that contain various controls when working in Photoshop.
    • Document Window – This is the space where you are currently working in.

There are three main features that Photoshop is known for:

  1. Selection – The ability to select certain pixels in an image.
  2. Layers – These are similar to transparent sheets stacked on top of each other. Through the transparent areas, you can see the layers below. If you’d like to adjust which layers appear before the others, you can change the order of the layers.
  3. Masking – This allows you to hide or reveal parts of an image without destructing or erasing the image. Masking is an important part of non-destructive editing which will be used throughout the course.

Editing Non-Destructively

Non-destructive editing is a valuable tool in Photoshop, enabling you to edit images without changing the original. You can then go back to a previous state, make changes easily, and show what you have done.

Tools of non-destructive editing include the following:

  • Layers
  • Layer Masks – When attached to Layers, selectively hide or show the Layer
  • Layer Effects – Applies special effects to Layers
  • Duplication of Layers – Editing the duplicate, and leaving the original untouched.
  • Applying tools to a Layer with “Sample All Layers” checked; applies the edit to the Layer on top, not to the original

The figure below shows how Layers and Layer Masks work.

Layers and Layer Masks are important tools in non-destructive image editing. In this example, an opaque white layer sits on top of a red layer. The mask attached to the white layer selectively hides (black triangle) and shows (white triangle) the white layer.

File Organization

File organization is very important, especially for image editing where there can be several renditions – or versions – of the same image at varying stages of editing.

Naming conventions. When working with images that will be edited in Photoshop, use names that are short and descriptive. In all cases, it’s best to avoid spaces and special characters in file names. For example, spaces should be avoided because, on the web, spaces confuse the server and have to be replaced by “%20” as filler characters. In place of spaces, use hyphen or underscore. Other illegal characters include most symbols (e.g. #$@) and slashes.

It is highly recommended that images that have more than one version are given version numbers that ascend numerically to indicate which photo is the most current. In addition, the final image should be tagged with the word “final” in the name.

 

Suggested file organization for print and web pages.

Folder Structure. In addition to diligent naming conventions, a good folder structure is also very important to help keep things organized. It is recommended that you come up with a master folder structure, and use that master folder structure on all your jobs to ensure consistency.

Create a “Master File Structure” Folder

  1. On the Mac, navigate to your USB drive.
  2. Inside your USB drive, create a folder named “GCM_738_Winter_2023
  3. Inside the “GCM_738__Winter_2023” folder, create a folder named “GCM_738_Master_Folder_Structure
  4. Within the “GCM_738_Master_Folder_Structure” folder, create the following folders:
    • 01_Original_Images
    • 02_Altered_Images
    • 03_Working_Photoshop_Files
    • 04_Final_Images

Selection, Masking, and Layers in Action!

In this short exercise, we will replace the sky of an image using Photoshop’s key features of selection, masking and layers.

  1. Open the tutorial file named GCM_738_Tutorial_01_Exercise.psd.
  2. Select the Rectangular Marquee Tool and create a rectangular selection anywhere on the image.
  3. Select the Move Tool to move the selection.  This is how you can select and move pixels in your image.
  4. Undo this move by pressing Cmd + Z or Ctrl + Z
  5. To deselect the section, press Cmd + D or Ctrl + D
  6. Now let’s try to select the sky using different selection tools.
    • Lasso Tool –  allows you to make freehand selections.
    • Polygonal Lasso Tool – allows you to make a selection by connecting straight lines.
    • Magnetic Lasso Tool – allows you to make a selection by snapping to edges in an image as you drag.
    • Object Selection Tool – allows you to select an object within a defined region.
    • Magic Wand Tool – selects an area based on its colour. This works well for solid colours.
    • Quick Selection Tool – allows you to make a selection by finding and following the edges of an image.
  7. You can also select using the Menu Bar
    • Click on Select in the Menu Bar
    • You have the ability to select a Focus Area, Subject, or Sky
    • Photoshop will then select those areas for you using artificial intelligence
    • Notice that when we select Sky, some of the sky is also selected in the window. The artificial intelligence is good but not always perfect.
    • For this exercise, we will select the sky using the quick selection tool or the object selection tool.
  8. With the quick selection tool selected, change the brush size in the Options Bar to about 150 px and select the sky area.
  9. Once the selection is made, in the Menu Bar, go to Layer →  Layer Mask → Hide Selection
    • Notice that the sky is now gone because a layer mask has been created. The pixels are hidden but not erased or deleted. If we wanted to bring back the sky, we could easily do so. This is non-destructive editing.
  10. Drag and drop the image of the new sky into the Photoshop file.
  11. In the Layers Panel, drag the new sky below the original image.
  12. Using the Move Tool, resize the sky to fit appropriately in the background.
Before and after demonstration of image editing
This is a very simple way that demonstrates how you can use Photoshop’s key features to edit an image and replace a sky

Photo by Harry Shelton on Unsplash [New Window]

Photo by Andre Iv on Unsplash [New Window]

Video created by Afrah Usman.


Publishing Your Images

File Formats

After retouching your images in Photoshop, you may wish to publish them in a variety of media—magazines, posters, books, eBooks and their covers, and web pages. Each type of media requires a different file format and resolution. Printed images should be in Photoshop (.psd), TIFF (.tif), or JPEG (.jpg) format, while images for eBooks, web pages, and social media should be in JPEG, PNG (.png), or GIF (.gif) format.

 

Image File Formats
Format Description Compressed Transparency1 Print/Web2
PSD Photoshop No not needed print
TIFF Tagged Image File Format Optional not needed print
JPEG Joint Photographic Experts Group Yes No print, web
PNG Portable Network Graphic Yes Yes web
GIF Graphic Interchange Format Yes Yes web
Notes
1  Transparency refers to making the background clear for use in web and eBooks.
2  Web formats also apply to eBooks.

Use File → Save As to save PSD and TIFF files for print.

Use File → Export → Export As… for saving JPEG, PNG, and GIF images for web.

Screen capture of Exporting panel on Photoshop. The edited image with the blue sky is about to be exported as a JPG file.


Making a Printed Magazine Cover, Book Cover, or Poster

Covers of print books, along with posters, are best made in Adobe Illustrator (for single pages) or Adobe InDesign (single- and multi-page documents). The New Document dialog box in InDesign offers options for page size, automatic text frame, facing pages, and bleed:

  • The automatic text frame, which is useful if your book includes a lot of type, will create new pages to accommodate the type; not necessary for single-page documents.
  • Facing pages is useful for print books where you want different layouts for left- and right-hand pages; usually not necessary for single-page documents.
  • Bleed (usually 1/8″ or 0.3175cm) is necessary if your page has color printing up to the edge; the page will be printed on larger paper and trimmed to final size.
Image Requirements for Publications
Publication Type Image Resolution Document
Magazine Cover/Full Page 300ppi InDesign or Illustrator
U.S. Letter or A4 (8½×11″ or 210×297cm)
Automatic Text Frame: No
Facing Pages: No
Bleed ⅛” (0.125″) or 0.3175cm if color to edge
Book Cover/Full Page 300ppi InDesign or Illustrator
U.S. Letter or A4 (81/2×11″ or 210×297cm)
Automatic Text Frame: No
Facing Pages: No
Bleed: ⅛” (0.125″) or 0.3175cm if color to edge
Poster 300ppi InDesign or Illustrator
U.S. Tabloid or A3 (11×17″ or 297×420cm)
Automatic Text Frame: No
Facing Pages: No
Bleed: ⅛” (0.125″) or 0.3175cm if color to edge
eBook 144ppi InDesign
384×512px
Automatic Text Frame: Yes
Facing Pages: No
Bleed: none
Save cover separately in JPEG format
Web Page 72ppi Dreamweaver or HTML editor
HTML page
<img> tag for image
CSS specification for width and height

License

Photoshopped! Copyright © by Richard Adams and Jason Lisi. All Rights Reserved.

Share This Book