Програми за създаване на пикселно изкуство. Пиксел арт: най-добрите творби и илюстратори Снимки в пиксели

Пикселната графика (наричана по-нататък просто пикселно изкуство) става все по-популярна в наши дни, особено чрез независими игри. Това е разбираемо, защото по този начин художниците могат да запълнят играта с голямо разнообразие от герои и да не прекарват стотици часове в моделиране на 3D обекти и ръчно рисуване на сложни обекти. Ако искате да научите пикселно изкуство, тогава първо ще трябва да се научите как да рисувате така наречените „спрайтове“. След това, когато спрайтовете вече не ви плашат, можете да преминете към анимация и дори да продавате работата си!

стъпки

Част 1

Ние събираме всичко необходимо

Изтеглете добри графични редактори.Можете, разбира се, да създавате шедьоври в Paint, но е трудно и не много удобно. Би било много по-добре да работите в нещо като:

Фотошоп
Paint.net
Пиксен

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

Активирайте „мрежа“ във вашия графичен редактор.Всъщност, ако вашият графичен редактор не поддържа показване на мрежа, тогава трябва да помислите за търсене на друга програма. Решетката ще ви позволи ясно да видите къде и как ще бъде разположен всеки отделен пиксел. По правило броеницата се включва през менюто „Преглед“.
- Може да се наложи да промените малко настройките на дисплея, за да сте сигурни, че всеки сегмент от мрежата действително изобразява пиксел. Всяка програма прави това по различен начин, така че потърсете съответни съвети.
Рисувайте с молив и четка с размер 1 пиксел.Всеки графичен редактор трябва да има инструмент "Молив". Изберете го и задайте размера на четката на 1 пиксел. Вече можете да рисувате... в пиксели.

Част 2
Работа върху основите
1. Създайте ново изображение.Тъй като се учите да рисувате в стила на пикселното изкуство, не трябва да се стремите към епични платна. Ако си спомняте, в играта Super Mario Bros. целият екран беше 256 x 224 пиксела, а самият Марио се побираше в пространство от 12 x 16 пиксела!
  
  Увеличавам.Да, в противен случай просто няма да можете да видите отделни пиксели. Да, ще трябва да го увеличите много. Да кажем, че 800% е съвсем нормално.
  
  Научете се да рисувате прави линии.Изглежда просто, но ако внезапно нарисувате линия с дебелина 2 пиксела някъде по средата с трепереща ръка, разликата ще удари очите ви. Начертайте прави линии, докато трябва да активирате инструмента за права линия. Трябва да се научите да рисувате прави линии на ръка!
  
  Научете се да рисувате криви линии.В кривата линия трябва да има, да кажем, еднакви „прекъсвания на линиите“ (което се вижда ясно на фигурата точно по-горе). Да речем, започвайки да рисувате крива линия, начертайте права линия от 6 пиксела, под нея права линия от три, под нея права линия от два и под нея права линия от един пиксел. От другата страна нарисувайте същото (огледално, разбира се). Това е прогресията, която се счита за оптимална. Кривите, начертани в шаблона „3-1-3-1-3-1-3“, не отговарят на стандартите за пикселно изкуство.
  
  Не забравяйте да изтриете грешките.Инструментът "Eraser" трябва да бъде настроен подобно на молив, като размерът на четката е равен на 1 пиксел. Колкото по-голяма е гумичката, толкова по-трудно е да не изтриете твърде много, така че всичко е логично.
Част 3
Създаване на първия спрайт
1. Направете скица.Скица на хартия е в основата на всеки спрайт, за щастие по този начин ще можете да разберете как ще изглежда всичко и, ако е необходимо, можете да коригирате нещо предварително. Освен това след това можете да проследите от хартиена скица (ако все още имате таблет).
  - Не пестете подробности за вашата скица! Начертайте всичко, което искате да видите в окончателния чертеж.
2. Прехвърлете скицата в графичен редактор.Можете да очертаете хартиена скица на таблет или да преначертаете всичко ръчно, пиксел по пиксел - няма значение, изборът е ваш.
  - Когато очертавате скицата, използвайте 100% черно като цвят на контура. Ако нещо се случи, можете да го промените ръчно по-късно, но засега ще ви бъде по-лесно да работите с черно.
3. Прецизирайте очертанията на скицата.В този контекст можете, разбира се, да кажете различно - изтрийте всичко, което е ненужно. Какъв е смисълът - контурът трябва да е с дебелина 1 пиксел. Съответно увеличете мащаба и изтрийте, изтрийте излишното... или попълнете липсващото с молив.
  - Когато работите върху скица, не се разсейвайте от детайлите - техният ред ще дойде.
част 4
Оцветяване на спрайта
1. Обновете теорията на цветовете.Разгледайте палитрата, за да видите какви цветове да използвате. Там всичко е просто: колкото по-далеч са цветовете един от друг, толкова повече се различават един от друг; Колкото по-близо са цветовете един до друг, толкова по-сходни са и толкова по-добре изглеждат един до друг.
  - Изберете цветове, които ще направят вашия спрайт едновременно красив и приятен за очите. И да, пастелните цветове трябва да се избягват (освен ако целият ви проект не е направен в този стил).
2. Изберете няколко цвята.Колкото повече цветове използвате, толкова по-разсейващ ще бъде вашият спрайт, така да се каже. Вижте някои класики на пикселното изкуство и се опитайте да преброите колко цвята се използват там.
  - Марио - само три цвята (ако говорим за класическата версия) и дори те са разположени почти близо един до друг в палитрата.
  - Sonic – Въпреки че Sonic е нарисуван с повече детайли от Mario, той все още се базира само на 4 цвята (и сенки).
  - Почти класически спрайтове, както се разбират в бойните игри, Ryu е големи области с прости цветове, плюс малко сянка за разграничаване. Ryu обаче е малко по-сложен от Sonic - вече има пет цвята и сенки.
3. Оцветете спрайта.Използвайте инструмента Paint Fill, за да оцветите своя спрайт и не се притеснявайте, че всичко изглежда плоско и безжизнено - на този етап не се очаква да е друго. Принципът на инструмента за запълване е прост - той ще запълни всички пиксели от цвета, върху който сте щракнали, с цвета, който сте избрали, докато достигне границите.
част 5
Добавяне на сенки
1. Започнете да прилагате сенки, като използвате цветове, които са малко по-тъмни от основата.Ако светлината идва отгоре, къде ще бъде сянката? Точно така, където не пада пряка светлина. Съответно, за да добавите сянка, просто добавете още няколко слоя към спрайта с пиксели от съответния цвят над или под контура.
  - Ако намалите настройката „Контраст“ на основния цвят и леко увеличите настройката „Яркост“, можете да получите добър цвят за рисуване на сенки.
  - Не използвайте градиенти. Градиентите са зли. Градиентите изглеждат евтини, калпави и непрофесионални. Ефект, подобен на този на градиентите, се постига чрез техниката на „изтъняване“ (вижте по-долу).
2. Не забравяйте за частична сянка.Изберете цвят между основния цвят и цвета на сянката. Използвайте го, за да създадете друг слой - но този път между слоевете от тези два цвята. Резултатът ще бъде ефектът на преход от тъмна зона към светла.
  
  Начертайте акценти.Акцентът е мястото на спрайта, където пада най-много светлина. Можете да нарисувате акцент, ако вземете цвят, който е малко по-светъл от основния цвят. Основното нещо е да не се увличате с отблясъци, това е разсейващо.
част 6
Ние използваме съвременни техники за рисуване
1. Не забравяйте за anti-aliasing (елиминиране на неравности по контура).Да, визитната картичка на пикселното изкуство е видимата „пикселизация“ на изображението. Понякога обаче искате линиите да изглеждат малко по-малко забележими, малко по-гладки. Тук на помощ идва anti-aliasing.
  - Добавете междинни цветове към завоите на кривата. Нанесете един слой междинен цвят около очертанията на кривата, която искате да изгладите. Ако все още изглежда ъглово, добавете още един слой, този път по-светъл.
  - Ако искате спрайтът да се слее с фона, не използвайте изглаждане на външния ръб на спрайта.
2. Научете се да използвате селективно изобразяване.Какъв е смисълът: контурът се рисува с цвят, подобен на тези, използвани за запълване. Резултатът е по-малко „карикатурно“ изображение, именно поради по-реалистичния външен вид на контура. Опитайте, да речем, селективно изобразяване на кожата, като оставите класически черен контур за дрехи или предмети.

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 има много ясна стойност и се вижда и усеща.

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

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

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 пиксела!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Няма нужда да губите време за рисуване на всеки пиксел. За да ускорите работата си, използвайте линии за същия цвят или Инструмент за кофа за боядисване(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, за да могат други художници да ви дават съвети - това е чудесен начин да подобрите техниката си! Започнете с малко, практикувайте много, получете обратна връзка и можете да създадете невероятна игра, която ще ви донесе много пари и радост!

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

Понастоящем не е известно кога точно възниква тази техника; корените се губят някъде в началото на 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. Но все пак е за предпочитане да се конструира изображение от отделни пиксели.

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

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

Счупванията лишават рисунката от нейната естествена гладкост и красота. И ако фрагменти 3, 4 и 5 са очевидни и могат лесно да се коригират, с другите ситуацията е по-сложна - там дължината на едно парче от веригата е счупена, изглежда дреболия, но дреболията се забелязва. Необходима е малко практика, за да се научите да виждате тези места и да ги избягвате. Kink 1 е избит от линията, защото е единичен пиксел - докато в областта, където е вмъкнат, линията се състои от сегменти от 2 пиксела. За да се отърва от него, смекчих навлизането на кривата в завоя, като удължих горния сегмент до 3 пиксела и преначертах цялата линия в 2 пикселни сегмента. Прекъсвания 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... Въпреки че те взимат невъобразими цени за своите програми и ще горят в ада за това.

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

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