Как рисовать в paint.net в стиле пиксель-арт

Введение

Для начала разберемся, что такое пиксел-арт. Согласно Википедии:

Пиксельная графика (или пиксел-арт, от английского pixel art) — форма цифровой живописи, созданной на компьютере с помощью растрового графического редактора, где изображение редактируется на уровне пикселей. На старых (или на неполнофункциональных) компьютерах, в играх для Game Boy, играх для старых игровых приставок и многих играх для мобильных телефонов в основном используется пиксельная графика.

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

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

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

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

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

Основные инструменты для пиксель-арта в Paint.NET

При использовании Paint.NET для целей пиксель-арта, нашим основным оружием будут инструмент paint.net карандаш и инструмент paint.net заливка. Так же нам понадобится инструмент paint.net волшебная палочка.

Естественно мы будем использовать и другие инструменты, например, инструмент paint.net пипетка для определения цвета и другие инструменты.

Примеры работ в стиле пиксель-арт

Часть №1. Как рисовать линии в пиксель-арт в paint.net

Как правильно рисовать линии в стиле пиксель-арт в paint.net

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



Изогнутые линии в пиксель-арте. Для создания кривизны убедитесь, что кусочки линии, отвечающие за изгибы и наклоны, последовательно уменьшаются. В этом примере кривая линия сделана за счет смещения и уменьшения 6 > 3 > 2 > 1 – рисунок слева. На рисунке справа есть ступенька 3 > 1< 3, она выделена красным.



Как сглаживать линии в стиле пиксель-арт в paint.net

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



Сглаживание окружностей в стиле пиксель-арт.



Сглаживание окончаний линий в стиле пиксель-арт.



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

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

Часть №2 Как нарисовать куб в стиле пиксель-арт в paint.net

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



Естественно имея в руках такой инструмент как paint.net, мы не рисовали куб по пикселям, а использовали возможность рисования прямых линий с помощью инструмента paint.net линия, а кривые линии нарисовали с помощью инструмента paint.net карандаш. Но нарисовали карандашом не всю линию, а только несколько звений. Благодаря возможности использования слоев в paint.net, мы нарисовали вертикальные линии на одном слое, а диагональные линии на другом. Зачем? Это дает нам возможность изменять размер куба и вообще перемещать линии друг относительно друга, если вдруг нам что-то не понравилось.

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



Было бы правильным использовать для создания акцента на освещенных гранях куба более яркие цвета, это – второй цвет из нашей цветовой палитры. Для перекрашивания ярких граней куба используем инструмента paint.net «замена цвета».



При определенном желании и терпении с помощью кубиков можно сделать вот такие изображения в стиле пиксель-арт.

Часть 3 Как применив полученные здания, нарисовать дом в стиле пиксель-арт

Этот урок позаимствован с иностранного сайта, оригинал этого урока можно найти здесь.



1. Используя приведенную выше технологию рисования куба, нарисуем прямоугольную «коробку» для будущего здания.

2. На этом слайде показано, как можно нарисовать по отдельности окна и двери для здания. Естественно, что используя paint.net и его возможность работы со слоями, мы можем создать одно окно и одну дверь, а потом скопировать его столько раз, сколько нам нужно.

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

4. Добавите теперь карнизы и сделайте крышу. Технология их рисования ничем не отличается от рисования куба и линий в стиле пиксель-арт.

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

6. Осталось добавить блики на стеклах в окнах. Как это сделано, можно увидеть на этом слайде.

Как нарисовать лицо в стиле пиксель-арт в paint.net

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

Как нарисовать сказочный домик в стиле пиксель-арт в paint.net

Этот урок так же позаимствован с иностранного сайта, оригинал этого урока можно найти здесь. Переводить в этом уроке снова нечего, поэтому урок размещен как есть.

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

Объекты нарисованные в стиле пиксель-арт в изометрии имеют в своей основе вот такую ромбовидную сетку.



Традиционная изометрия основана на линиях, проходящих под углом 30 градусов. Однако особенности компьютерной графики и мониторов таковы, что настоящая тридцатиградусная линия с точки зрения пикселов неравномерная, "грязная" и нелогичная. Поэтому для рисования изометрии в пиксель-арте вместо нее используется линия под углом 26,565 градусов.



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



Два способа рисования углов в изометрии

Существуют два способа рисования углов для изометрических фигур, например, для куба.

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



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



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



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



Хороший сайт с уроками пиксель-арта, но на английском языке.