Какво е Pixel Art? Примери и как да го научим. Pixel Art

Тук ли си: Детски игри

Pixel Art е много популярен за игри дори в наши дни и има няколко причини за това!

И така, какво пленява Pixel Art:

Възприятие.Пиксел арт изглежда невероятно! Има много какво да се каже за всеки отделен пиксел в спрайт.
Носталгия. Pixel Art връща страхотно носталгично чувство за геймърите, които са израснали, играейки Nintendo, Super Nintendo или Genesis (като мен!)
Лекота на учене. Pixel art е едно от най-лесните за научаване дигитални изкуства, особено ако сте повече програмист, отколкото художник ;]

И така, искате ли да опитате ръката си в Pixel Art? След това ме последвайте и аз ще ви покажа как да направите прост, но ефективен герой, който можете да използвате в собствената си игра! Освен това, като бонус, ще разгледаме как да го интегрираме в игри за iPhone!

За успешно обучение ще ви трябва Adobe Photoshop. Ако го нямате, можете да изтеглите безплатна пробна версия от уебсайта на Adobe или торент.

Какво е Pixel Art?

Преди да започнем, нека изясним какво е Pixel Art, не е толкова очевидно, колкото си мислите. Най-лесният начин да определите какво е Pixel Art е да посочите какво не е, а именно: всичко, където пикселите се създават автоматично. Ето няколко примера:

Градиент: Изберете два цвята и изчислете цвета на пикселите между тях. Изглежда страхотно, но не е Pixel Art!

Инструмент за размазване: откриване на пиксели и тяхното репликиране/редактиране, за да се направи нова версия на предишното изображение. Отново не е пикселна диаграма.

Инструмент за изглаждане(предимно генериране на нови пиксели в различни цветове, за да се направи нещо "гладко"). Трябва да ги избягвате!

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

Други инструменти като (ред) или инструмент за кофа за боядисване(Paint Bucket) също автоматично генерира пиксели, но тъй като можете да ги настроите да не изглаждат кривата на запълнените пиксели, тези инструменти се считат за подходящи за Pixel Art.

Така открихме, че Pixel Art изисква много внимание при поставянето на всеки пиксел в спрайт, най-често на ръка и с ограничена палитра от цветове. Да се захващаме за работа сега!

Начало на работа

Преди да започнете да правите първия си Pixel Art актив, трябва да знаете, че Pixel Art не може да бъде мащабиран. Ако се опитате да го намалите, всичко ще изглежда размазано. Ако се опитате да го увеличите, всичко ще изглежда приемливо, стига да използвате мащабиране, което е кратно на две (но, разбира се, няма да има яснота).

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

Например, ако искате играта ви да изглежда два пъти по-голяма на iPhone 3GS („Да, наистина искам да придам на играта си пикселизиран ретро вид!“), който има разделителна способност на екрана 480x320 пиксела, тогава трябва да работите при половината от резолюцията в този случай ще бъде 240x160 пиксела.

Отворете нов документ на Photoshop ( Файл → Нов...) и задайте размера да бъде размера на екрана на вашата игра, след което изберете размера за вашия герой.

Всяка клетка е 32x32 пиксела!

Избрах 32x32px не само защото е страхотен за размера на екрана, който избрах, но и защото 32x32px също е кратно на 2, което е удобно за двигатели за играчки (размерите на плочките често са кратни на 2, текстурите се подравняват).кратно на 2, и т.н.

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

Как да нарисувате Pixel Art герой

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

Във Photoshop изберете молив инструмент(Инструмент за молив). Ако не можете да го намерите, просто натиснете и задръжте инструмента четка(Brush Tool) и веднага ще го видите (трябва да е втори в списъка). Просто ще трябва да го преоразмерите до 1px (можете да щракнете върху лентата с опции на инструмента и да го преоразмерите или просто да задържите клавиша [).

Също така ще ви трябва Инструмент за изтриване(Eraser Tool), затова щракнете върху него (или натиснете клавиша E) и променете настройките му, като изберете от падащия списък режим:(Режим:) Молив(Молив) (тъй като в този режим няма трептене).

Сега нека започнем да пикселизираме! Начертайте вежди и очи, както е показано на изображението по-долу:

ей! Пикселизирана съм!!

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

Не е нужно да сте професионалист на този етап

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

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

Ако смятате, че инструментът Молив е твърде бавен за рисуване, винаги можете да го използвате (Line Tool), просто не забравяйте, че няма да можете да позиционирате пикселите толкова точно, колкото бихте направили с молив. Ще трябва да настроите като по-долу:

Изберете чрез натискане и задържане Инструмент за правоъгълник(Инструмент за правоъгълник)

Отидете до панела с опции на инструмента в падащия списък Изберете режим на инструменти(Режим на контурно рисуване) изберете Pixel, променете Тегло(Width) с 1px (ако вече не е направено) и премахнете отметката Анти-алиас(Изглаждане). Ето как трябва да бъдете:

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

Нанасяне на цветове и сенки

Сега сте готови да започнете да оцветявате нашия герой. Не се притеснявайте да изберете правилните цветове, те ще бъдат много лесни за промяна по-късно, просто се уверете, че всеки има "своя собствен цвят". Използвайте цветовете по подразбиране в раздела Swatches(Прозорец → Мостри).

Оцветете героя си, както е показано по-долу (но не се колебайте да бъдете креативни и да използвате свои собствени цветове!)

Добрият контрастен цвят подобрява четливостта на вашия актив!

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

Не губете време да рисувате всеки пиксел. За да ускорите нещата, използвайте линии за същия цвят или инструмент за кофа за боядисване(Paint Bucket Tool), за да попълните празнините. Между другото, той също ще трябва да бъде конфигуриран. Изберете инструмент за кофа за боядисванев лентата с инструменти (или просто натиснете клавиша G) и променете толерантност(Толеранс) до 0 и премахнете отметката Анти-алиас(Изглаждане).

Ако някога се наложи да използвате Инструмент Magic Wand(Magic Wand Tool) - много полезен инструмент, който избира всички пиксели с един и същи цвят, след което го настройва по същия начин като инструмента "Paint Bucket" - без толеранс и антиалиасинг.

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

Използвайте един и същ източник на светлина за целия актив

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

Използвайте същия източник на светлина, когато засенчвате

А сега, както обещах, малко ръководство за светлина и сенки:

Подправете палитрата си

Много хора използват цветовете на палитрата по подразбиране, но тъй като много хора използват тези цветове, ние ги виждаме в много игри.

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

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

След като намерите правилния, щракнете върху OK и преконфигурирайте инструмента Paint Bucket. Не се притеснявайте, след това можете просто да премахнете отметката от квадратчето „Съседни“ и когато рисувате с новия цвят, всички нови пиксели със същия цвят на фона също ще бъдат боядисани.

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

Премахнете отметката от „Съседни“, за да запълните избраните пиксели със същия цвят

Променете цветовете, ако желаете, и получете по-бляскаво оцветяване на героя! Можете дори да преоцветите контурите, просто се уверете, че се сливат добре с фона.

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

Както можете да видите, изключих anti-aliasing във всички инструменти, които съм използвал досега. Не забравяйте да направите това и в други инструменти, напр. Елипсовидна шатра(Овална зона за избор) и ласо(Ласо).

С тези инструменти можете лесно да промените размера на избрани части или дори да ги завъртите. За да направите това, използвайте произволен инструмент за избор (или натиснете клавиша M), за да изберете област, щракнете с десния бутон и изберете Безплатна трансформация(Безплатна трансформация) или просто натиснете Ctrl + T . За да промените размера на избраната област, плъзнете една от манипулаторите, разположени по периметъра на рамката за трансформация. За да преоразмерите селекцията, като същевременно запазите пропорциите, задръжте натиснат клавиша Shift и плъзнете една от ъгловите манипулатори.

Photoshop обаче автоматично изглажда всичко, което се редактира с Безплатна трансформациятака че преди да редактирате отидете на Редактиране → Предпочитания → Общи(Ctrl + K) и променете интерполация на изображението(Интерполация на изображение) е включена Най-близкия квартал(най-близкия съсед). С две думи, при Най-близкия кварталновата позиция и размер се изчисляват много грубо, не се прилагат нови цветове или прозрачни фолиа и избраните от вас цветове се запазват.

Интегриране на Pixel Art Drawing в iPhone игри

В този раздел ще научите как да интегрирате нашето пикселно изкуство в игра за iPhone, използвайки рамката на играта Cocos2d. Защо обмислям само iPhone? Защото благодарение на поредица от статии за Unity (например: или Игра в стила на Jetpack Joyride в Unity 2D) вече знаете как да работите с тях в Unity и от статии за Crafty (Игри за браузър: Snake) и Impact (Въведение в създаването на игри за браузър игри на Impact) научихте как да ги вграждате в платно и да създавате игри за браузър.

Ако не сте запознати с Cocos2D или разработката на iPhone като цяло, предлагам ви да започнете с един от уроците за Cocos2d и iPhone. Ако имате инсталирани Xcode и Cocos2d, прочетете!

Създайте нов проект iOS → cocos2d v2.x → cocos2d iOS шаблон, наименувайте го PixelArt и изберете iPhone като устройство. Плъзнете създаденото пикселно изкуство, например: sprite_final.png във вашия проект и след това отворете HelloWorldLayer.mи заменете метода за инициализация със следното:

-(id) init ( if((self=)) ( CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = YES; ; ) return self; )

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

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

Скала на героя = 2.0;

Нищо сложно, нали? Компилирайте, стартирайте и... изчакайте, нашият спрайт е размазан!

Това е така, защото по подразбиране Cocos2d изравнява чертежа, когато го мащабира. Не ни трябва, затова добавете следния ред:

Този ред конфигурира Cocos2d да мащабира изображения без анти-алиасинг, така че нашето момче все още изглежда "пикселизирано" Компилирайте, стартирайте и... да, работи!

Обърнете внимание на предимствата от използването на Pixel Art графики - можем да използваме по-малко изображение от това, което се показва на екрана, спестявайки много текстурна памет. Дори не е необходимо да правим отделни изображения за ретина дисплеи!

И какво следва?

Надявам се, че този урок ви е харесал и сте научили малко повече за пикселното изкуство! Преди да се разделим, искам да ви дам няколко съвета:

Винаги се опитвайте да избягвате използването на антиалиасинг, градиенти или твърде много цветове за вашите активи. Това е за ваше добро, особено ако все още сте начинаещ.
Ако НАИСТИНА искате да подражавате на ретро стил, вижте изкуството в 8-битови или 16-битови конзолни игри.
Някои стилове не използват тъмни контури, други не отчитат влиянието на светлината или сянката. Всичко зависи от стила! В нашия урок не нарисувахме сенки, но това не означава, че не трябва да ги използвате.

За начинаещ Pixel Art изглежда най-лесната графика за научаване, но всъщност не е толкова проста, колкото изглежда. Най-добрият начин да подобрите уменията си е практика, практика, практика. Силно препоръчвам да публикувате работата си във форумите на Pixel Art, за да могат други художници да ви дадат съвет – това е чудесен начин да подобрите техниката си! Започнете с малко, практикувайте усърдно, получете обратна връзка и можете да създадете невероятна игра, която ще ви донесе много пари и радост!

"itemprop="image">

В този урок за рисуване на Pixel Art в 10 стъпки ще ви науча как да създадете „спрайт“ (единичен 2D герой или обект). Самият термин, разбира се, идва от видеоигрите.

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

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

Инструменти

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

Как да нарисувате Pixel Art във Photoshop

Докато използвате Photoshop, основното ви оръжие ще бъде Pencil Tool (клавиш B), който е алтернатива на Brush Tool. Моливът ви позволява да оцветявате отделни пиксели, без да отпечатвате цветове.

Полезни са още два инструмента: селекция (клавиш M) и магическа пръчка (клавиш W), за да изберете и плъзнете или копирате и поставите. Не забравяйте, че като задържите клавиша Alt или Shift, докато правите селекция, можете да добавите избраните обекти или да ги изключите от текущия списък за избор. Това е необходимо между другото, когато трябва да изберете неравни обекти.

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

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

линии

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

прави линии

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

извити линии

Когато рисувате извити линии, трябва да се уверите, че спадът или издигането са еднакви по цялата дължина. В този пример чистата линия има интервали 6 > 3 > 2 > 1, но линията с интервали 3 > 1< 3 выглядит зазубренной.

Способността да рисувате линии е ключов елемент на пикселното изкуство. Малко по-нататък ще ви разкажа за anti-aliasing.

Концептуализация

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

Теми за размисъл

За какво ще се използва този спрайт? За сайта ли е или за играта? Ще трябва ли да го направя анимиран по-късно? Ако да, тогава ще трябва да бъде направен по-малък и по-малко детайлен. Обратно, ако в бъдеще не работите със спрайта, можете да прикрепите към него толкова детайли, колкото ви е необходимо. Затова решете предварително за какво точно е необходим този спрайт и изберете оптималните параметри.
Какви са ограниченията? По-рано споменах важността на запазването на цветовете. Основната причина е ограничената палитра от цветове поради системни изисквания (което е изключително малко вероятно в наше време) или за съвместимост. Или за прецизност, ако емулирате определен стил на C64, NES и т.н. Също така си струва да вземете предвид размерите на вашия спрайт и дали той се откроява твърде много на фона на необходимите обекти.

Да опитаме!

В този урок няма ограничения, но исках да се уверя, че моето пикселно изкуство е достатъчно голямо, за да можете да видите в детайли какво се случва във всяка от стъпките. За тази цел реших да използвам като модел Lucha Lawyer, герой от света на кеча. Той би се вписал идеално в бойна игра или динамичен екшън филм.

Верига

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

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

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

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

Първа стъпка: Груб контур

С помощта на мишката или таблета си начертайте груб контур за вашия спрайт. Уверете се, че НЕ е ТВЪРДЕ сурово, т.е. изглежда така, както виждате крайния си продукт.

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

Стъпка втора: полирайте контура

Започнете, като увеличите изображението 6 или 8 пъти. Трябва ясно да виждате всеки пиксел. И след това почистете очертанията. По-специално, обърнете внимание на "бездомните пиксели" (целият контур трябва да е с дебелина не повече от един пиксел), отървете се от назъбените ръбове и добавете малките детайли, които сме пропуснали в първата стъпка.

Дори големите спрайтове рядко надвишават 200 на 200 пиксела. Фразата "правете повече с по-малко" е чудесен начин да се опише процеса на пикселизация. Скоро ще видите, че дори един пиксел има значение.

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

Цвят

Когато контурът е готов, получаваме вид оцветяване, което трябва да се напълни с цветове. Paint, fill и други инструменти ще ни помогнат с това. Съвпадението на цветовете може да бъде трудно, но теорията на цветовете очевидно не е темата на тази статия. Както и да е, има няколко основни концепции, които трябва да знаете.

Цветен модел HSB

Това е английско съкращение, съставено от думите "Hue, Saturation, Brightness". Това е само един от многото компютърни цветови модели (или числени представяния на цвета). Вероятно сте чували за други примери като RGB и CMYK. Повечето редактори на изображения използват HSB за избор на цвят, така че ще се съсредоточим върху него.

HueНюансът е това, което свикнахме да наричаме цвят.

Насищане– Наситеност – определя интензивността на цвета. Ако стойността е 100%, тогава това е максималната яркост. Ако го намалите, тогава в цвета ще се появи тъпота и той ще „стане сив“.

яркост- светлина, която излъчва цвят. Например за черно този индикатор е 0%.

Избор на цветове

Решението кои цветове да изберете зависи от вас, но има няколко неща, които трябва да имате предвид:

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

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

Апликиране на цветя

Нанасянето на цвят е много лесно. Ако използвате Photoshop, просто изберете желания фрагмент, изберете го с магическа пръчка (клавиш W) и след това го запълнете с основния цвят (Alt-F) или вторичен цвят Ctrl-F).

засенчване

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

Първа стъпка: изберете източник на светлина

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

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

Стъпка втора: Засенчване директно

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

Спомнете си, че плоските неща не могат да хвърлят сянка. Вземете лист хартия, намачкайте го и го разточете по масата. Откъде знаеш, че вече не е плоско? Просто видя сенките около него. Използвайте засенчване, за да подчертаете гънките в дрехите, мускулите, козината, цвета на кожата и т.н.

Трета стъпка: меки сенки

Вторият нюанс, който е по-светъл от първия, трябва да се използва за създаване на меки сенки. Това е необходимо за зони, които не са директно осветени. Могат да се използват и за преминаване от светло към тъмно и върху неравни повърхности.

Четвърта стъпка: осветени места

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

Спестете си главоболието, като запомните едно просто правило: първо сенките, след това светлите. Причината е проста: ако няма сенки, твърде големи фрагменти ще бъдат изложени и когато приложите сенките, те ще трябва да бъдат намалени.

Някои полезни правила

Сенките винаги са трудни за начинаещи, така че ето няколко правила, които трябва да следвате, докато засенчвате.

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

трептене

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

Прост пример

Ето един прост пример за това как два цвята могат да бъдат смесени, за да се създадат четири опции за оцветяване.

Разширен пример

Сравнете изображението по-горе (създадено с градиент във Photoshop) с изображението, създадено само с три цвята чрез дитъринг. Моля, обърнете внимание, че могат да се използват различни шаблони за създаване на „съседни цветове“. Ще ви бъде по-лесно да разберете принципа, ако сами създадете няколко модела.

Приложение

Дитърингът може да придаде на вашия спрайт онзи приятен ретро вид, тъй като много от ранните видеоигри са използвали тази техника силно поради малкия брой налични цветови палитри (ако искате да видите много примери за дитъринг, вижте игрите, разработени за Sega Genesis). Аз самият не използвам този метод много често, но за образователни цели ще ви покажа как може да се приложи към нашия спрайт.

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

Селективно контуриране

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

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

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

Сравнете това с оригинала:

Изглаждане

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

Техника 1: изглаждане на извивките

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

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

Техника 2: заобляне на неравности

Техника 3: Презаписване на края на реда

Приложение

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

Ефектът е много фин, но е от голямо значение.

Защо трябва да го правите ръчно?

Може би се питате: "Защо просто не приложим филтър за графичен редактор към нашия спрайт, ако искаме да изглежда гладко?" Отговорът също е прост - никой филтър няма да направи вашия спрайт толкова остър и чист, колкото ръчно изработения. Ще имате пълен контрол не само върху използваните цветове, но и върху това къде да ги използвате. Освен това вие знаете по-добре от всеки филтър къде anti-aliasing ще е подходящо и къде има области, в които пикселите просто ще загубят качеството си.

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

Уау, ние сме доста близо до това да можем да изключим компютъра ви и да вземем студена бира от хладилника. Но той още не е пристигнал! Последната част е за това какво отличава енергичния аматьор от опитния професионалист.

Направете крачка назад и погледнете добре своя спрайт. Има възможност той все още да изглежда "суров". Отделете малко време за подобряване и се уверете, че всичко е перфектно. Колкото и да сте уморени, най-забавната част ви предстои. Добавете детайли, за да направите своя спрайт да изглежда по-интересен. Това е мястото, където вашите пикселни умения и опит влизат в игра.

Може да се изненадате от факта, че нашият адвокат Луча няма очи през цялото това време или че пакетът, който държи, е празен. Всъщност причината се крие във факта, че исках да изчакам с малки подробности. Обърнете внимание и на гарнитурата, която добавих към лентите му на ръцете, мухата на панталоните му… е, какво би бил един мъж без зърната си? Също така потъмних малко долната част на торса му, така че ръката да изпъква повече на фона на тялото.

Най-накрая сте готови! Lucha Lawyer се състезава в Леката категория, тъй като има само 45 цвята (може би е тежък в зависимост от ограниченията на палитрата) и разделителната му способност е около 150 на 115 пиксела. Сега можете да отворите бирата!

Пълен напредък:

Винаги е смешно. Ето един gif, показващ еволюцията на нашия спрайт.

Научете основите на изкуството и практикувайте традиционни техники. Всички знания и умения, необходими за рисуване и рисуване, могат да бъдат приложени в пикселирането.
Започнете с малки спрайтове. Най-трудната част е да се научите как да поставяте много детайли, като използвате възможно най-малко пиксели, без да правите спрайтове толкова големи, колкото моите.
Изучавайте работата на художници, на които се възхищавате, и не се страхувайте да бъдете неоригинални. Най-добрият начин да научите е да повтаряте фрагменти от работата на други хора. Отнема много време, за да развиете свой собствен стил.
Ако нямате таблет, купете си. Постоянните нервни сривове и стрес, причинени от непрекъснатото щракване с левия бутон на мишката, не са смешни и едва ли ще впечатлят представителите на противоположния пол. Използвам малък Wacom Graphire2 - харесва ми компактността и преносимостта му. Може да харесате по-голям таблет. Преди да купите, направете малко тест драйв.
Споделете работата си с други, за да получите тяхното мнение. Това също може да е добър начин да създадете нови приятели маниаци.

P.S.

Оригиналната статия се намира. Ако имате връзки към страхотни уроци, които трябва да бъдат преведени, изпратете ги в нашата парти стая. Или пишете директно на съобщенията на групата

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

Сега не е известно точно кога е възникнала тази техника, корените се губят някъде в началото на 70-те години. Техниката за композиране на изображения от малки елементи обаче се връща към много по-древни форми на изкуство, като мозайки, кръстосани шевове, тъкане на килими и мъниста. Самата фраза "пикселно изкуство" като определение за пикселно изкуство е използвана за първи път в статия на Адел Голдбърг и Робърт Флегал в списанието Communications на ACM (декември 1982 г.).

Пикселното изкуство получи най-широко приложение в компютърните игри, което не е изненадващо - направи възможно създаването на изображения, които не изискват ресурси и в същото време изглеждат наистина красиви (в същото време те отнемат много време от художник и изисква определени умения и следователно предполага добро заплащане) . Разцветът, най-високата точка в развитието, официално се нарича видеоигри на конзоли от 2-ро и 3-то поколение (началото на 90-те години). По-нататъшният напредък в технологиите, появата на първия 8-битов цвят, а след това True Color, развитието на триизмерна графика - всичко това с течение на времето избута пикселното изкуство на заден план и трети планове, а след това напълно започна да изглежда, че пикселът изкуството беше към своя край.

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

Разбира се, различни ретроградно настроени елементи изиграха своята роля в завръщането на пикселната графика, които обичат да носталгират по добрите стари игри от детството, докато казват: „О, сега не го правят“; естети, които умеят да оценят красотата на пикселното изкуство, и независими разработчици, които не възприемат съвременните графични красоти (и понякога, макар и рядко, просто не знаят как да ги внедрят в собствените си проекти), поради което извайват пикселно изкуство . Но нека все още не отхвърляме чисто комерсиални проекти - приложения за мобилни устройства, реклама и уеб дизайн.Така че сега пикселното изкуство, както се казва, е широко разпространено в тесни кръгове и си е спечелило вид изкуство "не за всеки" , И това е въпреки факта, че за обикновен мирянин е изключително достъпно, защото за да работите в тази техника, достатъчно е да имате под ръка компютър и прост графичен редактор! (способността да рисувате, между другото, също не боли) Стига думи, стигнете до точката!

2. Инструменти.

Какво ви е необходимо, за да създадете пикселно изкуство? Както казах по-горе, достатъчно е компютър и всеки графичен редактор, който може да работи на ниво пиксел. Можете да рисувате навсякъде, дори на Game Boy, дори на Nintendo DS, дори и в Microsoft Paint (друго нещо е, че рисуването в последното е изключително неудобно). Има много растерни редактори, много от тях са безплатни и достатъчно функционални, така че всеки може да вземе решение за софтуера сам.

Рисувам в Adobe Photoshop, защото е удобно и защото мина доста време. Няма да лъжа и да кажа, мърморейки с фалшивите си зъби, че „Спомням си, че Photoshop все още беше много малък, беше на Macintosh и беше с номер 1.0“ Това не беше. Но си спомням Photoshop 4.0 (а също и на Mac). И така за мен въпросът за избор никога не е стоял. И следователно, не, не, но ще дам препоръки относно Photoshop, особено когато неговите възможности ще помогнат значително за опростяване на творчеството.

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

Ще започваме ли? Вероятно чакате списък с някои тайни трикове, препоръки, които ще ви научат как да рисувате пикселно изкуство? И истината е, че няма много от него. Единственият начин да научите как да рисувате пикселно изкуство е да рисувате себе си, опитвайте, опитвайте, не се страхувайте и експериментирайте. Чувствайте се свободни да копирате работата на други хора, не се страхувайте да изглеждате неоригинални (само не представяйте работата на някой друг като своя, хехе). Внимателно и внимателно анализирайте работата на майсторите (не моята) и рисувайте, рисувайте, рисувайте. В края на статията ви очакват няколко полезни връзки.

3. Общи принципи.

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

Най-основният принцип може да се формулира по следния начин: минималната единица на изображението е пиксел и по възможност всички елементи на композицията трябва да са пропорционални на него. Ще дешифрирам: всичко, което рисувате, се състои от пиксели и пикселът трябва да се чете във всичко. Това не означава, че изобщо не може да има елементи в картината, например 2x2 пиксела или 3x3. Но все пак е за предпочитане да се изгради изображение от отделни пиксели.

Щрихът и като цяло всички линии на картината трябва да са с дебелина един пиксел (с редки изключения).

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

Kinks лишават рисунката от естествена гладкост и красота. И ако фрагменти 3, 4 и 5 са очевидни и лесно се коригират, с други ситуацията е по-сложна - там е счупена дължината на едно парче от веригата, изглежда дреболия, но забележима дреболия. Необходима е малко практика, за да се научите да виждате и избягвате такива места. Kink 1 е избит от линията, защото е единичен пиксел - докато в областта, където е вклинен, линията се състои от сегменти от 2 пиксела. За да се отърва от него, смекчих навлизането на кривата в завоя, като разширих горния сегмент до 3px и преначертах цялата линия в сегменти от 2px. Прекъсвания 2 и 6 са идентични един с друг - това вече са фрагменти с дължина 2 пиксела в области, изградени от единични пиксели.

Елементарен набор от примери за наклонени линии, които могат да бъдат намерени в почти всяко ръководство за пикселно изкуство (моят не е изключение), ще помогне да се избегнат такива прекъсвания при рисуване:

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

Лесно, нали? Нужен е само навик. Знанието как да рисувате наклонени линии на стъпки от 2 пиксела ще помогне с изометрията, така че ще го разгледаме по-отблизо следващия път. Като цяло правите линии са страхотни - но само докато не възникне задачата да нарисувате нещо чудотворно. Тук имаме нужда от криви и много различни криви. И ние приемаме просто правило за заобляне на криви линии: дължината на елементите на кривата трябва да намалява/увеличава постепенно.

Изходът от правата линия към закръгляването се извършва плавно, посочих дължината на всеки сегмент: 5 пиксела, 3, 2, 2, 1, 1, отново 2 (вече вертикално), 3, 5 и след това. Не е задължително вашият случай да използва същата последователност, всичко зависи от гладкостта, която се изисква. Друг пример за закръгляване:

Отново избягваме пречупванията, които толкова много развалят картината. Ако искате да проверите научения материал, тук имам скин за Winamp, нарисуван от неизвестен автор, празен:

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

4.1. Рисуваме бутилка с жива вода.

1. Формата на обекта, докато не можете да използвате цвят.

2. Червена течност.

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

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

5. По същия начин рисуваме бутилка със синя течност - тук същият цвят стъкло, плюс три нюанса на синьото за течността.

4.2. Рисуваме диня.

Нека начертаем кръг и полукръг - това ще бъде диня и изрязан резен.

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

3. Напълнете. Цветове от палитрата, средният нюанс на зеленото е цветът на кората, средният червен е цветът на пулпата.

4. Обозначете преходната зона от кората към пулпата.

5. Светли ивици на диня (най-после прилича на себе си). И разбира се, семена! Ако кръстосате диня с хлебарки, те ще се разпространят сами.

6. Довеждаме до ума. Използваме бледорозов цвят, за да обозначим акцентите над семената в даден участък и като подредим пикселите в шахматна дъска, постигаме някакъв вид обем от изрязания срез (методът се нарича дитъринг, за него по-късно). Използваме тъмночервен нюанс, за да обозначим защрихованите места в участъка на динята, и тъмнозелен (отново шахматни пиксели), за да придадем обем на самата диня.

5. Дитъринг.

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

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

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

Още две опции за дитъринг:

Какво трябва да знаете за дитъринга, за да можете да го използвате. Минималната ширина на зоната на смесване трябва да бъде поне 2 пиксела (същите тези пулове). Повече е възможно. По-добре е да не правите по-малко.

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

Е, стига теория. Предлагам ви да тренирате още малко.

Пиксел арт може да се рисува във всяка програма за растерна графика, въпрос на лични предпочитания и опит (както и финансови възможности разбира се). Някой използва най-простия Paint, аз го правя във Photoshop - защото, първо, работя в него от дълго време, и второ, там ми е по-удобно. По някакъв начин реших да опитам безплатния Paint.NET, не ми хареса - това е като с кола, която разпознава чужда кола с автоматична скоростна кутия в Запорожец, едва ли ще седне. Работодателят ми осигурява лицензиран софтуер, така че имам чиста съвест пред Adobe Corporation ... Въпреки че цените на техните програми са немислими и те горят в ада за това.

1. Подготовка за работа.

Създайте нов документ с всякакви настройки (нека бъде 60 пиксела широк, 100 пиксела висок). Основният инструмент на пиксел художник е молив ( Инструмент за молив, извикан от клавишна комбинация б). Ако лентата с инструменти има активирана четка (и икона, изобразяваща четка), задръжте курсора на мишката върху нея, натиснете и задръжте LMB- ще се появи малко падащо меню, в което трябва да изберете молив. Задайте размера на писалката на 1 пиксел (в горния панел вляво, падащо меню Четка):