Курс піксель-арту 5

Це переклад публікації «Les Forges Pixel Art Course».

Частина 1: Правильні інструменти
Частина 2: Лінії і криві
Частина 3: Перспективи
Частина 4: Тінь і світло
Частина 5: Палітри кольорів
Частина 6: Згладжування
Частина 7: Текстури і розмиття
Частина 8: Світ тайлів

Частина 5: Колірні палітри

1. Коли і чому вибирати палітру?
Хороше запитання, чому зрештою я почав про це? Просто тому що палітра — це 50% якості вашої роботи. На всьому протязі гри важливо мати послідовні панелі, тому що вони суттєво сприяють загальній атмосфері. Загалом, що становить різницю між хорошою і невдалою графікою, це в значній мірі палітра. «Добре, це важливо мати хороший вибір, я зроблю це в кінці». А-та-та, звичайно ні! Палітра працює від початку до кінця, коли ви малюєте піксель-арт. Для мене це перше і останнє що я роблю: я починаю зі створення стартової панелі в кутку мого зображення, потім я підлаштовую її по мірі просування, потім, як закінчу, я витрачаю час на поліпшення її. Покращення в основному зумовлені «чуттям», то що ви вивчіть тут, може бути поставлено під сумнів: це просто стартова точка.

2. Магія HSL
a. Огляд
На комп'ютері, всі кольори представлені шістнадцятковим кодом ( який використовує символи 0 1 2 3 4 5 6 7 8 9 A B C D E F) з 6 символів. Наприклад, код #000000 — це чорний, білий — це #FFFFFF, #FF0000 — чистий червоний. Нічого складного. Цей код може бути розділений на три сегменти з двох цифр (# — це просто ознака): перші дві цифри відносяться до червоної компоненті кольору, наступні два — зеленої, і останні два — синій. Через комбінування цих трьох значень, ви отримуєте будь-який колір. Наприклад, #FF0000 — це чисто червоний, тому що червона частина максимізований (FF), а зелена і синя частина дорівнює нулю. Шістнадцяткові коди можуть бути сконвертированы в десяткові для зручності дискусії (не всім подобається читати шістнадцяткові коди, як вам і мені) — кожна пара між 00 і FF, це число від 0 до 255. Тепер я вибрав колір, який я використовую в моєму піксель-арт, наприклад пурпурний #6A146A (Червоний 106 — Зелений 20 — Синій 106). Гаразд, цей колір непоганий, але він не дуже мені підходить… Я хочу щось більш живе, більш інтенсивне. Я кажу собі, що, щоб зробити це більш інтенсивним, мені просто потрібно збільшити три компоненти… ви кажете, що це тільки зробить колір більш білим і блідим. Погано, я затемню трохи, зменшу кожну компоненту на 10… знову промах! Я затемнив мій колір, але я не хочу сірий… ах ах. Складно вибрати точні кольору таким чином. Але з'являється Зорро, щоб врятувати! ( В даному випадку, Зорро — це палітра HSL). Ви звичайно знаєте, що для нашого мозку неприродно ділити колір на три компоненти (RGB — Red Green Blue, тобто Червоний Зелений Синій). Палітра HSL просто інший спосіб вказати колір: тут використовуються компоненти RGB, а три компоненти видимі і впізнавані неозброєним оком, Hue — відтінок, Saturation — насиченість, Brightness — яскравість. Відтінок між 0 і 360 — це просто колір: червоний (0), жовтий (60), зелений (120), блакитний (180), синій (240), рожевий(300) і Червоний (360). Якщо ви спостережливі, ви помітили, що два кольори по краях однакові. Звичайно всі проміжні кольори, між тими, що я згадав, — існують. Насиченість між 0 і 100, це інтенсивність кольору. Чим більш насичений колір, тим більше він інтенсивний. Насиченість 0 відповідає сірому. І яскравість від 0 до 100, найпростіше для розуміння: це визначає прагне колір до чорного або білого. У всіх програмах за піксель-арту, представлених в 1 частині, ви можете вибрати колір за допомогою HSL, і у вас немає причин не використовувати це. Трохи практики, і ви зможете легко отримати колір який ви представили, тоді як з RGB це зайняло б багато часу.

b. Рампи і відтінки
Тепер, коли ви знаєте інструменти для вибору кольору, перейдемо до основного питання: вибору палітри. Палітра складається з безлічі «рамп»: рампа, це група квітів, чиї відтінки суміжні. Наприклад палітра може містити червону рампу, зелену рампу і коричневу рампу. Давайте подивимося приклад.
image
Це бородатий карлик, а нижче палітра, яка використовувалася при його створенні. Ця панель містить три рампи: синю, червону і оранжеву. (Невеличке зауваження, необов'язково організовувати палітру як я. Зазвичай вона набагато більш неохайна ніж ця). У кожній рампі я впорядкував кольору від темного (ліворуч) до світлого (праворуч). Зверніть увагу, що чисто білий і чисто чорний (великі прямокутники) є частиною двох моїх рамп: Тому що ці два кольори мають насиченість 0 (білий і чорний, це чисто сірий), вони можуть належати будь рампі, також і з будь-яким іншим сірим. Найстарші з вас, можливо, вже бачили зображення з ігор Commodore 64. Колірні палітри відображалися на цій машині містила безліч відтінків сірого, щоб дозволити художникам створювати різні рампи. -Тепер, коли ми знаємо основи, нам цікаві основні концепції зміни колірного відтінку. Ми маємо схильність вірити, що всі кольори мають той же відтінок і насиченість, і тільки яскравість міняється коли ви на сонці або в тіні. Але це не так! Що я не сказав в минулій частині, що ваші об'єкти висвітлено синім небом і жовтим сонцем, а це означає, що ваш відтінок буде трохи змінюватися протягом рампи. Найбільш часто реальність речей дуже складна і вимагає знання освітлення яке я не згадував, але в піксель-арт ви можете спокійно використовувати наступні правила:
-при затемненні збільшується насиченість
-при освітленні зменшується насиченість
-при затемненні відтінок стає більш синім
-при освітленні відтінок стає жовтішим
image
Якщо ви уважно подивитеся на червону рампу палітри карлика, ми побачимо ці тенденції. Цифри говорять самі за себе, ви можете перевірити все відповідає зазначеним принципам. Ви можете звернути правила щодо насиченості, для більш м'якого виду.
image
Ось маленький приклад від наших друзів професіоналів: дерево з «Seiken Densetsu 3» яке містить величезну палітру кольорів, мінливих від жовтого до пурпурного. На зображенні не показаний весь діапазон, тільки яскравий колір, і два темних.

c. Метод Ксенодрогена
Метод Ксенодрогена, названий на честь його винахідника — це метод точного вибору кольору вашої рампи, без (дуже великий) помилки. Цей метод не абсолютне для дотримання правило, але якщо ви маєте почуття кольору, воно дозволить вам створювати красиві рампи. Цей метод базується на складному у створенні, але легкому у використанні правилі: «В рампі відтінок, насиченість і колір, змінюються в одному напрямку. Їх зміни (друга похідна, математично кажучи), також змінюються в одному напрямку». Ми вже обговорили перший вираз, і ми навіть говорили в якому напрямку відтінок і насиченість повинні змінюватися. Другий вираз дозволить нам визначити кількість цих змін: в рампі, кожна зміна компонента (відтінок, насиченість і яскравість) має бути більше і більше, або менше протягом рампи. Уявіть 5-кольорову палітру, на які ми будемо посилатися як A, B, C, D і E. Я можу наприклад змінювати насиченість на 1 між A і B, і на 5 між B і C, знову на 5 між C і D, і на 12 між D і E. З іншого боку було б неправильно робити щось подібне 2 3 2 1 4, що могло б призвести до свого роду ефекту «йо-йо». Підводячи підсумок, я можу змінювати швидкість з якою я міняю відтінок, насиченість, але я повинен міняти швидкість в тому ж напрямку.
image
Дозвольте взяти зелену рампу для прикладу: тут колір зменшується по наростаючій, насиченість збільшується все менше і менше, і яскравість збільшується все більше і більше. Зверніть увагу, що як описано в попередньому параграфі, ми можемо звернути відносини між яскравістю і насиченістю, для більш м'якого (більш пастельного) рендеринга: на цій рампі, це найбільш яскраві кольори, які більш насичені. Остання деталь методу Ксенодрогена: чим більше квітів на вашій рампі, тим більше ви повинні робити дрібних змін. Ця зелена рампа має 5 кольорів, тому ми робимо маленькі зміни. Якщо б у нас було тільки 3 кольори, тут були б варіації в діапазоні 15-20 одиниць.

3. Хороший смак


a. Чорний і білий
Проблема з використанням чорного і білого, заслуговує цілого параграфа. Зазвичай, використання цих двох кольорів в чистому вигляді не рекомендується. Тим не менш, є два винятки (один для кожного кольору) і гном на початку цього керівництва, має відношення до цих винятків. Ми можемо використовувати чистий білий, дуже світлих поверхнях (ефекти і магічні заклинання) або дуже дзеркальних (метал, дорогоцінні камені). Як наприклад гном і його металева броня. Випадок чисто чорного, більш тонкий: він не може бути використаний для тіней, тому що насправді немає нічого повністю чорного; зазвичай є ледь помітний колір (іноді пурпурний). Він не повинен бути використаний для прикрас чи контурів. Єдиний підходящий випадок, це обведення, щоб зробити персонажів більш помітними в грі, виділити їх з оточення. Тим не менше ми суворо застерігаємо проти використання чорного «всередині», так як чорний поділяє деталі всередині спрайту, і робить його схожим на грубий начерк.

b. Пастки
У початківців є дві тенденції:
-використання перенасичених кольорів
-використання кольорів заснованих на припущеннях, замість спостережень.
Пам'ятайте, що трава не завжди зелена, вода і небо не завжди сині, а кольори персонажа можуть змінюватись залежно від тону шкіри і освітлення. Який час дня і навколишній світ — змінюють колір; погляньте навколо себе, і навчитеся. (Якщо ви дивитеся на ваші кольору в RGB, колір вашої трави (наприклад) не повинен бути 00 для червоної і синьої компонент. Море і небо не повинні бути суто синіми, і навіть камені, які нам здаються сірими, повинні мати деякі варіації в кольорі, слідуючи цим правилам. Використання HSL може допомогти вам уникнути попадання в цю пастку) Я вирішив завершити цю частину також як почав, і нагадати вам, що ці правила не висічені в камені, а просто поради. Ця частина дає вам багато правил щодо вибору хороших колірних палітр, але найважливіші речі — це хороший смак і практика. Також якщо ви думаєте що можете поліпшити вашу палітру за рамками правил, не соромтеся робити це. Зрештою, головне результат.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.