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

Пройдите этот урок, в котором я научу вас созданию милого кролика с зацикленной анимацией бега.

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

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

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

Шаг 1

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

Я нарисовал несколько набросков головы и выбрал наиболее подходящий по стилю.

Шаг 2

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

Если вы никогда не занимались пиксель-артом, то создаем новый файл не очень большого размера, например, 400 х 400 пикселей. Мы много будем работать с увеличением масштаба (до 700%) и использовать инструмент Pencil Tool (P) (Карандаш) для рисования отдельных пикселей. Я советую вам открыть дополнительное окно с рабочим документом, в котором масштаб будет 100-200%, чтобы вы могли сразу в реальном размере видеть свою работу без необходимости на одном документе туда-сюда переключаться с большого масштаба на маленький. Таким образом, у вас будет открыто два документа: на одном масштаб до 700% (рабочий), а на другом - 100-200%.

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

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

Шаг 3

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

Шаг 4

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

Шаг 5

Дорисовываем пару пикселей, чтобы создать улыбку.

Шаг 6

Уши нарисованы максимально узкими с внутренней частью шириной 1 пиксель и таким же контуром.

Шаг 7

Одно ухо рисуем свисающим вниз.

Шаг 8

Рисуем второе ухо.

Шаг 9

Рисуем большие пухлые щеки и заканчиваем голову.

Шаг 10

Теперь мы можем нарисовать тело. У кролика будет человекоподобная фигура. Рисуем туловище в форме капли.

Шаг 11

Ноги кролика будут короткими с большой стопой. Пока рисуем только одну ногу.

Шаг 12

Рисуем вторую ногу, но сдвигаем ее слегка вправо, чтобы она не перекрывалась первой.

Шаг 13

Ноги выглядят слегка смещенными, поэтому я передвинул их на один пиксель левее. Также я объединил ногу с животом, удалив пиксель между ними.

Шаг 14

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

Шаг 15

Удаляем лишние линии на руке.

Базовый контур нашего персонажа готов.

2. Цвет

На данном этапе мы превратим персонажа в законченный статичный спрайт.

Шаг 1

Выбираем цвет.

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

Шаг 2

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

Шаг 3

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

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

Шаг 4

Шаг 5

Некоторые детали персонажа будут выглядеть лучше с меньшей контрастностью, поэтому я закрасил некоторые области черного контура темно-коричневым (например, шея и мордочка).

Персонаж в положении стоя готов.

3. Рисуем кадры бега

Теперь мы можем добавить кролику немного движения.

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

Шаг 1

Давайте пока уберем конечности.

Голова и туловище не будут сильно меняться во время бега, поэтому на всех кадрах эти элементы будут находиться в одном положении.

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

Шаг 2

Берем Rectangular Marquee Tool (M) (Прямоугольное выделение), выделяем голову и верхнюю часть туловища и сдвигаем выделенную область на один пиксель (для этого активируем инструмент Move Tool (V) (Перемещение) и используем клавиши со стрелками).

Затем передвигаем голову на два пикселя правее.

Шаг 3

В предыдущем шаге туловище получилось немного растянутым. Чтобы это исправить, сожмем его по вертикали на 1 пиксель и отредактируем контур и заливку.

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

Шаг 4

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

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

Таким образом, у анимации движения ног будет 6 кадров (советую вам изучить готовые раскадровки анимации бега). Обратите внимание на положение стопы. Для наглядности я нарисовал ноги синим цветом.

Шаг 5

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

Шаг 6

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

Шаг 7

Ноги еще не закончены, но давайте добавим на некоторых кадрах положение в прыжке.

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

Кадры с прыжком отмечены ниже фиолетовыми линиями. Для других линий уменьшаем непрозрачность (Opacity) до 20%, это будет тень. В играх-платформерах такая тень не всегда нужна, но в нашем случае она сделает анимацию интереснее.

Шаг 8

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

Оставшиеся две фиолетовые линии закрашиваем черным и также уменьшаем непрозрачность до 20%.

Шаг 9

Закончив с ногами, копируем их и перемещаем копии на несколько пикселей вправо.

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

Шаг 10

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

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

Слои с копиями должны находиться под слоем с туловищем кролика.

Шаг 11

Чтобы закончить ноги на заднем плане, закрашиваем их более темным оттенком базового цвета, как мы делали на статичном рисунке выше.

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

В исходном уроке анимация

Шаг 12

Теперь пора добавить руки.

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

Шаг 13

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

Шаг 14

Добавляем объем.

Шаг 15

И, наконец, затеняем, чтобы добавить больше объема.

Шаг 16

Шаг 17

Затеняем копии рук и меняем их местами, чтобы обе руки были направлены в противоположные стороны.

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

Вот так выглядит анимация рук.

В исходном уроке анимация

Шаг 18

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

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

Шаг 19

На следующем после прыжка кадре уши менее изогнуты и направлены вперед.

Шаг 20

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

Вот так выглядит готовый вариант.

В исходном уроке анимация

Шаг 21

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

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

Шаг 22

В статичном положении необязательно рисовать хвост, так как он может быть скрыт за туловищем. Но в анимации бега лучше не игнорировать этот элемент.

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

Шаг 23

Заполняем хвост цветом, наносим тени и обводку.

Шаг 24

На первом кадре, когда передняя рука отводится назад, кончик хвоста перекрывается.

Шаг 25

Чтобы закончить хвост, перемещаем слой на задний план и при необходимости корректируем тени/детали.

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

В исходном уроке анимация

4. Создаем анимацию

У нас есть 6 кадров с зацикленной анимацией бега. Теперь нам осталось склеить их вместе.

Шаг 1

Копируем все кадры на новый файл.

Вам нужно копировать по одному кадру в правильной последовательности (слева направо). Чтобы скопировать все слои одновременно, вам нужно перейти в меню Edit - Copy Merged (Редактирование - Скопировать совмещенные данные). Перед копированием убедитесь, что фон прозрачный и не залит цветом.

Размер нового файла должен быть чуть больше кролика.

Вставив кадры, размещаем их в правильном положении. Нижняя линия остается без изменений на всех кадрах, как и нос, кроме двух кадров, где кролик подпрыгивает на 1 пиксель.

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

Шаг 2

Чтобы начать создавать анимацию в Фотошоп, нам нужно открыть временную шкалу Window - Timeline (Окно - Шкала времени). На шкале находится кнопка Create Frame Animation (Создать покадровую анимацию). Вместо нее может быть кнопка Create Video Timeline (Создать временную шкалу для видео), чтобы переключиться на анимацию, нажмите кнопку в виде стрелки и в появившемся выпадающем меню выберите нужный режим.

Шаг 3

Нажимаем кнопку Create Frame Animation (Создать покадровую анимацию), затем кликаем по кнопке вызова параметров в правом верхнем углу шкалы…

…и выбираем Make Frames From Layers (Сделать кадры из слоев).

Шаг 4

И, наконец, выделяем все кадры и при необходимости меняем задержку (я выбрал 0.1 секунды), устанавливаем режим повторения на Forever (Всегда).

И получаем вот такого забавного кролика с анимацией бега!

Теперь вы можете использовать этот спрайт в игре или экспортировать его в GIF.

Поздравляю, теперь кролик умеет бегать! Он готов к спасению принцессы-крольчихи и другим героическим свершениям.

Этот урок должен дать вам понимание принципов создания дизайна и анимации спрайтов. Теперь вы можете нарисовать своего собственного персонажа или использовать для игры готового кролика!

Я как-то спрашивал о графическом редакторе с одновременным показом анимации. Мне предлагали недоработанный Aseprite с жутко неудобным интерфейсом в духе 90ых, и фотошоп с возможностями анмиации, но вроде как просмотром ее «не сразу», но всё казалось неудобным и некомфортным.

А потом я наткнулся на прогу с не очень приятным для русского уха названием

«Piskel»

ПЛЮСЫ:
- предназначена для пиксельной рисовки, нет лишних функций
- показ в реальном времени анимации
- удобная конвертация под чары мейкера
- удобный интерфейс
- вес 60 мегабайт БЕЗ установки
- легкая в освоении. Освоил за минут 10 все функции.
- БЕСПЛАТНАЯ
- есть онлайн версия

МИНУСЫ:
- вроде как нельзя загрузить несколько картинок/файлов одновременно

САЙТ:
сам сайт
онлайн версия
скачать

ИНСТРУМЕНТЫ:
Смотрим картинку выше (слева направо, сверху вниз):

ЖЕЛТАЯ РАМОЧКА:
- 4 верхних квдаратика - размер кисти
- кисть
- кисть, рисующая дополнительно ЗЕРКАЛЬНО справа. позволяет ОДНОВРЕМЕННО рисовать две симметричные стороны спрайта. Очень удобно, нигде не встречал
- заливка
- заливка ВСЕХ пикселей одного цвета другим цветом
- ластик
- прямая пиксельная линия
- пиксельный квадрат
- рисование пиксельных элипсов. УРААА!!! раньше уходило кучу времени на них
- движение холста
- волшебная палочка
- выделение квадратной области. Работает необычно - чтобы переместить объект следует сначала его вырезать, затем переместить а потом скопировать. Быстро привыкаешь но немного неудобно
- выделение произвольной области. удобно
- тени
- рисование шашечкой. Видимо необходимо для плавного переходов цветов. Не помню ка кэто называется
- пипетка
- цвет
- ниже, слева-внизу, располагается меню, где вы можете переназначить горячие клавиши

СИНЯЯ РАМКА:
- фреймы (кадры). Как известно, в мейкере ЭЙС и МВ кадры следуют 2-1-2-3. Поэтому для корректной анимации внутри программы PISKEL, которая показывается в КРАСНОЙ РАМКЕ фреймы располагаем так же 2-1-2-3. Перед конвертацией в пнг формат удаляем первый фрейм

КРАСНАЯ РАМКА:
- анимация. Обновляется в риал-тайме

ЗЕЛЕНАЯ РАМКА:
меню слоев
- создать новый слой
- текущий слой вверх
- вниз
- изменить название слоя
- объединить слои
- удалить слой
меню трансформации
- отражение по вертикали
- поворот
- клонировать текущий слой на все кадры
палитра

ФИОЛЕТОВАЯ РАМКА:
меню программы
- натсройка
- размер
- сохранить
- экспорт
- импорт (импортировать можно в гиф, пнг, архив с пнг)

Здесь заслуживает внимания меню размера изображения.

Ставим тот размер, который вам нужен, у меня 120х120. Для мейкера как описано выше мы удаляем первый кадр, и при экспорте кадры склеятся и получится пнг-картинка размером 360х120.
Нарисовав каждый вид персонажа (походку вперед/назад/влево/впарво) в этих размерах, просто затем склеиваем эти 4 картинки и у нас получится чар например для рпг-мейкера

В общем всё. Программу мало кто знает, сам ее искал давненько, поэтому решил тут опубликовать, дабы и остальные знали кто искал

Пиксельная графика (далее - просто пиксель-арт) в наши дни все чаще и чаще напоминает о себе, особенно через инди-игры. Оно и понятно, ведь так художники могут наполнить игру великим множеством персонажей и не потратить сотни часов за моделированием трехмерных объектов и ручной отрисовкой сложных объектов. Если вы хотите научиться пиксель-арту, то первым делом вам придется научиться рисовать так называемые “спрайты”. Затем, когда спрайты уже не будут вас пугать, можете переходить к анимации и даже продаже своих работ!

Шаги

Часть 1

Собираем все необходимое

Загрузите хорошие графические редакторы. Можете, конечно, и в Paint’е шедевры создавать, но это сложно и не очень удобно. Куда лучше будет работать в чем-то вроде:

• Photoshop
• Paint.net
• Pixen

1. Купите графический планшет. Если мышкой вы рисовать не любите, то планшет и стилус - вот что вам необходимо. Планшеты от Wacom, к слову, самые популярные.

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

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

2. Рисуйте карандашом с размером кисти в 1 пиксель. В любом графическом редакторе должен быть инструмент “Карандаш”. Выберите его, размер кисти задайте равным 1 пикселю. Теперь вы можете рисовать… пиксельно.

   Часть 2

   Отрабатываем основы

   Создайте новое изображение. Так как вы учитесь рисованию в стиле пиксель-арт, то замахиваться на эпические полотна не стоит. Если помните, то в игре Super Mario Bros. весь экран был 256 x 224 пикселей, а сам Марио уместился на пространстве в 12 x 16 пикселей!

   1. Увеличьте масштаб. Да, иначе вы просто не разглядите отдельные пиксели. Да, придется увеличивать его очень сильно. Скажем, 800% - это вполне нормально.

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

      Научитесь рисовать кривые линии. В кривой линии должны быть, скажем так, равномерные “переносы строк” (что отчетливо заметно на рисунке чуть выше). Допустим, начиная рисовать кривую линию, нарисуйте прямую из 6 пикселей, под ней - прямую из трех, под ней - прямую из двух, а под ней - из одного пикселя. С другой стороны нарисуйте то же самое (зеркально отраженное, разумеется). Именно такая прогрессия считается оптимальной. Кривые, нарисованные по схеме “3-1-3-1-3-1-3”, не отвечают стандартам пиксель-арта.

      Не забывайте стирать ошибки. Инструмент “Стерка” надо настроить аналогично карандашу, сделав размер кисти равным 1 пикселю. Чем крупнее стерка, тем сложнее не стереть лишнее, так что все логично.

      Часть 3

      Создаем первый спрайт

      1. Подумайте о том, каким целям будет служить спрайт. Он будет статичным? Анимированным? Статичный спрайт можно насытить деталями до отказа, а вот анимированный лучше сделать попроще, чтобы потом не тратить часы, перерисовывая все детали на всех кадрах анимации. К слову, если ваш спрайте предполагается использовать с другими, то все они должны быть нарисованы в одном стиле.

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

         • Объективно говоря, в наши дни требования к размеру или палитре спрайтов уже выдвигаются редко. Впрочем, если вы рисуете графику для игры, в которую будут играть на старых игровых системах, то придется учитывать все ограничения.

      2. Сделайте набросок. Набросок на бумаге - вот основа любого спрайта, благо что так вы сумеете понять, как все будет выглядеть и, если надо, сможете что-то заранее подправить. Кроме того, по бумажному наброску потом еще можно и обводить (если у вас все же есть планшет).

         • Не жалейте деталей для наброска! Нарисуйте все, что хотите видеть на финальном рисунке.

      3. Перенесите набросок в графический редактор. Можете обвести бумажный набросок на планшете, можете перерисовать все вручную, пиксель за пикселем - не важно, выбор за вами..

         • Обводя набросок, используйте 100%-ый черный цвет в качестве контурного. Если что, вы его потом вручную измените, а пока что вам будет проще работать именно с черным.

      4. Доработайте контур наброска. В данном контексте можно, конечно, сказать иначе - сотрите все лишнее. В чем суть - контур должен быть в 1 пиксель толщиной. Соответственно, увеличивайте масштаб и стирайте, стирайте лишнее… или дорисовывайте отсутствующее карандашом.

         • Работая над наброском, не отвлекайтесь на детали - их черед еще придет.

      Часть 4

      Раскрашиваем спрайт

      1. Освежите в памяти теорию цвета. Посмотрите на палитру, чтобы понять, какие цвета надо использовать. Там все просто: чем дальше цвета друг от друга, тем больше они друг на друга не похожи; чем ближе цвета друг к другу - тем больше они похожи и лучше рядом друг с другом смотрятся.

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

      2. Выберите несколько цветов. Чем больше цветов вы будете использовать, тем более, так сказать, “отвлекающим” будет ваш спрайт. Посмотрите на классику пиксель-арта и попробуйте подсчитать, сколько цветов использовано там.

         • Марио - всего три цвета (если мы говорим о классической версии), да и те расположены на палитре чуть ли не вплотную друг к другу.
         • Соник - пусть даже Соник нарисован с большим количеством деталей, чем Марио, в основе все равно лежат всего 4 цвета (и тени).
         • Рю - чуть ли не классика спрайтов, как они понимаются в играх-файтингах, Рю - это большие участки, закрашенные в простые цвета, плюс немного тени для разграничивания. Рю, впрочем, чуть сложнее Соника - там уже пять цветов и тени.

      3. Разукрасьте спрайт. Инструментом “Заливка” разукрасьте ваш спрайте и не переживайте о том, что все выглядит плоско и безжизненно - на этом этапе иного и не предполагается. Принцип работы инструмента “Заливка” прост - он будет заливать выбранным вами цветом все пиксели того цвета, по которому вы кликнули, пока не дойдет до границ.

      Часть 5

      Добавляем тени

      Определитесь с источником света. В чем суть: вам нужно решить, под каким углом на спрайт будет падать свет. Определившись с этим, вы сможете сделать правдоподобно выглядящие тени. Да, “света” в буквальном смысле не будет, смысл в том, чтобы представлять, как он будет падать на рисунок.

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

      1. Начните наносить тени, используя для этого цвета, которые чуть темнее базовых. Если свет падает сверху, то где будет тень? Правильно, там, куда прямой свет не падает. Соответственно, чтобы добавить тень, просто добавьте к спрайту еще несколько слоев с пикселями соответствующего цвета выше или ниже контура.

         • Если уменьшить настройку “Контраст” базового цвета, слегка увеличив настройку “Яркость”, то можно получить хороший цвет для отрисовки тени.
         • Не используйте градиенты. Градиенты - зло. Градиенты выглядят дешево, халтурно и непрофессионально. Эффект, схожий с эффектом градиентов, достигается с помощью приема “прореживание” (см. ниже).

      2. Не забудьте про полутени. Выберите цвет, находящийся между базовым цветом и цветом тени. Используйте его для создания еще одного слоя - но уже между слоями этих двух цветов. Получится эффект перехода от темной области к светлой.

         Нарисуйте блики. Блик - это то место спрайта, куда падает больше всего света. Нарисовать блик можно, если взять цвет, который будет чуть светлее базового. Главное - не увлекаться бликами, это отвлекает.

Pixel Аниматор: GIF Maker
С технологией Pixel Аниматор, вы можете сделать больше, чем прохладный пиксель-арт. Сделайте спрайты перемещение просто как кусок пирога.

В обновлении пикселя в аниматор ver1.1.4, добавлены две очень мощные инструменты искусства пикселей. Теперь вы можете сделать искусство пиксела, GIF более conviniently. Хотя эти два инструмента не свободны, вы все еще можете использовать их в ограниченное время каждый день.
Форма инструмента: Вы выберите инструмент и выбрать тип формы. Следующий сенсорный экран и точки касания будет вершиной вашей фигуры. В настоящее время поддерживается форма включают круг, линии, прямоугольника в и треугольник.
Преобразование инструмент: Вы выберите инструмент и отрегулируйте выбрать область. После завершения выбора нажмите кнопку OK в окне подсказки. Затем перетащите область, чтобы переместить выделение, или перетащите угол, чтобы масштабировать область, или перетащить Корнор вращать выбор. После того, как вы сделали, нажмите кнопку ОК.

Другим важным изменением в новом Pixel Аниматор способ, как вы добавляете GIF кадры. Номер кадра не будет отображаться, если не будет добавлен GIF кадра. Старый способ ввести в заблуждение многих новичков. На этот раз, вы можете добавить неограниченное количество кадров в GIF в полной версии. В бесплатной версии вы можете добавить столько, сколько 15 GIF кадров.

Особенности:
1 Сделайте свой пиксель арт с нуля или на основе существующей фотографии или мультфильма.
2 Настройте следующую картину GIF кадров на основе предыдущего снимка, который сохраняет много времени.
3 Экспорт анимации в качестве формата GIF, который является поддержка каждой версии браузера независимо от того, на платформе PC или мобильной платформе.
4 Редактирование существующего файла GIF.
5 Поделитесь GIF Pixel анимации с друзьями.

Советы:
Paint Bucket очень полезно. Вы можете использовать его, чтобы изменить цвет линии или изменить цвет замкнутой области.

Простой учебник
Для того, чтобы сделать GIF с Pixel Аниматор, вы должны знать 2 простых понятий.
Сначала вы должны знать, что кнопка тока, кнопка, которая работает. Кнопка тока мигает. Цвет меняется форма нормального до красного и от красного до нормального повторно. Кнопка по умолчанию ток карандаш. Вы можете изменить текущую кнопку, нажав на кнопку на правой панели.
Вторая концепция GIF кадра. GIF анимация состоит из многих отдельных изображений, который называется кадром. При нажатии на кнопку "добавить", будет добавлен новый кадр. При нажатии на кнопку "минус", текущий кадр будет удален. Обратите внимание на цвет номеров кадров. Красный цвет означает, добавляется кадр, зеленый означает, что текущий кадр и серый означает, что кадр может быть добавлен, но еще не добавлены. Для получения бесплатной версии Pixel Аниматор, вы можете добавить до 10 кадров.
Частота кадров является скорость GIF анимации. Большая частота кадров означает быструю анимацию.

Сделайте оригинальную GIF анимацию с развлечением.

В этом уроке вы научитесь рисовать и анимировать персонажей в технике Pixel Art. Для этого вам понадобится только программа Adobe Photoshop. В итоге получится GIF с бегущим космонавтом.

Программа: Adobe Photoshop Сложность: новички, средний уровень Понадобится времени: 30 мин – час

I. Настройка документа и инструментов

Шаг 1

Выберите Pencil (карандаш) на панели инструментов – это будет основной инструмент для нашего урока. В настройках выберите тип Hard Round brush, и установите остальные значения так же как на картинке. Наша цель – сделать перо карандаша максимально резким.

Шаг 2

В настройках Eraser Tool (ластик) выберите режим Pencil Mode, и установите остальные значения как показано на картинке.

Шаг 3

Включите пиксельную сетку Pixel Grid (View > Show > Pixel Grid). Если в меню нет такого пункта, то зайдите в настройки и включите графическое ускорение Preferences > Performance > Graphic acceleration.

Обратите внимание: Сетка будет видна только на вновь созданном холсте при увеличении масштаба 600% и более.

Шаг 4

В настройках Preferences > General (Control-K) поменяйте режим интерполяции изображения на режим Nearest Neighbor (по соседним пикселам). Это позволит границам объектов оставаться максимально четкими.

В настройках единиц измерения и линеек установите единицы измерения линеек в пикселах Preferences > Units & Rulers > Pixels.

II. Создание персонажа

Шаг 1

И вот теперь, когда все настроено, мы можем приступить непосредственно к рисованию персонажа.

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

Шаг 2

Уменьшите масштаб эскиза до 60 пикселей в высоту, используя комбинацию клавиш Control+T, или команду Edit > Free Transform.

Размер объекта отображается на информационной панели. Обратите внимание, чтобы настройки интерполяции были такими же, как мы делали в шаге 4.

Шаг 3

Приблизьте эскиз на 300-400%, чтобы было легче работать, и уменьшите прозрачность слоя. Затем создайте новый слой и обрисуйте контуры эскиза, используя Pencil Tool. Если персонаж симметричный, как в нашем случае, можно обрисовать только половину, а затем продублировать и отразить нарисованное зеркально (Edit > Transform > Flip Horizontal).

Ритм: Чтобы нарисовать сложные элементы разбивайте их на части. Когда пикселы (точки) в линии образуют «ритм», например, 1-2-3, или 1-1-2-2-3-3, набросок выглядит более гладко для человеческого глаза. Но, если того требует форма, этот ритм может быть нарушен.

Шаг 4

Когда контур будет готов, можно выбрать основные цвета и раскрасить большие формы. Делайте это на отдельном слое под контуром.

Шаг 5

Сгладьте контур, дорисовывая тень по внутреннему краю.

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

Шаг 6

Создайте новый слой для бликов.

Выберите режим наложения Overlay из выпадающего списка на панели слоев. Нарисуйте светлым цветом над теми областями, которые хотите подсветить. Затем сгладьте блик, применив фильтр Filter > Blur > Blur.

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

Шаг 7

Теперь космонавту нужно добавить контрастности. С помощью настроек уровней (Image > Adjustments > Levels) сделайте его ярче, а затем отрегулируйте оттенок с помощью опции Color Balance (Image > Adjustments > Color Balance).

Теперь персонаж готов к анимации.

III. Анимирование персонажа

Шаг 1

Создайте копию слоя (Layer > New > Layer Via Copy) и сдвиньте ее на 1 вверх и на 2 пиксела правее. Это ключевой пункт в анимации персонажа.

Снизьте прозрачность оригинального слоя на 50% чтобы видеть предыдущий кадр. Это называется “Onion Skinning”(режим плюра).

Шаг 2

Теперь согните руки и ноги персонажа так, как будто он бежит.

● Выделите левую руку инструментом Lasso
● Используя FreeTransformTool (Edit > FreeTransform) и удерживая клавишу Control, передвиньте границы контейнера так, чтобы рука отодвинулась назад.
● Выделите сначала одну ногу, и немного растяните ее. Затем вторую ногу наоборот сожмите так, чтобы создалось ощущение, что персонаж шагает.
● С помощью карандаша и ластика подправьте часть правой руки ниже локтя.

Шаг 3

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

Шаг 4

Сделайте копию второго слоя и отразите ее по горизонтали. Теперь у вас есть 1 базовая поза и 2 в движении. Восстановите непрозрачность всех слоев до 100%.

Шаг 5

Перейдите Window > Timeline чтобы отобразилась Timeline панель, и нажмите Create Frame Animation.

На временной шкале сделайте следующее:

1. Установите задержку времени в 0,15 сек
2. Кликните на DuplicatesSelectedFrames, чтобы создать еще 3 копии
3. Установите цикл повтора Forever

Шаг 6

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

Базовая позиция→Бег с правой ноги→Базовая позиция→Бег с левой ноги.

Related