Как создать пиксель арт: программы, пайплайн, советы — Gamedev на DTF

Как начать делать пиксель арт #1 (RUS) | by Кирилл Евстигнеев

Руководство для Абсолютного Новичка

Это — маленькая статья о том, как начать делать пиксель арт, написанная для тех, кто ни разу не открывал какую-либо нужную для этого программу. Пока я опишу самую базу, как создать файл, определиться с его размером и количеством цветов.

Этот гайд был поддержан на моем Патреоне! Если вам нравится то, что я делаю, то порадуйте меня своей подпиской, пожалуйста 🙂 (ВНИМАНИЕ! Это Патреон ОРИГИНАЛЬНОГО автора статьи, а не переводчика.)

Перед тем, как начнем…

Перед тем, как с открытым сердцем ворваться в мир пиксель арта, помните: пиксель арт — это лишь очередная разновидность искусства, как та же гуашь, масло, карандаш, скульптура или близкая к ней мозаика. Чтобы делать хорошие работы в пиксель арте, вам необходимо уметь рисовать. По сути, я имею в виду изучение анатомии, перспективы, светотени, основ цвета и даже историю искусства, так как все вышеуказанное нужно для создания хороших пиксельных работ.

Инструменты

Вам не нужно что-то эдакое для того, чтобы работать в пиксель арте, достаточно даже мышки и какой-нибудь бесплатной программы. Я использую маленький планшет от Wacom, очень хорошую мышку и клавиатуру; моя любимая программа — Aseprite, но вместо нее вы можете использовать все, в чем вам будет удобнее.

Вот список программ, которые чаще всего используются для пиксель артинга:

• Aseprite: Классный профессиональный редактор с кучей полезных плюшек (платный)
  (Примечание переводчика: но всегда можно скомпилировать.)
• GraphicsGale: Классика, использующаяся во множестве игр. Немножечко запутанная, но все так же с кучей полезных плюх (бесплатная)
• Piskel: Пиксельный онлайн-редактор (само собой, бесплатный)
• Photoshop: Мощный редактор изображений, который, по сути, не приспособлен для пиксель арта, но вы можете его настроить нужным образом (платный)

Aseprite

На данный момент это моя самая любимая программа. Она очень мощная, до краев забита полезными инструментами и очень даже проста для использования. Я выбрал Aseprite как программу для этого руководства, но я уверен, что адаптировать все написанное далее под любую другую программу вам не составит особого труда. Также вы можете взять бесплатную пробную версию этой программы, но помните, что тогда ваши файлы сохраняться не будут (если вы просто практикуетесь — в этом нет никаких проблем).

Создаем Новый Файл

Просто нажмите на “New File…” на загрузочном экране или на File > New File, чтобы мы могли начать.

Создадим новый файл. 16 на 16 пикселей кажется очень маленьким разрешением, но я думаю, что это прекрасно подойдет для начала. Слишком большие разрешения отвлекут вас от того, на чем мы должны сфокусироваться сейчас: на понятии того, как пиксели взаимодействуют друг с другом.

Окошко “Новый спрайт” в Aseprite

Режим цвета можно оставить в RGBA, на данный момент он самый простой и наглядный. Некоторые художники любят работать в режиме палитры “indexed”, который позволяет использовать несколько особых плюшек, но вместе с ними идут и некоторые недостатки.

Фон должен быть прозрачным или белым, пока без разницы. Теперь убедитесь, что Advanced Options отключены (но позже можете вернуться к ним) и можно наконец-то приступать!

Давайте рисовать!

Здесь мы сразу видим множество панелей и менюшек, но не волнуйтесь, пока нам будет нужна лишь самая малая их часть. Главный инструмент — Карандаш, который всегда должен быть в один пиксель шириной, и с помощью которого мы и будем размещать пиксели в специальном поле. Нажмите на иконку инструмента или на английскую клавишу B, а затем на экран, чтобы разместить пиксель того цвета, который вы сейчас используете.

Рабочая зона в Aseprite

Слева вы можете увидеть палитру с парочкой установленных по умолчанию цветов. Давайте поменяем их на другие, более простые. Нажмите на третью иконку над палитрой (Pressets) и выберите ARQ4 (хорошую палитру под авторством художника Endesga), которую вы будете использовать для своего первого творения.

А теперь, используя только четыре цвета слева, постарайтесь нарисовать кружку.

Будьте вольны пользоваться моей работой как предметом вашего вдохновения. Если вы вдруг сделаете ошибку, нажмите alt+ЛКМ по пустой зоне вне вашего рисунка, тем самым подобрав прозрачный цвет, которым можно пользоваться как ластиком. Ну или вы можете использовать, собственно, сам инструмент “Ластик” (горячая клавиша на английскую E).

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

Также вы можете немного поэкспериментировать с другими кнопками на панели инструментов. Нужно заметить, что некоторые инструменты открывают еще несколько альтернативных инструментов, если на них нажать. Пока вам следует избегать инструмента “Блюр”, который добавляет кучу ненужных нам цветов.

Теперь давайте сделаем еще больше спрайтов! Попробуйте нарисовать череп, меч и лицо человека. Но в этот раз без примера моих работ. Если вы почувствовали, что работа не влезает в эти рамки размера, то не волнуйтесь — это нормально, попробуйте что-либо немного поменять или попробуйте сначала. Работа в таком низком разрешении очень сложная и иногда напоминает паззл. Вот еще одна статья, которую я написал, посвященная работе в низком разрешении: [link]

Если вы так хотите, то вот вам моя версия этих трех спрайтов. Пожалуйста, не нажимайте сюда до того, как вы закончите рисовать их сами. [skull, sword and human face].

Подобные упражнения всегда хороши. Если вы хотите продолжать практиковаться, то попробуйте сделать еще больше спрайтов в рамках такого низкого разрешения.

Сохраняем файл

Для сохранения файла нажмите Control+S (или File>Save As…), Выберите имя файлу и путь сохранения, а потом нажмите кнопку save.

Помните, что в триале Aseprite’а нельзя сохранять работы!

Окошко экспортировки файла в Aseprite

Вы можете заметить, что Aseprite поддерживает очень много форматов для сохранения файла, но я рекомендую всегда держать при себе .ase версию каждого файла, который вы создаете. Точно так же, как формат .psd в Photoshop. Во время экспорта файла в интернет или игры, вы можете нажать Control+Alt+Shif+S или File>Export.

Вот почему никогда не следует изменять размер работ не на круглые числа

В Aseprite есть о-о-очень хорошая функция “Resize”, меняющая размер спрайта в окошке экспорта. Оно изменяет ваш спрайт только на какую-нибудь круглую процентную величину. Если вы измените размер спрайта, например, на 107%, это разобьет большинство пикселей и исказит изображение, но если вы измените размер на 200%, то каждый пиксель будет в 2 пикселя шириной и выстой, что, несомненно, выглядит классно и точно.

Бо́льшие разрешения

Теперь, когда мы разобрались с основами типа сохранения нового файла и рисования в указанном размере, давайте попробуем порисовать в еще большем разрешении, 32 на 32 пикселя. Также мы будем использовать палитру немного пошире, попробуйте AAP-Micro12 (сделана художником AdigunPolack). В этот раз мы будем рисовать лопату.

В отличие от спрайта в разрешении 16х16, в нашей работе мы можем уместить еще и обводку, поэтому давайте с нее и начнем. Вот вам мой порядок выполнения работы:

Шаг 1: Линии

Шаг 1

Такой принцип работы мы называем pixel-perfect (дословно вплоть до пикселя), он отличается тем, что линия лишь в 1 пиксель шириной и соединяется с другими пикселями по диагонали. Когда мы делаем подобные линии, мы стараемся избегать нежелательных пикселей и углов, например:

В Aseprite есть очень удобная функция в настройках кисти, которая позволяет делать описанный выше процесс автоматически: выбрав инструмент кисть, нажмите на кнопку Pixel-perfect. Только не забудьте выключить это после работы с обводкой, так как в таком случае она будет вас раздражать.

Алгоритм Pixel-Perfect в Aseprite

Шаг 2: Основные цвета

Шаг 2

Самое большое преимущество маленькой палитры в том, что у вас не будет слишком много вариантов выбора цветов, которые частенько сбивают с толку. Вот почему работать в больших палитрах гораздо сложнее, ибо всегда есть вероятность того, что выбранный вами цвет не имеет гораздо более подходящей альтернативы. Представляйте, что ваша работа — это паззл, экспериментируйте даже со странными и непонятными комбинациями цветов, пока вы не поймете, что нашли тот самый “идеальный цвет” для каждой зоны спрайта.

Шаг 3: Светотень

Шаг 3

Используйте свою палитру так, чтобы оформить светотень самым оригинальным образом. Так как вы работаете с узкой палитрой, у вас само собой не будет всех цветов радуги с кучей вариантов их яркости, поэтому вам придется импровизировать.

Импровизируем с цветами для света и теней

Например, слева вы видите работу, которую я нарисовал с помощью точно такой же палитры, как у вас — AAP-Mini12. Когда я рисовал этого зеленого мужчинку, у меня не было ни одного ярко-зеленого в палитре, поэтому я решил использовать ближайший цвет, доступный мне, которым оказался желтый. То же самое произошло и с тенью, я выбрал синий, потому что это был самый подходящий темный цвет. Но что если мы сделаем немного по-другому? Ведь ничего не мешает мне использовать синий вместо самого яркого и красный вместо самого темного, правда? Ну, не совсем:

Инвертированная светотень

Эффект получился довольно-таки крутым, но почему-то не покидает ощущение того, что что-то не так. Обычно холодные цвета должны быть тенью, а яркие — светом, иначе работа будет выглядеть странно. Это правило не железное, конечно, и вы можете найти массу исключений, но если вы не очень уверены в этом, то и не надо.

Шаг 4: Сглаживание и финальные штрихи

Шаг 4, финальный

В этой части работы вы должны сделать пиксели не такими “острыми”. Ручное сглаживание — сложная тема, и нам несомненно потребуется отдельная статья лишь для одного ее обсуждения, но говоря кратко, вы используете полутоны для имитации “полупикселей” и более мягких углов. Но пока даже не зацикливайтесь на этом, сейчас вашей задачей является сделать ваш спрайт максимально разборчивым.

Еще на этом этапе неплохо бы поискать “сиротские пиксели” (англ. Orphan PIxels). Это такие пиксели, которые не относятся ни к группе других пикселей, ни к части сглаживания, как на планете слева:

Убираем одиночные пиксели

Видите эти маленькие однопиксельные островки? Это сиротские пиксели, и как вы можете заметить, планета выглядит гораздо лучше, когда мы соединяем их с группой соседних пикселей того же цвета.

А что же по поводу звезд в этом примере? Ну, они тут для того, чтобы показать, что сиротские пиксели не всегда плохие, и эти звезды читаются именно так, как должны, создавая нужный нам шум и оттеняя фон.

Я хочу донести до вас, что не надо бездумно стирать сиротские пиксели, надо посмотреть и спросить себя: а нужно ли этому пикселю вообще быть одиночным?

А что теперь?

А теперь вам нужно экспериментировать с количеством цветов в палитре и разрешением! Но делайте это постепенно, начните, к примеру, с 48 на 48 пикселей и 16 цветов в палитре. Если вы действительно только начали, я настоятельно рекомендую вам избегать анимаций и для начала привыкнуть к статичным изображениям.

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

• Туториал от Cure
• Туториал от Derek Yu
• Туториал от Arne

Также я делаю немного других туториалов по разным аспектам пиксель арта и гейм дизайна, вы можете найти их здесь:

• Мой Patreon
• Список всех моих туториалов

Часть 2 уже доступна тут!

(Примечание переводчика: Ну что же, вот мои руки и дошли до первой части этого замечательного гайда. Прямо сейчас я занимаюсь переводом второй части, а пока хочу поблагодарить вас за уделение внимания моему переводу. Творческих успехов вам, удачи!)

Как начать делать пиксель-арт. Часть 1

Гайд для совсем начинающих.

Pedro Medeiros

Эта небольшая статья о том, как начать свой путь в пиксель-арт и нацелена она на тех, кто только начал или собирается начать. Я расскажу про самые базовые вещи – как создать файл, настройки холста и работа с ограниченной цветовой палитрой.
Статья была проспонсирована на моем Patreon! Если она вам понравилась, то вы даже можете поддержать меня малой денежкой =)
Также это 1-ая часть планируемой серии статей, всю серию читайте в Pixel Grimoire.

Перед Началом

Перед тем как приступать к пиксель-арту, помните: пиксель-арт это всего лишь ещё один изобразительный инструмент, как гуашь, масло, карандаш, скульптура или похожая по своей сути на пиксель-арт мозаика. Чтобы делать хороший пиксель-арт, вы должны уметь делать хорошие рисунки. В основном, это значит: делать анатомические штудии, знать законы перспективы, понимать принципы работы светотени, знать теорию цвета и немножко историю искусств (от неё никто не умирал, наоборот это расширит ваш кругозор), всё это основы для хорошего пиксель-арта.

Инструменты

Вам не нужно никаких изощрённых программ и инструментов для пиксель-арта, его можно даже делать при помощи мышки и бесплатного ПО. Моё рабочее место включает в себя маленький Вакомовский планшет, хорошую мышку с клавиатурой и мою любимую программу Aseprite, но вы можете использовать любую другую программу на своё усмотрение.
Вот примерный список ПО широко используемого для пиксель-арта:
• Aseprite: Отличный профессиональный редактор со многими ускоряющими работу функциями (платный)
• GraphicsGale

: Классический, широко используемый во многих играх. Слегка сложноват, но у него много функций (бесплатный).
• Piskel: Бесплатный онлайн редактор
• Photoshop: Мощный редактор, изначально не создавался для создания пиксель-арта, но его тоже можно использовать (платный).

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

Создание Нового Файла

Просто нажмите “ New File…” на стартовом окне или File > New File и можно начинать рисовать.
Давайте создадим новый файл. 16 на 16, наверное, будет выглядеть маловато, но думаю, что для начала сойдёт. Большее разрешение может отвлечь вас от главной задачи: понимания того, как пиксели взаимодействуют с другими пикселями по соседству.

Aseprite ‘New Sprite’ меню
Вы можете оставить цветовой режим в RGBA, он наиболее простой и понятный. Некоторые пиксель-арт художники любят работать в indexed палитре, которая даёт доступ к некоторым крутым цветовым приёмам, но и имеет определённые недостатки.
Оставьте фон прозрачным или белым для начала. Только убедитесь, что опция Advanced Options отключена (но не бойтесь поэкспериментировать с ней позже) и можно начинать!

Давайте Рисовать!

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

Главный инструмент это Pencil, обычно следует сохранять ширину в 1 пиксель и именно при помощи него мы будем расставлять наши пиксели на холсте. Просто нажмите на иконку или на B и щелкните по холсту, чтобы поставить пиксель.

Aseprite рабочая область

Слева вы видите цветовую палитру, с цветами по умолчанию. Давайте изменим её на другую более простую. Щёлкните по третьей иконке в верху цветовой палитры (Pressets) и выберите ARQ4 (очень хорошую палитру сделанную Endesga), именно её мы будем использовать для нашего первого спрайта.
Теперь используя только 4 цвета сверху слева, попробуем нарисовать кружку.
Не стесняйтесь использовать мой пример в качестве вдохновения, но всё же постарайтесь сделать свой вариант. Если вы допустили ошибку, то нажмите

alt+click на пустой области или в области за вашим рисунком, и вы сможете «выбрать» прозрачный цвет и использовать его для удаления неправильных пикселей. Иным вариантом может быть использование Eraser или хоткея Е для быстрого выбора.
Вы, наверное, заметите, что работа в таком низком разрешении кардинально отличается от обычного рисования. Всё должно быть просчитано и каждый пиксель имеет важное значение. Это то, к чему вы должны привыкнуть как можно раньше.

Вы также можете попробовать другие кнопки на меню инструментов. Многие из них имеют дополнительные опции, когда нажаты. Для начала старайтесь избегать использовать инструмент blur tool так как он добавляет дополнительные цвета, что нам сейчас совсем не нужно.
Ну а теперь давайте сделаем больше спрайтов! Попробуйте нарисовать череп, меч и лицо человека. На этот раз уже без моей работы как референса. Если вам кажется, что ваш спрайт не умещается в холст, то это абсолютно нормально, попробуйте свести часть деталей к одному пикселю. Работать на таком низком разрешении очень сложно и похоже на сбор мозаики или пазла.

Я написал одну статью о работе на низком разрешении для Kano.
Если вам интересно, то вот мои версии тех спрайтов, только закончите свои перед тем как их смотреть [skull, sword and human face]
Это очень хорошее упражнение. Если вы хотите ещё попрактиковаться, то попробуйте сделать больше спрайтов с такими же ограничениями.

Сохраняем файл

Чтобы сохранить файл нажмите Control+S (или File>Save As…), задайте имя и папку для сохранения.
Не забудьте, что в триальной версии Aseprite нет функции сохранения.

Aseprite Export File меню
Вы наверное заметили, что Aseprite может сохранять файл в различных форматах, но я бы рекомендовал вам использовать .ase для ваших файлов. Это как в Photoshop есть формат .psd Когда вы экспортируете спрайт для веб или игр, вы можете использовать Control+Alt+Shif+S или File>Export.

Почему следует использовать для масштабирования круглые числа.
Aseprite обладает очень хорошей функцией Resize в окне экспорта. Она масштабирует ваш спрайт в круглых числах, что идеально. Если вы захотите отмасштабировать свой спрайт, например, в 107%, то пиксели сдвинутся и получится мешанина, но если вы выберите 200%, то каждый пиксель будет в 2 пикселя шириной и высотой, что выглядит хорошо и красиво.

Холст большего размера

Теперь после того как вы освоили основы, такие как: создание файла, сохранение и рисование на холсте, давайте попробуем рисовать на немного большем холсте, 32 на 32 пикселя. Теперь мы будем использовать большую палитру, попробуйте AAP-Micro12 (от AdigunPolack). В этот раз мы будем рисовать лопату.
В отличие от спрайта 16 на 16, здесь мы можем использовать контур, так что давайте начнём с него. Вот мой пошаговый процесс:

Этап 1: Линии

Этап 1

Такой стиль линий мы в пиксель-арте называем идеальной линией, ширина в 1 пиксель и соединяется диагонально с другими пикселями. Когда мы делаем линейный рисунок, то избегаем ненужных краёв, как здесь:

Aseprite обладает очень хорошей функцией в настройках кисти, чтобы делать это автоматически: с выбранным

brush tool включите Pixel-perfect опцию. Только не забудьте выключить её, когда не работаете с контуром, иначе она будет вас раздражать.

Aseprite функция Pixel perfect

Этап 2: Основные цвета

Этап 2

Малое количестве цветов хорошо тем, что вы не запутаетесь в обилии вариантов. Именно по этой причине очень сложно работать с большой палитрой, если у вас есть в палитре цвет, то вы обязаны его использовать в спрайте. Старайтесь думать о цвете в палитре как о кусочках паззла, экспериментируйте с ним, создавайте различные, самые невероятные комбинации, пока не найдёте ту, что «идеально» подходит для каждого участка вашего спрайта.

Этап 3: Тени

Этап 3

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

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

Импровизированные тени с различными оттенками

В примере слева я использую ту же самую палитру что и AAP-Mini12. Когда я рисовал этого зелёнокожего парня, то у меня не было светлого зелёного, так что я выбрал ближайший доступный мне оттенок, который оказался жёлтым. То же самое с тенями, я выбрал синий, потому что он близок к наиболее тёмному оттенку. Но что если бы я сделал всё по-другому? Ведь я мог использовать ярко-синий и тёмно-красный, так? На самом деле, это не очень хорошее сочетание:

Тени с инвертированным оттенком

Эффект выглядит классно, но что-то со всем этим не так. Обычно вы стараетесь использовать холодные оттенки в тенях и тёплые на свету. Это конечно не выбитая на скрижалях заповедь, есть много исключений из этого правила, но, когда у вас нет уверенности, что это принесёт пользу, то лучше придерживаться правила.

Этап 4: Анти-ализинг и полировка

Этап 4

Эта та часть создания спрайта, когда вы стараетесь сделать его менее «рублёным». Ручной анти-ализинг весьма сложный навык, о нём можно написать целую статью, но в теории вы используете средний тон, чтобы симулировать «полупиксели» и смягчить края спрайта. Но не заморачивайтесь об этом сейчас, для вас главное сделать спрайт чётким и читаемым.
Другой хорошей идеей на данном этапе это будет отлов и отстрел некоторых одиночных пикселей, чтобы уменьшить шум. Одиночные пиксели, которые не являются частью большой группы пикселей того же цвета и не являются частью анти-ализинга, выглядят так:

Убираем одиночные пиксели

Видите, однопиксельные острова на планете слева? Это одиночные пиксели и как вы заметили, после их уборки, планета стала выглядеть гораздо лучше.
А что насчёт звёзд? Они как раз доказывают, что одиночные пиксели, если их использовать с умом, могут быть полезны для таких вещей как создание текстуры шума, или контраста на фоне.
Смысл не в том, чтобы бездумно убирать одиночные пиксели, но найти их и спросить себя: этот пиксель точно должен быть один?

И что теперь?

Теперь настало время поиграть с цветами и попробовать большее разрешение! Но не спешите, разрешение 48 на 48 и 16 цветов, затем далее. Не стоит сразу переходить к анимации, сначала набейте руку в создании статичных спрайтов.
Специально для вас я выбрал гайды, которые могут вам пригодится:
• Pixel art tutorial by Cure
• Pixel art tutorial by Derek Yu
• Pixel art tutorial by Arne
У меня также есть несколько уроков, о специфичных аспектах пиксель-арта и гейм-дизайна, вы можете увидеть их здесь:
• My Patreon page
• Мои уроки

Pixel art для начинающих. Введение.

Обучающий материал

Интерес, проявленный к первому уроку, и последовавшие обсуждения, а также замечательные работы, которые посетители начали рисовать и выкладывать в комментариях, показали, что начинать всё же следовало с основ. Исправляю ошибку и предлагаю своеобразный приквел, в котором мы познакомимся с азами pixel art’а перед тем, как приступить к изометрии.

Но для начала немного истории (не переносите длинных вступлений? Смело пропускаете два-три абзаца).

1. История (очень коротко).

Юрий Гусев, он же Fool.

Pixel art (пишется без дефиса) или пиксельная графика — направление цифрового искусства, которое заключается в создании изображений на уровне пикселя (т. е. минимальной логической единицы, из которой состоит изображение). Далеко не все растровые картинки являются пиксель артом, хотя все они и состоят из пикселей. Почему? Потому что в конечном счёте понятие pixel art вмещает в себя не столько результат, сколько процесс создания иллюстрации. Пиксель за пикселем, и только так. Если вы возьмёте цифровое фото, сильно его уменьшите (так, чтобы пиксели стали видны) и заявите что нарисовали его с нуля — это будет настоящий подлог. Хотя наверняка найдутся наивные простаки, которые вас похвалят за кропотливый труд.

Это — не pixel art. Хотя изображение цифровое, создано с помощью компьютера и состоит из пикселей — оно НЕ рисовалось на уровне точек. К сожалению, практически недоказуемо, потому что автор всегда может заявить обратное. Вот почему на конкурсах по пиксельной графике обычно одно из условий — предоставить иллюстрацию на разных этапах работы (WIP — work in progress).

Сейчас неизвестно, когда точно зародилась эта техника, корни теряются где-то в начале 1970-х. Однако приём составления изображений из малых элементов восходит к куда более древним формам искусства, таким как мозаика, вышивание крестиком, ковроплетение и бисероплетение. Само же словосочетание «pixel art» как определение пиксельной графики впервые было использовано в статье Адель Голдберг и Роберта Флегала в журнале Communications of the ACM (декабрь 1982-го).

Разновидность пиксель арта — т. н. line art. Неизвестный автор.

Наиболее широкое прикладное применение pixel art получил в компьютерных играх, что неудивительно — он позволял создавать изображения, нетребовательные к ресурсам и выглядящие при этом по-настоящему красиво (при этом отнимающие у художника немало времени и требовавшие определённых навыков, а потому подразумевающие хорошую оплату труда). Расцветом, наивысшей точкой в развитии официально называют видеоигры на приставках 2-го и 3-го поколения (начало 1990-х). Дальнейший прогресс технологий, появление сперва 8-битного цвета, а затем и True Color, развитие трёхмерной графики — всё это со временем оттеснило pixel art на второй и третий планы, а потом и вовсе стало казаться, что пиксельной графике пришёл конец.

Наивысшая точка развития pixel art’а в видеоиграх. Хотя официально апогей приписывают 2-му и 3-му поколениям, на мой взгляд он пришёлся несколько позже. Именно на приставках 4-го поколения (Sega MD, SNES, TurboGrafx-16 и Neo Geo) вышли игры с самой красивой и безупречной по технике пиксельной графикой. Это несмотря на то, что технология наступала на пятки и повсеместно предпринимались попытки ввести в игры full motion video, а также спрайты, созданные на основе фотографий, видеоматериалов и заранее визуализированных 3D-моделей.

Как ни странно, но именно господин Научно-технический прогресс, задвинувший в середине 90-х пиксельную графику на последние позиции, и вернул её позже в игру — явив миру мобильные устройства в виде сотовых телефонов и КПК. Ведь каким бы полезным ни был новомодный дивайс, мы-то с вами знаем — если на нём нельзя хотя бы разложить пасьянс, грош ему цена. Ну а там где есть экран с невысоким разрешением, там и pixel art. Как говорится, добро пожаловать назад.

У дизайнеров из «eBoy» было трудное детство, они провели его в восточной Германии и были начисто лишены возможности наслаждаться изящными искусствами. Потому не научились рисовать ничего кроме пиксельной графики. Но главная их заслуга — они убедили рекламодателей, что pixel art это модно и круто. Если по мнению дизайнеров из «eBoy» ГДРовские игрушки и одежда были некрасивыми — интересно, что бы они сказали про советские?

Разумеется, свою роль в возвращении пиксельной графики сыграли различные ретроградно настроенные элементы, любящие поностальжировать над старыми-добрыми играми детства, приговаривая при этом: «Эх, теперь такого не делают» эстеты, способные оценить красоту пиксель арта, и инди-разработчики, не воспринимающие современные графические красоты (а иногда, правда редко, элементарно не умеющие их реализовать в собственных проектах), оттого и ваяющие pixel art. Но давайте всё-таки не будем сбрасывать со счетов сугубо коммерческие проекты — приложения для мобильных устройств, рекламу и web-дизайн.

Еще одна заметная фигура — голландец Хэнк Ниебург, начавший карьеру пиксельного художника аж в 1989-м. В конце 90-х был вынужден зарабатывать на жизнь вебдизайном и едва сводил концы с концами, но с 2000-го снова рисует pixel art, теперь уже для мобильных игр.

Так что сейчас pixel art, что называется, широко распространён в узких кругах и заработал себе своеобразный статус искусства «не для всех». И это несмотря на то, что для простого обывателя он предельно доступен, ведь чтобы работать в этой технике, достаточно иметь под рукой компьютер и простейший графический редактор! (умение рисовать, между прочим, тоже не помешает) Хватит слов, ближе к делу!

Pixel dolls, развлечение для взрослых девочек, не наигравшихся в куклы. Кроме шуток, это тоже pixel art, и работы некоторых авторов вызывают восхищение как среди фанатов пиксельной графики, так и среди ценителей прекрасного. pixparadise.net

2. Инструменты.

Что нужно для создания пиксель арта? Как сказал выше, достаточно компьютера и любого графического редактора, способного работать на уровне пикселей. Рисовать можно где угодно, хоть на Game Boy, хоть на Nintendo DS, хоть в Microsoft Paint (другое дело, что рисовать в последнем крайне неудобно). Есть великое множество растровых редакторов, многие из них бесплатны и достаточно функциональны, так что с программным обеспечением каждый может определится самостоятельно.

Microsoft Paint — оружие последнего шанса, когда рисовать уже совсем негде. Это «круги», во всяком случае Paint считает именно так. Особенно примечателен уродец в центре, который даже не симметричен.

Я рисую в Adobe Photoshop, потому что удобно и потому что давно. Не стану врать и рассказывать, шамкая вставной челюстью, что де «Я помню Фотошоп был еще са-а-авсем маленьким, это было на Макинтоше, и был он с номером 1.0» Такого не было. Но я помню Фотошоп 4. 0 (и также на Маке). А потому для меня вопрос выбора никогда не стоял. И потому нет-нет, но я буду давать рекомендации касательно Photoshop, особенно там, где его возможности помогут значительно упростить творчество.

Итак, вам нужен любой графический редактор, позволяющий рисовать инструментом в один квадратный пиксель (пиксели бывают и неквадратные, например круглые, но они нас в данный момент не интересуют). Если ваш редактор поддерживает какой-никакой набор цветов — отлично. Если также позволяет сохранять файлы — просто замечательно. Хорошо бы еще умел работать со слоями, поскольку работая над достаточно сложной картинкой, удобнее разложить её элементы по разным слоям, но по большому счёт это вопрос привычки и удобства.

Тоже своего рода пиксель арт, картина составлена из… кубиков Рубика! 1330 кубиков, размер полотна 116×107 см, автор Джон Куигли (John Quigley).

Начнём? Вы наверное ждёте списка каких-то секретных приёмов, рекомендаций, которые научат вас рисовать pixel art? А правда в том, что ничего такого по большому счёту нет. Единственный способ научиться рисовать пиксельную графику — это рисовать самому, пробовать, пытаться, не бояться и экспериментировать. Не стесняйтесь повторять чужие работы, не бойтесь показаться неоригинальным (просто не выдавайте чужое за своё, хе-хе). Внимательно и вдумчиво анализируйте работы мастеров (не мои) и рисуйте, рисуйте, рисуйте. Несколько полезных ссылок вас ждёт в конце статьи.

3. Общие принципы.

И всё же существует несколько общих принципов, знать которые не помешает. Их действительно немного, я называю их «принципами», а не законами, потому что они носят скорее рекомендательный характер. В конце-концов, если у вас получится нарисовать гениальную пиксельную картинку в обход всех правил — кому до них дело?

Самым основной принцип можно сформулировать так: минимальной единицей изображения является пиксель, и по возможности все элементы композиции должны быть соразмерны ему. Расшифрую: всё, что вы нарисуете, состоит из пикселей, и пиксель должен читаться во всём. Это не значит, что в рисунке вообще не может быть элементов, к примеру, 2×2 пикселя, или 3×3. Но строить изображение всё же предпочтительно из отдельных пикселей.

Для наглядности приведу несколько примеров с типичными ошибками и вариантами их исправления:

За исключением ладоней у человечка, которые вроде как являются авторской задумкой, все элементы, в которых толщина линии превысила 1 пиксель, нужно исправить.

Ноги у человечка лучше выглядеть не стали, это верно, к ногам еще вернёмся. В качестве примера «из жизни» приведу онлайновый паззл Zoo keeper:

http://pc.kiteretsu.jp/games/zka/zka.htm

Почему художник решил сделать обводку в два пикселя, в то время как сами элементы нарисованы попиксельно? Возможно, хотел отделить тайлы от фона. А прочую внутриигровую графику рисовал с той же жирной обводкой, чтобы сохранить единую стилистику, плюс такая явная обводка придаёт изображению некую выразительность. Тем не менее — что называется, не наш метод.

Кадр из игры Duct. Казалось бы, всё в порядке, но толщина обводки и прочих элементов рисунка всюду колеблется
между 1-м и 2-мя пикселями.

Из этого принципа можно вывести простое правило: обводка и вообще все линии рисунка должны быть толщиной в один пиксель (за редким исключением).

То самое исключение, Jimmy Two Shoes. Здесь пиксельная графика стремится повторить стиль оригинального мультфильма, на персонажах которого основана игра, и в котором все персонажи имеют чётковыраженную обводку.

Я вовсе не утверждаю, что это неправильно. Но это всё же не очень красиво. А чтобы было красиво, запомним еще одно правило: рисовать без изломов, скруглять плавно. Есть такое понятие как изломы — фрагменты, выбивающиеся из общего порядка, они придают линиям неровный, зазубренный вид (в англоговорящей среде пиксельных художников их называют jaggies):

Изломы лишают рисунок естественной плавности и красоты. И если фрагменты 3, 4 и 5 очевидны и исправляются легко, с прочими дело обстоит сложнее — там нарушена длина одного-единственного кусочка в цепи, казалось бы мелочь, но мелочь заметная. Чтобы научиться видеть такие места и избегать их, требуется небольшая практика. Излом 1 выбивается из линии, потому что это единичный пиксель — в то время как на участке, где он затесался, линия состоит из сегментов по 2 пикселя. Чтобы избавиться от него, я смягчил вход кривой в изгиб, удлинив верхний сегмент до 3-х пикселей, и перерисовал всю линию сегментами по 2 пикселя. Изломы 2 и 6 идентичны друг другу — это уже фрагменты длиной 2 пикселя на участках, построенных единичными пикселями.

Избежать подобных изломов при рисовании поможет элементарный набор примеров наклонных прямых, который можно встретить практически в каждом руководстве по пиксельной графике (моё не исключение):

Как видите, прямая линия составляется из отрезков одинаковой длины, смещаемых по мере её прорисовки на один пиксель — только таким образом достигается эффект линейности. Наиболее распространённые способы построения с длиной отрезка 1, 2 и 4 пикселя (встречаются и другие, но представленных вариантов должно хватить для реализации практически любой художественной задумки). Из этих трёх самым популярным можно уверенно назвать длину отрезка в 2 пикселя: рисуем отрезок, сдвигаем перо на 1 пиксель, рисуем еще один отрезок, сдвигаем перо на 1 пиксель, рисуем еще отрезок:

Несложно, верно? Нужна лишь привычка. Умение рисовать наклонные прямые с шагом в 2 пикселя поможет в изометрии, так что подробнее остановимся на ней в следующий раз. Вообще прямые линии это здорово — но только до тех пор, пока не встанет задача нарисовать что-нибудь нерукотворное. Тут нам понадобятся кривые, и много самых разных кривых. И берём на вооружение простое правило закругления кривых линий: длина элементов кривой должна уменьшаться/увеличиваться постепенно.

Выход из прямой на скругление ведётся плавно, я обозначил длину каждого сегмента: 5 пикселей, 3, 2, 2, 1, 1, снова 2 (уже вертикально), 3, 5 и далее. Не обязательно ваш случай будет использовать такую же последовательность, здесь всё зависит от плавности, которая требуется. Еще пример скругления:

Опять же, избегаем изломов, которые так портят картинку. Если есть желание проверить усвоенный материал, здесь у меня нарисованный неизвестным автором skin для Winamp’а, заготовка:

На рисунке есть и грубые ошибки, и просто неудачных скругления, и изломы встречаются — попробуйте исправить картинку на основе того, что уже знаете. На этом с линиями у меня всё, предлагаю немного порисовать. И пусть вас не смущает простота примеров, научиться рисовать можно только рисуя — даже такие простейшие вещи.

4.1. Рисуем склянку с живой водой.

1. Форма объекта, пока можно не использовать цвет.

2. Красная жидкость.

3. Меняем цвет стекла на голубой, добавляем затенённые участки внутри пузырька и светлый участок на предполагаемой поверхности жидкости.

4. Добавляем белые блики на пузырьке, и тень шириной 1 пиксель тёмно-красного цвета на приграничных к стенкам пузырька областях жидкости. Смотрится вроде неплохо, а?

5. Аналогично рисуем склянку с синей жидкостью — здесь тот же цвет стекла, плюс три оттенка синего для жидкости.

4.2. Рисуем арбуз.

1. Нарисуем круг и полукруг — это будут арбуз и вырезанная долька.

2. Обозначим вырез на самом арбузе, а на дольке — границу между корочкой и мякотью.

3. Заливка. Цвета из палитры, средний оттенок зелёного — цвет корки, средний красный — цвет мякоти.

4. Обозначим переходный участок от корки к мякоти.

5. Светлые полосы на арбузе (наконец-то он похож сам на себя). И конечно — семечки! Если скрестить арбуз с тараканами, будут расползаться сами.

6. Доводим до ума. Бледно-розовый цвет используем для обозначения бликов над семечками в разрезе, и, выкладывая пиксели в шахматном порядке, добиваемся от вырезанной дольки некоего подобия объёма (метод называется dithering, о нём позже). Тёмный красный оттенок используем, чтобы обозначить затенённые места в разрезе арбуза, и тёмно-зелёный (опять же пиксели в шахматном порядке) — чтобы придать объём самому арбузу.

5. Dithering.

Дизеринг, или смешивание — техника перемешивания определённо упорядоченным (не всегда) образом пикселей в двух граничащих областях разного цвета. Самый простой, распространённый и эффективный способ — чередовать пиксели в шахматном порядке:

Приём появился на свет благодаря (или скорее вопреки) техническим ограничениям — на платформах с ограниченными палитрами дизеринг позволял, замешивая пиксели двух разных цветов, получить третий, отсутствующий в палитре:

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

Game Boy, 4 цвета (чёрный, белый и два оттенка серого). Настоящий вызов художнику!

Сейчас, в эпоху безграничных технических возможностей, многие говорят что необходимость в дизеринге отпала сама собой. Однако грамотное его использование может придать вашим работам характерный ретро-стиль, узнаваемый всеми любителями старых видеоигр. Лично я люблю использовать dithering. Не очень хорошо им владею, тем не менее, люблю.

Еще два варианта дизеринга:

Что нужно знать про дизеринг, чтобы уметь им пользоваться. Минимальная ширина зоны смешивания должна быть не меньше 2-х пикселей (те самые шашечки). Больше — можно. Меньше лучше не делать.

Ниже пример неудачного дизеринга. Несмотря на то, что подобную технику можно часто встретить на спрайтах из видеоигр, нужно отдавать себе отчёт в том, что телевизионный экран существенно сглаживал изображение, и такая гребёнка, да еще в движении, глазом не фиксировалась:

Ну, хватит теории. Предлагаю еще немного попрактиковаться.

6.1. Рисуем меч.

Такой несерьёзный меч для несерьёзного проекта:

1. Форма. Здесь всё просто.

2. Начинаем распределять цвет. Я изменил изначально чёрный на цвет тёмной стали (хочется верить, что похожий) и залил меч серым.

3. Придаём форму за счёт светотени и дополнительной расцветки (обратите внимание — я кое-где повторно изменил цвет обводки, сделав его еще светлее). Условимся, что свет на меч падает слева-сверху, из-за плеча наблюдающего, поэтому блики (наиболее светлые участки освещённых поверхностей) располагаются на выступающих элементах слева, тени — справа и снизу.

4. Доводим наш миниатюрный шедевр до совершенства. Усиливаем эффект объёма на яблоке и сферических элементах крестовины (левый и правый «шарики»), на обмотке рукояти. Обратите внимание на длинную полосу, идущую по лезвию — дол (некоторые называют его кровотоком, полагая, что он служит для стекания крови проткнутого врага). Название здесь неважно, суть в том, что это жёлоб и центральная его часть освещена меньше всего, в то время как края наоборот. Справа от дола, чтобы усилить эффект глубины, я обозначил чёткий блик (никогда нелишне хорошенько изучить объект, который вы собираетесь изобразить — не для того чтобы сыпать терминами, а чтобы иметь чёткое представление об устройстве и особенностях конструкции). Вроде получился довольно симпатичный меч, а?

5. Я не стал останавливаться на достигнутом и сильно состарил наше оружие, вообразив, как мог бы выглядеть клинок, пролежи он сотню лет в подземелье. Цвета заменены более тёмными (соседними из той же палитры), я ввёл больше чёрного (на предыдущем рисунке лишь три действительно чёрных точки, одна на стыке дола с крестовиной усиливала эффект глубины тени, две другие подчёркивали обмотку рукояти). Выбоины и сколы на лезвии, крестовина и яблоко серьёзно повреждены (наверняка в жестокой сечи), обмотка рукояти порвана. В общем, перед нами настоящая древность. Придумаем достойную легенду и поставим на видном месте, как семейную реликвию.

6.2. Робот.

Один из самых распространённых способов рисования «с нуля» — изобразить черновой вариант (не попиксельно, а традиционно, рисуя либо мышью, либо на планшете), а после почистить его, исправить (при необходимости) и довести до ума. Также часто художники рисуют на основе своих бумажных черновиков, карандашных рисунков, набросков и прочих «почеркушек» — сканируют их и обрисовывают попиксельно. Дело привычки. Я обычно начинаю с чернового наброска:

Теперь чистка, стираю лишние пиксели и дорисовываю недостающие:

Закругление согласно простому правилу плавности, все прямые линейные. Добавляю ноги:

На самом деле рисовать полноценные конечности, честно говоря, поленился. Хотелось поскорее закончить урок, плюс массивный робот на тонких ножках — по-моему достаточно забавно. Помимо того, что ноги нарисованы обыкновенными прямыми (что здорово сэкономило мне время), я не стал придавать им объём — это не цилиндры, а пока что обычные плоские прямоугольники. Объёма добьюсь позже, с помощью теней и бликов. Кстати, еще одна хитрость, на которую пошёл сознательно — бедро левой ноги построено в точности как голень правой, и наоборот, так что фактически, вместо того чтобы нарисовать четыре цилиндра, я схитрил и нарисовал два наклонных прямоугольника.

Дополнительный элемент в виде панели на груди и трёх… лампочек? Не знаю, пока не решил. Но понял, что хочу сделать торс робота телескопическим, как раскладной стаканчик, поэтому пришлось слегка откорректировать линию изгиба, добавив небольшие но заметные зазоры на стыке сегментов. Теперь заливка!

Основной цвет, плюс я заменил цвет обводки с чёрного на тёмно-синий. Смотрится по-прежнему пустовато, но это ничего, исправлю тенями. Условлюсь, что источник света где-то за сверху за моим левым плечом, следовательно, тени лягут в основном справа и снизу. Сначала грудь, как самый крупный элемент:

Тень накладываю в 2 этапа, сперва самую тёмную, участком шириной максимум 3−4 пикселя (т. е. от линии обводки вглубь объекта, в данном случае, тень занимает область шириной 3, самое большое 4 пикселя. Это не закономерность, цифры запоминать не нужно, для другого предмета с другим освещением, другим материалом и другим настроением тень наверняка ляжет иначе). Далее более светлая тень, так же как и основная плавно сходящая на нет. Обратите внимание, на закруглённых участках груди тень кое-где лежит совсем небольшими фрагментами, по одному пикселю — это также придаст рисунку больше плавности.

Особое внимание обращаю на грудную панель: теневые участки толщиной в 1 пиксель, на освещённой кромке появляется чёткий блик, для которого использую самый светлый цвет из палитры.

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

Теперь блики на поверхностях, которые должны отразить свет от источника прямо в глаза наблюдателю (художнику):

Хм, совсем другое дело. Даже прямоугольники-ножки выглядят как цилиндры! Я решил, что три кружка на груди могучего робота будут ракетницами, закрытыми люками, так что это по сути небольшие углубления; тень от левой кромки и блик по правой (и нижней).

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

Выбираем любую границу между двумя цветами и выкладываем пиксели этих цветов в шахматном порядке. Самые светлые пятна я оставил без дизеринга, что подчёркивает резкость блика. Также дизеринга нет на ногах — слишком миниатюрные элементы, его там просто негде выкладывать. Теперь финальный штрих, заклёпки, обозначающие зубы, и игривая антенна:

Если внимательно рассмотреть заклёпки-зубы, видно, что это всего лишь фрагменты 2 на 2 пикселя, верхний левый окрашен в цвет бликов, два соседних с ним — цвет светлой тени, и правый нижний — цвет основной тени. Просто, да? При этом даже несмотря на то, что в некоторых местах пиксели заклёпок совпадают с цветом соседних точек, при отдалении (уменьшении масштаба рисунка до 100 или 200%) сохраняется полное впечатление того, что это выделяющиеся объекты. Еще в палитре появился дополнительный близкий к чёрному оттенок — я решил с его помощью сделать темнее суставы на ногах, и замешать в шахматном порядке пиксели в суставы на руках. Чистый чёрный я попробовал, тень получалась неестественной, а дизеринг с самым тёмным оттенком дал нужный эффект.

Ну и самый последний штрих, мне кажется, левая рука расположена не очень удачно — вырезаю её и сдвигаю вниз и влево. Вот так, кажется, самое то:

WIP, тот самый Work in Progress:

---

Собственно, на сегодня это всё. В следующий раз разберём изометрические построения, ну а напоследок несколько полезных ссылок:

Юрий Гусев aka Fool
http://www.foolstown.com/
http://fool.deviantart.com/

Алексей Гаркушин aka gas13
http://gas13. ru/
http://gas13.deviantart.com/

Дизайн-группа eBoy
http://hello.eboy.com/eboy/category/everything/explore/parts/

Henk Nieborg (Голландия)
http://www.henknieborg.nl/

Gary J Lucken (Великобритания)
http://www.armyoftrolls.co.uk/

Kenneth Fejer…
http://www.kennethfejer.com/

…и один из его замечательных проектов — ISOSITY
http://www.kennethfejer.com/isocity/

Agnes Heyer aka Arachne (Норвегия)
http://www.retinaleclipse.com/

Borek Bures (Чехия)
http://www.spiv.cz/index.html

The Spriters Resource — хранилище спрайтов из игр
http://spriters-resource.com/

Как начать делать пиксель-арт #1. Руководство для начинающих | Педро Медейрос | Пиксельный гримуар

Руководство для начинающих

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

Эта статья была поддержана Patreon! Если вам нравится то, что я здесь делаю, поддержите меня там 🙂

Кроме того, это первая часть серии статей, всю серию читайте здесь, в Пиксельном Гримуаре.

Перед тем, как начать

Прежде чем приступить к пиксель-арту, помните: пиксель-арт — это просто еще одно художественное средство, такое же, как гуашь, масляная живопись, карандаш, скульптура или их близкий родственник мозаика. Чтобы делать хороший пиксель-арт, нужно уметь делать хорошие рисунки. В общем, это означает изучение анатомии, перспективы, света и тени, теории цвета и даже истории искусства, поскольку все это необходимо для создания хорошего пиксель-арта.

Инструменты

Для создания хорошей пиксельной графики не нужно ничего особенного, и вы можете справиться даже с хорошей мышью и бесплатным программным обеспечением. Моя установка включает в себя небольшой планшет Wacom, хорошую мышь, хорошую клавиатуру и мое любимое программное обеспечение — Aseprite , но вы должны использовать то, что вам удобнее.

Вот список программного обеспечения, обычно используемого для пиксельной графики:

• Aseprite : Отличный профессиональный редактор со множеством функций, позволяющих сэкономить время (платно)
• GraphicsGale : Классика, используемая во многих играх. Это немного сложно, но полно замечательных функций (бесплатно)
• Piskel : Бесплатный онлайн-редактор пиксельной графики (бесплатно)
• Photoshop : его можно использовать (платно)

Aseprite

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

Создание нового файла

Просто щелкните ссылку « Новый файл… » на главном экране или выберите Файл > Новый файл , чтобы мы могли начать рисовать.

Создадим новый файл. 16 на 16, возможно, кажется слишком маленьким, но я думаю, что это хорошая отправная точка. Большие разрешения могут отвлечь вас от того, на чем вы сейчас должны сосредоточиться: понимания взаимодействия пикселей с их соседями.

Диалог Aseprite «Новый спрайт»

Вы можете оставить цветовой режим в RGBA , это самый простой и интуитивно понятный на данный момент. Некоторым художникам по пикселям нравится работать с палитрой с индексом , которая позволяет использовать довольно интересные цветовые трюки, но имеет и некоторые недостатки.

Оставьте фон прозрачным или белым , это пока мало что изменит. Просто убедитесь, что дополнительные параметры не отмечены (но не стесняйтесь экспериментировать с ними позже), и все готово!

Давайте рисовать!

Там много панелей инструментов и меню, но не волнуйтесь, нам пока нужно всего несколько кнопок. Основным инструментом является Карандаш , который всегда должен иметь ширину 1 пиксель, и это будет то, как мы размещаем наши пиксели на холсте. Просто нажмите кнопку или нажмите B и нажмите на экран, чтобы поместить вниз пиксель выбранного цвета.

Рабочее пространство Aseprite

Слева вы можете увидеть свою цветовую палитру с некоторыми цветами по умолчанию. Давайте заменим их на другой, более простой набор. Нажмите на третий значок в верхней части цветовой палитры ( Pressets ) и выберите ARQ4 (действительно хорошая палитра от Endesga), именно ее вы будете использовать для своего первого спрайта.

Теперь, используя только 4 цвета в левом верхнем углу, попробуйте нарисовать кружку .

Не стесняйтесь использовать мой в качестве вдохновения, но также попробуйте сделать его уникальным. Если вы допустили ошибку, alt+щелкните в пустой области или за пределами вашего рисунка, и вы «выберете» прозрачный цвет, и вы сможете использовать его для стирания пикселей. В качестве альтернативы вы можете нажать на Eraser или нажать E , чтобы выбрать его.

Вы, наверное, заметили, что работа в таком низком разрешении сильно отличается от обычного рисования. Все должно быть просчитано, и каждый пиксель, который вы размещаете, — это большой выбор, который вам нужно сделать. Это то, к чему вам нужно будет привыкнуть.

Вы также можете поэкспериментировать с другими кнопками на панели инструментов. Стоит отметить, что при нажатии на некоторые кнопки открываются дополнительные параметры. Просто пока избегайте инструмента размытия, так как он добавляет больше цветов, а нам это пока не нужно.

Теперь давайте сделаем больше спрайтов! Попробуйте нарисовать череп , меч и человеческое лицо . На этот раз без ссылки на пиксель-арт. Если вы чувствуете, что спрайты просто не помещаются на холсте, это абсолютно нормально, попробуйте абстрагировать что-то до одного пикселя и попробуйте еще раз. Очень сложно работать с таким низким разрешением, и иногда это похоже на головоломку. Вот еще одна статья, которую я написал о работе с низкими разрешениями для Kano: [ссылка]

Если хотите, вот мои версии этих спрайтов, пожалуйста, не забудьте закончить свои, прежде чем смотреть на них [череп, меч и человеческое лицо].

Это всегда хорошее упражнение. Если вы хотите продолжать практиковаться, попробуйте сделать еще больше рисунков с этими ограничениями.

Сохранение файла

Чтобы сохранить файл, нажмите Control+S (или выберите Файл>Сохранить как… ), выберите имя файла и его местоположение и просто нажмите «Сохранить».

Не забывайте, что в пробной версии Aseprite сохранение отключено!

Диалоговое окно «Экспорт файла Aseprite»

Вы увидите, что Aseprite может сохранять в различных форматах, но я всегда рекомендую сохранять версию . ase для каждого файла, который вы создаете. Как и в Photoshop, вы должны сохранить файл .psd . При экспорте для Интернета или игр вы можете использовать Control+Alt+Shift+S или File>Export .

Почему никогда не следует изменять размер пиксельной графики частично

У Aseprite есть очень хорошая функция Resize в окне экспорта. Он масштабирует ваш спрайт только в круглых числах, что идеально. Например, если вы измените масштаб своего спрайта на 107 %, пиксели будут разбиты повсюду, и это будет беспорядок, но если вы масштабируете его на 200 %, каждый пиксель теперь будет иметь ширину и высоту по 2 пикселя, так что он будет выглядеть красиво и четко.

Большой холст

Теперь, когда вы освоили основы, такие как создание нового файла, сохранение и рисование на холсте, давайте попробуем рисовать на холсте немного большего размера, 32 на 32 пикселей. Теперь мы также будем использовать большую палитру, попробуйте AAP-Micro12 (от AdigunPolack). На этот раз мы будем рисовать лопату.

В отличие от спрайта 16 на 16, здесь мы можем разместить некоторые контуры, так что давайте начнем с этого. Вот моя разбивка процесса:

Шаг 1: Строки

Шаг 1

Этот стиль линии — это то, что мы называем идеальной линией по пикселям, она имеет ширину всего 1 пиксель и соединяется с другими пикселями по диагонали. При создании таких линий мы избегаем непреднамеренных краев, как здесь:

У Aseprite также есть очень хорошая функция в настройках кисти, позволяющая делать это почти автоматически: выбрав инструмент Brush Tool , установите флажок Pixel-perfect . Просто не забудьте отключить его, когда не работаете с контурами, потому что это, вероятно, будет вас раздражать.

Алгоритм Aseprite Pixel perfect

Шаг 2: Базовые цвета

Шаг 2

Хорошо, что выбор из небольшого количества цветов заключается в том, что вы не будете перегружены излишним количеством вариантов. Вот почему намного сложнее работать с большим количеством цветов, если у вас есть цвет в вашей палитре, нет никаких оправданий тому, чтобы не использовать его в лучшем виде. Попробуйте думать об этом как о головоломке, много экспериментируйте, даже со странными или необычными комбинациями, пока не найдете то, что, по вашему мнению, является «лучшим соответствием» для каждой области.

Шаг 3: Затенение

Шаг 3

Используйте свою палитру, чтобы творчески создавать свет и тень. Поскольку вы работаете с очень ограниченной палитрой, у вас не будет каждого оттенка с разной яркостью, поэтому вам придется импровизировать.

Импровизация оттенков с различными оттенками

В примере слева я использую ту же палитру, что и вы, AAP-Mini12 . Когда я рисовал этого зеленого чувака, у меня не было светло-зеленого цвета, поэтому я выбрал ближайший оттенок, который у меня был, а именно желтый. То же самое произошло с тенью, я выбрал синий, потому что он был самым близким к темному. Но что, если я пойду другим путем? Я мог бы получить более ярко-синий и темно-красный, верно? Ну не совсем :

Растушевка тонов инвертированным оттенком

Это классный эффект, но явно что-то не так. Обычно вы хотите, чтобы холодные оттенки были вашими тенями, а теплые оттенки были вашим ключевым светом, иначе они могут выглядеть странно. Это не каменное правило или что-то в этом роде, есть много исключений, но если вы не уверены, просто придерживайтесь этого.

Шаг 4: Сглаживание и полировка

Шаг 4

Это часть рисунка, где вы пытаетесь сделать пиксели менее «заостренными». Ручное сглаживание — сложная тема, и нам, вероятно, понадобится целая статья, чтобы обсудить ее, но теоретически вы будете использовать средние тона для имитации «полупикселей» и смягчения краев. Но пока не слишком беспокойтесь об этом, а пока сосредоточьтесь на том, чтобы сделать ваш спрайт как можно более читабельным.

Еще одна хорошая идея на этом этапе — отыскать несколько потерянных пикселей, чтобы уменьшить шум. Бесхозные пиксели — это пиксели, которые не являются частью большей группы пикселей того же цвета и не являются частью сглаживания, например:

Удаление бесхозных пикселей

Видите маленькие 1-пиксельные островки слева? Это пиксели-сироты, как вы можете видеть, планета выглядит намного лучше после того, как мы объединим эти пиксели с некоторыми другими соседними пикселями того же цвета.

А как насчет звезд в этом примере? Ну, они здесь, чтобы доказать, что потерянные пиксели не всегда плохи, эти звезды работают именно так, как задумано, создавая текстуру шума и повышая контрастность фона.

Идея состоит не в том, чтобы бездумно удалять бесхозные пиксели, а в том, чтобы через них спросить себя: действительно ли этот пиксель должен быть один?

Что теперь?

Теперь пришло время поэкспериментировать с большим количеством цветов и большим разрешением! Но потихоньку, может 48 на 48 и 16 цветов и так далее. Если вы действительно начинаете, я бы пока избегал анимации и сначала сосредоточился на том, чтобы освоиться со статическими изображениями.

Я выбрал несколько других руководств по пиксельной графике, которые мне очень нравятся, если вы хотите провести исследование:

• Учебное пособие по пиксельной графике от Cure
• Учебное пособие по пиксельной графике от Дерека Ю
• Учебное пособие по пиксельной графике от Arne

Я также делаю несколько руководств по конкретным темам или аспектам пиксельной графики и игрового дизайна, вы можете увидеть их все здесь:

• Моя страница на Patreon
• Список всех моих туториалов

Продолжайте читать часть 2 здесь !

Как сделать пиксель-арт: полное руководство для начинающих

Пиксель-арт — это форма цифрового искусства, которая возникла из-за необходимости передавать изображения в ограниченном пространстве памяти 8- или 16-битных компьютеров и игровых консолей.

Иногда процесс создания пиксельной графики называют «спрайтом», что происходит от слова «спрайт». Это термин компьютерной графики, используемый для описания двухмерного растрового изображения, интегрированного в более крупную сцену (обычно видеоигру).

Вы заинтересованы в создании собственного пиксельного искусства? Вот все, что вам нужно знать, чтобы начать.

Основные инструменты для пиксельной графики

Вопреки распространенному мнению, мощное или дорогое программное обеспечение не гарантирует качественного искусства! Выбор программы — это только вопрос предпочтений.

Если вы являетесь пользователем Windows, вы можете использовать даже такие простые инструменты, как Microsoft Paint. Вот более обширный список некоторых инструментов, которые вы можете использовать для создания пиксельной графики.

Все, что вам действительно нужно для создания пиксельной графики, — это следующие инструменты (поэтому убедитесь, что они есть в вашей программе):

• Карандаш:  – ваш основной инструмент для рисования, который по умолчанию размещает один пиксель.
• Ластик:  – стирает или удаляет нарисованные вами пиксели.
• Ведро:  заполняет пустую область одним сплошным цветом

Другие полезные инструменты включают инструменты выделения, линии, перекрашивания и поворота. Они не являются абсолютно необходимыми, так как вы можете добиться тех же эффектов, используя инструменты, перечисленные выше.

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

Что касается аппаратного обеспечения, все, что может управлять вашим курсором, прекрасно работает. Трекпад или мышь отлично подходят для точности и детализации. Графический планшет, тем временем, может быть вашим предпочтением для лучшего контроля над длинными мазками.

Связанный: Лучшие графические планшеты для цифровых художников и дизайнеров

Насколько большим должен быть ваш спрайт или холст?

Для размера спрайта нет неправильного ответа. Но наиболее распространены числа, кратные восьми в степени двойки (например, 8 × 8, 16 × 16, 32 × 32 и т. д.), потому что в противном случае старые компьютеры не могли отображать их должным образом.

Лично мы рекомендуем начинать с малого, потому что это может помочь вам быстро освоить основы. В конце концов, пиксельная графика возникла из-за того, что художники хотели максимально использовать каждый пиксель и каждый используемый цвет, поскольку их аппаратное обеспечение могло обрабатывать не так много.

Вы вынуждены проявлять творческий подход, когда вам приходится работать в рамках ограничений. Сосредоточьтесь на том, чтобы максимально увеличить пространство крошечного спрайта. После этого вы можете повысить уровень до больших размеров, чтобы втиснуть туда еще больше деталей.

И если вы хотите поместить персонажа в сцену, вам также придется подумать о размере холста.

Хороший способ сделать это — рассмотреть соотношение между вашим спрайтом и остальной частью экрана. Насколько большим или маленьким должен быть ваш персонаж по сравнению с миром, в котором он находится?

Разработчикам игр стоит знать, что большинство мониторов в наши дни имеют соотношение сторон 16:9. Это означает, что на каждые 16 пикселей ширины приходится девять пикселей высоты.

Какое бы разрешение вы ни выбрали в конечном итоге, вы, как правило, будете работать с гораздо меньшим размером холста, а затем, когда закончите, масштабироваться до большего разрешения.

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

Допустим, вы хотели добиться стандартного разрешения 1080p. Вы можете работать на холсте 384 × 216, а затем увеличить масштаб на 500 процентов.

Масштабирование также должно быть последним, что вы делаете. Вы не хотите увеличивать масштаб вверх, а затем продолжать рисовать с помощью инструмента «Карандаш с одним пикселем». Это оставит вас с другим соотношением пикселей, что никогда не выглядит хорошо.

Процесс Спрайтинга

Итак, холст открыт — что теперь? Что ж, как и в любом другом виде искусства, возможности безграничны. Существует не только один способ сделать это.

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

1. Начните с чернового наброска

Начните свой спрайт, перетаскивая инструмент Карандаш , рисуя так же, как вы рисуете ручкой и бумагой. Это не должно быть идеально.

Какой бы беспорядок вы ни устроили, мы уберем его позже. Все, к чему мы стремимся на этом раннем этапе, — это воплотить вашу идею и ее композицию на холсте.

2. Очистите штриховой рисунок

Теперь пришло время сделать вещи более презентабельными. Мы возьмем ваши грубые линии и вырежем их, чтобы убрать ненужные пиксели.

Отдельные пиксели или группы пикселей, которые нарушают целостность линии, называются «неровностями». Зазубрины — это именно то, чего мы пытаемся избежать.

Часто проблема просто в том, что сегмент линии слишком длинный или слишком короткий, что создает неудобный прыжок. Вы хотите использовать одинаковую длину пикселей для плавного перехода на кривой. Не окружайте ряд пикселей более крупными.

Невозможно полностью избежать неровностей (если ваша работа не состоит только из основных фигур), но вы должны попытаться свести их к минимуму.

3. Внедрить цвета

Пришло время взять инструмент Bucket и заполнить штриховой рисунок вашего спрайта цветами.

Обычно вы хотите ограничиться цветовой палитрой. Раньше размер спрайта также часто определял количество цветов в палитре. Если спрайт был 16 × 16, это означало, что у художников было 16 цветов для работы. К счастью, с тех пор технологии продвинулись вперед, и мы больше не ограничены этим правилом.

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

Если вы хотите, чтобы кто-то другой думал за вас, Lospec — это отличная онлайн-база данных, полная готовых цветовых палитр.

4. Добавьте детали, блики и тени

Это лучшая часть всего процесса! Это когда ваше искусство действительно начинает прыгать со страницы. Теперь, когда у нас есть основная идея, мы можем добавить все мелочи, чтобы придать вашему плоскому рисунку иллюзию формы.

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

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

5. Сохраните свое искусство

Пришло время сохранить вашу работу! Масштабируйте до нужного размера, а затем выберите формат файла. В большинстве случаев вы захотите сохранить его в формате PNG, если ваше изображение статично.

Но если в вашем арте есть анимация, сохраните ее в формате GIF. Важно то, что оба формата поддерживают большие области сплошного цвета и прозрачности.

Держитесь подальше от файлов JPEG, если вы не знаете, что делаете. Это формат файла с потерями, предназначенный для цифровых фотографий и других изображений с плавными градиентами.

Pixel Art: легко научиться, сложно освоить

Пиксель-арт отличается от цифрового рисунка из-за ограничений, вызванных его сетчатой ​​природой.

При этом он использует многие из тех же принципов, поэтому живописцы и другие художники могут довольно быстро его освоить. С большим количеством практики любой может стать великим в пиксель-арте.

PIXEL ART TUTORIAL: ОСНОВЫ

Metal Slug 3 (Аркада). SNK, 2000.

Пиксель-арт, также известный как дот-арт в Японии — это форма цифрового искусства, в которой редактирование выполняется на уровне пикселей. В первую очередь это связано с графикой видеоигр 80-х и 90-х годов, когда коммерческие художники напрягали ограниченную память и низкие разрешения, чтобы создавать все более привлекательные визуальные эффекты. В наши дни он по-прежнему популярен в играх и как форма искусства сам по себе, несмотря на возможность реалистичной 3D-графики. Почему? Что ж, если отбросить ностальгию, создание ярких произведений искусства в таких жестких условиях остается увлекательной и полезной задачей. Точно так же, как мы восхищаемся тем, как несколько мазков тренированной рукой могут изобразить форму и вызвать эмоции, мы восхищаемся тем, как несколько пикселей могут сочетаться с тем же самым.

Входной барьер для пиксельной графики также относительно низок по сравнению с нарисованной или трехмерной графикой, что делает ее хорошим вариантом для независимых разработчиков игр, стремящихся воплотить свои идеи в жизнь. Но не заблуждайтесь, это никоим образом не означает, что с ним действительно легко ЗАКОНЧИТЬ игру. Я видел, как многие инди-разработчики запускают свою пиксель-арт-метроидванию, думая, что у них есть год, чтобы закончить, хотя на самом деле это больше похоже на шесть лет. Пиксель-арт на том уровне, на котором его хочет делать большинство людей, отнимает много времени, а способов его создания очень мало. По крайней мере, с 3D-моделью вы можете вращать ее, деформировать, перемещать ее конечности, копировать анимацию из одной модели в другую и т. д. Пиксельная графика высокого уровня почти всегда требует большого количества кропотливого размещения пикселей в каждом кадре.

После этого предупреждения немного о моем стиле: в основном я использую пиксельную графику для создания видеоигр, и именно из игр я черпаю большую часть своего вдохновения. В частности, я фанат Famicom/NES, 16-битных консолей и аркадных игр 90-х. В моих любимых играх той эпохи была пиксельная графика, которую я бы назвал красочной, смелой и чистой… но не настолько чистой, чтобы она была жесткой или минималистичной. Это стиль, который я смоделировал для себя, но вы можете легко применить идеи и методы, описанные в этом уроке, к чему-то совершенно другому. Изучайте разных художников и делайте пиксель-арт таким, каким вы хотите его видеть!

Основными инструментами, необходимыми для пиксельной графики, являются масштабирование и карандаш для размещения пикселей. Также полезны инструменты линии/формы, инструменты выбора/перемещения и ведро с краской для быстрой заливки. Существует множество бесплатных и платных вариантов программного обеспечения, в которых есть эти инструменты. Здесь я опишу некоторые из самых популярных (в том числе те, которые использую я).

Paint

Если вы работаете в Windows, встроенная программа для рисования представляет собой очень простую программу, но в ней есть все вышеперечисленные инструменты, необходимые для создания пиксельной графики.

Удивительно надежный редактор пиксельной графики, работающий в вашем браузере! Можно экспортировать в PNG или анимированный GIF, а также сохранять локально в браузере. Это кажется отличным стартовым вариантом.

GraphicsGale — первый автономный редактор, о котором я слышал, он был разработан только для пиксельной графики и содержит инструменты для анимации. Созданный японской компанией HUMANBALANCE, он стал бесплатным в 2017 году и до сих пор широко используется, несмотря на растущую популярность Aseprite. К сожалению, это только Windows.

Кажется, сейчас это самый популярный редактор. Полный набор функций, активно разрабатываемый и доступный для Windows, Mac и Linux. Кроме того, это открытый исходный код, и его можно использовать бесплатно, если он скомпилирован из исходного кода. Если вы серьезно относитесь к созданию пиксель-арта и у вас еще нет редактора, к которому вы привязаны, возможно, это то, что вам нужно.

GameMaker Studio 2 — отличный инструмент для создания игр, ориентированный на 2D, который включает в себя достойный редактор спрайтов. Если вы заинтересованы в создании пиксельной графики для своих игр, очень удобно делать все это в одном и том же программном обеспечении. Я сейчас (в 2019 г.), используя его для создания UFO 50, сборника из 50 ретро-игр. В основном я использую редактор спрайтов GameMaker для спрайтов и создаю наборы тайлов в Photoshop.

Поскольку Photoshop — это дорогое приложение на основе подписки, которое не предназначено для пиксельной графики, я не рекомендую его, если у вас уже нет его для рисования или обработки изображений. Он может выполнять работу для статических спрайтов и пиксельных иллюстраций (например, те, которые я сделал для этого урока), хотя он довольно громоздкий по сравнению с специализированными приложениями, такими как GraphicsGale или Aseprite..

Мои настройки пиксельной графики. Очень черный, теперь я замечаю…

Планшет для рисования +

Я настоятельно рекомендую планшет для рисования для любых видов цифровых работ, чтобы предотвратить повторяющиеся стрессовые травмы запястий. RSI гораздо легче предотвратить, чем исправить. Как только они начинают болеть, вы уже катитесь вниз (мои дни рисования мышью затрудняли игры, требующие нажатия кнопок). Так что начните заботиться о себе заранее – оно того стоит! В настоящее время я использую небольшой Wacom Intuos Pro.

Защита для запястья

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

Финальный бой (Аркада). Capcom, 1989 г. (Источник)

Начнем! В этом уроке мы начнем с создания спрайта персонажа размером 96×96 пикселей. Я решил создать орка, но вы можете выбрать что-нибудь другое! Я поместил своего готового орка на скриншот Final Fight выше, чтобы дать вам представление о масштабе — это большой спрайт для большинства ретро-игр (скриншот 384×224).

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

1. Выбор палитры

Пиксельное искусство определяется его ограничениями. Пиксель имеет гораздо большее значение в пиксель-арте, чем в других цифровых средах, и то же самое верно для цветов, которые вы в конечном итоге также хотите ограничить.

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

В этом уроке я буду использовать 32-цветную палитру, которую мы создали для UFO 50. 32 цвета — популярный выбор для пиксельных палитр, но 16 цветов также распространены. Эта конкретная палитра была разработана для вымышленной консоли, которая находилась бы где-то между Famicom и PC Engine. Вы можете использовать его свободно, чтобы быстро обойти этот шаг! (Или нет! Этот урок вообще не зависит от палитры.)

2. Грубый контур

Мы начнем наш спрайт, перетаскивая инструмент Карандаш, рисуя набросок так же, как мы рисуем его ручкой и бумагой. Пиксель-арт и традиционное искусство определенно пересекаются, особенно с такими крупными спрайтами, как этот. Из того, что я заметил, сильные художники по пикселям, по крайней мере, неплохо рисуют, и наоборот. Так что никогда не помешает улучшить свои навыки рисования.

3. Очистка контура

Далее мы собираемся очистить контур, удалив случайные пиксели и уменьшив толщину каждой линии до одного пикселя. Но какие именно пиксели мы удаляем? Чтобы ответить на этот вопрос, нам нужно узнать о пиксельных линиях и «неровностях».

Jaggies

Есть две основные линии, которые нам нужно научиться делать в пиксель-арте: прямые и изогнутые. С ручкой и бумагой это в основном проблема контроля мышц, но мы работаем с маленькими цветными блоками, что создает новый вид задач.

Ключом к созданию хороших пиксельных линий является уменьшение количества неровностей : одиночных пикселей или небольших сегментов пикселей, которые нарушают согласованность линии. Поскольку один пиксель в пиксельной графике оказывает большое влияние на общее изображение, неровности могут раздражать. Представьте, что вы рисуете прямую линию на листе бумаги, когда вдруг кто-то хлопает по столу — эта маленькая неконтролируемая закорючка — это то, на что может быть похожа неровность в пиксель-арте.

Давайте рассмотрим несколько примеров:

Прямые линии

Изогнутые линии

На изогнутых линиях неровности возникают, когда длина сегментов линии не увеличивается или не уменьшается согласованным образом.

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

4. Применение первых цветов

С помощью Paint Bucket или любого другого инструмента заливки раскрасьте своего персонажа! Палитра сделает эту часть проще, и если ваше программное обеспечение для рисования не поддерживает палитры, вы всегда можете вставить свою палитру в само изображение (как я сделал здесь) и выбрать цвета с помощью инструмента «Пипетка».

В левом нижнем углу я также представил знакомого друга, Мяча, чтобы дать быстрый взгляд на то, что происходит на каждом этапе.

5. Затенение

Пришло время тени! Основная идея заключается в том, что мы собираемся добавить к спрайту более темные цвета (называемые оттенков ) для имитации тени, тем самым сделав спрайт трехмерным, а не плоским. Для этого урока предположим, что над орком и немного перед ним есть один источник света, поэтому все сверху и/или спереди яркое. Мы добавим более темные цвета к нижней и задней части орка.

Форма и том

Если у вас возникли проблемы с этой частью, вам может понадобиться потренироваться думать о чертежах как о образует с объемом , а не просто линиями и цветом. Формы существуют в трехмерном пространстве и могут иметь объем, заполняющий это пространство. Затенением мы выделяем этот объем.

Это может помочь вам представить своего персонажа без всех его деталей и представить, что он сделан из глины, а не из пикселей. Затенением вы не просто добавляете цвет — вы создаете форму. Четко очерченный персонаж имеет детали, которые не затемняют основные формы — если прищуриться, все равно должно появиться несколько больших скоплений света и тьмы.

Сглаживание

Каждый раз, когда я добавляю новый оттенок цвета, я применяю сглаживание (также известное как AA ), которое позволяет сгладить блочные пиксели, помещая «между» цвета в углах, где встречаются два сегмента линии:

Серые пиксели смягчают «разрывы» в нашей линии. Чем длиннее отрезок линии, тем длиннее отрезок AA мы используем для его смягчения.

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

Будьте осторожны, не применяйте сглаживание к внешней стороне спрайта, используемого в игре, или в любом другом месте, где вы не знаете, какого цвета будет фон. Если, например, вы применяете сглаживание на светлом фоне, то это сглаживание будет выделяться на темном фоне.

6. Selective Outlining

До сих пор наш контур был чисто черным, что придает спрайту мультяшный вид. Это также создает много жесткой сегментации. Например, черные линии на руке экстремально определяют мускулатуру, делая их менее похожими на части одной и той же части тела.

Чтобы придать спрайту более натуралистичный вид и смягчить сегментацию (чтобы подчеркнуть основную форму нашего персонажа), мы можем использовать технику, называемую выборочное обведение или выделение . Selout означает замену большей части черного контура более светлыми цветами. Ближе кверху, где свет падает на наш спрайт, мы будем использовать самые светлые цвета или, где спрайт встречается с негативным пространством, мы можем полностью его удалить. Для сегментации (например, для мышц, текстуры меха и т. д.) мы можем использовать более темные цвета теней вместо чистого черного.

На этом шаге я также добавил еще один уровень еще более темной тени к орку. Итак, на коже нашего орка теперь три оттенка зеленого. Этот новый оттенок зеленого можно использовать для выделения и дальнейшего сглаживания.

7. Последние штрихи

В конце мы можем добавить блики (самые яркие пятна на нашем спрайте), детали (серьги, заклепки, шрамы) и продолжать вносить коррективы до тех пор, пока мы не будем довольны результатом (или нам понадобится вперед, как это часто бывает!)

Еще пара вещей, которые стоит попробовать на этом этапе: горизонтальное переворачивание изображения — мощный трюк в цифровой графике, который часто выявляет недостатки в пропорциях и оттенках. Еще один прием — удалить цвет с изображения (т. е. установить насыщенность до нуля), чтобы увидеть, хорошо ли читается ваше затенение.

Дизеринг

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

Вверху градиент , который движется от темного к светлому, используя сотни различных оттенков синего. В середине мы уменьшили количество цветов до 9., но это все равно много оттенков для одного цвета. Это также создало отвлекающий эффект, называемый полосатостью , когда из-за толстых однородных полос цвета наши глаза начинают фокусироваться на линиях, где встречаются цвета, а не на самих цветах.

Наконец, внизу мы применили дизеринг, который смягчает эффект полос и использует только 2 цвета! Идея состоит в том, чтобы создать шума различной плотности, чтобы имитировать градацию цвета. Это очень похоже на метод под названием «полутона», который используется в печати. Или «зернистость» в иллюстрациях и комиксах.

Я редко использую дизеринг — на орке я добавил совсем немного для текстуры. Некоторые пиксельные художники вообще не используют сглаживание. Некоторые используют его экстенсивно и заставляют его выглядеть довольно хорошо. В общем, я думаю, что это лучше всего работает на больших областях одного цвета (внимательно посмотрите на небо на скриншоте Metal Slug 3 сверху) или в местах, которые мы хотим выглядеть грубыми или ухабистыми (например, грязь). Если вам нравится, как это выглядит, поэкспериментируйте с ним и узнайте, как заставить его работать лучше всего для вас!

Если вы хотите увидеть широкое и качественное использование сглаживания, изучите игры Bitmap Brothers, британской игровой студии 80-х годов, или игры на PC-98, японском компьютере (обратите внимание, что многие игры для PC-98 являются NSFW):

Какюсей (PC-98). Эльф, 1996 год. (Источник) На этом изображении всего 16 цветов!

8. One Last Look

Одна из опасностей пиксельной графики заключается в том, что из-за ее ограниченной, сеткообразной природы легко почувствовать, что вы можете сделать это «в самый раз», и вы можете потратить чрезмерное количество времени на настройку ваших спрайтов в конце. В некотором смысле это похоже на головоломку, которую нужно решить, и это может вызвать сильную зависимость. В результате пиксельная графика имеет тенденцию привлекать перфекционистов, поэтому будьте осторожны, не задерживайтесь на одном спрайте слишком долго. В разработке игр один статичный спрайт — это всего лишь одна маленькая часть очень сложного расположения частей, и важно, так сказать, не упускать из виду более широкую картину.

Даже если вы не делаете пиксельную графику для игр, хорошо иметь возможность сказать: «Этого достаточно!» и двигаться дальше. Лучший способ улучшить свои навыки — увидеть весь процесс от начала до конца как можно больше раз, по как можно большему количеству разных тем. По крайней мере, оставив кусок на некоторое время, вы сможете взглянуть на него свежим взглядом!

Сначала мы создали большой спрайт 96×96, потому что при таком размере он по-прежнему похож на рисование и раскрашивание, но с пикселями. Чем меньше становится спрайт, тем меньше ваш спрайт похож на то, что он должен представлять, и тем больше ответственности несет каждый отдельный пиксель.

В Super Mario Bros. глаз Марио представляет собой всего два пикселя, наложенных друг на друга. Как и его ухо. А его создатель, Сигэру Миямото, объяснил, что причина, по которой у него есть усы, заключается в том, что они нужны им, чтобы отличить его нос от остального лица. Таким образом, одной из самых знаковых особенностей Марио был не только выбор дизайна персонажа, но и прагматичный выбор! Доказательство старой поговорки о том, что потребность — мать изобретения… и дает нам дополнительное понимание того, почему пиксельная графика так интересна.

Имея все это в виду, основные шаги, которые мы предпримем для создания спрайта 32×32, на самом деле очень похожи на спрайт 96×96: набросок, цвет, оттенок, а затем полировка. Однако для начального наброска я часто использую цветные фигуры вместо рисования контура, потому что при таком размере цвет играет большую роль в определении персонажа, чем контуры. Если мы снова посмотрим на Марио, у него вообще нет контура! И дело не только в его усах: бакенбарды определяют его уши, рукава определяют его руки, а его комбинезон более или менее делает все его тело понятным.

Создание маленьких спрайтов требует компромиссов. Если вы добавите контур вокруг чего-то, вы можете потерять комнату, чтобы затенить это. Если у вашего персонажа хорошо очерчены руки и ноги, голова, вероятно, должна быть меньше, чтобы освободить место для них. Однако, эффективно используя цвет, выделение и сглаживание, вы можете сделать свой холст больше, чем он есть на самом деле.

Для маленьких спрайтов я предпочитаю дизайн чиби (или супердеформированный ), где персонажи милые, с большими головами и глазами. Кажется, это отличный способ создать выразительных персонажей в ограниченном пространстве (это также привлекательный художественный стиль, несмотря ни на что). Но, возможно, вас больше интересует подвижность или грубая сила персонажа, и в этом случае вы можете меньше фокусироваться на голове в пользу более мощного тела. В конечном счете, это зависит от ваших предпочтений и вашего проекта!

Полный отряд в сборе!

Достаточно, чтобы по коже любого пиксельного художника побежали мурашки.

Вышеупомянутое — это то, что произойдет, если вы сохраните свое изображение в формате JPG , формате файла с потерями . Это означает, что данные фактически теряются при их сохранении из-за способа сжатия файла (для уменьшения размера файла). С практической точки зрения, ваш красивый, четкий пиксель-арт в конечном итоге будет выглядеть размытым, и вы не сможете легко вернуть его исходную палитру.

Рекомендуемый формат файла без потерь для статической пиксельной графики — PNG. Для анимации наиболее популярным форматом являются анимированные GIF-файлы.

Поделитесь своим пиксельным искусством в социальных сетях — это отличный способ получить отзывы и познакомиться с другими пиксельными художниками (не забудьте использовать хэштег #pixelart !). К сожалению, веб-сайты социальных сетей, как правило, конвертируют PNG в JPG без запроса, что запятнает вашу работу, когда она становится общедоступной. Кроме того, может быть трудно понять, что именно в вашем изображении вызвало конверсию!

Чтобы помочь, вот несколько советов о том, как сохранить четкость пиксельной графики на различных сайтах социальных сетей. Обратите внимание, что эти сайты часто меняют свои алгоритмы, и этот раздел не всегда может быть полностью обновлен.

Twitter

Ключом к сохранению целостности файлов PNG в Twitter является убедиться, что они содержат менее 256 цветов или менее 900 пикселей по самой длинной стороне. (Источник) Я бы также увеличил ваши изображения как минимум до 512×512 пикселей, убедившись, что вы увеличиваете масштаб до чистого множителя (например, 200%, а не 250%) и сохраняете резкие края (называемые «ближайшим соседом» в Photoshop).

Анимированные GIF-файлы должны быть меньше 15 МБ для публикации в Твиттере. Что касается качества, преобладающая теория заключается в том, что они должны быть не менее 800×800 пикселей, а циклическая анимация должна повторяться три раза, при этом последний кадр GIF отображается на половине длины каждого другого кадра.