Градиент цвета: Цвета HTML Color Градиент цвета фон

Posted by alexxlab Posted on 05.07.2021 0 Comments on Градиент цвета: Цвета HTML Color Градиент цвета фон
Posted in Разное

Содержание

использование градиентов для смешения цветов

Применение цвета при разработке логотипа — задача гораздо более сложная, чем просто выбор «моего любимого цвета». Цвета, и что более важно, цветовые комбинации могут влиять на дизайн логотипа и не только на техническом уровне. К примеру, эмоциональные реакции на определенные цвета могут находиться в диапазоне между любовью и яростью (красный), теплом и холодом (синий) и т.д. в зависимости от контекста, — все эти реакции были описаны в научных исследованиях. Некоторые цвета способны вызывать у людей чувство реального голода.

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

 

Дизайн логотипа с плавным градиентом от светло-зеленого до синего.

Что такое градиентная заливка?

Градиентная заливка или заливка с плавным переходом цветов – это, по сути, постепенное переход между двумя цветами, создающий эффект от светлого к темному, интенсивность которого зависит от базовых цветов. Самый простой пример – от черного к белому. Черный – 100%, а белый 0%, поэтому потенциально мы имеем 100 «ступенек» между ними. Кажется, все достаточно просто, не так ли? Но не будем спешить.

Дизайнерский макет можно воспроизвести достаточно большим количеством способов. Тип носителя, на который наносится дизайн, размеры, будет ли это шелкография, офсетная печать или цифровая публикация… все факторы должны быть приняты во внимание. Логотип хорошо выглядит на визитной карточке, но он будет ли он работать на рекламном щите? Будет ли он работать в стандартном газетном модуле и при этом адекватно воспроизводиться на экране телевизора?

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

Бандинг

Когда речь идет о какой-либо традиционной печати, «ступеньки» от 0 до 100%, в лучшем случае, будут относительным понятием. На деле от 0 до 100 у нас будет только шагов 20. Это цветовой переход с шагом 5%, и это при сильно специализированной печати. Чаще всего, при увеличении градиента неизбежно происходит бандинг («полосатость»). И наоборот, когда градиент уменьшается, он часто становятся размытым или мутным.

Бандинг может быть намеренно включен в дизайн, и обычно это реализуется так, чтобы в цветовом переходе использовались смесевые цвета. Например, красная полоса, оранжевая полоса, золотая полоса; или максимум десять шагов по 10% каждый, где значение каждого шага фактически является частью дизайна. Стандартом в определении цвета для печати является система цветов Pantone Color Matching System, и каждый из десяти шагов на самом деле соответствует определенному номеру цвета Pantone, что делает каждый шаг самостоятельным цветом, который может быть точно воспроизведен.

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

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

Как гарантировать, что ваши цвета и градиенты будут выглядеть хорошо

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

Лучшие генераторы градиентов CSS для дизайнеров

Автор:

Елизавета Гуменюк

Рейтинг топика: +1

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

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

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

CoolHue 

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

Хотя у вас нет особого контроля над настройкой параметров, с помощью CoolHue вы сразу поймете, работает ли один из цветовых комбо для вас или нет, потому что все параметры находятся прямо на экране. Также одним щелчком мыши вы можете скопировать CSS. Вот и все. Серьезно! Кроме того каждый файл доступен в формате PNG для скачивания.

CSS Gradient 

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

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

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

UI Gradients 

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

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

Не нравится то, что вы видите? Тогда вы можете добавлять данные градиента в файл gradients.json в проекте и отправлять запрос на перенос.

CSSmatic 

CSSmatic — это простой генератор градиентов с кликабельными кнопками, которые помогут вам настроить выбор цвета, остановку и вращение. С помощью этого инструмента пользователи могут создавать линейные или радиальные градиенты.

Начните с одного из простых пресетов — тут вы найдете некоторые хорошие монохроматические варианты — и настраивайте его, пока вы не получите необходимый вам градиент. Затем скопируйте код, и вы готовы к работе.

Ultimate CSS Gradient Generator 

Ultimate CSS Gradient Generator очень похож на CSSmatic, и у этих инструментов даже почти одинаковые экранные функции, однако у него есть и другая функциональность.

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

ColorSpace 

ColorSpace — это еще один полноэкранный градиентный инструмент с высоко визуальным веб-сайтом. Он довольно простой в использовании. Выберите ориентацию градиента (линейную или радиальную), добавьте два цвета с помощью кнопок и средства выбора цвета, затем нажмите кнопку «Создать».

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

CSS Gradient Generator 

CSS Gradient Generator производит код, используя простой графический интерфейс пользователя, а сам CSS будет работать во всех браузерах, поддерживающих CSS3.

Генератор позволяет создавать линейные и радиальные градиенты, а также имеет возможность импортировать существующий код градиента CSS для редактирования. Он также поставляется с несколькими пресетами для запуска ваших градиентных визуализаций.

CSS3 Factory 

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

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

CSS-Gradient 

CSS-Gradient является генератором плюс учебником по градиентам. Инструмент включает в себя боксы для выбора двух вариантов цвета в Hex или RGB, направленных, линейных или радиальных. Так что этот инструмент лучше всего подходит, если вы имеете представление о том, какие цвета вы хотите использовать. Просто скопируйте код и примените его к своему дизайну. 

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

GradientGenerator 

GradientGenerator — отличный инструмент для создания небольшого градиентного вдохновения. Начните с одного из пресетов (есть много различных вариантов на выбор), а затем добаьте свои собственные настройки для уникального градиента.

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

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

Вывод

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

Затем все, что вам нужно сделать, это скопировать код и вставить его в свой файл CSS, чтобы начать работу. Генератор градиентов CSS — это быстрый и простой способ создать градиент веб-сайта, который вам понравится, и который будет прост в использовании. Мы надеемся, что один из вариантов в этом списке отлично будет работать вас.

Всем успешной работы!

Источник

10.

Градиенты

Рисунок 7.23. Несколько примеров градиентов в GIMP

Градиент — это набор цветов, упорядоченных линейно. Самое базовое использование градиентов — с помощью инструмента «Градиент», который иногда ещё называют«заливка градиентом»: с его помощью выделения заливаются цветами градиента. Существует много способов расположения цветов градиента в границах выделения. Есть также и другие важные способы работы с градиентами, включая:

Рисование градиентом

Любой из основных инструментов рисования в GIMP даёт вам возможность использовать цвета из градиента. Это позволяет вам создавать мазки кистью, которые меняют цвет от одного конца к другому.

Фильтр «Отображение градиента»

этот фильтр находится в меню цветов и позволяет вам «сделать цветным» чёрно-белое изображение, заменяя каждый оттенок серого соответствующим цветом из активного градиента. Так, для оттенка 0 (самый тёмный) выбирается цвет в левом конце градиента, для оттенка 255 — в правом конце градиента. Для дополнительной информации смотрите раздел Отображение градиента.

Когда вы устанавливаете GIMP, вместе с ним устанавливается большое количество интересных градиентов, и вы можете добавлять новые, создавая собственные или загружая из других источников. Для доступа к полному набору доступных градиентов используйте диалог Градиенты — диалог, который вы можете активировать при необходимости, или оставить рядом как закладку в панели. «Текущий градиент», используемый в большинстве операций с градиентом, отображается в области Кисть/Шаблон/Градиент панели инструментов. Щелчок по символу градиента в панели инструментов это альтернативный метод вызова диалога градиентов.

Множество быстрых примеров работы с градиентами (подробности смотрите здесь: инструмент Градиент):

  • Разместить градиент в выделении:

    1. Выбор градмента

    2. С помощью инструмента градиента нажмите и переместите курсор мышки по выделению.

    3. Цвета будут распределены по направлению, перпердикулярном направлению перемещения мышки, и по всей длине перемещения.

    Рисунок 7.24. Как быстро использовать градиент в выделении

  • Рисование градиентом:

    Инструменты «Карандаш», «Кисть» или «Аэрограф» тоже могут работать с градиентами, если выбрать динамику Цвет из градиента. На следующем шаге выберите подходящий градиент в параметрах цвета, в в параметрах угасания укажите длину градиента и стиль повторения. В главе Раздел 3.2.6, «Параметры динамики» эти параметры описываются более подробно.

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

    Рисунок 7.25. Как быстро использовать градиент с инструментом рисования

    Чтобы использовать инструменты рисования с теми значениями, которые были известны как параметр Использовать цвет градиента в GIMP до версии 2.6 включительно, откройте диалог профилей инструмента. Затем выберите один из элементов: Аэрограф (цвет из градиента), Кисть (цвет из градиента) или Карандаш (цвет из градиента).

  • Разный результат с тем же градиентом:

    Рисунок 7.26. Использование градиентов

Немного полезных вещей о градиентах в GIMP:

  • Первые четыре градиента в списке особенные: вместо фиксированных цветов они используют цвета фона и переднего плана из области цвета панели инструментов. Основной в фоновый (RGB) это представление RGB градиента из цвета переднего плана в цвет фона в панели инструментов. Основной в фоновый (HSV по часовой) представление последовательности оттенка в цветном кругу от выбранного оттенка до 0°. Основной в фоновый (HSV против часовой) представление последовательности оттенка в цветном кругу от выбранного оттенка до 360°. Основной в прозрачный выделенный оттенок становится всё более и более прозрачным. Вы можете изменить эти цвета с помощью выборщика цветов. Итак, изменяя цвета переднего плана и фона, вы можете сделать эти градиенты плавно переходящими между двумя выбранными цветами.

  • Градиенты могут не только изменять цвета, но и работать с прозрачностью/ Некоторые градиенты полностью непрозрачны, другие могут иметь прозрачные части. Если вы будете заполнять область или рисовать прозрачным градиентом, предыдущий рисунок будет проступать сквозь.

  • Вы можете создавать новые собственные градиенты с помощью Редактора градиентов. Вы не можете изменить установленные вместе с GIMP градиенты, но вы можете их дублировать или создавать новые для последующего редактирования.

Градиенты, устанавливаемые вместе с GIMP хранятся в системной папке gradients. По умолчанию, создаваемые вами градиенты хранятся в папке gradients в вашей персональной папке GIMP. Любой файл градиента (имеющий расширение .ggr) будет автоматически загружаться при запуске GIMP. Если желаете, вы можете добавить больше директорий в поисковой путь градиентов с помощью закладки градиентов в меню настроек на странице Каталоги.

В GIMP 2.2 добавлена новая возможность загружать градиенты из файлов формата SVG, используемого многими программами векторной графики. Для того чтобы GIMP загрузил градиент в формате SVG, всё, что вам нужно сделать это просто поместить его в папку gradients в вашей персональной директории, или в любую другую папку, указанную в вашем поисковом пути градиентов.

Подсказка

Вы можете найти большое количество интересных градиентов в сети, в частности на странице OpenClipArt Gradients [OPENCLIPART-GRADIENT]. Вы не сможете увидеть как эти градиенты выглядят если ваш браузер не поддерживает SVG, однако это не помешает вам их скачать.

5. Градиенты

Рисунок 4.9.
Несколько примеров градиентов в GIMP

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

Рисование градиентом

Любой из основных инструментов рисования в GIMP даёт вам возможность
использовать цвета из градиента. Это позволяет вам создавать мазки
кистью, которые меняют цвет от одного конца к другому.

Фильтр «Градиентная карта»

Этот фильтр позволяет вам «сделать цветным» чёрно-белое изображение,
заменяя каждый оттенок серого соответствующим цветом из градиента.
Для дополнительной информации смотрите раздел
Градиентная карта.

Когда вы устанавливаете GIMP, вместе с ним устанавливается большое
количество интересных градиентов, и вы можете добавлять новые, создавая
собственные или загружая из других источников. Для доступа к полному
набору доступных градиентов используйте диалог
Градиенты
— диалог, который вы можете активировать при необходимости, или оставить
рядом как закладку в панели. «Текущий градиент», используемый в
большинстве операций с градиентом, отображается в области
Кисть/Шаблон/Градиент панели инструментов. Щелчок по символу градиента в
панели инструментов это альтернативный метод вызова диалога градиентов.

Рисунок 4.10.
Использование градиентов

Немного полезных вещей о градиентах в GIMP:

  • Первые четыре градиента в списке особенные:
    вместо фиксированных цветов они используют цвета фона и переднего
    плана из области цвета панели инструментов. Основной в
    фоновый (RGB)
    это представление RGB градиента из цвета переднего плана в цвет
    фона в панели инструментов.
    Основной в фоновый (HSV по часовой)
    представление последовательности оттенка в цветном кругу от выбранного
    оттенка до 0°. Основной в фоновый (HSV против часовой)
    представление последовательности оттенка в цветном
    кругу от выбранного оттенка до 360°.
    Основной в прозрачный выделенный оттенок
    становится всё более и более прозрачным. Вы можете изменить эти цвета
    с помощью выборщика цветов. Итак, изменяя цвета переднего плана и фона,
    вы можете сделать эти градиенты плавно переходящими между двумя
    выбранными цветами.

  • Градиенты могут не только изменять цвета, но и работать с
    прозрачностью Некоторые градиенты полностью непрозрачны, другие могут
    иметь прозрачные части. Если вы будете заполнять область или рисовать
    прозрачным градиентом, предыдущий рисунок будет проступать сквозь.

  • Вы можете создавать новые собственные
    градиенты с помощью Редактора
    градиентов. Вы не можете изменить установленные вместе
    с GIMP градиенты, но вы можете их дублировать или создавать новые
    для последующего редактирования.

Градиенты, устанавливаемые вместе с GIMP хранятся в системной папке
gradients. По умолчанию, создаваемые вами
градиенты хранятся в папке gradients в вашей
персональной директории GIMP. Любой файл градиента (имеющий расширение
.ggr) будет автоматически загружаться при запуске
GIMP. Если желаете, вы можете добавить больше директорий в
поисковой путь градиентов с помощью закладки градиентов в меню настроек на
странице Каталоги.

В GIMP 2.2 добавлена новая возможность загружать градиенты из файлов
формата SVG, используемого многими программами векторной графики.
Для того чтобы GIMP загрузил градиент в формате SVG, всё, что вам нужно
сделать это просто поместить его в папку gradients в
вашей персональной директории, или в любую другую папку, указанную в
вашем поисковом пути градиентов.

Подсказка

Вы можете найти большое количество интересных градиентов в сети, в
частности на странице OpenClipArt Gradients
[OPENCLIPART-GRADIENT].
Вы не сможете увидеть как эти градиенты выглядят если ваш браузер не
поддерживает SVG, однако это не помешает вам их скачать.

Алгоритм цветового градиента — CodeRoad

Ваш вопрос на самом деле состоит из двух частей:

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

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

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

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

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

Algorithm MarkMix
   Input:
      color1: Color, (rgb)   The first color to mix
      color2: Color, (rgb)   The second color to mix
      mix:    Number, (0..1) The mix ratio. 0 ==> pure Color1, 1 ==> pure Color2
   Output:
      color:  Color, (rgb)   The mixed color

   //Convert each color component from 0..255 to 0..1
   r1, g1, b1 ← Normalize(color1)
   r2, g2, b2 ← Normalize(color1)

   //Apply inverse sRGB companding to convert each channel into linear light
   r1, g1, b1 ← sRGBInverseCompanding(r1, g1, b1)       
   r2, g2, b2 ← sRGBInverseCompanding(r2, g2, b2)

   //Linearly interpolate r, g, b values using mix (0..1)
   r ← LinearInterpolation(r1, r2, mix)
   g ← LinearInterpolation(g1, g2, mix)
   b ← LinearInterpolation(b1, b2, mix)

   //Compute a measure of brightness of the two colors using empirically determined gamma
   gamma ← 0.43
   brightness1 ← Pow(r1+g1+b1, gamma)
   brightness2 ← Pow(r2+g2+b2, gamma)

   //Interpolate a new brightness value, and convert back to linear light
   brightness ← LinearInterpolation(brightness1, brightness2, mix)
   intensity ← Pow(brightness, 1/gamma)

   //Apply adjustment factor to each rgb value based
   if ((r+g+b) != 0) then
      factor ← (intensity / (r+g+b))
      r ← r * factor
      g ← g * factor
      b ← b * factor
   end if

   //Apply sRGB companding to convert from linear to perceptual light
   r, g, b ← sRGBCompanding(r, g, b)

   //Convert color components from 0. .1 to 0..255
   Result ← MakeColor(r, g, b)
End Algorithm MarkMix

Вот код в Python:

def all_channels(func):
    def wrapper(channel, *args, **kwargs):
        try:
            return func(channel, *args, **kwargs)
        except TypeError:
            return tuple(func(c, *args, **kwargs) for c in channel)
    return wrapper

@all_channels
def to_sRGB_f(x):
    ''' Returns a sRGB value in the range [0,1]
        for linear input in [0,1].
    '''
    return 12.92*x if x <= 0.0031308 else (1.055 * (x ** (1/2.4))) - 0.055

@all_channels
def to_sRGB(x):
    ''' Returns a sRGB value in the range [0,255]
        for linear input in [0,1]
    '''
    return int(255.9999 * to_sRGB_f(x))

@all_channels
def from_sRGB(x):
    ''' Returns a linear value in the range [0,1]
        for sRGB input in [0,255].
    '''
    x /= 255.0
    if x <= 0.04045:
        y = x / 12.92
    else:
        y = ((x + 0.055) / 1.055) ** 2.4
    return y

def all_channels2(func):
    def wrapper(channel1, channel2, *args, **kwargs):
        try:
            return func(channel1, channel2, *args, **kwargs)
        except TypeError:
            return tuple(func(c1, c2, *args, **kwargs) for c1,c2 in zip(channel1, channel2))
    return wrapper

@all_channels2
def lerp(color1, color2, frac):
    return color1 * (1 - frac) + color2 * frac



def perceptual_steps(color1, color2, steps):
    gamma = . 43
    color1_lin = from_sRGB(color1)
    bright1 = sum(color1_lin)**gamma
    color2_lin = from_sRGB(color2)
    bright2 = sum(color2_lin)**gamma
    for step in range(steps):
        intensity = lerp(bright1, bright2, step, steps) ** (1/gamma)
        color = lerp(color1_lin, color2_lin, step, steps)
        if sum(color) != 0:
            color = [c * intensity / sum(color) for c in color]
        color = to_sRGB(color)
        yield color

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

Код для генерации градиента должен немного отличаться от того, что показано выше, чтобы быть немного более гибким. Вместо того чтобы разбивать градиент на фиксированное число шагов, он вычисляется на континууме, основанном на параметре t , который колеблется между 0.0 и 1.0.

class Line:
    ''' Defines a line of the form ax + by + c = 0 '''
    def __init__(self, a, b, c=None):
        if c is None:
            x1,y1 = a
            x2,y2 = b
            a = y2 - y1
            b = x1 - x2
            c = x2*y1 - y2*x1
        self.a = a
        self.b = b
        self.c = c
        self.distance_multiplier = 1.0 / sqrt(a*a + b*b)

    def distance(self, x, y):
        ''' Using the equation from
            https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line#Line_defined_by_an_equation
            modified so that the distance can be positive or negative depending
            on which side of the line it's on.
        '''
        return (self.a * x + self.b * y + self.c) * self.distance_multiplier

class PerceptualGradient:
    GAMMA = .43
    def __init__(self, color1, color2):
        self. color1_lin = from_sRGB(color1)
        self.bright1 = sum(self.color1_lin)**self.GAMMA
        self.color2_lin = from_sRGB(color2)
        self.bright2 = sum(self.color2_lin)**self.GAMMA

    def color(self, t):
        ''' Return the gradient color for a parameter in the range [0.0, 1.0].
        '''
        intensity = lerp(self.bright1, self.bright2, t) ** (1/self.GAMMA)
        col = lerp(self.color1_lin, self.color2_lin, t)
        total = sum(col)
        if total != 0:
            col = [c * intensity / total for c in col]
        col = to_sRGB(col)
        return col

def fill_gradient(im, gradient_color, line_distance=None, max_distance=None):
    w, h = im.size
    if line_distance is None:
        def line_distance(x, y):
            return x - ((w-1) / 2.0) # vertical line through the middle
    ul = line_distance(0, 0)
    ur = line_distance(w-1, 0)
    ll = line_distance(0, h-1)
    lr = line_distance(w-1, h-1)
    if max_distance is None:
        low = min([ul, ur, ll, lr])
        high = max([ul, ur, ll, lr])
        max_distance = min(abs(low), abs(high))
    pix = im. load()
    for y in range(h):
        for x in range(w):
            dist = line_distance(x, y)
            ratio = 0.5 + 0.5 * dist / max_distance
            ratio = max(0.0, min(1.0, ratio))
            if ul > ur: ratio = 1.0 - ratio
            pix[x, y] = gradient_color(ratio)

>>> w, h = 406, 101
>>> im = Image.new('RGB', [w, h])
>>> line = Line([w/2 - h/2, 0], [w/2 + h/2, h-1])
>>> grad = PerceptualGradient([252, 13, 27], [41, 253, 46])
>>> fill_gradient(im, grad.color, line.distance, 71)

И вот результат всего вышесказанного:

Секрет создания отличного градиента, вдохновленного природой

Градиенты, созданные природой

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

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

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

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

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

В небе много разных градиентов: оранжево-фиолетовый, фиолетово-красный, сине-фиолетовый, но по сей день я никогда не видела «зелено-красного».

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

Оранжевый и синий ужасная комбинация, а оранжевый, красный и фиолетовый, и синий создают прекрасный закат.

Как найти отличный природный градиент

На мой взгляд, самым большим вдохновением для поиска естественных градиентов является природа. В частности, небо. Это самые основные цвета: синий и красный, но на самом деле это не все. Тонкие изменения оттенка эмулируют волны, нерегулярные и несовершенные облака одновременно разрушают и усиливают общую картину, и когда солнце поднимается или садится, все создаёт беспорядок. Хотя, кто-то мог подумать, что это погубит опыт, все по-прежнему находится в полной гармонии. Я никогда не видела небо, которое не вдохновило бы меня.

Яркие оттенки небесного градиента

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

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

Градиенты ясного неба

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

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

Использование естественных градиентов в дизайне интерфейса

Небесный градиент может быть отличным фоном для вашего дизайна. В качестве примера я хочу поделиться с вами своей концепцией приложения погоды, использующем красивые естественные градиенты. Оно действительно вызывает ощущения неба и погоды, когда вы смотрите на него. Действительно легко показать, если это жаркая, туманная или дождливая погода, при помощи градиента неба. Я расскажу вам больше о концепции погоды и о картинках в своей следующей статье, но сейчас я хочу сравнить приложение погоды, с естественным градиентом и новое приложение погоды от Google, использующее принципы material design. Мне действительно нравится цветовая палитра material design, большинство цветов выглядит хорошо, и вы можете легко применять их в дизайне. Но последнее обновление приложения погоды неожиданно потрясло меня. Потому что цвета не подходят друг другу, и они слишком яркие и неестественные.

В моих предыдущих статьях вы можете найти больше  комбинаций естественных цветовых палитр:

Три лучших цветовых схемы для дизайна интерфейса

Спасибо за прочтение!

Ребята, я рада поделиться с вами, своими исследованиями цветов и вдохновением природной палитрой. Я надеюсь, что эта статья поможет вам с подбором цветов:)

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

Вы можете подписаться на автора на dribbble.

Красивая цветовая палитра для вашего вдохновения: colorpalettes.net

как она выглядит и как ее использовать

Многие тренды 90-х снова в моде! Урожай, чокеры, даже резинки для волос (… серьезно). И есть одна тенденция, которая захватывает мир дизайна штурмом, которая будет чувствовать себя как дома в 1995 году — и это градиенты.

Несколько десятилетий назад градиенты были популярным способом добавления цвета и глубины в дизайн. Они оставались довольно заметной тенденцией в дизайне до конца 2000-х годов, когда они перешли на заднее сиденье для плоского дизайна. Но градиенты вернулись в 2018 году, и мы видим их повсюду. Это способ улучшить плоский дизайн (обновление дизайна, известное как flat 2.0), добавить цветное наложение на фотографии и добавить текстуру на фон.

Угадай что? Тенденция градиента не проявляет никаких признаков замедления в 2019 году.

Так как же работают градиенты? Почему они сейчас такие горячие? И как мы продолжим наблюдать развитие градиентов в 2019 году и в последующий период?

Содержание статьи

Что такое градиенты?

—

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

через Walker Art

Градиенты могут смешивать или переводить похожие цвета (например, разные оттенки синего или светло-оранжевого в темно-красный) или совершенно разные или контрастные цвета (например, фиолетовый и красный или синий и желтый).

Через Невозможное Бюро

Via designmodo

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

Прекрасное фото — сделанное еще более красивым с розовым градиентным наложением. Изображение через Creative Market

Градиентный дизайн добавляет глубину и размер к плоскому графическому изображению лисы. Разработка логотипа Cross The Lime

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

Почему сейчас такие модные градиенты?

—

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

Изображение через Instagram

Когда в 2018 году вернулись градиенты на сцену дизайна, многие дизайнеры были удивлены, особенно когда крупные бренды (мы смотрим на ты, Instagram) запрыгнул на борт. Многие люди думали, что идти по градиентному маршруту — слишком большой возврат. Ностальгия была одной вещью, но действительно ли люди связаны с тенденцией, которую мы видели раньше?

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

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

Градиентный тренд в действии

—

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

Вот несколько примеров градиентной тенденции в действии:

Логотипы

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

Дизайн Subqi Std

Via Aaptiv

Дизайн Мила Джонс Кэнн

Упаковка

Вы хотите, чтобы ваша упаковка соскочила с полок, а градиент — это способ сделать это.

Дизайн Влада Лиха

через Тальмо

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

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

Веб-дизайн

Существует множество возможностей для включения тенденции градиента в ваш веб-дизайн.

серьезно. Тонна.

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

Виа Асана

Дизайн webDAE

Дизайн creativepixels

Программа

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

Через ClassPass

Дизайн fikandzo для Live Tonight

Дизайн Масико

Материалы для печати

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

Дизайн CR75 ™ для Эллингтона

Виа Торстен Линдсё Андерсен

Via Weidea

Как заставить градиенты работать на вас

—

Тенденция градиента сохраняется до 2019 года. Поэтому возникает вопрос: как вы можете заставить это работать на вас?

1. Выберите правильные цвета

Наиболее важным аспектом градиентного тренда являются цвета, которые вы выбираете. Для того чтобы тенденция градиента выглядела хорошо разработанной, вы должны выбрать либо цвета, которые имеют сходный оттенок и оттенок (например, градиент, который исчезает от светло-синего до темно-синего), либо цвета, которые «работают» вместе в соответствии с в теорию цвета; таким образом, дополнительные цвета (цвета, которые противоположны друг другу на цветовом круге), аналогичные цвета (три цвета рядом на цветовом круге) или триадные цвета (три цвета расположены на палитре цветов на одинаковом расстоянии друг от друга).

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

Дизайн CalmSpark App Design

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

2. Используйте градиенты с умом

Как мы уже говорили, градиенты универсальны. Вы можете использовать их, чтобы добавить глубину к плоскому дизайну, добавить визуальный интерес к однотонному фону, как наложение… Этот список можно продолжать и продолжать.

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

3. Знай свою аудиторию

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

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

4. Сделать это весело

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

Исчезают

—

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

Убирайся и иди градиентом!
От логотипов до приложений и всего, что между ними, мы находимся на этом!

Gradient Generator — Colordesigner

Что такое Gradient Generator

Gradient Generator — лишь один из множества разных браузеров.
инструменты, которые каждый может свободно использовать в ColorDesigner
Веб-сайт. Сам инструмент используется для создания постепенного
изменение цветового градиента от одного цвета к другому,
по сути оставляя пользователя с результатом многих
разные промежуточные цвета смеси. В дополнение к
отображение двух компонентных цветов, а также
различные сочетания между ними, инструмент Gradient Generator
также позволяет пользователю выбирать количество промежуточных
отображаемых цветов от одного до сорока
разные промежуточные цвета. Инструмент также отображает
список различных режимов для всех цветов, включая
HSL, RGB, а также HEX, которые вы можете копировать и сохранять
для дальнейшего использования.

Как использовать

Использовать инструмент Gradient Generator очень просто. В
Страница Gradient Generator встретит пользователя двумя
большие панели выбора цвета и один красный слайдер
который по умолчанию будет равен пятнадцати. После этого пользователи могут
нажмите на каждую из панелей, чтобы выбрать их
желаемые цвета компонентов, из которых они хотят
создать эффект градиента. Щелкнув по одному из
панели, пользователи будут встречены стандартным цветом
палитра, которая позволит им вручную выбрать цвет
и его значения, при этом отображая дополнительные сведения
таких как значения RGB, HEX-код и оттенок,
значения насыщенности и яркости или HSV.

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

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

30 красивых цветовых градиентов для вашего следующего дизайн-проекта

Ищете классные фоновые градиенты для вашего пользовательского интерфейса? Компания по разработке программного обеспечения и дизайна Itmeo создала полезный онлайн-инструмент под названием WebGradients — бесплатную коллекцию из 180 линейных градиентов, которые вы можете использовать в качестве фона контента в любой части вашего веб-сайта.

Вы можете загрузить версию каждого градиента в формате . PNG и скопировать их кроссбраузерные коды CSS3. Также доступны пакеты Sketch и Photoshop.Вот некоторые из наших фаворитов из коллекции.

1. Теплое пламя

# ff9a9e → # fad0c4

2. Сочный персик

# ffecd2 → # fcb69f

3. Леди Губы

# ff9a9e → #fecfef

4. Зимняя Нева

# a1c4fd → # c2e9fb

5. Сильный дождь

# cfd9df → # e2ebf0

6. Облачно, Ноксвилл

#fdfbfb → #ebedee

7. Санкт-Петербург

# f5f7fa → # c3cfe2

8.Тарелка сливы

# 667eea → # 764ba2

9. Вечное небо

#fdfcfb → # e2d1c3

10. Хэппи Фишер

# 89f7fe → # 66a6ff

11. Летай высоко

# 48c6ef → # 6f86d6

12. Сильное блаженство

Несколько цветов

13. Свежее молоко

# feada6 → # f5efef

14. Большой Кит

# a3bded → # 6991c7

15. Aqua Splash

# 13547a → # 80d0c7

16.

Чистое зеркало

# 93a5cf → # e4efe9

17. Премиум темный

# 434343 → # 000000

18. Озеро Кочити

# 93a5cf → # e4efe9

19. Страстная кровать

# ff758c → # ff7eb3

20. Маунтин-Рок

# 868f96 → # 596164

21. Пустынный горб

# c79081 → # dfa579

22. Вечная Констанция

# 09203f → # 537895

23. Здоровая вода

# 96деда → # 50c9c3

24.Жестокая стойка

# 29323c → # 485563

25. Нега

# ee9ca7 → # ffdde1

26. Ночное небо

# 1e3c72 → # 2a5298

27. Бережный уход

# ffc3a0 → #ffafbd

28. Angel Care

Несколько цветов

29. Утренний салат

# B7F8DB → # 50A7C2

30. Глубокий рельеф

Несколько цветов

ПОДРОБНЕЕ…

Как использовать градиенты

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

Поделитесь этим постом с другом-дизайнером и выскажите свое мнение в комментариях ниже.

Цвет градиента: определение и использование в дизайне UX

Иллюстрация Лидии Лукьяновой

Цветовые градиенты — не новая концепция дизайна, но сейчас они очень важны. Хотя они были популярной тенденцией дизайна в конце 1990-х — 2000-х годах, они в конечном итоге отошли на второй план по сравнению с всплеском концепций плоского дизайна, появившимся в период с 2005 по 2015 год.

В результате (или отражения) движения плоского дизайна маятник снова качнулся в сторону таких тенденций, как цветовые градиенты, как способ для дизайнеров добавить глубины и интереса к своим проектам. Такие бренды, как Adobe, Instagram и Aaptiv, приветствовали это возрождение в своих торговых марках и логотипах.

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

Использование цветовой палитры градиента радуги может добавить глубину и интерес к дизайну.Изображение предоставлено Adobe Stock.

Что такое цветовой градиент и почему дизайнеры должны их использовать?

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

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

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

Типы цветовых градиентов

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

Линейный

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

Радиальный

Радиальный градиент исходит из центральной точки. Здесь есть возможность поиграть с центральной точкой, размером и скоростью перехода радиального цветового градиента.

Радиальный градиент исходит из центральной точки. Изображение предоставлено Adobe Stock.

Конический

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

Конический градиент закругляется. Изображение предоставлено Adobe Stock.

Ромб

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

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

Отражение

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

Лучшие практики использования цветового градиента

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

Выберите правильные цвета

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

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

Экспериментируйте с более чем двумя цветами, но не переусердствуйте

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

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

Создание плавных переходов

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

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

Целенаправленно выберите источник света

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

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

Используйте отдельные формы и узоры

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

Поиграйте с непрозрачностью

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

Не забывайте о цветовом контрасте

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

Используйте такой инструмент, как Color Contrast Checker от Coolors.co, чтобы проверить любой текст на цветовом градиенте на соответствие Руководству по доступности веб-контента. Изображение предоставлено Coolors.co.

Fade to Black

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

ios — Программное создание UIView с цветовым градиентом

Быстрый подход

Этот ответ основан на приведенных выше ответах и ​​обеспечивает реализацию для решения проблемы, связанной с неправильным применением градиента во время вращения. Он решает эту проблему, изменяя слой градиента на квадрат, чтобы вращение во всех направлениях приводило к правильному градиенту.Сигнатура функции включает вариативный аргумент Swift, который позволяет передавать столько CGColorRef (CGColor), сколько необходимо (см. Пример использования). Также предоставляется пример расширения Swift, чтобы можно было применить градиент к любому UIView.

  func configureGradientBackground (colors: CGColorRef ...) {

        пусть градиент: CAGradientLayer = CAGradientLayer ()
        пусть maxWidth = max (self.view.bounds.size.height, self.view.bounds.size.width)
        пусть squareFrame = CGRect (origin: self.view.bounds.origin, размер: CGSizeMake (maxWidth, maxWidth))
        gradient.frame = squareFrame

        gradient.colors = цвета
        view.layer.insertSublayer (gradient, atIndex: 0)
    }

Использовать:

в поле зрения DidLoad … 

  функция переопределения viewDidLoad () {
        super.viewDidLoad ()
        configureGradientBackground (UIColor.redColor (). CGColor, UIColor.whiteColor (). CGColor)
  }

Внедрение расширения 

  extension CALayer {


    func configureGradientBackground (цвета: CGColorRef...) {

        let gradient = CAGradientLayer ()

        пусть maxWidth = max (self.bounds.size.height, self.bounds.size.width)
        пусть squareFrame = CGRect (origin: self.bounds.origin, size: CGSizeMake (maxWidth, maxWidth))
        gradient.frame = squareFrame

        gradient.colors = цвета

        self.insertSublayer (gradient, atIndex: 0)
    }

}

Пример использования расширения:

  функция переопределения viewDidLoad () {
        super.viewDidLoad ()

        self.view.layer.configureGradientBackground (UIColor.purpleColor (). CGColor, UIColor.blueColor (). CGColor, UIColor.whiteColor (). CGColor)
 }

Это означает, что градиентный фон теперь может быть применен к любому UIControl, поскольку все элементы управления являются UIViews (или подклассом), и все UIViews имеют CALayers.

Swift 4

Внедрение расширения 

  extension CALayer {
    public func configureGradientBackground (_ colors: CGColor ...) {

        let gradient = CAGradientLayer ()

        пусть maxWidth = max (self.bounds.size.height, self.bounds.size.width)
        let squareFrame = CGRect (origin: self.bounds.origin, size: CGSize (width: maxWidth, height: maxWidth))
        gradient.frame = squareFrame

        gradient.colors = цвета

        self.insertSublayer (gradient, at: 0)
    }
}

Пример использования расширения: 

  функция переопределения viewDidLoad () {
    super.viewDidLoad ()

    self.view.layer.configureGradientBackground (UIColor.purple.cgColor, UIColor.blue.cgColor, UIColor.white.cgColor)
}

цветов и градиентов 

 "цвет": {
  "тип": "узор",
   "цвет": " строка ",
   "backgroundColor": " строка ",
   "shape": " строка ",
   «размер»:  номер ,
   "pad":  номер }

где:

«цвет»: « строка »

Определяет цвет формы узора, используя название цвета.
или числовая строка спецификации.

«backgroundColor»: « строка »

Определяет цвет фона пространства шаблона с помощью
название цвета или числовая строка спецификации.

«shape»: « строка »

Определяет форму символа узора.Любой путь SVG
строка и все формы маркеров поддерживаются. Для получения информации о маркере
формы, см. Определение
Размер, граница, цвет, форма и поворот маркеров серии.

«размер»: номер

Размер в пикселях формы узора.

«колодка»: номер

Размер отступа между фигурами узора в пикселях.

Пример: использование паттерна для заполнения рамки диаграммы

Следующий запрос заполняет диаграмму
рамка с треугольниками, цвет которых — версия синего и чьи
размер 10 пикселей.Расстояние между треугольниками составляет 8 пикселей, а
цвет фона светло-серый:

 ГРАФИЧЕСКИЙ ФАЙЛ WF_RETAIL_LITE
СУММА AVE.COGS_US MDN.COGS_US
ПО PRODUCT_CATEGORY
В ФОРМАТЕ ГРАФИКА PCHOLD JSCHART
НА ГРАФИКЕ LOOKGRAPH VBAR
НА СТИЛЕ ГРАФИКА *
* GRAPH_JS
"наполнять": {
  "цвет":{
   "тип": "узор",
     "цвет": "# 00aeef",
     "backgroundColor": "светло-серый",
     "shape": "треугольник",
     «размер»: 10,
     "pad": 8}}
*КОНЕЦ
ENDSTYLE
КОНЕЦ

Результат:

Пример: использование строки пути SVG для определения шаблона

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

  • Команда moveto (M), которая перемещает
    к новой координате, определяемой парой чисел, следующих за
    М.
  • Линейная команда (L) перемещается из текущей позиции в новую.
    координируйте, проводя прямую линию по пути.

Несколько
Могут использоваться команды M и L.

следующий запрос использует строку пути SVG для определения 45-градусного
штриховка:

 ГРАФИЧЕСКИЙ ФАЙЛ WF_RETAIL_LITE
СУММА AVE.COGS_US MDN.COGS_US
ПО PRODUCT_CATEGORY
В ФОРМАТЕ ГРАФИКА PCHOLD JSCHART
НА ГРАФИКЕ LOOKGRAPH VBAR
НА СТИЛЕ ГРАФИКА *
* GRAPH_JS
"наполнять": {
  "цвет":{
   "тип": "узор",
   "красный цвет",
   "backgroundColor": "светло-серый",
   «форма»: «М-10, -10Л20,20»,
   "размер": 20}
       }
*КОНЕЦ
ENDSTYLE
КОНЕЦ

Результат показан на
следующее изображение:

Пример: использование рисунка для заполнения рядных стояков

Следующий запрос определяет шаблоны
чтобы раскрасить подступенки для каждой серии на вертикальной гистограмме:

 ГРАФИЧЕСКИЙ ФАЙЛ WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US REVENUE_US
ПО PRODUCT_CATEGORY
В ФОРМАТЕ ГРАФИКА PCHOLD JSCHART
НА ГРАФИКЕ LOOKGRAPH VBAR
НА СТИЛЕ ГРАФИКА *
* GRAPH_JS
"ряд":[
 {"series": 0, "color": {"type": "pattern", "color": "blue", "backgroundColor": "lightgray", "shape": "треугольник", "size": 10, "pad": 8}},
 {"series": 1, "color": {"type": "pattern", "color": "red", "backgroundColor": "beige", "shape": "plus", "size": 10, "pad": 8}},
 {"series": 2, "color": {"type": "pattern", "color": "green", "backgroundColor": "yellow", "shape": "house", "size": 10, "pad": 8}}
]
*КОНЕЦ
ENDSTYLE
КОНЕЦ

Результат:

Пример: использование узора для заполнения ломтиков пирога

Следующий запрос определяет шаблоны
чтобы раскрасить подступенки для каждой серии на круговой диаграмме:

 ГРАФИЧЕСКИЙ ФАЙЛ WF_RETAIL_LITE
SUM COGS_US
ПО ВСЕЙ КАТЕГОРИИ ПРОДУКТА
ВКЛ УСТАНОВКА ГРАФИКА АВТОМАТ.
В ФОРМАТЕ ГРАФИКА PCHOLD JSCHART
НА ГРАФИКЕ LOOKGRAPH PIE
НА СТИЛЕ ГРАФИКА *
* GRAPH_JS
"ряд": [
 {"series": 0, "color": {"type": "pattern", "color": "blue", "backgroundColor": "lightgray", "shape": "треугольник", "size": 10, "pad": 8}},
 {"series": 1, "color": {"type": "pattern", "color": "red", "backgroundColor": "beige", "shape": "plus", "size": 10, "pad": 8}},
 {"series": 2, "color": {"type": "pattern", "color": "green", "backgroundColor": "yellow", "shape": "house", "size": 10, "pad": 8}},
 {"series": 3, "color": {"type": "pattern", "color": "orange", "backgroundColor": "antiquewhite", "shape": "square", "size": 10, "pad": 8}},
 {"series": 4, "color": {"type": "pattern", "color": "lightgreen", "backgroundColor": "white", "shape": "arrow", "size": 10, "pad": 8}},
 {"series": 5, "color": {"type": "pattern", "color": "steelblue", "backgroundColor": "cyan", "shape": "fiveStar", "size": 10, "pad": 8}},
 {"series": 6, "color": {"type": "pattern", "color": "slateblue", "backgroundColor": "skyblue", "shape": "sixStar", "size": 10, "pad": 8}}
]
*КОНЕЦ
ENDSTYLE
КОНЕЦ

Результат:

Пример: использование узора для заполнения маркеров серии

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

 ГРАФИЧЕСКИЙ ФАЙЛ WF_RETAIL_LITE
СУММА AVE.COGS_US GROSS_PROFIT_US MSRP_US
ПО ВСЕЙ КАТЕГОРИИ ПРОДУКТА
В ФОРМАТЕ ГРАФИКА PCHOLD JSCHART
НА ГРАФИКЕ ЛОКГРАФ РАССЕЯЕТСЯ
НА СТИЛЕ ГРАФИКА *
* GRAPH_JS
"ряд": [
{"series": 0, "marker": {"size": 15}, "color": {"type": "pattern", "color": "blue", "backgroundColor": "lightgray", "shape ":" треугольник "," размер ": 10," площадка ": 8}},
{"series": 1, "marker": {"size": 20}, "color": {"type": "pattern", "color": "red", "backgroundColor": "beige", "shape ":" plus "," size ": 10," pad ": 8}},
{"series": 2, "marker": {"size": 30}, "color": {"type": "pattern", "color": "green", "backgroundColor": "yellow", "shape ":" house "," size ": 10," pad ": 8}}
]
*КОНЕЦ
ENDSTYLE
КОНЕЦ

Результат:

Цветовой Градиент — HitFilm — 13

Создает двухточечный линейный или радиальный градиент цвета.

  • Предустановка: Несколько предустановленных конфигураций представлены в этом меню для вашего использования.
  • Начальная точка: Используйте эти элементы управления, чтобы определить положение начальной точки градиента.
    • Позиция: Устанавливает положение начальной точки с использованием значений X (по горизонтали) и Y (по вертикали).
    • Использовать слой: Выберите другой слой на временной шкале с помощью этого меню, чтобы использовать положение выбранного слоя для управления положением начальной точки.Когда слой выбран, свойство Position выше действует как смещение от положения родительского слоя.
  • Конечная точка: Используйте эти элементы управления, чтобы определить положение конечной точки градиента.
    • Позиция: Устанавливает положение конечной точки с использованием значений X (по горизонтали) и Y (по вертикали).
    • Использовать слой: Выберите другой слой на временной шкале с помощью этого меню, чтобы использовать положение выбранного слоя для управления положением конечной точки.Когда слой выбран, свойство Position выше действует как смещение от положения родительского слоя.
  • Начальный цвет: Выберите начальный цвет для градиента. Вы можете использовать пипетку, чтобы выбрать цвет из слоя, или щелкнуть образец, чтобы открыть палитру цветов и выбрать любой цвет, который вам больше нравится. Вы также можете вручную ввести значения цвета для красного, зеленого и синего каналов.
  • Конечный цвет: Выберите конечный цвет для градиента.Вы можете использовать пипетку, чтобы выбрать цвет из слоя, или щелкнуть образец, чтобы открыть палитру цветов и выбрать любой цвет, который вам больше нравится. Вы также можете вручную ввести значения цвета для красного, зеленого и синего каналов.
  • Радиальный: Включите этот параметр, чтобы переключиться с линейного градиента на радиальный.
  • Ramp Scatter: Добавляет легкий шум в области градиента между цветами, что может помочь улучшить естественность.
  • Непрозрачность: Изменяет общую видимость эффекта градиента.0,0% полностью прозрачен, а 100,0% полностью непрозрачен.
  • Blend: Выберите режим наложения, используемый для объединения градиента с содержимым слоя, к которому он применяется.

Заполните фигуру цветом, градиентом или узором

Самый быстрый способ добавить цвет к фигуре — использовать быстрые стили. Щелкните фигуру, которую хотите изменить, нажмите Главная > Быстрые стили , а затем выберите один из цветов, любой из которых соответствует цветовой теме вашего рисунка.

Примечание: Кнопка быстрых стилей может не отображаться, если она развернута. На вкладке Home в группе Shape Styles щелкните More

выбрать цвет.

Добавить градиенты или узоры

Легче всего добавлять градиенты или узоры с помощью панели «Формат фигуры».

  1. Щелкните правой кнопкой мыши фигуру, которую хотите изменить, затем выберите Форматировать фигуру .

  2. Панель Format Shape обычно открывается по умолчанию с открытыми Fill & Line (как на этом рисунке). Щелкните Заливка .

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

  2. Сплошная заливка Выберите цвет и установите прозрачность — меньшие числа означают менее прозрачные, а более высокие числа — более прозрачные.

  3. Градиентная заливка Установите ориентацию и стиль градиента, цвета и то, как цвета меняются от одного к другому.

  4. Заливка узором Выберите тип узора, цвета, которые он будет использовать, и прозрачность узора.

Совет: Измените несколько фигур за раз, удерживая нажатой клавишу Ctrl и щелкая нужные фигуры.Если у вас есть фигуры в группе, их можно изменить одновременно, щелкнув группу.

Между прочим, это работает не только для форм. Эти же действия работают с контейнерами, выносками и текстовыми полями.

Примечание: Чтобы удалить всю заливку из фигуры, на панели Формат фигуры в разделе Заливка и линия щелкните Заливка > Без заливки .

Author: alexxlab

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *