© Jennifer Harder 2018
Jennifer HarderGraphics and Multimedia for the Web with Adobe Creative Cloudhttps://doi.org/10.1007/978-1-4842-3823-3_3

3. Color Choices: CMYK, RGB, Grayscale, and Index

Jennifer Harder1 
(1)
Delta, BC, Canada
 

In this chapter, you explore some of the color options that are available and that are appropriate to use for your web projects.

Note

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

When you are working with files, you want to make sure that the file that will be part of the website is in the correct color mode. If you are starting with a new piece of artwork, you need to consider what is required to achieve optimum quality. When you create a new file in Photoshop (File ➤ New), you want to make sure that your starting file is saved as RGB, which is the color channel of the monitor on which you will view the website while building it. Refer to Figure 3-1.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig1_HTML.jpg
Figure 3-1

Choosing the correct RGB color mode in the File ➤ New dialog box

The following are other available color mode options:

  • Bitmap : A low-res one-color file, often black and white, that can be used for simple line drawing. This is not the same as a (.bmp) file, which can have many colors.

  • Grayscale : An image that has many shades of gray; good for black and white photography, you can have this color format on the web, but there are more options in Photoshop if you save as RGB.

  • CMYK : This is best for print work. After you create an RGB image, you can always change a copy of the file to CMYK if you need to create promotional material. However, be aware that CMYK does not allow many filter options from the main menu, as seen in Figure 3-9.

  • Lab : This is the widest range of color, and some of the larger file formats you receive from clients may be set to this mode. To keep your files small and manageable, you can always create a copy and set it to RGB. Lab is useful for print materials.

You also want to set the bit depth. The greater amount of the bits the bigger the file size. Unless you are working on something that requires high resolutions like a project that will also be printed or for gaming keep the bit amount small. For the web, I generally leave my bit size at 8-bit, as seen in Figure 3-2.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig2_HTML.jpg
Figure 3-2

Choose a bit-depth of 8 bit, 16 bit, or 32 bit

In the lower-right side of the New Document dialog box, you will notice a tab called Advanced Options. If you are not sure how the color profile of your image will be used, leave it at the Don’t Color Manage setting; otherwise, you can use Working RGB: sRGB IEC61966-2.1, which is the profile of some digital camera images, as seen in Figure 3-3.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig3_HTML.jpg
Figure 3-3

Looking at the advanced color profile options under Advanced Options

Another advanced option is Pixel Aspect Ratio. I recommend leaving it as Square Pixels.

Note

If you need to open a file (File ➤ Open) from a client and you are not sure of the image’s color profile, you can find it under Edit ➤ Assign Profile. The radio button that is highlighted is the current profile of that image, but you can change it to another, if necessary. Just remember that changing the profile may alter color settings within the file, and it may not display as it did before. If this is a concern while previewing the file, it is better to work on a copy of the original. Refer to Figure 3-4.

../images/466782_1_En_3_Chapter/466782_1_En_3_Fig4_HTML.jpg
Figure 3-4

Checking the Assign Profile of an image

If your opened image is in a color profile that is not RGB, you can change it at Image ➤ Mode. Choose RGB Color, as seen in Figure 3-5.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig5_HTML.jpg
Figure 3-5

Change your mode to RGB color if not already set

You can also adjust the color settings. This automatically converts the file to Working RGB: sRGB, unless you have set a custom profile under Edit ➤ Color Settings, as seen in Figure 3-6.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig6_HTML.jpg
Figure 3-6

The current color setting preferences

You can tell that the mode of the file has changed by looking at the area on top of where the name of file is located, as seen in Figure 3-7.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig7_HTML.jpg
Figure 3-7

The color mode has been changed from CMYK to RGB

Make sure that if you want to preserve the original’s color and bits, work on a copy. Go to Image ➤ Duplicate, as seen in Figure 3-8.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig8_HTML.jpg
Figure 3-8

To preserve the original image, always work with a duplicate file

Figure 3-5 shows some other color modes.

  • Duotone : This is generally used for print work and is for two color jobs. It can appear like grayscale or sepia tone found in old photos. In addition, you could add a second color, such as blue or yellow, for an interesting effect. Other options within this mode are monotone (1-color), tritone (3-color), and quadtone (4-color). If you want to keep this effect for an image on your website, remember to save a copy of the original in RGB mode.

  • Index Color : This is an 8-bit image that can only contain 256 colors of RGB. Called a CLUT, or color look up table, it is used for GIF image file formats and keeps the images small, as you will see in later chapters. This mode can be viewed on the web and is best for logos, but not photographs.

  • Multichannel : With 256 levels of gray per channel, this mode is best for print and not the web.

Note

One benefit of working in RGB mode vs. CMYK is that you have access to more of the Photoshop filters and 3D options, as seen in Figure 3-9.

../images/466782_1_En_3_Chapter/466782_1_En_3_Fig9_HTML.jpg
Figure 3-9

Compare the options of CMYK to RGB color mode. See how 3D and the filter gallery are grayed out with no access in CMYK mode, but are available in RGB mode when you work with your filters in the file.

Note

When you open a GIF file in Photoshop, you may notice that it has an Index Color mode, as seen in Figure 3-10. That mode is within the RGB color platform, which is OK; you do not need to change it back to RGB.

../images/466782_1_En_3_Chapter/466782_1_En_3_Fig10_HTML.jpg
Figure 3-10

GIF image are in the Index Color mode

From looking at modes, the best color mode options for an image on the web are RGB, Index, Grayscale, and Bitmap (for simple black-and-white line drawings).

As you progress through the book to Part 6, you will look at some other color spaces, such as HEX color, RGBA, and HSLA, which you can use on your website in Dreamweaver CC. If you need to find a HEX color in an image in Photoshop, you can click your foreground or background color in the Tools panel, and use the color picker and eyedropper to determine the HEX color code, which is a six-digit code of numbers and letters that begins with the # symbol, as seen in Figures 3-11 and 3-12.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig11_HTML.jpg
Figure 3-11

In the Tools panel, click either the foreground or background color to bring up the Color Picker dialog box

../images/466782_1_En_3_Chapter/466782_1_En_3_Fig12_HTML.jpg
Figure 3-12

The Color dialog box allows you to work with colors in different modes, including Hex color (#), found at the bottom of the dialog box

Note

Even though you are in RGB mode in the color picker, you can use other modes, like HSB (hue saturation brightness), Lab, and CMYK to match equivalent colors for other projects.

If you check Only Web Colors (see Figure 3-13), you will only see HEX color options, which reduce the number of color options. However, these days, most computer screens and mobile devices can handle a wide range of colors, so I often leave that unchecked.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig13_HTML.jpg
Figure 3-13

The Color dialog box viewing only web-safe colors

This setting is helpful if you are working with GIF images since they only include 256 colors; for example, if your client needs to convert their logo to a specific web-safe color.

You can further adjust and work with color by using the Color panel, as seen in Figure 3-14.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig14_HTML.jpg
Figure 3-14

The Color panel to create additional colors

Settings like RGB Sliders and RGB Spectrum ensure that you are only looking at RGB color options. Make Ramp Web Safe is good for working with files that are saved as GIFs, which you’ll look at in the next chapter.

Note

If you need you need to know the HTML or hex code of the current color, select Copy Color as HTML or Copy Color’s Hex Code, and then paste the information into a program like Notepad++ or Dreamweaver CC. A text version of the code will appear in the file; for example: color="#b73f3f".

Colors that you create that appear in the foreground or background of the Tools panel can be saved as swatches. Save specific colors in the Swatches panel, as seen in Figure 3-15.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig15_HTML.jpg
Figure 3-15

The Swatches panel allows you to add specific colors from the foreground or background to your set by clicking a New Swatch icon or choosing New Swatch from the panel’s menu

The Swatch panel also allows you to load or replace swatches that are specific to the web spectrum. You can use the menu to reset the Swatches panel; however, be aware that any swatches that you do not save under Save Swatches will be lost.

One final panel that can be used to work with color is the Extension Adobe Color Themes panel, where you can explore and create assorted color combinations, as seen in Figure 3-16.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig16_HTML.jpg
Figure 3-16

The Adobe Color Themes panel assists in finding complimentary colors for your themes

Adjusting the Image Size and Resolution

As a last step before exporting your image to a web format, you can adjust its final size and resolution by going to Image ➤ Image Size.

Figure 3-17 shows the vase_image.psd image to set a final size for the image and resolution before exporting.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig17_HTML.jpg
Figure 3-17

The Image Size dialog box to reduce the image size and resolution

If you are reducing the image, a resample setting of Bicubic Sharper (reduction) is the best setting for an image that will become smaller with a lower resolution as seen in Figures 3-17 and 3-18.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig18_HTML.jpg
Figure 3-18

Various resample options found in the Image Size dialog box

Much of this resampling can be done when you export the file, as you will see in the next chapter where we look at the resample setting in more detail.

If you want to crop the image’s canvas, rather than make the resolution smaller, go to Image ➤ Canvas Size (see Figure 3-19).
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig19_HTML.jpg
Figure 3-19

In the Canvas Size dialog box, you can reduce or increase the size of the image’s canvas

You can also use the Crop tool found in Tools panel. Its settings are in the Options panel. The crop options are seen in Figure 3-20.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig20_HTML.jpg
Figure 3-20

In the Canvas Size dialog box, you can reduce or increase the size of the image’s canvas

Use the handles on the Crop tool to size the image. Alternatively, choose a ratio option from the control panel to adjust the size to get a specific width and height, as seen in Figure 3-21.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig21_HTML.jpg
Figure 3-21

In the Canvas Size dialog box, you can reduce or increase the size of the image’s canvas and choose where to affect the resolution

If you don’t want to use the Crop tool, either right click on the image and choose cancel from the pop-up menu, as seen in Figure 3-22. Or click the cancel current crop operation symbol that will appear in the control panel. And then choose another tool from the panel.
../images/466782_1_En_3_Chapter/466782_1_En_3_Fig22_HTML.jpg
Figure 3-22

How to stop the cropping action by right-clicking on the crop

When you are done looking at color choices, you can save any open file with File ➤ Save. File ➤ Exit to exit Photoshop CC, or keep Photoshop open for the next chapter.

Summary

In this chapter, you looked at some of the color choices and modes that are available to prepare images for your website. Some modes are better for print, like CMYK and Duotone; others, like RGB and Index, are meant for the web. You also took a look at how to further adjust the size and resolution of an image before export.

In Chapter 4, you look at how to make further adjustments or optimize your image files during export. Photoshop CC gives you several menu options for export, but figuring out which method is best for your workflow can be a challenge if you have many files to work with and multiple conversions to make.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.222.69.152