Як навчитися створювати піксельну графіку

Піксельна графіка (далі - просто піксель-арт) в наші дні все частіше і частіше нагадує про себе, особливо через інді-ігри. Воно й зрозуміло, адже так художники можуть наповнити гру безліччю персонажів і не витратити сотні годин за моделюванням тривимірних об`єктів і ручної отрисовкой складних об`єктів. Якщо ви хочете навчитися піксель-арту, то першим ділом вам доведеться навчитися малювати так звані "спрайт". Потім, коли спрайт вже не будуть вас лякати, можете переходити до анімації і навіть продажу своїх робіт!

кроки

Частина 1 з 7:

Збираємо все необхідне

1. Завантажте хороші графічні редактори. Можете, звичайно, і в Paint`е шедеври створювати, але це складно і не дуже зручно. Куди краще буде працювати в чимось на зразок:

Photoshop
Paint.net
GIMP
Pixen

2. Купіть графічний планшет. Якщо мишкою ви малювати не любите, то планшет і стилус - ось що вам необхідно. Планшети від Wacom, до слова, найпопулярніші.

3. Увімкніть "сітку" в вашому графічному редакторі. Власне, якщо ваш графічний редактор не підтримує відображення сітки, то варто задуматися про пошук іншої програми. Сітка дозволить вам чітко бачити де і як буде знаходитися кожен окремо взятий піксель. Як правило, чітка включається через меню "Вид".

Можливо, доведеться трохи налаштувати параметри відображення, щоб кожен сегмент сітки дійсно відображав піксель. У кожній програмі це робиться по-своєму, так що пошукайте відповідні поради.

4. Малюйте олівцем з розміром кисті в 1 піксель. У будь-якому графічному редакторі повинен бути інструмент "Олівець". Виберіть його, розмір кисті задайте рівним 1 пікселю. Тепер ви можете малювати ... піксельно.

Частина 2 з 7:

відпрацьовуємо основи

1. Створіть нове зображення. Так як ви вчитеся малювання в стилі піксель-арт, то замахуватися на епічні полотна не варто. Якщо пам`ятаєте, то в грі Super Mario Bros. весь екран був 256 x 224 пікселів, а сам Маріо вмістився на просторі в 12 x 16 пікселів!

2. збільште масштаб. Так, інакше ви просто не розгледить окремі пікселі. Так, доведеться збільшувати його дуже сильно. Скажімо, 800% - це цілком нормально.

3. Навчіться малювати прямі лінії. Начебто і просто, але якщо ви раптом десь в середині намалюєте твердою рукою лінію в 2 пікселя товщиною, то різниця буде бити по очах. Малюйте прямі лінії до тих пір, поки вам не доведеться активувати інструмент для малювання прямих ліній. Ви повинні навчитися малювати прямі лінії вручну!

4. Навчіться малювати криві лінії. В кривої лінії повинні бути, скажімо так, рівномірні "переноси рядків" (що чітко помітно на малюнку трохи вище). Припустимо, починаючи малювати криву лінію, намалюйте пряму з 6 пікселів, під нею - пряму з трьох, під нею - пряму з двох, а під нею - з одного пікселя. З іншого боку намалюйте те ж саме (дзеркально відбите, зрозуміло). Саме така прогресія вважається оптимальною. Криві, намальовані за схемою "3-1-3-1-3-1-3", не відповідають стандартам піксель-арту.

5. Не забувайте прати помилки. Інструмент "Стерк" треба налаштувати аналогічно олівця, зробивши розмір кисті рівним 1 пікселю. Чим більше Стерк, тим складніше не стерти зайве, так що все логічно.

Частина 3 з 7:

Створюємо перший спрайт

1. Подумайте про те, яким цілям буде служити спрайт. Він буде статичним? анімованим? Статичний спрайт можна наситити деталями до відмови, а ось анімований краще зробити простіше, щоб потім не витрачати годинник, перемальовуючи всі деталі на всіх кадрах анімації. До слова, якщо ваш спрайт передбачається використовувати з іншими, то всі вони повинні бути намальовані в одному стилі.

2. Дізнайтеся, чи немає якихось особливих вимог до спрайту. Якщо ви рсіуете для, скажімо, проекту, то цілком резонно буде очікувати вимог до квітів або розміром файлів. Втім, це буде важливіше трохи пізніше, коли ви почнете працювати над великими проектами з безліччю різних спрайтів.

Об`єктивно кажучи, в наші дні вимоги до розміру або палітрі спрайтів вже висуваються рідко. Втім, якщо ви малюєте графіку для гри, в яку будуть грати на старих ігрових системах, то доведеться враховувати всі обмеження.

3. Зробіть начерк. Малюнок на папері - ось основа будь-якого спрайту, благо що так ви зумієте зрозуміти, як все буде виглядати і, якщо треба, зможете щось заздалегідь підправити. Крім того, за паперовим начерку потім ще можна і обводити (якщо у вас все-таки є планшет).

Не шкодуйте деталей для начерку! Намалюйте все, що хочете бачити на фінальному малюнку.

4. Перенесіть малюнок у графічний редактор. Можете обвести паперовий начерк на планшеті, можете перемалювати все вручну, піксель за пікселем - не важливо, вибір за вами..

Обводячи начерк, використовуйте 100% -ий чорний колір як контурного. Якщо що, ви його потім вручну змініть, а поки що вам буде простіше працювати саме з чорним.

5. Доопрацювати контур нарису. В даному контексті можна, звичайно, сказати інакше - зітріть все зайве. У чому суть - контур повинен бути в 1 піксель товщиною. Відповідно, збільшуйте масштаб і періть, періть зайве ... або домальовуйте відсутнє олівцем.

Працюючи над нарисом, не відволікайтеся на деталі - їх черга ще прийде.

Частина 4 з 7:

розфарбовуємо спрайт

1. Освіжіть в пам`яті теорію кольору. Подивіться на палітру, щоб зрозуміти, які кольори треба використовувати. Там все просто: чим далі кольору один від одного, тим більше вони один на одного не похожі- чим ближче кольору один до одного - тим більше вони схожі і краще поруч один з одним виглядають.

Виберіть кольори, які зроблять ваш спрайт і красивим, і не ріжучим очі. І так, пастельних кольорів слід уникати (якщо тільки весь ваш проект не виконаний в такому стилі).

2. Виберіть кілька кольорів. Чим більше квітів ви будете використовувати, тим більше, так би мовити, "відволікаючим" буде ваш спрайт. Подивіться на класику піксель-арту і спробуйте підрахувати, скільки кольорів використано там.

Маріо - всього три кольори (якщо ми говоримо про класичну версії), та й ті розташовані на палітрі мало не впритул один до одного.

Соник - нехай навіть Соник намальований з великою кількістю деталей, ніж Маріо, в основі все одно лежать всього 4 кольори (і тіні).

Рю - мало не класика спрайтів, як вони розуміються в іграх-файтинга, Рю - це великі ділянки, зафарбовані в прості кольори, плюс трохи тіні для разгранічіванія. Рю, втім, трохи складніше Соника - там уже п`ять кольорів і тіні.

3. Прикрасьте спрайт. Інструментом "Заливка" Прикрасьте ваш спрайт і не переживайте про те, що все виглядає плоско і мляво - на цьому етапі іншого і не передбачається. Принцип роботи інструменту "Заливка" простий - він буде заливати обраним вами кольором всі пікселі того кольору, по якому ви кликнули, поки не дійде до кордонів.

Частина 5 з 7:

додаємо тіні

1. Визначтеся з джерелом світла. У чому суть: вам потрібно вирішити, під яким кутом на спрайт буде падати світло. Визначившись з цим, ви зможете зробити правдоподібно виглядають тіні. Так, "світла" в буквальному сенсі не буде, сенс в тому, щоб представляти, як він буде падати на малюнок.

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

2. Почніть наносити тіні, використовуючи для цього кольору, які трохи темніше базових. Якщо світло падає зверху, то де буде тінь? Правильно, там, куди пряме світло не падає. Відповідно, щоб додати тінь, просто додайте до спрайту ще кілька шарів з пікселями відповідного кольору вище або нижче контуру.

Якщо зменшити настройку "Контраст" базового кольору, злегка збільшивши настройку "Яскравість", то можна отримати хороший колір для відтворення тіні.

Не використовуйте градієнти. Градієнти - зло. Градієнти виглядають дешево, халтурно і непрофесійно. Ефект, схожий з ефектом градієнтів, досягається за допомогою прийому "проріджування" (див. нижче).

3. Не забудьте про півтіні. Виберіть колір, що знаходиться між базовим кольором і кольором тіні. Використовуйте його для створення ще одного шару - але вже між шарами цих двох кольорів. Вийде ефект переходу від темної області до світлої.

4. намалюйте відблиски. Блик - це те місце спрайту, куди падає найбільше світла. Намалювати відблиск можна, якщо взяти колір, який буде трохи світліше базового. Головне - не захоплюватися відблисками, це відволікає.

Частина 6 з 7:

Використовуємо просунуті методи малювання

1. використовуйте проріджування. Цим прийомом можна передати зміна тіні. За допомогою проріджування ви можете відтворити ефект градієнта за допомогою всього декількох квітів шляхом зміни положення пікселів, що і створить ефект переходу. Кількість і положення пікселів двох різних кольорів обдурить очей, змусивши його бачити різні тіні.

Початківці часто зловживають проріджуванням, що не вподібнюйтеся їм.

2. Не забувайте про анти-алиасинг (усунення контурних нерівностей). Так, візитна картка піксель-арту - видима "піксельность" зображення. Проте, іноді хочеться, щоб лінії виглядали трохи менш помітними, трохи більше гладкими. Тут на допомогу і приходить анти-алиасинг.

Додайте проміжні кольори на вигини кривої. Один шар проміжного кольору намалюйте навколо контуру кривої, яку ви хочете згладити. Якщо та все ще виглядає незграбно, додайте ще один шар, вже посветлее.

Якщо ви хочете, щоб спрайт не зливаються з фоном, не використовуйте анти-алиасинг на зовнішньому контурі спрайту із зовнішнього боку.

3. Навчитеся використовувати вибіркову отрисовку. У чому суть: контур малюється кольором, схожим на ті, що використовувалися для заливки. Виходить менш "мультяшне" зображення, причому саме за рахунок більш реального вигляду контура. Спробуйте, скажімо, вибірково малювати шкіру, залишаючи при цьому класичним чорний контур для одягу або предметів.

При вибіркової відображенні контур шкіри повинен бути створений кольором, який трохи темніше базового. Не забувайте враховувати джерело світла, щоб міняти колір контуру відповідним чином - так він буде виглядати більш природним, що особливо корисно при відображенні шкіри і м`язів.

Втім, якщо вам просто потрібно, щоб спрайт не зливаються з фоном, то обводьте все чорним.

Частина 7 з 7:

Додаємо фінальні штрихи

1. перевірте спрайт. Можете навіть відійти на крок-другий від екрану. Подивіться, чи все в порядку, чи не де помітних помилок і неточностей.

2. додайте деталі. Закінчили з кольором і тінями? Переходьте до деталей! Написи, очі, якісь інші особливості, які зроблять ваш спрайт цікавіше і професійніше - ось що важливо на цьому етапі.

3. Анімуйте спрайт. Якщо ви малювали, слідуючи цій статті, то в результаті у вас вийшов статичний спрайт. Це, звичайно, добре, але як окремий твір мистецтва. Якщо ви хотіли навчитися створювати графіку для ігор, то знайте - статичні спрайт для ігор не годяться (крім фонів, звичайно, але і то не завжди). Відповідно, спрайт потрібно анімувати - тобто намалювати за аналогічним спрайту для кожного кадру Колекція спрайтів для анімації називається "спрайт-лист".

Пошукайте статті, в яких детально розповідається про анімацію спрайтів.

Хороша анімація може задати стиль всьому спрайту! Більш того - саме за рівнем анімації часом і можна відрізнити любителя від майстра.

4. створіть портфоліо. Якщо ви хочете заробляти на життя, малюючи піксель-арт для відеоігор, то вам просто необхідно портфоліо, яким можна було б справити враження на потенційних роботодавців. Включіть в портфоліо ваші кращі спрайт (бажано - різні), ваші кращі анімації.