Table of Contents for
Graphics and Multimedia for the Web with Adobe Creative Cloud: Navigating the Adobe Software Landscape

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Graphics and Multimedia for the Web with Adobe Creative Cloud: Navigating the Adobe Software Landscape by Jennifer Harder Published by Apress, 2018
  1. Navigation
  2. Cover
  3. Front Matter
  4. Part I. Welcome to the Adobe Creative Cloud. Where Should You Begin?
  5. 1. Entering the Software Maze or Labyrinth
  6. Part II. Working with Photoshop to Create Web Graphics and Animations
  7. 2. Getting Started
  8. 3. Color Choices: CMYK, RGB, Grayscale, and Index
  9. 4. Saving or Exporting Your Files for the Web
  10. 5. Actions to Speed up File Conversion and Slicing Tools
  11. 6. Tools for Animation
  12. 7. Tools for Video
  13. 8. Other Miscellaneous Items in Photoshop That You Can Use for Web Design
  14. 9. Putting It into Practice with Photoshop CC
  15. Part III. Working with Illustrator to Create Web Graphics
  16. 10. Getting Started with Illustrator CC
  17. 11. Color Choices: CMYK, RGB, and Grayscale
  18. 12. Saving or Exporting Your Files for the Web
  19. 13. Actions to Speed up File Conversion and Slicing Tools
  20. 14. Tools for Animation and Video
  21. 15. Other Miscellaneous Items in Illustrator That You Can Use for Web Design
  22. 16. Putting It into Practice with Illustrator CC
  23. Part IV. Working with Animate to Create Animations, Movies, and HTML5 Canvas
  24. 17. Getting Started with Animate CC
  25. 18. Color Choices: RGB
  26. 19. Importing Your Artwork
  27. 20. Import Your Audio and Video
  28. 21. Working with the Timeline Panel
  29. 22. Exporting Your Files to the Web
  30. 23. Other Miscellaneous Items in Animate that You Can Use for Web Design
  31. 24. Putting It into Practice with Animate CC
  32. Part V. Working with Media Encoder to Create Audio and Video Files
  33. 25. Getting Started with Media Encoder
  34. 26. Working with Your RAW Video Files (AVI and MOV)
  35. 27. Working with Your RAW Video Files and Converting Them to Audio
  36. 28. Working with Your RAW Video Files and Converting Them to an Image Sequence
  37. 29. Putting It into Practice with Media Encoder CC
  38. Part VI. Working with Dreamweaver: Adding Images, Animations, and Multimedia to HTML5 Pages
  39. 30. Getting Started with Dreamweaver CC
  40. 31. Working with Images and Tags
  41. 32. Working with CSS
  42. 33. Working with Images for Mobile Web Design
  43. 34. What Is JavaScript?
  44. 35. Working with Bootstrap, Templates, Library Items, and the Assets Panel
  45. 36. Working with Video, Audio, and Animations
  46. 37. Additional Options to Apply Images in Dreamweaver
  47. 38. Final Testing, Getting Ready to Upload Your Site
  48. 39. Putting It into Practice with Dreamweaver CC
  49. Part VII. Further Dreamweaver Integration with Other Adobe Products for Websites
  50. 40. What Other Programs That Are Part of Adobe Creative Cloud Can I Use to Display My Graphics or Multimedia Online?
  51. Back Matter
© Jennifer Harder 2018
Jennifer HarderGraphics and Multimedia for the Web with Adobe Creative Cloudhttps://doi.org/10.1007/978-1-4842-3823-3_4

4. Saving or Exporting Your Files for the Web

Jennifer Harder1 
(1)
Delta, BC, Canada
 

In this chapter, you are going to explore some of the many ways that are available to you to export your images for the web using Photoshop. Adobe has a variety of ways to do this; some of the options appear to overlap, so at times, it can get confusing to know which options are best for your project.

Note

This chapter does not have any actual projects; however, you can use the files in the Chapter 4 folder to practice opening and viewing for this lesson. They are at https://github.com/Apress/graphics-multimedia-web-adobe-creative-cloud .

At this point in building your website using Photoshop CC, you probably have designed some artwork for your website; perhaps graphic buttons, images for a gallery, or a patterned background. After you have designed your artwork for your website, you want to start saving it for the web. Photoshop offers several ways to export your web-ready files. If you need a more detailed description of each of these file types, refer to Chapter 1. Table 4-1 describes which file formats are available under the various File menu options.
Table 4-1

Export Options Available in Photoshop CC Under the File menu. (For more information, go to the section listed above each file.)

File Format

(Option 1)

File ➤ Save As

(Option 2)

File ➤ Export ➤ Quick Export as PNG*

(Option 3)

File ➤ Export ➤ Export As

(Option 4)

File ➤ Export ➤ Save For Web (Legacy)

Bitmap (.bmp)

✓

   

WBMP or Wireless Bitmap (.wmb, .wbmp)

   

✓

JPEG (.jpg, .jpeg, .jpe)

✓

✓(when Export preferences are altered)

✓

✓

PNG (8 and 24)(.png)

✓

✓(default)

✓

✓

GIF (static and animated) (.gif)

✓(static)

✓(static, when Export preferences are altered)

✓(static)

✓(static and animated)

SVG(.svg)

 

✓(when Export preferences are altered)

✓

 

Photoshop PDF (.pdf)

✓

   

Note

One file type not discussed in Chapter 1 was WBMP or Wireless Bitmap (.wmb, wbmp). WBMP images are monochrome (black and white) so that the image size is kept to a minimum. A black pixel is denoted by 0 and a white pixel is denoted by 1. For colored images, Wireless Application Protocol (WAP) supports the PNG format. This type of graphic is used in mobile computing devices.

As you can see, Photoshop CC offers at least four ways to save your files for the web. Later in this chapter, we will look at a few more hidden export features.

For now, let’s look at the four main options; refer to Table 4-1 if you need to compare information.

Option 1: File ➤ Save As…

File ➤ Save As... is probably the fastest option to use if you only have one or two images to add to your website (see Figure 4-1).
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig1_HTML.jpg
Figure 4-1

Photoshop allows you to save a copy of your artwork in another format using File ➤ Save As

You are then presented with options from the Save as type drop-down menu in the Save As dialog box, as seen in Figure 4-2.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig2_HTML.jpg
Figure 4-2

The options found in File ➤ Save As in the Save as type drop-down menu

However, as you see in Figure 4-2, you can’t adjust or preview initial settings for that file until you click the Save button. Depending on the file format, only then are you able to click the preview check box in that particular file format’s dialog box. Whatever format type you choose, you can’t switch to another file format to compare both of your options at the same time.

To avoid overwriting your current file, if it’s in the same folder, select As a Copy in Save Options. Depending on the file type chosen, some options are not available. You can also confirm the color profile for this file as well. When done, click the Save button to save your file, or Cancel to exit, as seen in Figure 4-3.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig3_HTML.jpg
Figure 4-3

Before you save a file, you can save as a copy to prevent the file from being overwritten, as well as choose a color profile if it has not already been set

Note

You may get a Warning button (see Figure 4-4) if your file contains layers. If you click it, it states that the file must be saved as a copy, which flattens that copy.

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig4_HTML.jpg
Figure 4-4

Click the Warning button if you are worried that your file may have issues before you save

Next are some settings that may appear for each web file format when you click the Save button.

Bitmap (BMP)

A bitmap, which is common to Windows computers, can be a created from a scan with your home or office scanner. It also can be used on a website. Often, its file size is large. Generally, when a person builds a website, they want to keep the images small so that they upload quickly. If you want to save a file as a .bmp file, you can adjust the setting in the BMP Options dialog box. Figures 4-5 and 4-6 show basic and advanced modes; use the button to toggle between the two.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig5_HTML.jpg
Figure 4-5

BMP Options dialog box Basic Modes, use lower toggle button to see advanced modes

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig6_HTML.jpg
Figure 4-6

BMP Options dialog box Advanced Modes use lower toggle button to return to basic modes

The BMP file options have a toggle that you can use to set in either Basic Modes or Advanced Modes. In Basic Modes, you can set the file format to Windows or OS/2. You can also adjust the bit depth to 16, 24, or 32. Note that because I used the .bmp file extension, Compress (RLE) is unavailable. The “Flip row order” box refers to how the encoding is written, either from bottom to top or in reverse. According to Adobe, “Advanced Modes are most relevant to game programmers and others using DirectX.”

JPEG

When you save your file as a (.jpg), the JPEG Options dialog box allows you to alter your setting while previewing your image, as seen in Figure 4-7.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig7_HTML.jpg
Figure 4-7

Options in the JPEG Options dialog box

If the image (.psd) has more than one layer with some transparent areas in the image, and there is no background (Layer 0), then the Matte background option is available; otherwise, it is set at the default None, so its unavailable. For color options, you can choose the current Foreground or Background colors that are in your Tools panel. You can also choose White, Black, 50% Gray, or Netscape Gray, which is about 25% gray (see Figure 4-8).
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig8_HTML.jpg
Figure 4-8

Matte color options when available

Custom brings up the Color Picker window, where you can choose whatever color you want. When it opens, it shows the last color that you picked in the list (in this case, Netscape Gray). Figure 4-9 shows the options.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig9_HTML.jpg
Figure 4-9

Choose a custom color using the Color Picker

Image Options refer to the quality of the image. You can either adjust the quality by typing a number quality from 0 to 12, by choosing a setting from the drop-down menu (Low, Medium, High, or Maximum), or by dragging the slider between the small file and the large file. Whatever option you choose, the number box, drop-down menu, and slider all reflect the changes, as seen in Figure 4-10.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig10_HTML.jpg
Figure 4-10

Choose an image quality setting

The number 0 results in a low, grainy image, while a high number like 12 results in a larger image with maximum quality. The size of the file can be seen in the Preview setting.

You can also choose Format Options.

  • Baseline (“Standard”): Recognized by most web browsers and good for photos that need decent quality. It is supported by all browsers.

  • Baseline Optimized: Similar to standard but compresses the file a little more. Depending on the image, the quality is indistinguishable from baseline standard.

  • Progressive: Creates an image that displays gradually as it downloads. It appears as if the image is rendered as scan lines (like in the days of the old-fashioned tube TVs). At first, the browser quickly shows a reduced quality image of half the scan lines while it resolves the complete image. You can set between three and five scans to take place in this setting: however, with a fast Internet connection, this setting is not used as often.

Note

According to Adobe, some browsers do not support progressive JPEGs, so if you want to use this setting, run a test first.

PNG

The PNG is considered a good compromise between a JPEG and a GIF since it can be used for photos that retain good color quality and can maintain transparency. However, you will notice that if you use the File ➤ Save As option for your image, you do not have access to the preview or transparency in PNG Format Options. Refer to Figure 4-11.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig11_HTML.jpg
Figure 4-11

PNG Format Options dialog box for File ➤ Save As

The following are available.

  • Large file size (Fastest saving): Less compression is applied, so it saves faster.

  • Interlacing: Similar to the Progressive option in the JPEG setting. The image loads in parts, gradually becoming clearer with each scan.

  • Medium file size (Medium saving): Some compression is applied, so it saves more slowly than large.

  • Smallest file size (Slowest saving): More compression is applied to the file and it may take longer to save.

Unlike the JPEG dialog box, you won’t know how small your file will be until after it is saved.

CompuServe GIF

Because GIFs only use 256 indexed RGB colors, they are best for items that contain solid areas of graphics, such as logos or cartoon illustrations. The fewer the number of colors, the smaller the file size. Photos do not always reproduce at the best quality in a GIF. You can preview a GIF behind the dialog box, and a color lookup table is produced for the GIF. If a color cannot be reproduced, it is dithered to simulate the color. You can also reach this same dialog box via Image ➤ Mode ➤ Indexed Color, but that will affect the current image and not a copy. Either way, you may be asked to flatten the image if you have not already done so. Click OK. Refer to Figure 4-12.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig12_HTML.jpg
Figure 4-12

Index color options as seen in the Indexed Color dialog box

You can control the number of colors that the file has by using the Palette drop-down menu to set the colors that best represent the image, as seen in Figure 4-13.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig13_HTML.jpg
Figure 4-13

Choose an option from the Palette drop-down menu

The following options are from the Palette drop-down menu.

  • Exact: Shows the current number of colors. Some files will have less than 256 colors.

  • System (Mac OS): 256 colors for a macOS system palette.

  • System(Windows): 256 colors for a Windows system palette.

  • Web: 216 colors, also known as Restrictive. This compensates between Mac and PC computer monitors. If your image does not have 216 colors, the number of colors may be lower.

  • Uninform: Type your own setting into the Colors area.

  • Local (Perceptual): Creates a custom pallet of color that gives priority to the colors that the human eye has greater sensitivity to, or that are more pleasing. (Master refers to a master palette that you may have created earlier).

  • Local (Selective): Similar to Perceptual, but also favors the broad range of continuous colors and the preservation of colors on the web. This usually produces an image with the greatest color integrity.

  • Local (Adaptive): Samples colors that appear most commonly in the image. Images with a majority of red have a greater concentration of red shades.

  • Custom: Allows you to create a custom pallet in the Color Table dialog box at Image ➤ Mode ➤ Color Table, as you can see in Figure 4-14.

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig14_HTML.jpg
Figure 4-14

A color table with different options appears when you choose Custom from the Indexed Color Palette

You can click a color block and then edit it in the color picker, as seen in Figure 4-15. You can then save or load a table. It is saved as an .act file.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig15_HTML.jpg
Figure 4-15

Accessing the color picker from the Color Picker (Table Color) dialog box

The Color Table’s Eyedropper tool (on the right in Figure 4-14) allows you to sample colors.

The following continues from the drop-down palette menu Figure 4-13.

  • Previous: A custom pallet from a previous conversion.

  • Colors: Determines the exact number of colors in the image, as seen in Figure 4-16.

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig16_HTML.jpg
Figure 4-16

The exact number of colors in the GIF image

  • Forced: This includes specified colors to be included in the conversion, such as black and white, primaries (red, green, blue, cyan, magenta, yellow, black and white), Web (216 web safe color), or your own custom colors that you can sample using the Color Picker when you click a color, as seen in Figure 4-17.

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig17_HTML.jpg
Figure 4-17

Forcing specific colors in the GIF image

The Transparency option lets you determine if the image contains transparency. If it is unchecked, the image is filled with a matte color of choice (see Figure 4-18).
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig18_HTML.jpg
Figure 4-18

Choose Transparency if you want your GIF image to have a transparent background

Let’s look at the Options section of the Indexed Color dialog box. If the original image has transparent areas, more than one layer, and no background (Layer 0 or turned off), the Matte background option is available; otherwise; it is default at None, so unavailable. As with JPEG images, earlier similar color settings are available. Refer to Figure 4-19.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig19_HTML.jpg
Figure 4-19

This Matte drop-down menu can only be accessed if your background is transparent and your file has more than one layer

  • Custom: Brings up the color picker so you can choose your own color. The custom color or any Matte option will then blend into the area where the transparency once was.

  • Dither: When you reduce the number of colors, the image may not blend well. You can use the options shown in Figure 4-20 to adjust this.

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig20_HTML.jpg
Figure 4-20

Options for setting the amount of dither

  • None: The default for no dither.

  • Diffusion: A random structure dither that is good for preserving delicate details and text in logos.

  • Pattern: A halftone-like square pattern.

  • Noise: Reduces the edge pattern if you are working with edges if you plan to slice your image for an HTML background with a <div> tag or within a table. (You will look at slices in Chapter 5.)

  • Amount: You can adjust the amount of dither by percentage. Refer to Figure 4-21.

  • Preserve Exact Colors: This preserves the colors in the table from dithering.

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig21_HTML.jpg
Figure 4-21

Options for setting the dither by percentage to refine the amount

Photoshop PDF

A PDF does not preview unless you click the file link on a web page and it is downloaded into the browser. You may want to save some images as a PDF by using Photoshop rather than placing them in a program like Adobe InDesign CC and then saving the file as a PDF. Either way, make sure that Acrobat DC Pro is installed on your computer so that you can use the distiller to create the PDF. Refer to the program icons shown in Figure 4-22.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig22_HTML.jpg
Figure 4-22

The Acrobat Pro DC and Acrobat Distiller icons; to create a PDF, these two programs should be installed on your computer

When you save the file as a Photoshop PDF, you receive the alert shown in Figure 4-23.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig23_HTML.jpg
Figure 4-23

The Photoshop alert you may receive when you choose to create a PDF

Click OK and continue to the next dialog box. If you have used a program like Adobe InDesign CC, you will find the export setting familiar.

Here you are presented with various tabs, including Presets, Standards, and Compatibility, which you can choose from the drop-down menus. Refer to Figure 4-24 to see the assorted options and click the tabs on the left to get an overview of these settings.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig24_HTML.jpg
Figure 4-24

Setting for the Save Adobe PDF dialog box

  • General: The main settings that allow you to preserve the file should you want to edit it again in Photoshop, embed a thumbnail, optimize for fast web preview, or view the PDF after saving.

  • Compression: Distinct options for down sampling images and adjusting image quality within the PDF. Refer to Figure 4-25.

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig25_HTML.jpg
Figure 4-25

Compression options for the Save Adobe PDF dialog box

  • Output: Deals with color and file conversion, as seen in Figure 4-26.

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig26_HTML.jpg
Figure 4-26

Output options for the Save Adobe PDF dialog box

Security: Sets security features for an image so that users who don’t know the password can’t open, print, or edit it, including those with screen readers. If you don’t want security, leave these settings unchecked. Refer to Figure 4-27.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig27_HTML.jpg
Figure 4-27

Security options for the Save Adobe PDF dialog box

  • Summary: Lists all the settings and any warnings that may need to be corrected before pressing OK. Refer to Figure 4-28.

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig28_HTML.jpg
Figure 4-28

Summary options for the Save Adobe PDF dialog box

Once you have set your settings, click the Save PDF button in the bottom right of the dialog box (see Figure 4-24). A PDF is created, which you can view in Adobe Acrobat Pro DC or Reader.

Option 2: File ➤ Export ➤ Quick Export as PNG

You can use this option if you want to save a PNG file quickly without going through a dialog box: File ➤ Export ➤ Quick Export as PNG.

This option is only for PNG files. You cannot save the file in any other settings, and it only saves the file as a .png. Personally, I don’t like this because it does not provide a dialog box to choose settings if each image is slightly different.

If you want to know what the Quick Export setting is, you can check it under File ➤ Export ➤ Export Preferences. This opens the Preferences Export tab, where you can view or alter the settings. Refer to Figure 4-29.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig29_HTML.jpg
Figure 4-29

PNG preferences in the Quick Export Format option

Unlike in Option 1, however, you can choose if the PNG is transparent or not. Also, you can set the file to a smaller 8 bit or leave it at the larger size. Other options include the export location, metadata, and color space of sRGB. Click OK if you want to save the preference changes.

Note

If you find you work more with JPEGs, GIFs, or SVGs, you can change the quick export to one of those options and it will reflect in the Quick Export instead of PNG. However, you can only use them one at a time. I find the options a bit limiting when working with more than one file type.

JPEG

If you are in the Export options and you switch to JPEG, you can only set the quality by number. Options like standard and progressive are not available. You can set the export location, metadata, and sRGB color space, however. Refer to Figure 4-30.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig30_HTML.jpg
Figure 4-30

JPEG preferences for the Quick Export Format option

GIF

In the Quick export options you can switch to GIF, however there is no option to allow part of the GIF to remain transparent. Also, you cannot look at the color palette here. You can set the export location, metadata, and sRGB color space, however. Refer to Figure 4-31.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig31_HTML.jpg
Figure 4-31

GIF Preferences for the Quick Export Format option. You cannot set transparency here.

SVG

SVG is a scalable graphic format. You can keep the vector-like shape of the image so that it does not become pixelated when scaled larger, as the other bitmap images would be. You can set the export location, metadata, and sRGB color space. Refer to Figure 4-32.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig32_HTML.jpg
Figure 4-32

SVG Preferences for the Quick Export Format option

Quick Export Format is quick, but not always the best because it does not give all the options to format the images, or the option to preview your changes.

Options 3: File ➤ Export ➤ Export As…

The next option to look at is the Export As dialog box. This example allows you to control and preview your settings at the same time. As you can see, many of the options that are within the Export Preference settings can be found here. You can create several images with different scaling sizes and unique suffix names.

PNG

Choose PNG from the File Settings Format menu, as seen in Figure 4-33.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig33_HTML.jpg
Figure 4-33

PNG settings in the Export As dialog box

  • File Settings: Format: PNG or select another from the menu, set transparency, and set a smaller file size.

  • Image Size: You can scale the original size of the image by width, height, and percentage, and the way that the pixels resample. Refer to Figure 4-34.

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig34_HTML.jpg
Figure 4-34

Image resample options in the drop-down in the Export As dialog box

  • Bicubic: Examines the values of surrounding pixels. Using complex calculations, Bicubic produces smoother tonal gradations than Nearest Neighbor or Bilinear.

  • Bicubic Automatic: Chooses the resampling method based on the document type and whether the document is scaling up or down.

  • Bicubic Sharper: Reduces the size of an image based on bicubic interpolation with enhanced sharpening. This option maintains the detail in a resampled image. If Bicubic Sharper over-sharpens some areas of an image, try using Bicubic.

  • Bicubic Smoother: Produces smoother results when enlarging images based on bicubic interpolation.

  • Bilinear: Adds pixels by averaging the color values of surrounding pixels. It produces medium-quality results.

  • Nearest Neighbor: A fast but less-precise method that replicates the pixels in an image. Used with illustrations containing edges that are not anti-aliased to preserve hard edges and produce a smaller file. It has been known to produce jagged effects, which becomes apparent when you distort or scale an image or perform multiple manipulations on a selection of the graphic.

  • Preserve Details: A type of noise reduction for smoothing out noise as you upscale the image.

In this dialog box, you can also adjust canvas size separate from the image size, the metadata, and the color space. Refer to Figure 4-35.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig35_HTML.jpg
Figure 4-35

Examples of PNG settings in the Export As dialog box

JPEG

The JPEG format has a similar setting to PNG; however, you cannot adjust the matte background settings. Refer to Figure 4-36.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig36_HTML.jpg
Figure 4-36

Examples of JPEG settings in the Export As dialog box

GIF

The GIF format has setting similar to PNG; however, you cannot adjust the transparency or matte background settings. Refer to Figure 4-37.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig37_HTML.jpg
Figure 4-37

Examples of GIF settings in the Export As dialog box

SVG

SVG has settings similar to a PNG file; however, you cannot control the color profile as you can with the others. Refer to Figure 4-38.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig38_HTML.jpg
Figure 4-38

Examples of SVG settings in the Export As dialog box

When done, you can set more than one size for the same file on the left with the plus (+) icon. Next, choose Export All from the bottom of the dialog box, and then choose a folder to save the sizes in. The suffix that is added to the file lets you know which size was chosen. Use the Trash icon to remove sizes. Refer to Figure 4-39.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig39_HTML.jpg
Figure 4-39

Add sizes and then choose Export All to save the new web files

Option 3’s File ➤ Export ➤ Export As has a better preview option than Option 1’s File ➤ Save As, but it does not allow you access certain matte and transparency options that you might need for some image projects. Is there a way to have it all for your raster images?

Option 4: File ➤ Export ➤ Save for Web (Legacy)

Personally, Option 4 is my favorite method to use when it comes to saving files for the web. It offers the most options when it comes to working with GIF files. Refer to Figure 4-40.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig40_HTML.jpg
Figure 4-40

The Save for Web (Legacy) dialog box

The Save for Web (Legacy) dialog box has been used in many versions of Photoshop. It’s similar to Export ➤ As, but it has many more options, including allowing you to save a GIF with transparency or as an animation, as you can see in the lower-right animation panel. You can even access the color table as you would using File ➤ Save As ➤ GIF. What’s so wonderful about this layout is that you can use it to compare up to four layouts of the same image in different file formats or settings, and then you can choose which graphic adjustment looks best and uses the least amount of kbps (kilobytes per second). While size may not matter for viewing on your home computer, consider how fast the graphics load on a smaller device, like a tablet or smartphone. Refer to Figure 4-41.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig41_HTML.jpg
Figure 4-41

The Save for Web (Legacy) dialog box lets you view four settings at once: Original, JPEG, GIF and PNG

On the left side are a few tools. Refer to Figure 4-42.

  • The Hand tool (H) allows you to move to the different selections and moving all image previews in the tabs at the same time.

  • The Slice Select tool (C) allows you to select slices in an image and edit them if you created any earlier using the slice tool. You’ll look more at this tool later in Chapter 5.

  • The magnifying glass, or Zoom tool (Z), allows you to Zoom in on an area so that you can compare all images and their colors in that area at the same time.

  • The Eyedropper tool (I) allows you to select a color in the image and then check it in the Eyedropper Color pallet. Once you know the color, you can then use this color for a pallet background color, or add it to swatches, or check Color Libraries.

  • The last tool is Toggle Slices Visibility (Q), where you can turn the slices preview on or off as you preview an image.

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig42_HTML.jpg
Figure 4-42

The Save for Web (Legacy) tools to work with your image file

Moving over to the right, there are several different presets that you can choose from or make your own. While you can work with most web bit-map file formats. The only file format that you cannot preview in this area are SVGs, which are vector. If you are working with SVGs, refer to Option 3: Export As settings. Refer to Figure 4-43 for the presets.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig43_HTML.jpg
Figure 4-43

There are many presets you can choose from or you can create your own

In the menu, you can save settings and optimize file size, as well as link and unlink slices.

In the Color Table options (see Figure 4-44), you can add new colors, delete, edit, and sort colors so that you have the optimum quality and file size.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig44_HTML.jpg
Figure 4-44

The Save for Web dialog box allows you to sort colors for some files for optimum quality

Let’s now look at the file formats that we can work with for the web, and review some of their options.

GIF

While you can use several presets that are available to GIFs, as seen in Figure 4-43, you can create your own settings. Refer to Figure 4-45.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig45_HTML.jpg
Figure 4-45

The Save for Web (Legacy) dialog box setting for a static GIF file

In the next drop-down menu (color reduction algorithm), whatever option you choose will alter the color amount.

  • Perceptual: Creates a custom palette of color that gives priority to the colors that the human eye has greater sensitivity to, or that are most pleasing.

  • Selective: Similar to Perceptual, but also favors the broad range of continuous colors and the preservation of colors on the web. It usually produces an image with the greatest color integrity.

  • Adaptive: Samples colors that appear most commonly in the image. Images with a majority of red have a greater concentration of red shades.

  • Restrictive (Web: 216 colors): Compensates between Mac and PC computer monitors. If your image does not have 216 colors, they are removed. Sets Colors to Auto.

  • Custom: You can create a custom pallet in the Color Table dialog box. Sets Colors to Auto.

  • Black and White: Sets the colors to black and white. Sets Colors to Auto.

  • Grayscale: All the shades of gray. Sets Colors to Auto.

  • System (Mac OS): There are 256 colors for a macOS system palette. Sets Colors to Auto. The color table differs by operating system.

  • System(Windows): There are 256 colors for a Windows OS system palette. Sets Colors to Auto. The color table differs by operating system.

The following are in the Specify the Dither Algorithm drop-down menu.

  • No dither: The default for no dither or none.

  • Diffusion: A random structure dither that is good for preserving minute details and text in logos.

  • Pattern: A halftone-like square pattern.

  • Noise: This reduces the edge pattern if you plan to slice up your image for an HTML background with <div> tag or within a table. (You will look at slices later in chapter 5.)

  • Dither: You can adjust the amount of dither by percentage. Check whether you want transparency and then choose the type of dither, which is like the other dither setting but for transparent sections in the Specify transparency Dither Algorithm drop-down menu.

    • No Transparency Dither

    • Diffusion Transparency Dither

    • Pattern Transparency Dither

    • Noise Transparency Dither

  • Amount: You can adjust the amount of transparency dither by percentage. If you are not using a transparent background, set a matte color that fills in the transparent area, which can be the same as the background color for your site or whatever color you choose. Do this in Other, which brings up the color picker. Refer to Figure 4-46.

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig46_HTML.jpg
Figure 4-46

The Save for Web (Legacy) dialog box setting for matte color background

  • Interlaced: Similar to the Progressive option in the JPEG setting. The image loads in parts, gradually becoming clearer with each scan.

  • Web Snap: Snaps close colors to web pallet based on tolerance.

  • Lossy: Controls the amount of file compression for that specific file format.

  • Covert to sRGB: Makes sure the file is in the correct sRGB setting.

  • Preview: Displays how the colors appear in monitors or screens.

  • Metadata: Sets information on the file, such as copyright and contact information.

  • Color Table: Shows which colors are currently in the table. You can edit these settings.

  • Image Size: Allows you to adjust the size of the image using pixels in a uniform proportions (linked), separately (unlink), or by percentage, and sets the quality.

The following are from the quality (resampling method) drop-down menu:

  • Nearest Neighbor: A fast but less-precise method that replicates the pixels in an image. Used with illustrations containing edges that are not anti-aliased to preserve hard edges and produce a smaller file. It has been known to produce jagged effects, which becomes apparent when you distort or scale an image, or perform multiple manipulations on a selection of the graphic.

  • Bilinear: Adds pixels by averaging the color values of surrounding pixels. It produces medium-quality results.

  • Bicubic: Exams of the values of surrounding pixels. Using complex calculations, Bicubic produces smoother tonal gradations than Nearest Neighbor or Bilinear.

  • Bicubic Smoother: For enlarging images based on Bicubic interpolation but designed to produce smoother results.

  • Bicubic Sharper: Reduces the size of an image based on bicubic interpolation with enhanced sharpening. This option maintains the detail in a resampled image. If Bicubic Sharper over sharpens some areas of an image, try using Bicubic.

You can also preview a GIF animation and choose the amount of time it loops. We look at this setting in more detail in Chapter 6.

JPEG

JPEG has some similar settings to GIF in this dialog box. You will only note the different settings here. Refer to Figure 4-47.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig47_HTML.jpg
Figure 4-47

The Save for Web (Legacy) dialog box JPEG setting

You can either set the quality via the drop-down menu (Low, Medium, High, Very, High, or Maximum) or in the Quality text box by typing or using the slider. They all reflect the results of the change. Refer to Figure 4-48.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig48_HTML.jpg
Figure 4-48

The Save for Web dialog box setting JPEG quality control

  • Progressive: Refers to how the quality becomes greater with multiple passes or scans.

  • Blur: Can be adjusted to reduce artifacts or graininess in a photograph, though the image may not appear as sharp and clear as it was before.

  • Matte: Since JPEGs cannot have transparency, adding a matte background to match your website’s solid background is an appropriate choice in an area you would normally consider transparent.

  • Embed Color Profile: Allows you to include color information with the file (ICC Profile).

As with GIFs, you can make sure they are set to sRGB, view a preview, and set the metadata. You cannot use the Color Table because the file is in RGB and not indexed. Digital Photos in the JPEG format use many more colors, so there would be too much color information to include in a color table.

Like the GIF files, you can also adjust the size and quality of the image with various settings.

PNG-8

This file format for 8-bit files has many of the same settings as a GIF file (refer to this area if you are unsure what an unfamiliar setting does). You will look at only the different ones here. Refer to Figure 4-49.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig49_HTML.jpg
Figure 4-49

The Save for Web (Legacy) dialog box setting PNG-8

Like GIFs, you can set transparency and work with the Color Table.

  • Embed Color Profile: Allows you to include color information with the file (ICC Profile).

Note

Unlike GIFs, you cannot set lossy compression, and you must use the other settings to reduce the file size. Like GIFs and JPEGs, you can adjust the image size and its quality with the settings in the lower right.

PNG-24

PNG (24 bit) has fewer settings than PNG-8 because it is a higher-quality file. Many of the settings are like the GIF; however, I will only note the different ones here. Refer to Figure 4-50.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig50_HTML.jpg
Figure 4-50

The Save for Web (Legacy) dialog box setting PNG-24

PNG-24 files can contain varying degrees of transparency (0–100%) that you built in your original file. Matte is not available if transparency is checked, since it blends into the web background.

As with the PNG-8, you can embed the color profile, preview, and add metadata. Because PNG-24 uses a large number of colors, like a JPEG, you cannot use the color table to check the colors. Like the other formats, you can still use the Image Size area to adjust the size and quality.

WMBP

WBMP is a file format that you haven’t worked with yet. WBMP, or Wireless Bitmap (.wmb, wbmp), images are monochrome (black and white) so that the image size is kept to a minimum. A black pixel is denoted by 0 and a white pixel is denoted by 1. For colored images, Wireless Application Protocol (WAP) supports the Portable Network Graphics (PNG) format. This type of graphic is used for mobile computing devices. Refer to Figure 4-51.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig51_HTML.jpg
Figure 4-51

The Save for Web (Legacy) dialog box setting WBMP

There are few similar settings that you can adjust, such as dither, but since it is black and white, the image can look very grainy and low quality.

The other things you can do in this dialog box are preview the image in the browser of your choice, and then save the files in the correct folders. Refer to Figure 4-52.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig52_HTML.jpg
Figure 4-52

When you have completed the setting for your images, you can either preview or save them

When you click Save, you are presented with options, such as those seen in Figure 4-53.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig53_HTML.jpg
Figure 4-53

Options when you save your image

  • HTML and Images: This is an option if you are working with slices and you want to keep the shape of the page as you have in Photoshop. You could bring this file into Adobe Dreamweaver and continue to edit the layout.

  • Images Only: Best if you are only working with single images and will add them to Dreamweaver wherever they are required.

  • HTML Only: Use the basic layout you created and exclude the images. I don’t use this option often because I prefer to create my layout using Dreamweaver; however, if you’re working in a group, check with your team what method they prefer for their workflow.

  • Settings: I usually leave the settings at default. However, you can choose custom, background image, XHTML, or more advanced custom settings. Refer to Figure 4-54.

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig54_HTML.jpg
Figure 4-54

Options for when you save your image and default or custom settings

If your file has slices, you can choose to export all the slices or only the User(created) or Slices (user and auto) that were selected. You’ll look at slices in Chapter 5.

Additional Options That You Can Use to Export Files for the Web

Depending on how you have built your original file, it may contain one of the items discussed in the following sections.

Artboards

You can either create an artboard when you start a file (File ➤ New) or while building it. In the Layers panel, in the upper-side menu, choose New Artboard. You can then use the Properties panel to modify it further.

Artboards are great if you must design layouts for multiple devices and want to store them all in one file. Each artboard is like a folder that contains a collection of layers. Refer to Figure 4-55.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig55_HTML.jpg
Figure 4-55

How multiple artboards could appear in the Layer panel if the option is checked when you create a new document

To Export you your artboards, you can choose File ➤ Export ➤ Export As (all artboards will be exported in the file).

The web files that you can export include BMP, JPEG, PDF, PNG-8, and PNG-24; you cannot export as a GIF or SVG using this option.

Artboards To Files provides exporting options if you check Export Options, but the choices are limited. Refer to Figure 4-56.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig56a_HTML.jpg../images/466782_1_En_4_Chapter/466782_1_En_4_Fig56b_HTML.jpg
Figure 4-56

Options for the Artboards To Files dialog box

Note

Artboards To PDF has the exact same layout; however, you can only choose a PDF file type.

When you have adjusted the settings , click the Run button so that you can save the files.

For more information on working with artboards, check out

https://helpx.adobe.com/photoshop/using/artboards.html .

Layer Comps

Sometimes a designer has multiple variations of a similar file. In this case, they might want to create a layer comp and store them all in one file. In the Layer Comps panel, you can store various states for your clients to view, such as layer visibility (visible or invisible), layer position within the document, and layer appearance (styles and blending mode). Refer to Figure 4-57.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig57_HTML.jpg
Figure 4-57

The Layer Comps panel

If you want to export your layer comps for the web, you can select File ➤ Export ➤ Layer Comps To Files or Layer Comps To PDF. Refer to Figure 4-58.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig58_HTML.jpg
Figure 4-58

The layer comps settings are similar to artboards

However, as you can see, some options for export are limited, and you cannot export as a GIF or SVG using this option.

Note

To export a layer comp as a PDF, the file must be saved first. The History panel has an item similar to Layer Comps called Snapshot (camera icon). Snapshots cannot be saved once the file is saved closed. If you want to save a snapshot rather than a layer comp, you can use the Create New Document from the current state icon. Refer to Figure 4-59.

../images/466782_1_En_4_Chapter/466782_1_En_4_Fig59_HTML.jpg
Figure 4-59

Example of using a snapshot in the History panel

For more information on layer comps , refer to https://helpx.adobe.com/ca/photoshop/using/layer-comps.html .

Layers

Most .PSD or Photoshop documents contain one or more layers. If you can’t find your Layers panel, look under Window menu ➤ Layers.

If you just have a document with multiple graphic layers, such as buttons, you can use File ➤ Export ➤ Layers to Files. Refer to Figure 4-60.
../images/466782_1_En_4_Chapter/466782_1_En_4_Fig60_HTML.png
Figure 4-60

Export Layers To Files

As you can see, some options for export are limited, and you cannot export as a GIF or SVG using this option .

Note

A final option available for exporting options is File ➤ Generate ➤ Image ➤ Assets. You can use this with the Layers panel to further generate images that are JPEG, PNG, or GIF. To do this, you have to name each layer in a specific way, which can get quite complicated. If this is an option you are interested in, for more information visit https://helpx.adobe.com/photoshop/using/generate-assets-layers.html .

Summary

This chapter covered a lot of ground as it relates to exporting images in the correct file formats. Depending upon your workflow, you may prefer some options over others; the choice is up to you. In the next chapter, you look at some of the tools used in Photoshop CC to speed up automation in exporting and slicing images.