Приложение цветовой круг. Генераторы палитр в помощь веб-дизайнеру. Выбрать готовую профессиональную палитру
Одна из важных составляющих работы веб-дизайнера – создание палитры, подбор гармонично сочетающихся друг с другом цветов. Процесс это достаточно сложный, требующий творческого подхода. Есть ряд ресурсов, способных значительно упростить работу с цветом.
Недавно вы могли встретить детальную статью про . А чуть ранее я публиковал похожую заметку о инструментах для выбора с обзором Kuler и СolorBlender. Сегодня решил дополнить тему и предоставить чуть больше вариантов выбора палитр цветов для сайта.
ColoRotate
Инструмент ColoRotate позволяет выбирать самые подходящие цветовые схемы из большого числа готовых предложений или создавать собственные. Выбирая цвета в разных местах на вращающейся 3D палитре, можно получать сочетания, построенные на гармонии или на контрасте, работать с оттенками, яркостью, насыщенностью, смешивать разные краски. Можно также извлекать цвета из готовых изображений. Есть версия для iPad, доступна синхронизация с Photoshop. Очень красивый сервис.
Adobe Color CC
Генератор палитр и цветовых схем Adobe Color CC позволяет:
- экспериментировать с комбинациями цветов на интерактивном цветовом кругу (доступно 7 разновидностей цветовых систем);
- генерировать цветовые темы, пользуясь предварительно заданными стилями;
- создавать цветовые схемы, используя цвета с фотографии или любого другого готового изображения;
- делиться своими работами и знакомиться с чужими, черпая в них вдохновение.
Созданные цветовые темы можно сохранять в приложениях для ПК или мобильных устройств, а также в разделе “Мои Темы” на сайте.
DeGraeve
На сайте DeGraeve представлено множество инструментов, в том числе генератор цветовых схем на основе готовых изображений. Достаточно найти в интернете картинку с интересной цветовой гаммой, загрузить URL этого изображения в соответствующую строку на сайте и нажать кнопку генерации палитры. Через несколько секунд программа разложит картинку на 10 основных цветов, 5 приглушенных (dull) и 5 ярких (vibrant), присвоив каждому свой код. Сгенерированную палитру удобно использовать при работе над дизайном сайта, цвета будут отлично сочетаться друг с другом.
Contrast-A
Инструмент Contrast-A со слоганом «Найдите доступное сочетание цветов» предназначен для создания пользовательских палитр в процессе экспериментов с сочетающимися цветами. Программа основана на руководстве о сочетаемости цветов веб-контента (текста и фона). Для работы с ней желательны базовые знания по этой теме.
Сервис позволяет выбирать на палитре 2 цвета, и оценивать, как они будут смотреться вместе, будучи использованными как текст и фон. Причем демонстрируются результаты для нормального цветовосприятия и различных форм цветовой слепоты.
ColorZilla
Приложение ColorZilla для Firefox (есть также версия для Google Chrome) в помощь веб-мастерам и специалистам по графическому дизайну, работающим с цветом. Будет полезно как новичкам, так и продвинутым пользователям. Программа производит цветовой анализ любой точки и любой страницы в браузере, извлекает нужные цвета для использования в других приложениях. Определение цветовой палитры страницы, выбор цветов из предустановленного набора, сохранение в составе пользовательской палитры тех, что чаще всего употребляются,– таков набор ее возможностей.
Pictaculous
Pictaculous — еще один генератор цветовых палитр на базе готовых изображений. Нужно только загрузить на сайт выбранную картинку объемом не больше 500 КБ, и тут же начнется его цветовой анализ. Под результатом с цветовой гаммой изображения выводится еще десяток палитр, но уже созданных вручную, членами сообществ ресурсов Kuler и COLOURLovers. Их тоже вполне можно использовать в качестве цветового решения для разрабатываемого сайта. Доступна пересылка результата себе на почту, и шеринг в социальных сетях.
Если вы знаете еще какие-то генераторы цветовых палитр, делитесь ссылками в комментариях.
Один из самых важных факторов при создании уникального и узнаваемого дизайна - цвет. Грамотный выбор цветовой схемы может определить успех или провал сайта. Когда посетитель бросает первый взгляд на веб-страницу, то выбранные вами цвета посылают ему мгновенное сообщение об этой странице. К счастью, существует много инструментов, которые помогут выбрать правильную цветовую схему. Вот пять лучших из них.
1. Kuler
Kuler от компании Adobe давно признан лучшим помощником профессионального веб-дизайнера. В отличие от конкурентов, здесь есть обширное коммьюнити и можно делиться созданными палитрами или брать чужие цветовые схемы и модифицировать под свои нужды. Для общения в сообществе нужно зарегистрироваться и получить Adobe ID. Цвета в Kuler представляются в различных форматах, включая RGB, CMYK, LAB и HSV.
Вдохновение может возникнуть под влиянием самого неожиданного повода. Например, вы можете наткнуться на красивую фотографию с привлекательной цветовой гаммой. Этот генератор цветовой палитры создан как раз для обработки таких фотографий. Загружаете файлы в форматах JPG или PNG - и получаете подробную раскладку по ключевым цветам. Независимо от того, какую реакцию вы пытаетесь вызвать у ваших посетителей, генератор цветовой палитры поможет создать уникальный внешний вид для любого веб-сайта.
Отдельные цвета никогда не висят в вакууме, и каждый оттенок воздействует на окружающие. Инструмент Contrast-A применяет сугубо технический подход к конфигурации палитры, предоставляя подробную информацию о соотношение канала яркости (Luminance Ratio) и отличиях в яркости и цвете. Это идеальный инструмент, если нужно создать минималистский сайт с небольшим количеством цветов, которые дополняют друг друга.
Этот популярный плагин для Firefox позволяет прямо в браузере определить значения отдельных цветов и измерить разницу между ними. Есть «браузер цветовых схем» для выбора отдельных цветов из заранее подобранных наборов. Простой в использовании и чрезвычайно многофункциональный, плагин ColorZilla - словно швейцарский армейский нож среди расширений браузера для веб-дизайнеров и художников.
В отличие от большинства других генераторов цветовых схем типа «цветового колеса», Colorotate показывает палитру на трёхмерном конусе. Как и Kuler, пользователи могут сохранять и редактировать свои цветовые схемы, а также просматривать палитры, сделанные другими дизайнерами. Инструмент интегрирован с популярными дизайнерскими программами Adobe Fireworks и Photoshop.
Когда речь идёт об эффективном веб-дизайне, то говорят об интуитивном пользовательском интерфейсе и макетах, однако цветовые схемы имеют такое же большое значение, а то и бóльшее. Перечисленные здесь инструменты должны направить вас в верном направлении, чтобы выбрать отличную цветовую палитру для сайта с первой попытки. В интернете можно найти и другие полезные инструменты, но именно с этих вы можете начать подбор идеального арсенала, который соответствует вашему персональному стилю. Удачи и счастливого дизайна!
Лайф выбрал, а дизайнеры протестировали четыре мобильных приложения, которые должны помочь подобрать цвета для любого интерьера.
Для большинства дизайн интерьера начинается с подбора цвета. Определиться с основным оттенком нетрудно, а вот подобрать к нему вспомогательные цвета - уже сложнее. Что делать, если вы не обладаете профессиональными знаниями колористики? Разработчики ответили на этот вопрос, представив приложения для генерации цветовых палеток.
Что делает : Генератор цветовых палеток от лакокрасочного бренда Sherwin-Williams.
На чём работает : iOS и Android
Сколько стоит : бесплатно
Марьяна Багаутдинова, руководитель направления "Кухни GeD cucine", дизайнер :
"Могу с первого предложения заявить, что ColorSnap - достаточно интересное приложение. Основная идея заключается в том, что любой пользователь имеет возможность создавать свою базу сочетания цветов, используя для этого несколько вариантов: предложенные картинки из блока inspiration, ваше собственное фото, создание палетки из предоставленных цветовых раскладок.
Первое, что предлагает приложение, - это цифровые цветовые таблицы: "цветовые семьи" (например: красные, жёлтые, синие, натуральные), исторические цвета, цветовая таблица от американской компании, производящей лакокрасочные покрытия Sherwin-Williams. Что интересно, если кликнуть на тот или иной вариант, то появляется палетка с используемыми на картинке цветами и номерами, коллекциями и названиями красок от компании Sherwin-Williams. Для дизайнеров, а также для простых людей это возможность не изобретать ничего нового, а воспользоваться уже разработанными решениями. Можно попробовать покрасить стены на предложенных базовых вариантах интерьеров, которых представлено достаточно, - это и кухни, и гостиные, и спальни, и детские.
Раздел Paint a Scene, по моему мнению, больше для развлечения. Набор инструментов позволяет в вольном порядке импровизировать с деталями, цветами и способом нанесения цвета. Очень похоже на Paint. Если вы не обладатель специальных электронных гаджетов для рисования, то для того, чтобы провести изящную линию пальцем, надо изрядно постараться. Если вы профессионально занимаетесь декорированием интерьеров или же самостоятельно создаёте и оформляете своё пространство, то с помощью ColorSnap вы можете найти хорошие решения, где бы вы ни были, а впоследствии применить их на практике. Мой ответ: попробуйте!"
ColorFit
Что делает : Помогает подобрать подходящие цвета для любого предмета - нужно только навести камеру на объект и выбрать понравившиеся цветовые сочетания к нему. В качестве бонуса приложение помогает подобрать цвета в одежде.
На чём работает : iOS
Сколько стоит : 75 рублей
Александра Осьминина, эксперт:
По задумке разработчика, приложение должно предлагать колористические решения к сделанной фотографии, но цвета, с которыми работает программа, коих, к слову, немного, очень примитивны и совсем не соответствуют задаче. Интерфейс неудобен, отсутствует функция сохранения предложенных цветовых схем.
До функции инструмента для подбора цвета недотягивает, а для развлечения слишком скучно".
Color Capture by Benjamin Moore
Что делает : Приложение подбирает красивое сочетание оттенков среди красок от компании Benjamin Moore. Отличает от прочих возможность купить понравившиеся оттенки, так как компания представлена в России.
На чём работает : iOS и Android
Сколько стоит : бесплатно
Елена Плато, дизайнер интерьера, архитектор :
"Симпатичное приложение, лёгкое и интуитивное в использовании. Моментально вдохновляет. Профессиональные палитры и всё, что нужно, чтобы просто и быстро создать красивую цветовую гамму. Однозначно буду использовать".
Real Colors
Что делает : Приложение - генератор цветовых палеток. Чтобы создать идеальную, нужно выбрать (или сделать) вдохновляющую фотографию - на её основе подбирается несколько подходящих друг к другу оттенков.
На чём работает : iOS и Android
Сколько стоит : демоверсия - бесплатно/280$
Ольга Осьминина, руководитель дизайн-студии:
"Приложение Real Colors меня не впечатлило. Я не увидела ничего нового. Сразу надо уточнить, что я протестировала только демоверсию. Но за $280 покупать версию профи желание не возникло. Я уверена, что профессионал должен пользоваться своим хорошо отлаженным инструментом - глазами - и изучать колористику как науку, а обычный человек - опираться на свои личные ощущения цвета".
Любой веб-дизайнер понимает насколько важен . При помощи цвета расставляются акценты - подчеркиваются важные детали и скрадываются вспомогательные. При помощи цвета создается настроение. Цвет - первое, что видит посетитель сайта, еще до того как прочитает хоть одну букву или осознает, что изображено на той или иной фотографии. Цветовая палитра Вашего сайта может задержать посетителя, а может отпугнуть его.
Выбор правильной цветовой палитры - первый шаг на пути построения идеального и безупречного сайта. Цвет каждого элемента страницы должен гармонировать не только с визуально связанными элементами, но и с общей цветовой схемой страницы и сайта в целом.
Для того, чтобы не ошибиться в начале пути мы подготовили небольшой обзор генераторов цветовых схем , позволяющих выбрать правильное количество и сочетание основных цветов, которые Вы будете использовать при разработке сайта. Одни из них достаточно просты и имеют стандартную функциональность, другие обладают рядом уникальных функций. Но все они, несомненно, окажут неоценимую помощь в разработке уникального дизайна сайта.
Adobe Color CC
Adobe Color CC - своеобразный стандарт подобных приложений, которое позволяет создавать различные цветовые схемы используя для этого цветовой круг . В помощь дизайнеру будет и прямой доступ к сообществу Adobe Kuler , где можно подобрать тысячи всевозможных цветовых решений.
Paletton
Один из старейших (работает с 2002 года) в нашем обзоре инструментов для создания цветовых комбинаций и цветовых решений .
Stylify me
Исследует указанный в строке поиска сайт и предоставляет отчет об используемых в нем цветовых комбинациях , шрифтах, размерах изображений и т.п. Это позволит дизайнеру построить собственные решения, взяв за основу понравившийся сайт.
Coolors
Позволяет сгенерировать базовую цветовую комбинацию , а затем выполнить тонкую настройку полученной палитры по своему вкусу и сохранить ее в различных форматах - SVG, PDF или SCSS.
Выбор цветовой схемы для сайта является одним из важных моментов в процессе дизайна. Подбор сочетания цветов - достаточно сложный и творческий процесс. К счастью, существует достаточно много сервисов, которые могут оказать существенную поддержку для правильного выбора.
Некоторые ресурсы, упомянутые в данном обзоре, предоставляют возможность выбора из большого количества уже готовых цветовых схем, а другие позволяют в интерактивном режиме построить собственную схему.
Kuler
Adobe Kuler содержит большую библиотеку готовых цветовых схем. Вы можете просмотреть схему онлайн и загрузить ее для использования в продуктах серии Adobe Creative Suite.
Colour Lovers в текущий момент имеет почти 2 миллиона созданных пользователями цветовых схем. Вы можете просматривать их, сортируя по дате, рейтингу, количеству просмотров.
ColoRotate имеет библиотеку готовых цветовых схем. Также вы можете создать свою собственную схему с помощью уникального 3D инструмента. Цветовую схему можно использовать напрямую в Photoshop и Fireworks с помощью плагина ColoRotate .
Color Scheme Designer позволяет выбрать тип цветовой схемы (моно, комплиментарную, триада, тетрада, аналоговая). Затем можно будет настроить цвета и посмотреть действие схемы на примере.
ColorSchemer располагает большой библиотекой созданной пользователями цветовых схем. Вы можете сортировать их по дате размещения, рейтингу или количеству загрузок.
Pictaculous - простой онлайновый инструмент для генерации цветовой схемы. Вы можете загрузить изображение, а сервис сгенерирует схему для использования с картинкой.
Color Spire
Color Spire очень простой в использовании сервис. Вы выбираете базовый цвет, а он предлагает цветовую схему. Также можно посмотреть внешний вид схемы на простом шаблоне.
