Pixel art за начинаещи: инструкции за употреба

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

фон

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

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

Metal Slug 3 (Аркада). СНК, 2000 г

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

Като цяло предупредих.

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

мек

Основни дигитални инструменти за пикселно изкуство - Zoom (Увеличаване) и Pencil (Молив) за поставяне на пиксели. Ще ви трябват също линия (линия), фигура (форма), избор (избор), преместване (преместване) и запълване (кофа за рисуване). Има много безплатни и платени софтуери с такъв набор от инструменти. Ще говоря за най-популярните и тези, които използвам сам.

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

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

Пискел (е свободен)

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

GraphigsGale (е свободен)

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

Асеприт ($)

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

GameMaker Студио 2 ($$+)

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

Photoshop ($$$+)

Photoshop е скъп софтуер, разпространяван чрез абонамент, който не е предназначен за пикселно изкуство. Не препоръчвам закупуването на това, освен ако не харесвате илюстрации с висока разделителна способност или не е нужно да правите сложни манипулации на изображения, както правя аз. Можете да създавате статични спрайтове и пикселно изкуство в него, но е доста сложно в сравнение със специализиран софтуер (като GraphicsGale или Aseprite).

Друг

Моят комплект за пикселно изкуство. Всичко е черно, току що забелязах.

Графичен таблет ($$+)

Препоръчвам графични таблети за всяка работа с цифрови илюстрации, за да избегнете синдрома на карпалния тунел. Много по-лесно е да се предотврати, отколкото да се лекува. Един ден ще почувствате болката и тя само ще се влоши - погрижете се за себе си от самото начало. Поради факта, че преди рисувах с мишка, сега ми е трудно да играя игри, които изискват натискане на клавиши. В момента използвам Wacom Intuos Pro S.

Поддръжка на китката ($)

Ако не можете да вземете таблет, купете си поне шублер за китка. Моят фаворит е Mueller Green Fitted Wrist Brace. Останалите са или прекалено стегнати, или не осигуряват достатъчна опора. Челюсти могат да бъдат поръчани онлайн без никакви проблеми.

96 × 96 пиксела

финална битка. Capcom, 1989 г

Да започваме! Нека започнем със символен спрайт 96x96 px. Като пример, нарисувах орк и го поставих на екранната снимка от Final Fight (снимката по-горе), така че да получите мащаба. Това большой спрайт за повечето ретро игри, размер на екранната снимка: 384×224 пиксела.

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

1. Изберете палитра

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

За този урок ще използвам палитрата от 32 цвята, за която създадохме НЛО 50. За пикселно изкуство те често се сглобяват от 32 или 16 цвята. Нашата е предназначена за измислена конзола, която може да се появи някъде между Famicom и PC Engine. Можете да го вземете или който и да е друг - урокът изобщо не зависи от избраната палитра.

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

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

3. Контуриране

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

подутини

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

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

Примери:

Директно

Криви

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

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

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

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

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

5. Засенчване

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

Форма и обем

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

Изглаждане (анти-алиасинг, анти-алиасинг)

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

Сивите пиксели омекотяват "счупванията" в линията. Колкото по-дълъг е линейният сегмент, толкова по-дълъг е AA сегментът.

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

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

6. Селективна верига

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

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

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

7. Довършителни работи

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

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

Създаване на шум (трептене, трептене)

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

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

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

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

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

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

Какюсей (PC-98). Елф, 1996 г
Има само 16 цвята в това изображение!

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

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

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

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

32×32 пиксела

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

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

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

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

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

Целият екип е тук!

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

Подобен резултат може да изнерви всеки художник на пиксели

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

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

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

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

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

Twitter

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

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

Instagram

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

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