Урок пиксельной графики. Теория.

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

Урок пиксельной графики.

Теория.


Введение

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

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

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

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

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

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

Вы всё ещё хотите продолжать изучение пиксел-арта? =) Тогда, вперед!


За подготовку урока выражаю благодарность Елене Кулагиной

Любое копирование материалов урока  без разрешения автора запрещено.

sprosonok.ru

Related Posts with Thumbnails

6 Cupcakes to “Урок пиксельной графики. Теория.”

  1. BANO47 Says:

    Сайт супер!!!!! С удовольствием читаю!!!!

  2. Гостевой пост, приглашение в блог - Журнал о Flash и веб-дизайне Says:

    [...] Не изометрическая или как принято говорить плоско-пиксельная графика. Эффективно при рисовании персонажей или зданий. При этом соблюдается техника рисования – вид сбоку или же спереди. Немного теории о пиксель-арте можно найти в этом уроке [...]

  3. Евгений Says:

    Я решил в плотную заняться этой разработкой , в направлении пиксельных рисунков .. Особенно таких как эти )).. Они словно живые ))

  4. Vestrond Says:

    http://yadi.sk/d/X-4eyQuG76vs4
    http://yadi.sk/d/NN_K9YeR76vsK
    http://yadi.sk/d/4FUf7KTS76vsi
    http://yadi.sk/d/cF3PkRGL76vsq

    Решил немного изменить цвета, дабы поэксперементировать. Первые работы)

    Кто может толково окритиковать и дать пару советов, глядя на это?

  5. iney Says:

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

  6. Sergey_Kostik Says:

    2Vestrond:
    думаю хорошая попытка) для условного мира пикселарта не сильно нужно вдаваться в реализм. но какие-то веши из классической анимации будут только в плюс, т.е. быстрое движение шаров (между нижней и верхней точкой) можно изобразить более размазанным шаром (эффект motion blur – но только в пикселях).
    Также если владеешь flash – попробуй импортнуть эту анимацию туда, и наложить звук, сильно оживит общую картину.
    Ждем дальнейших работ!

Leave a Cupcake