Кадры анимации, операции над ними

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

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

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

с Behance и перерисовали его в Photoshop. Выровняли по контент-сетке, подобрали размеры и поместили каждый элемент в отдельный слой.
В результате появился отрисованный в PSD-формате первый экран сайта.

«Шкалы времени», которая помогает управлять кадрами в анимации.
Для этого  открываем вкладку

«Окно» и ставим галочку напротив строки «Шкала времени».

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

кадра» на «Шкале времени».

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

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

«Вставка промежуточных кадров». Чтобы Photoshop самостоятельно анимировал элемент, необходимо задать

два состояния для элемента — начальное в первом кадре и конечное в следующем.
Поэтому  добавляем еще один кадр в «Шкалу времени» с помощью кнопки «Создать копию кадров».

Также можно задать непрозрачность слоя 0%.

текст «Soul sings» и сдвигаю его вправо за пределы макета. С текстом «3 strings»

поступаем так же — сдвигаем влево, пока он не исчезнет.

промежуточных кадров» на «Шкале времени».

дольше анимация и плавнее двигается элемент. Если кадров слишком мало — элементы

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

на кнопку воспроизведения на «Шкале времени».

исчезновение и движение можно комбинировать друг с другом, чтобы добиться еще более

интересных эффектов.

показать сложное взаимодействие элементов. Обычно для этого создают несколько копий

первого кадра, а потом немного изменяют каждую копию — рисуют анимацию покадрово.
Несколько раз скопируем последний кадр, чтобы создать движение стрелки и текста «go to shopping».

вверх, а в последнем кадре — вниз.

не успевают сфокусироваться на последнем кадре и зафиксировать конечное положение предметов на экране.

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

воспроизведение замедляется в конце. Поэтому за движением элементов комфортно наблюдать.

графическом редакторе, экспортируем ее в HTML- или GIF-формат.
Выбираем «Файл — Экспортировать — Сохранить для

Web».

воспроизведения анимация останавливается. Поэтому меняем режим воспроизведения на «Повторение» и сохраняем.

Удобно экспериментировать с результатом.

отображение временной шкалы
Переключиться в покадровый режим
Указать первый кадр
Создать необходимую анимацию
Проверить перед

экспортом
Сохранить в формате GIF или HTML