Пикселно изкуство за начинаещи: ръководство за приложение

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

Фон

Пиксел артът е форма на цифрово художествено изкуство, при което измененията се правят на ниво пиксели. Основно се асоциира с графиката на видеоигрите от 80-те и 90-те години. Тогава художниците трябваше да вземат предвид ограниченията в паметта и ниското разрешение. Сега пиксел артът все още е популярен в игрите и като художествен стил като цяло, въпреки възможността за създаване на реалистична 3D графика. Защо? Дори и без да се вземе предвид носталгията, създаването на чудесна работа в такива строги рамки е приятно и достойно предизвикателство.

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

Metal Slug 3 (Аркадни игри). SNK, 2000 година

Пиксел артът на нивото, на което повечето искат да го създадат, отнема много време, а кратките обучителни материали са много малко. Работейки с 3D модел, можете да го въртите, деформирате, преместите отделни части, да копирате анимации от един модел на друг и така нататък. Пиксел артът на високо ниво почти винаги изисква изключителни усилия за прецизно разполагане на пикселите на всеки кадър.

В общи линии, предупредих.

А сега малко за моя стил: предимно рисувам пикселно изкуство за видеоигри и именно в тях намирам вдъхновение. По-специално съм фен на Famicom/NES, 16-битови конзоли и аркади от 90-те години. Пикселното изкуство на любимите ми игри от това време може да бъде описано като ярко, уверено и чисто (но не твърде много), не може да се нарече остро и минималистично. В този стил работя сам, но вие лесно можете да прилагате идеи и техники от това ръководство за създаване на съвсем различни неща. Изучавайте творбите на различни художници и създавайте пикселно изкуство, което ви харесва!

Софт

Основни цифрови инструменти за пикселно изкуство — Увеличение (Zoom) и Молив (Pencil) за разполагане на пиксели. Също така ще ви трябват Линия (Line), Фигура (Shape), Изберете (Select), Премести (Move) и Заливка (Paint Bucket). Има много безплатен и платен софтуер с такъв набор от инструменти. Ще говоря за най-популярните и тези, които сам ползвам.

Paint (бесплатно)

Ако имате Windows, вграденото в него Paint е примитивна програма, но в нея има всичките инструменти за пикселно изкуство.

Piskel (бесплатно)

Неочаквано функционален редактор за пикселно изкуство, който се стартира през браузъра. Можете да експортирате работата си в PNG или анимиран GIF. Отличен вариант за начинаещи.

GraphicsGale (бесплатно)

GraphicsGale е единственият редактор от тези, за които съм чул, разработен специално за пикселно изкуство и включващ инструменти за анимация. Създаден е от японската компания HUMANBALANCE. От 2017 година се разпространява безплатно и все още е популярен, въпреки нарастващата популярност на Aseprite. За съжаление, работи само на Windows.

Aseprite ($)

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

GameMaker Studio 2 ($$+)

GameMaker Studio 2 е отличен 2D инструмент с добър редактор за спрайтове (Sprite Editor). Ако искате да създавате пикселно изкуство за собствените си игри, много удобно е всичко да се прави в една програма. Сега използвам този софтуер в работата си по UFO 50, колекция от 50 ретро игри: спрайтове и анимации създавам в GameMaker, а тайлсетите — в Photoshop.

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 цвета, която създадохме за UFO 50. За пиксел арт те често се събират от 32 или 16 цвята. Нашата е разработена за измислена конзола, която би могла да се появи някъде между Famicom и PC Engine. Можете да я вземете или всяка друга — туториалът съвсем не зависи от избраната палитра.

2. Груби контури

Нека започнем с рисуването с инструмента Писалка. Ще нарисуваме ескиз, както го правим с обикновен химикал и хартия. Разбира се, пиксел артът и традиционното изкуство се пресичат, особено когато става въпрос за такива големи спрайтове. Моите наблюдения показват, че добрите пиксел артисти поне в известна степен рисуват добре на ръка и обратно. Така че е полезно да се развиват уменията за рисуване.

3. Изработка на контури

Доработваме контурите: премахваме излишните пиксели и намаляваме дебелината на всяка линия до един пиксел. Но какво точно да считаме за излишно? За да отговорим на този въпрос, трябва да разберем пикселни линии и неравности.

Неравности

Трябва да се научим да рисуваме две основни линии в пиксел арт: прави и криви. С химикал и хартия всичко се свързва с мускулен контрол, но ние работим с малки цветни блокчета.

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

Примери:

Прави

Криви

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

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

4. Нанасяме първите цветове

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

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

5. Сенки

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

Форма и обем

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

Анти-алайзинг

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

Сивите пиксели смекчават 'разрывите' в линията. Колкото по-дълъг е сегментът на линията, толкова по-дълъг е АА-сегментът.

Така АА изглежда на рамото на орка. Той е необходим, за да се изгладят линиите, изобразяващи извивките на мускулите му.

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

6. Изборен контур

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

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

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

7. Финални щрихи

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

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

Създаване на шумове (dithering, дизеринг)

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

Горният градиент от тъмен към светъл използва стотици различни нюанси на синьо.

Средният градиент използва само девет цвята, но все още има твърде много нюанси на един цвят. Възниква така нареченото бандинг (от англ. band — лента), при което поради дебели хомогенни ленти окото се фокусира на точките на контакт между цветовете, а не върху самите цветове.

На долния градиент приложихме дизеринг, който позволява да се избегне бандинга и използва само два цвята. Създаваме шум с различна интензивност, за да имитираме градация на цвета. Техниката е много подобна на халфтон (halftone — полутоново изображение), използвано при печат; също така на стипплинг (stippling — зернесто изображение) — в илюстрации и комикси.

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

Ако искате да видите пример с мащабен и качествен дизеринг, разгледайте игрите на The Bitmap Brothers, британско студио от 80-те години, или игри на компютър PC-98. Само имайте предвид, че всички те са NSFW.

Kakyusei (PC-98). Elf, 1996 година
На тази снимка има само 16 цвята!

8. Последен поглед

Една от опасностите на пикселното изкуство е, че изглежда лесно и просто (поради структурата и ограниченията на стила). Но в крайна сметка ще похарчите огромно количество време за работа по спрайтовете си. Това е като пъзел, който трябва да решите — именно затова пикселното изкуство привлича перфекционистите. Запомнете, че един спрайт не трябва да отнема твърде много време — това е просто малка част от изключително сложна съвкупност от части. Важно е да не губите виждането на общата картина.

Дори и ако вашето пикселно изкуство не е за игри, понякога е полезно да си кажете: "Всичко е достатъчно добро!" И да продължите напред. Най-добрият начин да развиете уменията си е да преминете целия процес отначало до край възможно най-много пъти, използвайки колкото се може повече теми.

Понякога е полезно да оставите спрайта за малко, за да погледнете на него по-късно с нов поглед.

32×32 пиксела

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

В Super Mario Bros. окото на Марио е само два пиксела, разположени един над друг. И ухото му също. Създателят на персонажа Сигеру Миямото каза, че мустаците са били необходими, за да отделят носа от останалата част на лицето. Така че една от главните черти на лицето на Марио не е просто дизайн на персонажа, а прагматичен трик. Което потвърдило старата мъдрост — "нуждата е майка на изобретателността."

Основните етапи за създаване на спрайт с размер 32×32 пиксела вече са ни познати: скица, цветове, сенки, последващо дообработка. Но при такива условия, като начален скица, подбирам цветни фигури вместо да рисувам контури, поради малкия размер. Цветът играе по-важна роля в определянето на персонажа, отколкото контурите. Погледнете Марио отново, той изобщо няма контури. Интересни са не само мустаците. Неговите бакенбарди определят формата на ушите, ръкавите показват ръцете, а общата форма по-горе или по-долу ясно отразява цялото му тяло.

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

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

Цяла команда е на линия!

Формати на файлове

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

Снимката, която виждате, е резултат от запазването на изображение в JPG. Част от данните се загуби поради алгоритмите за компресия на файла. Качественият пиксел арт в крайна сметка ще изглежда зле и възстановяването на първоначалната му палитра ще бъде трудно.

За запазване на статично изображение без загуба на качество, използвайте формат PNG. За анимации — GIF.

Как да споделяте пиксел арт правилно

Споделянето на пиксел арт в социалните мрежи е отличен начин да получите обратна връзка и да се запознаете с други художници, работещи в същия стил. Не забравяйте да добавите хаштаг #pixelart. За съжаление, социалните мрежи често конвертират PNG в JPG без предупреждение, влошавайки работата ви. И не винаги е ясно защо изображението ви е било конвертирано.

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

Twitter

За да не се промени PNG файлът в Twitter, използвайте по-малко от 256 цвята или се уверете, че файлът ви е по-малък от 900 пиксела по дългата страна. Бих увеличил размера на файла поне до 512×512 пиксела. Освен това, мащабирането трябва да бъде кратно на 100 (200%, а не 250%) и да се запазят остри ръбове (Nearest Neighbor в Photoshop).

Анимираните GIF файлове за публикации в Twitter треватe не трябва да тежат повече от 15 MB. Снимката трябва да бъде поне 800×800 пиксела, цикличната анимация трябва да се повтори три пъти, а последният кадър трябва да бъде наполовина по-кратък по време от останалите — най-популярната теория. Въпреки това, не е ясно до каква степен трябва да се спазват тези изисквания, като се има предвид, че Twitter постоянно променя своите алгоритми за показване на снимки.

Instagram

Насколько знам, невъзможно е да публикувате снимка в Instagram без загуба на качество. Но определено ще изглежда по-добре, ако увеличите размера ѝ поне до 512х512 пиксела.

Източник: habr.com