{"id":1147,"date":"2017-06-27T01:34:34","date_gmt":"2017-06-27T05:34:34","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/chapter\/12-1-exercise-1-from-digital-input-to-web-ready\/"},"modified":"2020-09-27T16:36:19","modified_gmt":"2020-09-27T20:36:19","slug":"12-1-exercise-1-from-digital-input-to-web-ready","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/chapter\/12-1-exercise-1-from-digital-input-to-web-ready\/","title":{"raw":"12.1 Exercise 1: From digital input to web ready","rendered":"12.1 Exercise 1: From digital input to web ready"},"content":{"raw":"
    \n \t
  1. Download and open seagram_building.jpg<\/strong> from the Chapter 12 Work Files download.\"Image<\/li>\n \t
  2. If you followed the exercises in Chapters 8 and 9, you should be comfortable changing the tonal range and color of this image. Adjust the tonal range and color to your liking by adding one or more adjustment layers.\"Photoshop\u00ae\"Properties \"Properties \"Properties<\/li>\n \t
  3. Save this file as a master copy by choosing Save As<\/strong> from the file menu, choose PSD as the file format, and save your file as ch12-yourlastname-firstname.psd<\/strong>.<\/li>\n \t
  4. The image from the download files was taken by a 21-megapixel digital camera, and is larger than we need to display on a web site. Additionally, since we\u2019ve made some adjustments and want to retain our master file as a PSD, we\u2019ll need to create an optimized image for use on a website or on social media. To optimize images for online use, we use the Export features in Photoshop\u00ae. Choose File > Export > Export As...<\/strong> to open the Export As interface. Photoshop\u00ae and Illustrator\u00ae both have this tool available, allowing you to to resizes and compress your images, flatten layers, and prepare an image for the web all while retaining your original master file.\"Exporting<\/li>\n \t
  5. The Export As dialog has several important parameters to set. The most important parameter is the Format<\/strong> listed under \u201cFile Settings\u201d in the top right of the interface. As a general rule, photographic images and other images continuous tone or a large range of colors are saved as JPEGs. Graphic images \u2014 images with few colors, such as logos and line art \u2014 are saved as PNGs or GIFs. Since this image is a photograph, select JPEG from the Format pull-down menu.\"Screen<\/li>\n \t
  6. Some of the Formats available in the Export As dialog are also available through File > Save As, including the JPEG format. However, using the Export As dialog gives a greater amount of control over JPEG compression settings and prepares the image for web use in a few other ways that Save As doesn\u2019t. We\u2019ll start with the Quality<\/strong> setting.First, notice that at the bottom of the Export As dialog are some zoom controls. Click on the + button there to zoom in and view the image at 100%. We\u2019ll want to be looking closely at the image to more easily see the effect of JPEG compression.\n\n\"ScreenAlso note that the left side of the Export As interface shows information related to the optimized image. At this stage, we want to pay particular attention to the estimated file size of the optimized image, which at 100% Quality is about 4.9MB. This is important because the smaller the file size is, the faster the image will download as part of a web page. The 4.9MB file size is a very large or \u201cheavy\u201d file and will increase download time unnecessarily.\n\n\"Screen\n\n <\/li>\n \t
  7. In the File Settings section at the right of the Export As dialog, set the Quality setting to 0% by typing into its box or clicking on its down arrow and using the slider. Watch the image closely as you make this change and you will see differences in the image quality appear. Saving an image in JPEG format compresses the saved image into a smaller file size by removing pixel detail from specific areas in the image. This is called lossy compression.The JPEG format lossy leaves what are known as compression artifacts in the image. These show up as blurry or pixelated areas in an image, which you may have noticed in heavily compressed images online. JPEG compression artifacts most often show up in areas of solid or nearly-solid color, or around edges of objects in an image.\n\n[caption id=\"attachment_524\" align=\"alignnone\" width=\"624\"]\"Screen Notice the loss of detail and the appearance of JPEG compression artifacts when comparing the image preview at Quality settings of 100% and 0%.[\/caption]\n\n\"Screen\n\nAlong with seeing a preview of the compressed image in the center of the Export As dialog, the estimated file size is also updated when you change the Quality setting. Notice that the image information in the area at the left of the dialog now lists the file size at around 223.5KB.\n\n\"Screen\n
    Note: The human eye cannot easily detect image compression artifacts if a small amount of compression is used and the image is viewed on a computer screen. Photoshop\u00ae JPEG compression presets run from Low to Maximum, and correspond to a numerical range from 0 to 100. Zero is a very low quality, where you will definitely be able to notice the loss of quality as visible compression artifacts in the image, while the maximum 100 level (although still having had image data thrown away) shows no visible decline in quality. The trade-off is that more compression creates a smaller file. Weigh your needs for file size against your perception of image quality to decide what level of compression to use on a case-by-case basis.<\/div>\n <\/li>\n \t
  8. While the file size at 0% quality is nice and small, the image doesn\u2019t look as good as it could. We want to find a balance between a nice looking image (not covered in artifacts) and a file size under 1MB. Increase the Quality to 60% and watch the areas of the image where you noticed the artifacts at 0%. On average, a Quality setting between 60% and 80% is where you\u2019ll end up when looking at image quality, though this will vary depending on the amount of detail and texture in any particular image that you\u2019re compressing. Notice that the compressed file size at 60% quality is 1.1MB, we\u2019ll address that in the next step since we do want a smaller file size.\"Screen<\/li>\n \t
  9. In addition to compression, we can also reduce file size in this case by reducing the pixel dimensions of the image. We can do this directly in the Export As dialog, without permanently altering our master image file. Locate the Image Size section of the dialog, underneath the File Settings section on the right side. The original pixel dimensions are 5760x3840 pixels, which is much larger than we need to display online.\n\nComputer monitors and mobile devices have a wide range of screen sizes these days. In order to deliver images that are sized appropriately for different devices and Internet connections, it is often necessary to prepare multiple sizes of an image for online use. For this exercise, we\u2019ll prepare two optimized sizes of this image.\n\nFor desktop computers, let\u2019s scale the image down to a width of 1600px. Edit the Width value under the Image Size settings and the height will be scaled proportionally to 1066px. To help our scaled image\u2019s quality, also set the Resample<\/strong> drop-down to Bicubic Sharper<\/strong>. This will result in sharper detail when Photoshop\u00ae re-interpolates the image\u2019s pixels while generating the smaller size. Your Image Size settings should match those shown below.\n\n\"Screen\n\nNotice that this has reduced the optimized file size from 1.1MB down to 125.1KB. This is much more acceptable and our image quality is looking pretty good.\n\n\"Screen<\/li>\n \t
  10. Now we\u2019ll create an additional optimized file for mobile screens using the Scale All<\/strong> controls in the upper left corner of the Export As dialog. In the previous steps, we\u2019ve just defined the settings for our 1x<\/strong> optimized image. In the Suffix<\/strong> field, enter _desktop<\/strong> then click the +<\/strong> button in the Scale All box to add another size for this image.\n\n\"Screen\n\nClicking the + button will create an additional optimized copy of the image. For this second optimized copy, set the Size<\/strong> drop-down to 0.5x<\/strong> and enter _mobile<\/strong> in the Suffix<\/strong> box.\n\n\"Screen\nNow click the Export All\u2026<\/strong> button in the lower right of the dialog, choose where to save your optimized files, and click the Export button. You should end up with two .jpg files in the folder you saved to: one named ch12-yourlastname-firstname_desktop,jpg<\/em> and the other named ch12-yourlastname-firstname_mobile.jpg<\/em> with file sizes around 122KB and 45KB, respectively. Notice that the _mobile image has pixel dimensions of 800x533.\n
    Note: File naming standards for the web use only lowercase letters, alphanumeric characters, underscores, and dashes (no spaces).<\/div>\nIf you open each of the JPEGs in Photoshop\u00ae, you\u2019ll also notice that their resolution is set to 72ppi. The Export All process also reduces the ppi since images for display on the web or exclusively on screens typically use a standard 72ppi setting.\n\nWe\u2019re finished with the ch12-yourlastname-firstname.psd file, so you may save and close it.<\/li>\n<\/ol>","rendered":"
      \n
    1. Download and open seagram_building.jpg<\/strong> from the Chapter 12 Work Files download.\"Image<\/li>\n
    2. If you followed the exercises in Chapters 8 and 9, you should be comfortable changing the tonal range and color of this image. Adjust the tonal range and color to your liking by adding one or more adjustment layers.\"Photoshop\u00ae\"Properties \"Properties \"Properties<\/li>\n
    3. Save this file as a master copy by choosing Save As<\/strong> from the file menu, choose PSD as the file format, and save your file as ch12-yourlastname-firstname.psd<\/strong>.<\/li>\n
    4. The image from the download files was taken by a 21-megapixel digital camera, and is larger than we need to display on a web site. Additionally, since we\u2019ve made some adjustments and want to retain our master file as a PSD, we\u2019ll need to create an optimized image for use on a website or on social media. To optimize images for online use, we use the Export features in Photoshop\u00ae. Choose File > Export > Export As…<\/strong> to open the Export As interface. Photoshop\u00ae and Illustrator\u00ae both have this tool available, allowing you to to resizes and compress your images, flatten layers, and prepare an image for the web all while retaining your original master file.\"Exporting<\/li>\n
    5. The Export As dialog has several important parameters to set. The most important parameter is the Format<\/strong> listed under \u201cFile Settings\u201d in the top right of the interface. As a general rule, photographic images and other images continuous tone or a large range of colors are saved as JPEGs. Graphic images \u2014 images with few colors, such as logos and line art \u2014 are saved as PNGs or GIFs. Since this image is a photograph, select JPEG from the Format pull-down menu.\"Screen<\/li>\n
    6. Some of the Formats available in the Export As dialog are also available through File > Save As, including the JPEG format. However, using the Export As dialog gives a greater amount of control over JPEG compression settings and prepares the image for web use in a few other ways that Save As doesn\u2019t. We\u2019ll start with the Quality<\/strong> setting.First, notice that at the bottom of the Export As dialog are some zoom controls. Click on the + button there to zoom in and view the image at 100%. We\u2019ll want to be looking closely at the image to more easily see the effect of JPEG compression.\n

      \"ScreenAlso note that the left side of the Export As interface shows information related to the optimized image. At this stage, we want to pay particular attention to the estimated file size of the optimized image, which at 100% Quality is about 4.9MB. This is important because the smaller the file size is, the faster the image will download as part of a web page. The 4.9MB file size is a very large or \u201cheavy\u201d file and will increase download time unnecessarily.<\/p>\n

      \"Screen<\/p>\n

       <\/li>\n

    7. In the File Settings section at the right of the Export As dialog, set the Quality setting to 0% by typing into its box or clicking on its down arrow and using the slider. Watch the image closely as you make this change and you will see differences in the image quality appear. Saving an image in JPEG format compresses the saved image into a smaller file size by removing pixel detail from specific areas in the image. This is called lossy compression.The JPEG format lossy leaves what are known as compression artifacts in the image. These show up as blurry or pixelated areas in an image, which you may have noticed in heavily compressed images online. JPEG compression artifacts most often show up in areas of solid or nearly-solid color, or around edges of objects in an image.
      \n
      \"Screen
      Notice the loss of detail and the appearance of JPEG compression artifacts when comparing the image preview at Quality settings of 100% and 0%.<\/figcaption><\/figure>\n

      \"Screen<\/p>\n

      Along with seeing a preview of the compressed image in the center of the Export As dialog, the estimated file size is also updated when you change the Quality setting. Notice that the image information in the area at the left of the dialog now lists the file size at around 223.5KB.<\/p>\n

      \"Screen<\/p>\n

      Note: The human eye cannot easily detect image compression artifacts if a small amount of compression is used and the image is viewed on a computer screen. Photoshop\u00ae JPEG compression presets run from Low to Maximum, and correspond to a numerical range from 0 to 100. Zero is a very low quality, where you will definitely be able to notice the loss of quality as visible compression artifacts in the image, while the maximum 100 level (although still having had image data thrown away) shows no visible decline in quality. The trade-off is that more compression creates a smaller file. Weigh your needs for file size against your perception of image quality to decide what level of compression to use on a case-by-case basis.<\/div>\n

       <\/li>\n

    8. While the file size at 0% quality is nice and small, the image doesn\u2019t look as good as it could. We want to find a balance between a nice looking image (not covered in artifacts) and a file size under 1MB. Increase the Quality to 60% and watch the areas of the image where you noticed the artifacts at 0%. On average, a Quality setting between 60% and 80% is where you\u2019ll end up when looking at image quality, though this will vary depending on the amount of detail and texture in any particular image that you\u2019re compressing. Notice that the compressed file size at 60% quality is 1.1MB, we\u2019ll address that in the next step since we do want a smaller file size.\"Screen<\/li>\n
    9. In addition to compression, we can also reduce file size in this case by reducing the pixel dimensions of the image. We can do this directly in the Export As dialog, without permanently altering our master image file. Locate the Image Size section of the dialog, underneath the File Settings section on the right side. The original pixel dimensions are 5760×3840 pixels, which is much larger than we need to display online.\n

      Computer monitors and mobile devices have a wide range of screen sizes these days. In order to deliver images that are sized appropriately for different devices and Internet connections, it is often necessary to prepare multiple sizes of an image for online use. For this exercise, we\u2019ll prepare two optimized sizes of this image.<\/p>\n

      For desktop computers, let\u2019s scale the image down to a width of 1600px. Edit the Width value under the Image Size settings and the height will be scaled proportionally to 1066px. To help our scaled image\u2019s quality, also set the Resample<\/strong> drop-down to Bicubic Sharper<\/strong>. This will result in sharper detail when Photoshop\u00ae re-interpolates the image\u2019s pixels while generating the smaller size. Your Image Size settings should match those shown below.<\/p>\n

      \"Screen<\/p>\n

      Notice that this has reduced the optimized file size from 1.1MB down to 125.1KB. This is much more acceptable and our image quality is looking pretty good.<\/p>\n

      \"Screen<\/li>\n

    10. Now we\u2019ll create an additional optimized file for mobile screens using the Scale All<\/strong> controls in the upper left corner of the Export As dialog. In the previous steps, we\u2019ve just defined the settings for our 1x<\/strong> optimized image. In the Suffix<\/strong> field, enter _desktop<\/strong> then click the +<\/strong> button in the Scale All box to add another size for this image.\n

      \"Screen<\/p>\n

      Clicking the + button will create an additional optimized copy of the image. For this second optimized copy, set the Size<\/strong> drop-down to 0.5x<\/strong> and enter _mobile<\/strong> in the Suffix<\/strong> box.<\/p>\n

      \"Screen
      \nNow click the Export All\u2026<\/strong> button in the lower right of the dialog, choose where to save your optimized files, and click the Export button. You should end up with two .jpg files in the folder you saved to: one named ch12-yourlastname-firstname_desktop,jpg<\/em> and the other named ch12-yourlastname-firstname_mobile.jpg<\/em> with file sizes around 122KB and 45KB, respectively. Notice that the _mobile image has pixel dimensions of 800×533.<\/p>\n

      Note: File naming standards for the web use only lowercase letters, alphanumeric characters, underscores, and dashes (no spaces).<\/div>\n

      If you open each of the JPEGs in Photoshop\u00ae, you\u2019ll also notice that their resolution is set to 72ppi. The Export All process also reduces the ppi since images for display on the web or exclusively on screens typically use a standard 72ppi setting.<\/p>\n

      We\u2019re finished with the ch12-yourlastname-firstname.psd file, so you may save and close it.<\/li>\n<\/ol>\n","protected":false},"author":515,"menu_order":1,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["xtine-burrough","michael-mandiberg"],"pb_section_license":"cc-by-nc-sa"},"chapter-type":[48],"contributor":[65,64],"license":[56],"class_list":["post-1147","chapter","type-chapter","status-publish","hentry","chapter-type-numberless","contributor-michael-mandiberg","contributor-xtine-burrough","license-cc-by-nc-sa"],"part":1128,"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/pressbooks\/v2\/chapters\/1147","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":1,"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/pressbooks\/v2\/chapters\/1147\/revisions"}],"predecessor-version":[{"id":1148,"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/pressbooks\/v2\/chapters\/1147\/revisions\/1148"}],"part":[{"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/pressbooks\/v2\/parts\/1128"}],"metadata":[{"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/pressbooks\/v2\/chapters\/1147\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/wp\/v2\/media?parent=1147"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/pressbooks\/v2\/chapter-type?post=1147"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/wp\/v2\/contributor?post=1147"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/designandproductionforpr\/wp-json\/wp\/v2\/license?post=1147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}