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

Этот раздел предназначен для публикации уроков Paint.NET. В этом же разделе можно высказать замечания и пожелания к урокам, опубликованным на сайте paint-net.ru
Аватара пользователя
xmario
Администратор
Сообщения: 3384
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 32
Пол: Мужской
Откуда: Москва

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

Сообщение xmario » 29 май 2010, 18:03

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

Введение

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

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

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

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

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

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

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

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

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

Изображение

Изображение

Изображение

Изображение

Аватара пользователя
xmario
Администратор
Сообщения: 3384
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 32
Пол: Мужской
Откуда: Москва

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

Сообщение xmario » 29 май 2010, 18:08

Часть №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-ти градусам углами.

Аватара пользователя
xmario
Администратор
Сообщения: 3384
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 32
Пол: Мужской
Откуда: Москва

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

Сообщение xmario » 30 май 2010, 01:44

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

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

Изображение

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

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

Изображение

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

Изображение

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

Изображение

Аватара пользователя
xmario
Администратор
Сообщения: 3384
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 32
Пол: Мужской
Откуда: Москва

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

Сообщение xmario » 30 май 2010, 02:11

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

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

Изображение

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

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

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

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

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

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

Аватара пользователя
xmario
Администратор
Сообщения: 3384
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 32
Пол: Мужской
Откуда: Москва

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

Сообщение xmario » 30 май 2010, 02:37

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

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

Изображение

Аватара пользователя
xmario
Администратор
Сообщения: 3384
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 32
Пол: Мужской
Откуда: Москва

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

Сообщение xmario » 30 май 2010, 02:38

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

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

Изображение

Аватара пользователя
Lynx
Сообщения: 5678
Зарегистрирован: 04 май 2010, 21:44
Репутация: 28
Пол: Женский
Откуда: г. Сочи

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

Сообщение Lynx » 30 май 2010, 02:55

Я только одно поняла из этого урока. Это нарисовать кубик , а потом из кубика строить домики ?
"Чтобы уметь рисовать - надо рисовать" John Howe

Аватара пользователя
xmario
Администратор
Сообщения: 3384
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 32
Пол: Мужской
Откуда: Москва

Эффект для рисования в paint.net в стиле пиксель-арт

Сообщение xmario » 30 май 2010, 13:06

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

Но у нас же есть paint.net :-D Конечная идея была в создании плагина "Пиксель-арт для paint.net". Но, во-первых, плагин вряд ли сможет правильно построить линии, так что потребуется ручная корректировка. А, во вторых, прежде, чем пользоваться эффектом, нужно же знать, как это делается руками... ;-) Для того и уроки.

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

После установки эффект paint.net Пиксель-арт будет доступен в меню "Эффекты" - "Художественные"

Принцип действия эффекта paint.net Пиксель-арт можно увидеть, например, на следующем рисунке.

Изображение

После применения эффекта

Изображение

Увеличенный кусочек крыши дома, после применения эффекта.

Изображение
Вложения
xmario_pixelart.zip
Эффект для рисования в paint.net в стиле пиксель-арт
(4.8 КБ) 1476 скачиваний

VldPixel
Сообщения: 1
Зарегистрирован: 28 июн 2012, 14:26
Репутация: 0
Пол: Мужской

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

Сообщение VldPixel » 28 июн 2012, 14:30

надо добавить что разделяется она два вида изометрическую и простую и пример тогда уж желательный для изометрического куба в Части №2

Аватара пользователя
xmario
Администратор
Сообщения: 3384
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 32
Пол: Мужской
Откуда: Москва

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

Сообщение xmario » 30 июн 2012, 20:32

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

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

Изображение

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

Изображение

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

Изображение

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

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

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

Изображение

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

Изображение

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

Изображение

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

Изображение

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

Ответить

Вернуться в «Уроки Paint.net»

Кто сейчас на конференции

Сейчас этот форум просматривают: Majestic-12 [Bot] и 7 гостей