Пиксельная графика, или пиксель-арт (англ. 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-модели, анимационные ролики и т.д. Особенно это бывает необходимо в том случае, если не хватает знаний о предмете, который предстоит нарисовать, а также при формировании рабочей палитры цветов будущего пиксельного рисунка, для предварительного расчета тайминга анимации, наконец, просто для того, чтобы набраться вдохновения. =)
В нашем случае, несмотря на то, что задача относительно простая, было бы целесообразно, например, посмотреть фотографии кирпичей, кусков мрамора и резины, предметов мягкой мебели, посмотреть ролики с анимацией предметов, обладающих разной массой и упругостью и т.д. Кроме того, всегда полезно посмотреть на работы мастеров пиксел-арта.
Следует напомнить о недопустимости прямого использования, в т.ч. редактирования, чужих работ. У каждой работы есть автор и никто не отменял авторские права.
