Описание и использование палитры Kuler в фотошопе. Цветовые миксеры. ColorSchemer Studio vs Adobe Kuler

Напишу как работать с программой кулер для нахождения палитр на основе имеющихся цветов . Нам понадобится 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 Swatch Exchange (Обмен образов) .ASE

Вход

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

Возможности системы

Меню системы делится на несколько разделов, с помощью которых вы можете:

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

После входа в систему вы можете скачать созданные темы, нажав на «скачать» .

Все инструменты Adobe CS4, CS3 и CS2 поддерживают обмен цветовыми палитрами через.ASE файлы. Например, можно спокойно перенести палитру как из Illustrator в Photoshop так и в обратном направлении.

Импортировать скачанные с Adobe Kuler .ASE файл можно в панели Образцы (Swatches Panel) нажав на маленький треугольник в правом верхнем углу и выбрать пункт «Загрузить образцы» (Load Swatches) и затем выбрать нужный файл.

Изменение создание цветовых тем

Раздел создать (Create) позволяет нам создавать темы с нуля. Есть возможность создать тему из цвета или изображения.

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


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

Analogous (Аналогия – подобия)
. Monochromatic (Монохромный)
. Triad (Триада трехцветовой)
. Complementary (Дополнительные цвета)
. Compound (составной, из соседних оттенков)
. Shades (оттенки)

Использование цветового колеса может показаться неточным, поэтому основной цвет можно ввести в виде числовых значений HSB, RGB, CMYK, LAB, или HEX цветовых моделей.

Цвет из изображения

Очень полезный инструмент в Kuler, является инструмент генерации цветовых тем из изображения. Можно загрузить изображения или использовать из Flickr. После чего применить различные цветовые правила, Kuler представляет различные модификации:

Colorful (Красочный)
. Bright (Яркий)
. Muted (Приглушенный)
. Deep (Глубокий)
. Dark (Темный)
. Custom (Обычный)

Поддерживаются TIFF, JPEG, GIF, PNG, BMP форматы изображения.

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

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 . Спасибо!