Как быстро создать GIF анимацию в Photoshop.
Ранее на сайте мы рассматривали сторонние , однако большинство из них запросто может заменить обычный Фотошоп. Анимированные GIF файлы с его помощью делаются достаточно легко и быстро. Они, как правило, состоят из нескольких изображений (кадров), которые при пошаговой смене и образуют финальный результат. Сегодня постараемся максимально детально рассмотреть данный вопрос от А до Я:
Скриншоты ниже представлены из Photoshop СС, но работа с GIF анимацией в CS6 и других версиях программы плюс-минус аналогична. Возможно, визуально инструменты будут немного отличаться, но в целом, принцип и алгоритм действий похожие. В качестве примера рассмотрим тривиальную задачу как создать GIF анимацию в Фотошопе из фотографий, сменяющих друг друга. Недавно с помощью этого руководства сделал гифку о своих приключениях для итогового поста за 2016 год в персональном блоге.
Процесс занял буквально минут 5-10. Тут важно просто внимательно выполнять все шаги. В конце поста найдете англоязычный видеоурок по данной теме.
Добавление изображений GIF анимации в Photoshop
Первым делом нужно загрузить в графический редактор все картинки/фото, которые будут участвовать в анимации. Добавьте их в один проект разными слоями — этот будут кадры для результирующего GIF файла. Проверьте размеры картинок и их отображение чтобы все было как вам нужно. Слои можно скрывать (с помощью иконки глаза слева от слоя) дабы просматривать все объекты.
В центре данной панели есть выпадающий список, где нужно выбрать вариант «Create Frame Animation» и кликнуть по кнопке. В результате этого действия Timeline немного преобразится, и вы должны увидеть в качестве первого кадра картинку из самого верхнего слоя.
На следующем шаге выделяете все слои в проекте (кликаете по ним удерживая клавишу Ctrl). После этого открываете контекстное меню в правом верхнем углу окна Timeline и по выбираете «Make Frames From Layers».
Из всех видимых и выделенных слоев Adobe Photoshop создаст кадры анимированного GIF. В результате увидите их в панели Timeline.
Настройки GIF анимации в Фотошопе
Здесь вам нужно будет указать 2 вещи: продолжительность отображения разных кадров + число повторений гифки. Начнем с первого. Под каждым объектом-картинкой в Timeline найдете время показа и стрелочку вниз. Кликаете по ним и во всплывающем меню выбираете длительность карда.
Элементам можно указывать разное время либо задать параметр одновременно для нескольких из них (совместное выделение как и в слоях — с помощью Ctrl).
Чтобы «зациклить» GIF в Фотошопе при создании анимации выбираете значение Forever в соответствующей настройке как показано на скриншоте ниже.
Тамже есть возможность указать любое нужное вам число повторений. Рядом находится кнопка Play, позволяющая проиграть анимированный GIF и посмотреть как будет выглядеть итоговый результат.
Сохранение GIF анимации в Фотошоп
В финальной части нашего руководства рассмотрим как правильно сохранить GIF анимацию в Фотошопе. Для этой цели используется знакомый всем инструмент Save for Web, однако в последних версиях Adobe Photoshop СС он располагается в новом месте меню (File — Export). К счастью Alt + Shift + Ctrl + S все еще работает.
В открывшемся окне настроек надо выбрать формат GIF, а также убедиться, что настройка Looping Options установлена в Forever. В нижнем правом углу окна есть возможность запустить созданный вами анимированный GIF в Photoshop для предпросмотра.
Если все функционирует так, как нужно, кликаете Save и сохраняете файл на локальном компьютере. Чтобы проверить работоспособность GIF требуется открывать его в браузере, т.к. встроенный просмотрщик Windows анимацию не проигрывает.
Кстати вы также легко можете экспортировать ваш проект в видео формат. Порядок действий аналогичный как при сохранении GIF анимации, но в Фотошоп меню выбираете пункт File — Export — Render Video.
В открывшемся окне будут разные настройки видео, но ничего дополнительно менять не нужно, просто кликаете по кнопке Render. В итоге получите mp4 файл со слайдшоу фотографий/изображений.
Напоследок предлагаем глянуть англоязычный видеоурок про создание анимированных GIF в Photoshop. Алгоритм работы там такой же, как и в статье, но возможно, вам будет проще воспринимать информацию по видео.
Если у вас остались еще какие-то вопросы о том как сделать GIF анимацию в Фотошопе или есть дополнения, пишите в комментариях.
В этом уроке мы рассмотрим базовый процесс создания анимации в программе Adobe Photoshop.
Финальный результат
Создаем новый файл с размерами 700 x 300 px.
Открываем окно Timeline (Window - Timeline (Окно - Шкала времени)).
Нажимаем на кнопку «Create Frame Animation » (Создать анимацию кадра).
Используя инструмент «Type Tool (Инструмент «Горизонтальный текст» | «T») создаем 3 слоя с текстом («Анимация», «это», «просто»).
Инструментом «Move Tool » (Инструмент «Перемещение» | «V») размещаем текст как на изображении ниже.
В окне Timeline (Шкала времени) выбираем первый кадр и нажимаем на кнопку «Duplicates selected frames » (Создание копии выделенных кадров).
Создаем 4 копии выделенных кадров.
Выбираем в окне Timeline (Шкала времени) второй кадр и оставляем видимыми только слои «Анимация » и «Фон ».
Выбираем четвертый кадр и оставляем в нем видимыми все слои.
Зададим параметр повтора нашей анимации. В меню окна Timeline (Шкала времени), меняем параметр повтора с «Однократно » на «Постоянно » (изображении ниже).
Теперь мы можем использовать запуск воспроизведения анимации.
Файлы в формате GIF повсюду. Некогда скромные анимированные изображения теперь являются неофициальным языком интернета. GIF анимация — это самый быстрый способ выразить эмоции в Twitter, а ещё мы можем тратить часы на её просмотр пролистывая ленту новостей в VK, Facebook или Одноклассниках.
Существует достаточно большое количество сайтов, на которых можно найти уже готовые гифки на самые различные тематики. Но ничто не сравнится с GIF анимацией, которая сделана своими собственными руками. Думаете, что это сложный процесс? Вы ошибаетесь, это довольно просто. Быстро создать GIF анимацию можно в графическом редакторе Photoshop, конвертируя уже существующее видео, либо используя серию статических изображений. Давайте рассмотрим подробнее, как это делается.
Примечание: Во всех примерах из этой статьи я использую Photoshop CC 2017.
Как создать GIF анимацию из видео
Для начала необходимо запустить Photoshop, перейти в «Файл» > «Импортировать» > «Кадры видео в слои» и выбрать необходимую видеозапись.
В открывшемся диалоговом окне можно будет выполнить импорт всей видеозаписи, либо выбрать только её определённую часть. Если вы выберете второй вариант, перетащите ручки под окном предварительного просмотра, чтобы установить начальную и конечную точки. Часть видеозаписи, находящаяся между этими ручками, будет импортирована.
Примечание: Имейте в виду, что чем больше видео, которое вы импортируете, тем больше будет ваш GIF. Также, если вы импортируете слишком длинную видеозапись, выбор «Оставить каждый 2 Кадры» (или больше) — это простой способ уменьшить размер, не слишком сильно влияя на качество.
Убедитесь, что установлена галочка в окошке «Создать покадровую анимацию», затем нажмите «OK». Начнется процесс импортирования видеозаписи. Это может занять некоторое время, в зависимости от размера клипа. После завершения импорта откроется рабочая область, в которой каждый кадр видеозаписи будет размещен на собственном слое.
В нижней части экрана находится палитра шкала времени. Она показывает все кадры, из которых будет состоять ваша GIF анимация.
Вы можете добавлять и удалять кадры по своему усмотрению, или редактировать любой из существующих слоев так же, как редактируете слои на любом другом изображении. Для предварительного просмотра вашей GIF-анимации просто нажмите кнопку «Воспроизвести» внизу шкалы времени.
В итоге должно получиться что-то вроде этого:
Создание GIF анимации из серии статических изображений
Если у вас нет видеозаписи для использования её в качестве основы для вашей GIF анимации, вы сможете создать её вручную из серии статических изображений. Это немного сложнее, особенно если вы хотите сделать что-то крутое, но основной процесс прост.
Вы создаёте свой GIF из одного файла изображения, содержащего несколько слоев. Каждый слой – это отдельный кадр вашей будущей анимации. Существует два способа начать работу:
- Если вы уже создали изображения для своей анимации, импортируйте их, выбрав «Файл» > «Сценарии» > «Загрузить файлы в стек…». Нажмите «Обзор» и выберите свои изображения, затем нажмите «ОК». Каждое изображение будет помещено на отдельный слой внутри одного и того же файла.
- Если вы еще не создали изображения, сделайте это сейчас. Помните, что каждое отдельное изображение — это часть будущей анимации.
Теперь вы готовы начать создавать анимацию.
Анимирование статических изображений
Вот как это работает. Когда вы вручную создаете кадр анимации, в него включается каждый видимый слой. Слои, которые отключены, не будут участвовать в создаваемом кадре.
Для создания первого кадра сделайте самый первый слой видимым, а все остальные отключите. Затем, создавая второй кадр, сделайте второй слой видимым, а затем третий слой в третьем кадре и так далее. Когда вы начнете, всё станет понятнее.
Для начала создания анимации откройте шкалу времени, если она у вас не открылась автоматически. Для этого в верхней панели нажмите «Окно» и в открывшемся меню выберите «Шкала времени». В центре раскрывшейся панели нажмите «Создать анимацию кадра». Это действие приведёт к созданию первого кадра вашей анимации. В палитре «Слои» скройте слои, которые не должны быть частью кадра.
Теперь нажмите кнопку «Новый кадр», которая будет дублировать предыдущий кадр. Еще раз скройте лишние слои, а те, которые должны участвовать в кадре, сделайте видимыми.
Повторяйте этот процесс, пока не добавите все необходимые для анимации кадры.
Завершение
В завершение, установите время отображения каждого кадра. Выделите первый кадр, а затем щелкните по последнему с зажатой кнопкой «Shift», для того чтобы выделить их все. Теперь щелкните стрелку вниз под одним из кадров и выберите задержку. Отсутствие задержки означает, что анимация будет работать быстро, в то время как установленное количество секунд заставит кадры оставаться на экране в течение заданного периода времени.
Наконец, установите параметры цикла, которые вы найдете в нижней части панели «Шкала времени». Этот параметр отвечает за то, сколько раз будет воспроизводиться ваша анимация. В большинстве случаев вы будете выбирать вариант «Всегда».
Теперь нажмите кнопку «Воспроизвести» в нижней части экрана, чтобы просмотреть получившуюся анимацию. Вы должны увидеть что-то вроде этого:
Вы можете редактировать кадры, просто выбирая их и меняя видимость слоёв (вы также можете изменить непрозрачность или сделать другие более сложные настройки). Добавьте дополнительные слои, если они вам нужны, или нажмите значок корзины, чтобы удалить их.
Когда вы будете довольны получившимся результатом, можете переходить к разделу «Сохранение анимации», либо читайте дальше, чтобы улучшить получившуюся анимацию.
Усовершенствование анимации путём добавления промежуточных кадров
Photoshop поддерживает мощную анимационную функцию создания промежуточных кадров. Это позволяет создавать более плавные анимации, автоматически генерируя переходные кадры между двумя существующими кадрами. В этом примере я собираюсь обойти все кадры, чтобы придать звездному небу эффект мерцания.
Для начала выберите первый кадр и нажмите кнопку «Создание промежуточных кадров» панели инструментов в нижней части шкалы времени.
В открывшемся диалоговом окне установите пункт «Промежуточные кадры» в значение «Следующий кадр», а для пункта «Добавить кадров» укажите значение по своему усмотрению. Более высокое значение означает более плавный, но медленный переход. Нажмите «OK», чтобы создать промежуточные кадры.
Теперь повторите этот процесс для других исходных кадров, которые вы добавили. Когда доберётесь до последнего, установите «Промежуточные кадры» в значение «Первый кадр». Это поможет создать плавный переход к началу цикла вашей анимации.
Нажмите кнопку воспроизведения, чтобы просмотреть эффект.
Сохранение анимации
Когда вы закончите, сначала сохраните файл в формате «.PSD». Это сохранит всю информацию о слоях и анимации для того, чтобы вы смогли позже отредактировать вашу анимацию, если потребуется. После этого можно переходить непосредственно к сохранению.
Для сохранения созданной анимации перейдите в «Файл» > «Экспортировать» > «Сохранить для Web (старая версия)…». В открывшемся окне выберите формат GIF, а в поле «Цвета» укажите 256. Для того, чтобы уменьшить общий размер файла, уменьшите размер в поле «Размер изображения».
Вы cможете увидеть, размер анимации в левом нижнем углу окна предварительного просмотра. Если он слишком большой, перетащите ползунок «Потери» вправо. Это повлияет на качество, но значительно уменьшит размер файла.
Шаг 1
Нажмите клавиши (Ctrl+N), чтобы создать новый документ со следующими размерами 500 x 500 px ; разрешение 300 dpi .
Шаг 2
Шаг 3
Примените масштабирование к изображению, чтобы заполнить полностью рабочее пространство, а затем нажмите клавишу (Enter ).
Шаг 4
Щёлкните правой кнопкой мыши по слою с изображением и в появившемся окне, выберите опцию Растрировать слой (Rasterize Layer).
Шаг 5
Нажмите клавишу "М ", а затем с помощью инструмента выделения, выделите полностью холст.
Шаг 6
Чтобы кадрировать изображение, щёлкните правой кнопкой мыши по области выделения и в появившемся окне, выберите опцию Вырезать на новый слой (Layer Via Cut).
Шаг 7
Перейдите на пустой слой, а затем нажмите значок Удалить слой (Delete) в нижней части панели слоёв.
Шаг 8
Дважды щёлкните по названию нового слоя, чтобы переименовать его в "Placeholder".
Шаг 9
2. Создаём Кадры и Элементы Анимации
Шаг 1
Теперь нам нужно создать кадры для нашей будущей анимации. Создайте семь дубликатов вашего смарт-объекта, для этого щёлкните правой кнопкой по слою и в появившемся окне, выберите опцию Создать дубликат слоя (Duplicate).
Шаг 2
Переименуйте дубликаты слоёв в соответствии с последовательностью кадров.
Шаг 3
Отключите видимость всех слоёв за исключением второго кадра.
Шаг 4
Находясь на слое со вторым кадром, нажмите клавиши (Ctrl+T ), а затем в верхней панели управлении, нажмите значок Переключения между режимами Деформации (Warp).
Шаг 5
Потяните опорные точки в стороны для деформации сторон, чтобы изображение выглядело растянутым.
Шаг 6
Включите видимость следующего слоя, а затем растяните изображение таким же образом с помощью инструмента Деформация (Warp Tool).
Шаг 7
Немного растяните следующий слой с помощью инструмента Деформация (Warp Tool).
Шаг 8
Перейдите на следующий слой, нажмите клавиши (Ctrl+T), а затем идём Редактирование - Трансформация - Искажение (Edit > Transform > Distort).
Шаг 9
Удерживая клавишу (Shift ), сместите верхнюю правую точку на -2° , а нижнюю правую точку на 2° . Нажмите клавишу (Enter ).
Шаг 10
Каналов (Channels) Зелёный (Green) и Синий (Blue).
Шаг 11
Перейдите на следующий слой. С помощью инструмента Трансформации (Transform Tool) в режиме Искажения (Distort), сместите верхнюю левую точку на 2° и нижнюю правую точку на 2° . Нажмите клавишу (Enter ).
Шаг 12
Дважды щёлкните по этому же самому слою и в появившемся окне, уберите галочки в окошках Каналов (Channels) Красный (Red) и Синий (Blue).
Шаг 13
Перейдите на самый последний слой, поменяйте режим наложения для данного слоя на Жёсткое смешение (Hard Mix).
Шаг 14
Теперь нам нужно создать текстуру ТВ-линий. Нажмите клавишу "U ", а затем создайте прямоугольник со следующими размерами: Ширина (Width): 500 px; Высота (Height): 4рх.
Шаг 15
Сместите прямоугольник в верхнюю часть холста.
Шаг 16
Продублируйте прямоугольник, а затем сместите дубликат прямоугольника на 8рх Shift ).
Шаг 17
Теперь вам нужно создать ещё больше дубликатов прямоугольников, пока вы не заполните полностью холст.
Шаг 18
Удерживая клавишу (Shift ), выделите все слои с прямоугольниками, а затем щёлкните правой кнопкой по выделенным слоям и в появившемся окне, выберите опцию Растрировать слой (Rasterize Layer).
Шаг 19
Шаг 20
Продублируйте наш объединённый слой с прямоугольниками. Удерживая клавишу (Shift ), сместите дубликат слоя на 504 px вверх.
Шаг 21
Теперь объедините оба слоя. Назовите объединённый слой ТВ текстура (Tv Texture).
Шаг 22
Поменяйте режим наложения для слоя ТВ текстура (Tv Texture) на Перекрытие (Overlay), а затем уменьшите Непрозрачность (Opacity) слоя до 15%.
Шаг 23
Создайте новый слой (Shift+Ctrl+N ), назовите этот слой "Frame ", а затем залейте его чёрным цветом. Уменьшите значение Заливки (Fill) для данного слоя до 0% .
Шаг 24
Дважды щёлкните по слою с чёрной заливкой, чтобы открыть окно стилей слоя. Добавьте стиль слоя Обводка (Stroke). Установите следующие настройки для данного стиля слоя: Размер (Size): 25 px; Положение (Position): Внутри (Inside); цвет чёрный.
Шаг 25
Теперь нам нужно растрировать стиль слоя, для этого, щёлкните правой кнопкой по слою и в появившемся окне, выберите опцию Растрировать стиль слоя (Rasterize Layer Style).
Шаг 26
Шаг 27
Примените масштабирование к слою (Ctrl+T ), чтобы заполнить весь холст, при масштабировании удерживайте клавишу (Shift ).
3. Создаём Анимацию
Шаг 1
Теперь мы готовы к созданию нашей анимации. Идём Окно - Шкала времени (Window > Timeline), а затем щёлкните по выпадающему меню, чтобы выбрать опцию Создать шкалу времени для видео (Create Video Timeline). Примечание переводчика: в более ранних версиях Photoshop, панель Timeline можно активировать через Окно - Анимация (Window > Timeline).
Шаг 2
Включите видимость первого и второго кадра, а затем перейдите на слой со вторым кадром и переходим в панель Шкала времени (Timeline).
Шаг 3
Уменьшите Непрозрачность (Opacity) слоя со вторым кадром "Frame 02" до 0% .
Шаг 4
Откройте второй кадр в панели Шкала времени (Timeline), а затем установите Индикатор времени (Time Indicator) на 0:00:00:05 .
Шаг 5
Теперь нам нужно создать первый ключевой кадр. Щёлкните по значку Таймера (Timer) рядом с Непрозрачностью (Opacity), чтобы создать первый ключевой кадр.
Шаг 6
Сместите Индикатор времени (Time Indicator) на 0:00:00:13 , а затем увеличьте Непрозрачность (Opacity) слоя до 100% .
Шаг 7
После этого, сместите Индикатор времени (Time Indicator) на 0:00:00:20 , а затем уменьшите Непрозрачность (Opacity) слоя до 0% .
Шаг 8
Перейдите на следующий слой, а затем уменьшите Непрозрачность (Opacity) слоя до 0% . После этого, создайте три ключевых кадра, меняя непрозрачность таким же образом, как мы проделывали ранее, на отметках 0:00:00:13 , 0:00:00:20 и 0:00:00:26 .
Шаг 9
Выделите три кадра в панели Шкала времени (Timeline), а затем щёлкните правой кнопкой мыши по выделенным слоям и в появившемся окне, выберите опцию Скопировать (Copy).
Шаг 10
Сдвиньте Индикатор времени (Timeline Indicator) на 0:00:01:00 , а затем щёлкните по новому кадру, чтобы выделить его, далее, вклейте ваши ключевые кадры (Ctrl+V ).
Шаг 11
После этого, сдвиньте Индикатор времени (Timeline Indicator) на 0:00:02:00 и вклейте ещё раз ваши ключевые кадры. Сдвиньте первый ключевой кадр на 0:00:00:24 , а последний ключевой кадр 0:00:02:20 . Таким образом, мы можем добавить разнообразия к использованию нашего слоя.
Шаг 12
Теперь нам нужно сдвинуть Индикатор времени (Timeline Indicator) на 0:00:03:10 и ещё один раз вклеить ключевые кадры. После этого, сдвиньте первый кадр на 0:00:03:13 , а последний кадр на 0:00:03:21 .
Шаг 13
Давайте применим анимацию к нашим следующим слоям. Выделите слой "Frame 04", а затем уменьшите значение Непрозрачности (Opacity) слоя до 0% . После этого, добавьте две короткие последовательности из ключевых кадров, как мы делали это ранее, с центральными ключевыми кадрами на отметках 0:00:00:18 и 0:00:01:03 .
Шаг 14
Добавьте ещё одну последовательность ключевых кадров на отметке 0:00:03:00 с центральным ключевым кадром на отметке 0:00:03:05 и заключительным ключевым кадром на отметке 0:00:03:20 .
Шаг 15
Создайте копию ключевых кадров, которые мы только что создали, а затем сместите копию на отметку 00:00:04:00 .
Шаг 16
Выделите следующий слой в панели слоёв, уменьшите значение Непрозрачности (Opacity) для этого слоя до 0% . После этого, добавьте три короткие последовательности из ключевых кадров, как мы делали это ранее, с центральными ключевыми кадрами на отметках 0:00:00:15 , 0:00:01:00 и 0:00:01:15 .
Шаг 17
Добавьте ещё одну последовательность их ключевых кадров с отметками на 0:00:02:15 , 0:00:02:20 и 0:00:03:20 .
Шаг 18
Теперь нам нужно создать анимацию для следующего слоя. Уменьшите Непрозрачность (Opacity) слоя "Frame 06" до 0% , а затем создайте три короткие последовательности из ключевых кадров с центральными ключевыми кадрами на отметках 0:00:01:00 , 0:00:01:15 и 0:00:02:00 .
Шаг 19
Скопируйте ключевые кадры, а затем вклейте к первому ключевому кадру на отметке 0:00:03:00 .
Шаг 20
Выделите последний слой в панели слоёв, уменьшите значение Непрозрачности (Opacity) для этого слоя до 0% . После этого, добавьте три короткие последовательности из ключевых кадров на отметках 0:00:00:15 , 0:00:00:18 и 0:00:00:22 .
Шаг 21
Создайте две копии ключевых кадров, а затем сместите копии на отметки: 0:00:01:24 и 0:00:01:24 .
Шаг 22
Создайте копию последних последовательностей из ключевых кадров, а затем сместите эту копию на отметку 0:00:03:10 .
Шаг 23
Теперь нам нужно создать анимацию для нашей ТВ текстуры (TV texture). Перейдите на данный слой, а затем сместите значок Таймера (Timer) на нулевую позицию, чтобы создать первый ключевой кадр на отметке 0:00:00:00 .
Шаг 24
Сместите Индикатор времени (Time Indicator) до конца Шкалы времени (Timeline), а затем сместите слой на 500px вниз, при этом удерживая клавишу (Shift ).
4. Сохраняем Анимацию Как GIF Файл
Итак. наша анимация готова к рендерингу. Нажмите клавиши (Alt+Shift+Ctrl+S ), чтобы открыть окно Сохранить для Web (Save for Web), а затем установите в выпадающем меню Параметры повторов (Looping Option) на Постоянно (Forever). После этого вы можете сохранить анимацию в качестве gif файла. Вы можете также изменить размеры изображения, если хотите уменьшить размер gif файла.
5. Как Заменить Изображение, которое было использовано в Шаблоне
Шаг 1
Если вы хотите заменить изображение, которое было использовано в вашей анимации, то щёлкните правой кнопкой по слою "placeholder" и в появившемся окне, выберите опцию Редактировать содержимое (Edit Contents). Примечание переводчика: слой "placeholder" - это корневой слой в палитре слоёв.
Шаг 2
Поместите новое изображение поверх старого, а затем нажмите клавиши (Alt+F4 ), чтобы закрыть слой placeholder, а затем Сохраните (Save) изменения.
Отличная Работа, Мы Завершили Урок!
Таким образом, мы можем создать шаблон анимации в Adobe Photoshop, используя смарт-объекты.
Чтобы сделать анимацию не обязательно обладать какими-то феноменальными знаниями, нужно просто обладать необходимым инструментом. Таких инструментов для компьютера достаточно много, и самым известным из них является Adobe Photoshop. В этой статье будет показано, как можно быстро создать анимацию в фотошопе.
Подготовка холста и слоев
Для начала необходимо создать документ.
В появившемся диалоговом окне можно указать название, размеры и прочее. Все параметры устанавливаются на ваше усмотрение. После изменения этих параметров нажимаем «ОК».
После этого делаем несколько копий нашего слоя либо создаем новые слои. Для этого необходимо нажать на кнопку «Создать новый слой», которая расположена на панели слоев.
Эти слои в будущем будут кадрами вашей анимации.
Теперь вы можете нарисовать на них то, что будет изображено на вашей анимации. В данном случае это движущийся кубик. На каждом слое он смещается на несколько пикселей вправо.
Создание анимации
После того, как все ваши кадры готовы, можно приступить к созданию анимации, и для этого необходимо отобразить инструменты для анимации. Для этого надо во вкладке «Окно» включить рабочую среду «Движение» или временную шкалу.
Шкала времен обычно появляется в нужном формате кадров, но если этого не произошло, то просто нажмите на кнопку «Отобразить кадры», которая будет посередине.
Теперь добавляем столько кадров, сколько вам необходимо, нажатием на кнопку «Добавить кадр».
После этого на каждом кадре поочередно меняем видимость ваших слоев, оставляя видимым только нужный.
Все! Анимация готова. Вы можете просмотреть результат, нажав на кнопку «Запуск воспроизведения анимации». А после этого можете сохранить ее в формате *.gif.
Таким вот простым и хитрым, но проверенным способом мы сумели в фотошопе сделать gif анимацию. Конечно, ее можно значительно улучшить, сократив время кадров, добавляя больше кадров и делая целые шедевры, но это все зависит от ваших предпочтений и желаний.