In Photoshop, you want to make sure that the files that will be part of the website are in the correct color mode—especially, if you are creating a fresh piece of artwork. In File ➤ New, you want to make sure that your starting file is saved as RGB, which is your monitor’s color channel. In Advanced Options, choose RGB Color under the Color Mode, as seen in Figure 11-1.
When you create a custom layout or choose the Print tab and set the color mode to RGB, some layouts show an alert, as seen in Figure 11-2.
This simply means that your Color panel many not match the original presets or the swatches or colors modes in these panels and may not be set to RGB color mode when you click Create. It should appear as RGB; otherwise, you can alter it yourself in the Color panel, as seen in Figure 11-3.
If you want to check or convert an opened existing Illustrator CMYK document to RGB, you can change the mode by selecting File ➤ Document Color Mode ➤ RGB Color, as seen in Figure 11-4.
Be aware that there may be a color shift, so if you are using some files for print later, always work with a copy before adjusting the color mode.
You can also make further adjustments, as seen in Figure 11-5, to the RGB settings under Edit ➤ Color Settings.
Here you can review your current color spaces, if you don’t want to make any changes, click Cancel; otherwise, make an adjustment, and to save it, click OK. In this case, the color space of sRGB is good for the website projects, so you don’t need to change it.
If, for some reason, the files that you have acquired contain no color profile, you can set one using Edit ➤ Assign Profile. Refer to Figure 11-6.
Generally, for the web, the RGB profiles are left at the default sRGB, so you can leave these settings as is and click Cancel to exit the dialog box.
You can see your document’s color settings because they show at the top of your artwork in the name tab area of each file. Refer to Figure 11-7.
Copying CMYK Graphics to an RGB Document
If you think that you may have copied a vector graphic into your RGB file that originally came from a document that was in CMYK mode, you can select it by marqueeing it with the Selection tool (V) in the Tools panel. This selects the entire item and makes the conversion for just that graphic shape, as seen in Figure 11-8. Go to Edit ➤ Edit Colors ➤ Convert to RGB.
This ensures that the graphic shape added to the RGB AI or EPS file is in RGB color mode.
Note
In an RGB mode file, CMYK conversion is unavailable. If you are in a CMYK file, Convert to RGB is unavailable. Refer to Figure 11-9.
You can also convert your item to a grayscale color, but it is still in an RGB mode format in your file. There is no actual grayscale color mode in Illustrator.
Color Panel
If, at any time, you need to adjust your Color panel from RGB to CMYK, Grayscale, HBS (Hue Brightness Saturation), or Web Safe RGB, you can do it in the menu, as seen in Figure 11-10. In no way does this alter your document current color mode of RGB.
Choosing to see and use colors in the Color panel as Grayscale or are Web Safe RGB is good if you plan to output a logo as a GIF or a website’s preliminary design, as seen in Figure 11-11.
You can then edit these colors in the Color Picker (see Figure 11-12) when you click the fill or stroke of a shape in the Color panel or in the Tools panel.
As you can see, it is almost identical to the one used in Photoshop in Chapter 3. You can also choose Only Web Colors. You can view by color swatches by clicking that button to toggle between it and the current color models.
Swatches Panel
You can save specific colors as swatches that appear in the Tools panel, and drag or add them to your Swatches panel from the Swatches menu as a new swatch or within a new color group folder. Refer to Figure 11-13.
When you create new swatches, they are saved within your document. You can save them as a swatch library or open them from other AI or ASE documents from the Swatches menu, as seen in Figure 11-13.
Other Panels for Working with Color
Though not part of the main discussion of this book, there are a few other panels in Illustrator that you can use while working with color. I will briefly mention a few that you may want to use for your projects.
Color Guide Panel
The Color Guide panel is used to apply color to, edit, or recolor your shapes. Refer to Figure 11-14.
Clicking the lower Edit or Apply Colors icon (color wheel) on the panel allows you to access the Recolor Artwork dialog box.
You can save these colors as swatches in the Swatches panel for later use.
Adobe Color Themes Panel
As in Photoshop, you can work with color in the Color Themes panel, where you can explore and create assorted color combinations (see Figure 11-15).
Gradient Panel
The Gradient panel (see Figure 11-16) allows you to add colors with color stops when creating a gradient for your shape. Likewise, you can use the Gradient tool (G) in the Tools panel to alter the gradient or add it to the Swatches panel. This panel has been updated in CC 2019 with the new free form gradient options.
Gradients can be linear, radial, or freeform, and have a differing opacity and locations at each point on the slider. Gradients also work with the Mesh tool (U), which is to the left of the Gradient tool in the Tools panel.
Transparency Panel
The Transparency panel has many blending, opacity, and mask features. If you compare the Photoshop Layers panel to the Illustrator Layers panel, you notice that it does not have effects, masks, or blending modes that you can apply each layer. Rather, you must use either the Effect Filters panel or the Transparency panel, and apply them to the selected object. Refer to Figure 11-17.
Appearance Panel
Once you apply different effects and gradients to an object, you can alter their order or add more using the Appearance panel. By adding or altering alternate fills, strokes, and effects, these can later be added to the Window Graphic Styles panel, which like the Swatches panel, can be used as library to store all the graphic styles that you create in your file. Refer to Figure 11-18.
You will look at the Graphic Styles panel and other related panels in more detail in Part 3.
For now, take some time to review these panels and see how you can use them for your own projects.
Note that many of these panels’ settings can be accessed through the Properties panel when a vector graphic is selected.
Summary
In this chapter, you looked at the two color mode settings: RGB and CMYK. You also saw how to emulate grayscale color. You looked at some of Illustrator’s settings and panels, and saw how they allow you to effect and control your RGB colors.
In the next chapter, you discover how to use Illustrator’s export settings to save your graphics for the web.