1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Adobe Photoshop

Создание анимации по временной шкале

На этой странице

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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

Сводная таблица

Читайте также: Создать коллаж из фотографий онлайн — ТОП-15 сервисов

СервисРусский языкИсходный файлУдобствоФункциональность
GifsВидео с компьютера, Youtube, Instagram++
FreeGifMakerИзображения с компьютера, видео с Youtube
MiniMultik+Изображения с компьютера, из интернета, с веб-камеры+
GifMakerИзображения с компьютера+
Mothereffing AnimatedGifИзображения с компьютера+
MakeAGifВидео с компьютера, Youtube, Facebook, изображения с компьютера, веб-камеры+
ImgFlipИзображения с компьютера, видео с компьютера и интернета
Picasion+Изображения с компьютера
GiphyИзображения и видео с компьютера и интернета++
Toolson+Изображения и видео с компьютера+

back to menu ↑ back to menu ↑

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

Перед созданием анимации необходимо подготовиться — включить отображение «Шкалы времени», которая помогает управлять кадрами в анимации.

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

Внизу окна в Photoshop должна появиться широкая строка, с помощью которой управляют кадрами в анимации.

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

Как первый кадр появится, можно приступить к созданию движения.

Что это такое

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

Чтобы создать анимированные интерфейсы, интерактивные прототипы, рекламные ролики, надо установить специальные программы: Adobe Animate или After Effects.

Читать еще:  Беседка своими руками (фото)

Для создания обычного веб-банера или презентации, не потребуется что-то специальное. Достаточно внимательно изучить тему «Как сделать анимацию в Фотошопе».

Рабочий процесс анимации временной шкалы

Чтобы анимировать содержимое слоя в режиме временной шкалы, ключевые кадры на панели «Шкала времени» устанавливаются при перемещении индикатора текущего времени к другому времени (или кадру), а затем изменяется положение, непрозрачность или стиль содержимого слоя. Последовательность кадров между двумя существующими кадрами автоматически добавляется или изменяется, равномерно меняя параметры слоя (положение, непрозрачность и стиль) между новыми кадрами, чтобы создать впечатление движения.

Например, если необходимо, чтобы слой постепенно исчезал, установите непрозрачность слоя в начальном кадре на 100 % и щелкните секундомер непрозрачности для этого слоя. Затем переместите индикатор текущего времени на время или кадр, который нужно считать конечным и установите непрозрачность того же слоя равной 0 %. Кадры между начальным и конечным будут автоматически интерполированы, и непрозрачность новых кадров будет равномерно снижена.

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

Для создания анимации в формате SWF используйте приложения Adobe Flash, Adobe After Effects или Adobe Illustrator.

Для создания анимации во временной шкале используется следующий общий рабочий процесс.

1. Создайте новый документ.

Задайте размер и содержимое фона. Убедитесь, что попикселные пропорции и размерности соответствуют назначению анимации. Должен быть установлен цветовой режим RGB. Если нет особых причин для изменения, оставьте разрешение 72 ppi, битовую глубину 8 бит/канал и квадратную попикселную пропорцию.

Убедитесь, что панель «Шкала времени» открыта. В случае необходимости нажмите стрелку вниз в середине панели, выберите «Создать временную шкалу для видео» в меню, а затем, нажмите кнопку слева от стрелки. Если панель «Шкала времени» находится в режиме анимации кадра, нажмите значок «Преобразовать в шкалу времени видео» в левом нижнем углу панели.

Читать еще:  Как сделать подарок маме - 125 фото и видео варианты изготовления своими руками

2. Задайте частоту смены кадров на шкале времени в меню панели.

Укажите длительность и частоту кадров. См. раздел Задание длительности и частоты кадров.

3. Добавьте слой.

Слои заднего плана нельзя анимировать. Если требуется анимировать содержимое, преобразуйте задний план в обычный слой или добавьте любой из следующих элементов:

Новый слой для добавления содержимого.

Новый видеослой для добавления видеосодержимого.

Новый пустой видеослой для клонирования содержимого или создания рисованной анимации.

4. Добавьте содержимое к слою.

5. Добавьте слой-маску (необязательно).

Слой-маска может использоваться для отображения части содержимого слоя. Слой-маску можно анимировать для отображения разных частей содержимого слоя в разное время. См. раздел Добавление слой-маски.

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

7. Включите установку ключевых кадров для параметра слоя.

Щелкните треугольник рядом с именем слоя. Треугольник с основанием вниз выводит список параметров слоя. Затем щелкните значок «Секундомер», чтобы установить первый ключевой кадр для параметра слоя, который необходимо анимировать. Можно устанавливать ключевые кадры одновременно для нескольких параметров.

8. Переместите индикатор текущего времени и измените параметр слоя.

Переместите индикатор текущего времени на время или кадр, где свойство слоя изменяется. Выполните одно или несколько следующих действий.

Измените положение слоя, чтобы создать впечатление движения содержимого.

Измените непрозрачность слоя, чтобы содержимое постепенно возникало или исчезало.

Измените положение слой-маски, чтобы отобразить разные части слоя.

Включите или отключите слой-маску.

Для некоторых типов анимации, например, для изменения цвета объекта или полного изменения содержимого в кадре, необходимы дополнительные слои с новым содержимым.

При анимации фигур с помощью значка «Секундомер» для свойств «Положение векторной маски» или «Включить векторную маску» анимируется векторная маска, а не слой фигуры.

9. Добавьте дополнительные слои с содержимым и при необходимости измените их параметры.

Читать еще:  Как сделать страницу стартовой: 60 фото настройки и изменения Яндекс и Google

10. Переместите или отрегулируйте полосу длительности слоя, чтобы задать время появления слоя в анимации.

11. Просмотрите анимацию.

Для воспроизведения анимации используйте элементы управления панели «Шкала времени». Затем просмотрите анимацию в браузере. Просмотреть анимацию можно также в диалоговом окне «Сохранить для Web». См. раздел Просмотр видео или анимации по временной шкале.

12. Сохраните анимацию.

Анимацию можно сохранить в виде анимированного GIF-файла с помощью команды «Сохранить для Web» или в виде последовательности изображений или видео с помощью команды «Просмотреть видео». Вы можете также сохранить ее в формате PSD, который можно импортировать в приложение Adobe After Effects.

Промежуточные кадры

В Photoshop анимируют двумя способами:

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

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

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

После добавления нового кадра переключаюсь на первый и убираю видимость слоя с балалайкой. Также можно задать непрозрачность слоя 0%.

На следующем кадре проверяю, виден ли слой с балалайкой.

После работы с изображением балалайки настраиваю появление текстовой строки. В первом кадре я выделяю текст «Soul sings» и сдвигаю его вправо за пределы макета. С текстом «3 strings» поступаю так же — сдвигаю влево, пока он не исчезнет.

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector