На инди-разработчиците често им се налага да изпълняват няколко роли едновременно: геймдизайнер, програмист, композитор, художник. И когато стане въпрос за визуала, много от тях избират пикселно изкуство — на пръв поглед изглежда просто. Но за да се постигне естетика, е необходимо много опит и специфични умения. Намерих туториал за тези, които току-що започват да изучават основите на този стил: с описание на специален софтуер и техники за рисуване на примери с два спрайта.
Фон
Пикселното изкуство е форма на цифрово художествено изкуство, при която промените се внасят на ниво пиксели. То се свързва основно с графиката на видео игри от 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. Изборен контур
По-рано контурите бяха напълно черни, което правеше спрайта да изглежда много карикатурно. Картината изглеждаше като разделена на сегменти. Например, черните линии на ръката твърде контрастно показват мускулатурата и персонажът изглежда по-малко цялостен.
Ако спрайт стане по-естествен, а сегментацията не е толкова явна, основните форми на персонажа ще бъдат по-лесни за четене. За целта може да се използва селективен контур — частично да се замени черния контур с по-светъл. На осветената част на спрайта могат да се използват най-светлите цветове или, там където спрайтът се докосва до негативното пространство, контурът може напълно да се премахне. Вместо черно, трябва да се използва цветът, избран за сянка — така ще се запази сегментацията (за разграничаване на мускули, козина и т.н.).
Също така на този етап добавих по-тъмни сенки. Получиха се три градации на зелено на кожата на орка. Най-тъмно-зеленият цвят може да се използва за селективния контур и 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 без да питат, влошавайки вашата работа. И не винаги е ясно защо вашата снимка е била конвертирана.
Има няколко съвета как да запазите пиксел арт в нужното качество за различни социални мрежи.
За да не се промени PNG файлът в Twitter, използвайте по-малко от 256 цвята или , че вашият файл е по-малък от 900 пиксела по дългата страна. Препоръчвам да увеличите размера на файла поне до 512×512 пиксела. Важно е да се уверите, че мащабирането е кратно на 100 (200%, а не 250%) и че ръбовете остават остри (Nearest Neighbor в Photoshop).
Анимираните GIF файлове за публикации в Twitter трябва да тежат не повече от 15 MB. Снимката трябва да е поне 800×800 пиксела, цикличната анимация трябва да се повтаря три пъти, а последният кадър трябва да е с наполовина по-кратко време от всички останали — това е най-популярната теория. Обаче не е ясно в каква степен трябва да се спазват тези изисквания, имайки предвид, че Twitter постоянно променя алгоритмите за показване на изображения.
Насколько я знаю, невъзможно е да се публикува изображение в Instagram без загуба на качество. Но определено ще изглежда по-добре, ако го увеличите поне до 512х512 пиксела.
Източник: habr.com
