Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Креатив » Создание в фотошопе анимированного пиксельного спрайта. Часть I.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.

Автор: sondar | Категория: Уроки Photoshop » Креатив | 11-02-2016, 19:19
Описание урока
Сложность: для начинающих
Продолжительность: средняя

Создание в фотошопе анимированного пиксельного спрайта. Часть I.

(то, что мы будем создавать)

Вы никогда не задумывались над созданием видеоигры в ретро-стиле? Или же вам не приходилось принимать участие в разработке графики для такой игры? Представляю вам урок по фотошопу, описывающий создание “спрайта” – анимированного пиксельного персонажа.

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

1. Дизайн персонажа

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

Шаг 1
Это не обязательный шаг, особенно, если вы намерены в точности повторить данный урок. Это просто один из этапов моего собственного рабочего процесса – создание наброска персонажа.

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

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 2
Чтобы преобразовать кролика в пиксели, я приступил к работе непосредственно в фотошопе, и нарисовал глаза. Созданный ранее набросок, на самом деле, был нужен только для того, чтобы определиться со стилем.

Если прежде вам никогда не приходилось создавать пиксельные иллюстрации, то начините с создания нового файла. Не делайте его слишком большим: документа размером 400х400 пикселей будет вполне достаточно. В процессе работы вам очень часто придется работать при большом приближении (zoom-е) – порядка 700%. Поэтому я советую вам открыть во втором окне этот же файл с зумом 100-200%. Так вы сможете, переключаясь между окнами, отслеживать вносимые изменения, не настраивая больше приближение.

Я не намерен выдерживать какие-либо заранее определенные размеры спрайта, и постараюсь сделать его настолько мелким, насколько позволят составляющие его основные элементы, так, чтобы они оставались различимыми. Именно поэтому глаза – это идеальная отправная точка.

Глазки мы образуем при помощи двух, расположенных рядом, вертикальных параллельных линий. Каждая линия – 3 пикселя в высоту и 1 – в ширину. Цвет – близкий к черному.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 3
Закончив с глазами, можно переходить к другим деталям, таким как мордочка, например. Это ничего, что на данный момент линии простые и прямые.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 4
А здесь уже можно смягчить некоторые линии. Так же заметьте, что я добавил зубы в передней части мордочки. Все кролики имеют характерные длинные передние резцы.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 5
Растянем рот в улыбке:

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 6
Пририсуем уши. Изначально они были устремлены строго вверх. Их можно было бы оставить в таком положении, но мне показалось, что лучше, все-таки, согнуть.

Уши нужно сделать настолько узкими, насколько это возможно. В моем случае их ширина: один пиксель внутренней поверхности, и по одному пикселю – контурные внешние линии.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 7
Здесь одно ухо сложено и направлено вниз.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 8
Дальнее ухо сложено точно таким же образом.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 9
Чтобы закончить работу над головой, мы добавим характерные для кроликов, увеличенные щеки.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 10
Теперь можно заняться телом кролика. Мы сделаем его антропоморфным, то есть похожим на человеческое. Торсу придадим каплевидную форму.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 11
Пририсуем нашему кролику короткие ноги и длинные ступни. Для начала можно нарисовать одну ногу.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 12
Дальняя от нас нога – точно такая же как и ближняя. С той только разницей, что она слегка смещена в сторону (иначе она полностью оказалась бы скрыта ближней).

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


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

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 14
В положении покоя, когда кролик просто стоит, нам будет видима только одна его рука. Руке мы так же придадим каплевидную форму.

Она скроет часть туловища.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


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

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Вот так у нас получился базовый контур кролика.

2. Окрашивание кролика

Далее мы займемся тем, что преобразуем этот контур персонажа в законченный статический спрайт.

Шаг 1
Выбор цвета.

Какого цвета вы хотите, чтобы был ваш кролик? Я выбрал светло-коричневый цвет и залил им подготовленный контур, за исключением области носа. Для этой цели лучше всего использовать инструмент Заливка (Paint Bucket Tool (G)).

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 2
Давайте нарисуем нашему кролику симпатичное белое брюшко. Такими же белыми пикселями можно обозначить и передние резцы. На носик можно наложить пару розовых пикселей, но большая его часть должна остаться белой, имитируя отсвет.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 3
Немного затеним нашего кролика. Наложим чуть более темный оттенок основного цвета меха на те участки, на которые попадает меньше света. Такое тонирование может помочь сделать щеку более текстурной, если наложить тень в виде некоторого узора.

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

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 4
Переходим к затенению брюшка. Я использовал здесь светло серый цвет, с легким оттенком синего.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 5
Вид некоторых элементов можно улучшить за счет уменьшения контрастности. Так, например, я заменил некоторые почти черные внутренние пиксели на темно-коричневые. Обратите внимание на область мордочки и шеи.

Так же, этим темно-коричневым цветом я добавил некоторые детали на щеку, сделав ее более привлекательной.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Наконец, наш персонаж, в его исходной стойке, готов.

3. Рисование кадров бега

Теперь сделаем нашего кролика двигающимся. Создадим циклическую анимацию бега.

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

Шаг 1
Давайте временно скроем конечности.

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

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

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 2
Наклоним туловище вперед. Для этого нужно выделить голову и область пониже шеи при помощи инструмента Прямоугольная область (Rectangular Marquee Tool), и сместить это все на один пиксель вправо (однократным нажатием клавиши с соответствующей стрелкой при активном инструменте Перемещение (Move Tool)).

В конце концов, я сместил голову на 2 пикселя.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 3
В результате наших последних манипуляций торс кролика наклонился не совсем корректно, то есть фактически он просто удлинился. Поэтому, чтобы сохранить пропорции, его нужно сократить на 1 пиксель и подчистить линии.

Так же нужно сместить торс на один пиксель вниз, так как ноги будут сгибаться и разгибаться в течение цикла бега, и торс, при этом, не может быть зафиксирован по высоте.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 4
Что касается ног, то нам достаточно проработать движение только одной из них. Вторая будет двигаться совершенно аналогично.
Движение ноги чем-то напоминает движение маятника: она будет изогнута почти весь цикл, за исключением момента, когда полностью выпрямится, будучи вынесенной вперед (первый кадр на рисунке ниже).

Итак, перед вами шесть кадров движения ноги (ради интереса, можете поискать в интернете какой-нибудь другой набор кадров с бегом). Обратите внимание изменения положения ступни. Для большей наглядности и контраста здесь использован особенно яркий цвет.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 5
Проработаем все шесть кадров для каждой из сторон (ближней и дальней от нас) по отдельности.
Ниже кадры с различными положениями наго наложены поверх кадров с телом кролика. Это лучше сделать на отдельном слое.
Обратите внимание, что нога вовсе не зафиксирована намертво в ее верхней точке. При перемещении назад, она смещается ближе к спине, а при движении вперед – точка соприкосновения с нижней частью туловища смещается, так же, вперед.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


Шаг 6
Ниже представлен быстрый способ преобразовать наши, созданные ранее, вспомогательные линии в полноценные ноги (задние лапы кролика). Для начала измените этот яркий цвет на цвет меха. Для этого можно воспользоваться инструментом Заливка (Paint Bucket Tool (G)), отключив опцию Смежные пиксели (contiguous ) на панели опций в верхней части окна программы. Далее, вместо того, чтобы прорисовывать контуры ноги, выделите пустую область вокруг нее при помощи инструмента Волшебная палочка (Magic Wand Tool) и пройдите в меню Выделение > Модификация > Сжать (Select > Modify > Contract…). Задайте величину сжатия выделенной области: 1 пиксель. Теперь инвертируйте выделенную область: Выделение > Инвертировать (Select > Inverse). Наконец, залейте созданную выделенную область цветом контура, воспользовавшись для этого инструментом Заливка (Paint Bucket Tool (G)), при неактивной опции Смежные пиксели.

Создание в фотошопе анимированного пиксельного спрайта. Часть I.


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

Другие новости по теме:


Просмотров: 3360 | Напечатать | Комментарии (0)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Легкое тонирование при помощи режимов наложения
Легкое тонирование при помощи режимов наложения


Хотите поближе познакомиться с магией тонирования? Методов и техник тонирования существует великое множество, но сегодня я познакомлю вас с такой техникой, которая, за счет использования режимов наложения слоев, максимально упрощает весь процесс.

Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Мы в соц сетях

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.