использование градиентов для смешения цветов
Применение цвета при разработке логотипа — задача гораздо более сложная, чем просто выбор «моего любимого цвета». Цвета, и что более важно, цветовые комбинации могут влиять на дизайн логотипа и не только на техническом уровне. К примеру, эмоциональные реакции на определенные цвета могут находиться в диапазоне между любовью и яростью (красный), теплом и холодом (синий) и т.д. в зависимости от контекста, — все эти реакции были описаны в научных исследованиях. Некоторые цвета способны вызывать у людей чувство реального голода.
К примеру, для компании, ведущей бизнес направленный на сохранение окружающей среды, может показаться естественным использовать зеленый цвет, и, на первый взгляд, это логично. Но что, если их деятельность включает усилия как на суше, так и на море? Тогда право на существование также получает синий цвет, и, кроме того, и весь цветового спектра между ними. Что приводит нас к цветовым переходам – градиентам.
Дизайн логотипа с плавным градиентом от светло-зеленого до синего.
Градиентная заливка или заливка с плавным переходом цветов – это, по сути, постепенное переход между двумя цветами, создающий эффект от светлого к темному, интенсивность которого зависит от базовых цветов. Самый простой пример – от черного к белому. Черный – 100%, а белый 0%, поэтому потенциально мы имеем 100 «ступенек» между ними. Кажется, все достаточно просто, не так ли? Но не будем спешить.
Дизайнерский макет можно воспроизвести достаточно большим количеством способов. Тип носителя, на который наносится дизайн, размеры, будет ли это шелкография, офсетная печать или цифровая публикация… все факторы должны быть приняты во внимание. Логотип хорошо выглядит на визитной карточке, но он будет ли он работать на рекламном щите? Будет ли он работать в стандартном газетном модуле и при этом адекватно воспроизводиться на экране телевизора?
И не менее важный момент – градиент может хорошо выглядеть на экране компьютера, но насколько хорошо он будет воспроизведен на печати?
БандингКогда речь идет о какой-либо традиционной печати, «ступеньки» от 0 до 100%, в лучшем случае, будут относительным понятием.
На деле от 0 до 100 у нас будет только шагов 20. Это цветовой переход с шагом 5%, и это при сильно специализированной печати. Чаще всего, при увеличении градиента неизбежно происходит бандинг («полосатость»). И наоборот, когда градиент уменьшается, он часто становятся размытым или мутным.
Бандинг может быть намеренно включен в дизайн, и обычно это реализуется так, чтобы в цветовом переходе использовались смесевые цвета. Например, красная полоса, оранжевая полоса, золотая полоса; или максимум десять шагов по 10% каждый, где значение каждого шага фактически является частью дизайна. Стандартом в определении цвета для печати является система цветов Pantone Color Matching System, и каждый из десяти шагов на самом деле соответствует определенному номеру цвета Pantone, что делает каждый шаг самостоятельным цветом, который может быть точно воспроизведен.
Проблема с бандингом, и градиентной заливкой вообще, в том, что их очень трудно воспроизвести в определенных форматах. При неправильном применении градиенты могут в итоге испортить привлекательный в остальном дизайн логотипа.
Сложности, связанные с использованием цвета и градиентов являются лишь одним примером того, почему для создания уникального и узнаваемого фирменного стиля для бизнеса, который также будет совместим с самым широким спектром производственных стандартов так важно работать с группой профессиональных дизайнеров.
Как гарантировать, что ваши цвета и градиенты будут выглядеть хорошоЧтобы принять все эти факторы во внимание и заставить их гармонично работать при разработке логотипа необходим профессиональный графический дизайнер. Его обязанности – это не обязательно выбор базовых цветов, (в конце концов, клиент может иметь свое видение, которое всегда должно учитываться), но их эффективное включения в дизайн, который будет работать в любом требуемом формате, при этом передавая видение клиента и успешно воплощая идентичность бренда.
Добро пожаловать в
PANTONE
Подпишитесь, чтобы еженедельно получать эксклюзивные новости о цвете и специальные предложения Pantone.
Я разрешаю ООО «Синтез Восток», официальному дистрибьютору Pantone в России, связываться со мной по следующему адресу электронной почты:
Ваш e-mail *
Отправляя эту форму, я подтверждаю, что ознакомился и согласен с Условиями использования и Политикой конфиденциальности Pantone.
12 лучших инструментов, чтобы поиграть с цветом | by Olga Zholudova | Цвет
Источник: Muzli design inspiration
Над переводом работали: Nancy Pong и Ринат Шайхутдинов. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook | Instagram, Telegram
Новое. Журнал для digital-дизайнеров. Посмотреть, что за зверь.
Подбор цветов для дизайна на основе данных (data driven design).
Игра на сопоставление цветов.
Тщательно отобранная коллекция прекрасных цветов, которая обновляется ежедневно.
Градиенты, автоматически сгенерированные компьютером. По 48 штук в день.
Официальные коды цветов крупнейших в мире брендов.
Генерируйте бесконечное количество цветовых палитр для ваших дизайнов, а потом делитесь ими, экспортируйте или сохраняйте в своем профиле.
Color hex — это простой в использовании инструмент, который позволяет получить информацию о кодах цвета, включая цветовые модели (RGB, HSL, HSV и CMYK), css и html коды цветов.
Генератор цветовых палитр для материального дизайна (material design)
Сolourco.de — это онлайн инструмент для дизайнеров, который позволяет просто и интуитивно комбинировать цвета.
Создавайте цветовые схемы при помощи цветового круга или просматривайте тысячи комбинаций цветов в сообществе, посвященном цвету.
Лучший способ собирать и организовывать цвета и делиться ими с друзьями.
COLOURlovers — это творческое сообщество, в котором люди со всего мира создают цвета, палитры и паттерны, делятся ими с другими участниками, обсуждают последние тренды и изучают красочные статьи… и все это в атмосфере любви.
Присоединяйтесь к 50,000 читателей, которые уже наслаждаются использованием Muzli в Chrome. Muzli — это золотая жила вдохновляющего, красивого и свежего контента, который удивительным образом появляется перед вами, стоит только открыть новую вкладку браузера.
Вдохновляйтесь
Если вам понравилась статья и перевод, дайте нам знать — нажмите кнопку Recommend
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.
Подкидывает идеи как привлечь, удержать и направить внимание пользователя
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Скачать приложение в Appstore →
https://itunes.apple.com/ru/app/mental-notes/id993592407?l=ru&ls=1&mt=8Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
Посмотреть каталог курсов →
breezzly.ruУзнайте о цветовых градиентах
Откройте для себя различные типы градиентов, доступных в Illustrator, и применяйте как линейные, так и радиальные градиенты к изображениям.
Чему вы научились: создавать, применять и редактировать как линейные, так и радиальные градиенты к иллюстрации
Что такое градиент?
Градиент — это градуированная смесь двух или более цветов или оттенков одного цвета.
Применить линейный градиент по умолчанию
Вы можете применить градиент к обводке или заливке выбранного изображения. Вот как:
1. Выберите иллюстрацию, к которой вы хотите применить градиент.
2. На панели «Свойства» нажмите «Цвет заливки» или «Цвет обводки» в зависимости от того, к какой части изображения вы хотите применить градиент. Выбрав параметр «Образцы» на появившейся панели, вы увидите несколько образцов градиента по умолчанию. Нажмите, чтобы применить белый, черный градиент по умолчанию.
Примечание: Если вы не видите образец белого и черного градиента по умолчанию, вы можете найти его, выбрав «Окно» > «Библиотеки образцов» > «Образцы по умолчанию» > «Печать». На появившейся панели щелкните, чтобы применить градиент.
Совет: В Illustrator есть набор градиентов по умолчанию, которые вы можете попробовать. Выбрав «Окно» > «Библиотеки образцов» > «Градиенты», вы найдете несколько библиотек градиентов на выбор.
Редактирование цветов в градиенте
После применения градиента вы можете отредактировать градиент в графическом объекте.
- При открытой панели «Образцы» нажмите «Параметры градиента», чтобы открыть панель «Градиент».
На панели «Градиент» можно настроить тип градиента, угол градиента, цвета градиента и многое другое. Градиент отображается в виде ползунка градиента в нижней части панели с кругами под ним, называемыми точками цвета, которые представляют цвета в градиенте.
Чтобы настроить цвета в градиенте:
- Дважды щелкните любой из цветовых маркеров (кругов) под ползунком градиента, чтобы отобразить различные параметры цвета и изменить цвет.
- Чтобы добавить цвет к градиенту, переместите указатель чуть ниже ползунка градиента и щелкните, когда рядом с указателем появится плюс (+). Перетащите любой из цветовых маркеров, чтобы настроить переход градиента.
- Чтобы удалить цветовую точку, щелкните ее и либо перетащите в сторону от ползунка градиента и отпустите, либо щелкните значок корзины справа от ползунка градиента.
Изменение градиента в графическом объекте
Помимо настройки параметров на панели «Градиент», вы также можете настроить направление и длину градиента в графическом объекте.
- Выберите инструмент «Градиент» на панели инструментов. В выбранном изображении вы увидите аннотатор градиента, который показывает ползунок градиента и точки цвета. Дважды щелкните точку цвета на иллюстрации, чтобы отредактировать цвет, перетащите точки цвета, щелкните под ползунком градиента, чтобы добавить новые точки цвета, и т. д.
- Чтобы изменить направление и длину градиента, нажмите и перетащите в нужном направлении по рисунку. Угол перетаскивания определяет направление градиента, а расстояние перетаскивания определяет длину.
Совет:
Сохраните градиент как образец, чтобы вы могли применить его позже
- Выделив фигуру, щелкните цвет заливки на панели «Свойства» и, когда отображаются образцы, нажмите кнопку «Новый образец», чтобы назвать градиент и сохраните его, чтобы вы могли применить его снова в другом месте.
Изменение типа градиента на радиальный градиент
Вы можете изменить тип градиента для любого применяемого вами градиента.
- Примените градиент к заливке другой фигуры, используя цвет заливки на панели свойств.
- Чтобы изменить тип на радиальный, нажмите кнопку «Радиальный градиент» в верхней части панели «Градиент» или в разделе «Градиент» на панели «Свойства».
- Используя инструмент «Градиент», вы можете рисовать, чтобы настроить градиент в графическом объекте.
Режим градиентного цвета
Режим градиентного цветаЦветовой режим градиента доступен для столбцов в непрерывном масштабный режим. В этом режиме элементы будут отображать цветовой градиент между две или более опорных точек, как показано в примере ниже.
В примере точечная диаграмма окрашена столбцом
Продажи — столбец, содержащий целочисленные значения. Цветовая схема имеет
три точки привязки: Мин.
, Средняя и Макс. Цвета в этих точках
настроены на красный, белый и синий соответственно, что означает, что цвет
градиент смещается от красного к белому и синему. Пример ниже показывает
Страница «Цвета» свойств визуализации для цветового режима «Градиент».
Изменение цвета опорных точек
Чтобы изменить цвет точки привязки, щелкните цвет поле слева от точки. Появится селектор цвета, и вы можете выберите другой цвет. Расцветка будет обновлена сразу в визуализация.
Добавление точек привязки к цветовой схеме
Чтобы добавить точку, на которую вы хотите переключить градиент
другого цвета, вы можете либо нажать кнопку «Добавить точку», либо дважды щелкнуть
в области цветовой схемы. Чтобы указать точное размещение добавленного
точку, выберите один из параметров в меню рядом с точкой привязки.
В приведенном ниже примере показаны доступные параметры в меню. Смотрите подробности
в меню «Точка/значение» для описания всех опций в этом меню.
Большинство опций в меню добавят точку привязки это относительно текущей цветовой шкалы. Например, если вы выберете Среднее, положение точки привязки будет скорректировано автоматически когда вы фильтруете данные, чтобы они оставались средними для нового диапазона ценностей.
Если вы выберете значение, вы можете ввести абсолютное значение для опорная точка в поле. Имейте в виду, что это означает, что значение может оказаться за пределами диапазона значений, если вы отфильтруете данные или выберете другой столбец для раскрашивания. Когда вы выбрали значение из меню, Вы также можете отрегулировать положение точки, перетащив ее по вертикали.
Выберите последний пункт меню, чтобы открыть
Диалоговое окно выражения, где вы можете определить пользовательское выражение для установки
точка привязки. См. пользовательский
Выражения для раскраски, чтобы узнать больше об этом. Чтобы получить базовое
понимание пользовательских выражений, см.
Custom
Выражения Введение.
Добавление правил в цветовую схему
Вы также можете добавить правила в цветовую схему в градиенте режим. Правило действует как исключение для остальной части цветовой схемы. Чтобы добавить правило, нажмите кнопку «Добавить правило…» справа от цвета. площадь схемы. Это откроет диалог где вы можете определить правило. Правило будет добавлено вверху цветовая схема, как показано в примере ниже, где правило гласит, что все значения ниже 15 должны быть желтыми.
Если цветовая схема включает более одного правила, правила имеют приоритет сверху вниз. Вы можете изменить порядок правил с помощью перетаскивания. Чтобы узнать больше о правилах в цветовых схемах, см. Обзор цветовых правил.
Удаление точек и правил
Чтобы удалить точку, выберите ее в цветовой схеме и нажмите кнопку Удалить точку. Вы также можете щелкнуть правой кнопкой мыши точку и выбрать Удалить точку из меню.
Чтобы удалить правило, нажмите x справа от правила,
или щелкните правило правой кнопкой мыши и выберите в меню Удалить правило.