Adobe Photoshop: Малюємо та анімуємо персонажа в техніці Pixel Art. Що таке Pixel Art? Приклади та як цьому навчитися Створення піксель арта

"itemprop="image">

У туторіалі "Як малювати піксель арт", що складається з 10 кроків, я навчу вас створювати "спрайт" (окремий двомірний персонаж або об'єкт). Сам термін, звичайно, прийшов із відео-ігор.

Я навчився створювати піксель арт, тому що він був мені потрібний для графіки у моїй грі. Через роки тренувань, я призвичаївся і почав розуміти, що піксель арт - це скоріше мистецтво, ніж просто інструмент. Сьогодні піксель арт дуже популярний серед розробників ігор та ілюстраторів.

Цей туторіал був створений багато років тому для того, щоб навчити людей простим концептам створення піксель арт, але багаторазово доповнювався, тому він значно відрізняється від початкової версії. У мережі багато туторіалів на цю тематику, але мені всі вони здаються занадто складними або затягнутими. піксель арт – це наука. Ви не повинні розраховувати вектори під час створення піксель арт.

Інструменти

Однією з головних переваг створення піксель арт є те, що вам не потрібні якісь просунуті інструменти – графічного редактора, встановленого на вашому комп'ютері, за промовчанням має вистачити. Варто згадати, що існують програми, розроблені спеціально для створення пікселів арт, на кшталт Pro Motion або Pixen (для користувачів Mac). Я сам їх не тестував, але чув багато позитивних відгуків. У цьому туторіалі я використовуватиму фотошоп, який, хоч і коштує чимало, містить безліч корисних інструментів для створення мистецтва, частина з яких дуже корисна для пікселінгу.

Як малювати піксель арт у фотошопі

Під час використання фотошопу вашою головною зброєю буде інструмент «Олівець» (клавіша В), який є альтернативою інструменту «Пензель». Олівець дозволяє вам прикрашати окремі пікселі, уникаючи накладання кольорів.

Нам знадобляться ще два інструменти: «Виділення» (клавіша М) та «Чарівна паличка» (клавіша W) для того, щоб вибирати і перетягувати, або копіювати і вставляти. Пам'ятайте, що, натиснувши клавішу Alt або Shift під час виділення, ви можете додати виділені об'єкти або виключити їх з поточного списку виділених. Це потрібно до речі, коли потрібно вибирати нерівні об'єкти.

Ви також можете використовувати піпетку, щоб переносити кольори. Є тисяча причин, що підтверджують важливість збереження квітів у піксель арт, так що вам знадобиться взяти кілька кольорів та використовувати їх знову та знову.

Нарешті, переконайтеся, що ви запам'ятали всі гарячі клавіші, адже це може зберегти масу вашого часу. Зверніть увагу на «Х», що перемикає між основним та додатковим кольором.

Лінії

Пікселі – це самі маленькі кольорові квадратики. Спочатку вам потрібно зрозуміти, як ефективно розташувати ці квадратики для створення необхідної лінії. Ми розглянемо два найпоширеніших види ліній: прямі та вигнуті.

Прямі лінії

Я знаю про що ви подумали: тут все настільки просто, що немає сенсу вникати у щось. Але, якщо йдеться про пікселі, навіть прямі лінії можуть стати проблемою. Нам потрібно уникати зазубрених частин - маленьких фрагментів лінії, що змушують її виглядати нерівно. Вони з'являються, якщо одна з частин лінії більша або менша за інші, що оточують її.

Вигнуті лінії

Малюючи вигнуті лінії, потрібно переконатися, що спад чи підйом рівномірні по всій довжині. У даному прикладіакуратна лінія має інтервали 6 > 3 > 2 > 1, а ось лінія з інтервалами 3 > 1< 3 выглядит зазубренной.

Вміння малювати лінії – ключовий елемент пікселя арт. Трохи далі я розповім вам про згладжування.

Концептуалізація

Для початку вам знадобиться хороша ідея! Спробуйте візуалізувати те, що ви збираєтеся зробити в піксель арт - на папері або просто подумки. Маючи уявлення про малюнок, ви зможете сконцентруватися на самому пікселінгу.

Теми для роздумів

• Для чого буде використано цей спрайт? Він для веб-сайту чи гри? Чи потрібно буде зробити його анімованим? Якщо так, то його потрібно буде зробити меншим і менш детальним. І, навпаки, якщо ви не працюватимете зі спрайтом у майбутньому, можете причепити на нього стільки деталей, скільки вам потрібно. Тому заздалегідь вирішіть для чого конкретно потрібен цей спрайт та виберіть оптимальні параметри.
• Які існують обмеження? Раніше я згадав про важливість збереження кольорів. Головною причиноює обмеженість палітри кольорів через системні вимоги (що вкрай малоймовірно в наш час) або для комбінації. Або для точності, якщо ви емулюєте особливий стиль C64, NES і таке інше. Також варто враховувати вимірювання вашого спрайту і те, чи не надто він виділяється на тлі необхідних об'єктів.

Давайте спробуєм!

У цьому туторіалі обмежень немає, але я хотів переконатися, що мій піксель арт буде досить великим і ви зможете детально розглянути, що відбувається в кожному з кроків. З цією метою я вирішив використовувати як модель Lucha Lawyer, персонажа зі світу реслінгу. Він би чудово вписався у файтинг чи динамічний бойовик.

Контур

Чорний контур стане гарною основою для вашого спрайту, тож з нього ми і почнемо. Ми вибрали чорний, тому що він виглядає добре, але при цьому трохи похмуро. Далі в туторіалі я розповім вам про те, як змінити колір контуру для підвищення реалізму.

Існує два підходи до створення контуру. Ви можете намалювати контур від руки, а потім трохи його поправити або малювати все по одному пікселю. Так, ви все правильно зрозуміли, йдеться про тисячу кліків.

Вибір способу залежить від розміру спрайту та ваших навичок пікселінгу. Якщо спрайт справді величезний, то логічніше намалювати його від руки, щоб створити зразкову форму, а потім підрівняти. Повірте, це набагато швидше, ніж одразу намагатися намалювати ідеальний ескіз.

У моєму туторіалі я створюю досить великий спрайт, так що тут буде показаний перший спосіб. Буде простіше, якщо покажу наочно і поясню, що сталося.

Крок перший: чорновий контур

Використовуючи вашу мишу або планшет, намалюйте чорновий контур для вашого спрайту. Переконайтеся в тому, що він не надто сирий, тобто виглядає приблизно так, як ви бачите свій кінцевий продукт.

Мій ескіз практично повністю збігся з тим, як я запланував.

Крок другий: відполіруйте контур

Почніть з того, що збільшуєте зображення у 6 або 8 разів. Ви повинні чітко бачити кожен піксель. А потім підчищайте контур. Зокрема, варто звернути увагу на «бродячі пікселі» (весь контур повинен бути не більше одного пікселя завтовшки), позбавтеся зазубрин, і додайте невеликі деталі, які ми пропустили в першому кроці.

Навіть великі спрайти дуже рідко перевищують розмір 200 на 200 пікселів. Фраза "робіть більше, використовуючи менше засобів" відмінно підходить для опису процесу пікселінгу. Незабаром ви переконаєтеся, що навіть один піксель має значення.

Максимально спростіть контур. Деталями ми займемося пізніше, зараз вам потрібно зайнятися знаходженням великих пікселів, таких як, наприклад, сегментація м'язів. Зараз все виглядає не дуже, але виявите трохи терпіння.

Колір

Коли контур готовий, ми отримуємо свого роду забарвлення, яке потрібно заповнити квітами. Фарба, заливка та інші інструменти нам у цьому допоможуть. Підбирати кольори може бути складно, але теорія кольору не є темою цієї статті. Як би там не було, є кілька базових концепцій, знання яких вам знадобиться.

Колірна модель HSB

Це англійське скорочення, Зібране зі слів «Відтінок, Насиченість, Яскравість». Вона є лише однією з множини комп'ютерних колірних моделей (або числових уявлень кольору). Ви, напевно, чули і про інші приклади на кшталт RGB і CMYK. Більшість графічних редакторів використовують HSB для вибору кольору, тому ми зосередимося саме на ній.

Hue– Відтінок – те, що ми звикли називати кольором.

Saturation– Насиченість – визначає інтенсивність кольору. Якщо значення дорівнює 100%, це максимальна яскравість. Якщо його знизити, то у кольорі з'являться тьмяність і він «посіріє».

Brightness- Світло, яке випромінює колір. Наприклад, у чорного цей показник дорівнює 0%.

Вибираючи кольори

Вирішувати, які кольори вибрати – ваше завдання, але є кілька речей, про які варто пам'ятати:

• Неяскраві та ненасичені кольори виглядають радше реалістично, ніж мультяшно.
• Подумайте про колесо кольору: чим далі в ньому розташовані два кольори, чим гірше вони поєднуються. У той же час, червоний і помаранчевий, які знаходяться в безпосередній близькості один від одного, виглядають чудово.

• Чим більше кольорів ви використовуєте, тим розмитіше виглядатиме ваш малюнок. Тому, виберіть пару-трійку основних кольорів та користуйтеся ними. Пам'ятайте, що Супер Маріо свого часу був створений виключно з комбінацій коричневого і червоного.

Нанесення кольорів

Наносити колір дуже просто. Якщо ви використовуєте фотошоп, просто виберіть необхідний фрагмент, виділіть його чарівною паличкою(клавіша W), а потім заповніть його за допомогою основного кольору (Alt-F) або додаткового кольору Ctrl-F).

Шейдинг

Шейдинг - одна з найважливіших частинквест на отримання статусу напівбога пікселінгу. Саме на цьому етапі спрайт або починає виглядати краще, або ж перетворюється на дивну субстанцію. Дотримуйтесь моїх вказівок і у вас точно все вийде.

Крок перший: вибираємо джерело світла

Спочатку ми вибираємо джерело світла. Якщо ваш спрайт є частиною більшого фрагмента, в якому є власні джерела освітлення, на кшталт ламп, смолоскипів і так далі. І всі вони можуть по-різному впливати на те, як виглядає спрайт. Як би там не було, вибір віддаленого джерела світла, на кшталт сонця – чудова ідея для більшості пікселів арт. Для ігор, наприклад, вам потрібно буде створити максимально яскравий спрайт, який потім можна буде підлаштувати під довкілля.

Я зазвичай роблю вибір на користь віддаленого джерела світла, розташованого десь угорі перед спрайтом, так що висвітлюється лише його передня частина і верх, а решта піддається шейдингу.

Крок другий: безпосередньо шейдинг

Як тільки ми вибрали джерело світла, можна починати затемнювати ділянки, що знаходяться далі від нього. Наша модель освітлення сприяє тому, що нижня частина голови, руки, ноги та інше має бути покрита тінню.

Нагадаємо, що пласкі речі відкидати тінь не можуть. Візьміть аркуш паперу, зім'ятайте його і покатайте по столу. Як ви зрозуміли, що вона вже не плоска? Ви просто побачили тіні довкола нього. Використовуйте шейдинг для того, щоб підкреслити складки в одязі, мускулатуру, хутро, колір шкіри тощо.

Крок третій: м'які тіні

Другий шейд, який світліший за перший, повинен використовуватися для створення м'яких тіней. Це потрібно для областей, які не висвітлюються прямо. Їх можна також використовувати для переходу від світлої ділянки до темної та на нерівних поверхнях.

Крок четвертий: освітлені місця

Місця, на які потрапляють прямі промені світла, також потрібно виділити. Варто зазначити, що хайлайтів має бути менше, ніж тіней, інакше вони викликатимуть зайву увагу, тобто виділятимуться.

Позбавте себе головного болю, запам'ятавши одне просте правило: спочатку тіні, потім хайлайти. Причина проста: якщо немає тіней, занадто великі фрагменти будуть засвічені, а коли ви нанесете тіні, їх доведеться зменшувати.

Декілька корисних правил

З тінями у новачків завжди багато труднощів, так що ось кілька правил, які вам потрібно слідувати під час шейдингу.

1. Не користуйтеся градієнтами. Найбільш поширена помилка новачків. Градієнти виглядають жахливо і навіть приблизно не відбивають, як світло грає на поверхнях.
2. Не використовуйте "м'який шейдинг". Я говорю про ситуацію, коли тінь знаходиться надто далеко від контуру, адже тоді вона виглядає дуже розмитою, і перешкоджає виявленню джерела світла.
3. Не використовуйте занадто багато тіней. Легко думати, що «чим більше кольорів – тим реалістичніша картинка». Як би там не було, в реального життями звикли бачити речі у темному чи світлому спектрах, а наш мозок відфільтрує все, що знаходиться між ними. Використовуйте лише дві темні (темна і дуже темна) і дві світлі (світла і дуже світла) і накладайте їх на колір основи, а не один на одного.
4. Не використовуйте схожі кольори. Особливої ​​потреби використання практично однакових кольорів немає за винятком випадків, коли вам потрібно зробити дійсно розмитий спрайт.

Дизеринг

Збереження кольорів - ось на що творцям піксель арт дійсно потрібно звернути увагу. Ще один спосіб отримати більше тіней без використання більшої кількості кольорів називається дизеринг. Також як у традиційного живописувикористовується «штрихування» і «перехресне штрихування», тобто ви, прямому значенніотримуєте щось середнє з двох кольорів.

Простий приклад

Ось простий приклад того, як за допомогою дизерингу з двох кольорів можна створити чотири варіанти шейдингу.

Просунутий приклад

Порівняйте картинку зверху (створену за допомогою градієнта у фотошопі) з картинкою, створеною всього з трьох кольорів, використовуючи дизеринг. Врахуйте, що різні візерунки можуть бути використані для створення суміжних кольорів. Вам буде простіше зрозуміти принцип, якщо самі створите кілька візерунків.

Застосування

Дизеринг може надати вашому спрайту той прекрасний ретро-вид, тому що безліч перших відео ігор дуже активно використовували цю техніку через малу кількість доступних палітр кольорів (якщо ви хочете побачити безліч прикладів дизерингу - подивіться на ігри, розроблені для Sega Genesis). Я сам не дуже часто використовую цей спосіб, але для навчальних цілей, я покажу, як це можна застосувати на нашому спрайте.

Ви можете використовувати дизеринг скільки вашій душі завгодно, але варто відзначити, що лише кілька людей застосовують його справді вдало.

Вибіркове контурування

Вибіркове контурування, яке також називають селаутом (від англійського selected outlining), є підвидом шейдингу контуру. Замість використання чорної лінії ми підбираємо колір, який буде гармонійніше виглядати на вашому спрайте. Крім того, ми змінюємо яскравість цього контуру ближче до країв спрайту, дозволяючи джерелу кольору визначати, які кольори нам варто використовувати.

До цього моменту ми використовували чорний контур. У цьому немає нічого поганого: чорний чудово виглядає, а також дозволяє якісно виділити спрайт на тлі навколишніх об'єктів. Але використовуючи цей метод, ми жертвуємо реалізмом, який міг би нам стати в нагоді в деяких випадках, так як наш спрайт продовжує виглядати мультяшно. Вибіркове контурування дозволяє позбутися цього.

Ви помітите, що я використав селаут для пом'якшення рельєфу м'язів. Нарешті наш спрайт починає виглядати як єдине ціле, а не як величезна кількість окремих фрагментів.

Порівняйте це з оригіналом:

1. Згладжування

Принцип роботи згладжування простий: додавання проміжних кольорів до зламів, щоб вони виглядали гладкіше. Наприклад, якщо у вас є чорна лінія на білому тлі, то до її зламів по краю буде додано невеликі сірі пікселі.

Техніка 1: згладжування згинів

Загалом, вам потрібно додати проміжні кольори в місця, де є злами, тому що інакше лінія виглядатиме нерівною. Якщо вона все ще здається нерівною, додайте ще шар пікселів світліше. Напрямок нанесення проміжного шару має збігатися із напрямком кривої.

Я не думаю, що можу пояснити це краще, не ускладнюючи. Просто подивіться на картинку, і ви зрозумієте про що я.

Техніка 2: заокруглення нерівностей

Техніка 3: затирання закінчень ліній

Застосування

Тепер, давайте застосуємо згладжування до нашого принта. Врахуйте, що якщо ви хочете, щоб ваш спрайт виглядав добре на тлі будь-якого кольору, не варто згладжувати зовнішню частину лінії. У протилежному випадку, ваш спрайт оточений дуже недоречним ореолом на стику з фоном, і тому занадто явно виділятиметься на будь-якому фоні.

Ефект дуже непомітний, але при цьому він має велике значення.

Чому це потрібно робити вручну?

Ви можете запитати: «Чому просто не застосувати фільтр графічного редактора на наш спрайт, якщо нам потрібно, щоб він виглядав гладко?». Відповідь також проста – жоден фільтр не зробить ваш спрайт таким же чітким та чистим, як ручна робота. Ви отримаєте повний контроль не тільки над кольорами, що використовуються, але й над тим, де їх використовувати. До того ж, ви краще за будь-який фільтр знаєте, де згладжування буде доречним, а де є ділянки, пікселі в яких просто втратять свою якість.

Оздоблення

Ух ми вже досить близько підібралися до моменту, коли ви зможете вимкнути комп'ютер і дістати з холодильника пляшечку холодного пива. Але він ще не настав! Остання частина присвячена тому, що відрізняє енергійного любителя досвідченого професіонала.

Зробіть крок назад і погляньте на ваш спрайт. Існує ймовірність того, що він все ще виглядає «сировато». Витратьте трохи часу на вдосконалення і переконайтеся, що все ідеально. Неважливо, наскільки ви вже втомилися, попереду на вас чекає найвеселіша частина. Додати деталі, щоб ваш спрайт виглядав цікавіше. Ось тут якраз відіграють роль ваші вміння та досвід пікселінгу.

Вас міг дивувати той факт, що весь цей час у нашого Lucha Lawyer не було очей, або що скруток, який він тримає – порожній. Власне, причина полягає в тому, що я хотів почекати з дрібними деталями. Також зверніть увагу на обробку, яку я додав на його пов'язки, ширинку на його штанах ... ну і, ким би був чоловік без його сосків? Також я трохи затемнив нижню частину його торса, щоб рука більше виступала на тлі тіла.

Зрештою ви закінчили! Lucha Lawyer виступає в легкій вазі, адже в ньому всього 45 кольорів (а може це і суперважкий - все залежить від обмежень вашої палітри) і його роздільна здатність становить приблизно 150 на 115 пікселів. Ось тепер можете відкрити пиво!

Прогрес повністю:

Це завжди кумедно. Ось гіфка, яка демонструє еволюцію нашого спрайту.

1. Вивчайте ази мистецтва та практикуйте традиційні техніки. Всі знання та вміння, необхідні для креслення та малювання, можна застосувати і в пікселінгу.
2. Починайте з маленьких спрайтів. Найважче – навчитися розміщувати безліч деталей, використовуючи мінімальну кількість пікселів, щоб не робити такі великі спрайти, як мій.
3. Вивчайте роботи художників, якими ви захоплюєтеся та не бійтеся бути неоригінальними. Кращий спосібнавчання – повторення фрагментів чужих робіт. На вироблення власного стилювитрачається чимало часу.
4. Якщо у вас немає планшета, купити його. Постійні нервові зривиі стреси, викликані безперервним клацанням лівою кнопкою мишки – це не забавно, та й навряд чи вразить представників протилежної статі. Я використовую невеликий Wacom Graphire2 – мені подобається його компактність та портативність. Вам, можливо, припаде до душі більший планшет. Перед покупкою проведіть невеликий тест-драйв.
5. Діліться своїми роботами з іншими, щоб дізнатися про їхню думку. Це, можливо, також буде непоганим способом знайти нових друзів-гіків.

P.S.

Оригінал статті знаходиться. Якщо у вас є посилання на класні туторіали, які потрібно перекласти, надсилайте їх в нашу тусову. Або пишіть прямо у повідомлення групи

У цьому уроці ви дізнаєтеся, як перетворити фотографію людини на піксельне мистецтво. вигаданий персонажаркадної гри з початку 90-х.
Джеймс Май - aka Smudgethis - розробив цей стиль у 2011 році для музичного відеодля дабстеп-рок-акту. Перший хіт Nero's, Me & You - де він створив анімацію, щоб показати стару груза участю Nero"s два учасники. Гра була 2D-платформером з ритмікою з 16-бітною графікою, подібною до Double Dragon, але набагато перевершує 8-бітові ігри ретро-класики, такі як Super Mario Bros.
Щоб створити цей стиль, персонажі все одно мають бути блоковими, але складнішими, ніж старі ігри. І хоча вам потрібно використовувати обмежену палітру для досягнення зовнішнього виглядупам'ятайте, що в цих іграх, як і раніше, було 65 536 кольорів.
Тут Джеймс показує вам, як створити персонаж на основі фотографії, використовуючи просту кольорову палітру та інструмент «Олівець».
Як і посібник з анімації, вам також знадобиться фотографія людини. Джеймс використав фотографію панку, яка включена до файлів проекту цього підручника.
Після завершення ознайомтеся з цим 16-розрядним підручником анімації After Effects, де Джеймс покаже вам, як взяти цього персонажа в AE, пожвавити його та застосувати ефекти ретро-ігри.

Крок 1

Відкрийте посібник з анімації (16 біт) .psd і 18888111.jpg (або фото на ваш вибір) для використання в якості основи для персонажа. Повноформатна фотографія профілю буде працювати найкраще і допоможе з отриманням палітри кольорів і стилів для вашої 16-бітної фігури.
У посібнику з анімації є кілька поз по окремих шарах. Виберіть той, який найкращим чиномвідповідає позі на вашій фотографії - оскільки ми не маємо ніг у кадрі, я пішов на стандартну позу на рівні 1.

Крок 2

Використовуючи інструмент Rectangular Marquee (M), виберіть головку з вашої фотографії та копію (Cmd /Ctrl + C) та вставте її (Cmd /Ctrl + V) у Посібник з анімації (16 біт) .psd.
Масштабуйте зображення, щоб воно відповідало, пропорційно. Ви помітите, що міра того, як розміри PSD дуже малі, зображення миттєво почне малювати піксель.

Крок 3

Створіть новий шар і намалюйте контур одним піксельним чорним олівцем (B), використовуючи наданий у ньому посібник з анімації та фотографію як основу. \ п
Гід, що поставляється, допомагає розвинути ряд персонажів з більших фігур боса або більш тонких жіночих. Це приблизний посібник для компонування та анімації моїх персонажів піксельних творів.

Крок 4

Використовуючи інструмент Eyedropper (I), проведіть зразок найтемнішої області тону шкіри на фотографії і створіть маленький квадрат кольору. Зробіть це ще тричі, щоб створити чотириколірну палітру тон шкіри.
Створіть ще один шар під контурним шаром і за допомогою однопіксельного пензля і чотириколірної палітри кольору затініть зображення (знову ж, використовуючи фотографію як ваш гід). \ п
Найкраще зберігати всі елементи вашого витвору мистецтва або різні верстви, оскільки це дозволяє легко повторно використовувати їх на інших фігурах. Це особливо корисно для «baddies», оскільки більшість 16-бітних ігор використовують дуже схожі цифри. Наприклад, в одного бадді може бути червона сорочка і ніж, тоді як пізніша ідентична, крім синьої сорочки та пістолета.

Крок 5

Повторіть цей процес для інших частин фігури, затінюючи тканину відповідно до інших елементів у вихідній фотографії. Не забудьте продовжити вибірку за допомогою інструмента «Піпетка», щоб спочатку створити палітри кольорів, оскільки це забезпечує узгоджений набір кольорів, який відмінно виглядає та підходить до відносно обмеженої палітри кольорів 16-розрядних ігор.

Крок 6

Додайте дані, щоб поліпшити ваш характер з відтінками, татуюваннями, сережкою тощо. Повечеряйте тут, і подумайте про те, як ви хочете, щоб ваш персонаж з'явився в ігровому середовищі. Можливо, вони можуть використати сокиру або мати роботизовану руку?

Крок 7

Щоб оживити ваш персонаж, повторіть попередні етапи, використовуючи інші п'ять шарів посібника з анімації. Цей процес може зайняти деякий час, щоб освоїти та створити безшовні результати, але можна виконати короткі скорочення шляхом повторного використання елементів із попередніх кадрів. Наприклад, у цій шестикадровій послідовності голова залишається незмінною.

Крок 8

Щоб перевірити послідовність анімації в порядку, відкрийте панель анімації у Photoshop і переконайтеся, що в Наразілише перший кадр анімації. Ви можете додати нові кадри і включити та вимкнути шари, щоб зробити свою анімацію, але самим швидким способомє використання команди «Зробити кадри із шарів» у спливаючому меню панелі (вгорі праворуч).
Перший кадр - порожній фон, тому виберіть його та натисніть на значок кошика панелі (внизу), щоб видалити його.


Частина 6: Згладжування
Частина 7: Текстури та розмиття
Частина 8: Світ тайлів

Передмова

Є багато визначень піксель-арту, але тут ми будемо використовувати таке: зображення піксель-арт, якщо воно створене цілком руками, і є контроль над кольором і позицією кожного пікселя, який намальований. Безсумнівно, у піксель арті включення чи використання пензлів чи інструментів розмиття чи машин деградації (degraded machines, не певен), та інших опцій ПЗ, які «сучасні», нами не використовуються (взагалі put at our disposal означає «у нашому розпорядженні») , Але за логікою начебто правильніше так). Він обмежений такими інструментами як «олівець» і «заливка».

Проте не скажеш, що піксель-арт чи не-піксель-арт графіка – більш менш красива. Справедливіше сказати, що піксель-арт інший, і він найкраще підходить для ігор стилю «ретро» (як Супер Нінтендо чи Гейм Бой). Ви можете також комбінувати техніки, вивчені тут, з ефектами з не-піксель-арту, для створення гібридного стилю.

Так, тут ви вивчатиме технічну частину піксель-арту. Тим не менш, ніколи я не зроблю вас художником… з простої причини, що я теж не художник. Я не навчу вас ні людської анатомії, ні структури мистецтв і мало скажу про перспективу. У цьому посібнику ви можете знайти багато інформації про техніки піксель-арту. В кінці, ви повинні будете бути здатні створити персонажів і пейзаж для ваших ігор, за умови, що ви будете уважні, практикуватися регулярно, і застосовувати ці поради.

- Я також хочу вказати, що лише деякі з зображень, використаних у цьому посібнику збільшено. Для зображень, які не збільшені, буде добре, якщо ви знайдете час скопіювати ці зображення так, щоб ви могли вивчити їх детально. Піксель-арт – це суть пікселів, вивчати їх здалеку марно.

Зрештою, я маю подякувати всім художникам, хто приєднався до мене у створенні цього керівництва так чи інакше: Шина, за його брудну роботу і штрихові малюнки, Ксеногідрогена, за його геній квітів, Лунна, за його знання перспективи, і Панду, суворого Ахруона, Дайо і Крайона за їх щедро надані роботи, для ілюстрації цих сторінок.

Так, дозвольте повернутися до справи.

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

Погані новини: ви не намалюєте жодного пікселя у цій частині! (І це не причина пропускати її, так?) Якщо є приказка, яку я терпіти не можу, це «немає поганих інструментів, тільки погані працівники». Насправді я думав, що не може бути нічого більш далекого від істини (за винятком може бути «те, що не вбиває вас, робить вас сильнішим»), і піксель-арт, дуже хороше підтвердження. Цей посібник має на меті ознайомити вас з різним програмним забезпеченням, що використовується для створення піксель-арту, та допомогти вам вибрати правильну програму.

1. Деякі старі речі

Коли вибираєш програмне забезпечення для створення піксель-арту, люди часто думають: «Вибір програмного забезпечення? Це безумство! Все що нам потрібно для створення піксель-арту, це paint! (мабуть гра слів, малювання та програма)» Трагічна помилка: Я говорив про погані інструменти, це перший 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 . Я переконую вас спробувати їх у демо версіях, і подивитися яка підходить вам за зручністю. Зрештою це справа смаку. Просто знайте, що одного разу, почавши використовувати програму, може бути дуже складно переключитися на щось інше.

Далі буде…

Нотатки перекладача з французької на англійську

Це великий посібник з піксель арту, написаний Філом Розорбаком з LesForges.org. Дуже дякую Філу Розорбаку за дозвіл OpenGameArt.org перевести ці посібники та помістити їх тут. (Від перекладача російською: я дозволу не питав, якщо хтось має бажання, можете допомогти, не маю достатнього досвіду спілкування англійською і тим більше французькою).

Нотатка перекладача з англійської на російську

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

Якщо в дитинстві вам подобалося грати з конструктором Лего (або ви продовжуєте грати з ним навіть будучи дорослим), вас напевно зацікавить ізометричний піксель арт. Він може залежати від техніки і бути більш схожим на точну науку, ніж на ілюстрування. Зате у такому мистецтві немає 3D перспективи, можна переміщати елементи довкілляз максимальною простотою.

Ми створимо персонажа як логічну точку відліку для піксель арту, оскільки він допоможе визначити пропорції для більшості інших предметів, які ми можемо створювати. Однак для початку потрібно дізнатися про деякі основи ізометричного піксель арту, а потім переходити до створення персонажа; якщо ви не хочете вивчати основи та малювати куб, переходьте до пункту 3. Тепер почнемо.

1. Піксельні лінії

Ці лінії є основою для найпоширенішого (і найцікавішого) стилю ізометричного піксель арту, стилю який ми будемо використовувати в уроці:

Вони є два пікселі вздовж кожного пікселя вниз. Такі лінії виглядають відносно м'якими та використовуються для квадратних поверхонь:

Найчастіше використовувані структури ліній (як на малюнку нижче) працюватимуть добре, але малюнок вийде більш незграбним і грубим з кожним збільшенням кроку:

Для контрасту кілька нерівномірно структурованих ліній:

Дуже незграбні і виглядають не

гарно. Уникайте їх використання.

2. Обсяги

Наш персонаж не буде дотримуватися законів ізометрії, тому давайте спочатку створимо простий куб, щоб визначитися з пропорціями.

Створіть новий документ у Photoshop з роздільною здатністю 400 x 400 px.

Я люблю відкривати додаткове вікно для того ж файлу, використовуючи меню Вікно > Впорядкувати > Нове вікно/lessons.(Window > Arrange > New Window…). Це дозволяє, працюючи при збільшенні 600% стежити за результатом у вікні із зумом 100% . Використання сітки - ваша справа, але іноді вона здається мені більш настирливою, ніж корисною.

Давайте наблизимо документ і створимо одну з ліній 2:1

Я волію використовувати 5% сірий колір замість чорного, щоб потім додати тіні (чорного кольору та з низькою непрозорістю) і мати можливість вибрати кожен колір окремо за допомогою чарівної палички.

Є кілька способів намалювати лінію:

1. Використовуючи інструмент Лінія(Line Tool) з режимом Пікселі(Pixels), знятою галочкою Згладжування(Anti-alias) та товщиною 1px. Під час малювання підказка з кутом нахилу має показувати 26,6°. Насправді інструмент Лінія не можна назвати зручним, він створює нерівні лінії, якщо кут не точний.

2. Потрібно створити виділення 20 х 40 px, потім вибрати олівець(Pencil Tool) товщиною в 1pxі намалювати точку в лівому нижньому куті виділення, після цього, утримуючи клавішу Shiftклікнути у правому верхньому кутку. Photoshop автоматично створить нову лінію між двома точками. Якщо потренуватися, у такий спосіб можна створювати рівні лінії без виділення.

3. Потрібно намалювати олівцем два пікселі, вибрати їх, натиснути Ctrl+AltПісля цього перетягнути виділення на нове місце так, щоб пікселі зійшлися на кутах. Також можна переміщати виділення стрілками на клавіатурі, утримуючи Alt. Такий метод називається Alt-зсув(Alt-Nudge).

Ось ми створили першу лінію. Виділіть її та перемістіть як у кроці 3 або просто скопіюйте та вставте, перемістивши новий шар вниз. Після цього відобразіть другу лінію по горизонталі через меню Редагування > Трансформування > Відобразити по горизонталі(Edit > Transform > Flip Horizontal). Я використовую цю функцію так часто, що навіть зробив для неї скорочення клавіатури!

Тепер давайте об'єднаємо наші лінії:

Потім знову застосуйте Alt-зміщення, відобразіть копію по вертикалі і об'єднайте дві половини, щоб закінчити нашу поверхню:

Настав час додати "третій вимір". Виконайте Alt-зміщення квадратної поверхні та перемістіть її на 44pxвниз:

Порада: Якщо під час переміщення стрілками утримувати Shiftвиділення зміститься на 10 пікселів замість одного.

Щоб зробити більш охайний куб, давайте пом'якшити кути, прибравши крайні ліві та праві пікселі з квадратів. Після цього додайте вертикальні лінії:

Тепер заберіть непотрібні лінії в нижній частині куба. Щоб почати розфарбовування нашої фігури, виберіть будь-який колір (бажано світлого відтінку) і заповніть ним верхній квадрат.

Тепер збільште яскравість вибраного кольору на 10% (я рекомендую використовувати HSB слайдери на контрольній панелі), щоб намалювати світліші кути вздовж передньої частини кольорового квадрата. Через те, що ми трохи обрізали куб, ці світлі лінії виглядатимуть красивішими, перебуваючи над чорними гранями (замість того, щоб замінювати їх) як на малюнку нижче:

Тепер потрібно вилучити чорні грані. Використовуйте трюк з другого способу малювання ліній для гумки (який має бути налаштований на звичайний інструмент Ластик(Eraser Tool), режим Олівець(Pencil Mode), товщина 1px).

Виберіть колір верхнього квадрата за допомогою Піпетки(Eyedropper Tool). Щоб швидко вибрати цей інструмент, натисніть клавішу під час малювання олівцем або заливки. Alt. Використовуйте колір піпетки, щоб заповнити вертикальну лінію посередині куба. Після цього зменшіть яскравість кольору на 15% та заповніть ліву грань куба отриманим кольором. Зменшіть яскравість ще на 10% для правої грані:

Наш куб завершено. Він має виглядати чисто і відносно гладко при зумі 100% . Можемо продовжувати.

3. Додамо персонажа

Стиль персонажа може бути зовсім різним, ви можете змінювати пропорції або елементи за своїм бажанням. Як правило, я роблю тонке тіло і трохи більшу голову. Худе тіло персонажа допомагає зберігати лінії прямими та простими.

Логічно почне з очей. Якщо з ізометричними кутами ми були суворі, то на обличчі одне око має бути нижче, але в маленькому масштабі ми можемо знехтувати цією особливістю, щоб зробити обличчя персонажів приємнішими. Це зробить малюнок акуратним навіть попри розмір.

Ми робимо персонажа маленьким, адже через час ви можете захотіти додати йому машину, будинок, цілу площу чи навіть місто. Тому персонаж має бути одним із найдрібніших елементів в ілюстрації. Варто також враховувати графічну ефективність; намагайтеся зробити персонажа якомога привабливішим з мінімальною кількістю пікселів (досить великим, щоб зобразити риси обличчя). Крім того, маленькі предмети малювати набагато простіше. Винятком є ​​ситуація, коли ви хочете показати лише персонажа, його емоції чи подібність із кимось.

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

Тепер додайте ще один шар і намалюйте горизонтальну смужку із двох пікселів, це буде рот. Використовуйте стрілки на клавіатурі для переміщення і, коли знайдете ідеальну позицію, перемістіть шар вниз. Те саме зробіть з підборіддям, це має бути просто лінія довша:

Домалюйте волосся та верх голови, потім пом'якшіть кути. Ви повинні отримати щось схоже:

Тепер поряд з другим оком залиште порожній піксель, додайте бакенбарди (які також допоможуть намалювати вуха персонажа) та ще кілька пікселів над ними до самої лінії волосся. Потім залиште ще один порожній піксель, тут починатиметься вухо та лінія, що позначає кінець голови. Продовжуйте та пом'якшіть кути стикування ліній:

Додайте піксель для верхньої частини вуха та змініть форму голови, якщо хочете; голови зазвичай малюють вже в районі шиї:

Намалюйте лінію від підборіддя – це будуть груди. Початок шиї буде в районі вуха, кілька пікселів вниз і пара пікселів по діагоналі, щоб у нашого персонажа були видні плечі:

Тепер у місці, де закінчуються плечі, додамо вертикальну лінію завдовжки 12 пікселів, щоб зробити зовнішній бік руки, а внутрішня сторона буде на два пікселі вліво. З'єднайте лінії внизу парою пікселів, щоб вийшла рука/кулак (у нашому випадку немає деталізації, тому не звертайте увагу на цей елемент) і одразу над місцем, де закінчується рука, додайте лінію 2:1 , яка виступатиме в ролі талії, потім малюйте лінію грудей і отримайте закінчену верхню частину тіла. Іншої руки персонажа не видно, але це буде виглядати нормально, оскільки вона закрита тулубом.

У вас має вийти щось подібне до цього:

Само собою ви можете використовувати будь-які пропорції, які вам подобаються; я волію намалювати різні варіантипоряд перед тим, як вирішити що краще.

Тепер для нижньої частини тулуба ми додамо ще кілька вертикальних ліній. Мені подобається залишати 12 пікселів між підошвами та талією. Ноги малювати дуже просто, потрібно лише зробити одну ногу трохи довшою, що дозволить персонажу виглядати об'ємніше:

Тепер ми додамо колір. Підібрати хороший колір шкіри завжди важко, тому якщо ви хочете використовувати такий самий, як у цьому уроці, його код #FFCCA5. Підбір кольорів для інших елементів не повинен стати проблемою. Після цього визначте довжину рукавів, положення розрізу сорочки, її стиль. Тепер додайте темну смужку, щоб відокремити сорочку від тіла. Я волію робити всі декоративні елементи світліше за чорний (особливо коли багато елементів знаходяться на одному рівні, наприклад від сорочки до шкіри або штанів). Це дозволяє отримати необхідний контраст, при цьому зображення не буде надто грубим.

Можна додати світлові ефекти майже на кожну кольорову зону. Уникайте надто великої кількості тіней або використання градієнтів. Декілька пікселів більше ( 10% або 25% ) світлого або темного кольору цілком достатньо, щоб змусити елементи виглядати об'ємними та прибрати площину ілюстрації. Якщо ви бажаєте додати яскравий колір для зони, яка вже має 100% яскравості, спробуйте зменшити його насиченість. У деяких випадках (наприклад, при малюванні волосся) це може стати добрим способом змінити відтінки.

Ви можете скуштувати багато варіантів волосся. Ось кілька ідей:

Якщо ви продовжите створювати персонажів, такі дрібниці як стиль одягу, довжина рукавів, штанів, аксесуари, одяг та колір шкіри будуть у пригоді для різноманітності.

Тепер все, що залишилося зробити - помістити обидва елементи разом і оцінити, як вони виглядають в одній обстановці:

Якщо ви хочете експортувати свій витвір, PNG стане ідеальним форматом.

Ось і все, робота зроблена!

Сподіваюся, цей урок вийшов не надто заплутаним. Я думаю, що розповів про максимальну кількість порад та естетичних прийомів. Ви можете вільно розширювати свій ізометричний піксельний світ - будинки, машини, інтер'єри, екстер'єри. Робити це все можливо і навіть цікаво, хоч не так і легко.

Перекладач:Шаповал Олексій

Малювання на рівні пікселів займає свою нішу в образотворчому мистецтві. За допомогою простих пікселів створюються справжні шедеври. Звичайно, створювати такі малюнки можна і на паперовому аркуші, але набагато простіше і правильніше робити картини за допомогою графічних редакторів. У цій статті ми докладно розберемо кожного представника такого софту.

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

Але з іншого боку, така велика кількість функціонала не знадобиться для малювання піксель-артів, тому немає сенсу переплачувати за програму, якщо збираєтеся використовувати її тільки для певної функції. Якщо ви з таких користувачів, радимо звернути увагу на інших представників, які орієнтовані саме на піксельну графіку.

PyxelEdit

Ця програма має все необхідне для створення подібних картин і не перенасичена функціями, які ніколи не знадобляться художнику. Налаштування здійснюється досить просто, в палітрі кольорів є можливість зміни будь-якого кольору в потрібний тон, а вільне переміщення вікон допоможе налаштувати програму під себе.

У PyxelEdit є функція встановлення плиток на полотно, що може стати в нагоді під час створення об'єктів зі схожим змістом. Пробна версія доступна для скачування на офіційному сайті і не має жодних обмежень у використанні, тому можна помацати продукт перед покупкою.

Pixelformer

На вигляд і функціонал це звичайнісінький графічний редактор, тільки має кілька додаткових можливостей для створення піксельних зображень. Це одна з небагатьох програм, які розповсюджуються абсолютно безкоштовно.

Розробники не позиціонують свій продукт придатним для створення пікселів, вони називають його відмінним способоммалювання логотипи та іконки.

GraphicsGale

Майже на весь подібний софт намагаються впровадити систему анімування картинки, яка найчастіше виходить просто непридатною для використання через обмежених функційта неправильної реалізації. У GraphicsGale теж не все так добре з цим, але принаймні з цією функцією можна нормально працювати.

Що стосується малювання, то тут все так само, як і в більшості редакторів: основні функції, велика колірна палітра, можливість створювати кілька шарів та нічого зайвого, що могло б заважати роботі.

Charamaker

Character Maker 1999 – одна з найстаріших програм. Створювалася вона для створення окремих персонажів або елементів, які потім би використовувалися в інших програмах для анімації або впроваджувалися в комп'ютерні ігри. Тому для створення картин вона не дуже пасує.

З інтерфейсом все не дуже добре. Майже жодне вікно не можна перемістити або змінити його розмір, а розташування за замовчуванням виконано не вдалим чином. Однак до цього можна звикнути.

Pro Motion NG

Ця програма ідеальна багато в чому, починаючи з продуманого інтерфейсу, де є можливість переміщати вікна незалежно від головного в будь-яку точку і змінювати їх розмір, і закінчуючи автоматичним перемикачем з олівця, що є просто неймовірно зручною фішкою.

В іншому ж Pro Motion NG – просто гарний софт для створення піксельної графіки будь-якого рівня. Пробну версію можна завантажити з офіційного сайту та протестувати, щоб визначитися з подальшою покупкою повної версії.

Aseprite

По праву може вважатися найзручнішою та найкрасивішою програмою для створення піксель-артів. Одне оформлення інтерфейсу тільки чого варте, але це ще не всі переваги Aseprite. Тут є можливість анімування картинки, але, на відміну від попередніх представників, вона реалізована грамотно та зручна для використання. Є все, щоб створити красиві GIF-анімації.