Открытая Флэш Мультимедия Лаборатория

Возможности анимации растровых изображений.
Анимация фотографии в формате GIF в растровом редакторе Adobe Photoshop.

Тип анимации Фотографии: Изображённый человек двигает глазами.

Как задать анимацию движения глаз в растровом изображении (цифровое фото) ведь это не векторный формат и изображение не разделено на составляющие части в различных слоях.
В этом нам поможет наш любимый Фотошоп.
Я использовал Adobe Photoshop CS3 (Русская версия), вполне хватает этой версии. СКАЧАТЬ

- Опочки! Что вы тут себе позволяете? Вы кого вздумали анимировать?

- Позовите Дмитрия Анатольевича. Пусть посмотрит, чем они тут занимаются!

Нам понадобится изображения лица, желательно фас. 

С помощью инструмента "Прямолинейное лассо" выделяем радужку глаза.
Копируем или вырезаем выделенное CTRL+C (или CTRL+X).
Не снимая выделения, вставляем скопированное CTRL+V, таким образом скопированный фрагмент изображения ляжет "по месту", то есть туда откуда его скопировали, но на новый слой. Программа сама создаст новый слой, не стоит беспокоиться об этом.
То же самое проделываем с другим глазом.

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

После создаём дубликат слоя основного изображения самой фотографии и с помощью инструмента "Кисть", подобрав цвет белка закрашиваем радужку в глазном яблоке осторожно не нарушая контур глазного яблока.

Теперь включаем слои с скопированными радужками глаз и сдвигаем их в обратную сторону от их исходного расположения.
Далее проводим манипуляции корректировки радужек на месте, подгоняя их по отношению к глазному яблоку.
Используя функции Фотошопа изображения радужек можно трансформировать - увеличить или уменшить, отразить слева направо.
Для этого существует горячая клавиша CTRL+T или через Меню - Редактирование - Трансформирование.
Вот тут можно задействовать несколько функций поочерёдно или одну из них, в зависимости от Вашего изображения.
Функции: Трансформация, Искажение, Отражение и т.д.
Поэкспериментируйте, какое больше подойдёт.

Используя инструменты "Ластик" и "Кисть" подгоняем изображение радужки до более реального.

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

Опять же можно подогнать дубликат фотографии дорисовав тени и полутени на белке.
С помощью инструмента "Палец" смягчаем движениями небольшой амплитуды то что мы дорисовали.

Теперь, если нас удовлетворяет внешний вид корректированного изображения, запускаем окно "Анимация".
Меню - Окно - Анимация

Создаём новый кадр.
Теперь в первом слое мы выключаем все слои кроме исходного, а во втором включаем все слои. 

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

- Видал, что они тут анимируют?
- Да, с этим нужно разобраться, Владимир Владимирович!

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

Такие GIF анимационные картинки лучше использовать небольшими по размеру и с минимальным количеством кадров.

- Ну ты, Кадников, попал! 

Все тонкости этого процесса можно посмотреть в видео.
Итак, смотрим видеоурок !

Задавайте вопросы, оставляйте комментарии.