Адоб цветовой круг: Learn how to import color themes to Adobe Express

Цветовой круг в Adobe Illustrator SC3. Или… нас всех считают за идиотов со времен И. Иттена?

?

Предыдущие мыслишки | Следующие мыслишки

Помню, когда несколько лет тому назад вышел релиз новой версии Adobe Illustrator SC3, все отклики в сети в один голос отметили долгожданное появление в ней функции Color Live, позволяющей легко и быстро гармонизировать выбранные цветовые отношения в своих проектах.
(Для тех, кто не знаком с этой функцией, инструментальная палитра Color Live может быть вызвана щелчком по кружочку в базовой палитре Color Guide)
Наконец-то! Общий возглас радости пронесся по Интернету.
И действительно, то, что достаточно давно было представлено либо отдельными мини-приложениями (как правило, работающими только в Он-лайн режиме), либо входило в качестве инструментальной палитры в других графических редакторах, обрело адрес постоянного места жительства и в таком очень серьезном программном продукте, как Adobe Illustrator.

Казалось бы, разработчикам этого программного продукта удалось наконец-то примирить цифровыми кодами две совершенно диаметрально противоположные модели цветовых кругов. Цветовой круг RGB и цветовой круг RYB.
Но…
При проверке алгоритма цветового круга RYB, представленного в функции Color Live, обнаружились странные вещи.
Возьмем для примера классику, то, что почти каждому известно едва ли не со школьной скамьи. Гармония цветовых отношений на основе фигуры цветовой гармонии под названием «Триада», представляющую собой равносторонний треугольник.
Для справки.
Одна из вершин этого треугольника должна указывать на базовый ЧИСТЫЙ КРАСНЫЙ, другая вершина на ЧИСТЫЙ ЖЕЛТЫЙ, и третья на ЧИСТЫЙ СИНИЙ. При вращении этого равностороннего треугольника вокруг центра круга его вершины каждый будут указывать на гармоничную троицу цветов, представленных в полном цветовом круге RYB. Казалось бы, здесь никакого нет подвоха.
Известно, что:
чистый КРАСНЫЙ кодируется (по шкале RGB) как 255 – 0 – 0
чистый ЖЕЛТЫЙ кодируется по шкале RGB) как 255 – 255 – 0
чистый СИНИЙ кодируется по шкале RGB) как 0 – 0 – 255
Т. е. самая главная фигура цветовой гармонии РАВНОСТОРОННИЙ ТРЕУГОЛЬНИК должна быть выдержана в соответствии с этими базовыми для понятия цветовой гармонии условиями.
Вы пробовали проверить соблюдение этого требования в Adobe Illustrator? Нет? Как вы доверчивы…
Я попробовал… и не только в этом графическом редакторе, но и везде, где представляется такая возможность.
…
Мир удивителен, господа художники, дизайнеры и архитекторы!
Разночтения просто поразительны…

На этой картинке представлен скриншот части программного интерфейса Adobe Illustrator. Как бы вы не пытались установить вышеуказанные значения для красного, желтого и синего в их четкой взаимосвязи, ничего не получается.

В лучшем случае удается установить для:
КРАСНОГО 255 – 0 – 0
ЖЕЛТОГО 255 – 255 – 0
а вот для
СИНЕГО только 0 — 63,75 – 255

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

Налицо парадокс, ошибка программистов, или… нас всех считают за идиотов со времен И. Иттена?

book_black

Черная Книга Цвета (Все о Цвете)

КОЛОР●ТОН2D

Ноябрь 2011
Вс	Пн	Вт	Ср	Чт	Пт	Сб
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

• КОМПОЗИЦИОННЫЙ ГЕНЕРАТОР
• Случайность или закономерность.
• ИСКУССТВО ИНТЕРЬЕРА

• stroke_edge : (без заголовка) [+6]
• perko_kaluga : (без заголовка) [+46]

Разработано LiveJournal. com

Восемь правил о цветовых палитрах, которые должен знать каждый

Взаимодействие человека и компьютера в значительной степени основано на графических элементах пользовательского интерфейса, и цвет играет в этом важную роль. Как однажды сказал художник Пьер Боннар:

Цвет не добавляет приятного качества в дизайн – он его усиливает.

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

1. Ограничьте количество цветов

Применение цвета к дизайн проекту имеет много общего с балансом. Чем больше цветов вы используете, тем труднее достичь этого баланса. Вы добьетесь лучших результатов, если будете придерживаться максимум трех основных цветов в вашей цветовой гамме. Согласно исследованию Университета Торонто о том, как люди использовали Adobe Color CC, большинство людей заявили, что предпочитают простые цветовые комбинации, которые опираются только на два или три цвета.

Если вам нужны дополнительные цвета, кроме тех, которые вы задали в своей палитре, используйте оттенки и тона.

Как создать цветовую схему

Итак, как вы выберете два или три цвета? Цветовой круг может помочь.

Круг с 12 цветами является важным инструментом для создания цветовых схем

Существует ряд предопределенных стандартов цветовой схемы, которые упрощают создание новых схем, особенно для новичков:

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

Монохроматическая схема очень приятна на вид (особенно синий или зеленый оттенки). Как вы можете видеть на примере Facebook, схема выглядит чистой и элегантной.

• Аналоговая. Аналоговые цветовые схемы создаются из смежных цветов.
  Один цвет используется как доминирующий, в то время как другие используются для обогащения схемы. Хотя это относительно легко, трюк заключается в том, чтобы решить резонанс используемых цветов, поскольку вся схема будет преувеличена им. Например, Clear – приложение для составления и организации списков дел, использует яркие аналоговые цвета для визуального определения приоритетов вашего текущего набора задач. В то время как, приложение для медитации Calm, использует синие и зеленые аналоговые цвета, чтобы помочь пользователям чувствовать себя спокойными и умиротворенными.

Аналоговые схемы создаются с использованием трех цветов, расположенных рядом друг с другом на 12-цветном круге. Clear – приложение для составления и организации списков дел, использует яркие аналоговые цвета для визуального определения приоритетов вашего текущего набора задач.

Calm использует аналоговые цвета, чтобы создать общее настроение.

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

Использование дополнительных цветов – простейший способ выделить что-то.

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

Добавление одного цвета в дизайн в оттенках серого просто и эффективно привлекает внимание. Макет с сочетанием белого и серого с синими акцентами в цветовой схеме Dropbox.

2. Вдохновляйтесь природой

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

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

3. Пытайтесь следовать правилу 60–30–10

Это вечное правило декорирования, которое может помочь вам легко составить цветовую схему. Пропорции 60% + 30% + 10% предназначены для обеспечения баланса цветов, используемых в любом пространстве.

Эта концепция невероятно проста в использовании: 60% – ваш доминирующий оттенок, 30% – вторичный цвет, а 10% – цвет акцента. Идея состоит в том, что вторичный цвет поддерживает основной цвет, но они достаточно отличаются, чтобы разделять их. Ваши 10% – цвет акцента. Это может быть цвет для призыва к действию или другого элемента, который вы хотите выделить.

60% – ваш доминирующий оттенок, 30% – вторичный цвет и 10% – цвет для акцента. Этот метод позволяет глазу удобно перемещаться из одной фокусной точки в другую.

4. Сначала дизайн в оттенках серого

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

Добавьте цвет в самом конце, и даже тогда, только с определенной целью.

Добавление одного цвета в макет с оттенками серого привлекает взгляд просто и эффективно.

5. Избегайте использования черного цвета

В реальной жизни чистый черный почти никогда не встречается. Все “черные” объекты вокруг нас имеют некоторое количество света, отражающегося от них, а это значит, что они не совсем черные, они темно-серые. Дороги не черные. Тени не черные.

Цвет этой собаки темно-серый, а не черный.

Когда вы помещаете чистый черный цвет рядом с набором тщательно подобранных цветов, черный все пересилит. Он выделяется, потому что это не естественно. В большинстве приложений, которые мы ежедневно используем, есть черные цвета, которые на самом деле не черные, но темные серые. Например, самый темный цвет на верхней панели Asos не # 000000, это # 242424. Поэтому не забудьте всегда добавить немного насыщенности в свой цвет.

Самый темный цвет у ASOS – не черный

6. Подчеркните важность, используя цветовой контраст

Цвет – инструмент, который может помочь направить взгляд. Чем больше вы хотите что-то выделить, тем больше вы должны полагаться на контрастные цвета. Как правило, высокий контраст – лучший выбор для важного контента или ключевых элементов. Если вы хотите, чтобы пользователи увидели или щелкнули что-нибудь, сделайте это выделяющимся!

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

7. Используйте цвет для воздействия на эмоции пользователей

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

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

Красный, Оранжевый, Желтый

• Красный (Страстный, Мощный, Опасный, Важный): Красный – чрезвычайно стимулирующий цвет. Он создает впечатление скорости и силы. Он известен как цвет энергии. Он доказал физиологические эффекты увеличения циркуляции крови и повышения метаболизма. Вот почему, когда люди видят красный цвет, они читают усерднее и быстрее. Использование красного – это способ привлечь внимание пользователей или выделить отдельный элемент, который требует внимания.
• Оранжевый (игривый, энергичный, привлекательный, дешевый): Оранжевый – теплый и полный жизни цвет. Он обладает энергичной аурой и способен создать теплый прием для ваших пользователей. Некоторые исследователи считают, что оранжевый выражает дешевизну.
• Желтый (веселый, дружелюбный, стимулирующий, привлекающий внимание): Желтый – чрезвычайно универсальный цвет, в зависимости от выбранного оттенка. Светло-желтый ассоциируется с солнцем и, следовательно, передает позитивность и теплоту. Темные оттенки желтого (например, золото) создают впечатление древности и возраста. Эти более темные оттенки часто связаны с вечностью и мудростью.

Зеленый, синий, фиолетовый

• Зеленый (природный, безопасный, свежий): зеленый цвет отражает чувство окружающей среды и близость к природе. Он также означает рост, и именно поэтому он часто связан с бизнесом. Зеленый означает чувство правильного или неправильного.
• Синий (успокаивающий, ответственный, внушающий доверие, надежный): синий цвет часто ассоциируется со спокойными и расслабляющими эмоциями. Он также ассоциируется с силой и надежностью, с чувством доверия и профессионализма. Синий излучает чувство внутренней безопасности. Вот почему вы можете видеть банки и технологические компании, использующие этот цвет. Гиганты социальных сетей, такие как Facebook, Twitter и LinkedIn, используют синий цвет в своих сетях.
• Фиолетовый (Роскошный, Таинственный, Романтичный, Духовность): Исторически связанный с королевской семьей, фиолетовый намекает, что продукт высокого класса.

Розовый, Черный, Белый, Серый

• Розовый (женственный, невинность, молодость): розовый наиболее известен своими ассоциациями с женственностью.
• Черный (мощный, утонченный, загадочный, трендовый): черный привлекает внимание быстрее, чем другие цвета, в том числе красный. Вот почему он чаще всего используется только для текста и акцентов.
• Белый (чистота, здоровье, чистоплотность, невинность): белый делает акцент на других цветах вокруг него, что делает его популярным выбором в качестве вторичного цвета.
• Серый (нейтральный, формальный, изысканный, стерильный): серый цвет представляет собой нейтральность, он может принимать характеристики черного или белого цветов. При использовании его в качестве основного цвета создается впечатление формальности.

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

8. Сделайте свой дизайн доступным

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

Избегайте использования цвета в качестве индикатора

Примерно 8% мужчин и 0,5% женщин страдают от некоторой формы цветовой слепоты. Это 1 из 12 мужчин и 1 из 200 женщин. Хотя существует несколько форм этого заболевания, красно-зеленая цветовая слепота является наиболее распространенной. Человек, страдающий этой формой дальтонизма, обычно испытывает проблемы с различиями как красного, так и зеленого цветов.

Как видит цвета человек с нормальным зрением и те же цвета человек с красно-зеленой цветовой слепотой (дейтеронопия и протанопия).

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

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

Избегайте низкой контрастности текста

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

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

Проверьте контраст, чтобы цвета фона и переднего плана отображались с достаточным контрастом для человека, страдающего дальтонизмом или плохо видящего человека. Это, действительно, не так сложно – все, что вам нужно сделать, это проверить коэффициент контрастности. Коэффициент контрастности показывает, как отличается цвет от другого цвета (обычно это 1: 1 или 21: 1). Чем выше разница между двумя числами в соотношении, тем больше разница в относительной яркости между цветами. W3C рекомендует следующие коэффициенты контрастности для текста и текста на изображении:

• Маленький текст должен иметь коэффициент контрастности не менее 4,5: 1 по отношению к фону.
• Большой текст (при 14 pt жирный / 18 pt обычный) должен иметь коэффициент контрастности по крайней мере 3: 1 по отношению к фону.

Хорошие новости, вам не нужно проверять их вручную. Используя инструмент Color Contrast Checker, вы можете проверить свои цветовые комбинации всего за несколько кликов.

Программа проверки цветового контраста от Webaim

Бонус: Основные инструменты UX дизайнера

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

Adobe Color CC

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

Adobe Color CC – отличный инструмент, способный ускорить изучение различных вариантов цветовой схемы.

Dribbble поиск по цвету

Когда вы хотите совершить визуальные исследования по использованию определенного цвета другими дизайнерами, зайдите на dribbble.com/colors и выберите нужный цвет.

Вы также можете указать для снимка минимальный процент содержания цвета (например, 30% синего).

Укажите минимальный процент содержимого цвета

Material Design

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

Colorzilla

ColorZilla – это расширение для Google Chrome и Mozilla Firefox, которое включает в себя множество связанных с цветом инструментов, в том числе подборщик цветов, пипетку, генератор градиента CSS и браузер палитры.

Coolors.co

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

Один из моих любимых способов создания цветовой схемы – это использование фотографии. Этот инструмент позволяет загрузить изображение и сделать из него цветовую палитру.

Coolors дает вам возможность загрузить изображение и сделать из него цветовую палитру.

Симуляция цветовой слепоты в Adobe Photoshop

С помощью Photoshop вы можете проверить доступность вашего дизайна. Просто перейдите в View> Proof Setup, а затем вы можете выбрать один из двух типов цветовой слепоты (протанопия или дейтронопия).

NoCoffee Vision Simulator для Chrome

Во избежание проблем с доступностью в дизайне, при проектировании рекомендуется проверять дизайн на цветовую слепоту. NoCoffee Vision Simulator может использоваться для имитации проблем со зрением. Например, используя параметр “Color Deficiency” установив “Deuteranopia”, вы можете просматривать веб-страницы в оттенках серого. Это поможет вам сделать ваш дизайн доступным для пользователей с нарушениями зрения.

Цвет – один из самых мощных инструментов в наборе дизайнеров. Но в то же время — это сложный в освоении инструмент. Я надеюсь, что упомянутые выше правила создали хорошую основу для будущих дизайнеров. Теперь пришло время перейти к практике – потому что лучший способ стать отличным специалистом в цветовых схемах – это фактически создать их.

Цветовые схемы – ваша проблема? Записывайтесь на курсы от Springboard Введение в UX дизайн. Тысячи студентов прошли их, чтобы начать успешную карьеру в дизайне.

---

Перевод статьи Nick Babich

Теория цвета, цветовые круги, цветовые темы, палитры цветов и многое другое.

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

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

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

В этом посте.

• Основы теории цвета
• Цветовые колеса для графического дизайна
• Инструменты для вдохновения цветовой палитра
• Цветовые экстракторы
• цветовые палитра
• Цветовые контракты.

  Знаете ли вы, что это значит, если я скажу, что цветовая комбинация является монохромной, дополняющей или аналогичной? Знаете ли вы разницу между оттенком, насыщенностью и значением? Если ответ не звучит однозначно ДА, то я предлагаю вам потратить несколько минут на просмотр действительно солидного вступительного видео от GCF.

  Цветовые круги для графического дизайна

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

  Цветовой круг Adobe Color предлагает 5 вариантов цвета. В зависимости от выбранного вами правила цветовой гармонии, измените один цвет, и все цвета изменятся.

  Adobe Color — Color Wheel

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

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

  Страница цветового круга Canva также дает действительно хорошее изложение теории цвета.

  Цветовая палитра Инструменты для вдохновения

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

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

  Цветовые палитры Canva

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

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

  Цветовые палитры Canva Розочки и кремовые

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

  Canva Color Meanings

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

  Adobe Color Исследуйте

  В Adobe Color также представлены цветовые тренды, взятые из их собственной дизайнерской социальной сети (Behance) и Adobe Stock (библиотека стоковых фотографий Adobe). Эти тенденции классифицированы, а цветовые схемы показаны рядом с изображениями, которые вдохновили тему.

  Adobe Color Trends

  Экстракторы цветов

  Хотите создавать собственные цветовые палитры на основе фотографий или других изображений? Вы можете использовать экстрактор цвета.

  Экстрактор цветов Canva (генератор цветовой палитры) просто требует, чтобы вы загрузили изображение. Затем Canva выберет четыре цвета, взятые из этой картинки.

  Canva Color Palette Generator

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

  Тема Adobe Color Extract

  Палитра цветов

  Просто хотите выбрать отдельные цвета из изображений? Вы можете сделать это, используя всевозможные инструменты.

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

  У Adobe есть подобные пипетки в своих программах для дизайна. Например, вот инструмент «Пипетка» в Adobe XD.

  Даже в PowerPoint теперь есть пипетка. Вы найдете его, нажав маленькую кнопку раскрывающегося меню рядом с кнопками формы, контура или заливки текста.

  Еще один очень полезный инструмент — пипетка, который вы можете получить как расширение для браузера. Я часто использую расширение Chrome «ColorZilla», чтобы выбирать цвета с веб-страниц. Это дает мне шестнадцатеричный код, который я затем могу использовать в других дизайнерских приложениях.

  Расширение ColorZilla для Chrome

  Проверка цветового контраста

  Хотите знать, насколько доступны ваши цветовые палитры для разных людей? Один очень простой Contrast Checker можно найти на сайте WebAIM. Они также предоставляют много другой информации о том, как сделать ваши проекты доступными.

  WebAIM Contrast Checker

  Adobe Color также недавно добавила специальные инструменты на свой веб-сайт.

  Adobe Color Accessibility Tools Contrast Checker

  Персональные библиотеки цветов

  Устали копировать и вставлять шестнадцатеричные коды?

  Если у вас есть Canva Pro, вы можете сохранить несколько цветовых палитр как часть своего фирменного набора.

  Canva Brand Kit

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

  Adobe Color Creative Cloud Libraries

  Вы даже можете настроить собственные цветовые схемы в PowerPoint. Просто нажмите на вкладку «Дизайн», а затем на раскрывающийся список рядом с «Варианты».

  Как использовать Adobe Color для совершенствования вашего дизайна

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

  Creative Cloud от Adobe предлагает мощные инструменты для дизайнеров, художников, фотографов, веб-профессионалов и нас, создателей видео. На протяжении всего роста CC было интересно наблюдать за добавлением инструментов, которые можно использовать во всех приложениях пакета. Одним из самых полезных и мощных из этих инструментов является Adobe Color, веб-приложение, созданное специально для дизайнеров.

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

  Реклама

  
  

  Так что же такое Adobe Color?

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

  Начнем с того, что Adobe Color — это браузерное приложение с интерфейсом с большим цветовым кругом. Слева находится несколько вариантов, которые работают в сочетании с цветовым кругом. По сути, вы будете использовать колесо, чтобы выбрать базовый цвет для своей темы и применить один из вариантов для достижения темы. Список параметров называется «Правила цветовой гармонии», и они относятся к правилам цвета, которые существуют не только в Adobe Color. Выбор одного из этих правил вернет дополнительные цвета, которые работают с вашим основным цветом.

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

  Выбор темы

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

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

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

  Секретный соус Adobe Color — теория цвета

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

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

  Что модно, а что нет?

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

  Искусство и наука — это гораздо больше, чем теория цвета, но этого достаточно, чтобы мы начали понимать Adobe Color.

  Знакомство с Adobe Color

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

  Create

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

  Explore

  Explore — здесь вы сможете увидеть изображения со связанными темами и оригинальные темы, созданные другими художниками. Вы можете использовать эти темы как есть или отредактировать их в соответствии с вашим проектом. Вы также можете загружать темы или просто отметить что-то, что бросается в глаза, нажав «оценить».

  Trends

  Trends — это место, где вы увидите реальные изображения и графические примеры от дизайнеров, иллюстраторов и многих других, созданные на Behance и Adobe Stock. Вы также увидите цветовую тему, связанную с их невероятной работой.

  Моя библиотека

  Моя библиотека — это место, где будут храниться ваши собственные библиотеки цветовых тем и градиентов. Выбрав добавление цветовых тем в библиотеку, независимо от того, создали ли вы их или просто нашли в разделе «Исследование» или «Тенденции» Adobe Color, вы получите доступ к этим темам в Premiere и After Effects (наряду с другими приложениями Creative Cloud). Когда вы будете создавать графические элементы, у вас будет именно та палитра, которую вы хотите применить к своей работе.

  Почему дизайнеры используют Adobe Color? Почему ты должен?

  Дизайнеры используют в своей работе теорию цвета и такие инструменты, как Adobe Color, но зачем? Вкратце, цвета передают чувства, которые могут описывать бренд или делать логотип привлекательным.

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

  Что означает мой выбор цвета?

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

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

  И в этом вся прелесть Adobe Color: он подходит для всех. Сама его природа заключается в том, чтобы экономить время и украшать что угодно. Независимо от того, создаете ли вы видео из отпуска или запускаете канал на YouTube, Adobe Color упрощает создание цветовой темы. Даже при настройке нового канала YouTube лучше использовать цветовую палитру. Вы можете создать логотип и фон, которые работают вместе, или выбрать цветовую тему из чего-то вдохновляющего, что вы видели по пути.

  Кстати, вам не нужен компьютер, чтобы использовать Adobe Color. Он прекрасно работает на любом устройстве через браузер и может быть дополнен потрясающим приложением Adobe Capture.

  Заключение

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

  SIDEBAR – Руководство по правилам цветовой гармонии

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

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

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

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

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

  Double Split Complementary – Состоит из 2 пар дополнительных цветов, образующих «X» на цветовом круге.

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

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