Не так давно при работе над одним проектом у меня возникла необходимость создать хорошую цветовую палитру. С цветовыми гармониями я успел разобраться довольно давно, так что вопрос лежал скорее в практической плоскости: чем её делать? К счастью, существует замечательная цветовая пипетка Gpick.
На первый взгляд Gpick может показаться сравнительно простой программой, но это совсем не так. Демонстрацию основных функций можно посмотреть в следующем видеоролике:
А теперь давайте рассмотрим программу обстоятельнее.
Пипетка
Ну, хорошо — цветовые гармонии. А как же пипетка? Разве не ради неё задумывалась программа? Она же не виновата, что разработчик малость увлёкся и, поймав волну, реализовал половину фотошопа? Да, в Gpick всё начинается с пипетки, которая работает для всего экрана и может снимать цвета откуда угодно.
Пипетка активируется щелчком по кнопке справа внизу. Далее при перемещении указателя за ним будет следовать плавающее окном с увеличенным представлением области вокруг указателя. Это помогает точнее снять цвет одного-единственного пиксела.
При необходимости Gpick может усреднять снимаемое значение, учитывая окружающие точки растра. Это регулируется двумя параметрами — ползунком «Oversample» и раскрывающимся списком «Falloff». «Oversample» указывает, как много точек растра вокруг указателя вовлекается в расчёт усреднённого значения, а «Falloff» контролирует, насколько окружающие точки влияют на конечный результат по мере их удаления от центра.
Например, если вам нужно, чтобы все окружающие точки влияли на усреднённое значение в равной степени, выберите «None». Если же вам нужно, чтобы они сначала влияли в равной степени, а потом резко влияли меньше, выберите «Cubic». К каждой кривой прилагается значок с графиком, который позволяет понять, как она работает.
Когда вы снимаете пипеткой цвет, он автоматически добавляется в палитру справа и получает некоторое название. Названия автоматически подбираются из двух цветовых палитр, распространяющихся с программой. Первая — это палитра Resene Paints Ltd., вторая — палитра X11.
Круги гармонии
Вернёмся к гармонии. Хотя многие привыкли к цветовому кругу RGB, в Gpick кроме того есть два варианта цветового круга на основе цветовой модели RYB:
Модель RYB в наше время имеет скорее историческое нежели практическое значение, хотя её до сих пор преподают в художественных школах. Разница между двумя версиями круга на основе RYB сугубо техническая: вторая реализация является более поздней и более точной; вы с лёгкостью заметите, что в ней богаче представлены оттенки синего.
По умолчанию редактирование светлоты и насыщенности через цветовой круг заблокировано. Это сделано для того, чтобы можно было менять только тона с одинаковой светлотой и насыщенностью. Блокировку можно снять через контекстное меню, хотя можно просто подбирать значения каналов S и L перемещением ползунков справа от цветового круга.
Здесь следует упомянуть, что пользовательский интерфейс программы очень активно использует контекстные меню (под правой клавишей мыши) и перетаскивание/бросание. Практически любой цвет, который вы видите в программе, может быть перетащен куда угодно. При этом у каждого элемента интерфейса показывающего цвет, есть контекстное меню, через которое значение в произвольной разметке (hex, RGB. HSL) можно скопировать в буфер обмена.
Через раскрывающийся список «Type» можно выбрать один из десяти способов построения цветовой гармонии: противоположные цвета, аналоговый метод, триады, разделённые противоположные цвета, квадрат, нейтральные цвета, дисгармония, пять тонов и шесть тонов. Если вам это в новинку, советую почитать отличную статью Ярослава Лазунова «Open the Door into the Science of Color Theory». Ещё более подробное объяснение можно найти у Джейсона Коэна в статье «Color Wheels are wrong? How color vision actually works».
Пока же давайте договоримся, что есть два основных подхода к построению гармоничных цветовых схем: относительное размещение тонов по цветовому кругу и вариации одного тона в заданном диапазоне яркости и/или насыщенности.
При вращении тона цветовые виджеты вверху автоматически обновляются:
Если полученный набор цветов вам нравится, их можно просто по одному перетащить в палитру справа, либо воспользоваться контекстным меню:
Инструменты генерирования вариаций
Как только цвета оказываются в палитре справа, у вас появляется доступ к нескольким инструментам для создания вариаций цветов. Все они вызываются через контекстное меню под правой клавишей мыши.
Первый инструмент, который называется «Variations», можно использовать для создания градаций тона в выбранном диапазоне яркости/светлоты и насыщенности. Таким образом вы можете очень просто создавать так называемые ахроматические и монохромные цветовые палитры. Ахроматическая палитра — это градации серого цвета, монохромная — градации яркости любого тона.
В диалоге вы можете указать диапазон значений светлоты и насыщенности, а также выбрать количество промежуточных цветов в этом диапазоне. Вы можете свободно комбинировать варьирование светлоты и насыщенности в любом направлении. По нажатию кнопки OK цвета добавятся в палитру в правой части окна программы.
В отличие от «Variations» инструмент «Generate colors» создаёт вариации тонов, не меняя насыщенность и светлоту:
Здесь точно так же можно выбрать количество генерируемых цветов. Нужно просто помнить, что при генерировании цветовых схем, основанных на противопоставлении цветов, создаваемые тона будут повторяться с известной периодичностью.
Последний инструмент редактирования палитр, «Mix Colors», создаёт промежуточные цвета для выбранных цветов. Опорных цветов может быть сколько угодных, промежуточных цветов между каждой парой — не менее трёх.
Таким образом вы можете легко создавать собственные цветовые палитры, которые комбинируют основные тона и их яркостные градации.
Тестирование и экспорт
Когда палитра подобрана, с ней можно сделать несколько вещей. Во-первых, вы можете опробовать её в Inkscape или GIMP: достаточно просто подцепить цвет и перебросить его в окно одной из этих программ. В GIMP это приведёт к заливке текущего выделения или, при отсутствии выделения, всего текущего слоя. Inkscape как редактор векторной графики более гибок: он зальёт этим цветом только тот объект, на который вы бросили цвет (выделять объект не нужно).
(Кстати, в Gpick точно так же можно перебрасывать цвета из Inkscape и GIMP, а при перебрасывании градиента он использует цвет первой опорной точки.)
Второе, что можно сделать с цветовой палитрой, — это протестировать её на макете сайта на вкладке «Layout Preview»:
В комплекте есть несколько предустановок, включая простой макет сайта с меню. Для каждого макета можно задать селекторы CSS, а затем сохранить файл CSS, который затем можно использовать в дизайне сайта.
Наконец, вы можете попросту экспортировать палитру в файл палитр GIMP (.gpl), Adobe Swatch Exchange (.ase) или Alias/WaveFront Material (.mtl). У программы есть и собственный двоичный формат данных для хранения палитр.
Дополнительные инструменты
Думаете, на этом всё? Цветовые круги, схемы и экспорт в CSS? Как бы не так. Реализация главного окна программы немного напоминает встроенную оконную систему Blender: в одном окне можно открывать разные инструменты одновременно. В нижней части помимо дубликатов верхних инструментов есть ещё три новых.
Первый называется «Darkness-Brightness» и генерирует 8 яркостных градаций основного тона:
Интенсивность градаций зависит от положений небольшой окружности на диаграмме слева. Высота окружности (ось ординат) контролирует контраст (промежуток между яркостными значения) тёмных градаций, по горизонтали (ось абсцисс) откладывается контраст светлых градаций. Таким образом вы можете создать очень контрастные светлые градации и едва различимые тёмные.
Второй инструмент называется «Variations» и, подобно предыдущему, по умолчанию создаёт четыре более светлых и четыре более тёмных градации тона:
По умолчанию — потому что изначально использует для расчётов канал L в LAB. От «Variations» он отличается тем, что промежутки между яркостными значениями градаций контролируются единообразно, для чего используется ползунок «Strength».
Если же канал L в LAB вам не интересен, можно через контекстное меню каждого из трёх опорных цветов выбрать один из каналов HSL:
Наконец, остаётся «Color mixer», который берёт три исходных цвета и смешивает их с некоторым четвёртым, давая три новых цвета:
Но даже здесь есть продвинутая функциональность: слово «Difference», которое вы видите на виджете с опорным цветом, является названием режима смешивания. Таких режимов в программе семь, ну и, как вы уже заметили, в дополнение к этому можно контролировать непрозрачность. Суть та же, что при смешивании слоёв в редакторах вроде GIMP или Photoshop.
Прочее
Вы не поверите, но у Gpick есть ещё больше функций. Давайте я вам просто перечислю некоторые:
- генератор плитр из растровых изображений (Tool > Palette From Image…);
- настраиваемые конвертеры между вариантами синтаксиса цветов (Edit > Edit Converters…);
- импорт и экспорт палитр GIMP (.gpl) и Adobe Swatch Exchange files (.ase).
Понятно, что при текущей версии 0.2.3 невольно возникает вопрос, какие у разработчика планы на будущее. На этот вопрос Альбертас ответил, что активно проект сейчас не разрабатывается, но кое-что на будущее запланировано, в частности, управление цветом и имитация разновидностей цветонеразличения.
Скачивание и установка Gpick
Если вы пользуетесь Linux, можно скачать сборки Gpick для Ubuntu или поискать программу в репозитории вашего любимого дистрибутива (в Fedora она появилась после публикации английской версии этого обзора). В крайнем случаем можно скачать исходный код и собрать программу командами ‘$ scons» и ‘$ scons install’ (последняя запускается с правами администратора или через sudo).
О пользователях Windows тоже позаботились, хотя сборка предполагает, что в системе уже есть библиотека GTK+, установленная вместе с GIMP, Inkscape или Pidgin. Ну и кроме того, версия сборки несколько отстаёт.
Сложнее всего пользователям Mac: программы нет ни в MacPorts, ни в Fink, ни в Homebrew. Так что вам, возможно, придётся установить SCons вместе со средствами разработки GTK+, чтобы собрать программу самостоятельно. Впрочем, для Mac OS X должно быть предостаточно аналогичных нативных приложений, начиная с Adobe Illustrator и его встроенных инструментов работы с цветовыми гармониями.
Прочие приложения
Надо думать, Gpick не может быть единственной программой такого рода в Linux.
Agave
Это сравнительно простой генератор цветовых схем для Linux и UNIX. Поддерживаемых схем в нём поменьше: Monochromatic, Analogous, Triads, Tetrads, Complements, Split-Complements.
Опорный цвет для расчёта цветовой схемы в Agave можно выбрать тремя способами: выбрав из готовой палитры внизу (программа ищем файлы .gpl в папке /usr/share/agave/palettes/), выбрав цвет пипеткой (кнопка слева от раскрывающегося списка гармоний) или перетащив цвет из Inkscape или GIMP.
Кроме того, вы можете изменить яркость опорного цвета через кнопки на панели инструментов, меню, либо горячими клавишами. Экспортировать программа может только файлы палитр GIMP.
Программа не обновлялась с 2009, но в современных системах работает совершенно нормально. Подробную статью об Agave на английском можно прочитать на сайте Fedora.
Что ещё? В некоторых свободных дизайнерских программах есть встроенные инструменты для работы с цветовыми гармониями. К сожалению, в немногих.
Scribus
Этот хорошо всем знакомый пакет для подготовки печатных публикаций стал первым, где был реализован цветовой круг с генератором гармоничных цветовых палитр. Набор схем очень простой: монохроматическая, аналоговая, противоположные цвета, разделённые противоположные цвета, триады и тетрады.
Что делает цветовой круг Scribus особенным, так это встроенная имитация дефектов цветоразличения. Этот переключатель также есть в основном окне программы, справа внизу.
MyPaint
MyPaint тоже не нуждается в особом представлении. Этот отличный редактор для художников с прекрасной поддержкой планшетов успел полюбиться многим.
При выставлении флажка на круге рисуются различные значки (квадраты, прямоугольники, треугольники), каждый их которых соответствует определённому типу гармонии.
GIMP? Inkscape?
К сожалению, ни в одной из этих программ нет встроенных инструментов для работы с цветовыми гармониями. Единственная более-менее релевантная функция в GIMP — генератор палитры из растрового изображения, вызываемый из меню диалога цветовых образцов. Там же есть генератор файлов CSS.
Появятся ли в этих двух важнейших свободных дизайнерских приложениях инструмент для создания гармоничных цветовых палитр? Поживём-увидим.
Оставить комментарий