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

Малко теория

Цветовете за мрежата се правят с помощта на комбинации от червено, зелено и синьо, този метод на комбиниране на цветове се нарича RGB (Red Green Blue).

Всеки цвят е представен с цяло число от 0 до 255 и всеки цвят има стойност за червено, зелено и синьо. Черното, например, няма оттенък, а в RGB се обозначава като 0, 0, 0. Първото число винаги означава стойността на червеното, второто - зеленото и третото - синьото.

Тъй като има 256 разновидности на всеки нюанс, има 16 милиона възможни RGB цветови комбинации. Повечето компютри днес могат точно да показват всички 16 милиона цвята. Има така наречените „безопасни цветове“, за необходимостта от използването им вече писахме.

Когато задавате цвят, можете да използвате RGB стойността или шестнадесетичната HEX система. Шестнадесетичните цветове са представени от шест цифри, предшествани от знак #. HEX се състои от комбинация от цифри и букви; 0 е най-малката стойност, FF (255) е най-високата. Всеки от тези шест знака в HEX съответства на числа в RGB кодиране. Черният цвят има стойност HEX #000000.

147 цвята са определени по име за HTML и CSS според w3schools.com. Има 17 стандартни цвята - аква, черно, синьо, фуксия, сиво, сиво, зелено, лайм, тъмно бордо (кестеняво), тъмно синьо (морско), маслинено (маслинено), лилаво (лилаво), червено (червено), сребристо (сребрист), синьо-зелен (синьо-зелен), бял (бял) и жълт (жълт). Всеки цвят има своя специфична RGB и HEX стойност. Тъмното бордо, например, има RGB стойност 128, 0, 0 и HEX стойност #800000; за сребро - 192, 192, 192 или #C0C0C0.

Създаване на палитра

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

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

За да използвате цветове, които сте намерили другаде, направете цифрова снимка и я отворете в графичен редактор, като Adobe Photoshop. Увеличете, докато пикселите станат ясно видими, и използвайте инструмента Eyedropper, за да изберете нюансите, които харесвате, след което запишете техните стойности.

Полезни ресурси

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

Инструмент за създаване на шестцветна палитра, която дизайнерите могат да изтеглят във формат .atc за Photoshop, .epc за Illustrator или да изпращат на електронна поща. Задайте нюанса за всеки цвят с помощта на плъзгача или задайте стойността му сами.

Разполагаме с голяма библиотека от готови цветови комбинации от пет цветови системи. Можете да използвате инструмента Eyedropper, за да определите цвят. Има много възможности (предварителен преглед на цветове заедно с текст, генериране на шаблони на уебсайтове с избрани цветове и т.н.). С помощта на тази услуга можете също да определите цветовете на уебсайта, който харесвате (просто въведете неговия url).

Генератор на цветова палитра

Коментари

1. Serg
   24 февруари 2012 г. в 21:33 ч

   Страхотна и полезна колекция. От свое име мога да спомена colorschemedesigner.com, който освен всичко друго има различни режими на представяне за хора с нарушения на цветовото възприятие. Можете да проверите например как хората с тританопия ще видят вашата работа)

2. Константин
   25 февруари 2012 г. в 08:47 ч

   Печатна грешка в самото начало - RGB (Прочетете зелено синьо) - Прочетете зелено синьо)))

   Elena17 Отговор:
   25 февруари 2012 г. от 15:30 ч

   Благодаря;), вече го поправих.

3. Ирина
   25 февруари 2012 г. в 22:55 ч

   До създателите на сайта!

   Много обичам вашия сайт и постоянно чета нови публикации..

   По някаква причина наскоро Kaspersky (лиценз) започна да ругае и блокира вашата страница!

   Обръщам внимание на това..

   Отговарям:
   26 февруари 2012 г. в 19:51 ч

   Благодаря ви, ще го разберем))

4. Елена
   26 февруари 2012 г. в 11:50 ч

Уважаеми колеги, наясно съм, че за мократа палитра се говори много пъти в интернет. Най-вероятно няма да мога да добавя нищо ново, но въпреки това някой тук (на сайта) трябва да говори за тази хитра и изключително полезна технология. Е, тогава може би правя нещо различно от теб. ;) Държа да отбележа, че описаната технология е подходяща не само за миниатюристи/фигуристи, но и за всички останали моделисти, които използват водоразтворими бои в своето творчество или работа.

Бих искал веднага да изясня няколко важни точки:

• правенето на палитра отнема не повече от 2 минути;
• Използвам бои, смесени върху „мокра палитра“, без да ги сменям/подновявам през цялото време, докато работя върху миниатюрата, което понякога продължава няколко седмици.

И така, ще започна да разказвам и показвам как точно правя мокра палитра стъпка по стъпка.
Първо, нека вземем решение за кораба. Преди използвах купички като чинийки (без капак). Това е съвсем приемливо, но боята в такъв контейнер не трае дълго.

В крайна сметка стигнах до пластмасов контейнер с не много високи страни и плътно затварящ се капак.

След това, използвайки хартиена (в моя случай ДВУСЛОЙНА) кърпа (продава се във всеки супермаркет), създавам първия слой от основата на бъдещата палитра.

ВНИМАНИЕ! ВАЖНО Е! Използване на чиста или пречистена вода, аз…

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

Сега е време да използвате паус! След като предварително измерих необходимата ширина (подходяща по размер до дъното на контейнера), развивам необходимата дължина, равна на дължината на дъното на контейнера, и я отрязвам.
ВНИМАНИЕ! ВАЖНО Е! Не бъркайте паус с хартия за печене.
След като купих ролка проследяваща хартия веднъж за 100 рубли. (приблизителна цена) ще го използвате години наред. ;)

Внимателно, бавно поставям отрязаното парче паус на дъното, за да не попадне вода отгоре на пауса. Коя страна на пауса ще бъде долната и коя горната страна няма значение. Поставете го както ви е удобно.

ВСИЧКО! Палитрата е готова. Сега можете да накапете боя върху повърхността на проследяващата хартия и тя няма да изсъхне МНОГО дълго време. На същата палитра смесете боята и я разредете с капки вода. А когато трябва да си направите дълга почивка, просто затворете плътно капака и след седмица „вашите цветове няма да избледнеят“, а ще живеят. Единственото нещо е, че пигментът може да се утаи, но винаги можете да го „повдигнете“, като внимателно го разбърквате с четка.

Но няма да спра на това описание, а ще ви разкажа малко по-нататък.
За да улесня процеса на разреждане на боята (и това е задължителна процедура, няма друг начин), използвам следния метод (веднъж използвах аналози на пипета, но не е удобно ... стори ми се).

Напълваме обикновен капак (например от бутилка Coca Cola) наполовина (повече или по-малко - решете сами) с вода и го поставяме в ъгъла (или може би не в ъгъла - същото тук, решете сами какво е по-удобно за вас) ) палети.

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

Ето как изглежда палитрата при работа с нея.

Е, накрая ще ви покажа няколко снимки, свързани с

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

И така, ще ни трябва:

1. Контейнер, контейнер или кутия с ниски стени, които могат да бъдат затворени с капак.

2. Хартиени кърпи (многослойни, добро качество).

3. Гладка паус хартия.

4. Ножица.

Първи етап:

Проследяваме дъното на нашия контейнер върху проследяваща хартия и изрязваме шаблон от тази проследяваща хартия (аз изрязах няколко парчета наведнъж, за в бъдеще). шаблон върху тях от проследяваща хартия, ние го проследяваме. Получаваме 6-8 слоя заготовки от хартиена кърпа, със същия размер като шаблона за проследяваща хартия и съответно с размера на дъното на нашия контейнер.

Втора фаза:

Поставяме слоевете заготовки, изрязани от хартиена кърпа, на дъното на контейнера, като ги изравняваме по дъното. След това добавете малко хладка вода към контейнера с положените хартиени слоеве, така че слоевете да са едва покрити и веднага източете тази вода, като държите хартиените слоеве на дъното и обръщате контейнера. С върховете на пръстите си леко притиснете слоя към дъното, сякаш изстисквате. Изглаждаме мехурчетата и изхвърляме излишната вода, като предотвратяваме движението на слоевете хартия. Получаваме влажни слоеве хартиена кърпа на дъното на нашия контейнер; вода вече не трябва да тече от тях, но те ще бъдат достатъчно навлажнени и изравнени на дъното.

Трети етап:

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

Палитрата е готова върху горния слой паус и я използвайте. Ако след работа цялата боя не е използвана и ще е необходима в бъдеще, затворете контейнера с капак и боята ще остане непроменена. За съхранение за по-дълъг период от време, например една седмица, препоръчвам да поставите запечатания контейнер в хладилника на долния рафт. Много е лесно да смените боята след употреба, като премахнете горния слой паус и поставите нов. При смяна на горния слой долните хартиени слоеве могат отново да се навлажнят леко със спрей или спринцовка (само без да се прекалява, слоевете трябва да са влажни, но не трябва да тече вода) Долните хартиени слоеве се сменят при необходимост.

Така спестявам боите си и значително спестявам разхода им. Надявам се опитът ми да е бил полезен.

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

Как да рисуваме с акрилни бои? Как да разреждаме акрилни бои? За каква палитра акрилни боитрябва ли да го използвам? Как да направите палитра със собствените си ръце? Тези въпроси имат отговори тук.

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

• Техника на рисуване с акрил прост и подобен на гваш. Известна разлика е, че с помощта на различни гелове можете да промените текстурата на боята. Направете го по-вискозен или обратно течен, направете го матов или лъскав, а като добавите седеф, можете да получите неочакван ефект.

• За разреждане на акрилни бои имате нужда от обикновена вода. Основното нещо е да не прекалявате, защото колкото повече акрил се разрежда, толкова по-крехък става слоят. И с течение на времето продукт, покрит с такава боя, ще загуби своята красота. Слоят боя ще се напука и ще се отлепи.

• За забавяне на съхненето акрилни бои и за постигане на ефекта на прозрачност и глазура използват специален разтворител „Медиум“. Добавяйки няколко капки към боята, можете да получите полупрозрачни цветове и да подобрите свойствата на смесване на боята.

• След работа с акрилни бои, четките и инструментите не трябва да се мият в разтворители - само вода и сапун.

За да предотвратите изсъхването на изстисканата боя по време на работа, можете да направите своя собствена палитра.

Какво ни трябва, за да си направим палитра за акрилни бои?

1.

• Пластмасов контейнер с плътно затварящ се капак (моят е разделен на 2 части). Използвах същата палитра

2.

• Тоалетна хартия (или още по-добре хартиена кърпа)
• Пергаментова хартия за печене във фурната. Изрежете с размерите на тавата.

3.

• Сгънете тоалетната хартия 4-6 пъти и я поставете на дъното на тавата.

4.

• Налейте вода в съда, колкото да покрие хартията. Отцедете водата. Оставете хартията.

5.

• Поставете пергаментова хартия върху мокра тоалетна хартия. Натиснете малко.

6.

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

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

Е, освен ако не искате вашият сайт да изглежда така:

Какво наистина е необходимо

Не можете да направите нищо с пет шестнадесетични кода. За да се изгради нещо истинско, е необходима много по-пълна палитра.

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

Сив

Текст, фон, панели, елементи на формата - почти всичко съществува в сив интерфейс.

И ще имате нужда от повече сиви, отколкото си мислите. Три или четири нюанса изглеждат много, но съвсем скоро ще искате нещо малко по-тъмно от нюанс #2, но малко по-светло от нюанс #3.

На практика е препоръчително да изберете 8-10 нюанса (повече за това по-късно). Това не е толкова много, за да се търси разликата между нюанси No77 и No78, а съвсем достатъчно количество.

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

Основни цветове

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

Както при сивата палитра, трябва да изберете палитра (5-10) от по-светли и по-тъмни нюанси.

Най-светлите нюанси могат да бъдат полезни като оцветен фон за неща като сигнали, докато по-тъмните нюанси са чудесни за текст.

Акцентни цветове

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

Така че, за да подчертаете нова функция, можете да изберете атрактивен цвят, например жълто, розово или синьо-зелено:

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

...жълто за предупреждения:

...или зелено, за да подчертае положителна тенденция:

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

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

Като цяло един сложен потребителски интерфейс често изисква до десет различни цвята с 5-10 нюанса всеки.

Решете нюансите предварително

Когато искате малко по-светъл или по-тъмен нюанс, не е необходимо да използвате функции на CSS препроцесор като изсветляване или потъмняване. Така че ще завършите с 35 Малкоразлични сини, които изглеждат еднакво.

Вместо това вземете решение за фиксиран набор от нюанси, от които да избирате.

Как да създадете такава палитра?

Първо изберете основен цвят

Започни с основенцветът, на който се основават светлите и тъмните нюанси.

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

Важно е да се отбележи, че тук няма истински правила, като „започнете от 50% яркост“ или други подобни. Всеки цвят се държи малко по-различно, така че ще трябва да разчитате на собствения си вкус.

Поставете граници

След това изберете най-тъмните и най-светлите нюанси. Това също не е научен подход, но помага да си представите къде ще се използват цветовете и да ги изберете според този контекст.

Най-тъмният нюанс обикновено е запазен за текста, а най-светлият за фона на елемента. Едно просто известие е добър пример, когато тези нюанси се събират.

Започнете с цвят, който съответства на тона на основния цвят, след това променете наситеността и яркостта, докато не сте доволни.

Попълнете празните места

Ако сте избрали основата, тъмните и светлите нюанси, остава само да запълните празнините между тях.

За повечето проекти ще ви трябват поне пет нюанса на цвят, за предпочитане по-близо до десет, за да не се чувствате тесни.

Девет е страхотно число, защото се разделя добре, което прави попълването на празните места малко по-лесно. Нека назовем най-тъмния нюанс 900 , основен 500 , и най-лекият 100 .

Започнете с избора на нюанси 700 И 300 , които са точно в средата на двата интервала: те ще бъдат идеалният компромис между нюансите от двете страни.

Това създава още четири празнини в скалата ( 800 , 600 , 400 И 200 ), които се попълват по същия начин.

В крайна сметка ще получите доста балансиран набор от цветове, напълно достатъчен за реализиране на вашите дизайнерски идеи.

Ами сивите?

При сивите нюанси основният цвят не е толкова важен, но иначе процесът е същият. Започнете от краищата и запълнете празнините, докато получите желаната палитра.

Изберете най-тъмния нюанс въз основа на цвета на най-тъмния текст в проекта, а най-светлият нюанс е този, който работи добре като светъл, почти бял фон.

Това не е наука

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

Систематичен подход като този по-горе е чудесно място да започнете, но не се страхувайте да го промените, ако е необходимо.

След като наистина започнете да използвате вашите цветове в проект, е почти неизбежно да искате леко да промените наситеността на нюанса или да направите няколко нюанса по-светли или по-тъмни. Доверете се на очите си, не на числата.

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