Маркирайте и ужасния, ужасен, няма добър, много лош начин да преодолеете скициращия символ с всеки RGB цвят

Като продуктов дизайнер и илюстратор в Circle, моя работа е да управлявам и отглеждам нашия набор от персонализирани икони. Създадох всяка икона в съответствие със системата Steve Stone, очертана в Icon Sets с цветно преобръщане в Sketch.

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

Една малка извадка от нашите символи и цветни символи на маркатаВсеки символ на иконата съдържа екземпляр от цветен символ, маскиран във векторната форма на иконата

Чудесно е ... с едно предупреждение.

Понякога дизайнер трябва да се осмели извън палитрата на марката. Тъй като няма налична очна капкомер или цвят, те неизбежно отделят иконата от нейния символ и просто я оцветяват директно. Това запълва файла и отменя предимствата на символите.

Наскоро открих решение: начин да превърнете символа в отмяна на RGB цвят. Това е абсурдна машина на Рубе Голдбърг, но тя свършва работата. Мислех, че колегите ми ще се подиграят с толкова дълбоко свръх инженерство, но за моя изненада, те приеха това и ме насърчиха да го споделя.

Моето решение разчита на това как са съставени RGB цветовете. Ако сте RGB и шестнадесетичен цветен професионалист, прескочете напред. В противен случай ето един бърз грунд:

RGB цветове и шестнадесетична

RGB е добавъчен цветен модел. Когато добавите трите му първични - червено, зелено и синьо - получавате бяло, докато липсата на цвят води до черно. Уникалната комбинация от червени, зелени и сини канали на всеки RGB цвят може да бъде записана като шестнадесетичен шестнадесетичен код.

Шестнадесетичен код всъщност е серия от три двойки, представляваща съответно интензитета на червено, зелено и синьо. Всяка двойка има 256 възможни нива на интензитет, от нула до 255. Тези нива са представени като шестнадесетична, система, изградена около шестнадесет блока.

Преброяване в шестнадесетична точка. Лесно като 00, 01, 02!

Чисто, червено с пълна интензивност се записва като # FF0000, тъй като първата двойка (червеният канал) е максирана, а зеленото и синьото са нула. По същата логика # 00FF00 е чисто зелен, а # 0000FF е чисто син.

Всеки чисто червен, зелен и син цвят.

#FFFFFF е чисто бяло, защото всеки канал е на своя максимум, докато # 000000 е чисто черен, защото всеки канал е на нула.

Обратно към скица

Методът за оцветяване на иконата на Стив Стоун съществува на първо място, тъй като Sketch не ви позволява да заменяте цветово запълване в символ, но ви позволява да замените един вложен символ за друг със същия размер. Той избягва ограничението на Sketch, като прави символи за всички цветове, от които смятаме, че някога ще се нуждаем. Кутия пастели.

Но какво, ако вместо това направихме символи за всяка част от цвят? Ако разбием рецепта за RGB в нейните червени, зелени и сини компоненти, бихме ли могли да я съберем отново?

Време за експерименти!

Да вземем цвят # FF88CC, хубаво наситено розово. Червената му стойност (FF) е обозначена изцяло, зелената (88) е средна, а синята (CC) е близо до върха.

Сега ще създадем три форми, всяка от които представлява един канал. Нашите правоъгълници са оцветени # FF0000, # 008800 и # 0000CC.

Сега да ги върнем заедно. Не можем просто да подреждаме слоевете и да получим # FF88CC; имаме нужда от режим на смесване, за да ги смесим правилно. Полека прави трика! Ето как работи, според ръководството за употреба на Photoshop:

[Lighten] разглежда информацията за цвета във всеки канал и избира основния цвят или цвят на сместа - който е по-светъл - като резултат на цвета. Пикселите, по-тъмни от цвета на сместа, се заменят, а пикселите, по-светли от цвета на сместа, не се променят.

Подобно на среброто, направено от гоблин, светлината поема само това, което го прави по-силен. Той отчита всички подредени слоеве и избира само най-високата стойност във всеки цветен канал. В нашия случай FF, 88 и CC са по-високи от 00. Тези високи стойности печелят и презаписват нулите, което води до # FF88CC! Най-важното е, че това все още работи, след като слоевете се преобразуват в символи. Повече за това малко ...

И последно нещо: не знаем какво ще живее под тези слоеве сред природата. Ако например бяха поставени отгоре на #FFFFFF, просто ще видите бяло, защото двойките FF ще анулират всичко останало. За да избегнем този проблем, се нуждаем от слой непрозрачен # 000000 по-долу, за да действаме като бариера.

Така че сега, когато можем да пресъздадем цвят от символи, представляващи неговите червени, зелени и сини канали, просто ни трябват достатъчно символи, които да представят всеки възможен цвят!

Всеки… възможно… цвят…

Само 768 прости стъпки ...

Създадох 256 червени символа, покривайки всяка стойност от # 000000 до # FF0000, след това направих същото за зелено и синьо. Всички червени символи са с еднакъв размер, за да бъдат сменяеми. Зелените са с друг размер, а сините - още. Тези 768 символа живеят в специализирана библиотека, наречена RGB Swatch Library, за да не ги затъва основната библиотека на марката.

Накрая добавих символ, цветове / Направи си модел / шестнадесетичен код, към нашата библиотека на марката. Той има черен фон запълване и екземпляр от символа AA на всеки канал, който да служи като по подразбиране. Тези три инстанции са зададени на Lighten.

Този модел направи сам е със същия размер като символите на нашата марка, така че е достъпен като отмяна навсякъде, където се използват.

Сега, когато трябва да прецъфтим символ извън палитрата ни на марката, просто избираме мозайката „Направи си сам“ и изписваме шестнадесетичния код с отмяна.

Бонус: Numeric RGB цветове

О, и само за лайна и хихикания, аз също създадох набор от swatch за избор на цвят според неговите цифрови RGB стойности, за разлика от шестнадесетичен. В крайна сметка, след като направите 768 цветни символа, какво е още 768?

Те са просто дубликати на шестнадесетичните символи, преоразмерени до уникални размери и преименувани на 0–255, вместо на 00 – FF. # FF88CC, който направихме преди? Сега е 255,137,205 Fun!

Готови ли сте да използвате тази лудост?

Искате ли да използвате този абсурден метод на оцветяване във вашия работен процес? Не се притеснявайте, не е нужно да правите 1536 цветни символа. Можете да вземете назаем моите. Аз съм дизайнерски мазохист, а не дизайнерски садист. Ето какво да направите:

  1. ️ ️ ️ Изтеглете файловете ️ ️ ️
  2. Отворете ZIP, за да намерите RGB Swatch Library и DIY Swatch символи.
  3. Добавете RGB Swatch Library във вашите библиотеки на Sketch, след което го оставете. Никога не е нужно да го отваряте.
  4. Отворете символите DIY Swatch и копирайте символите DIY RGB & шестнадесетична собственост в собствената си марка библиотека. Преоразмерете символите до същия размер като вашите други цветови символи.
  5. Добре сте да отидете. Наслади се!

Кредити и зад кулисите:

Любопитно как направих всички тези фишове? За щастие, не беше изцяло ръчен. Ето как продължих по този въпрос:

  1. В Adobe Illustrator създадох два квадрата 10 на 10 пиксела, единият оцветен # 000000, а другият # FF0000 и ги поставих на разстояние 2540 пиксела.
  2. Използвах инструмента Blend, за да създам 254 междинни стъпки между тях. Това направи всички цветови увеличения моментално.
  3. Дублирах този комплект два пъти, заменяйки крайните цветове съответно с # 00FF00 и # 0000FF. С всичките 768 направени цветови стъпки избрах групите от смеси и ги разделих на отделни форми с Object> Expand.
  4. Копирах и ги залепих в Sketch, след което използвах плъгин, наречен Batch Create Symbols, за да ги превърна в символи в насипно състояние. Направих това за всеки набор канали поотделно, за да избегна смесването на цветовете си.
  5. Символите все още бяха всички в дълги редове, така че внимателно ги подреждах в решетки (с 16 символа на ред и колона), като внимавах да не объркам моята поръчка.
  6. Избрах всички символи в първата колона на всеки набор от цветове и с приставката Rename It ги преименувах на „0“. Нарекох следващите колони от 1 до 9, след това последните шест от А до Е.
  7. Избрах всички символи в първия ред на всеки набор от цветове. С Rename It добавих „0“ преди името на всеки символ и продължавах с всеки следващ ред, докато изложих всички шестнадесетични двойки, от 00 до FF.
  8. Избрах всички символи и проверих Регулиране на съдържанието при промяна на размера.
  9. Избрах всички червени символи и ги зададох на уникален размер (7x9) и зададох уникални размери и за останалите цветове.

Милион благодарение на Стив Стоун за неговия метод за оцветяване на икони, Пол Демерс за Batch Create Symbols и Родриго Соарес за преименуването му.

Версия на тази статия също се появява на моя уебсайт.