Let's move on to consider the intricacies of preparing the graphic design of web pages.

Working with Adobe PhotoShop, you have probably noticed more than once that the title of the document window, in addition to its name, displays various additional characters. This is clearly visible in Fig. 3.1.

Rice. 3.1. Additional Information in the document window title

In this case, you can see the file name (Car.tif), the current zoom level (@ 100%), as well as the designation of the color mode in which the document is located ((RGB)). For many novice users, the last of these inscriptions looks rather mysterious.

A color mode is a rule for designating the colors of pixels in a document. Since the computer uses numbers to represent colors, it is necessary to introduce some rule for converting these numbers into the colors displayed by the output devices and vice versa. There can be several such rules, so each of them gets its own name. The title of the window displays the name of the rule or mode applied in this moment to the document.

Some people may ask a reasonable question: “Why such difficulties? Is it really impossible to get by with just one regime?” It turns out that different modes are needed in order to display in a file the features of subsequent output of the image to some device or saving in a file. Various devices Image output devices can operate on different principles, using physical phenomena that have practically nothing in common with each other. For example, on a monitor screen (as well as a TV screen), an image is created by illuminating a phosphor with a beam of electrons. With this effect, the phosphor begins to emit light. Depending on the composition of the phosphor, this light has one color or another. To form a full-color image, a phosphor with a glow of three colors is used - red, green and blue. Therefore, this method of color formation is called RGB (Red, Green, Blue - Red, Green, Blue).

NOTE. By themselves, the phosphor grains of different colors make it possible to obtain only pure colors (pure red, pure green and pure blue). Intermediate shades are obtained due to the fact that different colored grains are located close to each other. At the same time, their images in the eye merge, and the colors form some mixed shade. By adjusting the brightness of the grains, the resulting blended tone can be adjusted. For example, at maximum brightness of all three types of grains, a white color will be obtained, in the absence of illumination, black will be obtained, and at intermediate values, various shades of gray will be obtained. If grains of one color are illuminated differently than the others, then the mixed color will not be a shade of gray, but will acquire color. This method of color formation is reminiscent of lighting white screen in complete darkness with multi-colored spotlights. Light from different sources folds to give different shades. Therefore, this representation of color (color model) is called additive (summative).

When printing an image, other technologies are used. This could be, for example, inkjet printing or multicolor printing on a printing press. In this case, the image on paper is created using ink of different colors. By applying themselves to the paper and to each other, the ink absorbs some of the light passing through it and reflecting off the paper. If the ink is thick, then it reflects the light itself, but not all of it. Thus, the color reflected from the picture acquires one color or another, depending on what dyes and in what quantities were used during printing.

Typically, this color rendering method uses four colors of ink to produce intermediate shades: cyan, magenta, yellow and black. This color model is called CMYK - Cyan, Magenta, Yellow Black (Cyan, Purple, Yellow, Black). Theoretically, only cyan, yellow and magenta are enough to produce any of the shades. However, in practice it is extremely difficult to obtain pure black or shades of gray by mixing them.

NOTE. Since the CMYK color model produces shades by subtracting certain components from white, it is called subtractive. In addition to various printing devices, this color model is used in photographic film and photographic paper. It also contains layers that are sensitive to cyan, yellow and magenta light.

In RGB and CMYK image files, the values ​​of all three or four components are recorded for each pixel.

For outputting images to black-and-white (monochrome) devices, as well as for some other purposes, images in grayscale mode are best suited. In this mode, only one value is recorded for each pixel - its brightness.

There are other color modes as well. For example, to record images in formats that limit the number of colors allowed (such as GIF), these images must first be converted to indexed color mode. At the same time, a palette is compiled, which is used in further work. If you try to use a color that is not included in the palette, it is replaced by the closest color included in it.

Now let's look at how working with color modes is implemented in Adobe > PhotoShop. First of all, it should be noted that in any of the modes the image is presented in the form of several channels, each of which represents a display of one of the color components. In RGB mode, the image contains red, green and blue channels. You can edit all channels simultaneously (this is the default mode) or individually. Working with channels is discussed in more detail below.

Color modes are accessed using the Image > Mode menu commands. This menu is shown in Fig. 3.2.

Rice. 3.2. Color mode selection menu

As you can see, the menu is divided into four zones. The top zone lists the color modes supported by the program. In the second zone there are two items: 8 bit/Channel (8 bits/channel) and 16 bit/Channel (16 bits/channel). By checking the box next to one of them, you can choose how many bits will be allocated for each pixel to each of the color channels. Typically the 8 bit/channel mode is used. In this case, all the capabilities of the program are realized. Images with 16 bits/channel can be obtained, for example, from some scanners. Such images cannot be accurately displayed on the monitor (the limit is 8 bits/channel) and the range of possibilities for processing them is very limited (most tools, commands and filters do not work). In most cases this mode is not used. The third zone contains one command - Color Table... (Color Table...). This command allows you to edit the color table in indexed color mode. We'll look at it later. Finally, the fourth zone contains commands that allow you to embed color correction data (profiles) into the file and convert an image from one profile to another. These commands are important in printing, but in web design they are not very relevant, since in most cases color correction is not used in web graphics.

Adobe PhotoShop supports eight color modes, which you can switch between using the appropriate commands from the Image > Mode menu. Let's look at them in order.

· Bitmap - any point in the image can be either white or black. This mode can be useful when printing images on some printers, as well as for achieving certain visual effects. In this mode, most PhotoShop features do not work (you won't be able to work with layers, apply filters, or apply image adjustments). In addition, drawing tools are very limited in their capabilities.

To transfer an image to Bitmap mode, it must first be switched to Grayscale mode. After this, the bit mode selection command becomes available. When you call it, the conversion settings window will appear on the screen, shown in Fig. 3.3.

Rice. 3.3. Window for setting up image conversion to Bitmap mode

In this window you can select the resolution for the resulting image (Resolution group, Output input field). You can choose a method that converts grayscale to black and white. This is done using the Use drop-down list. When you select Custom Pattern, you can specify a pattern using the Custom Pattern list.

· Grayscale - this mode is designed for working with black and white images. Each pixel is defined by one value - brightness. The number of gradations is 256 (8 bits/pixel). This mode is useful when processing images intended for output to monochrome devices. When you change the image to grayscale mode, the program will ask you to confirm whether to remove pixel color information.

To switch the image to grayscale mode, call the command Image > Mode > Grayscale (Image > Mode > Grayscale).

ADVICE.A black-and-white image saved in Grayscale mode takes up approximately three times less storage space than a similar image saved in RGB mode.

· Duotone (Duplex) - the image is formed using several (from one to four) colors specified by the user. For each of the paints, the dependence (curve) of the density of the dye on the brightness of the image point is determined. This is used to add shades to a monochrome image.

Converting a picture to duplex mode is only possible from the Grayscale mode. After selecting the command Image > Mode > Duotone... (Image > Mode > Duplex...), the dialog box shown in Fig. 3.4. To preview the conversion results, select the Preview checkbox.

Rice. 3.4. Dye selection window for duplex mode

In the Type drop-down list, select the number of dyes that will be used for printing (Monotone - one dye, Doutone - two dyes, Tritone - three, Quadtone - four). After that, for each of the dyes (indicated in the window Ink 1 (Paint 1), Ink 2 (Paint 2) ...) set a color. To do this, click on the colored squares and select a color in the dialog box that appears. To determine the correspondence curve between the brightness of a monochrome image and a dye, click on the square with the image of the curve (by default it is straight) and set the type of relationship in the window that appears (see Fig. 3.5).

Rice. 3.5. Determination of the dependence of duplex dye density on the brightness of image pixels

You can change the shape of the curve by moving it with the mouse on the image or by entering values ​​in the input fields. The entered value will determine the dye density at the pixel brightness indicated next to the field. In the curve image, the brightness of the pixels is plotted horizontally.

In addition to choosing dyes (see Fig. 3.4), you can further adjust the results of overlaying different colors (this is done after a test print). To do this, click the Overprint Colors button and in the window that appears, click on the desired colored squares. The numbers next to the square indicate which combination of dyes it corresponds to.

· Indexed Colors - in this mode, any pixel in the image can have a shade only from those specified in a special table of colors. This mode is used when saving files in GIF and PNG formats.

To switch an image to indexed color mode, use the command Image > Mode > Indexed Colors. The conversion procedure will be discussed in more detail in the section on saving files in GIF format.

· RGB is the most widely used mode. Most Adobe PhotoShop functions are designed to work in this mode. As already mentioned, in it the color of each pixel is determined by the values ​​of three color components - red, green and blue. This is how colors appear on the monitor screen. Therefore, when preparing web graphics that are intended for viewing on a monitor, you will have to work in RGB mode.

To convert the image to RGB mode, use the command Image > Mode > RGB (Image > Mode > RGB).

· CMYK is a mode that most accurately describes the process of color reproduction in typographic printing. Therefore, it is used in preparing images in printing.

To switch an image to this mode, use the command Image > Mode > CMYK (Image > Mode > CMYK). The program's capabilities when working in this mode are somewhat limited.

· Lab - in this mode, pixel colors are represented as three components, one of which (L) represents brightness, and the other two represent color components (a - from red to green, b - from yellow to blue). The Lab color model was developed taking into account the characteristics of human perception for the most accurate reproduction of shades.

In this mode, you will not be able to use some of the features of Adobe PhotoShop, but the ability to separately edit, for example, the brightness channel can be useful. To switch the image to Lab mode, call the command Image > Mode > Lab (Image > Mode > Lab).

· Multichannel - This mode allows you to convert the image into multiple channels that store color information. Depending on what mode the source image is in, the set of channels of the resulting image will be different. To switch to this mode, use the command Image > Mode > Multichannel (Image > Mode > Multichannel).

You can switch between modes, choosing the one that suits you best, but this conversion may cause problems with the reproduction of shades. The fact is that each of the color models, and therefore each of the modes based on these models, have a limited color gamut. This means that within each model a certain number of shades can be presented. In addition, each of the models has its own limits for correct color reproduction.

The Lab model has the widest color gamut. The RGB model has less coverage. And the CMYK model has the smallest color gamut. Such differences create certain problems when converting images. Color distortions when converting from RGB or Lab mode to CMYK mode are noticeable to the naked eye. This is especially true for pure colors (red, blue, green). Therefore, we can recommend performing all preliminary operations for preparing images in RGB mode (especially since all the program’s capabilities are implemented in this mode). Conversion to CMYK, if necessary, is best done at the final stage of work.

It was said earlier that in different color modes the image is decomposed into color components. In Adobe PhotoShop, these components can be edited simultaneously (this is done during normal work with a document) or separately. Color components (called channels in PhotoShop) are accessed using the Channels panel. You can display it on the screen using the Window > Show Channels command. This panel displays small copies of the images corresponding to the channels and their names. The topmost image displays all channels simultaneously (finished image). The name of this image corresponds to the name of the mode. Depending on the color model you are working in, the composition of the channels will change. In Fig. Figure 3.6 shows the Channels panel when converting an image in RGB, Lab, CMYK and Grayscale modes.

Rice. 3.6. Channels panel when working in RGB, Lab, CMYK and Grayscale modes

NOTE. In Grayscale mode, the image contains only one channel - brightness. In Lab mode, brightness is also set as a separate channel, but in addition to brightness, color is also set (in the form of two color components).

By clicking on the channel name or image, you can call it up for editing. After this, all tools will be valid only for this channel. By highlighting the shared channel (the top one in the list), you can return to normal editing. Clicking the eye icon next to the channel symbol will hide the channel or bring it back to the screen.

ADVICE. Using the Split Channels command from the Channels panel menu, you can convert an image into several files, each of which will store information about one of the channels that were in the source file. This can be used, for example, when preparing an image for printing on an offset press. The Merge Channels... command allows you to perform the opposite operation - merge several files into one, forming several color channels from monochrome images.

Editing individual channels allows you to achieve interesting effects. For example, by applying filters to one or more channels, you can achieve a play of colors that is almost unattainable by other methods.

Another aspect of different approaches to specifying color is the use various systems their designations. Even within the same model, color can be set in several ways. The simplest and most logical method is to directly specify the color components. In most cases, colors are defined this way. However, there are several more methods, indicated by the first letters of the shade components used. The most common of them is HSB (Hue, Saturation, Brightness - Hue, Saturation, Brightness). This alternative way color settings, widely used when working in various color models. Its advantage is that colors are grouped according to characteristics convenient for human perception - hue, saturation and brightness. Sometimes these signs are called slightly differently, for example, “intensity” (“value”) instead of “brightness”. Unlike color component specification methods, color specification in the HSB system allows you to easily evaluate the many available colors by eye.

NOTE. The components that define color are sometimes called coordinates, and the set colors- space. This is especially useful when visually representing multiple shades. The H coordinate (Hue) is usually measured in degrees (from 0 to 360), and the values ​​that change along it are depicted as a circle. The S (Saturation) and B (Brightness) coordinates are measured as percentages (from 0 to 100).

Adobe PhotoShop allows the user to choose between different ways setting shades. The switch is made in the color selection window displayed on the screen, for example, by clicking on the color symbol in the toolbar. This window is shown in Fig. 3.7.

On the left side of the window there is a color selection area, and next to it there is a vertical slider. On the right side of the window there are fields for manually entering the values ​​of color components. Round radio buttons are visible next to some of the input fields. With their help, you can choose which of the color options will be displayed on the slider. For example, in Fig. 3.7. this is the H parameter (Hue). The color selection field displays the change in shades along the two remaining color space coordinates (in this case, saturation and brightness). At the same time, you can see similar shades and easily “move” through the space of colors. In total, three spaces are available for viewing - HSB, RGB and Lab, in each of which the color is set using its own set of components. Since there are three components in any of these cases, you can choose which of them the slider will be responsible for. The CMYK color model is also represented in this window, but since it contains four components, it cannot be represented in the same way as the RGB and Lab 3D models. Therefore, you can only specify a color within the CMYK model using input fields.

Rice. 3.7. Color selection window (by default, colors are set in HSB coordinates)

At the top of the color selection window there are two rectangles displaying the current and selected shades. With their help, you can control your actions by selecting colors. If the specified color cannot be displayed within the CMYK model (and this happens quite often), a symbol like this will appear next to these rectangles. exclamation point in a triangle, and next to it is a sample of a color acceptable for this color model. When a color falls outside the browser's safe palette, a colored cube symbol appears next to the rectangles. By clicking on a symbol, you can accept the color indicated next to it.

NOTE. A safe palette is a set of colors that are displayed equally by browsers in operating systems Mac OS and Windows.

You can prevent colors from going outside the safe palette by checking the Only Web Colors checkbox in the color selection window. In this case, the slider and the shade selection area will be converted to a “safe” view. In Fig. 3.8. shows the window view in this mode.

Rice. 3.8. Color picker window in Web-safe color viewer

In many cases, it is convenient not only to obtain a color transmitted on the Internet without distortion, but also to be able to obtain its designation for use on a web page. This can be done using a special field. It displays the HTML code for the current color. Using its context menu, you can copy the code or paste it into the field (thereby selecting a new color). This way you have the option to directly place the color code into the HTML document or load it from HTML into PhotoShop. You can also set the color code manually by simply entering it from the keyboard.

NOTE. To perform operations on an input field, you must select the text it contains.

Users who prefer to select color using the Color panel can also use the Safe Palette and different color models. You can select a mode using the menu that appears after pressing the arrow button. It contains commands for selecting the color representation method (RGB, CMYK, Lab, etc.), a command for copying the HTML color code to the clipboard (Copy Color as HTML), commands for selecting the spectrum mode located on the panel , as well as the Make Ramp Web Safe command. When preparing web graphics, the Web Color Sliders command can be especially useful. After calling it using the sliders that set the color components, only the “safe” color is selected. In Fig. Figure 3.10 shows the Color panel in RGB Sliders (RGB) and Web Color Sliders modes.

Rice. 3.10. Color panel in RGB Sliders (left) and Web Color Sliders (right) modes

Pay attention to the symbol that the selected color does not match the safe palette, displayed in the safe color selection mode. By clicking on it, you can accept the equivalent offered by the program for use. You can also select safe colors from the spectrum by first calling the Make Ramp Web Safe command from the panel menu.

ADVICE. You can bring up the Color panel on the screen using the Window > Show colors command.

NOTE. When you move the Colors panel to safe mode you will be able to choose from a fixed set of colors in a “safe” palette. Possible values ​​of color components are marked on the sliders with strokes.

Despite the fact that the color selection window and the Color panel provide the ability to work with a safe palette, it is much more convenient to select standard colors using the Swatches panel (see Figure 3.11). It is called up on the screen using the Window > Show Swatches command.

Rice. 3.11. Swatches panel

By clicking the Create new swatch of foreground color button located in the Swatches panel, you can create a new swatch from the foreground color. To delete a sample, drag it with the mouse onto the special button located on the same panel.

ADVICE. You can return the Swatches panel to its original state at any time. To do this, just call from its menu Reset command Swatches (Restore sample). It is also useful to know that the color catalogs that come with the program are located in the \Presets\Color Swatches\ subdirectory of the directory in which PhotoShop was installed.

COLORS

Colors play great importance in every aspect of our lives and often mean more than words. Likewise, colors play an important role in website design. You can often observe that a website, despite great functionality and content, is not able to attract and retain its visitors. And this is possible due to the discrepancy between the color scheme of the site design and its purpose. Therefore, the designer must choose the right set of colors and take into account the possibility of combining them with other web design elements when developing the site. There are various factors to consider before choosing colors and this requires an understanding of colors and their meanings.

Red is a powerful color that denotes strong emotions of passion, excitement, love, energy, and stimulates the body and mind. Used to attract attention and encourage the user to make a quick decision. It is very popular in web design and is used to highlight certain elements, enhancing the visitor’s attention in them.

Black is the color most often used to design text content. It maintains grace, formality and elegance and can be used on any website.

Blue, with its royal appeal and calm effect, is a good color for web design. Its combination with other colors, such as red, yellow, green, gives the desired effect. This is the best color for corporate websites.

Green is the color of nature, growth, prosperity and harmony. It is best for advertising natural or organic products on a website. This color is appropriate for health websites.

Gray – gives a feeling of maturity, seriousness, moderation, professionalism and quality. It can be successfully used to display exactly these qualities on a website.

Brown is considered an earthy, natural, simple color. It conveys a sense of reliability, usefulness and conservatism. On the other hand, it is perceived as a little boring, but it can be combined with brighter colors. This color is also associated with vintage photographs, materials and can be used to instill nostalgia.

Yellow – although the color is associated with energy, brightness, prudence, happiness and is used to capture attention, you should be careful with it, as its abuse leads to negative results. Excessive use of it is not pleasant for the visitor, which may scare him away.

Orange is a warm, bright color that is associated with energy and vibrancy. Although less aggressive than red, it is also used to attract attention and highlight important areas of the design. Orange makes a serious call without shouting. Orange often conveys a feeling of friendliness, and in the right hands can maintain seriousness and professionalism.

Purple is usually associated with mystery and spirituality, while deep purple is associated with prosperity, wealth, royalty and nobility. A fairly strong color that, when used carefully, can provide good contact to the website.

White goes well with any color and is associated with purity, innocence, and kindness. And the statement that white is boring in web design is false. White is a good but challenging element of good design.

In order for colors to be effective in eliciting the desired response from visitors, the following factors should be taken into account:

The target audience. When choosing a website color scheme, it is very important to know the edits and needs of the user audience.

Cultural context. Each culture interprets colors differently. In one settlement, a color may evoke positive emotions, while in another it carries a negative meaning. This influences design choices for sites that cater to different cultures.

Readability. To increase readability, you should maintain a balance between background and text colors. The use of colors should be such as to make reading easier and reduce the strain on visitors' eyesight.

Definition. In addition to readability, clarity is also an important factor. Parts of the site that require attention should be highlighted and easily recognized by users.

Availability. Since the site is intended for everyone, it is worth taking care of colors for all users and a color combination that makes the content easy to read.

Color combinations are an important aspect of web design and a website with the right color combination will have a positive impact on your visitors. After all, colors really have a place in creating a website, and our designers can offer you the best combination of them.

Monochromatic palette

This palette uses only one color, but with different saturation and brightness values. Such schemes are neat, noble and have a calming effect.

In the examples below, you can use the first color as the main color. The second color is for text or background. The third color is for background or text. And the fourth and fifth are for various graphic elements and accents.

Complementary palette

In this harmony, two contrasting colors from the circle are used and one primary color is selected from them. The remaining colors in the palette are derivatives in saturation and brightness from the two original colors.

Split complimentary palette

This is a variation of the previous palette, with the difference that one of the contrasting colors is divided into two adjacent colors.

Analog palette

The analog palette is based on three colors that follow each other on the color wheel. Of these, one color is the main color, and the other two are auxiliary.

Triadic palette

Three colors are used here, equidistant from each other. Of these, one is the main one, and the other two are auxiliary.

Palette rectangle

This design uses two pairs of opposing colors. This circuit is quite complex to use in design because it requires very precise tuning.

Palette square

This scheme is similar to the previous one, but all four colors are equidistant from each other. It is also quite difficult to use in design, as it requires very precise settings.

Additional colors

Once you've chosen a color scheme and ensured a good contrast between the text and the background, the only thing left to do is choose the supporting colors. Typically these are shades of your primary colors. These colors can be used when hovering over an object, in text links, or as a decorative shadow for text. You should not overload your site with too many colors, as this will create unnecessary chaos and discourage visitors. Optimally, this is 4-6 colors on the site.

RGB mode in Photoshop uses the RGB model, assigning an intensity value to each pixel. In 8-bit-per-channel images, intensity values ​​range from 0 (black) to 255 (white) for each of the RGB color components (red, green, blue).

RGB mode

RGB mode in Photoshop uses the RGB model, assigning an intensity value to each pixel. In 8-bit-per-channel images, intensity values ​​range from 0 (black) to 255 (white) for each of the RGB color components (red, green, blue). For example, the color bright red has a value of R=246, G=20 and B=50. If the values ​​of all three components are the same, the result is a neutral gray shading. If the values ​​of all components are equal to 255, then the result is pure white, and if 0, then pure black.

To reproduce colors on screen, RGB images use three colors, or channels. In 8-bit-per-channel images, each pixel contains 24 bits (3 x 8-bit channels) of color information. In 24-bit images, three channels produce up to 16.7 million colors per pixel. In 48-bit (16 bits per channel) and 96-bit (32 bits per channel) images, each pixel can produce even more colors. In addition to being the default mode for new images created in Photoshop, the RGB model is also used to display colors on computer monitors. This means that when working in color modes other than RGB (such as CMYK), Photoshop converts the image to RGB for display on the screen.

Although RGB is the standard color model, the exact range of colors displayed may vary depending on the application and output device. Photoshop's RGB mode changes depending on the workspace settings you make in the Color Adjustments dialog box.

CMYK mode

In CMYK mode, the pixel for each process ink is assigned a percentage value. The lightest colors (highlight colors) are assigned a lower value, and the darker colors (shadow colors) are assigned a higher value. For example, a bright red color might be made up of 2% cyan, 93% magenta, 90% yellow and 0% black. In CMYK images, if all four components are 0%, the color produced is pure white.

The CMYK mode is designed to prepare an image for printing using process colors. Converting an RGB image to CMYK results in color separation. If the original image was RGB, it is best to edit it in RGB mode and only convert it to CMYK at the very end of the edit. In RGB mode, the Proof Settings commands let you simulate the effects of CMYK conversion without changing the data itself. CMYK mode also allows you to work directly with CMYK images taken from a scanner or imported from professional systems.

Although CMYK is the standard color model, the exact range of colors reproduced may vary depending on the press and printing conditions. Photoshop's CMYK mode changes depending on the workspace settings you make in the Color Adjustments dialog box.

Lab mode

The International Illuminating Commission's L*a*b* (Lab) color model is based on the perception of color by the human eye. In Lab mode, numerical values ​​describe all the colors that a person with normal vision sees. Because Lab values ​​describe what a color looks like, rather than how much of a particular ink a device (such as a monitor, desktop printer, or digital camera) requires to reproduce colors, the Lab model is considered a hardware-independent color model. Color management systems use Lab as a color reference to produce predictable results when converting color from one color space to another.

Lab mode has a luminance (L) component that can range from 0 to 100. In the Adobe Color Picker and Color panel, the a (green-red axis) and b (blue-yellow axis) components can range from range from +127 to –128.

Lab images can be saved in the following formats: Photoshop, Photoshop EPS, Large Document Format (PSB), Photoshop PDF, Photoshop Raw, TIFF, Photoshop DCS 1.0, and Photoshop DCS 2.0. 48-bit (16-bit per channel) Lab images can be saved in Photoshop, Large Document Format (PSB), Photoshop PDF, Photoshop Raw, and TIFF formats.

Note. DCS 1.0 and DCS 2.0 files are converted to CMYK upon opening.

Grayscale mode

Grayscale mode uses different shades of gray in images. 8-bit images allow up to 256 shades of gray. Each pixel in a grayscale image contains a brightness value ranging from 0 (black) to 255 (white). 16- and 32-bit images have significantly more shades of gray.

Grayscale values ​​can also be expressed as a percentage of total black paint coverage (a value of 0% is equivalent to white and 100% is equivalent to black).

Grayscale mode uses the range determined by the workspace settings specified in the Color Adjustment dialog box.

Bit mode

Bit mode represents each pixel in an image as one of two values ​​(black or white). Images in this mode are called bitmap (1-bit) images because there is exactly one bit per pixel.

Duplex mode

Duplex mode creates monotone, duplex (two-color), triotone (three-color), and tetratone (four-color) grayscale images using one to four custom inks.

Indexed Colors Mode

Indexed Colors mode produces 8-bit images with a maximum of 256 colors. When converted to indexed color mode, Photoshop builds an image color table (CLUT), which stores and indexes the colors used in the image. If the source image color is not in this table, the program selects the closest available color or dithers to simulate the missing color.

Although this mode has a limited color palette, it can reduce image file size while maintaining the image quality needed for multimedia presentations, web pages, etc. Editing options in this mode are limited. If you need to do a lot of editing, you should temporarily switch to RGB mode. In Indexed Color mode, files can be saved in the following formats: Photoshop, BMP, DICOM (Digital Imaging and Communications Format), GIF, Photoshop EPS, Large Document Format (PSB), PCX, Photoshop PDF, Photoshop Raw, Photoshop 2.0, PICT, PNG, Targa® and TIFF.

Multi-channel mode

Multi-channel images contain 256 gray levels for each channel and can be useful for specialized printing. These images can be saved in the following formats: Photoshop, Large Document Format (PSB), Photoshop 2.0, Photoshop Raw, and Photoshop DCS 2.0.

The following information may be helpful when converting images to multichannel.

Layers are not supported and are therefore flattened.

The color channels of the original image become the spot color channels.

Converting a CMYK image to multichannel mode creates cyan, magenta, yellow, and black spot color channels.

Converting an RGB image to multi-channel mode creates cyan, magenta, and yellow channels of spot colors.

Removing a channel from an RGB, CMYK, or Lab image automatically converts the image to multichannel by flattening the layers.

To export a multi-channel image, you must save it in Photoshop DCS 2.0 format.

Note. Images with indexed and 32-bit colors cannot be converted to Multichannel mode.

It just so happens that most Photoshop users, after creating or processing images, do not print them, limiting themselves to showing the results of their activities to friends on the monitor or posting their work on the Internet. But sooner or later many people face this. This is where the problem arises - the color mismatch between the colors on the monitor and the print. It’s good if the processed image can be taken to a photo center, where everything will be done correctly for you. What if printing is done at home? Should we hope for chance? Isn't it easier to learn how to perform these operations yourself? This is what we will talk about today.

Preface
Continuing the topic, I will give an example of a frequently asked question in this case. Excuse me, you say, isn’t it possible to run the command Image > Mode > CMYK [Image > Mode > CMYK] and solve the problem once and for all? The problem is that Photoshop's default method for converting to CMYK doesn't take into account certain moments, which can have a negative and unpredictable effect on printing.
We all know that RGB mode is a method of visually displaying an image on the screen using three colors: Red, Green and Blue, after mixing the pixels of which the desired shade is obtained. And CMYK is a distribution of Cyan, Magenta, Yellow, and Black colors to implement displacement networks that distribute patterns of dots of variable density and size on a “sheet of paper” - which is what makes it possible get the required color. When we look at a CMYK image, we are only seeing a simulation of the mode: in fact, we are seeing the RGB mode into which the image was converted on the fly for display, because the monitor does not support the CMYK output method.

Spot Magnification
So, to correctly convert an image to CMYK mode, you need to solve several problems, first of all Dot Gain. After the image has already been printed, it is easy to notice that it consists of small spots made by the printer's ink. Depending on the quality of the paper used, they (spots) expand from the center to the outer sides.
To test the printer, I usually print a pattern consisting of dots with a diameter of 1 millimeter. Initially, the dots interact with a sheet of paper of similar diameter, but after some time they can increase their values, resulting in a slight change in colors. This may be due to both low-quality paper and bad ink. In Photoshop, you have the ability to adjust how these dots are printed, controlling their brightness before final output. This is done through the File > Print with Preview menu. Preview] Dot Gain parameter. So, to comply in this case (when the points have increased in size), a decrease in the points is required so that the expansion becomes equal to one millimeter.

Total ink quantity
The second problem is the distribution of ink on paper, its total quantity. In order to avoid ink getting into the same areas on the paper, it is necessary that the sum of their four values ​​does not exceed 300.
Note: 300 as a maximum number is actually an average - a kind of universal value. The fact is that most newspapers and magazines set even lower values ​​as the limit, so before sending the image to print, I recommend finding out these parameters. For example, you can distribute the colors as follows (the correct way): 90C, 90M, 100Y and 0K - this way the sum is 280 (90+90+100+0). But such a distribution will no longer be correct: 100C, 100M, 100Y and 100K, because in this case the sum will be equal to 400. The main thing is to really understand that visually the ratio of 20C, 20M, 20Y and 20K looks the same as 0C, 0M , 0Y and 0K. The factors influencing this were discussed above.

Convert to another profile
Now let's move on to consider the practical part of the matter. Namely, we will take control of all - well, or almost all - factors that can negatively affect the printing of an image. Often, when creating a PSD file containing multiple layers, different color modes, etc., it is impossible to track all the changes in the CMYK mode. Therefore, most users create/process an image in RGB, apply filters that are not available in another color model, and only convert the result upon completion of the work. There are several ways to do this. One of them is executing the command Image > Mode > CMYK [Image > Mode > CMYK]. This method mathematically converts the image, without paying attention to the problems associated with this conversion. Another way is to execute the command Image > Mode > Convert to Profile, where you need to find the definition area and select Custom CMYK from the Profile drop-down menu, after which a dialog box will open. (Fig. 1).
Set the parameters as in the figure - they are optimal.

End
In this way, which is quite confusing at first glance and quite simple after careful consideration, correct conversion to CMYK mode is achieved. Of course, you can also use standard Photoshop templates, which are made based on world standards, however, in our country we do not always come across exactly the standard that Adobe has provided. The tips given in this article are universal, so the risk is minimal. If you have any questions about this article, ask them on the website

, Screen and Overlay darken certain areas of the image, lighten certain areas of the image, or both.

This one is the fourth one the most important regimes overlay, has nothing to do with dimming, highlighting and contrast of the image, it is not by chance that it is called “Color”, and, if you remember from the pilot article of this series, it is in the Composite Modes group along with “ Hue, Saturation, etc.

The Color mode is actually a combination of the first two modes in this group, i.e. Hue and Saturation.
When you change a layer's blend mode to Chroma, only the layer's color (that is, all the color shades by their saturation value) fits into the layer(s) underneath it. The brightness values ​​of these colors are completely ignored.

The Color mode allows you to add or change the colors of details or the entire image without changing the brightness values ​​of those details or the entire image.

In addition, the "Chroma" mode is the exact opposite of the "Brightness" mode (Luminosity), which ignores all colors in the layer and mixes only the brightness values, we will look at this in the corresponding material.

Practical example of using the Color blend mode

One of the most popular uses of this mode is to colorize black and white images. Using it allows you to add color to images without changing the original brightness values. Simply add a new blank layer above the image and change its layer blending mode to Color, then select the Brush Tool from the Tools palette, select the color you want and start painting on the layer, adding your color.

For example, I'll take an old black and white photograph:

Let's say we want to keep the overall look of the photo black and white, but to make the photo more interesting, I want to make the roses in the bride's bouquet red. Using the Color mode simplifies this process. First, as mentioned above, you should add a new empty layer above the photo layer and change its blending mode to “Color” (Color):

Now you should select the Brush Tool from the tool palette, select red as the foreground color in the color palette, zoom in on the roses and start painting on them.

Through the team File - New The “New” dialog box appears in front of you. Among all the other parameters that can be set for a future image, there is a parameter Color mode . In this article you will learn What color modes can you use to create an image in Photoshop?.

Let's take a look at Photoshop's color mode drop-down list:

By default, the standard color mode is always selected - RGB.

So, in the drop-down list you see 5 color modes. Here's what each one means:

This is the main and most popular color display mode. The images you see on your computer monitor, TV, phone, digital camera and others are made up of light. And although your eyes are sensitive to hundreds of different wavelengths (each associated with a specific color), to reproduce all the colors you see on screens, Just three are enough - red, green and blue (RGB).

Each of the three colors has numerical value from 0 to 255, describing the brightness of any of the presented colors.

The higher the bit depth of a document, the more detail it can contain. In this mode, you can select 8-, 16- and 32-bit documents.

An example of a very ordinary image saved in this mode:

Bit format

The format limits you to two colors: black and white(grayscale is not used in this mode).

This mode is convenient when you scan pages with high contrast, such as black and white text documents (newspapers, books). Previously, when there were no smartphones and a phone with a monochrome display was a luxury, the creation of this kind of graphics was relevant. Now times have changed and you can hardly count many reasons to create your image in bitmap format.

In grayscale

This mode complements Bit format, adding shades between jet black and snow white.

The higher the bit depth of a document, the more shades of gray - and therefore more detail - it can contain. 8-bit documents contain 256 shades of gray, 16-bit documents expand this range to more than 65,000, and 32-bit documents increase it to 4.2 billion colors.

CMYK colors

This mode simulates the colors used in printing. Its name means cyan, magenta, yellow and black colors ( CMYK) .

Note

To achieve true black, grayscale, and shades of color (mixed with black to create darker variations), the printers decided to add black as a fourth ink color. They could not abbreviate it with the letter B (black) to avoid confusion with blue (as in RGB), so instead of the letter B they used TO(blac K). This is how the acronym came about CMYK.

It does not contain as many colors as RGB, as it is limited to only those colors that can be reproduced on paper inkjet printer or in commercial offset or digital printing. This is where its main reasons for use come from: preparing an image for printing.

Changes in color can be seen even with the naked eye - colors have become brighter and more saturated.

Colors Lab

The mode is based on the way a person perceives color. It allows you to use all the colors that the human eye can perceive. The mode shows how colors should look no matter what device they're displayed on, while RGB and CMYK modes limit the colors in a file to those visible on screen or in a printed document, respectively.

The problem is that such an image cannot be saved in known . It will only be available in special Photoshop formats.

Whatever color mode you choose for the image, you can always change it to another during the process. To do this, select the command: Image - Mode. From the drop-down list, select which one you need.

If you notice an error in the text, select it and press Ctrl + Enter. Thank you!