Инди програмерите честопати треба да комбинираат неколку улоги одеднаш: дизајнер на игри, програмер, композитор, уметник. А кога станува збор за визуелните слики, многу луѓе избираат уметност со пиксели - на прв поглед изгледа едноставно. Но, за да го направите тоа убаво, ви треба многу искуство и одредени вештини. Најдов туторијал за оние кои штотуку почнаа да ги разбираат основите на овој стил: со опис на специјален софтвер и техники на цртање користејќи два спрајти како пример.
позадина
Пикселната уметност е форма на дигитална уметност во која се прават промени на ниво на пиксели. Тоа е главно поврзано со графика на видео игри од 80-тите и 90-тите години. Тогаш, уметниците мораа да ги земат предвид ограничувањата на меморијата и ниската резолуција. Во денешно време, уметноста со пиксели е сè уште популарна во игрите и како уметнички стил воопшто, и покрај можноста за создавање реалистична 3D графика. Зошто? Носталгијата настрана, создавањето кул работа во толку тесна рамка е пријатен и наградувачки предизвик.
Бариерата за влез во уметноста со пиксели е релативно мала во споредба со традиционалната уметност и 3Д графиката, што ги привлекува инди-програмерите. Но, тоа не значи дека ќе биде лесно заврши игра во овој стил. Сум видел многу инди-програмери со пикселна уметност metroidvania на платформи за групно финансирање. Мислеа дека сè ќе завршат за една година, но во реалноста им требаа уште шест години.
Метален голтка 3 (Аркада). СНК, 2000 година
Уметноста со пиксели на нивото на кое повеќето луѓе сакаат да ја креираат одзема многу време, а има многу малку кратки упатства. Кога работите со 3D модел, можете да го ротирате, деформирате, да ги преместувате неговите поединечни делови, да копирате анимации од еден модел на друг итн. Уметноста со пиксели на високо ниво речиси секогаш бара многу напор за прецизно поставување на пиксели на секоја рамка.
Во принцип, ве предупредив.
И сега малку за мојот стил: главно цртам уметност со пиксели за видео игри и наоѓам инспирација во нив. Конкретно, јас сум обожавател на Famicom/NES, 16-битни конзоли и аркадни игри од 90-тите. Пикселната уметност на моите омилени игри од ерата може да се опише како светла, самоуверена и чиста (но не премногу чиста), наместо остра и минималистичка. Ова е стилот што го работам во себе, но можете лесно да ги примените идеите и техниките од овој туторијал за да создадете сосема различни работи. Истражете ја работата на различни уметници и создадете уметност со пиксели што ви се допаѓа!
Софтвер
Основните дигитални алатки за уметност со пиксели се Зум и молив за поставување на пикселите. Ќе ви бидат корисни и Line, Shape, Select, Move и Paint Bucket. Има многу бесплатен и платен софтвер со таков сет на алатки. Ќе ви кажам за најпопуларните и оние што ги користам сам.
Боја (бесплатно)
Ако имате Windows, вградената Paint е примитивна програма, но ги има сите алатки за уметност со пиксели.
(бесплатно е)
Неочекувано функционален уредувач на уметност со пиксели што поминува низ прелистувачот. Можете да ја извезете вашата работа како PNG или анимиран GIF. Одлична опција за почетници.
(бесплатно е)
GraphicsGale е единствениот уредник за кој сум слушнал дека е специјално дизајниран за уметност со пиксели и вклучува алатки за анимација. Создаден е од јапонската компанија HUMANBALANCE. Бесплатно е достапен од 2017 година и сè уште е на побарувачката, и покрај порастот на популарноста на Aseprite. За жал, работи само на Windows.
($)
Можеби најпопуларниот уредник во моментот. , многу функции, активна поддршка, верзии за Windows, Mac и Linux. Ако сте сериозни во врска со уметноста со пиксели и сè уште не сте го нашле вистинскиот уредувач, можеби ова е оној што ви треба.
($$+)
GameMaker Studio 2 е одлична 2D алатка со добар Sprite Editor. Ако сакате да креирате уметност со пиксели за вашите сопствени игри, многу е погодно да правите сè во една програма. Сега го користам овој софтвер додека работам , колекција од 50 ретро игри: создавам sprites и анимации во GameMaker и плочки во Photoshop.
($$$+)
Photoshop е скап софтвер, дистрибуиран со претплата и не е дизајниран за уметност со пиксели. Не препорачувам да го купите освен ако не сте вклучени во рендерирање на илустрации со висока резолуција или не треба да вршите сложени манипулации со сликата, како мене. Можете да креирате статични sprites и pixel art во него, но тој е доста сложен во споредба со специјализираниот софтвер (на пример, GraphicsGale или Aseprite).
Останати
Мојот комплет за уметност со пиксели. Се е црно, само сега го забележав.
Графички таблет ($$+)
Препорачувам графички таблети за која било работа со дигитална илустрација за да се избегне синдром на карпален тунел. Многу е полесно да се спречи отколку да се лекува. Еден ден ќе почувствувате болка и таа само ќе се зголеми - грижете се за себе од самиот почеток. Бидејќи порано цртав со глушец, сега ми е тешко да играм игри кои бараат од мене да притискам копчиња. Моментално користам Wacom Intuos Pro S.
Поддршка за зглоб ($)
Ако не можете да земете таблета, земете барем поддршка за зглобот. Мој омилен е Mueller Green Fitted Wrist Brace. Останатите се или премногу тесни или не даваат доволно поддршка. Калиперите може да се нарачаат онлајн без никаков проблем.
96 × 96 пиксели
Завршна борба. Капком, 1989 година
Ајде да почнеме! Ајде да почнеме со 96x96 пиксели на знакот sprite. Како пример, нацртав орк и го ставив на скриншот од Final Fight (слика погоре) за да можете да ја разберете скалата. Ова большой sprite за повеќето ретро игри, големина на скриншот: 384x224 пиксели.
На толку голем спрајт ќе биде полесно да се прикаже техниката за која сакам да зборувам. Рендерирањето по пиксели е исто така послично на традиционалните форми на уметност (како цртање или сликање) со кои можеби сте повеќе запознаени. Совладувајќи ги основните техники, ќе преминеме на помали sprites.
1. Изберете палета
Pixel е многу подлабок концепт во уметноста на пиксели отколку во која било друга дигитална област. Пикселната уметност е дефинирана со нејзините ограничувања, како што се боите. Важно е да ја изберете вистинската палета, тоа ќе ви помогне да го одредите вашиот стил. Но, на почетокот, предлагам да не размислувате за палети и да изберете една од постоечките (или само неколку случајни бои) - можете лесно да ја промените во која било фаза.
За ова упатство ќе ја користам палетата од 32 бои што ја создадовме . За пикселна уметност тие често се составуваат од 32 или 16 бои. Нашата е дизајнирана за измислена конзола што би се појавила некаде помеѓу Famicom и PC Engine. Можете да го земете или било кој друг - упатството воопшто не зависи од избраната палета.
2. Груби контури
Да почнеме да цртаме со помош на алатката Pencil. Ајде да нацртаме скица на ист начин како што правиме со обично пенкало и хартија. Се разбира, уметноста со пиксели и традиционалната уметност се преклопуваат, особено кога станува збор за толку големи спрајти. Моите набљудувања покажуваат дека уметниците со силна пикселна уметност се барем добри во цртање со рака и обратно. Значи, развивањето на вашите вештини за цртање е секогаш корисно.
3. Обработка на контури
Ние ги рафинираме контурите: отстранете ги дополнителните пиксели и намалете ја дебелината на секоја линија на еден пиксел. Но, што точно се смета за излишно? За да одговорите на ова прашање, треба да ги разберете линиите и неправилностите на пикселите.
Неправилности
Треба да научите како да нацртате две основни линии во уметноста на пиксели: прави и криви. Со пенкало и хартија сè е за контрола на мускулите, но ние работиме со ситни блокови во боја.
Клучот за цртање правилни линии на пиксели е jaggies. Тоа се единечни пиксели или мали сегменти кои ја уништуваат мазноста на линијата. Како што реков претходно, еден пиксел прави огромна разлика во уметноста на пиксели, така што нерамномерноста може да ја уништи целата естетика. Замислете дека цртате права линија на хартија и одеднаш некој удира на масата: испакнатините во уметноста со пиксели изгледаат исто како случајно шкрипење.
Примери:
Директен
Криви
Неправилностите се појавуваат во кривините кога должината на линиите не се зголемува или намалува постепено.
Невозможно е целосно да се избегнат ударите - сите ваши омилени ретро игри ги имаат (освен, се разбира, ако уметноста на пиксели не се состои исклучиво од едноставни форми). Цел: Намалете ја нерамномерноста на минимум додека сè уште покажувате сè што е потребно.
4. Нанесете ги првите бои
Обојте го вашиот лик користејќи полнење или друга соодветна алатка. Палетата ќе го поедностави овој дел од работата. Ако софтверот не предвидува употреба на палети, можете да го поставите директно на сликата, како во примерот погоре, и да изберете бои со помош на капалка за очи.
Во долниот лев агол го нацртав нашиот пријател, запознајте се, ова е Бол. Ќе биде полесно да се разбере што точно се случува во секоја фаза.
5. Засенчување
Време е да се прикажат сенките - само додадете потемни бои на спрајт. Ова ќе направи сликата да изгледа тродимензионална. Да претпоставиме дека имаме еден извор на светлина лоциран над оркот лево од него. Тоа значи дека се што е над и пред нашиот карактер ќе биде осветлено. Додадете сенки доле десно.
Форма и обем
Ако овој чекор е предизвик за вас, помислете на вашиот цртеж како тродимензионални форми наместо само линии и бои. Формите постојат во тродимензионалниот простор и можат да имаат волумен, кој го градиме со помош на сенки. Ова ќе ви помогне да го визуелизирате ликот без детали и да замислите дека е направен од глина, а не од пиксели. Засенчувањето не е само додавање нови бои, тоа е процес на градење форма. На добро дизајниран лик, деталите не ги кријат основните форми: ако кривогледате, ќе видите некои големи групи на светлина и сенка.
Анти-алиасинг (анти-алиасинг)
Секој пат кога користам нова боја, нанесувам анти-алиасинг (АА). Тоа помага да се изедначат пикселите со додавање на средни бои на аглите каде што се спојуваат два сегменти на линии:
Сивите пиксели ги омекнуваат „паузите“ во линијата. Колку е подолг сегментот на линијата, толку е подолг сегментот АА.
Вака изгледа АА на рамо на орк. Потребно е за да се изедначат линиите што ја покажуваат кривата на неговите мускули
Анти-алиасингот не треба да се протега подалеку од спрајтот што ќе се користи во играта или на позадина чија боја е непозната. На пример, ако нанесете АА на светла заднина, анти-алиасингот ќе изгледа грдо на темна позадина.
6. Селективен преглед
Претходно, контурите беа целосно црни, поради што спрајтот изгледаше многу цртан. Сликата како да беше поделена на сегменти. На пример, црните линии на раката даваат премногу контраст на мускулатурата, што го прави ликот да изгледа помалку кохезивен.
Ако спрајтот стане поприроден, а сегментацијата помалку очигледна, основните форми на ликот ќе бидат полесни за читање. За да го направите ова, можете да користите селективен преглед - делумно заменете го црниот преглед со полесен. На осветлениот дел од спрајт, можете да ги користите најсветлите бои или, каде што спрајтот допира негативен простор, можете целосно да го отстраните контурите. Наместо црна, треба да ја користите бојата што е избрана за сенката - на овој начин ќе се зачува сегментацијата (да се прави разлика помеѓу мускулите, крзното итн.).
Додадов и потемни сенки во оваа фаза. Резултатот беше три градации на зелена боја на кожата на орките. Најтемната зелена боја може да се користи за селективен преглед и АА.
7. Завршни допири
Конечно, вреди да се додадат нагласени точки (најсветли точки на спрајт), детали (обетки, столпчиња, лузни) и други подобрувања додека ликот не биде подготвен или додека не мора да преминете на следниот.
Постојат неколку корисни техники кои можат да се применат во оваа фаза. Завртете го цртежот хоризонтално, ова често помага да се идентификуваат грешките во пропорциите и засенчувањето. Можете исто така да ја отстраните бојата - поставете ја заситеноста на нула за да разберете каде треба да ги промените сенките.
Создавање бучава (задупчување, непречено)
Досега најчесто користевме големи, цврсти површини во сенка. Но, постои уште една техника - дитерирање, која ви овозможува да одите од една во друга боја без да додавате трета. Погледнете го примерот подолу.
Горниот градиент од темно до светло користи стотици различни нијанси на сино.
Просечниот градиент користи само девет бои, но сепак има премногу нијанси со иста боја. Настанува таканаречена лента (од англискиот band - stripe), во која, поради дебели еднообразни ленти, окото се фокусира на точките на допир на боите, наместо на самите бои.
На долниот градиент применивме дитерирање, со што се избегнува бендирање и користи само две бои. Создаваме шум со различен интензитет за да симулираме градација на бојата. Оваа техника е многу слична на полутонот (слика полутон) што се користи во печатењето; како и стиплинг (зрнеста слика) - во илустрации и стрипови.
На орк, јас доста се оттргнав за да пренесам текстура. Некои пиксели уметници воопшто не го користат, други, напротив, не се срамежливи и го прават тоа многу вешто. Сметам дека нередот најдобро изгледа на големи површини исполнети со една боја (погледнете го небото во скриншот на Metal Slug погоре) или на области што треба да изгледаат грубо и нерамно (како нечистотија). Одлучете сами како да го користите.
Ако сакате да видите пример на големо и висококвалитетно раздвојување, проверете ги игрите на The Bitmap Brothers, британско студио од 80-тите или игрите на компјутерот PC-98. Само имајте на ум дека сите тие се NSFW.
Kakyusei (PC-98). Елф, 1996 година
На оваа слика има само 16 бои!
8. Последен поглед
Една од опасностите на пикселната уметност е тоа што изгледа лесно и едноставно (поради нејзината структура и стилски ограничувања). Но, на крајот ќе потрошите огромно време за рафинирање на вашите духови. Тоа е како загатка што треба да се реши - поради што уметноста со пиксели ги привлекува перфекционистите. Запомнете дека еден спрајт не треба да одзема премногу време - тоа е само мало парче од исклучително сложената колекција на парчиња. Важно е да не се изгуби од вид големата слика.
Дури и ако вашата уметност со пиксели не е за играње, понекогаш вреди да си кажете: „Веќе е доволно добро!“ И продолжи понатаму. Најдобар начин да ги развиете своите вештини е да го поминете целиот процес од почеток до крај колку што е можно повеќе пати, користејќи што е можно повеќе теми.
И понекогаш е корисно да оставите спрајт некое време за да можете да го погледнете со свежи очи малку подоцна.
32×32 пиксели
Прво создадовме голем спрајт од 96x96 пиксели затоа што со таа големина е повеќе како цртање или сликање, но со пиксели. Колку е помал спрајтот, толку е помалку сличен со она што треба да го прикаже и поважен е секој пиксел.
Во Супер Марио Брос. Окото на Марио е само два пиксели, еден врз друг. И неговото уво исто така. Креаторот на ликот Шигеру Мијамото рече дека мустаќите се потребни за да се одвои носот од остатокот од лицето. Значи, една од главните карактеристики на Марио не е само дизајн на ликови, туку прагматичен трик. Што ја потврдува старата мудрост - „неопходноста е мајка на пронајдокот“.
Веќе ни се познати главните фази на создавање на спрајт од 32x32 пиксели: скица, боја, сенки, дополнително префинетост. Но, во такви услови, како почетна скица, избирам обоени форми наместо да цртам контури поради малата големина. Бојата игра поважна улога во дефинирањето на ликот отколку контурите. Погледни го Марио пак, тој воопшто нема контури. Не се интересни само мустаќите. Неговите бакенбари го дефинираат обликот на неговите уши, ракавите му ги покажуваат рацете, а целокупната форма повеќе или помалку јасно го оцртува целото тело.
Создавањето мали sprites е постојан компромис. Ако додадете мозочен удар, може да изгубите простор за сенката. Ако вашиот карактер има јасно видливи раце и нозе, главата веројатно не треба да биде многу голема. Ако користите боја, селективен потег и ефективно анти-алиасирање, прикажаниот објект ќе изгледа поголем отколку што всушност е.
За мали спрајти ми се допаѓа стилот на чиби: ликовите изгледаат многу слатко, имаат големи глави и очи. Одличен начин да се создаде шарен лик во ограничен простор, а во целина многу убав стил. Но, можеби треба да ја покажете мобилноста или силата на ликот, тогаш можете да и дадете помалку простор на главата за да го направите телото да изгледа помоќно. Сето тоа зависи од вашите преференции и цели.
Целиот тим е составен!
Формати на датотека
Овој резултат може да го направи нервозен секој изведувач на пиксели
Сликата што ја гледате е резултат на зачувување на сликата во JPG. Некои податоци се изгубени поради алгоритми за компресија на датотеки. Висококвалитетната пикселна уметност на крајот ќе изгледа лошо, а враќањето во неговата оригинална палета нема да биде лесно.
За да зачувате статична слика без губење на квалитетот, користете го форматот PNG. За анимации - GIF.
Како правилно да споделувате уметност со пиксели
Споделувањето уметност со пиксели на социјалните мрежи е одличен начин да добиете повратни информации и да запознаете други уметници кои работат во ист стил. Не заборавајте да го користите хаштагот #pixelart. За жал, социјалните мрежи често го претвораат PNG во JPG без да прашуваат, што го влошува вашето искуство. Покрај тоа, не е секогаш јасно зошто вашата слика е конвертирана.
Постојат неколку совети како да ја зачувате уметноста на пиксели со потребниот квалитет за различни социјални мрежи.
За да ја задржите вашата PNG-датотека непроменета на Twitter, користете помалку од 256 бои или дека вашата датотека е помала од 900 пиксели на најдолгата страна. Би ја зголемил големината на датотеката на најмалку 512x512 пиксели. И така што скалирањето е повеќекратно од 100 (200%, а не 250%) и се зачувани острите рабови (Најблискиот сосед во Photoshop).
Анимирани GIF за објави на Твитер тежат не повеќе од 15 MB. Сликата мора да биде најмалку 800x800 пиксели, анимацијата за циклус мора да се повторува три пати, а последната рамка мора да биде половина долга од сите останати - најпопуларната теорија. Сепак, не е јасно до кој степен треба да се исполнат овие барања, имајќи предвид дека Twitter постојано ги менува алгоритмите за прикажување на слики.
Колку што знам, невозможно е да се објави слика на Инстаграм без да се изгуби квалитетот. Но, дефинитивно ќе изгледа подобро ако го зголемите на најмалку 512x512 пиксели.
Извор: www.habr.com