Я навчився створювати піксель арт, оскільки він був мені потрібен для графіки в моїй грі. Через роки тренувань, я призвичаївся і почав розуміти, що піксель арт – це скоріше мистецтво, ніж просто інструмент. Сьогодні піксель арт дуже популярний серед розробників ігор та ілюстраторів.
Цей туторіал був створений багато років тому для того, щоб навчити людей простих концептів створення піксель арт, але його багаторазово доповнювали, тож він значно відрізняється від початкової версії. У мережі багато туторіалів на цю ж тематику, але мені всі вони здаються занадто складними або затягнутими. піксель арт – це не наука. Ви не повинні розраховувати вектори під час створення піксель арт.
Інструменти
Однією з головних переваг створення піксель арт є те, що вам не потрібні якісь просунуті інструменти – графічного редактора, встановленого на вашому комп’ютері за замовчуванням, має вистачити. Варто згадати, що існують програми, розроблені спеціально для створення піксель-арту, на кшталт 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).
Шейдинг
Шейдинг – одна з найважливіших частин квесту на отримання статусу напівбога пікселінгу. Саме на цьому етапі спрайт або починає мати кращий вигляд, або ж перетворюється на дивну субстанцію. Дотримуйтесь моїх вказівок і у вас точно все вийде.
Крок перший: вибираємо джерело світла
Спочатку ми вибираємо джерело світла. Якщо ваш спрайт є частиною більшого фрагмента, в якому присутні власні джерела освітлення, на кшталт ламп, смолоскипів і так далі. І всі вони можуть по-різному впливати на те, який вигляд має спрайт. Хай там як, але вибір віддаленого джерела світла, на кшталт сонця, – чудова ідея для більшості піксель-артів. Для ігор, приміром, вам потрібно буде створити максимально яскравий спрайт, який потім можна буде підлаштувати під навколишнє середовище.
Я зазвичай роблю вибір на користь віддаленого джерела світла, розташованого десь угорі перед спрайтом, тож висвітлюється лише його передня частина та верх, а решта піддається шейдингу.
Крок другий: безпосередньо шейдинг
Щойно ми вибрали джерело світла, можна починати затемнювати ділянки, які розташовані найдалі від нього. Наша модель освітлення спонукає до того, що нижня частина голови, руки, ноги та інше мають бути вкриті тінню.
Нагадаємо, що плоскі речі відкидати тінь не можуть. Візьміть аркуш паперу, зімніть його і прокотіть по столу. Як ви зрозуміли, що він уже не плоский? Ви просто побачили тіні навколо нього. Використовуйте шейдинг для того, щоб підкреслити складки в одязі, мускулатуру, хутро, колір шкіри тощо.
Крок третій: м’які тіні
Другий шейд, який світліший за перший, має використовуватися для створення м’яких тіней. Це потрібно для областей, які не висвітлюються на пряму. Їх можна також використовувати для переходу від світлої ділянки до темної, і на нерівних поверхнях.
Крок четвертий: освітлені місця
Місця, на які потрапляють прямі промені світла, також необхідно виділити. Варто зазначити, що хайлайтів має бути менше, ніж тіней, інакше вони викликатимуть зайву увагу, тобто виділятимуться.
Позбавте себе головного болю, запам’ятавши одне просте правило: спочатку тіні, потім хайлайти. Причина проста: якщо немає тіней, занадто великі фрагменти будуть засвічені, а коли ви нанесете тіні, їх доведеться зменшувати.
Кілька корисних правил
З тінями у новачків завжди багато труднощів, тож ось кілька правил, яких вам потрібно дотримуватися під час шейдингу.
- Не користуйтеся градієнтами. Найпоширеніша помилка новачків. Градієнти мають жахливий вигляд і навіть приблизно не відображають те, як світло грає на поверхнях.
- Не використовуйте «м’який шейдинг». Я говорю про ситуацію, коли тінь розташована занадто далеко від контуру, адже тоді вона має вельми розмитий вигляд, і перешкоджає виявленню джерела світла.
- Не використовуйте занадто багато тіней. Легко думати, що «чим більше кольорів – тим реалістичніша картинка». Хай там як, у реальному житті ми звикли бачити речі в темному або світлому спектрах, а наш мозок відфільтрує все, що знаходиться між ними. Використовуйте лише дві темних (темна і дуже темна) і дві світлих (світла і дуже світла) і накладайте їх на колір основи, а не один на одного.
- Не використовуйте занадто схожі кольори. Особливої потреби у використання практично однакових кольорів немає за винятком випадків, коли вам потрібно зробити дійсно розмитий спрайт.
Дизеринг
Збереження кольорів – ось на що творцям піксель-арту справді потрібно звернути увагу. Ще один спосіб отримати більше тіней без використання більшої кількості кольорів називається «дизеринг». Так само як у традиційному живописі використовується «штрихування» і «перехресне штрихування», тобто ви, в прямому сенсі, отримуєте щось середнє з двох кольорів.
Простий приклад
Ось простий приклад того, як, за допомогою дизерінгу, з двох кольорів можна створити чотири варіанти шейдингу.
Просунутий приклад
Порівняйте картинку зверху (створену за допомогою градієнта у фотошопі) з картинкою, створеною всього з трьох кольорів, використовуючи дизеринг. Врахуйте, що різні візерунки можуть бути використані для створення «суміжних кольорів». Вам буде простіше зрозуміти принцип, якщо ви самі створите кілька візерунків.
Застосування
Дизеринг може надати вашому спрайту того прекрасного ретро-вигляду, адже безліч перших відеоігор дуже активно використовували цю техніку, зважаючи на малу кількість доступних палітр кольорів (якщо ви хочете побачити безліч прикладів дизерингу – подивіться на ігри, розроблені для Sega Genesis). Я сам не дуже часто використовую цей спосіб, але для навчальних цілей, я покажу, як це можна застосувати на нашому спрайті.
Ви можете використовувати дизеринг скільки вашій душі завгодно, але варто зазначити, що лише кілька людей застосовують його дійсно вдало.
Вибіркове контурування
Вибіркове контурування, яке також називають селаут (від англійського selected outlining), є підвидом шейдингу контуру. Замість використання чорної лінії, ми підбираємо колір, який матиме більш гармонійний вигляд на вашому спрайті. Крім того, ми змінюємо яскравість цього контуру ближче до країв спрайта, даючи змогу джерелу кольору визначати, які кольори нам варто використовувати.
До цього моменту, ми використовували чорний контур. У цьому немає нічого поганого: чорний має чудовий вигляд, а також дає змогу якісно виділити спрайт на тлі навколишніх його об’єктів. Але використовуючи цей метод, ми жертвуємо реалізмом, який міг би нам стати в нагоді в деяких випадках, оскільки наш спрайт продовжує мати мультяшний вигляд. Вибіркове контурування дає змогу позбутися цього.
Ви помітите, що я використовував селаут для пом’якшення рельєфу його м’язів. Нарешті, наш спрайт починає виглядати як єдине ціле, а не як величезна кількість окремих фрагментів.
Порівняйте це з оригіналом:
- Згладжування
Принцип роботи згладжування простий: додавання проміжних кольорів у злами, щоб вони мали більш гладкий вигляд. Наприклад, якщо у вас є чорна лінія на білому тлі, то в її злами по краю будуть додані невеликі сірі пікселі.
Техніка 1: згладжування вигинів
Загалом, вам потрібно додати проміжні кольори в місця, де є злами, бо інакше лінія матиме нерівний вигляд. Якщо вона все ще здається нерівною, додайте ще світліший шар пікселів. Напрямок нанесення проміжного шару має збігатися з напрямком кривої.
Я не думаю, що можу пояснити це краще, не ускладнюючи. Просто подивіться на картинку, і ви зрозумієте про що я.
Техніка 2: округлення нерівностей
Техніка 3: затирання закінчень ліній
Застосування
Тепер, давайте застосуємо згладжування до нашого принту. Врахуйте, що, якщо ви хочете, щоб ваш спрайт мав гарний вигляд на тлі будь-якого кольору, не варто згладжувати зовнішню частину лінії. У протилежному випадку, ваш спрайт буде оточений вельми недоречним ореолом на стику з фоном, і тому буде надто явно виділятися на будь-якому тлі.
Ефект досить непомітний, але при цьому він має величезне значення.
Чому потрібно робити це вручну?
Ви можете запитати: «Чому б просто не застосувати фільтр графічного редактора до нашого спрайту, якщо нам потрібно, щоб він мав гладкий вигляд?». Відповідь також проста – жоден фільтр не зробить ваш спрайт таким же чітким і чистим, як ручна робота. Ви отримаєте повний контроль не тільки над використовуваними кольорами, а й над тим, де їх використовувати. До того ж, ви краще за будь-який фільтр знаєте, де згладжування буде доречним, а де є ділянки, пікселі в яких просто втратять свою якість.
Оздоблення
Ух, ми вже досить близько підібралися до моменту, коли ви зможете вимкнути комп’ютер і дістати з холодильника пляшечку холодного пива. Але він ще не настав! Остання частина присвячена тому, що відрізняє енергійного любителя від досвідченого професіонала.
Зробіть крок назад і гарненько подивіться на ваш спрайт. Існує ймовірність того, що він усе ще має «сируватий» вигляд. Витратьте трохи часу на вдосконалення і переконайтеся в тому, що все ідеально. Неважливо, наскільки ви вже втомилися, попереду на вас чекає найвеселіша частина. Додайте деталі, щоб ваш спрайт мав цікавіший вигляд. Ось тут якраз відіграють роль ваші вміння і досвід пікселінгу.
Вас міг дивувати той факт, що весь цей час у нашого Lucha Lawyer не було очей, або що згорток, який він тримає, – порожній. Власне, причина криється в тому, що я хотів почекати з дрібними деталями. Також зверніть увагу на оздоблення, яке я додав на його пов’язки, ширінку на його штанях… ну і, ким би була людина без його сосків? Також я трохи затемнив нижню частину його торса, щоб рука більше виступала на тлі тіла.
Нарешті ви закінчили! Lucha Lawyer виступає в легкій вазі, адже в ньому лише 45 кольорів (а може, це й суперважкий – усе залежить від обмежень вашої палітри) і його роздільна здатність становить приблизно 150 на 115 пікселів. Ось тепер уже можете відкрити пиво!
Це завжди кумедно. Ось гіфка, що демонструє еволюцію нашого спрайта.
Поради для піксель артистів-початківців
- Вивчайте ази мистецтва і практикуйте традиційні техніки. Усі знання та вміння, необхідні для креслення та малювання, можна застосувати і в пікселінгу.
- Починайте з маленьких спрайтів. Найскладніше – навчитися розміщувати безліч деталей, використовуючи мінімальну кількість пікселів, щоб не робити такі великі спрайти, як мій.
- Вивчайте роботи художників, якими ви захоплюєтеся і не бійтеся бути неоригінальними. Найкращий спосіб навчання – повторення фрагментів чужих робіт. На вироблення власного стилю йде чимало часу.
- Якщо у вас немає планшета, купити його. Постійні нервові зриви та стреси, спричинені безперервним кліканням лівою кнопкою мишки – це не кумедно, та й навряд чи вразить представників протилежної статі. Я використовую невеликий Wacom Graphire2 – мені подобається його компактність і портативність. Вам, можливо, припаде до душі більший планшет. Перед покупкою, проведіть невеликий тест-драйв.
- Діліться своїми роботами з іншими, щоб дізнатися їхню думку. Це, можливо, також буде непоганим способом знайти нових друзів-гіків.
P.S.
Якщо у вас є посилання на класні туторіали, які потрібно перекласти, надсилайте їх у нашу тусову групу розробників ігор. Або пишіть прямо в повідомлення групи вконтакте!
Сподобалася стаття? Поділіться з друзями:
Перекладає для Вас найцікавіші статті про розробку ігор. За освітою фізик-програміст. Технічними перекладами почала підробляти ще на старших курсах і поступово це переросло в основне заняття. Цікавиться гуманітарними технологіями, пробує себе в журналістиці.
Дякую за таку статтю. Віднедавна став захоплюватися піксель-артом, а після прочитаного я хоча б знаю з чого починати – з того, щоб навчитися малювати хоч щось від руки, а тільки потім піксель-арт :DD