Цветовые режимы и модели в photoshop

Перейдем к рассмотрению тонкостей подготовки графического оформления web-страниц.

Работая с Adobe PhotoShop, вы, наверное, не раз обращали внимание на то, что и заголовке окна документа, кроме его имени, отображаются различные дополнительные символы. Это хорошо видно на рис. 3.1.

Рис. 3.1. Дополнительная информация в заголовке окна документа

В данном случае там видно имя файла (Car.tif), текущий уровень увеличения (@ 100%), а также обозначение цветового режима, в котором находится документ ((RGB)). Для многих начинающих пользователей последняя из этих надписей выглядит довольно загадочно.

Цветовой режим представляет собой правило обозначения цветов пикселов документа. Так как компьютер использует для обозначений цветов числа, необходимо ввести некоторое правило преобразования этих чисел в отображаемые устройствами вывода цвета и наоборот. Таких правил может быть несколько, поэтому каждое из них получает свое название. В заголовке окна выводится название правила или режима, применяемого в данный момент к документу.

Некоторые люди могут задать резонный вопрос: «А зачем такие сложности? Неужели нельзя обойтись одним режимом?». Оказывается, разные режимы нужны для того, чтобы отобразить в файле особенности последующего вывода изображения на какое-либо устройство или сохранения в файле. Разные устройства вывода изображений могут работать по различным принципам, используя физические явления, не имеющие друг с другом практически ничего общего. Например, на экране монитора (а также телевизора) изображение строится при помощи засветки люминофора пучком электронов. При таком воздействии люминофор начинает излучать свет. В зависимости от состава люминофора, этот свет имеет ту или иную окраску. Для формирования полноцветного изображения используется люминофор со свечением трех цветов — красным, зеленым и синим. Поэтому такой метод формирования цвета называют RGB (Red, Green, Blue — Красный, Зеленый, Синий).

ПРИМЕЧАНИЕ. Сами по себе зерна люминофора разных цветов позволяют получить только чистые цвета (чистый красный, чистый зеленый и чистый синий). Промежуточные оттенки получаются за счет того, что разноцветные зерна расположены близко друг к другу. При этом их изображения в глазу сливаются, а цвета образуют некоторый смешанный оттенок. Регулируя яркость зерен, можно регулировать получающийся смешанный тон. Например, при максимальной яркости всех трех типов зерен будут получен белый цвет, при отсутствии засветки — черный, а при промежуточных значениях — различные оттенки серого. Если же зерна одного цвета засветить не так, как остальные, то смешанный цвет не будет оттенком серого, а приобретет окраску. Такой способ формирования цвета напоминает освещение белого экрана в полной темноте разноцветными прожекторами. Свет от разных источников складывается, давая различные оттенки. Поэтому такое представление цвета (цветовую модель) называют аддитивной (суммирующей).

При выводе изображения на печать используются другие технологии. Это может быть, например, струйная печать или многокрасочная печать на типографской машине. В этом случае изображение на бумаге создается при помощи чернил разных цветов. Накладываясь на бумагу и друг на друга, чернила поглощают часть света, проходящего сквозь них и отражающегося от бумаги. Если чернила густые, то они сами отражают свет, но не весь. Таким образом, отраженный от картинки цвет приобретает ту или иную окраску, в зависимости от того, какие красители и в каких количествах были использованы при печати.

Обычно при таком способе цветопередачи для получения промежуточных оттенков используются чернила четырех цветов: голубой, пурпурный, желтый и черный. Такую цветовую модель называют CMYK — Cyan, Magenta, Yellow Blасk (Голубой, Пурпурный, Желтый, Черный). Теоретически для получения любого из оттенков достаточно только голубого, желтого и пурпурного цветов. Однако на практике крайне сложно получить их смешением чистый черный цвет или оттенки серого.

ПРИМЕЧАНИЕ. Так как в цветовой модели CMYK оттенки образуются путем вычитания определенных составляющих из белого, ее называют субтрактивной (вычитающей). Кроме различных печатающих устройств, эта цветовая модель используется в фотопленке и фотобумаге. Там также содержатся слои, чувствительные к голубому, желтому и пурпурному свету.

В файлах изображений, сохраненных в режимах RGB и CMYK, для каждого пиксела записываются значения всех трех или четырех компонентов.

Для вывода изображения на черно-белые (монохромные) устройства, а также для некоторых других целей лучше всего подходит изображение в режиме градаций серого (grayscale). В этом режиме для каждого пиксела записывается только одно значение — его яркость.

Существуют и другие цветовые режимы. Например, для записи изображений В форматах, ограничивающих допустимое число цветов (таких как GIF), эти изображения надо предварительно перевести в режим индексированных цветов. При этом составляется палитра, которая и используется при дальнейшей работе. При попытке использовать не входящий в палитру цвет он заменяется ближайшим цветом, занесенным в нее.

Теперь рассмотрим, как работа с цветовыми режимами реализована в AdobePhotoShop. Прежде всего, следует заметить, что в любом из режимов изображение представляется в виде нескольких каналов, каждый из которых представляет собой отображение одной из цветовых составляющих. В режиме RGB изобра-жение содержит красный, зеленый и синий каналы. Вы можете редактировать всe каналы одновременно (именно этот режим используется по умолчанию) или по отдельности. Подробнее работа с каналами рассматривается ниже.

Доступ к цветовым режимам осуществляется при помощи команд меню ImageMode (ИзображениеРежим). Это меню показано на рис. 3.2.

Рис. 3.2. Меню выбора цветового режима

Как видно, меню разделено на четыре зоны. В верхней зоне перечислены цветовые режимы, поддерживаемые программой. Во второй зоне находятся два пункта: 8 bit/Channel (8 бит/канал) и 16 bit/Channel (16 бит/канал). Установив флажок напротив одного из них, вы можете выбрать, сколько битов будет отводиться для каждого пиксела на каждый из цветовых каналов. Обычно используется режим 8 бит/канал. При этом реализуются все возможности программы. Изображения с 16 бит/канал могут быть получены, например, с некоторых сканеров. Такие изображения не могут быть точно отображены на мониторе (предел — 8 бит/канал) и набор возможностей их обработки сильно ограничен (не работают большинство инструментов, команд и фильтров). В большинстве случаев этот режим не используется. Третья зона содержит одну команду — Color Table… (Таблица цветов…). Эта команда позволяет редактировать цветовую таблицу в режиме индексированных цветов. Мы рассмотрим ее позже. Наконец, в четвертой зоне содержатся команды, позволяющие внедрять в файл данные цветокоррекции (профили) и конвертировать изображение из одного профиля в другой. Эти команды важны в полиграфии, но в web-дизайне не очень актуальны, так как в большинстве случаев цветокоррекция в web-графике не используется.

Adobe PhotoShop поддерживает восемь цветовых режимов, переключаться между которыми вы можете при помощи соответствующих команд из меню ImageMode (ИзображениеРежим). Рассмотрим их по порядку.

Bitmap (Битовый) — любая точка изображения может быть либо белой, либо черной. Этот режим может оказаться полезным при печати изображений на некоторых принтерах, а также для получения определенных изобразительных эффектов. В этом режиме большинство функций PhotoShop не работает (вы не сможете работать со слоями, применять фильтры и настройки изображения). Кроме того, рисующие инструменты сильно ограничиваются в своих возможностях.

Для перевода изображения в режим Bitmap (Битовый) его надо предварительно перевести в режим Grayscale (Градации серого). После этого становится доступной команда выбора битового режима. При ее вызове на экране появится окно настройки преобразования, показанное на рис. 3.3.

Рис. 3.3. Окно настройки преобразования изображения в режим Bitmap

В этом окне вы можете выбрать разрешение для результирующего изображения (группа Resolution (Разрешение), поле ввода Output (Вывод)). Вы можете выбрать метод, в соответствии с которым оттенки серого будут преобразованы в черный и белый цвета. Это делается при помощи раскрывающегося списка Use (Использовать). При выборе пункта Custom Pattern (Шаблон пользователя) вы можете задать шаблон при помощи списка Custom Pattern (Шаблон пользователя).

Grayscale (Градации серого) — этот режим предназначен для работы с черно-белыми изображениями. Каждый пиксел определяется одним значением — яркостью. Число градаций — 256 (8 бит/пиксел). Этот режим полезен при обработке изображений, предназначенных для вывода на монохромные устройства. При переводе изображения в режим градаций серого программа запросит у вас подтверждения на удаление информации о цвете пикселов.

Для перевода изображения в режим градаций серого вызовите команду ImageModeGrayscale (ИзображениеРежимГрадации серого).

СОВЕТ. Черно-белое изображение, сохраненное в режиме Grayscale (Градации серого), за нимает в памяти приблизительно в три раза меньше места, чем аналогичное изображение в режиме RGB.

Duotone (Дуплекс) — изображение формируется при помощи нескольких (от одной до четырех) красок, заданных пользователем. Для каждой из красок определяется зависимость (кривая) плотности красителя от яркости точки изображения. Это используется для добавления оттенков в монохромное изображение.

Перевод картинки в дуплексный режим возможен только из режима Grayscale (Градации серого). После выбора команды ImageModeDuotone… (ИзображениеРежимДуплекс…) на экране появится диалоговое окно, изображенное на рис. 3.4. Для предварительного просмотра результатов преобразования установите флажок Preview (Просмотр).

Рис. 3.4. Окно выбора красителей для дуплексного режима

В раскрывающемся списке Туре (Тип) выберите число красителей, которые будут использоваться при печати (Monotone — один краситель, Doutone — два красителя, Tritone — три, Quadtone — четыре). После этого для каждого из красителей (обозначаемых в окне Ink 1 (Краска 1), Ink 2 (Краска 2) …) задайте цвет. Для этого щелкните мышью на цветных квадратах и выберите цвет в появившемся диалоговом окне. Для определения кривой соответствия яркости монохромного изображения и красителя щелкните на квадрате с изображением кривой (по умолчанию она прямая) и задайте вид зависимости в появившемся окне (см. рис. 3.5).

Рис. 3.5. Определение зависимости плотности дуплексного красителя от яркости пикселов изображения

Изменить форму кривой можно, перемещая ее мышью на изображении или вводя значения в полях ввода. Вводимое значение определит плотность красителя при указанной рядом с полем яркости пиксела. На изображении кривой яркость пикселов откладывается по горизонтали.

Кроме выбора красителей (см. рис. 3.4), вы можете дополнительно скорректировать результаты наложения разных цветов (это делается после пробной распечатки). Для этого нажмите кнопку Overprint Colors (Наложение цветов) и в появившемся окне щелкните мышью на нужных цветных квадратах. Цифры рядом с квадратом указывают, какой комбинации красителей он соответствует.

Indexed Colors (Индексированные цвета) — в этом режиме любой пиксел изображения может иметь оттенок только из числа указанных в специальной таблице цветов. Этот режим применяется при сохранении файлов в форматах GIF и PNG.

Для перевода изображения в режим индексированных цветов используйте команду ImageModeIndexed Colors (ИзображениеРежимИндексированные цвета). Подробнее процедура преобразования будет рассмотрена в разделе, посвященном сохранению файлов в формате GIF.

RGB — наиболее широко используемый режим. На работу в этом режиме рассчитано большинство функций Adobe PhotoShop. Как уже было сказано, в нем цвет каждого пиксела определяется значениями трех цветовых составляющих — красной, зеленой и синей. Именно таким образом представляются цвета на экране монитора. Поэтому при подготовке web-графики, которая ориентирована на просмотр при помощи монитора, вам придется работать именно в режиме RGB.

Для перевода изображения в режим RGB воспользуйтесь командой ImageModeRGB (ИзображениеРежимRGB).

CMYK — режим, наиболее точно описывающий процесс воспроизведения цвета при типографской печати. Поэтому он используется при подготовке изображений в полиграфии.

Для того чтобы перевести изображение в этот режим, используйте команду ImageModeCMYK (ИзображениеРежимCMYK). Возможности программы при работе в этом режиме несколько ограничены.

Lab — в этом режиме цвета пикселов представляются в виде трех составляющих, одна из которых (L) представляет яркость, а две других — цветовые компоненты (а — от красного до зеленого, b — от желтого до синего). Цветовая модель Lab была разработана с учетом особенностей восприятия человека для наиболее точной передачи оттенков.

В этом режиме вы не сможете использовать некоторые возможности Adobe PhotoShop, но возможность отдельно редактировать, например, канал яркости может оказаться полезной. Для перевода изображения в режим Lab вызовите команду ImageModeLab (ИзображениеРежимLab).

Multichannel (Многоканальный) — этот режим позволяет преобразовать изображение в несколько каналов, хранящих информацию о цветах. В зависимости от того, в каком режиме находится исходное изображение, набор каналов полученного изображения будет различным. Для перехода в этот режим воспользуйтесь командой ImageModeMultichannel (ИзображениеРежимМногоканальный).

Вы можете переключаться между режимами, выбирая наиболее подходящий, но при таком преобразовании возникают проблемы с воспроизведением оттенков. Дело в том, что каждая из цветовых моделей, а значит и каждый из режимов, основывающихся на этих моделях, имеют ограниченный цветовой охват. Это значит, что в рамках каждой модели может быть представлено некоторое число оттенков. Кроме того, каждая из моделей имеет свои границы правильного воспроизведения цветов.

Модель Lab имеет наиболее широкий цветовой охват. Модель RGB имеет меньший охват. А самый малый цветовой охват имеет модель CMYK. Такие различия создают определенные проблемы при преобразовании изображений. Искажения цвета при переводе из режима RGB или Lab в режим CMYK заметны невооруженным взглядом. Особенно это касается чистых цветов (красных, синих, зеленых). Поэтому можно рекомендовать выполнять все предварительные операции по подготовке изображений в режиме RGB (тем более что в этом режиме реализуются все возможности программы). Преобразование в режим CMYK, если это необходимо, лучше всего производить на заключительном этапе работы.

Ранее было сказано, что в различных цветовых режимах изображение раскладывается на цветовые составляющие. В Adobe PhotoShop эти составляющие можно редактировать одновременно (это делается при обычной работе с документом) или по отдельности. Доступ к цветовым компонентам (в PhotoShop они называются каналами) осуществляется при помощи панели Channels (Каналы). Вызвать ее на экран можно при помощи команды WindowShow Channels (ОкноКаналы). На этой панели отображаются небольшие копии изображений, соответствующие каналам, и их названия. Самое верхнее изображение отображает все каналы одновременно (готовое изображение). Название этого изображения соответствует названию режима. В зависимости от цветовой модели, в которой вы работаете, состав каналов будет изменяться. На рис. 3.6 изображена панель Channels (Каналы) при переводе изображения в режимах RGB, Lab, CMYK и Grayscale (Градации серого).

Рис. 3.6. Панель Channels при работе в режимах RGB, Lab, CMYK и Grayscale

ПРИМЕЧАНИЕ. В режиме Grayscale (Градации серого) изображение содержит только один канал — яркость. В режиме Lab яркость также задается в виде отдельного канала, но кроме яркости задается еще и цвет (в виде двух цветовых составляющих).

Щелкнув мышью на названии или изображении канала, вы можете вызвать его для редактирования. После этого все инструменты будут действовать только для этого канала. Выделив совместный канал (самый верхний в списке), можно вернуться к нормальному редактированию. Щелчок на изображении глаза рядом с символом канала позволит скрыть канал или вернуть его на экран.

СОВЕТ. При помощи команды Split Channels (Разделить каналы) из меню панели Channels (Каналы) вы можете преобразовать изображение в несколько файлов, каждый из которых будет хранить информацию об одном из каналов, находившихся в исходном файле. Это может использоваться, например, при подготовке изображения к печати на офсетной машине. Команда Merge Channels… (Объединить каналы…) позволяет произвести обратную операцию — объединить несколько файлов в один, образовав несколько цветных каналов из монохромных изображений.

Редактирование отдельных каналов позволяет достичь интересных эффектов. Например, применяя фильтры к одному или нескольким каналам, можно добиться игры оттенков, практически недостижимой другими методами.

Еще одна сторона различных подходов к заданию цвета — использование различных систем их обозначения. Даже в рамках одной модели цвет можно задать несколькими способами. Самый простой и логичный метод — непосредственное задание цветовых составляющих. В большинстве случаев цвета определяются именно так. Однако есть еще несколько способов, обозначаемых первыми буквами используемых компонентов оттенка. Наиболее распространенный из них — HSB (Hue, Saturation, Brightness — Оттенок, Насыщенность, Яркость). Это альтернативный способ задания цвета, широко используемый при работе в различных цветовых моделях. Его преимущество состоит в том, что цвета группируются по удобным для восприятия человеком признакам — цветовому тону, насыщенности и яркости. Иногда эти признаки называют несколько иначе, например, «интенсивность» («value») вместо «яркость». В отличие от методов задания при помощи цветовых компонентов, задание цвета в системе HSB позволяет легко оценить множество доступных цветов на глаз.

ПРИМЕЧАНИЕ.Компоненты, определяющие цвет, иногда называют координатами, а множество цве- тов — пространством. Это особенно удобно при визуальном представлении множества оттенков. Координату Н (Hue — Оттенок) обычно измеряют в градусах (от 0 до 360), а изменяющиеся по ней опенки изображают в виде окружности. Координаты S (Saturation — Насыщенность) и В (Brightness — Яркость) измеряют в процентах (от 0 до 100).

Adobe PhotoShop предоставляет пользователю возможность выбора между различными способами задания оттенков. Переключение производится в окне выбора цвета, выводимом на экран, например, при щелчке на символе цвета на панели инструментов. Это окно изображено на рис. 3.7.

В левой части окна находится зона выбора цвета, а рядом с ней — вертикальный ползунок. В правой части окна располагаются поля для ручного ввода значений цветовых компонентов. Рядом с некоторыми из полей ввода видны круглые переключатели. С их помощью можно выбрать, какой из параметров цвета будет отображаться на ползунке. Например, на рис. 3.7. это параметр Н (Hue — Оттенок). Поле выбора цвета отображает изменение оттенков по двум оставшимся координатам цветового пространства (в данном случае это насыщенность и яркость). При этом вы можете видеть сходные оттенки и легко «перемещаться» по пространству цветов. Всего для обозрения доступно три пространства — HSB, RGB и Lab, в каждом из которых цвет задается при помощи собственного набора компонентов. Так как компонентов в любом из этих случаев три, вы можете выбрать, за какой из них будет отвечать ползунок. Цветовая модель CMYK тоже представлена в этом окне, но так как она содержит четыре компонента, представить ее так же, как трехмерные модели RGB и Lab, невозможно. Поэтому указать цвет в рамках модели CMYK вы можете только при помощи полей ввода.

Рис. 3.7. Окно выбора цвета (по умолчанию цвета задаются в координатах HSB)

В верхней части окна выбора цвета располагаются два прямоугольника, отображающих текущий и выбранный оттенки. При помощи их вы можете, подбирая цвета, контролировать свои действия. Если указанный цвет не может быть отображен в рамках модели CMYK (а это случается довольно часто) рядом с этими прямоугольниками появится символ в виде восклицательного знака в треугольнике, а рядом с ним — образец цвета, приемлемого для этой цветовой модели. Когда цвет выходит за рамки безопасной палитры браузеров, рядом с прямоугольниками отображается символ в виде цветного кубика. Щелкнув мышью на символе, вы можете принять указанный рядом с ним цвет.

ПРИМЕЧАНИЕ. Безопасной палитрой называют набор цветов, одинаково отображаемых браузера ми в операционных системах Mac OS и Windows.

Предотвратить выход цвета за рамки безопасной палитры можно, установив в окне выбора цвета флажок Only Web Colors (Только цвета Web). При этом ползунок и зона выбора оттенка будут преобразованы к «безопасному» виду. На рис. 3.8. показан вид окна в этом режиме.

Рис. 3.8. Окно выбора цвета в режиме просмотра цветов, «безопасных для Web»

Во многих случаях удобно не только получить цвет, передаваемый в Интернете без искажений, но и иметь возможность получить его обозначение для использования на web-странице. Это можно сделать при помощи специального поля. В нем отображается HTML-код текущего цвета. При помощи его контекстного меню можно скопировать код или вставить его в поле (тем самым выбрать новый цвет). Таким образом, у вас есть возможность непосредственно поместить код цвета в HTML-документ или загрузить его из HTML в PhotoShop. Вы также можете задать код цвета вручную, просто введя его с клавиатуры.

ПРИМЕЧАНИЕ.Для выполнения операций с полем ввода необходимо выделить содержащийся в нем текст.

Пользователи, предпочитающие выбирать цвет при помощи панели Color (Цвет), также могут использовать безопасную палитру и различные цветовые модели. Выбрать режим можно при помощи меню, появляющегося после нажатия на кнопку со стрелкой. В нем находятся команды выбора способа представления цвета (RGB, CMYK, Lab и т. д.), команда копирования в буфер обмена HTML-кода цвета (Copy Color as HTML (Копировать как HTML)), команды выбора режима спектра, расположенного на панели, а также команда Make Ramp Web Safe (Безопасный для Web спектр). При подготовке web-графики особенно полезной может оказаться команда Web Color Sliders (Цвета Web). После ее вызова при помощи ползунков, задающих цветовые составляющие, выбирается только «безопасный» цвет. На рис. 3.10 изображена панель Color (Цвет) в режимах RGB Sliders (RGB) и Web Color Sliders (ЦветаWeb).

Рис. 3.10. Панель Color в режимах RGB Sliders (слева) и Web Color Sliders (справа)

Обратите внимание на символ несоответствия выбранного цвета безопасной палитре, отображаемый в режиме выбора безопасных цветов. Щелкнув на нем, вы сможете принять для использования предложенный программой эквивалент. Вы также можете выбирать безопасные цвета из спектра, вызвав предварительно из меню панели команду Make Ramp Web Safe (Безопасный для Web спектр).

СОВЕТ. Вызвать панель Color (Цвет) на экран можно при помощи команды WindowShow olors (ОкноЦвет).

ПРИМЕЧАНИЕ. При переводе панели Colors (Цвет) в безопасный режим вы сможете выбирать из фиксированного набора цветов «безопасной» палитры. Возможные значения цветовых составляющих отмечены на ползунках штрихами.

Несмотря на то, что окно выбора цвета и панель Color (Цвет) предоставляют возможность работы с безопасной палитрой, гораздо удобнее выбирать стандартные цвета при помощи панели Swatches (Образцы) (см. рис. 3.11). Она вызывается на экран командой WindowShow Swatches (ОкноОбразцы).

Рис. 3.11. Панель Swatches

Нажав кнопку Create new swatch of foreground color (Создать образец цвета переднего плана), расположенную на панели Swatches (Образцы), вы можете создать из цвета переднего плана новый образец. Чтобы удалить образец, перетащите его при помощи мыши на специальную кнопку, расположенную на той же панели.

СОВЕТ. Вы можете в любой момент вернуть панель Swatches (Образцы) в исходное состояние. Для этого достаточно вызвать из ее меню команду Reset Swatches (Восстановить образец). Также полезно знать, что каталоги цветов, поставляемые с программой, находятся в подкаталоге \Presets\Color Swatches\ каталога, в который был установлен PhotoShop.

ЦВЕТА

Цвета играют большое значение в каждом аспекте нашей жизни и нередко означают больше чем слова. Аналогично, цвета играют важную роль при разработке веб-сайта. Часто можно наблюдать, что сайт, несмотря на большой функционал и контент не в состоянии привлечь и удержать своих посетителей. И это возможно из-за несоответствия цветовой гаммы дизайна сайта его назначению. Поэтому проектировщик должен правильно подобрать набор цветов и учесть возможность их сочетания с другими элементами веб-дизайна при разработке сайта. Перед выбором цветов следует учитывать различные факторы и для этого необходимо понимание цветов и их значения.

Красный – мощный цвет, обозначающий сильные эмоции страсти, азарта, любви, энергии, стимулирует тело и ум. Используется, чтобы привлечь внимание и побуждает пользователя для быстрого принятия решения. В веб-дизайне весьма популярен и используется для выделения определенных элементов, усиливая в них внимание посетителя.

Черный – цвет, который чаще всего используется для оформления текстового контента. Он поддерживает изящество, формальность и элегантность и может быть использован на любом сайте.

Синий с его королевским призывом и спокойным эффектом является хорошим цветом для веб-дизайна. Его сочетание с другими цветами, например с красным, желтым, зеленым, дает желаемый эффект. Это лучший цвет для корпоративных сайтов.

Зеленый – цвет природы, роста, благосостояния и согласия. Он является лучшим для рекламирования природных или органических товаров на сайте. Для сайтов о здоровье уместен именно этот цвет.

Серый – дает ощущение зрелости, серьезности, умеренности, профессионализма и качества. Он с успехом может быть использован для отображения именно этих качеств на сайте.

Коричневый – считается земным, естественным, простым цветом. Он передает ощущение надежности, полезности и консерватизма. С другой стороны он воспринимается немного скучно, но его можно комбинировать с более яркими цветами. Этот цвет также связывается со старинными фотографиями, материалами и может применяться для внушения ностальгии.

Желтый – хотя цвет и ассоциируется с энергией, яркостью, осмотрительностью, счастьем и применяется для захвата внимания, но стоит быть с ним осторожным, поскольку злоупотребление приводит к отрицательным результатам. Чрезмерное его применение не является приятным для посетителя, который может его отпугнуть.

Оранжевый – теплый, яркий цвет, который ассоциируется с энергией и яркостью. Хотя он и менее агрессивный, как красный, но также используется для привлечения внимания и выделения важных областей дизайна. Оранжевый без крика делает серьезный вызов. Оранжевый часто передает ощущение дружелюбия, а в умелых руках может сохранить серьезность и профессионализм.

Фиолетовый обычно ассоциируется с тайной и духовностью, а глубокий фиолетовый – с процветанием, богатством, роялти и благородством. Достаточно сильный цвет, который в осторожном использовании может обеспечить хороший контакт на сайт.

Белый хорошо сочетается с любым цветом и ассоциируется с чистотой, невинностью, добротой. И утверждение, что белое есть скучным в веб-дизайне – ложное. Белый является хорошим, но непростым элементом хорошего дизайна.

Чтобы цвета с их эффективностью вызвали нужную реакцию посетителей, следует учитывать следующие факторы:

Целевая аудитория. При выборе цветовой гаммы веб-сайта очень важно знать правки и потребности пользовательской аудитории.

Культурный контекст. Каждая культура по своему трактует цвета. В одном поселении цвет может вызывать положительные эмоции, тогда как в другом он несет отрицательное значение. Это влияет на выбор дизайна для сайтов, которые обслуживают разные культуры.

Читабельность. Для повышения читабельности следует держать равновесие между цветами фона и текста. Использование цветов должно быть таким, чтобы облегчить чтение, уменьшить нагрузку на зрение посетителей.

Четкость. В дополнение к читабельности четкость также является важным фактором. Части сайта, которые требуют внимания должны быть выделены и легко узнавать пользователями.

Доступность. Поскольку сайт предназначен для всех, то стоит позаботиться о цветах для любых пользователей и такую ??цветовую комбинацию, которая позволяет легко читать содержимое.

Цветовые комбинации – важный аспект веб-дизайна и сайт с правильной комбинацией цветов позволит положительно повлиять на посетителей. Ведь цвет действительно имеют место в создании веб-сайта, и наши дизайнеры могут предложить вам лучшую их комбинацию.

Монохроматическая палитра

В такой палитре используется только один цвет, но с разными значаениями насыщенности и яркости. Такие схемы аккуратны, благородны и действуют успокаивающе.

На приведенных ниже примерах, можно использовать первый цвет, как основной. Второй цвет для текста или бэкграунда. Третий цвет для беграунда или текста. А четвертый и пятый для различных графических элементов и акцентов.

Комплиментарная палитра

В этой гармонии используются два контрастных цвета с круга и из них выбирается один основной цвет. Остальные цвета в палитре – это производные по насыщенности и яркости от двух превоначальных цветов.

Сплит комплиментарная палитра

Это разновидность предыдущей палитры, с той разницей, что один из контрастных цветов разделен на два соседних цвета.

Аналоговая палитра

Аналоговая палитра основана на трех цветах, следующих друг за другом на цветовом круге. Из них один цвет является основным, а два других вспомогательными.

Триадная палитра

Здесь используются три цвета, равноудаленные друг от друга. Из них один основной, а два других вспомогательные.

Палитра прямоугольник

В этой схеме используются две пары противоположных цветов. Эта схема достаточно сложна для использования в дизайне, поскольку требует очень точной настройки.

Палитра квадрат

Эта схема аналогична предыдущей, но все четыре цвета равноудалены друг от друга. Также достаточно сложна для использования в дизайне, поскольку требует очень точной настройки.

Дополнительные цвета

После того, как вы выбрали цветовую схему, обеспечили хороший контраст между текстом и фоном, осалось лишь выбрать вспомогательные цвета. Как правило, это оттенки ваших основных цветов. Эти цвета могут быть использованы при наведении на объект, в текстовых ссылках или декоративной тени у текста. Не следует перегружать сайт большим количеством цветов, это создаст ненужный хаос и отпугнет посетителей. Оптимально это 4-6 цветов на сайте.

Статьи к прочтению:

Основы цветовой теории

Похожие статьи: