{"id":574,"date":"2018-02-27T00:19:55","date_gmt":"2018-02-27T05:19:55","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/chapter\/chapter-8-photoshop\/"},"modified":"2020-10-25T18:24:01","modified_gmt":"2020-10-25T22:24:01","slug":"chapter-8-photoshop","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/chapter\/chapter-8-photoshop\/","title":{"raw":"Photoshop","rendered":"Photoshop"},"content":{"raw":"Introduced in 1989, Photoshop is a market-leading image editing program that is useful for opening, formatting, editing, and saving images for different applications.\r\n

Image Capture<\/h1>\r\nThe best way to capture high-quality images is with a high-quality camera phone or a digital single-lens reflex (DSLR) camera, whether mirrored or mirrorless.\r\n\r\nCamera raw format captures the full megapixel and density range of the camera, however such large images are seldom necessary for the web (for example). In fact, they can be detrimental to loading times. Camera Raw includes both proprietary formats for each camera manufacturer and model, as well as the universal digital negative (DNG) format.\r\n\r\nWhen opening camera raw format in Photoshop\u2019s Camera Raw plugin (Figure 8-1<\/strong><\/span>), web designers should think about the maximum image size they will need, then use the image resizing feature to get the desired size. The site websitedimensions.com says that 35% of web surfers use a browser window that\u2019s 1366\u00d7768 px, while 20% use 1920\u00d71080. If this is true then the maximum size window would be 2 MP (1920\u00d71080) and a full-size image would not need to be larger than that. It may be useful for the designer to think about the anticipated maximum size of an image as being a full-page, half-page, or quarter-page image. A quarter-page image would need to be 960\u00d7540 or 0.5 MP.\r\n\r\n \r\n
\r\n\r\n\r\n\r\n\r\n
Suggested Photoshop Workflow for Web<\/strong><\/td>\r\n<\/tr>\r\n
1. Set camera exposure, white balance, and depth of field for optimum photo.\r\n\r\n2. Record in camera raw format, bracketing exposures<\/a>\r\n\r\n3. Open photos in Camera Raw plugin, select correct exposure, set image size, and open\r\n\r\n4. Edit as required\r\n\r\n5. Export to JPG or PNG using Export > Save for Web.<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
<\/div>\r\n\r\n[caption id=\"attachment_161\" align=\"aligncenter\" width=\"1024\"]\"\" Figure 8-1.<\/strong> Photoshop\u2019s Camera Raw dialog box offers the opportunity to open several photos' camera raw files at once, make settings, and save in standard formats. In this case a bracketed series of exposures (i.e., one slightly too dark and one too light) was taken with a 24-MP camera. The best photo was opened at a resolution of 72 ppi and size appropriate for the web.[\/caption]\r\n\r\n<\/div>\r\n

Making Transparent PNG Files<\/h3>\r\nIf your image contains one or a group of subjects that you want to publish on the Web without the background, save the image as a PNG file with transparent background (Figure 8-3<\/strong><\/span>).\r\n\r\nFirst, make a selection path around the object(s) you want to isolate from the background. Then right-click on the selected subjects and choose \u201cNew Layer from Cut.\u201d Select the background layer and set its transparency to 0%. Save for Web in Photoshop, check the Transparency option, and verify in the preview.\r\n\r\n[caption id=\"attachment_165\" align=\"aligncenter\" width=\"853\"]\"\" Figure 8-3.<\/strong> Making a transparent PNG file by selecting the object, bringing it to a new layer using \u201cNew Layer via Cut,\u201d deleting the background, and Export > Save for Web with Transparency checked.[\/caption]\r\n

Saving Images for Web<\/h3>\r\nOnce an image has been opened and edited in Photoshop, it can then be saved in a format suitable for web (JPG for photos and PNG when transparency is required) using the Export > Save for Web feature. This dialog box (Figure 8-4<\/strong><\/span>) includes settings for image format, transparency, size, and resolution.\r\n\r\n[caption id=\"attachment_160\" align=\"aligncenter\" width=\"1024\"]\"\" Figure 8-4.<\/strong> Photoshop\u2019s Export > Save for Web dialog box offers the opportunity to customize the image format (upper right corner) and size (lower right) and also includes a prediction of download time (lower left) at various internet bandwidths.[\/caption]\r\n

Non-Destructive Editing<\/h3>\r\nAs a bitmap image-editing program, Photoshop enables users to change the tone and colour, along with the pixel content, of images. This is known as destructive editing<\/em> because the original characteristics are altered.\r\n\r\nNon-destructive editing<\/em> is done through layers and masks and preserves the original pixel information. There are three reasons why non-destructive editing is useful:\r\n
    \r\n \t
  1. Preserving the original.<\/em> Since non-destructive editing preserves the original pixels, you can always go back to the original image if you don\u2019t like the results of your edit.<\/li>\r\n \t
  2. Making a record.<\/em> Non-destructive edits provide a step-by-step record of changes, so that you can later go back to them. This could be useful when editing for a client, to show what edits were made and justify the time spent making them.<\/li>\r\n \t
  3. Working faster.<\/em> Editing via layers and masks allows you to organize your edits, see what you are doing, and work faster and more efficiently.<\/li>\r\n<\/ol>\r\n

    Tools for Non-Destructive Editing<\/h3>\r\nLayers.<\/strong> A fundamental concept of non-destructive editing is to apply edits to Photoshop Layers. Adding a layer is like placing a clear plastic overlay on top of a photographic print, and making the edits on the plastic. The effects of the edit layer can be applied to the layer(s) below, then turned on and off to visualize the photo with and without the edits.\r\n\r\nLayer Masks.<\/strong> A Layer Mask accompanies a Layer and can hide or show part or all of the effects of the Layer.\r\n\r\nAdjustment Layers.<\/strong> This type of Layer applies Image > Adjustment effects, such as Brightness\/Contrast, Levels, Curves, and others, via a Layer, so that changes are non-destructive.\r\n\r\nLayer Styles.<\/strong> A Layer Style adds effects to another layer, such as a drop shadow, emboss effect, gradient, or other effect.\r\n\r\nSmart Objects.<\/strong> These include placed images and image components whose original pixel data is preserved after edits. Let\u2019s say you place a logo or other image into an existing image and then want to reduce its size. If first converted to a Smart Object, Photoshop will retain all the pixels in the original logo so that it could be enlarged later.\r\n\r\nSmart Filters.<\/strong> These are Filters applied to Smart Objects so the effects of the filter can later be removed or modified.\r\n\r\nContent Awareness.<\/strong> A form of artificial intelligence, content awareness examines neighbouring pixels and uses them to fill in spaces, move objects, and resize images.\r\n\r\n[caption id=\"attachment_166\" align=\"aligncenter\" width=\"1024\"]\"\" Figure 8-5.<\/strong> People were removed from this beach scene using Photoshop\u2019s Content Aware Fill feature. Marquis were drawn around each object to be removed, then Edit > Fill was selected and set to Content Aware. (Photo by Jason Lisi.)<\/em>[\/caption]\r\n

    Tips for Non-Destructive Editing<\/h3>\r\nDuplicate a Layer.<\/strong> Let\u2019s say you open a digital photo in Photoshop and want to make some edits. The fastest way to edit non-destructively is to duplicate the Background Layer into which the photo is opened. Simply drag the layer to the New Layer icon in the Layers palette to duplicate it. Or select the layer and choose Duplicate Layer from the Layers menu or the upper-right popup menu in the Layers palette.\r\n\r\nRetouch through a Layer.<\/strong> When retouching defects, artifacts, or undesirable features of an image, the Clone Stamp, Healing Brush, and Spot Healing Brush tools can be applied through a Layer (Table 8-3<\/strong><\/span>). Simply check \u201cSample All Layers\u201d or choose \u201cCurrent and Below\u201d from the popup in the Properties menu. (Not all tools work through layers, see Table 8-4<\/strong><\/span>. In this case, duplicate the layer before retouching it.)\r\n
    \r\n\r\n\r\n\r\n\r\n
    Table 8-2. Retouching Tools that Work through Layers<\/strong><\/td>\r\n<\/tr>\r\n
    Clone Stamp Tool\r\n\r\nHealing Brush Tool\r\n\r\nSpot Healing Brush Tool<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n \r\n\r\n<\/div>\r\n
    \r\n\r\n\r\n\r\n\r\n
    Table 8-3. Retouching Tools that Don\u2019t Work through Layers (duplicate layer first)<\/strong><\/td>\r\n<\/tr>\r\n
    Content-Aware Fill\r\n\r\nContent-Aware Move\r\n\r\nContent-Aware Scale<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>\r\n\r\nUse an Adjustment Layer to Change Tone or Colour.<\/strong> To improve contrast, brightness, highlight, shadow, gray balance, selective colour correction, and other adjustments, apply an Adjustment Layer to make these changes non-destructive.\r\n\r\nApply a Layer Effect.<\/strong> Layer Effects make it easy to add a colour blend, metallic effect, drop shadow, and many others in a non-destructive manner.\r\n\r\nUse a Layer Mask.<\/strong> A Layer Mask hides, shows, or alters the appearance of its associated layer. Example: If you apply a colour fill to a layer, the colour can be selectively applied using a Layer Mask. Painting or filling with black negates the effect of the associated layer, while painting with white or the Eraser Tool reestablishes the effect.\r\n\r\nUse a Smart Layer for Filters.<\/strong> Photoshop features dozens of filters that can add noise, sharpen, smooth, and otherwise alter the appearance of images. Applying them as Smart Filters to a Smart Object preserves the original appearance of the object or layer.\r\n\r\n\r\n\r\n\r\n
    Table 8-4. Layer Types in Photoshop<\/strong><\/td>\r\n<\/tr>\r\n
    1. Layer\r\n\r\n2. Layer Mask\r\n\r\n3. Layer Effect\r\n\r\n4. Adjustment Layer\r\n\r\n5. Overlay<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n \r\n\r\nPlace Smart Objects for Resizing.<\/strong> When another file, such as a logo, is placed into an existing file as a Smart Object and resized, Photoshop retains all the pixels in the original. This enables the size to be readjusted without loss of information.\r\n\r\nUse Content-Aware Scale to Resize.<\/strong> One of several content-aware features, Content-Aware Scale uses artificial intelligence to resize images while retaining the original scene objects.\r\n\r\nUse Content-Aware Fill to Remove.<\/strong> This feature is useful for removing objects from scenes, such as people on a beach. Select the object(s) with one of the selection tools, then apply Edit > Fill > Content-Aware.\r\n\r\nUse Content-Aware Move to Move.<\/strong> If you want to relocate an object instead of deleting it, the Content-Aware Move tool examines surrounding pixels near the source and destination to make the moved object(s) blend in with the new background.\r\n\r\n[caption id=\"attachment_167\" align=\"aligncenter\" width=\"600\"]\"\" Figure 8-6.<\/strong> This neon type effect was created from a path using Layer Styles.[\/caption]","rendered":"

    Introduced in 1989, Photoshop is a market-leading image editing program that is useful for opening, formatting, editing, and saving images for different applications.<\/p>\n

    Image Capture<\/h1>\n

    The best way to capture high-quality images is with a high-quality camera phone or a digital single-lens reflex (DSLR) camera, whether mirrored or mirrorless.<\/p>\n

    Camera raw format captures the full megapixel and density range of the camera, however such large images are seldom necessary for the web (for example). In fact, they can be detrimental to loading times. Camera Raw includes both proprietary formats for each camera manufacturer and model, as well as the universal digital negative (DNG) format.<\/p>\n

    When opening camera raw format in Photoshop\u2019s Camera Raw plugin (Figure 8-1<\/strong><\/span>), web designers should think about the maximum image size they will need, then use the image resizing feature to get the desired size. The site websitedimensions.com says that 35% of web surfers use a browser window that\u2019s 1366\u00d7768 px, while 20% use 1920\u00d71080. If this is true then the maximum size window would be 2 MP (1920\u00d71080) and a full-size image would not need to be larger than that. It may be useful for the designer to think about the anticipated maximum size of an image as being a full-page, half-page, or quarter-page image. A quarter-page image would need to be 960\u00d7540 or 0.5 MP.<\/p>\n

     <\/p>\n

    \n\n\n\n\n
    Suggested Photoshop Workflow for Web<\/strong><\/td>\n<\/tr>\n
    1. Set camera exposure, white balance, and depth of field for optimum photo.<\/p>\n

    2. Record in camera raw format, bracketing exposures<\/a><\/p>\n

    3. Open photos in Camera Raw plugin, select correct exposure, set image size, and open<\/p>\n

    4. Edit as required<\/p>\n

    5. Export to JPG or PNG using Export > Save for Web.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    <\/div>\n
    \"\"
    Figure 8-1.<\/strong> Photoshop\u2019s Camera Raw dialog box offers the opportunity to open several photos’ camera raw files at once, make settings, and save in standard formats. In this case a bracketed series of exposures (i.e., one slightly too dark and one too light) was taken with a 24-MP camera. The best photo was opened at a resolution of 72 ppi and size appropriate for the web.<\/figcaption><\/figure>\n<\/div>\n

    Making Transparent PNG Files<\/h3>\n

    If your image contains one or a group of subjects that you want to publish on the Web without the background, save the image as a PNG file with transparent background (Figure 8-3<\/strong><\/span>).<\/p>\n

    First, make a selection path around the object(s) you want to isolate from the background. Then right-click on the selected subjects and choose \u201cNew Layer from Cut.\u201d Select the background layer and set its transparency to 0%. Save for Web in Photoshop, check the Transparency option, and verify in the preview.<\/p>\n

    \"\"
    Figure 8-3.<\/strong> Making a transparent PNG file by selecting the object, bringing it to a new layer using \u201cNew Layer via Cut,\u201d deleting the background, and Export > Save for Web with Transparency checked.<\/figcaption><\/figure>\n

    Saving Images for Web<\/h3>\n

    Once an image has been opened and edited in Photoshop, it can then be saved in a format suitable for web (JPG for photos and PNG when transparency is required) using the Export > Save for Web feature. This dialog box (Figure 8-4<\/strong><\/span>) includes settings for image format, transparency, size, and resolution.<\/p>\n

    \"\"
    Figure 8-4.<\/strong> Photoshop\u2019s Export > Save for Web dialog box offers the opportunity to customize the image format (upper right corner) and size (lower right) and also includes a prediction of download time (lower left) at various internet bandwidths.<\/figcaption><\/figure>\n

    Non-Destructive Editing<\/h3>\n

    As a bitmap image-editing program, Photoshop enables users to change the tone and colour, along with the pixel content, of images. This is known as destructive editing<\/em> because the original characteristics are altered.<\/p>\n

    Non-destructive editing<\/em> is done through layers and masks and preserves the original pixel information. There are three reasons why non-destructive editing is useful:<\/p>\n

      \n
    1. Preserving the original.<\/em> Since non-destructive editing preserves the original pixels, you can always go back to the original image if you don\u2019t like the results of your edit.<\/li>\n
    2. Making a record.<\/em> Non-destructive edits provide a step-by-step record of changes, so that you can later go back to them. This could be useful when editing for a client, to show what edits were made and justify the time spent making them.<\/li>\n
    3. Working faster.<\/em> Editing via layers and masks allows you to organize your edits, see what you are doing, and work faster and more efficiently.<\/li>\n<\/ol>\n

      Tools for Non-Destructive Editing<\/h3>\n

      Layers.<\/strong> A fundamental concept of non-destructive editing is to apply edits to Photoshop Layers. Adding a layer is like placing a clear plastic overlay on top of a photographic print, and making the edits on the plastic. The effects of the edit layer can be applied to the layer(s) below, then turned on and off to visualize the photo with and without the edits.<\/p>\n

      Layer Masks.<\/strong> A Layer Mask accompanies a Layer and can hide or show part or all of the effects of the Layer.<\/p>\n

      Adjustment Layers.<\/strong> This type of Layer applies Image > Adjustment effects, such as Brightness\/Contrast, Levels, Curves, and others, via a Layer, so that changes are non-destructive.<\/p>\n

      Layer Styles.<\/strong> A Layer Style adds effects to another layer, such as a drop shadow, emboss effect, gradient, or other effect.<\/p>\n

      Smart Objects.<\/strong> These include placed images and image components whose original pixel data is preserved after edits. Let\u2019s say you place a logo or other image into an existing image and then want to reduce its size. If first converted to a Smart Object, Photoshop will retain all the pixels in the original logo so that it could be enlarged later.<\/p>\n

      Smart Filters.<\/strong> These are Filters applied to Smart Objects so the effects of the filter can later be removed or modified.<\/p>\n

      Content Awareness.<\/strong> A form of artificial intelligence, content awareness examines neighbouring pixels and uses them to fill in spaces, move objects, and resize images.<\/p>\n

      \"\"
      Figure 8-5.<\/strong> People were removed from this beach scene using Photoshop\u2019s Content Aware Fill feature. Marquis were drawn around each object to be removed, then Edit > Fill was selected and set to Content Aware. (Photo by Jason Lisi.)<\/em><\/figcaption><\/figure>\n

      Tips for Non-Destructive Editing<\/h3>\n

      Duplicate a Layer.<\/strong> Let\u2019s say you open a digital photo in Photoshop and want to make some edits. The fastest way to edit non-destructively is to duplicate the Background Layer into which the photo is opened. Simply drag the layer to the New Layer icon in the Layers palette to duplicate it. Or select the layer and choose Duplicate Layer from the Layers menu or the upper-right popup menu in the Layers palette.<\/p>\n

      Retouch through a Layer.<\/strong> When retouching defects, artifacts, or undesirable features of an image, the Clone Stamp, Healing Brush, and Spot Healing Brush tools can be applied through a Layer (Table 8-3<\/strong><\/span>). Simply check \u201cSample All Layers\u201d or choose \u201cCurrent and Below\u201d from the popup in the Properties menu. (Not all tools work through layers, see Table 8-4<\/strong><\/span>. In this case, duplicate the layer before retouching it.)<\/p>\n

      \n\n\n\n\n
      Table 8-2. Retouching Tools that Work through Layers<\/strong><\/td>\n<\/tr>\n
      Clone Stamp Tool<\/p>\n

      Healing Brush Tool<\/p>\n

      Spot Healing Brush Tool<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

       <\/p>\n<\/div>\n

      \n\n\n\n\n
      Table 8-3. Retouching Tools that Don\u2019t Work through Layers (duplicate layer first)<\/strong><\/td>\n<\/tr>\n
      Content-Aware Fill<\/p>\n

      Content-Aware Move<\/p>\n

      Content-Aware Scale<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n


      \nUse an Adjustment Layer to Change Tone or Colour.<\/strong> To improve contrast, brightness, highlight, shadow, gray balance, selective colour correction, and other adjustments, apply an Adjustment Layer to make these changes non-destructive.<\/p>\n

      Apply a Layer Effect.<\/strong> Layer Effects make it easy to add a colour blend, metallic effect, drop shadow, and many others in a non-destructive manner.<\/p>\n

      Use a Layer Mask.<\/strong> A Layer Mask hides, shows, or alters the appearance of its associated layer. Example: If you apply a colour fill to a layer, the colour can be selectively applied using a Layer Mask. Painting or filling with black negates the effect of the associated layer, while painting with white or the Eraser Tool reestablishes the effect.<\/p>\n

      Use a Smart Layer for Filters.<\/strong> Photoshop features dozens of filters that can add noise, sharpen, smooth, and otherwise alter the appearance of images. Applying them as Smart Filters to a Smart Object preserves the original appearance of the object or layer.<\/p>\n\n\n\n\n
      Table 8-4. Layer Types in Photoshop<\/strong><\/td>\n<\/tr>\n
      1. Layer<\/p>\n

      2. Layer Mask<\/p>\n

      3. Layer Effect<\/p>\n

      4. Adjustment Layer<\/p>\n

      5. Overlay<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

       <\/p>\n

      Place Smart Objects for Resizing.<\/strong> When another file, such as a logo, is placed into an existing file as a Smart Object and resized, Photoshop retains all the pixels in the original. This enables the size to be readjusted without loss of information.<\/p>\n

      Use Content-Aware Scale to Resize.<\/strong> One of several content-aware features, Content-Aware Scale uses artificial intelligence to resize images while retaining the original scene objects.<\/p>\n

      Use Content-Aware Fill to Remove.<\/strong> This feature is useful for removing objects from scenes, such as people on a beach. Select the object(s) with one of the selection tools, then apply Edit > Fill > Content-Aware.<\/p>\n

      Use Content-Aware Move to Move.<\/strong> If you want to relocate an object instead of deleting it, the Content-Aware Move tool examines surrounding pixels near the source and destination to make the moved object(s) blend in with the new background.<\/p>\n

      \"\"
      Figure 8-6.<\/strong> This neon type effect was created from a path using Layer Styles.<\/figcaption><\/figure>\n","protected":false},"author":515,"menu_order":5,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["richard-adams-and-reem-el-asaleh","martin-habekost","jason-lisi","art-seto"],"pb_section_license":"cc-by"},"chapter-type":[47],"contributor":[63,62,61,60],"license":[52],"class_list":["post-574","chapter","type-chapter","status-publish","hentry","chapter-type-standard","contributor-art-seto","contributor-jason-lisi","contributor-martin-habekost","contributor-richard-adams-and-reem-el-asaleh","license-cc-by"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/pressbooks\/v2\/chapters\/574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/wp\/v2\/users\/515"}],"version-history":[{"count":8,"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/pressbooks\/v2\/chapters\/574\/revisions"}],"predecessor-version":[{"id":1510,"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/pressbooks\/v2\/chapters\/574\/revisions\/1510"}],"part":[{"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/pressbooks\/v2\/chapters\/574\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/wp\/v2\/media?parent=574"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/pressbooks\/v2\/chapter-type?post=574"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/wp\/v2\/contributor?post=574"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/wp\/v2\/license?post=574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}