Изграждане на рамка за цветова палитра

Как да определите рамка от цветове, докато изграждате цветова палитра за вашата марка

Цветът е един от най-важните елементи в системата за дизайн на марка / продукт. Мозъците ни са програмирани да отхвърлят както под, така и над стимулираща информация, така че е много важно да създадем цветова палитра, която предоставя както визуален интерес, така и чувство за ред.

Вярвам, че изграждането на определен набор от системи / правила е важно, когато започнете да проектирате нещо. Цветовете са подмножество на DLS (Design Language System) на марката и това е една от основните области, където дизайнерите пропускат да създадат определен набор от правила за използването на цветовете.

„Дизайнерските системи предоставят удобна, централизирана и развиваща се карта на известните продуктови територии на марката с насочващи указатели, които да ви помогнат да изследвате нови региони.“ ~ Крис Месина, бивш Uber

В тази статия ще обсъдим някои техники за определяне на набор от правила за генериране на цветови вариации, които могат да бъдат мащабирани към по-широк спектър на използване и също така могат да се прилагат за всяка палитра от марки в бъдеще. Можете да изберете някоя от тези техники или да ги комбинирате, за да създадете своя собствена.

Да започваме

Ето списък с няколко свойства на цветовете, които ще използваме в пълния си потенциал за създаване на цветови вариации:

  • Нюансът е цвят (син, зелен, червен и т.н.).
  • Хромът е чистотата на даден цвят (висок цвят няма добавени черно, бяло или сиво).
  • Наситеността е каква част от даден оттенък е налична (по-ниска наситеност с по-малък оттенък и по-близка до бялата).
  • Яркост / стойност се отнася до това колко светъл или тъмен е цвят (тъмен с ниска яркост / стойност).
  • Непрозрачност се отнася до това колко прозрачен или непрозрачен е цвят (висока прозрачност с ниска непрозрачност).
  • Тоновете се създават чрез добавяне на сиво към цвят, което го прави по-тъп от оригинала.
  • Сенките са създадени чрез добавяне на черно към цвят, което го прави по-тъмен от оригинала.
  • Нюансите са създадени чрез добавяне на бяло към цвят, което го прави по-светъл от оригинала.
Обобщение на цветните свойства. Ще използваме комбинация от тези свойства, за да генерираме цветови вариации. Изтеглете версията за печат10-точкова рамкова решетка за разбиране на цветовите свойства

Рамковата мрежа

Горната графика показва връзката между Яркост, Непрозрачност, нюанси, тонове, нюанси и хром за определен оттенък. Тази графика е създадена с помощта на 10-точкова скала. Това означава, че непрозрачността на цвета варира с 10% по оста X, а яркостта варира с 10% по оста Y.

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

Използвал съм Sketch App , за да създам рамковата решетка, но една може да създаде същото в други дизайнерски инструменти като Photoshop / Illustrator / Figma / Gimp / и т.н. Ще използваме популярната в целия цвят система HSB Color.

Вижте изображението по-долу, докато следвате стъпките по-долу:

Стъпка 1. Изберете Базов оттенък. Създайте квадрат 50 x 50 px с този нюанс. Ето например, избрах син оттенък (H 212, S 67, B 89).

Стъпка 2. Създайте бяла квадратна плочка с размери 10 x 10 px (H 0, S 0, B 100).

Стъпка 3. Дублирайте тези бели плочки (5 реда, 5 колони), така че да покрива целия основен квадрат от стъпка 1.

Стъпка 4. Намалете непрозрачността на всяка колона от бели плочки с 25% отляво надясно.

Стъпка 5. Намалете яркостта на всеки ред бели плочки с 25% отгоре надолу.

Ето файла на скицата на горепосочените стъпки

Така че сега имате основна рамкова мрежа. Ако сте последвали правилно стъпките, ще имате цветна решетка, подобна на тази, показана на изображението по-горе в Стъпка 5. Ще използваме тази рамкова решетка, за да научим някои методи за генериране на нови цветове.

За да визуализирам по-добре цветовите вариации, използвах още 3 основни нюанса като примери в методите по-долу. Очевидно можете да изберете вашите собствени цветове.

1. Метод с нюанс на тонален нюанс

Изтеглете Sketch файла

Този метод е най-често използваният, поради своята простота. Основната рамкова мрежа, която създадохте по-горе, беше генерирана с помощта на този метод. Непрозрачността и яркостта на белите плочки над основния оттенък, съответно варира от 100% до 0% (отляво надясно) и 0% до 100% (отдолу нагоре).

Темата за цвета от дясната страна беше създадена с помощта на нашите 3 основни нюанса (споменати по-горе) и избиране на стойностите на непрозрачност и яркост от централната колона в лявата страна (обозначена със стрелка).

2. Метод на смесване на наслагване

Изтеглете Sketch файла

При този метод използваме същата основна рамка и променяме режима на смесване на белите плочки на Overlay. Това създава красива Hue разлика в цялата мрежа.

3. Метод за смесване на мека светлина

Изтеглете Sketch файла

Подобно на метод №2 Overlay Blending, тук променяме режима на Blending на белите плочки на Soft-Light. Това създава красива разлика на насищане в цялата мрежа. След това избираме всички тези бели плочки и ги дублираме два пъти. Това създава по-силна разлика в наситеността и следователно по-добра жизненост на цветовете.

4. Метод за смесване на охлаждащ цвят

Изтеглете Sketch файла

Този метод използва мрежовата рамка, която създадохме в метод за смесване на наслагване №2. След това избираме всеки Cool цвят (син например). Създайте правоъгълник от този цвят и го поставете в цялата мрежа. Променете режима си на смесване на Overlay. Получената цветна решетка има ярък ефект на нея.

5. Метод на смесване на топъл цвят наслояване

Изтеглете Sketch файла

Много подобен на метода # 4 Cool Color Overlay Blending, тук вместо това избираме всеки топъл цвят (например оранжев). Създайте правоъгълник от този цвят и го поставете в цялата мрежа. Променете режима си на смесване на Overlay. Получената цветна решетка има драматично топъл ефект към нея.

6. Метод за настройване на яркостта

Изтеглете Sketch файла

Този метод е малко по-различен и по-лесен от гореспоменатите методи. Белите плочки над основата Hue не присъстват в тази мрежа. Вместо това ние създаваме плочки от основния цвят (както е показано на изображението по-долу) и създаваме диапазон от цвят светъл и тъмен, като съответно увеличаваме и намаляваме стойността на яркостта.

Темата за цвета от дясната страна беше създадена с помощта на нашите 3 основни нюанса и след това просто увеличаване и намаляване на стойностите на яркостта, за да се създадат съответно вариации Light and Dark.

7. Яркост + метод за настройване на насищане

Изтеглете Sketch файла

Този метод използва същата решетка на метода # 6 Brightness Tweak. Тук ние ощипваме стойностите на насищане наред със стойностите на яркостта. Ние създаваме диапазон от светли и тъмни цветове, като увеличаваме и намаляваме стойността на яркостта си и едновременно с това намаляваме и увеличаваме съответно стойностите на насищане.

Правило 1: По-светло изменение на цвета = по-ниска наситеност + по-висока яркост.

Правило 2: По-тъмно вариране на цвета = По-висока наситеност + По-ниска яркост.

Хибриден пример

Изтеглете Sketch файла

Ето хибриден пример, който комбинира метод №1, №3, №4 и №5 за генериране на красива палитра от цветове. Това беше вдъхновено от една от статиите за Sketch Tricks за бързо изграждане на цветна система в Sketch App.

заключение

Всичко е в използването на вашите инструменти и използването на основите на дизайнерските елементи. Комбинацията от различни елементи / техники често отваря врата за безкрайни възможности.

Има още повече методи за генериране на цветни теми. Както виждате, създаването на основна рамкова мрежа беше най-важната част. Решетката служи като площадка за вашето въображение за генериране на цветни системи. Можете да комбинирате множество методи, за да създадете изцяло нов набор от цветове от основния си оттенък. (опитайте Gradients вместо твърда основа Hue ).

Можете също така да използвате метода за регулиране на слоевете на Джъстин Мецел, за да създадете ретро цветни набори.

Скоро ще напиша за друг интересен (и сложен) метод за генериране на набор от цветови теми, използвайки Gaussian Distribution function. Благодаря на Nishant за туита, който ми даде вдъхновение да разгледам този метод. Можете да ме последвате, за да останете в течение.

За мен

Здравейте, аз съм Рахул Чакраборти, изграждайки опит и занаятчийски решения на най-голямата в Индия платформа за електронна търговия, Flipkart.

Редовно аз туитвам свързани с дизайна и технологиите неща и моята работа се развива по Dribbble. Можете да намерите другата страна на мен в Instagram.

И накрая, след много отлагане, това е първата ми статия за Medium. Обратната връзка е най-добре дошла. Ако сте харесали или научили нещо, след като прочетете това, препоръчайте го на другите. (Клапс отива до 50 )

Благодаря за четенето!

Twitter
Дрибъл
Instagram