Pixel art око. Пиксел арт: най-добри творби и илюстратори

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

И така, какво прави Pixel Art завладяващо:

1. Възприятие. Pixel Art изглежда невероятно! Има много неща, които могат да се кажат за всеки отделен пиксел в един спрайт.
2. Носталгия. Pixel Art връща страхотно носталгично чувство за геймърите, които са израснали, играейки Nintendo, Super Nintendo или Genesis (като мен!)
3. Лесен за научаване. 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 пиксела!

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

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

Рисуване на Pixel Art персонаж

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

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

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

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

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

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

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

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

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

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

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

Отидете в панела с опции на инструмента в падащия списък Изберете режим на инструменти(Режим на проследяване на пътя) изберете Pixel, променете Тегло(Дебелина) до 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 в 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; )

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

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

Hero.scale = 2.0;

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

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

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

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

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

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

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

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

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

Невероятни илюстрации, отлична работа със сенки. (Pixel Art на Polyfonken).

Темата е доста обширна. Има вариации на зарове.

Илюстрациите на Род Хънт са много цветни и реалистични. Художникът съчетава векторна графика с пикселно изкуство.

Бразилско-германските блогъри Тиаго, Пи, Джоджо и Мариана се представят като приятни, смеещи се пикселизирани герои.

Тази картина е създадена от Хуан Мануел Дапорта, използвайки само MS Paint! Работата отне 8 месеца. Впечатляващо.

Пикселите живеят и извън компютърните екрани. Удивително е колко добре са разбираеми сюжетите на пикселизираните снимки.

Космически войни в стила на Super Robot Wars. В света на пикселната графика Роберсън има свой уникален стил.

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

Тази посока на пикселното изкуство ме интересува особено. Тези картини не са рисувани върху параван, а върху платно с акрилни бои. Този шедьовър е направен от Ашли Андерсън.

Пикселните градове са отделна голяма тема. Тук обикновено има много подробности и сюжетни линии. На тази снимка има насип и цветни топки и суши бар и дори протестиращи.

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

Пример за пикселно изкуство. Фрагмент.

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

Pixel Art. Най-добри творби и илюстратори

град. Автор: Zoggles

Приказен замък. Автор: Tinuleaf

Средновековно селище. Автор: Docdoom

Висящи градини на Вавилон. Автор: Лунно затъмнение

Жилищна зона. Автор:

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

Така че Pixel Art буквално означава изкуството на рисуване с пиксели.

Само за по-голяма яснота, нека да разгледаме този пример:

Owlboy (игра с пикселно изкуство)

Ето как изглеждат игрите с графики в стил Pixel Art.

Много често такива графики се използват в независими игри, защото имат много разпознаваем стил на компютърни игри.

Pixel Art обаче не е само графика, спрайтовеи картинки за игри, това е цяла посока на цифровото и графично изкуство.

Красиви снимки могат да бъдат нарисувани с помощта на пикселно изкуство:

Няма да объркате този ретро графичен стил с нищо.

Някои картини в този стил са напълно достойни да заемат място на вашия работен плот.


Има и много готини артисти, които работят в този стил.

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

Ако увеличим тази снимка, можем да видим как е направено всичко отблизо:

Уникалният стил на пикселното изкуство е, че има доста ясни цветови преходи и няма анти-алиасинг. Например, нека вземем друга работа в цифровата графика на доста средно ниво, вижте тази рисунка на момиче с очила(18+) в блога www.econdude.pw.

Това е рисунка с компютърна мишка в програмата SAI2.0.

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

Няма ясни преходи на цветове и нюанси, но в пикселното изкуство преходите са ясни.

Например, вижте как можете да правите преходи между цветовете в пикселното изкуство:

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

Ето още един пример, това е доста класическа рисунка в стил "туршия":

http://www.gamer.ru/everything/pixel-art-dlya-nachinayuschih

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

Можете ли да си представите каква страхотна работа вършат такива артисти?

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

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

Анимацията в стил Pixel Art е като цяло адска работа.

http://www.dinofarmgames.com/a-pixel-artist-renounces-pixel-art/

Следователно все още трябва да се докаже, че Pixel Art е „мързелив стил“, дори бих казал, че напротив, не е най-малко мързеливият графичен стил.

Все пак всеки може да се научи да рисува нещо просто в стила на Pixel Art и нямате нужда от специални програми, а само от обикновен графичен редактор.

Ако искате да научите как да рисувате в този стил, вие, както във всеки друг случай, се нуждаете от много практика и можете да започнете например със статии на Habré: Курс по пиксел арт

Там ще намерите и основните принципи на пикселното изкуство.

Ето един пример за това как да рисувате пикселно изкуство (ускорено видео - скоростно рисуване) на ниво начинаещи можете да научите как да рисувате така буквално за една седмица:

Pixelart:: рисуване на космически кораб

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

https://www.youtube.com/watch?v=vChMzRnw-Hc

Виждате ли тази снимка на Сара Кариган от StarCraft? Какво мислите, че е това и как се прави?

Този човек го построи от блокове в играта Minecraft, работата отне 23 седмици.

Поглеждайки по-отблизо, можете да видите, че това са отделни блокове.

Формално това вече не е пикселно изкуство, а дори „блоково изкуство на minecraft“, но същността на стила остава същата и това е най-голямата пикселна рисунка и световен рекорд, според автора.

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

Друг пример, художници и аниматори Пол Робъртсън и Иван Диксън създадоха това:

SIMPSONS PIXELS

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

Лично аз смятам, че снимките в стил Pixel Art са истинското модерно изкуство в най-добрия смисъл на думата.

Всяка снимка на Pixel Art има много ясна стойност и се вижда и усеща.

Дори човек, който не разбира това добре, може да го оцени.

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