ADV.Systems

09 Июл 2017

Основы колористики

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

Для начала, хотелось бы определить где начинается и где заканчивается понятие «Основы». Дело в том, что любой поверхностный взгляд на проблему, зачастую необъективен и упускает суть вопроса, а как известно, суть в дизайне это весь комплекс знаний и нюансов. Таким образом, полагаю, в данной главе стоит описать и разграничить общие понятия о предмете, не вдаваясь в подробности, чтобы не писать как таковой учебник по вопросам колористики. Это отдельная тема.

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

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

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

Первым, кто создал структурированную схему цветов был Леонардо Да Винчи. Он выделил шесть простых цветов: белый, жёлтый, зелёный, синий, красный, чёрный. При этом он сразу разделил цветовосприятие на два аспекта: художественный и физический.

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

Конус Оствальда

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

Цветовой круг

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

Цвет в web-пространстве так же имеет очень важную роль. Проблема заключается в том, что у всех пользователей мониторы настроены по разному. Некоторые даже редко протирают или указывают коллегам на них что-либо, оставляя отпечатки пальцев. Следовательно мы не можем гарантировать, что на калиброванном 21? CRT-мониторе дизайнера и на TFT-мониторе заказчика в складском помещении мы получим одинаковую цветопередачу.

Исходя из теории web-графики можно с уверенностью заявить, что было бы оптимальным использование так называемых «безопасных цветов» То есть палитры из 256 цветов. Кстати, простите за маленькое отступление, к пиксельной графике для иконок и мобильных устройств я бы рекомендовал именно такой подход.

Что касается псевдо 3D иконок конечно придётся использовать всю палитру, но всё-таки это актуально, особенно при создании качественного многослойного продукта.

Немаловажным пунктом является и цветоделение

Для Web-индустрии наиболее распространено деление RGB — красный, зелёный, синий. Однако, для полиграфии это CMYK – голубой, пурпурный, жёлтый, чёрный (ключевой).

Палитра RGB и палитра CMYK

“Диапазон цветов, которые может воспроизвести устройство, называется цветовым охватом. Определенный цветовой охват имеют электронно-лучевые трубки мониторов и полиграфические краски (диапазон цветов, который они могут воспроизвести), цветовые модели (диапазон цветов, который они могут описать) и, конечно, человеческий глаз (диапазон воспринимаемых им цветов, или локус). Монитор может воспроизвести только часть того, что видит человеческий глаз.

Область цветового охвата монитора больше, чем область цветового охвата офсетной печати, но существуют цвета, которые могут быть воспроизведены монитором и не могут быть напечатаны и , наоборот, цвета, которые могут быть напечатаны и не могут быть показаны монитором. На рисунке показан охват человеческого глаза (соответствует модели цвета XYZ), монитора, отображающего цвета в модели RGB, и офсетного станка, являющегося CMYK-устройством.”

Восприятие человеком: разделение RGB CMYK

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

Часть файлов поддерживает alfa-канал, часть нет. Alfa-канал это прозрачный слой в файле, который дизайнер может использовать в своих интересах и весьма успешно. Наиболее распространёнными в сети и поддерживаемые браузерами являются форматы jpg, jpeg, gif, png.

jpg и jpeg alfa-канал не поддерживают. Они не могут иметь прозрачного фона и обязательно маскировать стыки, если вы накладываете их на другое изображение.

gif и png alfa-канал поддерживают, но возникает одна сложность, а именно – формат gif не может быть полупрозрачным – полупрозрачный элемент придётся так же маскировать. Например, подложить часть фона под тень. При этом не все браузеры корректно понимают alfa-канал png, зато в нём полупрозрачные элементы выглядят исключительно чисто.

В чём же ещё различие форматов?

PNG – (англ. Portable Network Graphics) это формат с минимальными потерями на сжатии. Другими словами он сохраняет графическое изображение с минимальными размерами файла без уменьшения качества картинки. Он был разработан на смену вездесущего GIF формата, легальное использование которого требовало наличие лицензии у производителей графического софта (сейчас действие патента на GIF/LZW истекло). PNG это международный стандарт (ISO IEC 15948:2003) в официальных рекомендациях W3C.

Являясь свободным форматом PNG предлагает для веб дизайнера различные практические преимущества над GIF:

— Лучшее сжатие: для большинства изображений PNG достигает меньшего размера файла чем GIF
— Большая глубина цвета: PNG предлагает truecolor до 48 бит, когда в GIF мы имеет только 256 цветную палитру
— Прозрачность альфа канала: когда GIF предлагает только двоичную прозрачность, PNG допускает практически неограниченные эффекты прозрачности, предлагая для прозрачности альфа канал. Уместно заметить, что PNG не позволяет делать анимацию, как это делает GIF. Но существует стандарт Multiple-image Network Graphics (MNG), который это позволяет, но он не так широко поддерживается веб браузерами и графическими редакторами.

GIF (англ. Graphics Interchange Format ) — формат для обмена изображениями; формат хранения графических изображений. Формат GIF способен хранить сжатые данные без потери качества в формате до 256 цветов. Независящий от аппаратного обеспечения формат GIF был разработан в 1987 году (GIF87a) фирмой CompuServe для передачи растровых изображений по сетям. В 1989-м формат был модифицирован (GIF89a), были добавлены поддержка прозрачности и анимации. GIF использует LZW-компрессию, что позволяет неплохо сжимать файлы, в которых много однородных заливок.

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

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