Терминът "пикселна графика" не е познат на всички, нито е ъндърграунд жаргон. Какво е това, което Wikipedia ще ви помогне да разберете. Основното нещо, което трябва да се разбере, е това пикселно изкуствоопределя се от начина, по който е създаден шаблонът (пиксел по пиксел), а не от резултатите. Следователно чертежите, получени с помощта на филтри или специални рендери, също не са включени в него. В първата част на статията и може би дори поредица от статии, посветени на това изкуство, ще покажа някои от произведенията, които ми харесаха.
Невероятни илюстрации, страхотно засенчване. (Pixel Art на Polyfonken).
Темата е доста обширна. Има вариации на заровете.
Илюстрациите на Род Хънт са много цветни и реалистични. Художникът съчетава векторна графика с пикселно изкуство.
Бразилско-германските блогъри Тиаго, Пи, Джоджо и Мариана се представят като пухкави смеещи се пикселни герои. 
Тази картина е направена от Хуан Мануел Дапорта, използвайки само MS Paint! Работата отне 8 месеца. впечатляващо.
Пикселите също живеят извън компютърните екрани. Удивително е колко добре се разбират сюжетите на пикселизираните снимки.
Космически войни в стил Super Robot Wars. В света на пикселното изкуство Робърсън има свой собствен уникален стил.
Град на лудите кукли. Илюстрацията, макар и нарисувана във вектор, все още изглежда като пикселно изкуство. Интересна работа.
Тази посока на пикселното изкуство е от особен интерес за мен. Тези картини не са нарисувани на екрана, а върху платно с акрилни бои. Този шедьовър е направен от Ашли Андерсън.
Пикселните градове са отделна голяма тема. Обикновено има много подробности и сюжетни линии. На тази снимка има насип и цветни балони и суши бар и дори протестиращи.
Pixel Art е много популярен за игри дори в наши дни и има няколко причини за това!
И така, какво пленява Pixel Art:
- Възприятие.Пикселното изкуство изглежда невероятно! Има много какво да се каже за всеки отделен пиксел в спрайт.
- носталгия. Pixel Art връща страхотно носталгично усещане за геймърите, които са израснали с Nintendo, Super Nintendo или Genesis (като мен!)
- Лекота на учене.Пикселното изкуство е едно от най-лесните за научаване дигитални изкуства, особено ако сте повече програмист, отколкото художник ;]
И така, искате да опитате ръката си в 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), така че щракнете върху него (или натиснете клавиша E) и променете настройките му, като изберете от падащия списък режим:(Режим:) молив(Молив) (тъй като в този режим няма дитъринг).
Сега нека започнем да пикселизираме! Начертайте вежди и очи, както е показано на изображението по-долу:
ей! Аз съм пикселизиран!! Вече можете да започнете с Lineart (където чертежът се прави с линии), но по-практичен начин е да нарисувате силуета на герой. Добрата новина е, че не е нужно да сте професионалист на този етап, просто се опитайте да си представите размерите на частите на тялото (глава, тяло, ръце, крака) и началната поза на героя. Опитайте се да направите нещо подобно в сиво:
Не е нужно да сте професионалист на този етап Имайте предвид, че оставих и малко празно място. Всъщност не е нужно да запълвате цялото платно, оставете място за бъдещи рамки. В този случай ще бъде много полезно да запазите еднакъв размер на платното за всички тях.
След като завършите силуета, е време да . Сега трябва да бъдете по-внимателни с разположението на пикселите, така че засега не се притеснявайте за дрехи, броня и т. н. За да сте в безопасност, можете да добавите нов слой, така че никога да не загубите оригиналния си силует.
Ако смятате, че инструментът Pencil е твърде бавен за рисуване, винаги можете да го използвате (Инструмент за линия), само не забравяйте, че няма да можете да позиционирате пикселите толкова точно, колкото бихте направили с молив. Ще трябва да настроите като по-долу:
Изберете чрез натискане и задържане Инструмент за правоъгълник(Инструмент за правоъгълник)
Отидете до панела с опции за инструменти в падащия списък Изберете режим на инструмент(Режим на рисуване на контур) изберете Pixel , променете Тегло(Ширина) с 1px (ако вече не е направено) и премахнете отметката Анти-алиас(Изглаждане). Ето как трябва да бъдете:
Моля, имайте предвид, че не направих долния контур за краката. Това не е необходимо, тъй като стъпалата не са толкова важна част от краката, за да бъдат подчертани, и ще запазите един ред пиксели на платното.
Прилагане на цветове и сенки
Сега сте готови да започнете да оцветявате нашия герой. Не се притеснявайте да изберете правилните цветове, те ще бъдат много лесни за промяна по-късно, просто се уверете, че всеки от тях има „собствен цвят“. Използвайте цветовете по подразбиране в раздела Мострите(Прозорец → Мостри).
Оцветете героя си, както е показано по-долу (но не се колебайте да проявите креативност и да използвате свои собствени цветове!)
Добрият, контрастен цвят подобрява четливостта на вашия актив! Имайте предвид, че все още не съм направила никакви контури за дрехите или косата. Винаги помнете: спестете възможно най-много пиксели от ненужни контури!
Не губете време да рисувате всеки пиксел. За да ускорите нещата, използвайте линии за същия цвят или инструмент за боядисване(Paint Bucket Tool), за да запълните празнините. Между другото, той също ще трябва да бъде конфигуриран. Изберете инструмент за боядисванев лентата с инструменти (или просто натиснете клавиша G) и променете толерантност(Толерантност) на 0 и премахнете отметката Анти-алиас(Изглаждане).
Ако някога трябва да използвате Инструмент за магическа пръчка(Magic Wand Tool) - много полезен инструмент, който избира всички пиксели с един и същи цвят, след което го настройва по същия начин като инструмента "Paint Bucket" - без толеранс и анти-алиасинг.
Следващата стъпка, която ще изисква познания от вас, е изсветляването и засенчването. Ако нямате знания как да покажете светлите и тъмните страни, тогава по-долу ще ви дам малка инструкция. Ако нямате време или желание да го научите, можете да пропуснете тази стъпка и да отидете в раздела Подправете палитрата си, защото в края на краищата можете просто да направите засенчването си като моя пример!
Използвайте един и същ източник на светлина за целия актив Опитайте се да дадете очертанията, както искате/можете, защото след това активът започва да изглежда по-интересен. Например, сега можете да видите носа, намръщените очи, парчета коса, гънките на панталоните и т.н. Можете също да добавите малко светли петна върху него, ще изглежда още по-добре:
Използвайте същия източник на светлина, когато засенчвате И сега, както обещах, малко ръководство за светлина и сенки:
Подправете палитрата си
Много хора използват цветовете на палитрата по подразбиране, но тъй като много хора използват тези цветове, ние ги виждаме в много игри.
Photoshop има голям избор от цветове в стандартната палитра, но не разчитайте на него твърде много. Най-добре е да направите свои собствени цветове, като щракнете върху основната палитра в долната част на лентата с инструменти.
След това в прозореца Color Picker прегледайте дясната странична лента, за да изберете цвят и основната област, за да изберете желаната яркост (по-светла или по-тъмна) и наситеност (по-сочна или по-тъпа).
След като намерите правилния, щракнете върху OK и преконфигурирайте инструмента Paint Bucket. Не се притеснявайте, след това можете просто да премахнете отметката от квадратчето „Свързани“ и когато рисувате с новия цвят, всички нови пиксели със същия цвят на фона също ще бъдат боядисани.
Това е друга причина, поради която е важно да работите с малък брой цветове и винаги да използвате един и същ цвят за един и същи елемент (риза, коса, каска, броня и т.н.). Но не забравяйте да използвате различни цветове за други зони, в противен случай нашата рисунка ще бъде прекалено оцветена!
Премахнете отметката от „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 за други художници, за да ви дадат съвет - това е чудесен начин да подобрите техниката си! Започнете с малко, тренирайте усилено, получете обратна връзка и можете да създадете невероятна игра, която ще ви донесе много пари и радост!
В днешно време програми като Photoshop, Illustrator, Corel улесняват работата на дизайнера и илюстратора. С тяхна помощ можете да работите напълно, без да се разсейвате от подреждането на пикселите, както беше в края на миналия век. Всички необходими изчисления се извършват от софтуер - графични редактори. Но има хора, работещи в различна посока, не просто различна, а дори напълно противоположна. А именно, те се занимават със същата олдскулна подредба на пикселите, за да получат уникален резултат и атмосфера в работата си.
Пример за пикселно изкуство. Фрагмент.
В тази статия бихме искали да говорим за хора, които се занимават с пикселно изкуство. Разгледайте по-отблизо най-добрите им творби, които само поради сложността на тяхното изпълнение без преувеличение могат да се нарекат произведения на съвременното изкуство. Произведения, които спират дъха, когато ги гледате.
Pixel Art Най-добрите творби и илюстратори
град. Автор: Zoggles
Приказен замък. Автор: Tinuleaf
средновековно селище. Автор: docdoom
Висящи градини на Вавилон. Автор: Лунно затъмнение
Жилищен квартал. автор:
пикселно изкуство(изписва се без тире) или пикселно изкуство- направление на дигиталното изкуство, което се състои в създаване на изображения на ниво пиксел (т.е. минималната логическа единица, от която се състои изображението). Не всички растерни изображения са пикселно изкуство, въпреки че всички са съставени от пиксели. Защо? Защото в крайна сметка концепцията за пикселно изкуство включва не толкова резултата, колкото процеса на създаване на илюстрация. Пиксел по пиксел и това е всичко. Ако направите цифрова снимка, намалете я силно (така че пикселите да станат видими) и твърдете, че сте я нарисували от нулата - това ще бъде истинска фалшификация. Въпреки че със сигурност ще се намерят наивни простотии, които ще ви похвалят за труда ви.
Сега не се знае точно кога е възникнала тази техника, корените се губят някъде в началото на 70-те години. Техниката на композиране на изображения от малки елементи обаче се връща към много по-древни форми на изкуство, като мозайки, кръстосани шевове, тъкане на килими и мъниста. Самата фраза „пикселно изкуство“ като дефиниция за пикселно изкуство е използвана за първи път в статия на Адел Голдбърг и Робърт Флегал в списанието Communications of the ACM (декември 1982 г.).
Колкото и да е странно, но именно г-н Научно-технически прогрес измести пикселната графика до последните позиции в средата на 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 пиксела. За да се отърва от него, смекчих влизането на кривата в завоя, като разширих горния сегмент до 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, в търсене на материал намерих тези две статии.
"itemprop="image">
В този урок от 10 стъпки как да нарисувате пикселно изкуство ще ви науча как да създадете "спрайт" (единичен 2D персонаж или обект). Самият термин, разбира се, идва от видеоигрите.
Научих се как да създавам пикселно изкуство, защото имах нужда от него за графиката в моята игра. След години обучение свикнах и започнах да разбирам, че пикселното изкуство е повече изкуство, отколкото просто инструмент. Днес пикселното изкуство е много популярно сред разработчиците на игри и илюстраторите.
Този урок е създаден преди много години, за да научи хората на прости концепции за пикселно изкуство, но е разширен многократно, така че се различава значително от оригиналната версия. В мрежата има много уроци по една и съща тема, но всички ми изглеждат твърде сложни или дълги. Пикселното изкуство не е наука. Не е нужно да изчислявате вектори, докато създавате пикселно изкуство.
Инструменти
Едно от основните предимства на създаването на пикселно изкуство е, че не се нуждаете от усъвършенствани инструменти - графичният редактор, инсталиран на компютъра ви по подразбиране, трябва да е достатъчен. Струва си да се спомене, че има програми, създадени специално за създаване на пикселно изкуство, като Pro Motion или Pixen (за потребители на Mac). Самият аз не съм ги тествал, но съм чувал много положителни отзиви. В този урок ще използвам Photoshop, който, въпреки че струва много, съдържа много полезни инструменти за създаване на изкуство, някои от които са много полезни за пикселизация.
Как да нарисувате пикселно изкуство във Photoshop
Докато използвате Photoshop, основното ви оръжие ще бъде инструментът Pencil Tool (B ключ), който е алтернатива на инструмента Brush Tool. Моливът ви позволява да оцветявате отделни пиксели, без да надпечатвате цветовете.
Полезни са още два инструмента: Selection (клавиш M) и Magic Wand (клавиш W), за да избирате и плъзгате или копирате и поставяте. Не забравяйте, че като задържите клавиша Alt или Shift, докато правите селекция, можете да добавите избраните обекти или да ги изключите от текущия списък за избор. Това е необходимо между другото, когато трябва да изберете неравномерни обекти.
Можете също да използвате капкомер за прехвърляне на цветове. Има хиляди причини, поради които е важно да се запазят цветовете в пикселното изкуство, така че ще трябва да вземете няколко цвята и да ги използвате отново и отново.
И накрая, не забравяйте да запомните всички клавишни комбинации, тъй като това може да ви спести много време. Забележете, че "X" превключва между основни и вторични цветове.
линии
Пикселите са същите малки цветни квадратчета. Първо трябва да разберете как ефективно да подредите тези квадрати, за да създадете линията, от която се нуждаете. Ще разгледаме двата най-често срещани типа линии: прави и извити.
прави линии
Знам какво си мислехте: тук всичко е толкова просто, че няма смисъл да се рови в нещо. Но когато става дума за пиксели, дори правите линии могат да бъдат проблем. Трябва да избягваме назъбени части - малки фрагменти от линията, които я правят да изглежда назъбена. Те се появяват, ако една от частите на линията е по-голяма или по-малка от останалите около нея.
извити линии
Когато рисувате извити линии, трябва да се уверите, че спадът или покачването са еднакви по цялата дължина. В този пример чистата линия има интервали 6 > 3 > 2 > 1, но линията с интервали 3 > 1< 3 выглядит зазубренной.
Възможността за рисуване на линии е ключов елемент от пикселното изкуство. Малко по-нататък ще ви разкажа за anti-aliasing.
Концептуализация
За да започнете, имате нужда от добра идея! Опитайте се да визуализирате какво ще правите в пикселното изкуство – на хартия или просто в ума си. Имайки представа за рисунката, можете да се концентрирате върху самата пикселизация.
Теми за размисъл
- За какво ще се използва този спрайт? За сайта ли е или за играта? Ще се наложи ли да го направим анимиран по-късно? Ако да, тогава ще трябва да се направи по-малък и по-малко подробен. Обратно, ако не работите със спрайта в бъдеще, можете да прикачите към него толкова детайли, колкото са ви необходими. Затова решете предварително за какво точно е необходим този спрайт и изберете оптималните параметри.
- Какви са ограниченията? По-рано споменах важността на запазването на цветовете. Основната причина е ограничената палитра от цветове поради системни изисквания (което е изключително малко вероятно в наше време) или заради съвместимост. Или за прецизност, ако подражавате на определен стил на C64, NES и т.н. Също така си струва да вземете предвид размерите на вашия спрайт и дали той се откроява твърде много на фона на необходимите обекти.
Да опитаме!
В този урок няма ограничения, но исках да се уверя, че моята пикселна графика е достатъчно голяма, за да можете да видите в детайли какво се случва във всяка от стъпките. За целта реших да използвам за модел Луча Адвокат, персонаж от света на борбата. Той би се вписал идеално в бойна игра или динамичен екшън филм.
Верига
Черният контур ще бъде добра основа за вашия спрайт, така че оттам ще започнем. Избрахме черно, защото изглежда добре, но и малко тъмно. По-късно в урока ще ви покажа как да промените цвета на контура, за да увеличите реализма.
Има два подхода за създаване на контур. Можете да нарисувате пътя на ръка и след това да го настроите малко или да нарисувате всичко един пиксел наведнъж. Да, разбрахте правилно, говорим за хиляда щраквания.
Изборът на метод зависи от размера на спрайта и вашите пикселни умения. Ако спрайтът е наистина огромен, тогава би било по-логично да го нарисувате на ръка, за да създадете груба форма, и след това да го отрежете. Повярвайте ми, това е много по-бързо, отколкото да се опитвате веднага да нарисувате перфектната скица.
В моя урок създавам доста голям спрайт, така че първият метод ще бъде показан тук. Ще бъде по-лесно, ако покажа всичко нагледно и обясня какво се е случило.
Първа стъпка: груб контур
С помощта на мишката или таблета нарисувайте груб контур за вашия спрайт. Уверете се, че НЕ е твърде суров, т.е. изглежда нещо като това как виждате крайния си продукт.
Скицата ми почти напълно съвпадна с планираното.
Стъпка втора: полирайте контура
Започнете, като увеличите изображението 6 или 8 пъти. Трябва ясно да виждате всеки пиксел. И след това почистете контура. По-специално, обърнете внимание на „бездомните пиксели“ (целият контур трябва да е с дебелина не повече от един пиксел), отървете се от назъбените ръбове и добавете малките детайли, които сме пропуснали в първата стъпка.
Дори големите спрайтове рядко надвишават 200 на 200 пиксела. Фразата „правете повече с по-малко“ е чудесен начин да опишете процеса на пикселизация. Скоро ще видите, че дори един пиксел има значение.
Опростете контура си колкото е възможно повече. Ще се занимаваме с подробностите по-късно, сега трябва да работите върху намирането на големи пиксели, като например мускулна сегментация. Нещата не изглеждат много добре в момента, но имайте малко търпение.
Цвят
Когато контурът е готов, получаваме един вид оцветяване, което трябва да бъде изпълнено с цветове. Боядисване, запълване и други инструменти ще ни помогнат в това. Съвпадението на цветовете може да бъде трудно, но теорията на цветовете очевидно не е темата на тази статия. Както и да е, има няколко основни понятия, които ще трябва да знаете.
Цветен модел HSB
Това е английско съкращение, съставено от думите "Hue, Saturation, Brightness". Това е само един от многото компютърни цветови модели (или цифрови изображения на цвета). Вероятно сте чували за други примери като RGB и CMYK. Повечето редактори на изображения използват HSB за избор на цвят, така че ще се съсредоточим върху него.
Hue Hue е това, което наричахме цвят.
Насищане– Наситеност – определя интензивността на цвета. Ако стойността е 100%, тогава това е максималната яркост. Ако го намалите, тогава в цвета ще се появи тъпота и той ще „посивее“.
яркост- светлина, която излъчва цвят. Например за черното този индикатор е 0%.
Избор на цветове
Решението кои цветове да изберете зависи от вас, но има няколко неща, които трябва да имате предвид:
- Меките и ненаситени цветове изглеждат по-реалистични, отколкото анимационни.
- Помислете за цветното колело: колкото по-далеч са два цвята върху него, толкова по-зле се смесват. В същото време червеното и оранжевото, които са в непосредствена близост един до друг, изглеждат страхотно заедно.
- Колкото повече цветове използвате, толкова по-размазана ще изглежда рисунката ви. Затова изберете няколко основни цвята и ги използвайте. Не забравяйте, че Super Mario по едно време е създаден единствено от комбинации от кафяво и червено.
Нанасяне на цветя
Нанасянето на цвят е много лесно. Ако използвате Photoshop, просто изберете желания фрагмент, изберете го с магическа пръчка (клавиш W) и след това го запълнете с основния цвят (Alt-F) или с вторичния цвят Ctrl-F).
засенчване
Засенчването е една от най-важните части от стремежа да станете пикселизиран полубог. Именно на този етап спрайтът или започва да изглежда по-добре, или се превръща в странно вещество. Следвайте инструкциите ми и със сигурност ще успеете.
Първа стъпка: изберете източник на светлина
Първо избираме източник на светлина. Ако вашият спрайт е част от по-голям фрагмент, който има свои собствени светлини, като лампи, факли и т.н. И всички те могат да повлияят на това как изглежда спрайтът по различни начини. Въпреки това, изборът на отдалечен източник на светлина като слънцето е чудесна идея за повечето пикселно изкуство. За игри, например, ще трябва да създадете възможно най-яркия спрайт, който след това може да бъде настроен към околната среда.
Обикновено избирам далечна светлина някъде горе пред спрайта, така че само предната и горната част на спрайта са осветени, а останалата част е засенчена.
Стъпка втора: Директно засенчване
След като изберем източник на светлина, можем да започнем да затъмняваме най-отдалечените от него зони. Нашият модел на осветление предполага долната част на главата, ръцете, краката и т.н. да бъдат покрити със сянка.
Припомнете си, че плоските неща не могат да хвърлят сянка. Вземете лист хартия, смачкайте го и го разточете през масата. Откъде знаеш, че вече не е плосък? Току-що видяхте сенките около него. Използвайте засенчване, за да подчертаете гънките на дрехите, мускулите, козината, цвета на кожата и т.н.
Стъпка трета: меки сенки
Вторият нюанс, който е по-светъл от първия, трябва да се използва за създаване на меки сенки. Това е необходимо за зони, които не са директно осветени. Могат да се използват и за преминаване от светло към тъмно и върху неравни повърхности.
Четвърта стъпка: осветени места
Местата, които получават директни светлинни лъчи, също трябва да бъдат подчертани. Струва си да се отбележи, че трябва да има по-малко акценти, отколкото сенки, в противен случай те ще предизвикат ненужно внимание, тоест ще изпъкнат.
Спестете си главоболието, като запомните едно просто правило: първо сенките, след това светлите. Причината е проста: ако няма сенки, ще бъдат изложени твърде големи фрагменти и когато приложите сенките, те ще трябва да бъдат намалени.
Някои полезни правила
Сенките винаги са трудни за начинаещи, така че ето няколко правила, които трябва да спазвате, докато засенчвате.
- Не използвайте градиенти. Най-честата грешка на начинаещите. Градиентите изглеждат ужасно и дори не се доближават до това как светлината играе върху повърхности.
- Не използвайте "меко засенчване". Говоря за ситуация, при която сянката е твърде далеч от контура, защото тогава изглежда много размазана и не позволява на източника на светлина да се разкрие.
- Не използвайте твърде много сенки. Лесно е да се мисли, че „колкото повече цветове – толкова по-реалистична е картината“. Както и да е, в реалния живот сме свикнали да виждаме нещата в тъмни или светли спектри и мозъкът ни ще филтрира всичко между тях. Използвайте само два тъмни цвята (тъмен и много тъмен) и два светли цвята (светъл и много светъл) и ги наслоете върху основния цвят, а не един върху друг.
- Не използвайте твърде сходни цветове. Наистина няма нужда да използвате почти идентични цветове, освен когато искате да направите наистина размазан спрайт.
дитеринг
Запазването на цветовете е това, на което създателите на пикселно изкуство наистина трябва да обърнат внимание. Друг начин за получаване на повече сенки, без да използвате повече цветове, се нарича "dithering". Точно както в традиционното рисуване, се използват "штрихиране" и "штрихиране", тоест вие в буквалния смисъл получавате нещо средно между два цвята.
Прост пример
Ето прост пример за това как два цвята могат да бъдат разбъркани, за да се създадат четири опции за засенчване.
Разширен пример
Сравнете изображението по-горе (създадено с градиент във Photoshop) с изображението, създадено само с три цвята с помощта на дитеринг. Моля, имайте предвид, че могат да се използват различни модели за създаване на "съседни цветове". Ще ви бъде по-лесно да разберете принципа, ако сами създадете няколко модела.
Приложение
Dithering може да придаде на вашия дух приятен ретро вид, тъй като много ранни видео игри са използвали тази техника до голяма степен поради малкия брой налични цветови палитри (ако искате да видите много примери за дитъринг, вижте игрите, разработени за Sega Genesis). Самият аз не използвам този метод много често, но за образователни цели ще ви покажа как може да се приложи към нашия спрайт.
Можете да използвате dither доволно, но си струва да се отбележи, че само няколко души всъщност го използват успешно.
Селективно контуриране
Селективното контуриране, което се нарича още selout (от английското selected outlining), е подвид на контурното засенчване. Вместо да използваме черна линия, ние избираме цвят, който ще изглежда по-хармонично на вашия спрайт. Ние също така променяме яркостта на този път към ръбовете на спрайта, позволявайки на източника на цвят да определи кои цветове трябва да използваме.
До този момент използвахме черен контур. В това няма нищо лошо: черното изглежда страхотно, а също така ви позволява качествено да различите спрайта от фона на околните му обекти. Но използвайки този метод, ние жертваме известен реализъм, който може да ни е необходим в някои случаи, тъй като нашият спрайт продължава да изглежда анимационен. Селективното контуриране ви позволява да се отървете от това.
Ще забележите, че използвах сеулт, за да смекча мускулите му. Най-накрая нашият спрайт започва да изглежда като цяло, а не като огромен брой отделни фрагменти.
Сравнете това с оригинала:
- Изглаждане
Принципът на заглаждането е прост: добавяне на междинни цветове към извивките, за да изглеждат по-гладки. Например, ако имате черна линия на бял фон, тогава към нейните извивки по ръба ще бъдат добавени малки сиви пиксели.
Техника 1: изглаждане на кривите
По принцип трябва да добавите междинни цветове, където има прекъсвания, в противен случай линията ще изглежда назъбена. Ако все още изглежда неравномерно, добавете още един слой от по-светли пиксели. Посоката на нанасяне на междинния слой трябва да съвпада с посоката на кривата.
Не мисля, че мога да го обясня по-добре, без да го усложнявам. Просто погледнете снимката и ще разберете какво имам предвид.
Техника 2: закръгляване на неравностите
Техника 3: Презаписване на ред завършва
Приложение
Сега нека приложим анти-алиасинг към нашия печат. Имайте предвид, че ако искате вашият спрайт да изглежда добре на фона на всеки цвят, не изглаждайте външната страна на линията. В противен случай вашият спрайт е заобиколен от много неподходящ ореол на кръстопътя с фона и следователно ще се откроява твърде ясно на всеки фон.
Ефектът е много фин, но е от голямо значение.
Защо трябва да го правите ръчно?
Може би се питате: „Защо просто не приложим филтър за графичен редактор към нашия спрайт, ако искаме той да изглежда гладко?“ Отговорът също е прост – нито един филтър няма да направи вашия спрайт толкова остър и чист, колкото ръчната изработка. Ще имате пълен контрол не само върху използваните цветове, но и върху това къде да ги използвате. Освен това, вие знаете по-добре от всеки филтър къде ще е подходящо заглаждането и къде има области, в които пикселите просто ще загубят качеството си.
Завършване
Уау, ние сме доста близо до това да можем да изключим компютъра си и да вземем студена бира от хладилника. Но той още не е пристигнал! Последната част е за това, което разделя енергичния аматьор от опитния професионалист.
Направете крачка назад и разгледайте добре своя дух. Има възможност той все още да изглежда "суров". Отделете малко време, за да подобрите и се уверете, че всичко е перфектно. Колкото и да сте уморени, най-забавната част ви предстои. Добавете подробности, за да направите спрайта си по-интересен. Тук влизат в игра вашите пикселни умения и опит.
Може да се изненадате от факта, че нашият адвокат Луча през цялото това време няма очи или че пакетът, който държи, е празен. Всъщност причината се крие във факта, че исках да изчакам с малки подробности. Също така забележете и гарнитурата, която добавих към лентите за ръката му, мухата на панталоните му... добре, какво би бил един мъж без зърната си? Затъмних и долната част на торса му, така че ръката да стърчи повече на фона на тялото.
Най-накрая сте готови! Lucha Lawyer се състезава в категорията Lightweight, защото има само 45 цвята (може би е тежка категория в зависимост от ограниченията на вашата палитра) и резолюцията му е около 150 на 115 пиксела. Сега можете да отворите бирата!
Целият напредък:
Винаги е смешно. Ето gif, показващ еволюцията на нашия спрайт.
- Научете основите на изкуството и практикувайте традиционни техники. Всички знания и умения, необходими за рисуване и рисуване, могат да бъдат приложени в пикселизиране.
- Започнете с малки спрайтове. Най-трудната част е да се научите как да поставяте много детайли, използвайки възможно най-малко пиксели, без да правите спрайтове толкова големи като моите.
- Изучавайте творчеството на художниците, на които се възхищавате, и не се страхувайте да бъдете неоригинални. Най-добрият начин да се научите е да повтаряте фрагменти от работата на други хора. Отнема много време, за да развиете свой собствен стил.
- Ако нямате таблет, купете такъв. Постоянните нервни сривове и стрес, причинени от непрекъснато щракване с левия бутон на мишката, не са смешни и е малко вероятно да впечатли представителите на противоположния пол. Използвам малък Wacom Graphire2 - харесвам неговата компактност и преносимост. Може да ви хареса по-голям таблет. Преди да купите, направете малко пробно шофиране.
- Споделете работата си с други, за да получите тяхното мнение. Това също може да е добър начин да създадете нови приятели от маниаци.
P.S.
Оригиналната статия се намира. Ако имате връзки към страхотни уроци, които трябва да бъдат преведени, изпратете ги в нашата парти стая. Или пишете директно в съобщенията на групата
