Как создавалась Paletta

Привет, друзья! В этой статье я расскажу о проекте Paletta — это инструмент для конвертации цветов спиртовых маркеров разных брендов, он полезен как для любителей, так и для профессиональных художников и иллюстраторов, преподавателей и консультантов арт-магазинов. В этот проект мы вложили кучу сил и энергии на чистом энтузиазме. Мы — это я и мой парень. Разрабатывая его, мы узнали больше о теории цвета, а также изнанку рынка спиртовых маркеров. Инструмент абсолютно бесплатный, от художников художникам. Началось всё с простого вопроса и досужего любопытства…

TL;DR Это самая полная сравнительная таблица цветов для спиртовых маркеров, которая постоянно обновляется и сейчас насчитывает 1773 цвета среди таких брендов как COPIC, SKETCHMARKER, Сонет, Marvy Le Plume, TOUCH, W&N Promarker, FINECOLOUR, BeCreative. Она помогает сравнивать цвета и составлять оптимальные наборы палитр независимо от брендов. На интерактивной инфографике видно, что палитры разных брендов могут друг друга дополнять (пример: W&N Promarker + Сонет). Попробуйте попереключать названия и повращать её самостоятельно.

Как к нам пришла идея

По профессии я — художник-иллюстратор. Иногда я делаю мастер-классы по рисованию и использую в них маркеры конкретной марки — COPIC. Сейчас на рынке появилось большое кол-во брэндов спиртовых маркеров. Раньше же абсолютным эталоном считались маркеры COPIC (многим наверное знакомые), да они и сейчас остаются лидерами индустрии. В общем, мой мастер-класс (Рисуем портрет девушки и снежные хлопья спиртовыми маркерами) был сделан на них, но чтобы облегчить задачу тем, кто будет его проходить, я попробовала вручную найти аналоги в ещё двух наиболее популярных брендах. Делала на глаз, и в целом получилось сносно, благо палитра нужных оттенков была всего цветов в 15 (что для портрета немного). Это увидел мой парень, и его как инженера осенил, а потом и глубоко озадачил вопрос, а нельзя ли этот процесс сравнения как-то автоматизировать, а не пучить глаза до красна всякий раз, когда придётся сопоставлять цвета? В целом я идею сразу подхватила, поскольку у всех рисующих маркерами людей есть одна боль — брендов много, цветов много, как свести их все к какому-то общему сравнительному знаменателю? Как найти нужные цвета в любом из брендов? Вот список наиболее популярных случаев из этой серии:

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

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

Первые шаги: сбор данных

Идея нас очень вдохновила. Аналогов подобного инструмента фактически не было. Максимум что было — статичные схемы-таблички в виде JPEG файлов, ограниченные в сравнении парой брендов. Окей, нам нужны все цвета всех доступных нам брендов существующих маркеров. Сразу решили брать именно живую выкраску образцов вместо таблиц-пантонов с сайтов производителей, чтобы минимизировать искажения. Это означало, что придётся искать маркеры везде, от арт-магазинов до личных коллекций. Повезло, что по роду деятельности я знаю лично некоторых хозяев небольших арт-лавок, с некоторыми брендами, такими как «Невская Палитра», дружу и сотрудничаю, а в остальных случаях мы просто дружелюбные и коммуникабельные ребята. 99% консультантов в арт-шопах шли нам навстречу и более того, были тоже очень заинтригованы нашим проектом! И спасибо большое, что разрешали часами торчать и выкрашивать образцы маркеров.

Хочу упомянуть тут всех, кто нам помог — магазины: «Передвижник» на Чёрной Речке, «Чёрная Речка» на Моховой, «Вик-Арт» на Садовой, «Малевич» на Жуковского. Именно там нам удалось выкрасить большинство брендов, таких как COPIC, SKETCHMARKER, BeCreative, Сонет, FINECOLOUR, W&N Promarker и другие.

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

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

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

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

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

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

Поиск алгоритма сравнения

Выбирая алгоритм, мы по наивности взяли среднее значение цвета выкраски в RGB и перенесли его в пространство представив цвет как координаты XYZ для точки. Чем меньше дистанция между точками, тем цвета больше похожи. Алгоритм оказался грубым, и хоть и давал какие-то результаты, но некоторые цвета совсем не совпадали. Пришлось погрузиться в тему глубже, и к счастью, выдумывать ничего не пришлось: по итогу мы взяли один из алгоритмов Delta E, разработанный Международной комиссией по освещению CIE (wiki/Формула цветового отличия). Цветовое пространство CIEXYZ, воспринимаемое обычным человеческим глазом, универсально и независимо от среды, а RGB пространство подгонятяется под конкретное устройство, на котором отображается цвет. Конкретный алгоритм максимально эффективно решает задачу сравнения цвета.

Пользовательский интерфейс

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

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

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

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

Тестирование

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

Небольшая проблема всё-таки вылезла: она касалась флуоресцентных цветов. Дело в том, что «флюры» светятся на бумаге, но при оцифровке эффект свечения не получается сохранить: они просто становятся обычными цветами и в момент сравнения пытаются найти пару среди всех цветов. Этот момент пришлось «захардкодить» — руками прописать их соответствие друг другу.

Брендинг

Идея названия Paletta пришла к нам сразу. Название происходит от «очеловечения» английского слова palette (английский перевод — палитра) в женское имя, в нашем представлении наподобии древнегреческой музы, покровительницы искусств. Кстати, обнаружила, что как таковых муз-покровительниц именно арта в Древней Греции не существовало, всё связано лишь с искусством слова и перформанса. В те времена изобразительное искусство котировалось больше как ремесло, произведения создавались по образу и подобию, в грубую путём копирования, а вот поэзия, драма, всякие театральные вещи, поскольку опирались на тонкие материи, те же эмоции, считалось, нуждались в дополнительной божественной мотивации.

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

Открытая, но ненавязчивая улыбка — Paletta должна стать проводником и помощником, который сэкономит время и нервы человека, пытающегося разобраться в широком рынке спиртовых маркеров. А поскольку маркеры как художественный инструмент продолжают набирать популярность — ими пользуются и для рисования реалистичных портретов и пейзажей, и для фэшн-иллюстрации, и для рисования комиксов — Paletta поможет начинающим художникм быстрее войти в индустрию, а мастерам — эффективнее взаимодействоать с выбранным инструментом. Как пример вот моя портретная работа, фанарт по сериалу «Чёрные Паруса» (Black Sails):

Итоги

Текущую версию Paletta назвать финальной никак нельзя, мы будем дорабатывать похожесть, добавлять новые бренды, расширять функционал. Мы открыты и рады отзывам — если вы пользуетесь и у вас есть замечания, будем рады услышать их hello@tezee.art