Как да нарисувате пикселни неща. Adobe Photoshop: Начертайте и анимирайте пикселен арт герой

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

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

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

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

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

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

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

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

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

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

Стъпки

Част 1

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

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

Photoshop
Paint.net
Pixen

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

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

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

Част 6: Сглаждане
Част 7: Текстури и размазване
Част 8: Светът на плочките

Предговор

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

И все пак не можете да кажете, че пикселните или непикселните арт графики са повече или по-малко красиви. Справедливо е да се каже, че пикселното изкуство е различно и по-подходящо за ретро игри (като Super Nintendo или Game Boy). Можете също така да комбинирате техниките, научени тук, с не-пикселни арт ефекти, за да създадете хибриден външен вид.

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

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

В крайна сметка трябва да благодаря на всички художници, които се присъединиха към мен при създаването на това ръководство по един или друг начин: Шин, за мръсната му работа и линейно изкуство, Ксенохидроген, за гениалността му в цветовете, Лунна, за познанието му в перспективата и Панду, суров Ahruon, Dayo и Kryon за пищните им приноси, които илюстрират тези страници.

Така че нека се върна към същността на въпроса.

Част 1: Правилните инструменти

Лоша новина: няма да нарисувате нито един пиксел в тази част! (И това не е причина да го пропуснете, нали?) Ако има поговорка, която мразя, това не са лоши инструменти, а само лоши работници. Всъщност мислех, че не може да има нищо по-далеч от истината (освен може би „това, което не те убие, те прави по-силен“) и пикселното изкуство, много добро потвърждение. Това ръководство има за цел да ви запознае с различния софтуер, използван за създаване на пикселно изкуство и да ви помогне да изберете правилния.

1 някои стари неща

Когато избират софтуер за създаване на пикселно изкуство, хората често си мислят: „Изборът на софтуер? Това е лудост! Всичко, от което се нуждаем, за да създадем пикселно изкуство, е боя! (Очевидно игра на думи, рисуване и програма) ”Трагична грешка: Говорех за лоши инструменти, това е първото. Paint има едно предимство (и само едно): вече го имате, ако използвате Windows. От друга страна, той има много недостатъци. Това е (непълен) списък:

* Не можете да отворите повече от един файл наведнъж
* Няма контрол на палитрата.
* Без слоеве или прозрачност
* Няма неправоъгълен разряд
* Малко горещи клавиши
* Ужасно неудобно

Накратко, можете да забравите за Paint. Сега ще видим истинския софтуер.

2. В крайна сметка ...

Тогава хората си мислят: „Добре, Paint е твърде ограничен за мен, затова ще използвам моя приятел Photoshop (или Gimp или PaintShopPro, това е същото нещо), който има хиляди възможности.“ Това може да бъде добро или лошо: ако вече познавате една от тези програми, можете да направите пикселно изкуство (като изключите всички опции за автоматично сглаждане и изключите много от разширените функции). Ако все още не познавате тези програми, тогава ще отделите много време за изучаването им, въпреки че не се нуждаете от цялата им функционалност, което ще бъде загуба на време. Накратко, ако ги използвате отдавна, можете да създадете пикселно изкуство (аз лично използвам Photoshop по навик), но в противен случай е много по-добре да използвате програми, специализирани в пикселното изкуство. Да, те съществуват.

3. Крем

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

Charamaker 1999 е добра програма, но разпространението изглежда е задържано.

Graphics Gale е много по-забавен и лесен за използване и се предлага на около $ 20, което не е лошо. Ще добавя, пробната версия не е ограничена във времето и се предлага с достатъчно набор, за да направи достатъчно добра графика. Само че не работи с .gif, което не е такъв проблем, тъй като .png така или иначе е по-добре.

Софтуерът, който най-често се използва от пикселните изпълнители, е ProMotion, който (очевидно) е по-лесен за ползване и по-бърз от Graphics Gale. О, да, тя е скъпа! Можете да закупите пълната версия за скромна сума ... 50 евро ($ 78).
Нека не забравяме нашите приятели на Mac! Pixen е добра програма за Macintosh и е безплатна. За съжаление не мога да ви кажа повече, защото нямам Mac. Бележка на преводача (от френски): Потребителите на Linux (и други) трябва да опитат и GrafX2. Призовавам ви да ги изпробвате всички в демо версии и да видите коя ви подхожда най-добре. В крайна сметка това е въпрос на вкус. Само имайте предвид, че след като започнете да използвате програмата, може да бъде много трудно да преминете към нещо друго.

Следва продължение…

Бележки на преводача от френски на английски

Това е страхотен урок за пикселно изкуство, написан от Phil Razorbuck от LesForges.org. Много благодаря на Phil Razorbuck, че позволи на OpenGameArt.org да преведе тези уроци и да ги публикува тук. (От преводач на руски: Не съм поискал разрешение, ако някой има желание, можете да помогнете, нямам достатъчно опит в общуването на английски и още повече на френски).

Бележка от преводач от английски на руски

Аз съм програмист, а не художник или преводач, превеждам за приятелите си художници, но това, което е добре да се хаби, нека бъде тук.
Оригиналът на френски е някъде тук www.lesforges.org
Превод от френски на английски тук: opengameart.org/content/les-forges-pixel-art-course
Преведох от английски, защото не знам френски.
И да, това е първата ми публикация, така че насоките за дизайн са добре дошли. Плюс това се интересувам от въпроса, трябва ли другите части да бъдат публикувани като отделни статии или е по-добре да актуализирате и допълните това?

Част 7: Текстури и размазване
Част 8: Светът на плочките

Предговор

Така че нека се върна към същността на въпроса.

Част 1: Правилните инструменти

1 някои стари неща

Накратко, можете да забравите за Paint. Сега ще видим истинския софтуер.

2. В крайна сметка ...

3. Крем

Charamaker 1999 е добра програма, но разпространението изглежда е задържано.

Следва продължение…

Бележки на преводача от френски на английски

Бележка от преводач от английски на руски

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

Малко история

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

Има много безплатни растерни редактори там. Но по-често от други се наричат \u200b\u200bMicrosoft Paint и Adobe Photoshop. Вярно е, че Paint се счита за по-малко удобен инструмент за създаване на пикселни изображения от Adobe Photoshop. Защо? В тази програма:
много е трудно да се постигне равномерност и симетрия на изображенията;
когато ги записвате в jpg формат, има силно изкривяване на цветовете;
трудно се рисуват сенки и отблясъци.
Затова те се опитват да дадат предимство на Adobe Photoshop. Тази програма има много повече възможности за работа от Paint. Това ви позволява да рисувате не отделни герои с прост дизайн, а цели картини. Освен това самото пикселно изкуство е по-лесно и по-бързо за редактиране тук. И можете да прехвърляте цветни преходи в Adobe Photoshop плавно и естествено.

Как да избегнем пречупвания в Pixel Art

Pixel art е колекция от пиксели, които са квадратни или правоъгълни „точки“. Когато изображение се изчертае от такива "точки", тогава се появява ъгловост, плавността в линиите изчезва. От една страна, това е визитна картичка на Pixel Art, но от друга искам повече гладкост, която ще направи картината изчистена и привлекателна за потребителя. Този проблем на езика на пикселните изпълнители се нарича извиване или "джаги".
Jaggies са фрагменти, които придават на всички линии назъбен вид. Те обикновено се изхвърлят по един от следните начини:
увеличете сегмента на нокаутираната линия с дължина 2, 3 или повече пиксела;
намаляване на дължината на самите пиксели във видното място;
нов сегмент от редове е изграден от няколко единични пиксела;
добавете единични пиксели към кръстовището между по-дълги "точки" и т.н.
За правилното премахване на прегъванията трябва да запомните основното правило: дължината на елементите в извита линия трябва да намалява или да се увеличава постепенно. Също така трябва да запомните, че изместването на отсечка на линията с височина два или повече пиксела води до разрушаване на гладкостта.
Следователно е необходима постоянна практика на рисуване. И като проста и визуална помощ, която помага да се избегнат прегъвания, можете да използвате набор от наклонени линии.

Как да получите сянка в Pixel Art

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

Как да получите изблик на пикселно изкуство

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

Категории

Избор на редакторите

Как да нарисувате пикселни неща. Adobe Photoshop: Начертайте и анимирайте пикселен арт герой

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

Стъпки

Предговор

Част 1: Правилните инструменти

1 някои стари неща

2. В крайна сметка ...

3. Крем

Бележки на преводача от френски на английски

Бележка от преводач от английски на руски

Предговор

Част 1: Правилните инструменти

1 някои стари неща

2. В крайна сметка ...

3. Крем

Бележки на преводача от френски на английски

Бележка от преводач от английски на руски

Търсене

Абонамент

Популярни публикации

Последните бележки