Інді-розробникам нерідко доводиться поєднувати одразу кілька ролей: геймдизайнера, програміста, композитора, художника. І коли справа доходить до візуалу, багато хто вибирає піксель-арт — на перший погляд він здається простим. Але щоб зробити красиво, потрібно багато досвіду та певні навички. Знайшов туторіал для тих, хто тільки почав осягати основи цього стилю: з описом спеціального софту та техніки малювання на прикладі двох спрайтів.
Фон
Піксель-арт - форма цифрового художнього мистецтва, в якому зміни вносяться на рівні пікселів. В основному він асоціюється з графікою відеоігор 80-х та 90-х років. Тоді художникам доводилося враховувати обмеження пам'яті та низького дозволу. Зараз піксель-арт все ще популярний в іграх та як художній стиль загалом, незважаючи на можливість створення реалістичної 3D-графіки. Чому? Навіть якщо не брати до уваги ностальгію, створення крутої роботи в таких жорстких рамках — приємний челендж.
Поріг входження в піксель-арт порівняно низький у порівнянні з традиційним артом і 3D-графікою, що приваблює інді-розробників. Але це зовсім не означає, що буде просто доробити гру у цьому стилі. Я бачив багато інді-девелоперів із піксель-арт метроідування на краудфандингових платформах. Вони думали, що закінчать усі за рік, але насправді їм потрібно було ще шість років.
Metal Slug 3 (Arcade). SNK, 2000 рік
Піксель-арт на тому рівні, на якому більшість хоче його створювати, забирає багато часу, а коротких обучачок дуже мало. Працюючи з 3D-моделлю, ви можете обертати її, деформувати, переміщати окремі її частини, копіювати анімації з однієї моделі на іншу і так далі. Піксель-арт високого рівня майже завжди забирає купу сил на скрупульозне розміщення пікселів на кожному кадрі.
Загалом я попередив.
А тепер трохи про мій стиль: здебільшого я малюю піксель-арт для відеоігор і в них знаходжу натхнення. Зокрема я фанат Famicom/NES, 16-бітових консолей та аркад 90-х років. Піксель-арт моїх улюблених ігор того часу можна описати як яскравий, впевнений і чистий (але не надто), його не можна назвати жорстким та мінімальним. У цьому стилі я працюю сам, але ви легко можете застосовувати ідеї та техніки з цього туторіалу для створення зовсім інших речей. Вивчайте роботи різних художників та створюйте піксель-арт, який подобається вам!
Софт
Базові цифрові інструменти для піксель-арту – Зум (Zoom) та Олівець (Pencil), щоб розміщувати пікселі. Також вам знадобляться Лінія (Line), Фігура (Shape), Вибрати (Select), Перемістити (Move) та Заливка (Paint Bucket). Є багато безкоштовного та платного ПЗ з таким набором інструментів. Я розповім про найпопулярніші та ті, якими користуюся сам.
Paint (безкоштовно)
Якщо у вас Windows, вбудований у неї Paint, - примітивна програма, але в ній є всі інструменти для піксель-арту.
(Безкоштовно)
Несподівано функціональний редактор піксель-арту, який запускається через браузер. Можна експортувати роботу до PNG або анімованого GIF. Відмінний варіант для новачків.
(Безкоштовно)
GraphicsGale - єдиний редактор з тих, про які я чув, розроблений саме для піксель-арту і включає інструменти анімації. Його створила японська компанія Humanbalance. З 2017 року він поширюється безкоштовно і досі має попит, незважаючи на зростання популярності Aseprite. На жаль, працює він лише на Windows.
($)
Мабуть, найпопулярніший редактор зараз. , купа можливостей, активна підтримка, версії для Windows, Mac та Linux. Якщо ви серйозно взялися за піксель-арт і ще не знайшли потрібний редактор, можливо, це те, що потрібно.
($$+)
GameMaker Studio 2 - чудовий 2D-інструмент з хорошим редактором спрайтів (Sprite Editor). Якщо ви хочете створювати піксель-арт для власних ігор, дуже зручно все робити в одній програмі. Зараз я використовую цей софт у роботі над , колекцією 50 ретро-ігор: спрайти та анімації створюю в GameMaker, а тайлсети - у Photoshop.
($$$+)
Photoshop — дорогий софт, який розповсюджується за передплатою, не заточений під піксель-арт. Не рекомендую купувати його, якщо ви не займаєтеся малюванням ілюстрацій у високій роздільній здатності, або вам не потрібно проводити складні маніпуляції з картинкою, як мені. У ньому можна створювати статичні спрайти та піксельні роботи, але він досить складний у порівнянні зі спеціалізованим софтом (наприклад, GraphicsGale чи Aseprite).
Інше
Мій набір піксель-арту. Все чорне, тільки зараз помітив.
Графічний планшет ($$+)
Рекомендую графічні планшети для будь-яких робіт із цифровими ілюстраціями, щоб уникнути тунельного синдрому зап'ясть. Його набагато простіше запобігти, ніж вилікувати. Якось ви відчуєте біль, і він тільки наростатиме — подбайте про себе з самого початку. Через те, що колись малював мишкою, мені тепер важко грати в ігри, в яких потрібно натискати на клавіші. Зараз я використовую Wacom Intuos Pro S.
Супорт зап'ястя ($)
Якщо ви не можете придбати планшет, купіть хоча б супорт зап'ястя. Мені найбільше подобається Mueller Green Fitted Wrist Brace. Інші або надто тугі, або забезпечують недостатню підтримку. Супорти можна замовити онлайн.
96 × 96 пікселів
Final Fight. Capcom, 1989 рік
Почнемо! Почнемо зі спрайту персонажа 96×96 пікселів. Для прикладу я намалював орка та помістив його на скріншот із Final Fight (картинка вище), щоб ви розуміли масштаб. Це великий спрайт для більшості ретро-ігор розмір скріншота: 384×224 пікселя.
На такому великому спрайте легше буде показати техніку, про яку я хочу розповісти. Також піксельне малювання більше схоже на традиційні форми арту (наприклад, малювання або живопис), з якими ви, можливо, краще знайомі. Освоївши базові техніки, ми перейдемо до менших спрайтів.
1. Вибираємо палітру
Піксель — набагато глибше поняття у піксель-арті, ніж у будь-яких інших цифрових сферах. Піксель-арт визначають його обмеження, наприклад кольори. Важливо правильно вибрати палітру, вона допоможе визначити ваш стиль. Але на старті я пропоную не думати про палітри і вибрати одну з існуючих (або просто кілька рандомних кольорів) - ви легко можете змінити її на будь-якому етапі.
Для цього туторіалу я використовуватиму палітру з 32 кольорів, яку ми створили для . Для піксель-арту їх часто збирають із 32 або 16 кольорів. Наша розроблена для вигаданої консолі, яка могла б з'явитися десь між Famicom та PC Engine. Можете взяти її чи будь-яку іншу – туторіал зовсім не залежить від обраної палітри.
2. Грубі контури
Почнемо промальовування за допомогою інструмента Олівець. Намалюємо скетч так само, як робимо це зі звичайною ручкою та папером. Звичайно, піксель-арт і традиційний арт перетинаються, особливо коли йдеться про такі великі спрайти. Мої спостереження показують, що сильні художники за піксель-артом як мінімум непогано малюють від руки і навпаки. Тож розвивати навички малювання завжди корисно.
3. Опрацювання контурів
Допрацьовуємо контури: прибираємо зайві пікселі та скорочуємо товщину кожної лінії до одного пікселя. Але що саме вважати зайвим? Щоб відповісти на це питання, потрібно розібратися в піксельних лініях і нерівностях.
Нерівності
Потрібно навчитися малювати дві базові лінії у піксель-арті: прямі та криві. З ручкою та папером все зводиться до м'язового контролю, але ми працюємо з крихітними кольоровими блоками.
Ключ до малювання правильних піксельних ліній – нерівності. Це поодинокі пікселі або невеликі сегменти, що руйнують згладженість лінії. Як я вже казав, окремий піксель має величезне значення у піксель-арті, тому нерівності можуть зруйнувати всю естетику. Уявіть, що ви проводите пряму лінію на папері, і несподівано хтось вдаряє по столу: нерівності в піксель-арті виглядають так само, як і випадкова шкарпетка.
приклади:
Прямі
Криві
Нерівності з'являються на кривих, коли довжина сегментів лінії збільшується чи зменшується поступово.
Зовсім уникнути нерівностей неможливо - у всіх ваших улюблених ретро-іграх вони є (якщо, звичайно, піксель-арт складається не лише з простих форм). Ціль: звести нерівності до мінімуму, при цьому показавши все необхідне.
4. Застосовуємо перші кольори
Розфарбуйте свого персонажа за допомогою заливки або іншого відповідного інструменту. Палітра спростить цю частину роботи. Якщо програма не передбачає використання палітр, можна помістити її прямо в картинку, як на прикладі вище, і вибирати кольори за допомогою піпетки.
У нижньому лівому кутку я намалював нашого друга, знайомтеся, це Куля. З ним простіше зрозуміти, що саме відбувається на кожному етапі.
5. Шейдинг
Пора відобразити тіні - просто додаємо темніші кольори на спрайт. Так зображення виглядатиме об'ємним. Давайте припустимо, що в нас одне джерело світла, розташоване над орком ліворуч від нього. Значить, освітлено буде все, що знаходиться зверху та спереду нашого персонажа. Додаємо тіні знизу праворуч.
Форма і обсяг
Якщо цей етап викликає у вас складності, уявіть свій малюнок як об'ємні форми, а не просто лінії та колір. Форми існують у тривимірному просторі і можуть мати обсяг, який ми вибудовуємо за допомогою тіней. Це допоможе візуалізувати персонажа без деталей і уявити, що він виготовлений з глини, а не з пікселів. Шейдинг це не просто додавання нових кольорів, це процес вибудовування форми. На добре опрацьованому персонажі деталі не приховують базові форми: якщо ви примружитеся, побачите кілька великих кластерів світла та тіні.
Згладжування (anti-aliasing, анти-аліасинг)
Щоразу використовуючи новий колір, я застосовую антиаліасинг (АА). Він допомагає згладити пікселі, додаючи проміжні кольори по кутах, в місці зіткнення двох сегментів лінії:
Сірі пікселі пом'якшують розриви в лінії. Чим довший сегмент лінії, тим довший АА-сегмент.
Так АА виглядає на плечі орка. Він потрібний, щоб згладити лінії, що відображають вигин його м'язів
Згладжування не повинно виходити за межі спрайту, який використовуватиметься у грі або на тлі, колір якого невідомий. Наприклад, якщо ви застосуєте АА для світлого фону, на темному тлі згладжування виглядатиме некрасиво.
6. Вибірковий контур
Раніше контури були повністю чорними, через що спрайт виглядав дуже мультяшно. Картинка була наче розділена на сегменти. Наприклад, чорні лінії на руці надто контрастно відображають м'язи, і персонаж виглядає менш цільним.
Якщо спрайт стане природнішим, а сегментація менш явної, то базові форми персонажа будуть легше читатися. Для цього можна використовувати вибірковий контур – частково замінити чорний контур світлішим. На освітленій частині спрайту можна використовувати найсвітліші кольори або, де спрайт стикається з негативним простором, можна повністю прибрати контур. Замість чорного потрібно використовувати колір, який був обраний для тіні – так зберегтися сегментація (для розмежування м'язів, хутра тощо).
Також на цьому етапі я додав темніші тіні. Вийшло три градації зеленого на шкірі орка. Найбільш темно-зелений колір можна використовувати для вибіркового контуру та АА.
7. Фінальні штрихи
В кінці варто додати відблиски (найсвітліші плями на спрайте), деталі (сережки, заклепки, шрами) та інші поліпшення, поки персонаж не буде готовий або поки не доведеться перейти до наступного.
Існує кілька корисних прийомів, які можна застосувати на цьому етапі. Поверніть малюнок горизонтально, це часто допомагає виявити помилки у пропорціях та шейдингу. Також можна забрати колір — виставити насиченість на нуль, щоб зрозуміти, де потрібно змінити тіні.
Створення шумів (dithering, дизеринг)
Поки що ми переважно застосовували великі, цілісні ділянки тіней. Але є й інша техніка – дизеринг, яка дозволяє перейти від одного кольору до іншого без додавання третього. Подивіться приклад нижче.
Верхній градієнт від темного до світлого використовує сотні різних відтінків синього.
Середній градієнт використовує лише дев'ять кольорів, але в ньому все ще надто багато відтінків одного кольору. Виникає так званий бандинг (від англ. band - смуга), при якому через товсті однорідні смуги очей фокусується на точках дотику квітів, замість самих квітів.
На нижньому градієнті ми застосували дизеринг, який дозволяє уникнути бандингу та використовує всього два кольори. Ми створюємо шум різної інтенсивності, щоб імітувати градацію кольору. Ця техніка дуже схожа на халфтон (halftone - напівтонове зображення), що застосовується на друкі; а також на стипплінг (stippling – зернисте зображення) – в ілюстрації та коміксах.
На орці я застосував дизеринг зовсім небагато передачі текстури. Деякі піксель-артисти зовсім його не використовують, інші навпаки не соромляться і роблять це дуже вміло. Мені здається, що найкраще дизеринг виглядає на великих ділянках залитих одним кольором (придивіться до неба на скріншоті Metal Slug, який був вищим) або тих ділянках, які повинні виглядати шорстко і нерівно (наприклад, бруд). Вирішіть самі, як його використати.
Якщо хочете побачити приклад із масштабним та якісним дизерингом, вивчіть ігри The Bitmap Brothers, британської студії 80-х років, або ігри на комп'ютері PC-98. Тільки врахуйте, що всі вони NSFW.
Какусей (PC-98). Elf, 1996 рік
На цьому зображенні всього 16 кольорів!
8. Останній погляд
Одна з небезпек піксель-арту в тому, що він здається легким і простим (через його структуру та обмеження стилю). Але в результаті ви витратите багато часу на доопрацювання своїх спрайтів. Це схоже на головоломку, яку потрібно розв'язати, — ось чому піксель-арт приваблює перфекціоністів. Пам'ятайте, що один спрайт не повинен забирати занадто багато часу - це лише крихітний шматочок вкрай складного скупчення шматочків. Важливо не втрачати бачення загальної картини.
Навіть якщо ваш піксель-арт не для ігор, іноді варто сказати собі: "Все вже досить добре!" І рухатись далі. Найкращий спосіб розвитку навичок — якнайбільше разів пройти весь процес повністю від початку до кінця, використовуючи якомога більше тем.
І часом корисно ненадовго залишити спрайт, щоб трохи пізніше глянути на нього свіжим поглядом.
32×32 пікселів
Ми створили великий спрайт 96×96 пікселів першим, тому що за такого розміру це більше нагадує малювання чи живопис, але лише пікселями. Чим менше спрайт, тим менше він схожий на те, що повинен відображати, і тим важливіший кожен піксель.
У Super Mario Bros. око Маріо - це всього два пікселі, розташовані один над одним. І його вухо також. Автор персонажа Сігеру Міямото сказав, що вуса знадобилися для того, щоб відокремити ніс від іншої особи. Так що одна з головних рис обличчя Маріо — не просто дизайн персонажа, а й прагматичний прийом. Що підтверджує стару мудрість – «потрібність – мати винахідливості».
Основні етапи створення спрайту 32×32 пікселя нам уже знайомі: скетч, колір, тіні, подальше доопрацювання. Але в таких умовах, як початковий скетч, я підбираю кольорові фігури замість малювання контурів через маленький розмір. Колір грає найважливішу роль визначенні персонажа, ніж контури. Подивіться на Маріо ще раз, він взагалі не має контурів. Цікаві не лише вуса. Його бакенбарди визначають форму вух, рукави показують руки, а загальна форма більш-менш чітко відображає його тіло.
Створення маленьких спрайтів це постійні компроміси. Якщо ви додаєте обведення, можете втратити місце для тіні. Якщо у вашого персонажа чітко відображені руки та ноги, голова швидше за все має бути не дуже великою. Якщо ефективно використовувати колір, вибіркове обведення та згладжування, то обмальований об'єкт буде здаватися більше, ніж він є насправді.
Для маленьких спрайтів мені подобається стиль тибі: персонажі виглядають дуже мило, у них великі голови та очі. Відмінний спосіб створити яскравого героя в обмеженому просторі, та й загалом, дуже приємний стиль. Але, можливо, вам потрібно показати мобільність або силу персонажа, тоді ви можете приділити менше простору голові, щоб тіло виглядало потужнішим. Все залежить від ваших уподобань та цілей.
Ціла команда у зборі!
формати файлів
Такий результат може змусити понервувати будь-якого піксель-артиста
Картинка, яку ви бачите, — результат збереження малюнка в JPG. Частина даних загубилася через алгоритми стиснення файлу. Якісний піксель-арт зрештою виглядатиме погано, а повернути його початкову палітру буде непросто.
Використовуйте формат PNG для збереження статичної картинки без втрати якості. Для анімацій – GIF.
Як правильно ділитися піксель-артом
Шерінг піксель-арту в соціальних мережах — чудовий спосіб отримати фідбек та познайомитися з іншими художниками, які працюють у тому самому стилі. Не забудьте поставити хештег #pixelart. На жаль, соцмережі часто конвертують PNG у JPG без попиту, погіршуючи вашу роботу. Причому не завжди зрозуміло, чому ваша картинка була конвертована.
Є кілька порад, як зберегти піксель-арт у потрібній якості для різних соціальних мереж.
Щоб PNG-файл не змінився на Twitter, використовуйте менше 256 кольорів або , що ваш файл менший за 900 пікселів по довгій стороні. Я збільшив би розмір файлу хоча б до 512×512 пікселів. Причому так, щоб масштабування було кратно 100 (200%, а не 250%) та зберігалися різкі краї (Nearest Neighbor у Photoshop).
Анімовані GIF-файли для постів у Twitter важити трохи більше 15 Мб. Картинка має бути як мінімум 800×800 пікселів, циклічна анімація має повторюватися тричі, а останній кадр має бути наполовину коротшим за часом, ніж решта — найпопулярніша теорія. Однак, незрозуміло, наскільки потрібно виконувати ці вимоги з огляду на те, що Twitter постійно змінює свої алгоритми відображення картинок.
Наскільки я знаю неможливо опублікувати картинку в Instagram без втрати якості. Але вона точно виглядатиме краще, якщо ви збільшите її хоча б до 512х512 пікселів.
Джерело: habr.com