{"id":111,"date":"2018-02-18T23:41:50","date_gmt":"2018-02-18T23:41:50","guid":{"rendered":"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/?post_type=chapter&p=111"},"modified":"2019-04-23T21:27:36","modified_gmt":"2019-04-23T21:27:36","slug":"chapter-16-photoshop-for-web-and-cross-media","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/chapter\/chapter-16-photoshop-for-web-and-cross-media\/","title":{"raw":"Chapter 15 - Photoshop for Web and Cross-Media","rendered":"Chapter 15 – Photoshop for Web and Cross-Media"},"content":{"raw":"Introduced in 1989, Photoshop is a market-leading image editing program that is useful in web design for opening, formatting, editing, and saving images for the web.\r\n

Image Capture<\/h1>\r\nThe best way to capture high-quality images for the web is with a digital single-lens reflex (DSLR) camera, whether mirrored or mirrorless. Today\u2019s semi-professional and advanced amateur cameras typically capture 20\u201336 megapixels (MP), and the megapixel capacity increases as new cameras are introduced every year.\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. 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 15-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 \t
  1. Set camera exposure, white balance, and depth of field for optimum photo.<\/li>\r\n \t
  2. Record in camera raw format, bracketing exposures.<\/li>\r\n \t
  3. Open photos in Camera Raw plugin, select correct exposure, set image size, and open.<\/li>\r\n \t
  4. Edit as required.<\/li>\r\n \t
  5. Export to JPG or PNG using Export > Save for Web.<\/li>\r\n<\/ol>\r\n<\/div>\r\n \r\n\r\n[caption id=\"attachment_161\" align=\"aligncenter\" width=\"1024\"]\"Screenshot Figure 15-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. (Adobe\u00ae PhotoShop \u00ae\u00a0<\/span>screenshot(s) reprinted with permission from Adobe Systems Incorporated.<\/span>\u00a0<\/span>Adobe\u00ae Photoshop\u00ae\u00a0\u00a0are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and\/or other countries.)<\/span>[\/caption]\r\n

    \u201cToning\u201d Images<\/h3>\r\nIf you have a bracketed series of exposures, several features of Photoshop are useful for choosing the best image and preparing it for publication.\r\n\r\nObviously it\u2019s easier to see the quality of a photo on a large-screen computer monitor than on a camera\u2019s 3-inch display. However, Photoshop and other programs also allow you to compare photos \u201cby the numbers\u201d by reading highlight and shadow values.\r\n\r\nThe lithographic printing industry took a systematic approach to image toning, based on the largest and smallest halftone dots that a press can typically reduce. Measured on a scale of 0\u2013100% dot area, most presses can reproduce 3% highlight dot and a 97% shadow dot.\r\n\r\nFor images on the Web, monitors display colour on a scale of 0\u2013255 levels, where level 0 is black and 255 is white. Applying the 3-97% minimum-maximum to the levels scale: 3% of 255 is 7.65, or 8 when rounded; while 97% of 255 is 247.35, or 247 (Table 15-1<\/span><\/strong>).\r\n\r\n\r\n\r\n\r\n\r\n
    Table 15-1.<\/strong> Highlight and Shadow Dot Values<\/caption>\r\n
    <\/th>\r\nHighlight<\/th>\r\nShadow<\/th>\r\n<\/tr>\r\n<\/thead>\r\n
    % Dot Area for Print<\/td>\r\n3%<\/td>\r\n97%<\/td>\r\n<\/tr>\r\n
    Levels for Web<\/td>\r\n247<\/td>\r\n8<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nTo select the best exposure from a bracketed series, make sure the file has no levels above 247 or below 8.\u00a0After selecting the best image from a bracketed series, you can further \u201ctone\u201d the image (Figure 15-2<\/strong><\/span>) by adjusting highlight, shadow, midtone, gray balance, and colour.\r\n\r\n[caption id=\"attachment_678\" align=\"alignleft\" width=\"939\"]\"Comparison<\/a> Figure 15-2. Original (left) and toned (right) images. On the right-hand image, highlight and shadow were set at 247 and 8 levels, respectively, to bring out the maximum contrast in the image. Photographs created by Richard Adams. Image licensed under CC BY 4.0.[\/caption]\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 15-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\"]\"Screenshot Figure 15-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. Photo Richard Adams. Image licensed under CC BY 4.0. Adobe\u00ae Photoshop\u00ae screenshot(s) reprinted with permission from Adobe Systems Incorporated.[\/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 (Figur<\/span>e 15-4<\/strong><\/span>) includes settings for image format, transparency, size, and resolution.\r\n\r\n[caption id=\"attachment_160\" align=\"aligncenter\" width=\"1024\"]\"Save Figure 15-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. Photo Richard Adams. Image licensed under CC BY 4.0. Adobe\u00ae Photoshop\u00ae screenshot(s) reprinted with permission from Adobe Systems Incorporated.[\/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.\r\n\r\nAccording to Jason Lisi, Associate Professor in Ryerson\u2019s School of Graphic Communications Management, who teaches a faculty-wide open elective course in Photoshop, 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\u00a0 (Figure 15-5<\/span><\/strong>).\r\n\r\n[caption id=\"attachment_166\" align=\"aligncenter\" width=\"1024\"]\"Screenshot Figure 15-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. (Image used with permission of Jason Lisi). Adobe\u00ae Photoshop\u00ae screenshot(s) reprinted with permission from Adobe Systems Incorporated.[\/caption]\r\n

      Tips for Non-Destructive Editing<\/h3>\r\n
        \r\n \t
      1. Duplicate a Layer. 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.<\/li>\r\n \t
      2. Retouch through a Layer. 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 15-2<\/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 15-3<\/strong><\/span>. In this case, duplicate the layer before retouching it.)<\/li>\r\n<\/ol>\r\nToolPurpose\r\n<\/thead>\r\n\r\n\r\n\r\n\r\n
        Table 15-2. Retouching Tools that Work through Layers<\/caption>\r\n
        Clone Stamp Tool<\/td>\r\nDuplicate pixels from another area<\/td>\r\n<\/tr>\r\n
        Healing Brush Tool<\/td>\r\nAutomatically fix artifacts in image by painting over them<\/td>\r\n<\/tr>\r\n
        Spot Healing Brush Tool<\/td>\r\nAutomatically fix artifacts in a specific area<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nToolPurpose\r\n<\/thead>\r\n\r\n\r\n\r\n\r\n
        Table 15-3<\/strong>. Retouching Tools that Don\u2019t Work through Layers (duplicate layer first)<\/caption>\r\n
        Content-Aware Fill<\/td>\r\nFills an area using pixels within proximity<\/td>\r\n<\/tr>\r\n
        Content-Aware Move<\/td>\r\nMoves selected pixels and replaces them automatically<\/td>\r\n<\/tr>\r\n
        Content-Aware Scale<\/td>\r\nScales selected pixels while automatically filling empty pixels<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
          \r\n \t
        1. Use an Adjustment Layer to Change Tone or Colour. To improve contrast, brightness, highlight, shadow, gray balance, selective colour correction, and other adjustments, apply an Adjustment Layer to make these changes non-destructive.<\/li>\r\n \t
        2. Apply a Layer Effect. Layer Effects make it easy to add a colour blend, metallic effect, drop shadow, and many others in a non-destructive manner.<\/li>\r\n \t
        3. Use a Layer Mask. 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.<\/li>\r\n \t
        4. Use a Smart Layer for Filters. 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.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
          Table 15-4. Layer Types in Photoshop<\/caption>\r\n
          Type<\/th>\r\nPurpose<\/th>\r\n<\/tr>\r\n<\/thead>\r\n
          Layer<\/td>\r\nHolds visual contents<\/td>\r\n<\/tr>\r\n
          Layer Mask<\/td>\r\nObfuscates content from layer<\/td>\r\n<\/tr>\r\n
          Layer Effect<\/td>\r\nApplies an effect to the later<\/td>\r\n<\/tr>\r\n
          Adjustment Layer<\/td>\r\nChanges the visual properties of the layer<\/td>\r\n<\/tr>\r\n
          Overlay<\/td>\r\nBlends layer content<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
            \r\n \t
          1. Place Smart Objects for Resizing. 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.<\/li>\r\n \t
          2. Use Content-Aware Scale to Resize. One of several content-aware features, Content-Aware Scale uses artificial intelligence to resize images while retaining the original scene objects.<\/li>\r\n \t
          3. Use Content-Aware Fill to Remove. 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.<\/li>\r\n \t
          4. Use Content-Aware Move to Move. 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.<\/li>\r\n<\/ol>\r\n[caption id=\"attachment_167\" align=\"aligncenter\" width=\"600\"]\"Text Figure 15-6. This neon type effect was created from a path using Layer Styles. Image by Richard Adams licensed under CC BY 4.0.[\/caption]","rendered":"

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

            Image Capture<\/h1>\n

            The best way to capture high-quality images for the web is with a digital single-lens reflex (DSLR) camera, whether mirrored or mirrorless. Today\u2019s semi-professional and advanced amateur cameras typically capture 20\u201336 megapixels (MP), and the megapixel capacity increases as new cameras are introduced every year.<\/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. 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 15-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

            \n
              \n
            1. Set camera exposure, white balance, and depth of field for optimum photo.<\/li>\n
            2. Record in camera raw format, bracketing exposures.<\/li>\n
            3. Open photos in Camera Raw plugin, select correct exposure, set image size, and open.<\/li>\n
            4. Edit as required.<\/li>\n
            5. Export to JPG or PNG using Export > Save for Web.<\/li>\n<\/ol>\n<\/div>\n

               <\/p>\n

              \"Screenshot
              Figure 15-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. (Adobe\u00ae PhotoShop \u00ae\u00a0<\/span>screenshot(s) reprinted with permission from Adobe Systems Incorporated.<\/span>\u00a0<\/span>Adobe\u00ae Photoshop\u00ae\u00a0\u00a0are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and\/or other countries.)<\/span><\/figcaption><\/figure>\n

              \u201cToning\u201d Images<\/h3>\n

              If you have a bracketed series of exposures, several features of Photoshop are useful for choosing the best image and preparing it for publication.<\/p>\n

              Obviously it\u2019s easier to see the quality of a photo on a large-screen computer monitor than on a camera\u2019s 3-inch display. However, Photoshop and other programs also allow you to compare photos \u201cby the numbers\u201d by reading highlight and shadow values.<\/p>\n

              The lithographic printing industry took a systematic approach to image toning, based on the largest and smallest halftone dots that a press can typically reduce. Measured on a scale of 0\u2013100% dot area, most presses can reproduce 3% highlight dot and a 97% shadow dot.<\/p>\n

              For images on the Web, monitors display colour on a scale of 0\u2013255 levels, where level 0 is black and 255 is white. Applying the 3-97% minimum-maximum to the levels scale: 3% of 255 is 7.65, or 8 when rounded; while 97% of 255 is 247.35, or 247 (Table 15-1<\/span><\/strong>).<\/p>\n\n\n\n\n\n\n
              Table 15-1.<\/strong> Highlight and Shadow Dot Values<\/caption>\n
              <\/th>\nHighlight<\/th>\nShadow<\/th>\n<\/tr>\n<\/thead>\n
              % Dot Area for Print<\/td>\n3%<\/td>\n97%<\/td>\n<\/tr>\n
              Levels for Web<\/td>\n247<\/td>\n8<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

              To select the best exposure from a bracketed series, make sure the file has no levels above 247 or below 8.\u00a0After selecting the best image from a bracketed series, you can further \u201ctone\u201d the image (Figure 15-2<\/strong><\/span>) by adjusting highlight, shadow, midtone, gray balance, and colour.<\/p>\n

              \"Comparison<\/a>
              Figure 15-2. Original (left) and toned (right) images. On the right-hand image, highlight and shadow were set at 247 and 8 levels, respectively, to bring out the maximum contrast in the image. Photographs created by Richard Adams. Image licensed under CC BY 4.0.<\/figcaption><\/figure>\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 15-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

              \"Screenshot
              Figure 15-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. Photo Richard Adams. Image licensed under CC BY 4.0. Adobe\u00ae Photoshop\u00ae screenshot(s) reprinted with permission from Adobe Systems Incorporated.<\/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 (Figur<\/span>e 15-4<\/strong><\/span>) includes settings for image format, transparency, size, and resolution.<\/p>\n

              \"Save
              Figure 15-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. Photo Richard Adams. Image licensed under CC BY 4.0. Adobe\u00ae Photoshop\u00ae screenshot(s) reprinted with permission from Adobe Systems Incorporated.<\/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.<\/p>\n

              According to Jason Lisi, Associate Professor in Ryerson\u2019s School of Graphic Communications Management, who teaches a faculty-wide open elective course in Photoshop, 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\u00a0 (Figure 15-5<\/span><\/strong>).<\/p>\n

                \"Screenshot
                Figure 15-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. (Image used with permission of Jason Lisi). Adobe\u00ae Photoshop\u00ae screenshot(s) reprinted with permission from Adobe Systems Incorporated.<\/figcaption><\/figure>\n

                Tips for Non-Destructive Editing<\/h3>\n
                  \n
                1. Duplicate a Layer. 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.<\/li>\n
                2. Retouch through a Layer. 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 15-2<\/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 15-3<\/strong><\/span>. In this case, duplicate the layer before retouching it.)<\/li>\n<\/ol>\n

                  ToolPurpose<\/p>\n\n<\/thead>\n\n\n\n\n
                  Table 15-2. Retouching Tools that Work through Layers<\/caption>\n
                  Clone Stamp Tool<\/td>\nDuplicate pixels from another area<\/td>\n<\/tr>\n
                  Healing Brush Tool<\/td>\nAutomatically fix artifacts in image by painting over them<\/td>\n<\/tr>\n
                  Spot Healing Brush Tool<\/td>\nAutomatically fix artifacts in a specific area<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                  ToolPurpose<\/p>\n\n<\/thead>\n\n\n\n\n
                  Table 15-3<\/strong>. Retouching Tools that Don\u2019t Work through Layers (duplicate layer first)<\/caption>\n
                  Content-Aware Fill<\/td>\nFills an area using pixels within proximity<\/td>\n<\/tr>\n
                  Content-Aware Move<\/td>\nMoves selected pixels and replaces them automatically<\/td>\n<\/tr>\n
                  Content-Aware Scale<\/td>\nScales selected pixels while automatically filling empty pixels<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
                    \n
                  1. Use an Adjustment Layer to Change Tone or Colour. To improve contrast, brightness, highlight, shadow, gray balance, selective colour correction, and other adjustments, apply an Adjustment Layer to make these changes non-destructive.<\/li>\n
                  2. Apply a Layer Effect. Layer Effects make it easy to add a colour blend, metallic effect, drop shadow, and many others in a non-destructive manner.<\/li>\n
                  3. Use a Layer Mask. 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.<\/li>\n
                  4. Use a Smart Layer for Filters. 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.<\/li>\n<\/ol>\n\n\n\n\n\n\n\n\n\n
                    Table 15-4. Layer Types in Photoshop<\/caption>\n
                    Type<\/th>\nPurpose<\/th>\n<\/tr>\n<\/thead>\n
                    Layer<\/td>\nHolds visual contents<\/td>\n<\/tr>\n
                    Layer Mask<\/td>\nObfuscates content from layer<\/td>\n<\/tr>\n
                    Layer Effect<\/td>\nApplies an effect to the later<\/td>\n<\/tr>\n
                    Adjustment Layer<\/td>\nChanges the visual properties of the layer<\/td>\n<\/tr>\n
                    Overlay<\/td>\nBlends layer content<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
                      \n
                    1. Place Smart Objects for Resizing. 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.<\/li>\n
                    2. Use Content-Aware Scale to Resize. One of several content-aware features, Content-Aware Scale uses artificial intelligence to resize images while retaining the original scene objects.<\/li>\n
                    3. Use Content-Aware Fill to Remove. 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.<\/li>\n
                    4. Use Content-Aware Move to Move. 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.<\/li>\n<\/ol>\n
                      \"Text
                      Figure 15-6. This neon type effect was created from a path using Layer Styles. Image by Richard Adams licensed under CC BY 4.0.<\/figcaption><\/figure>\n","protected":false},"author":6,"menu_order":15,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[47],"contributor":[],"license":[],"class_list":["post-111","chapter","type-chapter","status-publish","hentry","chapter-type-standard"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":27,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/111\/revisions"}],"predecessor-version":[{"id":720,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/111\/revisions\/720"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/111\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/media?parent=111"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapter-type?post=111"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/contributor?post=111"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/license?post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}