Введение

В каждом деле важна последовательность. Практика всегда следует за теорией. Изучение пиксель-арта не исключение. Сегодняшний урок является некой теорией, готовящей вас, уважаемые любители пиксель-арта, к практической части. А никто  и не говорил, что будет легко =)

Начнем с понятия пиксель-арта. Что же это такое ?)

Пиксельная графика, или пиксель-арт (англ. Pixel Art) – особое направление цифрового изобразительного искусства, в котором изображение создается и редактируется на уровне пикселов.

Виды пиксельной графики

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

К особенностям пиксельной графики можно отнести:

• небольшой размер рисунка,
• ограниченное количество цветов,
• чёткий «мультяшный» контур,
• отсутствие сглаживания,
• ограниченные возможности масштабирования.

К каждой из этих особенностей следовало бы дописать «как правило»,  т.к. из каждого из них есть исключения.

Область применения пиксель-арта довольна обширна:

- Иконки, кнопки, баннеры, другие элементы оформления сайтов.

- Иллюстрации для сайтов.

- Иллюстрации для полиграфии.

- Графика для игр.

- а так же открытки, аватары, бегунки, линейки, смайлы, и т.д. и т.п.

Основные базовые навыки

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

• умение рисовать,
• понимание цвета, текстуры, формы,
• знание анатомии,
• знание законов перспективы,
• знание основ анимации.

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

Инструменты

Для создания пиксельных рисунков подходит практически любой графический редактор, предназначенный для работы с растровой графикой. Например, Adobe Photoshop, MS Paint, GIMP, Graphics Gale, Picture Editor и др.

Подготовка к работе

Настройки Photoshop

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

Параметры Photoshop при создании нового файла:

• Resolution: 72 pixel/inch;
• Color Mode: RGB Color;
• Background Contents: Transparent.

Настройки основных инструментов, используемых для пиксельных рисунков

• Карандаш (Pencil Tool) и ластик (Eraser Tool): Master Diameter: 1 px; Hardness: 100%; Opacity: 100%.
• Инструменты выделения (Marquee, Lasso, Magic Wand): функция сглаживания (Anti-aliasing) отключена, Tolerance: 0.
• Инструмент заливки (Paint Bucket): функция сглаживания (Anti-aliasing) отключена, Tolerance: 0.
• Инструменты рисования фигур (Shape): Fill Pixel, функция сглаживания (Anti-aliasing) отключена.

Идея и Техническое Задание

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

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

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

Шарики бывают разные. Кубики, впрочем, тоже. Разные по цвету, размеру, физическим свойствам и т.д. Значит так, пусть шарик будет упругий, а кубик жесткий… Нет, пусть лучше наоборот… Нет, лучше пусть будет два разных шарика и два кубика… Нет, лучше три… Нет, четыре… Стоп!

Мы видим, что очень важно иметь четкое техническое задание (ТЗ). Даже если вы рисуете для себя. В этом случае,конечно,  нет необходимости фиксировать ТЗ на бумаге или оформлять его в виде электронного документа, достаточно просто сформулировать его мысленно, продумать все детали, этапы работы. Прекрасно, если удастся «увидеть» конечный результат.

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

Для того чтобы достичь этой цели, создадим несколько изображений (скажем, четыре), по два предмета с разными свойствами на каждом: жесткий легкий шар и жесткий куб; упругий шар и жесткая шестигранная призма; жесткий тяжелый шар и упругий цилиндр; упругий шар и упругий предмет сложной формы. Каждое изображение должно быть циклично анимированным (рис.1)

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

что должно получиться (рис.1):

Предметы, их форма, свойства, текстура и цвет.

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

1)      жесткий легкий шар и жесткий куб – шарик для пинг-понга, белый, гладкий, и кирпич, терракотовый, с отверстиями и ребрами жесткости;
2)      упругий шар и жесткая шестигранная призма – синий резиновый мяч и кусок мрамора, светлый, со сколами, царапинами и прожилками;
3)      жесткий тяжелый шар и упругий цилиндр – металлический шарик, гладкий и блестящий, и отрезок резины, темно-розового цвета, пористый, шероховатый;
4)      упругий шар и упругий предмет сложной формы – смайл желтого цвета, с глазами, ртом и руками, и пуфик, облезло-голубой, плюшевый, на деревянной основе и металлических ножках.. =)

Размеры.

1)      Шарик – 16×16 px (ширина 16 пикселов, высота 16 пикселов).
2)      Предмет, на котором прыгает шарик – ширина до 32 px, высота произвольная (в разумных пределах, чтобы все выглядело соразмерным).
3)      Анимация – ширина соответствует ширине предмета, высота до 96 px.

Проекция. Изометрическая.

Количество цветов в палитре. 15-20 цветов на один объект.

Этапы выполнения проекта.

1)      Контуры.
2)      Анимация.
3)      Цвет.

Использование референсов

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

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

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

На этой позитивной ноте наш теоретический вводный урок подошел к концу. Хватит с нас разговоров, хотим творить! =)