Adobe Kuler инструмент для создания цветовых тем для Photoshop. Цветовые миксеры. ColorSchemer Studio vs Adobe Kuler

На iOS - iPhone, iPod touch 03.04.2019
На iOS - iPhone, iPod touch

Как часто вы смотрели на что-то перед собой, и думали: "какое удивительное сочетание цветов"? Наверняка, не один раз. Если вы при этом так или иначе связаны с дизайном, то с немалой вероятностью вы бы хотели использовать увиденный набор цветов в какой-то из своих работ. Именно поэтому компания Adobe выпустила приложение, которое раньше называлось Kuler, а на днях обновилось и получило новое имя Adobe Color CC.

Последнее обновление iOS-продуктов Adobe явно является самым крупным за всю историю и позволяет понять, что дальнейшее будущее свое компания связывает четко с - все продукты получили буквы CC в названии и улучшили свою интеграцию с облаком. Теперь большая часть приложений разделена на «компаньонов» Illustrator и «компаньонов» Photoshop, что выразилось в изменении цветов и названиях приложений. Практически все приложения бесплатны, если вы купили подписку на Creative Cloud, таким образом, Adobe дает все больше причин для оформления этой самой подписки. Но вернемся к Colors CC.

Программы достаточно прост. После запуска открывается окно камеры, само устройство при этом надо направить на объекты с заинтересовавшей вас цветовой палитрой. Colors CC сам определит на изображении доминирующие цвета и выберет 5 основных. Вам останется нажать на кнопку, подтверждающую выбор.

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

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

Напишу как работать с программой кулер для нахождения палитр на основе имеющихся цветов . Нам понадобится paint или photoshop и сама прграмма kuler http://kuler.adobe.com

Для примера возьму свой цвет глаз.

1) Открываем фотографию в пейнте или фотошопе и инструментом пипетка выбираем нужный цвет.
NB Глаза у многих людей многоцветны, попробуйте выбрать усредненный, либо выберите тот, что доминирует.



2. Откройте палитру. Там будут даны координаты получившегося цвета. CMYK или RGB . Выбираете любую из них и запоминаете.

На том компьютере, на котором я сейчас нахожусь, старая версия пейнта. RGB - это red green blue - соотношение красного, зеленого и синего в цвете. У меня R =38 , G=57 , B= 51

4. Теперь рассмотрим остальные схемы. При выборе слова monochromatic получится родственная схема - один цвет с разной яркостью и светлотой.( можно прочитать о родственной (монохромной) схеме)

5. При выборе shades получатся вариации только по темноте, яркость меняться не будет.

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

7. Не менее интересный, дающий основы для расширения палитр - triad - позволяет создать равноудаленные (триадические) схемы. (а можно почитать о триадической схеме)

8. Чтобы воссоздать полученные в кулере цвета в таблицах пейнта и фотошопа вам нужно просто лишь посмотреть координаты цвета в кулере (как вы видите, под каждым цветом табличка) и ввести их палитре вашего графического редактора, а потом сделать ими заливку квадратика таблицы=)

Adobe Kuler — так назван ресурс обмена цветовыми решениями kuler.adobe.com. Цветовое решение — это пять цветов, сочетающихся между собой в соответствии с одним из правил цветовой гармонии. При подключенном к Интернету компьютере обращение Windows > Extensions > Kuler выведет на экран окно, в котором на вкладке Create можно выбрать правило цветовой гармонии, и манипулируя движками на цветовом круге, создать свой набор цветов. Его можно сохранить со своим именем. Не ясно, почему в этом инструменте создаются только RGB-цвета, ведь подобный инструмент уже есть в программах Photoshop и Illustrator версий CS3, и там можно выбрать любую цветовую модель, и CMYK в том числе. Возможно, в этой программе данный инструмент предназначен исключительно для работы с экранным контентом. При работе с сохранением файла в pdf-формате можно и обойтись без возможности выбора CMYK-пропорции цвета, сейчас преобразование RGB-CMYK выполняется на лету, и к качеству преобразования нет претензий. Но скорее всего, возможность работать с CMYK-цветами появится или в одном из обновлений или следующей версии.

Но этот инструмент интересен еще тем, что он заставляет искать новые знания. Поднимите клавиатуру, кто знает, какие есть правила цветовой гармонии?

Да, этот вопрос выпадает из круга профессиональных знаний большинства верстальщиков, но коль скоро такой инструмент появился, надо им грамотно пользоваться. Вот тут http://mironovacolor.org/theory/harmony_theory/ в сети размещена хорошо подготовленная информация о цветовой гармонии. Вообще это очень интересный сайт о цвете — перейдите на главную страницу и посмотрите, сколько там всего интересного. К сожалению, и в сети сайты иногда исчезают, поэтому если вам эти вопросы интересны, имеет смысл сохранить на машине копию сайта.
Другой интересный вопрос — какие брать цвета. Число цветов, получающихся при переборе RGB значений, просто колоссально, и нужен путеводитель по этому массиву цветов. Каждый решает эту задачу, как умеет, вот некоторые способы решения задачи получения имен и пропорций цвета.
http://www.colorfor.narod.ru/ — тут по указанным RGB-пропорциям сообщается название цвета.
Другой ресурс — Википедия. Наберите в окне поиска «список цветов» и получите перечень, возможно, всех именованных цветов, переводов названий на русский язык, и пропорций в различных моделях.
К сожалению, ресурсу http://www.colorfor.narod.ru/ не хватает в перевода на лету из RGB в CMYK. Если кто знает подобный ресурс, поделитесь. (А может, кто из создателей colorfor.narod.ru читатет наш сайт, и это сообщение будет идеей, как доработать свою страницу).

Два упомянутые ресурса оперируют классическими, если можно так сказать, названиями цветов.

Но жизнь не останавливается, и дизайнеры создают свои цвета. Зайдите на сайт kuler.adobe.com , там собрано много интересных цветовых сочетаний. Коллекция постоянно пополняется, и я тоже внёс свою лепту — цветовая композиция moscow autumn доступна с прошлого года. Все желающие могут зарегистрироваться и размещать в общем доступе свои удачные цветовые решения.

C уважением, Михаил Иванюшин

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

О чем же я всё таки буду писать? О нескольких сервисах-миксерах - подборщиках адекватных для посетителя цветов, что является несомненно полезным инструментом в работе юзабилиста. Цвета, несомненно, очень важный инструмент в достижении большего удобства на сайте, что ярко доказывает на себе пример Яндекса . Например - то же цветовое разграничение блоков, которые я мимоходом описал в заметке о идеальных формах , и собираюсь в ближайшее время занятся продолжением сего вопроса.

ColorSchemer Studio

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

Дабы мои мысли нашли под собой основание - я заглянул в википедию, чтобы посмотреть - что она выдаст мне по определению «миксер» (. Итак, что мы там имеем:

Миксер - малый бытовой прибор предназначенный для взбивания яиц, приготовления напитков, муссов, омлетов, жидкого теста и т.п. Миксеры бывают стационарные и ручные (более распространённые устройства).

Очень… очень исчерпывающий ответ на столь конкретный запрос. Чтобы в дальнейшем у других людей не было проблем - я создал определение Цветовой миксер .

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

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

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


Инструмент «Цветовые гармонии» помогает нам увидеть этапы переходов между двумя основными цветами. Причем выдает этот инструмент 2 вида возможных переходов - темный, и светлый. Удобно.

Цвета с лучшей совместимостью

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


Photoschemer

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


Цветовой миксер

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


Анализатор цветовых сочитаний

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


Быстрое превью

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

Печать

После того как мы сохранили свою именную цветовую палитру - возможно потребуется её распечатать? И это легко сделать с помощью инструмента Print Your Color Schemes. Этим же инструментом можно перегнать полученные результаты в pdf - отличная возможность, если учитывать, что pdf стандартизировали.


Импорт и экспорт

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

Импорт:

Организовать импорт можно из любой сайтовой CSS (ну ничего себе…), gif изображения, файла цветовых таблиц (.act), и цветовой палитры photoshop (.aco)


Экспорт:

Экспортировать можно обратно в любую CSS, или html body атрибуты, в gif изображение, цветовую палитру photoshop, файлы цветовых таблиц, цветовую палитру illustrator (боже, и сюда добрались), Adobe Fireworks, и в Corel Painter

Достаточно обьемный список, не правда ли?


Также в программу входит сверх-удобная пипетка в качестве бонуса. Её кстати можно скачать отдельно бесплатно.

Цена

Увы и ах - но за программу требуют деньгу, что вполне логично - продукт ведь отличный. Стоит она 49 долларов в обоих вариациях - как для Windows, так и для MacOS (я думаю, многие уже перепугались, глядя на скриншоты, что пользователей windows оставили за бортом. К счастью это не так).

Дабы потестировать программу можно воспользоваться 15-дневной trial-версией, но будет мешать попап при старте программы.




Готовые сочетания

А теперь самое вкусненькое - на сайте программы просто МОРЕ отличнейших цветовых решений . Дерзайте!

Онлайновая версия ColorSchemer Studio

Выводы

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

В первой статье мы выяснили что такое цветовой миксер , и с чем его требуется кушать для пущего увеличения аппетита на примере программы ColorSchemer Studio. Несомненно хорошая вещь, но платная, а я решил сегодня посвятить статью бесплатному, и web-based инструменту от компании Adobe , которые также как и компания ColorSchemer вовремя просекли о том, чего не хватает дизайнерской братии. Итак встречайте - Adobe Kuler.

Эта заметка будет не в пример меньше, чем предыдущая, но не менее полезная. Почему меньше? Потому что веб-сервисы как бы не старались, а дорасти до полноценной программы пока не могут - следовательно - меньше возможностей, но удобнее. Еще один несомненный плюс - Kuler сохраняет результаты в вашем Adobe ID - т.е. в случае смены ОС на вашем компьютере, или постоянных сменах компьютера (работа-дом, дом и работа) - все будет доступно, если на компьютерах есть интернет. Что гораздо удобнее, чем возить на флешке готовые палитры из ColorSchemer Studio .


Цветовой миксер

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

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

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

К счастью разработчики из Adobe Labs знают свою работу хорошо, поэтому к несколько странному интерфейсу привыкаешь быстро.


Готовые цветовые решения

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

Из минусов хотелось бы сказать только одно - кулер достаточно популярный сервис, и выбрав цвета из первой десятке есть риск встретить «цветового клона» своего будущего сайта. Т.е. лучшее решение - это всё таки создать свой уникальный сборник, благо это удобно.


Уже готовые решения можно отсортировать по нескольким способам:

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

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

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

Создав свое решение вы тоже можете добавить его на сайт.


Экспорт

К сожалению импорта в самом сервисе нет, т.е. улучшить уже готовую палитру вашего сайта не выйдет. Получится лишь только заново их воссоздать. К счастью экспорт тут в наличии и позволяет перенести готовые результаты в любой из инструментов Adobe линейки CS2 и CS3. Молодцы. К сожалению здесь нет экспорта в Corel , и другие программы, отличные от Adobe по понятным причинам.

Выводы

Как и любое веб-решение какой-то задачи инструмент немного проигрывает в функциональности своим программным собратьям, но зато выигрывает в удобстве и скорости получения результата. Рекомендую использовать данный сервис в случае того, если вы часто меняете свой компьютер, ваши цвета размещенные в интернете никуда от вас не денутся. Для тех же, у кого проблемы с переносом данных нет - рекомендую всё же воспользоватся платным программным аналогом - ColorSchemer Studio.

Палитра Кулер (Kuler) — невероятно полезный, пополняемый сообществом пользователей генератор цветовых схем, который впервые появился в версии программы фотошоп CS4, а за несколько лет до того начал работу в виде веб-приложения.

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

Чтобы открыть палитру Kuler , выберите команду меню Окно — Расширения — Kuler (Windows — Extensions — Kuler)

Примечание

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

Внимание!

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

Интерфейс палитры Kuler

Расшифровка сносок:

Пункт 1 — Поле ввода поискового запроса.

Пункт 2 — Раскрывающиеся списки фильтров.

Пункт 3 — Темы.

Пункт 4 — Кнопка Просмотреть предыдущий набор тем (Previous).

Пункт 5 — Кнопка Просмотреть следующий набор тем (Next).

Пункт 6 — Кнопка Обновите темы в сообществе Kuler (Refresh).

Пункт 7 — Кнопка Редактировать тему в панели создания (Edit themes).

Пункт 8 — Кнопка Добавить данную схему в образцы (Add selected theme to Swatches).

Пункт 9 — Выбирайте базовый цвет, перетаскивая кружок мышью вверх/вниз или к центру/от центра круга.

Пункт 10 — Ползунковый регулятор яркости.

Пункт 11 — Cлева направо:

  • Кнопка Добавить текущий основной цвет как базовый (Add foreground color as base).
  • Кнопка Добавить текущий цвет фона как базовый (Add background color as base).
  • Кнопка Изменить другие цвета темы по законам гармонии (Apply harmony).
  • Кнопка Добавить в тему новый цвет (Add color).
  • Кнопка Удалить данный цвет из темы (Delete color).

Пункт 12 — Кнопка Загрузить цветовую тему на веб-сайт Kuler (Upload)

Как пользоваться палитрой

В верхней части палитры расположены три кнопки:

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

Обзор (Browse). Если вы хотите просмотреть созданные другими пользователями темы, то их можно искать, вводя ключевые слова (холодная, солнечная, романтичная, пастельные тона и так далее), имя создателя, название темы или шестнадцатеричное значение в поле ввода поисковых запросов. Или, как вариант, просматривайте список тем, используя полосу прокрутки. Раскрывающиеся списки в верхней части палитры позволяют сортировать темы по рейтингу, времени появления на веб-сайте и так далее.

Чтобы использовать определенную тему, то есть импортировать ее цвета в программу фотошоп, выделите ее, в затем щелкните по кнопке Добавить выбранную схему в образцы (Add selected theme to Swatches) — пункт 8 .

Также можно щелкнуть мышью по маленькому треугольнику, который появляется справа от схемы, если ее выделить, и выбрать в контекстном меню команду Добавить на панель образцов (Add to Swatches Panel).

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

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

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

Средний образец в ряду квадратных образцов, расположенном ниже цветового круга, будет показывать главный цвет. Когда вы найдете желаемый, можете изменить его значение яркости — пункт 10 , выше, чтобы осветлить, или ниже, чтобы затемнить его.

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

Когда вы подберете цвета темы, которые вас устроят, щелкните мышью по кнопке Сохранить тему (Save Theme) в левом нижнем углу палитры, чтобы сохранить тему, а затем щелкните мышью по кнопке, находящейся правее, чтобы добавить цвета данной темы на палитру Образцы .

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!



Рекомендуем почитать

Наверх