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 анимацию с развлечением.

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

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

«Piskel»

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

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

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

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

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

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

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

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

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

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

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

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

В этом уроке вы научитесь рисовать и анимировать персонажей в технике 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 возле названия слоя на панели слоев. Порядок должен быть такой:

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

Казалось, что пиксельная графика уже давно себя изжила. Появилось множество новых форматов (куда более качественных). Но оказалось, что пиксельная графика все еще жива. Она до сих пор используется в играх, мемах, различных программах. Пиксельная графика потихоньку становится новым видом искусства, которое имеет право на жизнь только в Интернете. Но это не делает ее хоть сколько-нибудь специфической. Для осуществления своих художественных амбиций придется сначала выбрать подходящее программное обеспечение. Есть отличный вариант. "Пиксель арт Студио" - бесплатная программа для рисования пиксель арта. Она поможет воплотить в жизнь самые смелые проекты. Мы рассмотрим все основные ее опции, но сначала разберемся, что означает словосочетание "пиксель арт".

Что такое пиксель арт?

Создание пиксель арта подразумевает рисование сложных графических объектов из простых фигур. Полноценная картина создается из маленьких квадратиков (пикселей), которые раскрашиваются вручную и придают изображению нужный цвет, объем и форму. Ранее именно так создавались иконки для запуска приложений (ярлыки). Некоторые из них создаются так и по сей день. В настоящее время Pixel Art используется в самых разных областях. Его используют в 2D играх, простейших мультфильмах, мемах в Интернете и в некоторых программах. Что довольно странно. Однако стоит признать, что выглядит пиксель арт довольно забавно.

Для работы в таком стиле сойдет любой графический редактор. Даже пресловутый "Фотошоп". Но гораздо проще использовать специализированное приложение, которое создано как раз для того, чтобы работать именно с такой графикой. Такой программой является бесплатный продукт под названием Pixel Art Studio. Есть версии под "Виндовс" и "Мак ОС". Соответствующие версии можно найти в магазине "Виндовс" и в AppStore. А теперь разберем преимущества и недостатки приложения.

Преимущества программного продукта

Итак, "Пиксель Арт Студио" - это программа для рисования пиксель арта для ПК. Она обладает внушительным списком преимуществ.

• Утилита совершенно бесплатна. Ее может скачать и установить любой.
• Программа имеет максимально простой и интуитивно понятный интерфейс (хоть и без русского языка). С ней разберется даже новичок.
• Продукт не обладает огромным количеством инструментов, как более продвинутые редакторы. Это позволяет не заблудиться в инструментах и настройках.
• Программа поддерживает работу со слоями. Как и любой качественный графический редактор.
• Утилита работает очень быстро даже на старых и слабых машинах (хоть и оптимизирована под "Виндовс 10"). Такое редко бывает.
• Разобраться в принципе работы основных инструментов не составит никакого труда. По большей части, это простые геометрические фигуры и линии.
• Программа для рисования пиксель арта имеет в своем активе весьма богатый справочный материал с кучей уроков. Вот только весь текст на английском языке. Но в этом ничего страшного нет. Переводчик от "Гугл" быстро и качественно растолкует, что там написано.

Недостатки программы

Как и положено рядовому приложению, Pixel Art Studio имеет и набор недостатков. Их, конечно, меньше, чем преимуществ, но они есть.

• Программа отличается довольно скудным набором функций и инструментов: пару линий, несколько фигур, палитра красок, полотно с пикселями и несколько инструментов для правки. Вот и все.
• Этот редактор пиксельной графики не позволяет создавать высококачественный контент. Максимальное качество изображения искусственно ограничено.
• В этой программе нет возможности создавать анимированный пиксель арт. А это для игр, мультфильмов и мемов очень важно. Конек приложения - статические пиксельные изображения. На большее программный продукт не способен. Зато он совершенно бесплатен.

Почему не использовать "Фотошоп"?

Дело в том, что графический редактор от Adobe - весьма навороченный продукт. Для того чтобы успешно в нем работать нужно долго учиться. А в случае с пиксель артом и вовсе все сложно. Придется перелопатить гору литературы на тему "Как рисовать пиксель арт в Фотошопе". Этот редактор хорош для тех, кто уже привык к нему. А новички просто потеряются в обилии инструментов и функций. Хотя надо отдать ему должное: продукт отлично выполняет свою работу и может сделать с изображением практически все. Также в "Фотошопе" есть опции анимации, что подходит для создания мультфильмов в стиле "пиксель арт". В общем, использовать "Фотошоп" для рисования стильных картинок в пикселях можно. Но только в том случае, если вы готовы потратить кучу времени на обучение. Не стоит забывать и о том, что "Фотошоп" - платный продукт. И подписка стоит очень дорого.

Положительные отзывы о приложении

Вернемся к нашей программе для рисования пиксель арта. Что говорят пользователи о "Пиксель Арт Студио"? Стоит отметить, что мнения разделились. Некоторые юзеры утверждают, что это мощный и удобный инструмент для создания шедевров. Хвалят простоту использования и наличие всех основных инструментов. Также юзерам нравится интуитивно понятный интерфейс и оформление программы, выполненное в минималистичном стиле. Утилита прекрасно вписывается в стандартный интерфейс "Виндовс 10". К тому же, пользователи отмечают очень высокую скорость работы программного продукта. Pixel Art Studio действительно работает быстрее, чем более навороченные графические редакторы. А владельцы относительно старых ПК утверждают, что данное приложение ведет себя прекрасно даже на их древних машинах. В общем, с оптимизацией у программы все прекрасно.

Отрицательные отзывы о Pixel Art Studio

Все положительные отзывы оставлены теми, кто только начал погружаться в увлекательный мир компьютерной графики. Отрицательные же комментарии принадлежат тем, кому нет ничего проще, как рисовать пиксель арт в "Фотошопе". Эти товарищи заявляют, что "Пиксель Арт Сутдио" - бесполезное приложение для тех, кто хочет рисовать по клеточкам. Профессионалы утверждают, что в этом программе нет абсолютно ничего, за что стоило бы его хвалить: скудный набор инструментов, нет никаких дополнительных функций, нет возможности анимировать объекты. Также многие отмечают в корне неправильный механизм работы со слоями. Как бы то ни было, данный программный продукт рассчитан отнюдь не на профессионалов, а на новичков. Так что на отзывы "специалистов" можно не обращать внимания.

Заключение

Итак, подведем итоги. Pixel Art Studio - это отличное приложение для создания пиксельной графики, рассчитанное на новичков. Оно имеет понятный и не перегруженный различными ненужными элементами интерфейс и минимальный набор инструментов для создания простых изображений. В тоже время данный продукт никак не подойдет профессионалам, так как не сможет удовлетворить их потребности своим функционалом. В любом случае рисовать пиксель арт в этой программе гораздо проще, чем в пресловутом "Фотошопе". Если требуется продукт для того, чтобы начать, то лучше, чем Pixel Art Studio нет ничего.

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

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

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

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.

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

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