Photoshop supports eight color modes, which you can switch between using the appropriate commands from the menu Image > Mode(Image > Mode). Let's look at them in order.
In addition, drawing tools are very limited in their capabilities.
To switch the image to Bitwise(Bitmap) it must first be switched to Grayscale(Grayscale). 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 drop down list Use(Use). When selecting an item User template(Custom Pattern) you can set a pattern using the list User template(Custom Pattern).
To change the image to grayscale mode, call the command Image > Mode > Grayscale(Image > Mode > Grayscale).
ADVICE. Black and white image saved in Grayscale(Grayscale) takes up approximately three times less memory space than a similar image in RGB mode.
Converting a picture to duplex mode is possible only from the mode Grayscale(Grayscale). After choosing a team Image > Mode > Duplex...(Image > Mode > Duotone...) a dialog box shown in Fig. will appear on the screen. 3.4. To preview the conversion results, select the checkbox View(Preview).
Rice. 3.4. Dye selection window for duplex mode
In the dropdown list Type(Ture) select the number of dyes that will be used in 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 button Color overlay(Overprint Colors) 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.
To change the image to indexed color mode, use the command Image > Mode > Indexed Colors(Image > Mode > Indexed Colors). The conversion procedure will be discussed in more detail in the section on saving files in GIF format.
To convert the image to RGB mode, use the command Image > Mode > RGB(Image > Mode > RGB).
To switch the 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.
In this mode, you will not be able to use some Photoshop features, but the ability to separately edit, for example, the brightness channel can be useful. To switch the image to Lab call the command Image > Mode > Lab(Image > Mode > Lab).
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 a numerical value from 0 to 255, which describes the brightness of any of the colors presented.
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 by an inkjet printer or 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!
Let's move on to consider the intricacies of preparing the graphic design of web pages.
While 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 currently applied 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. Different image output devices can operate on different principles, using physical phenomena that have virtually 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 illuminating a white screen in complete darkness with multi-colored spotlights. Light from different sources combines to produce 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 colors is the use of different systems for their designation. 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 is an alternative way to specify color, 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 a color are sometimes called coordinates, and the set of colors is sometimes called 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 gives the user the opportunity to choose between different ways to set 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), an exclamation point symbol in a triangle will appear next to these rectangles, and next to it will be a swatch of a color acceptable for that 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 identically by browsers on Mac OS and Windows operating systems.
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 put the Colors panel in safe mode, you can choose from a fixed set of colors in the “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 the Reset Swatches command from its menu. 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 a big role 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 site.
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 device-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 the file size of an image while maintaining the image quality needed for multimedia presentations, web pages, etc. Editing capabilities 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.
, Screen and Overlay darken certain areas of the image, lighten certain areas of the image, or both.
This, the fourth of the most important blending modes, has nothing to do with darkening, 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 Component modes group ( Composite Modes) 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 blend 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.
