Най-доброто пикселно изкуство. Пикселно изкуство (пикселно изкуство): най-добрите произведения и илюстратори




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

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

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

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

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

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

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


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

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


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

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


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

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

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

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

Прилагане на цветове и сенки

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

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


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

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

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

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


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

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


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

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

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

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

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

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


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

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

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

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


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


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

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

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


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

В този раздел ще научите как да интегрирате нашето пикселно изкуство в игра за iPhone, използвайки игровата рамка Cocos2d. Защо обмислям само iPhone? Защото благодарение на поредица от статии за Unity (например: или Игра в стила на Jetpack Joyride в Unity 2D) вече знаете как да работите с тях в Unity и от статии за Crafty (Browser games: 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 = ДА; ; ) върне себе си; )

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


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

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

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

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

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


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

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

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

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

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

Още през 20-ти век компютърните игри се превърнаха в широка област на приложение на пикселната графика, особено през 90-те години. С развитието на 3D графиката пикселното изкуство започна да запада, но след това се върна към живот благодарение на развитието на уеб дизайна, появата на мобилни телефони и мобилни приложения.

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

Основни правила на пикселното изкуство

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

прави линии

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

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

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

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

извити линии

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

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

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

дитеринг

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

Най-популярният метод за дитъринг е подреждането на пиксели в шахматна дъска:

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

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

За да работи добре разпределеното пикселно изкуство, зоната на смесване трябва да е широка поне два пиксела.

Софтуер за пикселно изкуство

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

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

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

Потребителите на Mac могат да изпробват безплатната програма Pixen. И потребителите на операционната система Linux трябва да тестват програмите GrafX2 и JDraw за себе си.

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

Как да нарисувате пикселно изкуство във Photoshop

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

Рисуване "Балон"

Нека започнем с най-простото - нарисувайте обикновен балон. Създайте нов файл във Photoshop с резолюция на екрана 72 dpi. Няма смисъл да задавате големи размери на изображението - това е пикселно изкуство. Изберете четка, твърда и непрозрачна, задайте размера на 1 пиксел.

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

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

Вижте колко лесно е - топката е готова!

Фигура "Робот"

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

Отворете нов документ, направете груба скица на бъдещия робот:

Сега можете да почистите всичко, което ви пречи и да нарисувате пиксели, където е необходимо:

По същия начин нарисувайте долната част на тялото на робота. Не пропускайте възможността да нарисувате "перфектни" линии на правилните места.

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

Можете да започнете да запълвате контурите. "Украсете" тялото на робота с основния цвят. Нашият цвят е лавандулов син.

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

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

Добавете акценти към робота във всички области, които трябва да отразяват светлината:

Придайте на краката на робота цилиндричен вид със сенки и светлини. По същия начин направете дупки от кръговете на гърдите на робота:

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

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

Това е всичко - нашият забавен пикселен робот е готов!

И с помощта на това видео ще научите как да направите пикселна арт анимация във Photoshop:


Вземете го, кажете на приятелите си!

Прочетете и на нашия уебсайт:

Покажи повече

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

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

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

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


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


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


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


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


Жилищен квартал. автор:

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

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

Пикселното изкуство получи най-широко приложение в компютърните игри, което не е изненадващо - направи възможно създаването на изображения, които са неизискващи към ресурсите и в същото време изглеждат наистина красиви (в същото време отнемат много време от художник и изискват определени умения и следователно предполагат добро заплащане). Разцветът, най-високата точка в развитието, официално се нарича видеоигри на конзоли от 2-ро и 3-то поколение (началото на 1990-те). По-нататъшен напредък в технологиите, появата на първо 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. Но все пак е за предпочитане да се изгради изображение от отделни пиксели.

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

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

Извивките лишават рисунката от естествена гладкост и красота. И ако фрагменти 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. Дитъринг.

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

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

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

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

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

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

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

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

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

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

Пикселно изкуство за начинаещи. | Въведение.

Пикселно изкуство за начинаещи. | Въведение.

Още няколко полезни комбинации. " ctrl+" и " ctrl-» увеличаване и намаляване на изображението. Също така е полезно да знаете, че натискането ctrlи " (кавички-коледни елхи, или руски ключ" Е”) включва и изключва мрежата, което е голяма помощ при рисуване на пикселно изкуство. Стъпката на мрежата също трябва да се коригира за вас, по-удобно е за някой, когато е 1 пиксел, аз съм свикнал ширината на клетката да е 2 пиксела. Щракнете върху Ctrl+K(или отидете на редактиране->Предпочитания), преминете към същността Водачи, решетка и резении инсталирайте Линия на мрежата на всеки 1 пиксел(за мен, ще повторя, е по-удобно 2).

2. Рисуване.

И накрая, нека започнем да рисуваме. Защо да създавате нов слой ( Ctrl+Shift+N), превключете към черен цвят на писалката (натискане дзадава цветовете по подразбиране, черно и бяло) и нарисувайте главата на героя, в моя случай това е такава симетрична елипса:

Пикселно изкуство за начинаещи. | Въведение.


Пикселно изкуство за начинаещи. | Въведение.

Долната и горната му основа са дълги 10 пиксела, след това има сегменти от 4 пиксела, три, три, един, един и вертикална линия с височина 4 пиксела. Удобно е да рисувате прави линии във Photoshop със скоба Shift, въпреки че мащабът на изображението в пикселното изкуство е минимален, въпреки това тази техника понякога спестява много време. Ако сте направили грешка и сте нарисували твърде много, изкачили сте се някъде покрай тях - не се обезкуражавайте, превключете към инструмента за гумичка ( Гумичка същол или ключ" Е") и изтрийте това, което не ви трябва. Да, не забравяйте да настроите гумичката да зададе и размера на писалката на 1 пиксел, така че да изтрива пиксел по пиксел, и режима на молив ( Режим: молив), в противен случай няма да изтрие това, което е необходимо. Преминавайки обратно към молив, напомням ви, чрез " Б»

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

Продължаваме да рисуваме, добавяме нос, антени и уста:

Пикселно изкуство за начинаещи. | Въведение.

Пикселно изкуство за начинаещи. | Въведение.

Сега очи:

Пикселно изкуство за начинаещи. | Въведение.

Пикселно изкуство за начинаещи. | Въведение.

Моля, имайте предвид, че при толкова малък мащаб очите не трябва да са кръгли - в моя случай това са квадрати с дължина на страната 5 пиксела, които нямат начертани ъглови точки. Когато се върнат към оригиналния мащаб, те ще изглеждат доста кръгли, плюс впечатлението за сферичност може да се засили с помощта на сенки (повече за това по-късно, вижте 3-та част от урока). Междувременно ще коригирам леко формата на главата, като изтрия няколко пиксела на едно място и ги боядисам на друго:

Пикселно изкуство за начинаещи. | Въведение.

Пикселно изкуство за начинаещи. | Въведение.

Рисуваме вежди (нищо, че висят във въздуха - имам такъв стил) и имитираме гънки в ъглите на устата, което прави усмивката по-изразителна:

Пикселно изкуство за начинаещи. | Въведение.

Пикселно изкуство за начинаещи. | Въведение.

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

Пикселно изкуство за начинаещи. | Въведение.

Пикселно изкуство за начинаещи. | Въведение.

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

Пикселно изкуство за начинаещи. | Въведение.

Пикселно изкуство за начинаещи. | Въведение.

3. Напълнете.

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

След като изберете желания цвят, активирайте инструмента за кофа ( Кофа за боя, G). Също така не забравяйте да изключите функцията Anti-alias в настройките, трябва пълнежът да работи ясно в рамките на начертаните контури и да не излиза извън тях:

Пикселно изкуство за начинаещи. | Въведение.


Пикселно изкуство за начинаещи. | Въведение.

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

Пикселно изкуство за начинаещи. | Въведение.

Пикселно изкуство за начинаещи. | Въведение.

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

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

Пикселно изкуство за начинаещи. | Въведение.


Пикселно изкуство за начинаещи. | Въведение.

4. Засенчване и дитеринг.

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

Пикселно изкуство за начинаещи. | Въведение.

Пикселно изкуство за начинаещи. | Въведение.

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

Що се отнася до дитеринг'а, в изображение с такъв миниатюрен размер според мен е напълно излишно. Самият метод се състои в „замесване“ на два съседни цвята, което се постига чрез залитане на пикселите. Въпреки това, за да ви дам представа за техниката, все пак ще представя малки зони на смесване, върху панталоните, върху ризата и малко по лицето:

Пикселно изкуство за начинаещи. | Въведение.

Пикселно изкуство за начинаещи. | Въведение.

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

Разхождайки се сутрин в интернет, исках да напиша публикация за Pixel Art, в търсене на материал намерих тези две статии.