инструменты и примеры — Дизайн на vc.ru
Пиксель-addicted руководитель направления дизайна ZephyrLab Дима Уколов сделал подборку о цветах и градиентах. Откуда они к нам такие пришли, удобные инструменты для работы и много вдохновляющих примеров.
3682 просмотров
С самого начала плоские приглушенные цвета вызывали неоднозначные эмоции. Просто, спокойно и современно, но всё время оставалось чувство недосказанности. Плоский стиль вообще пришёл в режиме «это временно, просто переходный период, потерпи».
Скфеморфизм и флэт
И действительно, этот тренд был объективной необходимостью перед обновлением стилистики, можно сказать, революции в сфере web-дизайна, которая происходила на фоне всё больших возможностей вёрстки и кодинга.
Кстати, градиент в эпоху «до флэта» использовался в основном в натуральных скевоморфичных текстурах, где он особо не бросался в глаза. Чистые градиентные переливы старались не использовать — считалось дурным тоном.
Pierre Borodin / Via Dribbble
Чистый градиент является мощным средством привлечения внимания, а удачные цветовые сочетания вытягивают стилистику сайта почти полностью. Объекты, иконки, символы и логотипы активно примеряют на себя различные сочетания.
Willie.H / Via DribbblePIN
Как быстро подобрать идеальное сочетание цветов для градиента?
Для поиска вдохновения и цветовых сочетаний можно воспользоваться сервисом webgradients.com — это более 200 вариаций и сочетаний.
отличный сервис для поиска идеальных сочетаний цветов webgradients.com
materialui.co — удобный сервис с готовыми наборами. Не нужно наугад тыкать указателем в 17 млн. цветов с надеждой попасть с первого раза. Открываете сайт, кликаете на нужный цвет и копируете данные.
materialui.co
От теории к практике
Светлые и белые фоны хорошо сочетаются в представлении товара или продукта, когда необходимо сохранить акцент на продукте и контрастном контенте и поддержать весь дизайн стилистически.
Важно отметить, что почти всегда пастельный цвет будет хорошо сочетаться с паттерном или абстрактными геометрическими формами, поддерживающими стилистику. Хорошо в таких сочетаниях работают акценты и резкие переходы для форм захвата и CTA.
Примеры с использованием ярких градиентов
Чистые яркие цвета и контрастные сочетания пришли, наверное, из документации Гугл по материал-дизайну. Всё больше применяют дизайнеры подобные сочетания — зачастую проект только выигрывает от этого.
В наших проектах мы ещё в 2016 году начали использовать градиенты и яркие акцентные цвета и сочетания.
Старайтесь пробовать, экспериментировать и обсуждать совместно решения и вы увидите как качественно будет меняться ваш уровень.
Спасибо 😉
P.S. если у вас есть классные примеры использования градиентов, то делитесь в комментариях✌
использование градиентов для смешения цветов
Применение цвета при разработке логотипа — задача гораздо более сложная, чем просто выбор «моего любимого цвета».
Цвета, и что более важно, цветовые комбинации могут влиять на дизайн логотипа и не только на техническом уровне. К примеру, эмоциональные реакции на определенные цвета могут находиться в диапазоне между любовью и яростью (красный), теплом и холодом (синий) и т.д. в зависимости от контекста, — все эти реакции были описаны в научных исследованиях. Некоторые цвета способны вызывать у людей чувство реального голода.
К примеру, для компании, ведущей бизнес направленный на сохранение окружающей среды, может показаться естественным использовать зеленый цвет, и, на первый взгляд, это логично. Но что, если их деятельность включает усилия как на суше, так и на море? Тогда право на существование также получает синий цвет, и, кроме того, и весь цветового спектра между ними. Что приводит нас к цветовым переходам – градиентам.
Дизайн логотипа с плавным градиентом от светло-зеленого до синего.
Что такое градиентная заливка?Градиентная заливка или заливка с плавным переходом цветов – это, по сути, постепенное переход между двумя цветами, создающий эффект от светлого к темному, интенсивность которого зависит от базовых цветов.
Самый простой пример – от черного к белому. Черный – 100%, а белый 0%, поэтому потенциально мы имеем 100 «ступенек» между ними. Кажется, все достаточно просто, не так ли? Но не будем спешить.
Дизайнерский макет можно воспроизвести достаточно большим количеством способов. Тип носителя, на который наносится дизайн, размеры, будет ли это шелкография, офсетная печать или цифровая публикация… все факторы должны быть приняты во внимание. Логотип хорошо выглядит на визитной карточке, но он будет ли он работать на рекламном щите? Будет ли он работать в стандартном газетном модуле и при этом адекватно воспроизводиться на экране телевизора?
И не менее важный момент – градиент может хорошо выглядеть на экране компьютера, но насколько хорошо он будет воспроизведен на печати?
БандингКогда речь идет о какой-либо традиционной печати, «ступеньки» от 0 до 100%, в лучшем случае, будут относительным понятием. На деле от 0 до 100 у нас будет только шагов 20. Это цветовой переход с шагом 5%, и это при сильно специализированной печати.
Чаще всего, при увеличении градиента неизбежно происходит бандинг («полосатость»). И наоборот, когда градиент уменьшается, он часто становятся размытым или мутным.
Бандинг может быть намеренно включен в дизайн, и обычно это реализуется так, чтобы в цветовом переходе использовались смесевые цвета. Например, красная полоса, оранжевая полоса, золотая полоса; или максимум десять шагов по 10% каждый, где значение каждого шага фактически является частью дизайна. Стандартом в определении цвета для печати является система цветов Pantone Color Matching System, и каждый из десяти шагов на самом деле соответствует определенному номеру цвета Pantone, что делает каждый шаг самостоятельным цветом, который может быть точно воспроизведен.
Проблема с бандингом, и градиентной заливкой вообще, в том, что их очень трудно воспроизвести в определенных форматах. При неправильном применении градиенты могут в итоге испортить привлекательный в остальном дизайн логотипа.
Сложности, связанные с использованием цвета и градиентов являются лишь одним примером того, почему для создания уникального и узнаваемого фирменного стиля для бизнеса, который также будет совместим с самым широким спектром производственных стандартов так важно работать с группой профессиональных дизайнеров.
Чтобы принять все эти факторы во внимание и заставить их гармонично работать при разработке логотипа необходим профессиональный графический дизайнер. Его обязанности – это не обязательно выбор базовых цветов, (в конце концов, клиент может иметь свое видение, которое всегда должно учитываться), но их эффективное включения в дизайн, который будет работать в любом требуемом формате, при этом передавая видение клиента и успешно воплощая идентичность бренда.
Добро пожаловать в
PANTONE
Подпишитесь, чтобы еженедельно получать эксклюзивные новости о цвете и специальные предложения Pantone.
Я разрешаю ООО «Синтез Восток», официальному дистрибьютору Pantone в России, связываться со мной по следующему адресу электронной почты:
Ваш e-mail *
Отправляя эту форму, я подтверждаю, что ознакомился и согласен с Условиями использования и Политикой конфиденциальности Pantone.
20 увлекательных цветовых палитр с градиентом
Цветовые градиенты — это новый черный цвет?
Все мы знаем, что цвета могут выражать настроение и чувства. Желтый передает счастье. Черный выглядит утонченно. Бренд или реклама традиционно придерживаются сплошных цветов, чтобы обеспечить мгновенную связь со своими потребителями. Вы можете вспомнить фирменный цвет Coca-Cola, McDonald’s и Milo? Полные оценки для вас.
Итак, при чем здесь цветовые градиенты? Использование цветовых градиентов существовало десятилетия назад художниками и художниками граффити. Когда в 2016 году Instagram изменил свой логотип, он стал вирусным.0003
Вы когда-нибудь чувствовали себя спокойно и в то же время раздраженно? Ну, может быть, нет. Градиент цветов не обязательно вызывает две противоречивые эмоции. Как и северное сияние, оно запоминающееся, увлекательное и веселое.
Одно можно сказать наверняка: постоянно растущее число приложений и брендов не остановится в ближайшее время.
Рассмотрите возможность включения градиентов в свой контент, чтобы выделиться из беспорядка.
#00B09B #96C93D
Candies Be Love — зеленоватая цветовая палитра, переходящая в желтую. Это может пригодиться при упаковке ваших новейших продуктов или при разработке проекта. Эта цветовая палитра успокаивающая, привлекательная и заставит зрителей сходить с ума.
#2 – Easy Med#DCE35B #45B649
Easy med начинается там, где закончились Candies be love. Он начинается с желтого и переходит к зеленому, что означает, что цветовая палитра для этого — зеленый и желтый. А вот соответствующая градиентная палитра Easy Med. Как и другая палитра, это может быть идеальным способом создания градиентного фона для вашего сайта. Или вы можете использовать его в упаковке, разработке приложений, а также в печати.
#3 – Limade Cooler#A1FFCE #FAFFD1
Kinase Cooler – одна из самых красивых цветовых палитр.
Он имеет приглушенный зеленый шалфей и желтый лайм, которые смешиваются друг с другом. У этого есть классная, но забавная привлекательность. Вы можете использовать его для создания графики для вашего следующего дизайнерского проекта или проявить творческий подход.
#4AC29A #BDFFF3
Аромат корицы известен своими опасными сине-зелеными оттенками. Градиентный дизайн придает ему 3D-качество. Голубовато-зеленый плавно переходит в белый. Он идеально подходит для дизайнеров, которые ищут палитру пастельных градиентов.
#5 – Мальдивы Холидей#B2FEFA #0ED2F7
Мальдивы Холидей – символ бирюзово-голубых вод океана. Лучший способ использовать эту цветовую палитру — использовать ее для туристического веб-сайта или логотипа. Синий цвет внушает доверие, а в Maldives Holiday есть все необходимое для привлечения аудитории.
#6 – Chitty Chitty Bang Bang#007991 #78FFD6
Chitty Chitty Bang Bang – более темная вариация Cinnamist Flavour.
Различные стили градиентных палитр могут состоять из двух основных цветов, но если вы достаточно креативны, вы можете создать потрясающую палитру. Здесь среди RGB — присутствуют синий и зеленый. Он подходит для разработки логотипа, поскольку имеет глубокий оттенок синего, но градиент придает ему достаточную глубину.
#56CCF2 #2F80ED
Цветовая палитра голубого неба украла все цвета неба! Он имеет сильное синее влияние, которое прогрессирует повсюду. Для дизайна пользовательского интерфейса вы можете использовать эту палитру или сохранить ее для своей следующей коллекции визитных карточек.
#8 – Visions of Grandeur#000046 #1CB5E0
Visions of grandeur имеет известную палитру, используемую многими популярными веб-сайтами. Эта градиентная палитра представляет собой крутую смесь блюза. Вы можете легко использовать его для своего веб-сайта или создать удивительный фон.
#9 – Черная роза#F4C4F3 #FC67FG
Черная роза – это сладкие лавандовые цвета.
Сочетание сладкого розового и фиолетового создает фантастический эффект. Смотреть на эту палитру одно удовольствие. Используйте его для упаковки косметических продуктов или брендинга.
#EF32D9 #89FFFD
Azure Pop — это смесь фиолетового и синего цветов. Фиолетовый часто используется для яркого цвета в цветовых палитрах. Однако здесь он создает глубину. Даже Instagram использовал цветовой градиент, близкий к этому.
#11 – Сплавленная страсть#800080 #FFC0CB
Сплавленная страсть немного отличается от других палитр градиентов в списке. Он имеет более теплый тон, который является привлекательным. У Fused Passion есть элегантные цвета для обновления вашего бренда.
#12 – Purpink#7F00FF #E100FF
Purpink – это близкий оксюморон для фиолетового и розового. Это одна из самых популярных палитр градиентных цветов. Вот почему такие бренды, как даже Tinder, используют его.
Ярко-розовый заменяет легкий розовый. Но он очень похож на логотип известного приложения для знакомств.
#FF00CC #333399
Космическая Вселенная представляет собой палитру более темных оттенков. Есть лиловый и фиолетовый. Логотип Walk использует точный цветовой градиент для своего логотипа. Вы можете использовать его как темный фон для сайта.
#14 — Розанна#FFAFBD #FFC3A0
Розанна — это вариант логотипа Адама с приглушенным градиентом. В то время как логотип Адама имеет более яркий и теплый оранжевый и розовый цвета, здесь цвета немного приглушены. Но пастельные/пепельные оттенки делают Roseanna идеальной палитрой для косметических и велнес-брендов или даже для технологических компаний
#15 – Уже созрел?#FC4A1A #F7B733
Мы все помним, как логотип Firefox сжигал Fox. Созрела ли еще палитра со всеми теплыми тонами. В нем есть ощущение глубокого лета.
Вы можете использовать его для любых целей — упаковки, брендинга, дизайна логотипа или даже печати. Это отличный фон как для светлого, так и для темного текста или переднего плана.
#FF7E5F #FEB47B
One over the Hill – персиковая вариация на тему Созрел ли он еще. Пастельные тона в градиенте источают энергичную атмосферу. Оранжевый имеет такую тенденцию. Фитнес-блогеры или бренды могут использовать его для создания захватывающего контента, такого как одежда, фон, дизайн продукта и т. д.
#17 – Здоровые кораллы#FF9966 #FF5E62
Здоровые кораллы напомнят вам о Моане. Он отражает яркие цвета кораллов — определенно великолепный фон для веб-сайтов. Или вы также можете использовать его в обычных изображениях, как у нас. Все, что вам подходит.
#18 – AB+#F85032 #E73827
Эта палитра очень похожа на Healthy Corals. Однако он на тон темнее.
Цветовой прогресс незаметен. Небольшая настройка в палитре может изменить ее внешний вид. Логотип Solpak пьяного похож на логотип приложения Weekend.com. Но единственное небольшое отличие заключается в том, что Solpak немного светлее и имеет более желтый оттенок.
#EE0979 #FF6A00
Кимоно представляет собой странную смесь оранжевого и розового цветов. Никто и подумать не мог, что эти два цвета будут сочетаться друг с другом, пока они не превратились в градиент. Он отдаленно напоминает логотип Instagram 2016 года.
№20 – Не 50 оттенков#BDC3C7 #2C3E50
Не пятьдесят оттенков – минималистичный цветовой градиент. Он полон серых и белых тонов. Если вы ищете роскошный и минималистичный стиль, эта цветовая палитра подойдет вам. Не 50 оттенков имеют более 50 оттенков серого.
Для чего используется цветовая палитра градиента?
Использование цветовой палитры градиента довольно ограничено.
Но это уже давно стало тенденцией, и бренды пытаются использовать ее как можно чаще. Скоро появятся более творческие способы его использования. Но вот несколько вариантов использования палитр градиентов –
Брендинг
Создание цветовой палитры бренда может быть сложной задачей, но градиент – это простая и уникальная идея. Mr. Hugo — это удобный аккаунт в Instagram, который делится красивыми цветовыми палитрами и соответствующими им палитрами градиентов с шестнадцатеричными кодами. Вы можете посетить эту учетную запись, чтобы узнать больше о том, как использовать градиентные палитры для брендинга. Его можно использовать в дизайне логотипов, дизайне продуктов и даже упаковке.
Печать
В печати можно открыть истинное очарование градиентных палитр. Его можно использовать для печати визитных карточек, обложек книг и постеров. Вы можете использовать простой бледный фон и использовать градиент только в качестве акцента, или вы можете сделать это наоборот. Однако, чтобы создать градиентную палитру для вашего бренда, вам нужно использовать палитру цветов и опробовать различные образцы, прежде чем что-то решить.
Градиентная палитра сейчас является хитом цветовой тенденции в мире. Все компании, большие и малые, хотят выделиться, и поэтому они хотят исследовать новые тенденции, которые отличали бы их от остальных. Надеюсь, вам помог список с шестнадцатеричным кодом. Это лучший инструмент для создания коротких видеороликов или рекламы для ваших брендов. Если вы хотите создать градиентный фон для своего веб-сайта или видео о продукте, OFFEO может создать захватывающие короткие видеоролики за считанные минуты. Вы хотите сделать продукт или промо-ролик с градиентными цветами? Зарегистрируйтесь сейчас, и создание вашего видео займет всего несколько минут!
16 Красивые идеи цветового градиента для графического дизайна
Цветовые градиенты являются большой тенденцией в графическом дизайне, и если вы хотите придать своему дизайн-проекту современный и свежий вид, вы можете использовать цветовой градиент, поэтому я сделал этот пост, где я сделал 16 уникальных цветовых градиентов, которые вы можете использовать для своего следующего проекта графического дизайна, идеи веб-дизайна или дизайна бренда и фирменного стиля.
Реклама
01 Moon Raker Tawny Port Красивый градиент цвета Вдохновляющий дизайн
02 Deep Koamaru и True V красивого цветового градиентного дизайна. 05 Свежий баклажан Светло-желтый Красивый градиент цвета Inspiration Design
06 Гоблин Барвинок Серый Красивый градиент цвета Inspiration Design
07 Розовый и светлый солнце. Краткий градиент цветовой градиент. Blue Water Leaf Красивый градиент цвета Inspiration Design
11 Tahuna Sands Geraldine Красивый градиент цвета Inspiration Design
12 Дикий арбуз Геральдина красивого цветового градиента дизайна. Color Gradient Inspiration Design
16 Pink Purple Studio Beautiful Color Gradient Inspiration Design
Реклама
Надеюсь, вы найдете этот пост полезным и вдохновитесь этими 16 идеями цветовых градиентов, которые вы можете использовать в своем следующем проекте графического дизайна, чтобы придать ему современный вид.
