Анимация в интернете давно перестала быть простым украшением страницы и превратилась в полезный инструмент для улучшения юзабилити. Она помогает пользователю взаимодействовать с интерфейсом, привлекает внимание к важным моментам.
Анимация — это последовательное отображение похожих кадров друг за другом. Каждый кадр немного изменяется, поэтому кажется, что картинка движется.
Для анимирования интерфейса, создания интерактивных прототипов или рекламных роликов используют специальные программы, например, Adobe Animate или After Effects.
Чтобы создать простой веб-баннер или презентацию, не обязательно разбираться со специальными программами. Для этого подойдут и встроенные средства Photoshop.
C чего начать
Первым делом нужно определиться с тем, что мы будем анимировать и какого результата планируем достичь.
Для создания анимации я взял один из ярких проектов с Behance и перерисовал его в Photoshop. Выровнял по контент-сетке, подобрал размеры и поместил каждый элемент в отдельный слой. В результате у меня появился отрисованный в PSD-формате первый экран сайта, который затем я анимировал.
Шкала времени
Перед созданием анимации необходимо подготовить нужные инструменты — включить отображение «Шкалы времени», которая помогает управлять кадрами в анимации.
Для этого я открываю вкладку «Окно» и ставлю галочку напротив строки «Шкала времени».
Внизу окна в Photoshop должна появиться широкая строка, с помощью которой можно управлять кадрами в анимации.
Чтобы создать первый кадр, нажимаю иконку «Создать анимацию кадра» на «Шкале времени».
Промежуточные кадры
В Photoshop элемент можно анимировать несколькими способами:
- Нарисовать несколько кадров, вручную изменяя положение и свойства элементов. Если анимация достаточно длинная, то прорисовка каждого кадра занимает много времени.
- Вставить промежуточные кадры. Необходимо вручную задать лишь состояния макета: в начале и в конце анимации. Необходимые кадры между этими состояниями добавит сам Photoshop. Этот способ подойдет, чтобы сделать постепенное появление и исчезновение объекта или показать его перемещение.
Сначала я анимирую изображение балалайки. Для плавного появления изображения использую инструмент «Вставка промежуточных кадров». Чтобы Photoshop самостоятельно анимировал элемент, необходимо задать два состояния для элемента — начальное в первом кадре и конечное в следующем.
Поэтому я добавлю еще один кадр в «Шкалу времени» с помощью кнопки «Создать копию кадров».
После добавления нового кадра переключаюсь на первый и убираю видимость слоя с балалайкой. Также можно задать непрозрачность слоя 0%.
На следующем кадре проверяю, виден ли слой с балалайкой.
После работы с изображением балалайки настраиваю появление текстовой строки. В первом кадре я выделяю текст «Soul sings» и сдвигаю его вправо за пределы макета. С текстом «3 strings» поступаю так же — сдвигаю влево, пока он не исчезнет.
Во втором кадре возвращаю текст назад.
Отлично. Теперь вставим промежуточные кадры между ключевыми.
Для этого нажимаю кнопку «Создание промежуточных кадров» на «Шкале времени».
В появившемся диалоговом окне указываю, сколько кадров необходимо добавить.
Чем больше кадров, тем дольше анимация и плавнее двигается элемент. Если кадров слишком мало — элементы будут двигаться рывками.
Я добавил шесть промежуточных кадров. Этого достаточно, чтобы текст двигался достаточно быстро, но и не дергался.
Первая часть анимации готова. Теперь ее можно воспроизвести и посмотреть, что получилось.
Нажимаю на кнопку воспроизведения на «Шкале времени».
Вставка промежуточных кадров помогла быстро создать анимацию с плавным появлением и движением элементов.
Появление, исчезновение и движение можно комбинировать друг с другом, чтобы добиться еще более интересных эффектов.
Покадровая анимация вручную
Кроме линейной анимации, иногда нужно создать хаотичное движение или показать сложное взаимодействие элементов. Обычно для этого создают несколько копий первого кадра, а потом немного изменяют каждую копию — рисуют анимацию покадрово.
Я несколько раз скопирую последний кадр, чтобы создать движение стрелки и текста «go to shopping».
В следующем кадре выделяю нужный слой с текстом и стрелкой, сдвигаю его немного вверх, а в последнем кадре — вниз.
Теперь можно запустить анимацию и посмотреть результат.
Так как кадры сменяются быстро, то глаза не успевают сфокусироваться на последнем кадре и зафиксировать конечное положение предметов на экране.
Поэтому я увеличил длительность последнего кадра: нужно нажать на стрелку около надписи «0 сек.» и выбрать другое время из списка.
Для последнего кадра я задал длительность в две секунды. Теперь воспроизведение замедляется в конце. Поэтому за движением элементов комфортно наблюдать.
Сохранение и экспорт
Теперь можно сохранить проект. Чтобы открыть анимацию в браузере или графическом редакторе, экспортируем ее в HTML- или GIF-формат.
Выбираем «Файл — Экспортировать — Сохранить для Web».
В окне предпросмотра можно еще раз просмотреть анимацию и изменить настройки сохранения.
По умолчанию после воспроизведения анимация останавливается. Поэтому меняю режим воспроизведения на «Повторение» и сохраняю.
Вот какая анимация получилась в результате:
Заключение
В Photoshop просто создавать короткие интерактивные баннеры и презентации, анимировать отдельные элементы. Удобно экспериментировать с результатом.
Повторим ключевые шаги. Чтобы создать анимацию, нужно:
На этой странице
В версиях, предшествующих Photoshop CC, некоторые функциональные возможности, описанные в данной статье, могут быть доступны только при наличии Photoshop Extended. Photoshop не имеет специальной версии Extended. Все возможности Photoshop Extended доступны в Photoshop.
Рабочий процесс создания кадров анимации
В приложении Photoshop для создания кадров анимации используется панель «Шкала времени». Каждый кадр представляет собой структуру слоев.
Также можно создавать анимацию с помощью шкалы времени и ключевых кадров. См. раздел Создание анимации по временной шкале.
Чтобы создать покадровую анимацию, в Photoshop используется следующий общий рабочий процесс.
Откройте новый документ
Откройте панели «Шкала времени» и «Слои», если они еще не отображаются. Убедитесь, что панель «Шкала времени» находится в режиме покадровой анимации. В середине панели «Шкала времени» щелкните стрелку вниз, чтобы выбрать «Создать анимацию кадра», а затем нажмите кнопку рядом со стрелкой.
Добавьте слой или преобразуйте слой заднего плана
Поскольку слой заднего плана анимировать нельзя, добавьте новый слой или преобразуйте слой заднего плана в обычный. См. раздел Преобразование фона и слоев.
Добавьте содержимое к анимации
Если анимация включает несколько объектов, анимированных независимо друг от друга, или если нужно изменить цвет объекта либо полностью поменять содержимое в кадре, создавайте эти объекты в отдельных слоях.
Добавьте кадр к панели «Шкала времени»
Отредактируйте слои выбранного кадра
Выполните одно из следующих действий.
Включите или отключите видимость для разных слоев.
Измените положение объектов или слоев, чтобы создать впечатление движения содержимого.
Измените непрозрачность слоя, чтобы содержимое постепенно возникало или исчезало.
Измените режим наложения слоев.
Добавьте к слоям стили.
Приложение Photoshop предоставляет инструменты, которые помогают сохранить одинаковые характеристики слоя в разных кадрах. См. раздел Унификация атрибутов слоев в кадрах анимации.
По мере необходимости добавьте кадры и редактируйте слои
Количество новых кадров ограничивается только системной памятью, доступной для Photoshop.
С помощью команды «Создать промежуточные кадры» можно создавать новые кадры с промежуточными изменениями между двумя существующими кадрами на панели. Это самый быстрый способ создать впечатление движения объекта по экрану или заставить его постепенно появляться и исчезать. См. раздел Создание промежуточных кадров.
Задайте параметры времени отображения кадра и повторов
Время отображения можно назначить каждому кадру и задать число повторов, чтобы анимация выполнялась один раз, определенное количество раз или постоянно. См. раздел Указание времени отображения в покадровой анимации и Задание повторов в покадровой анимации.
Для воспроизведения анимации используйте элементы управления панели «Шкала времени». Затем с помощью команды Сохранить для Web просмотрите ее в веб-браузере. См. раздел Просмотр оптимизированных изображений в веб-браузере.
Оптимизируйте анимацию для эффективной загрузки.
Предусмотрены разные варианты сохранения анимации кадра.
Анимацию можно сохранить в виде анимированного GIF-файла с помощью команды «Сохранить для Web».
Сохраните файл в формате Photoshop (PSD) для дальнейшей работы с анимацией.
Сохраните последовательность изображений, видео в формате QuickTime или как отдельные файлы. См. также раздел Экспорт видеофайлов и последовательностей изображений.
Добавление кадров к анимации
Добавление кадров является первым шагом при создании анимации. Открытое изображение отображается на панели «Шкала времени» как первый кадр новой анимации. Каждый добавляемый кадр первоначально является дубликатом предыдущего кадра. После этого кадр редактируется с помощью панели «Слои».
Убедитесь, что панель «Шкала времени» находится в режиме покадровой анимации.
Нажмите кнопку «Создание копии выделенных кадров» .
Выбор кадров анимации
Прежде чем начать работу с кадром, необходимо выбрать его в качестве текущего кадра. Содержимое текущего кадра появляется в окне документа.
На панели «Шкала времени» на текущий кадр указывает узкая граница миниатюры кадра (внутри затененной подсветки выделения). Выделенные кадры обозначены затененной подсветкой вокруг миниатюры кадра.
Выбор одного кадра анимации
Выполните одно из следующих действий на панели «Шкала времени»:
Чтобы выбрать следующий кадр последовательности в качестве текущего, нажмите кнопку «Выбрать следующий кадр» .
Чтобы выбрать предыдущий кадр последовательности в качестве текущего, нажмите кнопку «Выбрать предыдущий кадр» .
Чтобы выбрать первый кадр последовательности в качестве текущего, нажмите кнопку «Выбрать первый кадр» .
Выбор нескольких кадров анимации
На панели «Шкала времени» выполните одно из предложенных ниже действий.
Чтобы выбрать несколько последовательных кадров, щелкните второй кадр с нажатой клавишей «Shift». Все кадры, находящиеся между первым и вторым включительно, добавятся к выделенным кадрам.
Чтобы выбрать непоследовательные кадры, щелкайте кадры, которые нужно добавить к выделенным, с нажатой клавишей «Ctrl» (Windows) или «Command» (Mac OS).
Чтобы выбрать все кадры, в меню панели выберите команду « Выделить все кадры».
Чтобы отменить выделение одного кадра из нескольких выбранных, щелкните этот кадр с нажатой клавишей «Ctrl» (Windows) или «Command» (Mac OS).
Редактирование кадров анимации
На панели «Шкала времени» выберите один или несколько ключевых кадров.
- Содержимое объектов в кадрах анимации редактируется с помощью панели «Слои», в которой можно изменять слои изображения, влияющие на этот кадр.
- Чтобы изменить положение объекта в кадре анимации, на панели «Слои» выберите слой, содержащий этот объект, и перетащите его в новое положение.
Можно выбрать несколько кадров и изменить их расположение. Однако, если перетащить несколько несмежных кадров, они размещаются последовательно в новом местоположении.
- Чтобы изменить порядок кадров анимации, в меню панели выберите команду «Обратный порядок кадров».
Кадры, которые нужно разместить в обратном порядке, не обязательно должны быть смежными, можно изменить порядок любых выделенных кадров.
Чтобы удалить выделенные кадры, в меню панели «Шкала времени» выберите команду «Удалить кадр» или щелкните значок «Удалить» и нажмите кнопку «Да», чтобы подтвердить удаление. Можно также перетащить выделенный кадр на значок «Удалить».
Унификация атрибутов слоев в кадрах анимации
Кнопки унификации («Унифицировать положение слоя», «Унифицировать видимость слоя» и «Унифицировать стиль слоя») на панели «Слои» определяют, как изменения атрибутов в активном кадре анимации применяются к остальным кадрам того же слоя. При выбранной кнопке унификации этот атрибут меняется во всех кадрах активного слоя, если кнопка не выбрана, изменения применяются только к активному кадру.
Флажок «Распространить кадр 1» на панели «Слои» также определяет, как изменения атрибутов в первом кадре применяются к остальным кадрам того же слоя. Если этот флажок установлен, изменения атрибута первого кадра затронут все последующие кадры активного слоя относительно первого кадра (сохранив уже созданную анимацию).
Унификация видимости слоя
На панели «Шкала времени» измените атрибут для одного кадра.
Распространить кадр 1
На панели «Шкала времени» измените атрибут для первого кадра.
Измененный атрибут применяется (относительно) ко всем последующим кадрам слоя.
Можно также распространять кадры, выделив группу смежных кадров с помощью клавиши «Shift», и изменив атрибут в одном из выделенных кадров.
Отображение или скрытие кнопок унификации слоев
Отображает кнопки унификации слоев, если панель «Шакала времени» открыта.
Отображает кнопки унификации слоев независимо от того, открыта или закрыта панель «Шкала времени».
Скрывает кнопки унификации слоев независимо от того, открыта или закрыта панель «Шкала времени».
Копирование кадров с конфигурацией слоев
Чтобы понять, что происходит при копировании и вставке кадра, думайте о кадре, как о дубликате изображения с заданной конфигурацией слоя. При копировании кадра копируются конфигурации слоев (включая видимость, положение и другие свойства каждого слоя). При вставке кадра конфигурация этого слоя применяется к целевому кадру.
На панели «Анимация» выберите один или несколько кадров для копирования.
Заменяет выделенные кадры копируемыми. Новые слои не добавляются. Свойства всех существующих слоев в целевых кадрах заменяются свойствами копируемых слоев. При вставке кадров между изображениями новые слои добавляются к изображению, но в целевых кадрах видны только вклеенные слои (существующие слои скрыты).
Вклеить поверх выделенной области
Добавляет содержимое вклеенных кадров как новые слои изображения. При вклеивании кадров в то же самое изображение использование этого параметра удваивает количество слоев в изображении. В целевых кадрах вклеенные слои видны, а исходные скрыты. В нецелевых кадрах вклеенные слои скрыты.
«Вставить перед выделенной областью» или «Вставить после выделенной области»
Добавляет копируемые кадры перед целевым кадром или после него. При вклеивании кадров между изображениями новые слои добавляются к изображению, но в новых кадрах видны только вклеенные слои (существующие слои скрыты).
Этот параметр вступает в силу только при вставке кадров в другой документ. Выберите его, если планируете изменить положение вставленных слоев как единого целого.
Создание промежуточных кадров
Термин твининг (вставка промежуточных кадров) происходит от английского «in betweening», традиционного термина анимации, описывающего процесс создания плавного перехода от одного ключевого кадра к другому с помощью промежуточных кадров. Вставка промежуточных кадров (которую также называют интерполяцией) значительно сокращает время, необходимое для создания таких анимационных эффектов, как постепенное появление или исчезновение, или перемещение элемента в кадре. После создания промежуточные кадры можно редактировать по отдельности.
Команда «Создать промежуточные кадры» используется для автоматического добавления или изменения последовательности кадров между двумя существующими, равномерно меняя параметры слоя (положение, непрозрачность или параметры эффекта) между новыми кадрами, чтобы создать впечатление движения. Например, если нужно, чтобы слой постепенно исчезал, установите непрозрачность слоя в начальном кадре 100 %, а в конечном — 0 %. При создании промежуточных кадров между этими двумя кадрами непрозрачность слоя снижается равномерно во всех новых кадрах.
При выборе одного кадра можно выбрать, между каким кадром создавать промежуточные кадры — предыдущим или последующим.
Если выделить два смежных кадра, новые кадры создаются между ними.
Если выделить несколько кадров, операция создания промежуточных кадров изменит существующие кадры между первым выбранным кадром и последним.
Если выделить первый и последний кадры в анимации, предполагается, что они смежные, поэтому промежуточные кадры добавляются после последнего кадра. (Этот метод полезен, если анимация настроена на повтор несколько раз.)
Нажмите кнопку «Создать промежуточные кадры» на панели «Шкала времени».
В меню панели выберите команду «Создать промежуточные кадры».
Как вставить анимацию в другую анимацию в фотошопе? Почти также, как и на простую картинку. Только в данном случае нужно обратить внимание на количество слоев картинок с анимацией и на время кадров. Итак, из двух картинок с готовой анимацией создадим одну.
Откроем две картинки с анимацией, и посмотрим, сколько у каждой слоев и какое время проставлено на каждом кадре.
В окне слоев у этой картинки 4 слоя,
а в окне анимации время на кадрах 0,15.
Теперь откроем вторую картинку, которую будем вставлять в первую.Это картинка бабочки без фона.
Здесь тоже 4 слоя
и время на кадрах такое же.
Значит перенести анимацию будет очень просто.
2-Кликнуть по картинке с бабочкой и, в окне слоев, выделить все слои. (Нажать на клавиатуре Ctrl и, удерживая, кликнуть по каждому слою в окне слоев или, нажав на Shift, кликнуть по верхнему слою).
3-Выбрать на панели инструментов "перемещение" 
и перетащить бабочку на первую картинку.
Бабочка оказалась великовата, нужно ее уменьшить.
Уменьшить бабочку до 80%
Нажать на панели параметров "применить". 
5-В окне слоев переместить выделенные слои наверх, если в окне слоев будет так.
Кликнуть левой кнопкой мыши по слоям и, не отпуская ее, переместить слои вверх.
Затем кликнуть по любому слою, чтобы активный был только один слой.
6-В окне анимации выделить первый кадр, кликнув по нему,
в окне слоев глазки должны быть только на нижнем слое и на слое 5.
7- В окне анимации выделить второй кадр,
в окне слоев глазок сам перескочит на второй слой, а на слое 6 нужно включить глазок и выключить на слое 5.
8- В окне анимации выделить третий кадр,
в окне слоев включить глазок на слое 7 и выключить на слое 6.
7- в окне анимации выделить четвертый кадр,
а в окне слоев включить глазок на верхнем слое и выключить на слое 7.
9- Нажать на пуск в окне анимации и смотреть что получилось.
10- Файл сохранить для Web и устройств в формате Gif.
Как перенести анимацию на простую картинку смотрите здесь. Следующие уроки будут о том, как убрать фон на анимации и, как вставить анимацию в анимацию в фотошопе с разным количеством слоев и разным временем на кадрах.
Поделиться в соц. сетях
28 комментариев
Как я люблю фотошоп, так красиво у вас. Есть чему поучиться.
А не расскажите, как делается такое контурное свечение вокруг стеблей и т.д.
Лидия, такое анимированное свечение, как на этой картинке делается плагином Alien Skin Xenofex 2
Спасибо большое за урок! Навставлялась анимации — на одну аним.картинку вставила целых три и запомнила урок. Теперь поищу у вас урок, где время анимации разное. Счастья. успехов Вам в новом году!
Не поняла по уроку .загрузила одну анимкартинку основную и анимбабочку на прозрачном фоне. в уроке написано перенести её на основную , Но каким образом. Не получилось у меня , а очень хочу.И ещё , если количество кадров на одной и другой картинках не совпадают , что надо предпринять.
Лидия,активируйте картинку, с бабочкой, то есть кликните по ней. Посмотрите в окно слоев. там должно быть несколько слоев этой картинки. Нужно в окне слоев все слои выделить.Затем на панели инструментов выберите инструмент «перемещение» (он самый верхний),потом кликните по изображению бабочки и, не отпуская левую кнопку мыши, перетаскивайте на первую (основную)картинку.И посмотрите урок «Как совместить две анимации». Там рассказано, как соединить две анимации с разным количеством слоев.
Я всё точно так усвоила по .вашему уроку .к тому же он очень доходчив и хорош. я затрудняюсь вот в чём . Я открыла основную открытку — вижу все слои и в слоях анимации и в слоях. открыла вторую картинку — бабочку. все слои вижу и там и там. Но самое главное первую открытку я не вижу .Она исчезла из слоёв и перемещать мне бабочку нет возможности — некуда. это моя главная трудность. Всё остальное в вашем уроке написано доходчиво.
Лидия, у Вас экране видны две картинки, когда Вы их открываете? Если две, отодвиньте вниз или в сторону картинку с бабочкой и просто тяните на первую открытку изображение бабочки, но, чтобы в окне слоев все слои бабочки были выделены. То, что не видно слоев первой картинки в окне слоев не имеет значения.Главное, чтобы на экране было видно две картинки.Когда вы кликаете по второй картинке открываются слои второй картинки, а когда перейдете на первую картинку откроются слои первой картинки. А после перетаскивания бабочки, в окне слоев будут слои и первой и второй картинки.
В том то и дело , что на экране я вижу по очереди по одной картинки. Сначала основной фон , а потом бабочку. в слоях тоже сначала одну картинку , как открою бабочку первая с экрана пропадает Я скопировала вашу основную картинку и вашу бабочку и работаю с ними. если бы на экране у меня были бы две картинки — пробем бы не было . Я уже освоила пять ваших уроков успешно , но здесь вот никак не справилась. Хотя уроки всем преподавателям на зависть. я что-то не доделываю при открытии файлов, наверное. После вашего ответа снова попробовала- и снова тоже самое.
Лидия, попробуйте так: открываете картинку с бабочкой, выделяете все слои в окне слоев, затем идете «выделение-все».По периметру файла с бабочкой появится выделение.Затем «редактирование-скопировать совмещенные данные». Открываете другую картинку, идете «редактирование-вставить». Должно получиться. Лидия посмотрите вверху экрана,под панелью параметров, там должны быть строчка с названиями картинок, которые Вы открываете. Если есть, можно кликать по названию и будет открываться нужная картинка. У меня был такой фотошоп.
По вашему ответу я всё сделала. Только вот бабочка мигает на картиночке , а крылышками не машет. а тогда вашим уроком , что не надо пользоваться , да ? А мне урок нравится . вот только беда не могу никак к нему подступиться из-за видимости обеих картинок сразу на экране. вы очень терпеливый человек . я восхищаюсь и восторгаюсь ВАМИ. о таких говорят просто — это «высокий человек «. Т.е человек высокого качества. Такое не о каждом говорят !Я новичок в этом деле . сейчас на пенсии 12 мая мне был юбилей — исполнилось 75 лет. Не пугайтесь голова у меня светлая , но практики на комп нет . Как видите , ранее я с компьютором не имела.дела
Лидия,Вы меня поразили. Не каждый человек даже в 50 лет может освоить компьютер. У меня масса таких знакомых.Это замечательно,что у Вас есть желание овладеть программой фотошоп.У Вас обязательно получится эта анимация. Посмотрите в окне анимации, какое время стоит на каждом кадре. Вполне возможно, что Вам нужно поставить не 0,15 сек, как у меня, а больше, например 2 сек.И с пункта 5 выполните все очень внимательно, чтобы каждому кадру в окне анимации соответствовал только один слой в окне слоев.Лидия,может быть у Вас есть скайп, по нему можно посмотреть и подсказать, если где-то ошибка.
Скайп у меня есть Пароль : lidia_pozhidaeva . Чёрточка внизу. Сегодня я освоила успешно Ваш урок с водой. Сделала водопад и радовалась как ребёнок тому , что получилось. А вот где надо будет вставлять в основную картинку — картинку на прозрачном фоне- это везде будет проблема. Таким образом в уроке с салютом тоже на получилось не вставила над городом его. Кстати,под панелью параметров есть там то , что Вы писали мне Не удивляйтесь моим увлечением . Люблю познавать . Ведь я 2 института одолела , а здесь я оказалась профаном . И если Вы мне не поможете — ничего не будет.
Лидия, салют можно вставить, как и бабочку,»редактирование-скопировать совмещенные данные».Можно и передвигать его, только, чтобы в окне слоев все слои салюта были выделены.
Мне всё понятно . Уроки ваши прекрасные . Вы даёте всё пошагово . Это , конечно , облегчает труд. Мне только вот не понятно. Почему у вас в уроке в окне слоёв восемь слоёв , а у меня всегда четыре.. Или я какой — то шаг пропускаю или его просто нет . но ведь я внимательно изучила урок. если бы у меня в слоях было 4 слоя основной картинки и 4 слоя бабочки я уже давно бы справилась. Выделенные слои бабочки надо поднять по уроку вверх, но невозможно , ведь слоёв картинки нет.Где ж они . Вот беда! Как у вас слои все восемь в окне , а у меня всегда четыре?
