Анимация в фотошопе. Делаем прыгающую фигуру

В фотошопе, можно не только рисовать и обрабатывать изображения, но и делать анимацию. Сейчас мы с Вами попробуем сделать простую анимацию объекта, в данном случае станет анимированной RSS-иконка. Установив ее на сайте можно привлечь дополнительных подписчиков через Ваш rss-канал и смотрится это довольно симпатично. Вот результат:

Итак, приступим. Открываем в фотошопе новый документ. Размер и цвет фона зависит от того, куда Вы потом поместите эту анимашку. Я сделал размер 60×120 и прозрачный фон. Вставляете на этот фон свою картинку или можно мою. Затем идем в слои  и делаем отражение картинки. Для этого нужно создать дубликат слоя. О работе со слоями я писал в статье: Делаем 3D текст в фотошопе. Работаем с дубликатом слоя. Редактирование — трансформирование — отразить по вертикали.

Затем берем ластик, убираем жесткость до нуля и легко и не принужденно стираем нижний край картинки. Делаем прозрачность слоя примерно 50%. Здесь есть: Отдельный урок по созданию зеркального отражения в фотошопе. Должно получится что-то типа вот этого:Теперь займемся непосредственно анимацией. Заходим в Окно — анимация. Внизу появилась панель анимации и показан первый кадр. Далее создаем копию выделенных кадров:Затем идем опять в слои и перемещаем основной слой вверх, а его дубликат вниз. Создаем еще один кадр, так же, как показано на предыдущем скриншоте и возвращаем все слои в исходное положение. Теперь можно нажать play и посмотреть, как наша картинка будет судорожно трястись. Для того, чтобы этого не было, а происходило все более плавно, нужно создать промежуточные кадры. Выбираем первый кадр, нажимаем на Создание промежуточных кадров и ставим примерно 10 промежуточных кадров. Те же манипуляции совершаем со вторым кадром, а точнее с 12-тым, там, где основной слой находится в самой верхней точке, а его дубликат в нижней. Теперь посмотрите, что вышло, нажав снова play. Осталось добавить эффект подпрыгивания. Нажимаем на последний кадр. Создаем новый. Перемещаем слои, один немного вверх, а другой немного вниз. Создаем еще один кадр и возвращаем на нем слои в исходное положение. Далее также между ними следует создать примерно по 5 промежуточных кадров. Все, наша анимашка готова. Осталось ее сохранить. Для этого идем в Файл — Сохранить для Web и устройств Alt + Shift + Ctrl + S Ваша анимационная картинка в формате GIF готова. Можете использовать для своих сайтов, что позволит сайту стать более динамичным. Посмотрите урок по созданию анимационных кнопок в фотошопе. Спасибо за внимание. Жду Ваших комментариев.