Интересный стиль рисовки.

Совсем недавно проходил "The Humble Indie Bundle", я решил помочь разработчикам заплатив 5$ (почти во все эти игры я уже поиграл). В тот же день поиграл в незнакомые игры. Больше всех мне понравилась Revenge of the Titans. Через пару часов, понял что мне очень нравится стиль рисовки персонажей в игре. Их простота, гротескность, комичность… Решил попробовать нарисовать что нибудь подобное. Это не урок, это просто заметка о стиле. Сразу скажу, что конкретно такая графика у меня не получится, ибо я не буду использовать градиенты в раскраске. Но что-то похожее будет :). Для рисования в этом стиле, планшета не требуется.
Работа будет происходить в двух редакторах, растровом, и векторном. Сама работа разбивается на три этапа. Первый — изучение материалов. Второй — рисование силуэта. Третий — покраска.
Первый этап.
Один мой знакомый художник, сказал, что самое важное в умении художника, это наблюдательность. Открываем растровый редактор, и вставляем скриншот понравившегося персонажа из игры (всего их три: ученый, генерал и робот). Лучше всего рассмотреть всех трех, в статье я буду рассматривать только одного — ученого.

В рисунке, меня интересовали только пропорции, и типы линий. В целом, весь этап описан на картинке. Еще стоит обратить внимание на руки, ноги, ушки, глаза, рот, пуговицы, то как они нарисованы. Особых тонкостей в них нет, просто нужно взять на заметку, как их нарисовали. Также, обращу внимание, что кроме угла в 45 градусов, других углов нет! Это важное правило. Иногда от него можно отойти, но если вы посмотрите на свою картинку, и не поймете что в ней неправильно, проверьте углы.
Второй этап.
Открываем FlashIDE. И настраиваем ее для нашей работы. Первым делом, меняем фон на тот который нам больше всего нравится. Затем настраиваем размер и цвет сетки.

Размер сетки должен быть минимальным, и хорошо делиться и умножаться на два. Я выбрал 4x4 (когда рисовал в первый раз, выбрал 10х10, а потом сильно жалел об этом, рисуя линии на полпикселя), потому что меньше можно взять еще меньше при необходимости — 2х2, а больше сколь угодно много цифр кратных двум. Обратим внимание на первый этап, на картинке указаны пропорции 1,1/4,1/8. Соответственно, 4 * 4 = 16 — это 1, а 2х2 — это 1/8 — если я не забыл арифметику. Можно принять что 4х4 — это 1/8. Как вам удобно.
Теперь вставляем картинку нашего прототипа, обрезаем края, чтобы не мешали, подгоняем единичную диагональ под наши клетки, создаем новый слой (прошлый можно заблокировать) и начинаем рисовать. Можно нарисовать точную копию, а можно кого-то подобного. В уроке я буду рисовать приблизительную копию.
Я начал рисовать с головы. Вообще, на мой взгляд нужно рисовать от большего к меньшему, ибо с меньшим больше проблем. Взяв за единичный угол 4 клетки, я с помощью сгруппированного квадрата диагонали измерил параметры некоторые персонажа (результаты весьма приблизительные).

Высота головы — 8, ширина головы — 5. Теперь, нарисовав контур головы, можно рисовать тело, ушки и руки. И тут становится ясно, что иногда, единичный отрезок бывает меньше чем должен быть. Обратите внимание на места помеченные желтым. Руки имеют диагональ квадратика в 12px, уши немного недовытарчивают из-за плеч… Ну что же, я не ставил себе целью сделать точную копию персонажа, поэтому не буду сильно мудрить с размерами :), главное, что они ни меньше самой маленькой пропорции (которая и была единицей клетки). Заканчиваем с обводкой всех форм, и заливаем какими нибудь цветами, примерно такими же областями как и на исходной картинке, цвета можно забирать пипеткой.
Третий этап.
На мой взгляд, это самый сложный этап. Я не собираюсь рисовать градиенты, у меня с ними не заладилось :). Принцип простой, выбираем все элементы по цвету и делаем из них группы, при чем уши делаем отдельно от самой головы, т.к. они различаются по цвету. После того, как цвета поместились в группы, удаляем всю обводку. Каждую руку, зеркалим по вертикали, получается полная рука, устанавливаем точку поворота куда следует и настраиваем наложение. Голову на фотке можно просто скопировать с персонажа и уменьшить. Голову рассекаем линией света, так чтобы казалось будто бы она объемная. Половину красим светлым, вторую темной кожей. Левое ухо светлее чем темная, правая такое же как и светлая половина.
В итоге получаем вот такого Ученого, и его неосвещенных друзей, Доктора Свобчелова, и Деда Механика:

UPD:
Градиент накладывается так, делается копия элемента (группа), на который мы собираемся накладывать градиент, в ней мы удаляем все цвета, и заливается монотонным градиентом с прозрачностью от 0 до 100. В некоторых случаях можно использовать градиент из темного и светлого цвета, как это сделано на голове, или просто черный цвет с прозрачностью от 0% до 50%, как в других случаях. Направление градиента везде одинаковое(от светлого к темному, сверху вниз), кроме трех мест. На голове слева направо на светлой части головы, на ногах от темного к светлому сверху вниз, и добавляется еще один слой прямоугольник на подбородок(от светлого к темному сверху вниз). Самый сложный градиент это тень от бейджа, ее я сделал фильтром. Вот результат: