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_11

11. Color Choices: CMYK, RGB, and Grayscale

Jennifer Harder1 
(1)
Delta, BC, Canada
 

In this chapter, you are going to look at how to work with color and choose the correct color choices in Illustrator CC.

Note

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

Working with Color

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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig1_HTML.jpg
Figure 11-1

Choose RGB for the web images and not CMYK, which is for print

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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig2_HTML.jpg
Figure 11-2

Some presets show an alert if you choose RGB color from the New Document dialog box

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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig3_HTML.jpg
Figure 11-3

To make sure your Color panel is the same as your documents color mode, change it in the Color panel menu

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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig4_HTML.jpg
Figure 11-4

Change the document color mode to RGB if it is CMYK

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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig5_HTML.jpg
Figure 11-5

Alter 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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig6_HTML.jpg
Figure 11-6

Assign a color profile if your AI or EPS document does not have one

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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig7_HTML.jpg
Figure 11-7

Color modes are displayed along with the file name of a document

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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig8_HTML.jpg
Figure 11-8

Use the Selection tool to select an illustration and convert it to RGB mode if you suspect it is not 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.

../images/466782_1_En_11_Chapter/466782_1_En_11_Fig9_HTML.jpg
Figure 11-9

Features of the Edit Colors CMYK are unavailable if in RGB mode

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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig10_HTML.jpg
Figure 11-10

Changing the color mode display in the Color panel

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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig11_HTML.jpg
Figure 11-11

Grayscale and Web Safe RGB setting in the Color panel

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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig12_HTML.jpg
Figure 11-12

Choose a color for shape using the Color Picker found when clicking a color in the tool 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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig13_HTML.jpg
Figure 11-13

Add your new RGB swatch so that you can use it for other shapes later on

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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig14a_HTML.jpg../images/466782_1_En_11_Chapter/466782_1_En_11_Fig14b_HTML.jpg
Figure 11-14

Use the Color Guide to adjust colors for complex shapes

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).
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig15_HTML.jpg
Figure 11-15

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

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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig16_HTML.jpg
Figure 11-16

Use the Gradient panel to add a gradient to your shape

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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig17_HTML.jpg
Figure 11-17

The Transparency panel has many blending, opacity and mask features

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.
../images/466782_1_En_11_Chapter/466782_1_En_11_Fig18_HTML.jpg
Figure 11-18

The Appearance panel and Properties panel allow you to alter your fills and strokes to create a variety of colors and effects (FX)

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.