Скорее всего, для вас  не секрет, что благодаря многим функциям при помощи css3 можно создавать удивительные анимации. Возможно, вы знакомы с основными принципами создания css-анимации, но все же, давайте закрепим наши знания на практике. Сегодня мы будем учиться создавать ниндзю-шпиона при помощи спрайтов. Для этого нам понадобится Photoshop или любой другой графический редактор, а также основные знания html и css.

Окончательный результат:

• Исходные файлы
• Демонстрация

1. Прозрачность

Создайте новый документ в Photoshop или другом графическом редакторе шириной 200px и высотой 300px (или с любыми другими параметрами) и установите ему прозрачный фон, как показано на скриншоте выше.

2. Контуры

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

3. Сначала голова

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

4. Старая школа

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

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

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

6. 8-битный эффект

Для достижения полного 8-битного эффекта, установите каждому элементу головы обводку размером 1 пиксель при помощи стилей слоя. Убедитесь, что режим наложения слоя установлен как  Multiply, и уменьшите непрозрачность эффекта в диалоговое окне стилей слоя.

7. Продолжаем работу

Добавьте дополнительные общие тени и продолжайте  работать, пока не создадите трёхмерный персонаж, живущих в 2D-спрайтах. Этот процесс может занять несколько часов, так что держитесь.

8. Детали

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

9. Части тела

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

10. Расположение слоев

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

11. Совершенствуем

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

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

13. Группа слоев

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

14. В движении

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

15. Добавить позиций

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

16. Сохраняем изображения

Экспорт шесть различных изображений в формате PNG. Убедитесь, что вы переместите голову чуть-чуть для каждого кадра — это поможет нашей анимации! Помните, это анимация цикла, поэтому положение головы каждого кадра должна быть близка к предыдущей.

17. Расположите кадры

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

18. Добавляем стили

Создайте html-документ и прикрепите к нему стили, как показано на скриншоте выше. Установите ширину и высоту нашего изображения и параметры для анимации.

19. Ключевые кадры

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

20. Сглаживаем

По умолчанию браузер будет плавно анимировать фон, положение собственности между значениями, мы не хотим, поэтому мы создали «замороженные» кадры. Они устанавливаются с использованием 1/1000 процента меньше, чем в следующем кадре, чтобы избежать мерцания и артефактов.

21. Земляные работы

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

22. Оживляем

Возвратимся к нашим HTML и CSS-документам. Добавить ключевые кадры для анимации фона от 0px 0px до 0px -1200px. Создайте стили для каждого элемента земли, разместите и примените ключевые кадров с разной скоростью движения в зависимости от близости к экрану. Мы хотим создать эффект параллакса.

23. Параллакс

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

24. Небо это предел

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

25. Тестируем

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

26. Название

Мы загрузили бесплатный шрифт Ninja (входит в исходники файлов) и создали титул в Illustrator с красивым 3D-эффектом. Добавьте стили для нашей надписи.

27. Оживите

Анимация названия создана тем же способом, что и анимация персонажа. Установите масштаб и непрозрачность на 0 до 80%, затемувеличьте до 1 и 100%. Эксперименты с таймингами ( от шести до 10 секунд) вам в помощь

28. Следующие шаги

Ура! Вы создали анимацию при помощи CSS3 , но вам не нужно останавливаться на достигнутом — вы можете использовать либо :target, либо скрипт, чтобы подключить эту анимацию в простой игровой платформе или использовать аналогичный подход анимации для создания простых интерактивных изображений видеограммы , которые тонко изменяются с течением времени. Экспериментируйте и не останавливайтесь на достигнутом!

Автор: netmagazine

Перевод: Дежурка

Возможно, вас также заинтересуют статьи:

• Создаем анимированную строку
• 2D анимация: способы создания и уроки
• Мастеркласс по CSS анимации
• Эффект параллакс-скроллинга при помощи css3
• Подробно о :target