предисловие
С наступлением эры искусственного интеллекта технологии запустили игру с искусством. Баннер, разработанный продуктами искусственного интеллекта некоторых сокровищ, уже доминировал на экране «Double Eleven». Баннеры, разработанные с помощью машинного интеллекта и применяемые в проектах электронной коммерции, действительно могут значительно сократить затраты человеческих ресурсов. При этом автоматическое проектирование и генерация баннера машиной обеспечит возможность его персонализации, что позволит добиться эффекта тысяч людей и тысяч лиц.Среди многих звеньев в создании баннеров с помощью искусственного интеллекта интеллектуальное сопоставление цветов является одной из трудностей. Во-первых, подбор цветов оказывает большое влияние на узнаваемость и выразительность дизайна, и с первого взгляда становится ясно, соответствуют ли результаты подбора цветов эстетическим стандартам. Во-вторых, искусственное сопоставление цветов требует сильного мастерства и определенного накопления опыта, что является относительно трудоемким и трудоемким звеном в дизайне баннеров.Особенно сложно использовать машины для восстановления дизайнерских идей и даже предоставления нескольких цветовых схем. для того же баннера.
В этой серии статей будут обсуждаться решения для интеллектуального подбора цветов Banner. В этой статье основное внимание уделяется структуре схемы и процессу разработки в ней правил сопоставления цветов.
Схема: цветовая палитра и правила
наслоение элементов
Иерархия является важным понятием в дизайне, и разделение иерархии полезно для четкого отображения и локализации проблем. Возьмите баннер в Gooseman Premium в качестве примера. Вышеприведенное изображение получено путем наслоения элементов в нем. Снизу вверх, как показано на рисунке, уровни Баннера следующие:- Фоновый слой: относится к нижнему сплошному цветному фону, обычно такому же или похожему на основной цвет продукта или IP.
- Слой фоновой текстуры: относится к текстуре, которая изменяет фон, который обычно ближе к фону.
- Фоновый декоративный слой: относится к активной фоновой атмосфере, обычно цвет фонового декоративного слоя аналогичен.
- IP-уровень: относится к карте IP-изображения.
- Слой модификации переднего плана: из-за большой площади изображения IP модификация переднего плана используется для разделения области и частичного блокирования IP для выделения продуктов и текста. Слой модификации переднего плана в этой статье не обсуждается.
- Декоративный слой продукта: относится к декоративному изображению на задней стороне, которое используется для выделения продукта.
- Продукт: Относится к карте продукта.
- Текст: Относится к тексту, такому как заголовки.
При построении схемы есть две схемы: с использованием цветовой палитры или с использованием правил цвета.
Палитра
Сегодня в Интернете существует множество цветовых палитр. Например, на Dribble, популярном веб-сайте для дизайнеров, каждая загруженная дизайнерская работа будет автоматически извлечена, и будет создана цветовая палитра. Используйте эти палитры для цветовых схем баннеров или для аккуратного и эффективного решения:- После извлечения репрезентативного цвета продукта сравните репрезентативный цвет продукта с цветом в существующей библиотеке палитр (взято из Dribble), чтобы найти соответствующую цветовую палитру.
- Палитры в Dribble отсортированы по цветовой области. При использовании палитры после игнорирования белого и черного (и приблизительного белого и черного) используйте цвета по очереди, чтобы раскрасить Баннер от нижнего слоя к верхнему слою.
На изображении выше показана цветовая палитра работы в Dribble.Цветовая схема, полученная с помощью описанного выше процесса, эффект сопоставления цветов неудовлетворителен, как, например, эта работа, которая показывает странность и путаницу. Проблема может быть сведена к следующим двум пунктам:
- Внутренние отношения между цветами на палитре не сортируются, а сортируются только по областям.
- Использование размера области в качестве отношения отображения между цветом палитры и элементом баннера слишком просто и грубо.
Цветовые правила
Вышеупомянутых проблем можно избежать, используя правила сопоставления цветов, основанные на отношениях сопоставления цветов. Когда дело доходит до подбора цветов, я должен упомянуть библиотеку классов Palette, предоставленную Google в Android Material Design. Роль этой библиотеки заключается в извлечении набора цветов из изображения для использования в элементах интерфейса для создания иммерсивного интерфейса. В интерфейсе музыкального программного обеспечения, как показано на рисунке ниже, цвет панели, аналогичный цвету панели управления, и цвет кнопки с высокой контрастностью динамически извлекаются из обложки альбома.Эта группа цветов, извлеченная из библиотеки палитр, делится на шесть типов: яркий, темный яркий, светлый яркий, приглушенный, темный темный и светлый темный. Вы можете установить цвет интерфейса в соответствии с правилами, такими как: темный и тусклый, как цвет панели, темный, как цвет панели управления, и яркий, как цвет кнопки. И, таким образом, обеспечить разумное соответствие. Также темные и светлые цвета обеспечивают приемлемый контраст и часто используются для фона и текста. JS-реализация этой библиотеки — Vibrant.js. При анализе исходного кода будет обнаружено, что цвета в изображении классифицируются и преобразуются по определенным правилам. Это демонстрирует возможность преобразования цвета по правилам и применения его к нескольким товарным изображениям или изображениям интеллектуальной собственности.
Набор цветовых схем доступен через правило, встроенное в Vibrant.js. Если существует несколько разумных правил, для каждого товара или шаблона ИС может быть создано несколько схем. Разнообразие результатов можно увеличить, создав базу правил.
Сравнивая использование палитр, можно сделать следующие выводы:
| палитра | Цветовые правила | |
| Сопоставление отношений | Определение отношений по «области» | Он получается из анализа взаимосвязей элементов на каждом уровне. |
| получить источник | Палитры из Интернета нельзя использовать напрямую | Правила оформления экспертами (дизайнерами) |
| возможность повторного использования | Палитры нельзя использовать повторно | Цветовые правила можно использовать повторно |
Видно, что использование правил сопоставления цветов: на основе иерархической взаимосвязи элементов может сделать результаты стабильными и безопасными, источник получения правил может быть преобразован в сети через иерархические связи в дополнение к тому, что создается экспертами; в то же время правило можно повторно использовать в различных товарах. В случае шаблонов IP меньшее количество правил сопоставления цветов может удовлетворить большинство требований баннера.
системная структура
На основе приведенного выше анализа может быть создана системная структура с высокой масштабируемостью, основанная на правилах сопоставления цветов. Как показано на рисунке ниже, горизонтальное направление — это основной процесс интеллектуального сопоставления цветов, а остальные — вспомогательные процессы.
Схема в основном состоит из четырех частей, а именно: выбор цвета изображения, выбор правила, создание схемы и замена цвета:
- Выбор цвета изображения: количественно определите основной шаблон изображения баннера (например, изображение товара, изображение IP-адреса и т. д.) и извлеките репрезентативный цвет. Существует множество методов извлечения цвета темы изображения, например, Median Cut на основе алгоритма квантования, метод Octree и т. д., метод K-Means на основе кластеризации и т. д. Упомянутый выше Vibrant.js основан на алгоритме квантования и может также использоваться для выбора цвета изображения.
- Выбор правила: ИИ автоматически выбирает подходящие правила в соответствии с репрезентативным цветом и стилем. Хотя правила подбора цветов в определенной степени универсальны, у разных цветов все же есть свои преимущества и недостатки. Различные правила сопоставления цветов создают разные стили сопоставления цветов. Путем оценки и обучения репрезентативного цвета и стиля продукта, а также результатов, основанных на правилах сопоставления цветов, получаются наилучшие правила, соответствующие различным цветам и стилям. В дополнение к ручному обучению, обучение также можно тренировать с помощью щелчков баннера в реальном использовании в качестве обратной связи.
- Генерация схемы: Генерация схемы является основной частью системы. Установление эффективных правил сопоставления цветов и создание разумной цветовой схемы напрямую определяют эффект результата.
- Замена цвета: В соответствии с соответствующим соотношением между цветами в цветовой схеме и элементами в Баннере элементы в Баннере заменяются цветами, после чего цветовое сопоставление завершается. Замена цвета связана с материалом, а материал в виде SVG поддерживает прямую замену цвета. Для материалов в таких форматах, как PNG, требуется метод замены пикселей при обходе холста.
База правил обеспечивает хорошую расширяемость системы. Далее в основном обсуждается ключевая часть системной архитектуры этой схемы: генерация схемы.
Цвет: Генерация схемы
Генерация схемы является ядром интеллектуальной системы согласования цветов. Есть два важных момента, выбор цветовой модели и правила, основанные на цветовой модели.
цветовая модель
В повседневном дизайне и разработке пользовательского интерфейса шестнадцатеричное значение цвета (Hex) является нашим широко используемым методом для представления цвета. Шестнадцатеричное значение цвета на самом деле является выражением модели RGB. Хотя использование Hex очень удобно, модель RGB Academic Fan не подходит при разработке цветовых решений. RGB разработан на основе принципа смешивания цвета и света и использует суперпозицию красного, зеленого и синего света для описания цветов.Хотя он соответствует принципу восприятия цвета колбочками и принципу цветопередачи дисплеев, это любимец машин, но он противоречит человеческому восприятию.
По сравнению с моделью HSL легко описывать цвет, используя в качестве компонентов оттенок, насыщенность и яркость, что позволяет выделить цвет по восприятию и восстанавливает человеческое достоинство.
Стоит отметить, что у HSL есть брат-близнец HSB (также известный как HSV), который занимает цветовую палитру основного программного обеспечения для дизайна, такого как Photoshop, и более знаком дизайнерам, но имеет бунтарский характер. По сравнению с HSL, который соответствует своему точному определению, при насыщенности в HSB 0% он должен быть равноглубоким серым, но белым, при яркости 100% он должен быть чисто белым, но сам цвет . Хотя эта корректировка упрощает область интерфейса для дизайнеров для выбора цветов в программном обеспечении для проектирования, она не соответствует определению компонентов, также вызывает двусмысленность и не способствует расчету правил, поэтому она не используется в проект.
Учитывая, что HSL определяет стандарт (поддерживаемый стандартом W3C) и использует в качестве компонентов оттенок, насыщенность и яркость, легко построить правила сопоставления цветов. Поэтому мы решили построить правила с HSL в качестве цветовой модели. Таким образом, любой цвет C можно преобразовать в массив, состоящий из трех компонентов (H, S, L). Цветовые правила устанавливаются компонентами для применения к другим цветам.
Цветовые правила
С помощью HSL человеческая интуиция может использоваться для описания цветов, а также могут быть определены правила сопоставления цветов, а затем могут быть сформированы правила сопоставления цветов.
Фактически в области дизайна постепенно сформировался ряд методов подбора цветов и правил подбора цветов с отличительными характеристиками. Эти методы и правила могут быть преобразованы в правила с помощью модели HSL для формирования складов.
В качестве примера возьмем оттенок H-компонента в модели HSL. Основываясь на оттенке, поле дизайна может выполнять сопоставление цветов в соответствии с кругом оттенка (оттенок представлен кольцом) и имеет ряд правил. Например, общие методы подбора цветов:
- Монохроматические цветовые схемы: используйте только один цвет при оформлении или используйте темные и светлые оттенки определенного оттенка.
- Аналоговое сопоставление цветов: используйте три цвета рядом друг с другом на цветовом круге в качестве цветовой схемы.
- Комплементарное сопоставление цветов: используйте два цвета, которые расположены напротив друг друга на цветовом круге, чтобы они совпадали.
- Трехцветное сопоставление цветов: используйте три цветовые комбинации, расположенные под углом 120 градусов друг к другу на цветовом круге.
Видно, что при подборе цвета дизайнер находит подходящий цвет, поворачивая угол круга оттенка, а угол поворота имеет установленный закон и может использоваться повторно. Учитывая этот принцип, мы можем построить следующие правила:
Когда дизайнер использует желтый (C1) в качестве репрезентативного цвета, вращая и изменяя его компоненты (H1, S1, L1), формируется набор цветов, подходящих для разных слоев: светло-желтый C11 (H11, S11, L11), светлый желтый Оранжевый C12 (H12, S12, L12), Оранжевый C13 (H13, S13, L13).
Запишите изменения между ними, чтобы сформировать правило: (ΔH11, ΔS11, ΔL11), (ΔH12, ΔS12, ΔL12), (ΔH13, ΔS13, ΔL13), где: ΔH11=H11-H1 и так далее.
Когда для нового продукта или IP необходимо сгенерировать соответствие цвета баннера, например: при обнаружении продукта с зеленым (C2) в качестве репрезентативного цвета, вы можете внести такое же изменение в его компоненты (H2, S2, L2), чтобы получить цвет : зеленый C21 (H21, S21, L21), светло-зеленый C22 (H22, S22, L22), желтый C23 (H23, S23, L23). Где: H21 = H2 + ΔH11 и так далее.
Это представляет собой правило сопоставления цветов, основанное на изменениях компонентов.
Однако на практике встречается ситуация, когда значение цвета переполняется. То есть числовой диапазон H составляет 0°~360°, а числовой диапазон S и L составляет 0°~100°. Поскольку одно и то же правило используется для разных цветов, если вы используете цвет со средней яркостью и насыщенностью для создания правила, но используете его для цвета с высокой или низкой яркостью и насыщенностью, значение цвета будет переполняться, поэтому явление переполнения чаще. Как показано на рисунке ниже, согласно правилам сопоставления цветов, установленным фиолетовым, при использовании розово-желтого его яркость и насыщенность переполняются в разных слоях, так что правила использовать нельзя.
После сравнения фактического эффекта и сотрудничества с дизайнером, учитывая ситуацию с переполнением, правила обрабатываются следующим образом:
- Оттенок: поскольку оттенок является круговым отношением, фактический градус можно рассчитать по кругу, когда он превышает 360° или меньше 0°. Например, 370° на самом деле 10°, а -10° на самом деле 350°.
- Насыщенность и яркость: после фактического сравнения и опыта дизайнера было обнаружено, что богатство цветового соответствия определяется оттенком, а оттенок отклонения соответствует правилам дизайна. Насыщенность и яркость обычно используются в дизайне для регулировки разницы между разными оттенками или для создания атмосферы. Значения насыщенности и яркости должны быть записаны и настроены непосредственно на это значение, а не на изменение значений.
После настройки окончательные правила сопоставления цветов: (ΔH11, S11, L11), (ΔH12, S12, L12), (ΔH13, S13, L13); когда другие цвета, такие как C2, используются в качестве репрезентативных цветов, путем расчета H и объединение S, L напрямую корректируется до соответствующего значения для получения: C21 (H21, S11, L11), C22 (H22, S12, L12), C23 (H23, S13, L13), где: H21 = H2 + ΔH11, и скоро.
После настройки, как показано на рисунке выше, розовый цвет может дать лучший результат сопоставления цветов с помощью правил. Таким образом, создается относительно надежное правило сопоставления цветов. В свою очередь, дизайнер может создать базу правил.
Настройка модели
В процессе фактической реализации, после серии сравнений, постепенно выявились недостатки модели HSL.
Как показано на рисунке слева, когда оттенок и яркость фиксированы, оптимальное значение смещения угла поворота аналогичного оттенка ищется для 12 одинаково разделенных оттенков. После сравнения обнаруживается, что угол поворота колеблется, что указывает на то, что одно и то же правило угла поворота нельзя широко применять к другим оттенкам.
На картинке справа нужно исправить оттенок и насыщенность, отрегулировать только яркость и найти наилучшее соответствие для двух цветов одного оттенка, но разных оттенков. Например, для красного, когда яркость цвета фона 60%, а цвета текстуры 48%, наиболее комфортно. Соотношение между двумя яркостями также кажется дрожащим и не фиксируется на одном и том же значении. Объясните, что ту же настройку яркости нельзя широко применять и к другим оттенкам.
Причина этого в том, что значение цвета в HSL все еще недостаточно «очеловечено». Глядя на его оттенок, он не соответствует восприятию невооруженным глазом. Разверните цветовой круг, как показано ниже, и посмотрите на цветовой круг HSL справа: желтая область очень яркая, а сине-фиолетовая область очень темная. Даже при сортировке по яркости возникают другие проблемы визуального восприятия, что затрудняет поиск правил. Это снижает возможность повторного использования правил.Для одного и того же стиля необходимо создать несколько правил для разных ситуаций.
В ходе поиска решений мы обнаружили модель L*C*h, предложенную Международной комиссией по освещению (CIE), авторитетом в области науки о свете и цвете. Модель L*C*h хорошо коррелирует с тем, как человеческий глаз воспринимает цвет, устраняя несоответствия в восприятии человеческого глаза. Как показано в левой части рисунка выше, L*C*h более постоянна, чем модель HSL, когда насыщенность равна 100%, а яркость равна 60%. Более того, по сравнению с моделью L*a*b того же происхождения, она имеет тот же режим экспрессии, что и модель HSL, то есть в качестве компонентов используются скорректированные оттенок, насыщенность и яркость. Следовательно, модель L*C*h можно использовать для замены или дополнения модели HSL, чтобы улучшить обширную проверку правил сопоставления цветов.
разное
На предыдущих шагах необходимо выполнить преобразование значения цвета. Часть преобразования значения цвета должна поддерживать преобразование между HEX, RGB, HSL, L*C*h. Используя Chroma.js, можно легко добиться вышеуказанного преобразования.
На основе приведенных выше правил дизайнер создает небольшое количество правил и сохраняет их в базе правил для поддержки соответствия цветов баннера. В то же время, обогащение большего количества правил и формирование большего количества правил стиля значительно улучшит разнообразие результатов сопоставления цветов.
Эпилог
Автоматически генерируйте баннер, и интеллектуальное сопоставление цветов является его неотъемлемой частью. В этой статье описывается метод создания цветовых схем на основе правил сопоставления цветов. Все только началось, и мы последовательно запустим извлечение цвета, выбор интеллектуальных правил на основе ИИ, раскраску баннера и другие части, так что следите за обновлениями.