Як навчитися створювати піксельну графіку


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

Кроки


Частина 1 з 7: Збираємо все необхідне


    Як навчитися створювати піксельну графіку
  1. Завантажте хороші графічні редактори. Можете, звичайно, і в Paint'е шедеври створювати, але це складно і не дуже зручно. Куди краще буде працювати в чимось на зразок:
    • Photoshop

    • Paint.net

    • GIMP

    • Pixen


    • Як навчитися створювати піксельну графіку
    • Купуйте графічний планшет. Якщо мишкою ви малювати не любите, то планшет і стилус - ось що вам необхідно. Планшети від Wacom, до слова, найпопулярніші.

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


      • Як навчитися створювати піксельну графіку
      • Малюйте олівцем з розміром кисті в 1 піксель. У будь-якому графічному редакторі має бути інструмент "Олівець". Виберіть його, розмір кисті задайте рівним 1 пікселю. Тепер ви можете малювати ... піксельно.

      Частина 2 з 7: Відпрацьовуємо основи

      Створіть нове зображення. Так як ви вчитеся малювання в стилі піксель-арт, то замахуватися на епічні полотна не варто. Якщо пам'ятаєте, то в грі Super Mario Bros. весь екран був 256 x 224 пікселів, а сам Маріо вмістився на просторі в 12 x 16 пікселів!

      Як навчитися створювати піксельну графіку
      1. Як навчитися створювати піксельну графіку
    • Збільште масштаб. Так, інакше ви просто не роздивіться окремі пікселі. Так, доведеться збільшувати його дуже сильно. Скажімо, 800% - це цілком нормально.

    • Як навчитися створювати піксельну графіку
    • Навчіться малювати прямі лінії. Начебто і просто, але якщо ви раптом десь в середині намалюєте тремтячим рукою лінію в 2 пікселя товщиною, то різниця буде бити по очах. Малюйте прямі лінії до тих пір, поки вам не доведеться активувати інструмент для малювання прямих ліній. Ви повинні навчитися малювати прямі лінії вручну!

    • Як навчитися створювати піксельну графіку
    • Навчіться малювати криві лінії. У кривої лінії повинні бути, скажімо так, рівномірні "переноси рядків" (що виразно помітно на малюнку трохи вище). Припустимо, починаючи малювати криву лінію, намалюйте пряму з 6 пікселів, під нею - пряму з трьох, під нею - пряму з двох, а під нею - з одного пікселя. З іншого боку намалюйте те ж саме (дзеркально відбите, зрозуміло). Саме така прогресія вважається оптимальною. Криві, намальовані за схемою "3-1-3-1-3-1-3", не відповідають стандартам піксель-арту.

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

    • Частина 3 з 7: Створюємо перший спрайт

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

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


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


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


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


              Частина 4 з 7: Розфарбовуємо спрайт

                Як навчитися створювати піксельну графіку
              1. Освіжите в пам'яті теорію кольору. Подивіться на палітру, щоб зрозуміти, які кольори треба використовувати. Там все просто: чим далі кольори один від одного, тим більше вони один на одного не схожі; чим ближче кольору один до одного - тим більше вони схожі і краще поруч один з одним виглядають.
                • Виберіть кольори, які зроблять ваш спрайт і красивим, і не ріжучим очі. І так, пастельних кольорів слід уникати (якщо тільки весь ваш проект не виконаний в такому стилі).


                • Як навчитися створювати піксельну графіку
                • Виберіть кілька кольорів. Чим більше квітів ви будете використовувати, тим більше, так би мовити, "відволікаючим" буде ваш спрайт. Подивіться на класику піксель-арту і спробуйте підрахувати, скільки кольорів використано там.
                  • Маріо - всього три кольори (якщо ми говоримо про класичної версії), та й ті розташовані на палітрі мало не впритул один до одного.

                  • Соник - нехай навіть Соник намальований з великою кількістю деталей, ніж Маріо, в основі все одно лежать всього 4 кольори (і тіні).

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


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

                  Частина 5 з 7: Додаємо тіні

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


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

                      • Не використовуйте градієнти. Градієнти - зло. Градієнти виглядають дешево, халтурно і непрофесійно. Ефект, схожий з ефектом градієнтів, досягається за допомогою прийому "проріджування" (див. Нижче).


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

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

                      Частина 6 з 7: Використовуємо просунуті методи малювання

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


                        • Як навчитися створювати піксельну графіку
                        • Не забувайте про анти-алиасинг (усунення контурних нерівностей). Так, візитна картка піксель-арту - видима "піксельность" зображення. Тим не менш, іноді хочеться, щоб лінії виглядали трохи менш помітними, трохи більше гладкими. Тут на допомогу і приходить анти-алиасинг.
                          • Додайте проміжні кольори на вигини кривої. Один шар проміжного кольору намалюйте навколо контуру кривої, яку ви хочете згладити. Якщо та все ще виглядає незграбно, додайте ще один шар, вже світлішою.

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


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

                            • Втім, якщо вам просто потрібно, щоб спрайт не зливаються з фоном, то обводьте все чорним.


                            Частина 7 з 7: Додаємо фінальні штрихи

                              Як навчитися створювати піксельну графіку
                            1. Перевірте спрайт. Можете навіть відійти на крок-другий від екрану. Подивіться, чи все в порядку, чи не де помітних помилок і неточностей.

                            2. Як навчитися створювати піксельну графіку
                            3. Додайте деталі. Закінчили з кольором і тінями? Переходьте до деталей! Написи, очі, якісь інші особливості, які зроблять ваш спрайт цікавіше і професійніше - ось що важливо на цьому етапі.

                            4. Як навчитися створювати піксельну графіку
                            5. Анімуйте спрайт. Якщо ви малювали, дотримуючись цієї статті, то в результаті у вас вийшов статичний спрайт. Це, звичайно, добре, але як окремий твір мистецтва. Якщо ви хотіли навчитися створювати графіку для ігор, то знайте - статичні спрайт для ігор не годяться (крім фонів, звичайно, але й то не завжди). Відповідно, спрайт потрібно анімувати - тобто намалювати за аналогічним спрайту для кожного кадру Колекція спрайтів для анімації називається "спрайт-лист".
                              • Пошукайте статті, в яких детально розповідається про анімацію спрайтів.

                              • Хороша анімація може задати стиль всьому спрайту! Більше того - саме за рівнем анімації часом і можна відрізнити любителя від майстра.


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