Как сделать плавную анимацию в фотошопе

Обновлено: 21.11.2024

GIF, или «формат обмена графикой», представляет собой сжатый формат файла изображения, который позволяет использовать анимацию. Есть много способов создать GIF, но Photoshop — это быстро и просто, со встроенными инструментами для обработки изображений и анимации.

Как и классическая анимация, анимированный GIF состоит из серии неподвижных изображений, воспроизводимых последовательно, чтобы создать иллюзию движения. Найдите GIF-файл в Интернете и перетащите его в Photoshop, и вы увидите отдельные кадры, из которых состоит анимация. Именно эти кадры мы собираемся создать в этом уроке, чтобы анимировать убойный баннер в формате GIF.

Узнайте, как я создал этот GIF! Фото через Грэма Уизардо.

Без лишних слов, вот как создать анимированный GIF в Photoshop.

Шаг 1. Настройте размеры и разрешение документа Photoshop
—

Подготовьте документ заранее. Даже если ваша единственная цель — создать GIF-файл, которым можно поделиться с друзьями в социальных сетях, если размер ваших фотографий или видео диктует размер вашего документа, это может привести к тому, что файл будет больше, чем вам нужно, что приведет к плохому качеству. GIF. В целом, где-то в районе 600–800 пикселей нормально для квадратного изображения.

Настройте размеры, разрешение и цветовой режим документа Photoshop

Размеры

Для этого проекта мы работаем с рекламным баннером в формате GIF, который имеет стандартные рекомендации по размеру. Я выбрал макет 720×300. Убедитесь, что ваши единицы измерения указаны в пикселях.

Разрешение

Чтобы размер файла был как можно меньше, подойдет разрешение 150 пикселей. Я выбрал 300, так как знаю, что мой GIF не будет таким большим. Убедитесь, что ваши единицы измерения указаны в пикселях на дюйм.

Цветовой режим

Наконец, анимированные GIF-файлы создаются для экрана, поэтому установите цветовой режим на цвет RGB. Нажмите «Создать», чтобы открыть новый документ.

Шаг 2. Импортируйте файлы изображений в Photoshop
—

Файл > Скрипты > Загрузить файлы в стек…

Нажмите "Обзор", найдите изображения, при необходимости выровняйте их и нажмите "ОК".

Создание GIF из неподвижных изображений

Выберите «Файл» > «Сценарии» > «Загрузить файлы в стек» и нажмите кнопку «Обзор» в появившемся окне «Загрузить слои». Откроется окно Finder/Explorer, в котором вы можете просмотреть свои файлы и выбрать все, что вам нужно. Когда вы закончите, нажмите «Открыть», а затем «ОК» в следующем окне. Файлы будут импортированы в отдельный документ, из которого вы сможете выбрать все слои и перетащить их в свой рабочий документ.

Создание GIF из видео

Если вы конвертируете видео в GIF, выберите «Файл» > «Импорт» > «Видеокадр в слои».

Шаг 3. Откройте окно временной шкалы
—

Окно > Временная шкала

Настроить окно временной шкалы для покадровой анимации

Выберите «Окно» > «Временная шкала». Это откроет панель в нижней трети холста. В центре панели нажмите на стрелку, чтобы открыть раскрывающееся меню, и выберите «Создать анимацию кадра».

Шаг 4. Преобразуйте слои в кадры
—

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

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

Если вы уже заранее настроили неподвижные последовательные изображения (или работаете с импортированными видеокадрами, см. шаг 2), щелкните значок меню-гамбургера в правом верхнем углу панели временной шкалы. Выберите «Создать кадры из слоев». Вы увидите, как временная шкала заполняется кадрами из ваших слоев.

Шаг 5. Дублируйте кадры для создания анимации
—

Под временной шкалой находится панель инструментов, которая содержит (среди прочего) настройку цикла, кнопку предварительного просмотра и кнопку дублирования кадра

Если вы не настроили неподвижные изображения заранее или вам нужно настроить части анимации, созданной на шаге 4, вы можете создать анимацию вручную кадр за кадром (именно так я сделал свою анимацию). Для этого продублируйте последний кадр на временной шкале (щелкните значок выделенной страницы на панели инструментов под временной шкалой), внесите необходимые изменения в изображение и повторите.

Например, моя анимация представляет собой солнцезащитные очки, надвигающиеся на глаза модели. Для этого я продублировал рамку, сдвинул солнцезащитные очки на несколько пикселей вниз (насколько пикселей решали методом проб и ошибок — об этом позже) и повторял этот процесс до тех пор, пока у меня не было примерно пятнадцати кадров, а солнцезащитные очки не оказались там, где я хотел их, что привело к плавной анимации скольжения вниз.

Шаг 6. Установите время задержки каждого кадра
—

Настройка длительности находится внизу каждого кадра

Вы можете найти таймер задержки в нижней части каждого кадра (время в секундах со стрелкой раскрывающегося списка рядом с ним).

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

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

Совет. Большое количество кадров с короткими задержками – ключ к плавной анимации, тогда как небольшое количество кадров с длинными задержками создает прерывистый эффект покадровой анимации.

Шаг 7. Установите, сколько раз анимация будет повторяться
—

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

Шаг 8. Предварительный просмотр и повторение анимации
—

Кнопка воспроизведения на панели инструментов окна временной шкалы позволяет предварительно просмотреть анимацию. Используйте это, чтобы убедиться, что ваша анимация правдоподобна и ведет себя так, как должна. Если это не так, попробуйте изменить задержку или добавить больше кадров, пока не получите желаемый результат. И наоборот, сейчас самое время поэкспериментировать с удалением как можно большего количества кадров, не нарушая иллюзию движения, чтобы получить файл минимально возможного размера.

Шаг 9. Экспортируйте документ Photoshop в формате GIF
—

Файл > Экспорт > Сохранить для Интернета (предыдущая версия)…

Прежде всего, не забудьте сохранить рабочий PSD!

Когда вы будете готовы экспортировать окончательный вариант GIF, выберите «Файл» > «Экспорт» > «Сохранить для Интернета (предыдущая версия)». (Примечание: если вы работаете с более старой версией Photoshop, скорее всего, это будет «Файл» > «Сохранить для Интернета и устройств»). Откроется окно экспорта.

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

Уменьшить размер файла

Ваша основная цель с оставшимися параметрами – сохранить небольшой размер файла за счет уменьшения количества деталей в GIF без ущерба для качества изображения. Помните, что большой размер файла означает медленную загрузку, что может быть особенно неприятным для маркетинговых целей, таких как рекламные баннеры, когда зритель не искал ваш контент и не будет ждать его загрузки. Стремитесь оставаться ниже 1 МБ. До 5 МБ выполнимо на большинстве веб-сайтов, но это необходимо. Вы можете увидеть размер файла GIF в левом нижнем углу панели, содержащей изображение для предварительного просмотра.

Это параметры, на которые следует обратить внимание в окне "Сохранить для Интернета"

Уменьшить информацию о цвете

Ненужная информация о цвете является главной причиной большого размера файла. Чтобы сократить его, отрегулируйте общее количество цветов в раскрывающемся списке «Цвета:» и уменьшите настройку дизеринга (смешивания пикселей для создания плавного затенения) под ним. Внося изменения, следите за изображением предварительного просмотра GIF слева, чтобы увидеть, как изменяется разрешение.

Преобразовать в sRGB

sRGB или «Стандартный RGB» имеет более узкий диапазон цветов, чем Adobe RGB по умолчанию, поэтому обязательно установите этот флажок.

Когда вас устраивают разрешение и размер файла, нажмите кнопку "Сохранить" в нижней части окна. Чтобы убедиться, что все в порядке, вы можете предварительно просмотреть готовый GIF-файл, перетащив его в поле URL-адреса браузера.

Мой готовый рекламный баннер GIF. Фото через Грэма Уизардо.

Шаг 10. Поделитесь готовым GIF-файлом Photoshop!
—

Вот и готово ваше GIF-изображение, готовое к публикации во всемирной паутине. Теперь, когда у вас есть навыки создания базовых анимаций в Photoshop из видео и неподвижных изображений, вы можете оживить практически все!

Хотя этот метод полезен для быстрых и забавных GIF-файлов, GIF-файлы для профессиональных целей должны быть намного более надежными, чем моя глупая реклама солнцезащитных очков. Изучить программное обеспечение несложно, но анимация сама по себе — сложная форма искусства, требующая практики и опыта. Когда вы будете готовы улучшить свою GIF-игру, убедитесь, что вы работаете с профессионалом.

Ищете профессиональную помощь в создании анимации?
Поработайте с одним из наших талантливых дизайнеров!

Эта статья изначально была написана Ребеккой Крегер и опубликована в 2013 году. В нее добавлена ​​новая информация и примеры.

3D-функции Photoshop будут удалены в будущих обновлениях. Пользователям, работающим с 3D, рекомендуется изучить новую коллекцию Adobe Substance 3D, которая представляет новое поколение 3D-инструментов от Adobe.

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

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

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

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

Если вы хотите создать анимацию в формате SWF, используйте Adobe Flash, Adobe After Effects или Adobe Illustrator.

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

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

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

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

<р>2. Укажите «Установить частоту кадров временной шкалы» в меню панели.

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

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

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

Новый слой для добавления контента.

Новый видеослой для добавления видеоконтента.

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

<р>4. Добавьте содержимое в слой.

<р>5. (Необязательно) Добавьте маску слоя.

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

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

<р>7. Включите ключевые кадры для свойства слоя.

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

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

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

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

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

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

Включить или отключить маску слоя.

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

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

<р>9. Добавьте дополнительные слои с содержимым и при необходимости отредактируйте свойства их слоев.

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

<р>11. Предварительный просмотр анимации.

Используйте элементы управления на панели «Таймлайн», чтобы воспроизвести созданную анимацию. Затем просмотрите анимацию в веб-браузере. Вы также можете предварительно просмотреть анимацию в диалоговом окне «Сохранить для Интернета». См. Предварительный просмотр видео или анимации временной шкалы.

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

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

Вы можете анимировать различные свойства слоя, такие как положение, непрозрачность и стиль. Каждое изменение может происходить независимо от других изменений или одновременно с ними. Если вы хотите анимировать разные объекты независимо друг от друга, лучше всего создавать их на отдельных слоях.

Вот несколько примеров того, как можно анимировать свойства слоя:

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

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

Вы можете анимировать 3D-свойства, такие как объект и положение камеры. (Дополнительную информацию см. в разделе Создание 3D-анимации.)

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

Каждое свойство слоя имеет значок секундомера Time-Vary, который можно щелкнуть, чтобы начать анимацию. Когда секундомер активен для определенного свойства, Photoshop автоматически устанавливает новые ключевые кадры всякий раз, когда вы меняете текущее время и значение свойства. Когда секундомер для свойства неактивен, это свойство не имеет ключевых кадров. Если вы вводите значение свойства слоя, когда секундомер неактивен, это значение остается в силе на протяжении всего слоя. Если вы отмените выбор секундомера, вы навсегда удалите все ключевые кадры для этого свойства.

Выберите метод интерполяции

Интерполяция (иногда называемая tweening) описывает процесс заполнения неизвестными значениями двух известных значений. В цифровом видео и кино интерполяция обычно означает создание новых значений между двумя ключевыми кадрами. Например, чтобы переместить графический элемент на 50 пикселей влево в 15 кадрах, вы должны установить положение графики в первом и 15-м кадрах и пометить их как ключевые кадры. Photoshop интерполирует кадры между двумя ключевыми кадрами. Интерполяцию между ключевыми кадрами можно использовать для анимации движения, непрозрачности, стилей и глобального освещения.

На панели «Таймлайн» внешний вид ключевого кадра зависит от выбранного вами метода интерполяции для интервала между ключевыми кадрами.

Равномерно изменяет свойство анимации от одного ключевого кадра к другому. (Единственным исключением является свойство «Положение слоя-маски», которое резко переключается между включенным и отключенным состояниями.)

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

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

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

Начните с создания кадров анимации в Photoshop

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

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

Если вы не знаете, как перейти от точки А к точке Б в анимации, сначала начните с конечного кадра, а затем создайте первый кадр. Наконец, заполните промежуточные рамки.

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

Как анимировать последовательность изображений в Photoshop

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

  1. Нажмите «Файл», нажмите «Сценарии», затем нажмите «Загрузить файлы в стопку».
  2. Нажмите "Обзор" и выберите все кадры для анимации.
  3. Нажмите "ОК" и подождите, пока изображения загрузятся в отдельные слои.
  4. Нажмите "Окно", а затем "Временная шкала", чтобы открыть окно анимации.
  5. Нажмите стрелку раскрывающегося списка на панели временной шкалы и выберите «Создать покадровую анимацию».
  6. Нажмите «Создать покадровую анимацию».

Теперь у вас будет слой на временной шкале. Следующий шаг — превратить каждый из ваших слоев в новый кадр. Следуйте инструкциям ниже.

  1. Нажмите «Выбрать» вверху, а затем нажмите «Все слои».
  2. Нажмите значок меню из трех стопок в левой части панели временной шкалы.
  3. В появившемся меню нажмите «Создать новый слой для каждого нового кадра».
  4. Нажмите значок меню из трех стопок и выберите "Создать кадры из слоев".

Теперь все ваши изображения будут загружены в отдельные фреймы. Следующая задача — выбрать время, в течение которого будет воспроизводиться каждый кадр. Чтобы получить правильную скорость, может потребоваться некоторое тестирование, но вы можете выбрать время кадра для каждого отдельного кадра, щелкнув стрелку под каждым кадром рядом с текстом 0 секунд.

Вы можете поэкспериментировать с разным временем, но лучше начать с выбора одного и того же времени для каждого кадра. Если анимация содержит разные сцены или фазы анимации, вы можете настроить время для каждой из этих фаз/сцен по отдельности.

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

Переключение временной шкалы

Переключайте временную шкалу между покадровой шкалой времени и традиционной временной шкалой фильмов.

Величина воспроизведения

Изменить, будет ли анимация воспроизводиться вечно или в течение определенного количества циклов перед остановкой. Это повлияет на конечный результат после сохранения в формате GIF. Вы можете снова изменить этот параметр, прежде чем экспортировать анимацию позже.

Раскрывающийся список воспроизведения

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

Элементы управления воспроизведением

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

Твин

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

Дублировать кадр

Эта кнопка дублирует любой выделенный в данный момент кадр и размещает его на временной шкале после оригинала.

Удалить кадр

Эта опция удалит любой выбранный кадр.

Как экспортировать анимацию Photoshop

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

  1. Нажмите "Создать".
  2. Нажмите «Экспорт», а затем «Сохранить для Интернета (предыдущая версия)»…
  3. Если у вас есть анимация с детализированными цветами, выберите GIF 128 Dithered в раскрывающемся списке предустановок.
  4. Если у вас есть анимация с простыми блочными цветами, выберите GIF 128 без сглаживания.
  5. Убедитесь, что выбранный вами вариант установлен в параметрах цикла внизу.
  6. Наконец, нажмите «Сохранить…» и выберите место для сохранения GIF на своем компьютере.

Как сделать анимацию плавной в Photoshop

Если у вас нет опыта создания покадровой анимации, конечный результат может выглядеть немного дерганым. К счастью, вы можете использовать функцию Tween для автоматического заполнения пробелов в анимации, чтобы все выглядело более плавно.

Для этого, удерживая клавишу Shift, щелкните два отдельных кадра в окне временной шкалы и щелкните значок Tween. Затем щелкните, чтобы выбрать, будет ли параметр Tween использовать положение, непрозрачность или эффекты. Для большинства анимаций, основанных на движении, вам понадобится положение.

Убедитесь, что выбраны все слои, и нажмите OK. Повторите этот процесс для каждого сопряженного кадра. Например, кадры 1 и 2, затем кадры 3 и 4 и т. д.

Обзор

Мы надеемся, что наше руководство по анимации в Photoshop помогло. Если вам нужна дополнительная помощь, оставьте комментарий ниже.

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

Понравился ли вам этот совет? Если это так, загляните на наш канал YouTube на нашем родственном сайте Online Tech Tips. Мы охватываем Windows, Mac, программное обеспечение и приложения, а также предлагаем множество советов по устранению неполадок и обучающих видеороликов. Нажмите кнопку ниже, чтобы подписаться!

Это еще один из моих анти-туториалов, в котором я рассказываю, как я наткнулся на что-то. Это не обязательно то, как все должно быть сделано, и я буду рад любым отзывам от людей, которые действительно знают, что они делают.

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

Мне нужен Jif для письма

Как разработчик внешнего интерфейса, в настоящее время я в основном использую Photoshop для извлечения чего-либо, за исключением случаев, когда мне нужен анимированный GIF. Команда дизайнеров Envy недавно оформила подписку на Creative Cloud, так что у меня был первый опыт создания GIF в Photoshop CC. Мне нужно было одно для электронного письма, чтобы поделиться нашей замечательной страницей Year In Review за 2013 год для Code School.

Что это?

Это было выражение моего лица, когда я пытался открыть панель анимации. Он исчез, и я был напуган и растерян. Быстрый поиск в Google и несколько полезных людей сообщили мне, что теперь это называется «хронология». Однако это было только начало путаницы, поскольку это не тот инструмент для создания GIF, который вам нужен.

Восстановив свой поиск в Google, я решил посмотреть, как сделать простую анимацию GIF в CS6, и теперь я знал, как приступить к делу.

Супер Твининг™

Super Tweening™ – это, пожалуй, самая важная функция. Вам больше не нужно создавать несколько состояний слоя, а затем выбирать настройки для перехода между ними. Существуют встроенные функции, похожие на временную шкалу видео, которые позволяют плавно анимировать положение, непрозрачность и стиль. Сначала это сложно сделать, но, вероятно, это интуитивно понятно, если вы выросли на временной шкале видео.

Суть в том, что вы устанавливаете все так, как вы хотите, чтобы оно начиналось, а затем перетаскиваете линию очистки туда, где вы хотите, чтобы новое состояние (положение, непрозрачность, стиль) было завершено. После того, как вы перетащите ползунок, вы измените значения состояния. PS автоматически создает кадры, необходимые для плавного перехода.

Меньше делиться, больше действовать

Я получил разрешение от Джастина поделиться PSD-файлом, который я использовал для создания изображения для электронного письма, но я использую что-то немного другое для этого сообщения, потому что я хотел показать положение и непрозрачность.

Сначала сначала разочарование

Временная шкала по умолчанию составляет 5 секунд, и вы, вероятно, захотите изменить это значение. Сокращение временной шкалы очень интуитивно понятно: вы просто перетаскиваете перетаскиваемый элемент влево, и теперь у вас есть более короткая временная шкала. Если вы хотите сделать его длиннее, вы бы перетащили его вправо, верно? К сожалению нет. Я надеюсь, что меня исправит кто-то с опытом здесь, но проверка «помощи», гугление и небольшая сессия «пожалуйста, спасите меня» с Джастином заставили меня поверить, что единственный способ продлить временную шкалу — это индивидуально расширить доступную время для каждого элемента, например:

Примечание: это не был исходный GIF, я использовал LICEcap, который отлично подходит для скрининговых GIF (но не очень чистый).

Все это того стоит

Как только вы преодолеете эти начальные препятствия и сохраните свой первый GIF-файл, оно того стоит. Уровень управления и плавная анимация замечательны, и вы можете делать действительно классные вещи.

Планирование воздушных шаров, облаков и линий горизонта (о боже)

Чтобы показать крутость положения и непрозрачности, я решил запустить воздушный шар и пройти сквозь облако (изменив непрозрачность воздушного шара, когда он находится за облаком). Исходное состояние показано ниже. Потребовалось 3 состояния положения и 2 состояния непрозрачности на воздушном шаре, 2 состояния положения для облаков (для тонкого движения).

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

Вернув ползунок обратно в 0, я создал базовое положение для шара.

Через 4 секунды я хочу установить второе положение для шара.

На 7 секунде я переместил воздушный шар под облака и создал состояние непрозрачности 50%. Так как я не догадался установить его сначала, мне также пришлось вернуться и установить базовые состояния непрозрачности на 100%.

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

Получение GIFfy

Бум! У нас есть одна гифка чудовищных размеров! Этот пример немного вопиющий, но я подумал, что это будет весело. Если вы хотите поиграть с ним, у меня есть PSD на Dropbox. Тот, который я использовал, повторялся только один раз, но этот зациклен, чтобы вы могли увидеть его в действии.

Погрузитесь в хронологию, и когда вы сделаете что-то классное, я буду рад на это посмотреть. Пишите в комментариях или просто @dandenney в Твиттере.

Спасибо Джастину за активы и Крису Койеру за то, что поделился с нами пинком под зад. Когда Крис говорит "blogggg", вы ведете блог.

Читайте также: