Шкала времени в фотошопе: Создание анимации по временной шкале в Adobe Photoshop

Содержание

Шкала времени в фотошопе-инструмент создания продвинутой анимации

2021-01-19

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

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

Шкала времени в фотошопе — обзор инструмента
Шкала времени для видео
Типы слоев
Свойства слоя

Открыв панель шкалы времени (Окно> Шкала времени), вы можете выбрать один из двух типов шкалы времени: видео и анимации кадра. Последняя- покадровая анимация в фотошопе. Эта панель работает через преобразования слоев в панели слоев в отдельные кадры. Я не буду вдаваться в подробности по этой шкале времени; вместо этого я хотел бы сосредоточиться на шкале времени видео:

В Photoshop есть две шкалы времени. (Увеличенная версия)

Шкала времени для видео позволяет создавать keyframes анимацию, в которой можно определить ключевые точки вдоль шкалы времени, и Photoshop будет интерпретировать фреймы в промежутках между ними в сплошную анимацию. Давайте создадим простую анимацию, чтобы увидеть, как это работает:

В панели шкалы времени показан слой (1) со свойствами слоя (2). На шкале времени показан индикатор текущего времени (3) и существующие ключевые кадры (4). (Увеличенная версия)

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

Иконка секундомера выбрана для свойства «Позиция». Кадр автоматически добавляется на шкалу времени. (Увеличенная версия)

Перетяните индикатор текущего времени к другой точке на шкале и переместите слой. На шкалу времени будет автоматически добавлен еще один фрейм:

Перемещение слоя автоматически добавляет кадр в текущей точке индикатора шкалы времени. (Увеличенная версия)

При воспроизведении анимации показывается, как объект на холсте перемещается из одной позиции к другой:

Photoshop автоматически создает анимацию между кадрами.

Перед тем, как сделать анимацию в Фотошопе, мы рассмотрим все типы слоев и их свойства, которые можно применять для этого.
Стандартный (пиксельный) слой представляет собой слой, который содержит информацию пикселей. Это основной тип слоя в Photoshop.

Свойства для этого слоя:

Позиция;
Непрозрачность;
Стиль.

Стандартный слой на шкале времени со свойствами слоя.

Добавив к любому слою маску слоя или векторную маску, мы вводим дополнительные свойства, относящиеся к этой маске:

Положение слоя-маски;
Включить слой-маску.

Слой с маской слоя на шкале времени.

Слой с векторной маской на шкале времени.

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

Позиция;
Прозрачность;
Стиль;
Положение векторной маски;
Включить векторную маску.

Слой фигуры на шкале времени со свойствами слоя.

Текстовый слой содержит редактируемый текст. Если текст был растеризован, то он будет представлять собой стандартный слой с пиксельной информацией. Это нужно учитывать еще до того, как в Фотошопе сделать gif с анимацией.

Свойства текстового слоя включают в себя:

Перспектива;
Прозрачность;
Стиль;
Обтекание текстом.

Текстовый слой на шкале времени со свойствами слоя.

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

Перспектива;
Непрозрачность;
Стиль.

Текстовый слой на шкале времени с доступными свойствами.

Поскольку смарт-объект сохраняет оригинальное качество слоя то, его можно масштабировать без потери качества. Но он не может быть растянут больше, чем размеры исходного слоя, содержащегося в нем. Это привело бы к потере качества.

Я хотел бы также упомянуть еще о двух типах слоев — слой видео и 3D-слой. Оба этих слоя существенно отличаются от всех других, перечисленных ранее. Видео слой представляет собой группу слоев, которая содержит собственный набор свойств. 3D помимо того, что он содержит уникальный набор свойств, функционирует в среде совершенно отличающейся от других слоев, что делает его еще более сложным. На рисунках ниже вы можете увидеть, как оба слоя отображаются на шкале времени:

Группа видео слоев на шкале времени со свойствами слоя.

3D-слой на шкале времени со свойствами слоя.

Я советую вам перед тем, как сделать gif картинку в Фотошопе, ознакомиться с этими двумя типами слоев самостоятельно. Далее в этой статье я буду ориентироваться только на стандартные типы слоев, без видео и 3D.

Давайте рассмотрим основные свойства слоя, доступные для анимации.

Свойство «Позиция» позволяет перемещать объект вдоль осей X и Y. Управление позицией объекта осуществляется с помощью инструмента «Перемещение»:

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

Свойство «Непрозрачность» позволяет создавать кадры непрозрачности слоя. Оно доступно в панели слоев.

Свойство объекта «Непрозрачность» используется для создания эффекта растворения.

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

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

Положение слоя-маски или векторной маски задает ключевые кадры позиции масок по осям Х и Y. Лучше всего это работает, когда маска не связана со слоем:

Положение маски задает кадры для скрытия части слоя, под которым проявляется фоновый слой.

Также мы можем включать или отключать маску слоя или векторную маску. Чтобы включить или отключить маску слоя, перейдите в Слой> Слой-маска и выберите «Включить» или «Отключить». Для векторных масок перейдите в меню Слой> Векторная маска. Также можно, удерживая Shift кликнуть по маске слоя в палитре слоев, чтобы включить или отключить ее.

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

Специфическим для текстовых слоев является свойство «Обтекание текстом», которое позволяет задать кадры произвольной деформации, применяемой к слою с текстом. Основные эффекты деформации вы можете открыть, перейдя в меню Текст> Деформация текста.

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

Свойство «Перспектива» позволяет задать ключевые кадры преобразования слоя. Различные преобразования доступны в меню Редактирование> Трансформация.

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

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

Вадим Дворниковавтор-переводчик статьи «Creating Advanced Animations In Photoshop»

Урок 37. Часть 2. Временная шкала анимации._

Вы узнаете:

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

Урок состоит из следующих разделов:
1. Обучающее видео.
2. Переключение на временную шкалу.
3. Продолжительность и частота кадров анимации.
4. Параметры временной шкалы.
5. Анимация плавного перехода от одного изображения к другому.
6. Анимация движения слоя.
7. Анимация перехода к следующему кадру через белый цвет.
8. Анимация появления слоя слева.
9. Редактируем положение ключевых кадров.
10. Подрезка слоев.
11. Анимация размытия слоя.
12. Использование кальки.
13. Анимация маскирования.
14. Добавляем титры.
15. Анимация мерцания.
16. Анимация освещения.
17. Сохранение анимации.
18. Анимация 3D объектов.
19. Размеры баннеров.
20. Вопросы.
21. Домашнее задание.

Переключение на временную шкалу

Начиная с Photoshop CS3 к обычной покадровой анимации добавилась временная шкала. Это намного расширило возможности программы для создания анимации и видео. В этом режиме каждый слой палитры Layers (Слои) располагается на своей временной дорожке. Любые изменения палитры Layers (Слои) тут же отображаются в панели Анимации. Анимационная панель стала похожа на облегченную панель программы Adobe After Effects.

При создании нового документа в разделе Preset (Набор) выберите Film & Video (Фильмы и видео). Проследите, чтобы цветовой режим был RGB, разрешение 72 ppi, битовая глубина 8 бит/канал. Нажмите Advanced (Дополнительно) и выберите Pixel Aspect Ratio (Попиксельная пропорция) Square (Квадратные пикселы), если нет веских причин указать другой формат.

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

Или же, щелкнув по кнопке в панели анимации, выберите пункт Convert to Timeline (Преобразовать во временную шкалу). Следует иметь в виду: при переходе из анимации по временной шкале в покадровую анимацию существует вероятность потери ключевых кадров. Сама анимация при этом остается без изменений.

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

Продолжительность и частота кадров анимации

После выбора пункта Document Settings (Параметры документа) открывается окно настроек. Здесь вы можете изменить продолжительность анимации. Следует иметь в виду, что уменьшение продолжительности ранее созданного видео или анимации приведет к удалению кадров в конце документа. Ключевые кадры, попавшие в интервал уменьшения, тоже будут удалены.

При создании нового документа продолжительность временной шкалы по умолчанию устанавливается равной 10 секундам, а частота зависит от выбранного параметра Size (Размер) документа.

При выборе документа отличного от Film & Video (Фильмы и видео) – 30 кадров/сек.

Видео формата PAL — 25 кадров/ сек.

Видео формата NTSC — 29,97 кадров/ сек.

Кинофильм — 24 кадр/сек.

DVD-видео – может быть 25; 29,97 и 23,976.

Видео для Web (устанавливается самостоятельно)— от 10 до 15 кадр/сек.

Параметры временной шкалы

Предлагаю разобраться с временной шкалой на примере слайд-шоу. Для примера я выбрала несколько работ учеников к уроку «Инструменты выделения…». Предварительно я задала всем изображениям одинаковый размер 800х600 и разрешение 72.

Откройте файл слайд шоу.psd. В палитре Layers (Слои) находятся 8 слоев, включая фоновый слой. В панели Animation (Анимация) находится 7 слоев.

На Timeline (Временной шкале) в каждом слое есть анимируемые параметры:

Position (Позиция), Opacity (Непрозрачность), Style (Стиль) и Global Lighting (Глобальное освещение). Чтобы их увидеть, щелкните по стрелочке слева от слоя.

Вот так выглядит временная шкала анимации:

— Ключевой кадр.

— Enable Stopwatch (Включить секундомер).

Анимация плавного перехода от одного изображения к другому

Чтобы изменить любой из этих параметров установите индикатор времени на начальную точку и нажмите значок — появится ключевой кадр. Переместите индикатор времени на конечную точку и измените нужные параметры в палитре Layers (Слои) – появится второй ключевой кадр.

Откройте слой Ольга Ж. В нулевой точке времени нажмите на значок секундамера слева от Opacity (Непрозрачность) – появится ключевой кадр . Передвиньте индикатор времени на значение 01:00f. В палитре Layers (Слои) уменьшите значение непрозрачности до 0%. В месте пересечения индикатора текущего времени и слоя Opacity (Непрозрачность) появится второй ключевой кадр. Если сейчас нажать кнопку Play (Запуск анимации) или просто подвигать индикатор текущего времени, то вы заметите как первое изображение плавно откроет второй слой.

Анимация движения слоя

Перейдите к слою Надежда Д. Нажмите на значок секундомера слева от Position (Позиция). Передвиньте индикатор времени до значения 02:00.

Кстати,установить индикатор текущего времени можно более точным способом: Дважды кликните по строчке с цифрами, обозначающими время. Откроется окно Set Current Time (Задать точное время). Последние две цифры обозначают кадры в секунду. Предпоследние секунды. Если вам нужно точно рассположить индикатор времени на 2 секунды, то в этом поле должно быть написано: 0:00:02:00. Можете вручную исправить цифры, а можете ввести в это поле 60. Почему именно 60? Т.к. в данном документе по умолчанию стоит частота 30 кадров в сек, то две секунды составят 60 кадров. Если щелкнуть по значению текущего времени, удерживая нажатой клавишу Alt, то произойдет переключение между временным кодом и кадрами.

Итак, нужное время установлено. Выберите в панели инструментов Move (Перемещение). Сдвиньте слой Надежда Д по диагонали вправо и вниз за пределы изображения. Прокрутите анимацию.

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

Анимация перехода к следующему кадру через белый цвет

Переключитесь на слой Таня Р. Давайте сделаем модный переход через вспышку белого цвета. Этот эффект часто используется в рекламе для концентрации внимания.

Установите индикатор времени на 0:00:02:00. Нажмите на значок секундомера слева от Style (Стиль). Зайдите в меню и выберите пункт Cope Keyframe (Скопировать ключевой кадр). Переместите индикатор времени на отметку 2 секунды 15 кадров (0:00:02:15). В меню анимации выберите пункт Past Keyframe (Вставить ключевой кадр). Задайте время 0:00:02:20. Перейдите в палитру Layers (Слои). Откройте стили слоя двойным щелчком по слою Таня Р. Отметьте галочкой Color overlay (Наложение цвета). Зайдите в настроики и измените цвет на белый. Вернитесь в панель Анимации (время 0:00:02:20)и нажмите на значок секундомера слева от Opacity (Непрозрачность).

Передвиньте индикатор времени до значения 03:00. В палитре слои снизьте непрозрачность до 0.

Анимация появления слоя слева

В следующем слое (Юля Б) изменим позицию так, чтобы изображение откатывалось направо. Поставьте индикатор времени на отметку 3 сек. Создайте ключевой кадр, нажав на значок слева от Position (Позиция). Перейдите на отметку 4 сек. Выберите в панели инструментов Move (Перемещение). Сдвиньте слой вправо за пределы холста, удерживая клавишу Shift. Появится новый ключевой кадр.

Редактируем положение ключевых кадров

Проиграйте анимацию. В слоях Надежда Д и Юля Б переход начинается слишком рано. Мы не успеваем рассмотреть изображение, а оно уже начинает двигаться. Чтобы задержать внимание на картинке сдвиньте первые ключевые кадры на 15 кадров вправо. Это можно сделать простым перетаскиванием. Нажмите на ключевой кадр, чтобы он стал желтым. Желтый цвет говорит о том, что он выделен. Сместите индикатор времени на 15 кадров вправо.

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

Подрезка слоев

Следующий слой (Елена И ) подрежьте. Сначала установите индикатор времени на 5 сек. Затем наведите курсор на конец слоя. Курсор изменит свой вид на двухстороннию стрелочку. Зажмите левую кнопку мыши и потяните край влево до пересечения с индикатором. Запустив анимацмю вы увидите, что слой резко исчезнет на 5 секунде, открыв нижележащий слой. Одновременно можно подрезать несколько слоев, если предварительно выделить их при помощи Shift или Ctrl.

К сведению: удерживая клавишу Shift при нажатии кнопок и происходит переход на следующее/предыдущее целое значение секунд или кадров временной шкалы. В нашем случае индикатор, стоящий на 0 сек, переместится на 1 сек. или на 30 кадр.

Анимация размытия слоя

К следующему слою добавьте рисованную анимацию. Для этого Перейдите на слой Олеся Т в панели анимация. Затем в меню Layers (Слои) – Video Layers (Слои видео) – (Создать пустой видео слой). Установите время на 05:00 сек. В панели инструментов выберите Blur (Размытие). Интенсивность 100%, диаметр 1100 и отметьте галочкой (образцы со всех слоев). Сделайте около 15 круговых движений по изображению.

Передвиньте индикатор времени на 05:01. Размойте изображение инструментом Blur (Размытие) с теми же настройками, но движений мышкой сделайте поменьше: около 10 раз. Передвиньте индикатор времени на 05:02. Повторите вышеописанные действия (круговые движения мышкой уменьшите до 5 раз).

На отметке 05:03 аналогично размойте изображение за 2 круговых движения мышкой. Подрежьте слой до значения времени 06:00.

Использование кальки

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

Анимация маскирования

Остался последний слой Светана П. Примените к нему маску, нажав на значок внизу палитры Layers (Слои).

Если на слое имеется маска, то добавляются еще два параметра – Layer Mask Position (Положение слой маски) и Layer Mask Enable (Включить слой маску). Установите время на 06:00. При анимации перемещения слоя с маской обязательно отметьте обе строчки: и Position (Позиция) и Layer Mask Position (Положение слой маски). В противном случае маска останется неподвижной, а слой сдвинется.

Создайте ключевые кадры в параметрах Layer Mask Position (Положение слой маски) и Layer Mask Enable(Включить слой маску).

Перейдите в палитру Layers (Слои). Добавьте маску к слою Светлана П, щелкнув по значку . Залейте маску черным цветом. Между миниатюрами слоя и маски уберите значок цепочки , чтобы разорвать связь между ними. Передвиньте индикатор времени на отметку 06:05. Выберите инструмент перемещение и сдвиньте маску вправо так, чтобы появилось изображение.

На отметке времени 07:00 обрежьте длину слоя Светлана П.

К фоновому слою примените фильтр Clouds (Облака). Предварительно установите цвета белый и голубой.

Добавьте стиль слоя Gradient Overlay (Наложение градиента).

Добавляем титры

Можете добавить титры в конце анимации. Возьмите инструмент Type (Текст). Напишите слово Конец. Растрируйте слой. Придайте ему стили слоя: тиснение, наложение цвета и обводку. Придется подрезать начало слоя до отметки 07:00, чтобы титры не вылезали перед началом работы слоя с маской.

Необходимо также укоротить продолжительность анимации. Для этого в меню анимации выберите пункт Document Settings (Параметры документа). Установите продолжительность 08:00.

Анимация мерцания

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

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

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

Анимация освещения

Добавим анимацию Global Light (Глобального освещения).

Глобальное освещение можно настроить в стилях слоя: Drop Shadow (Тень), Inner Shadow (Внутренняя тень) и Bevel and Emboss (Тиснение).

Установите индикатор времени на отметку 07:00. Создайте ключевой кадр в слое Титры, нажав на значок секундомера слева от Global Lighting (Глобальное освещение). Переместите индикатор на отметку 07:29. Перейдите в палитру Layres (Слои). Войдите в стили слоя Тиснение. Проверьте, чтобы стояла галочка напротив Use Global Light (Глобальное освещение). Измените значение параметра Угол (-90) и Высота (40).

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

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

Сохранение анимации

Сохранять в формат Gif не имеет смысла, т.к. цвета изменятся до неузнаваемости.

Cохранитe в формате PSD для последующей доработки или для импорта в Adobe After Effects.

Чтобы записать видео воспользуйтесь меню File (Файл ) – Export (Экспортировать) –Render Video (Просмотреть видео…).

В этом окне введите имя файла, укажите путь и нажмите на кнопку Настройки…

Нажмите кнопку Параметры. Выбирите тип сжатия из выпадающего списка: Фото — JPEG. Затем ОК. И еще раз ОК. Render (Рендеринг).

Анимация 3D объектов.

В этом уроке мы только слегка затронем тему 3D объектов. Для более подробного изучения будет отдельный урок. Анимация 3D объектов стала возможна начиная с версии Photoshop CS4. Откройте файл Настя.jpg. Чтобы анимирывать обычный слой как 3D, выберите меню 3D — New 3D Postcard from Layer (Новая открытка из 3D слоя). Или меню 3D – New Figur from Layer (Новая фигура из слоя) – (Шляпа). Можно вместо шляпы выбрать любой другой объект из списка. Обратите внимание на то как изменилась миниатюра слоя.

Задайте продолжительность анимации 1 сек или 10 кадров. Для этого в меню выберите пункт Document Settings (Параметры документа).

Создайте еще один слой ниже 3D слоя. И залейте его каким-нибудь цветом при помощи инструмента Paint Bucket ( Заливка / ведерко ).

В панели анимация появятся дополнителтные пункты:

3D Object Position (Пложение 3D-объекта),

3D Camera Position(Положение 3D-камеры),

3D Render Settings(Настройки 3D-рендеринга),

3D Cross Section (3D поперечное сечение).

В строке 3D Object Position (Пложение 3D-объекта) нажмите на значок секундомера, появится первый ключевой кадр. Переместите индикатор на 9 кадр. Выберите в панели инструментов — Rotate the 3D Object (Поворот). Наведите на объект, зажмите левую кнопку мыши – шляпа начнет вращаться. Все! Можно сохранять анимацию.

Размеры баннеров:

300 x 250 прямоугольник средней величины

250 x 250 всплывающий квадрат

240 x 400 вертикальный прямоугольник

336 x 280 большой прямоугольник

180 x 150 прямоугольник

468 x 60 длинный баннер

234 x 60 половина длинного баннера

88 x 31 микро полоса

120 x 90 кнопка 1

120 x 60 кнопка 2

140 х 75 кнопка 3

120 x 240 вертикальный баннер

125 x 125 квадратная кнопка

728 x 90 ведущий стенд

160 x 600 широкий небоскреб

120 x 600 небоскреб

300 x 600 объявление на полстраницы

Вопросы:

Какие параметры нельзя анимировать по временной шкале?

— Style (Cтиль).

— Global Lighting (Глобальное освещение).

— Layer Mask Position (Положение слой маски).

— 3D Object Position (Пложение 3D-объекта).

— Scale (Масштаб).

Как установить индикатор времени с точностью до одного кадра.

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

— Нажать значок секундамера.

— В меню панели анимация выбрать пункт Document Settings (Параметры документа).

Домашнее задание:

1) Запишите небольшое слайд-шоу с использованием временной шкалы. Картинки можете взять из урока или выбрать свои.

2) Придумайте любой баннер или видео-открытку. Проявите свою фантазию. Пусть это будет небольшая анимация, но своя.

Как создать сложную анимацию в Photoshop — Smashing Magazine

22 мин чтения
Графика, Учебники, фотошоп, Анимация
Поделиться в Твиттере, LinkedIn

Об авторе

Стивен Дж. Петрани работает графическим дизайнером на полную ставку и инструктором в Университете Брэдли в США. Ему нравится работать в Photoshop… Больше о Stephen ↬

Хотя анимация в Photoshop не является новой концепцией, она, безусловно, прошла долгий путь за последние несколько лет: панель «Таймлайн» была переработана, появились видеослои, а также появилась возможность создавать анимацию по ключевым кадрам. Эти дополнения действительно улучшили игру Photoshop. Несмотря на то, что Photoshop все еще далек от того, чтобы создавать высококачественные и кинематографические анимации таких программ, как After Effects, он все еще обладает достаточной мощностью для создания сложной анимации — что особенно полезно, если вы не хотите тратить время на изучение нового приложения.

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

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

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

Дополнительная литература на SmashingMag:

Функциональная анимация в UX-дизайне
Бесплатные инструменты Photoshop для веб-дизайнеров
Лучший способ дизайна для Retina в Photoshop
Практические приемы проектирования анимации

Обзор панели временной шкалы

Открытие панели временной шкалы («Окно» → «Временная шкала») позволяет выбрать один из двух типов временной шкалы: видео и кадр. Временная шкала кадра предназначена для покадровой анимации и может быть очень ограниченной. Обычно это работает путем преобразования слоев на панели «Слои» в отдельные кадры. Я не буду вдаваться в подробности этой временной шкалы; Я хочу сосредоточиться на временной шкале видео.

Временная шкала видео

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

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

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

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

Photoshop автоматически создает анимацию между ключевыми кадрами.

Типы слоев

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

Стандартный (пиксельный) слой — это слой, содержащий информацию о пикселях. Это самый распространенный (и самый простой) слой в Photoshop. Свойства слоя включают:

положение,
непрозрачность,
стилей.

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

положение маски слоя или вектора
активация слоя или векторной маски

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

положение,
непрозрачность,
стили,
положение векторной маски,
включение векторной маски.

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

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

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

преобразование,
непрозрачность,
стили.

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

На этом этапе я хочу упомянуть два других типа слоев — слой видео и слой 3D. Оба этих слоя совершенно уникальны среди других упомянутых типов слоев. Слой видео на самом деле представляет собой группу слоев, которая содержит свой собственный набор свойств, в то время как слой 3D, помимо того, что он содержит уникальный набор свойств, управляется в среде, полностью отдельной от других слоев, что повышает уровень сложности. Из-за уникальности этих двух типов слоев я не буду здесь вдаваться в подробности. Вы можете увидеть, как оба слоя представлены на временной шкале ниже:

видеослоев

3D-слой

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

Свойства слоя

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

Свойство Position позволяет перемещаться по осям X и Y. Управляйте положением объекта с помощью инструмента «Перемещение».

Свойство объекта Position было задано в ключевом кадре для перемещения мяча вперед и назад по оси x.

Непрозрачность позволяет задать непрозрачность слоя по ключевому кадру. Элемент управления «Непрозрачность» находится на панели «Слои».

Ключевой кадр непрозрачности объекта был установлен на 100% и 0% для создания анимации затухания.

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

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

Маска слоя или позиция векторной маски определяют ключевые кадры координат x и y каждой маски. Лучше всего работает, когда маска не связана со слоем.

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

Также возможно включение или отключение слоя или векторной маски . Чтобы включить или отключить маску слоя, перейдите в «Слой» → «Маска слоя» и выберите «Включить» или «Отключить». Для векторных масок перейдите в «Слой» → «Векторная маска». Кроме того, вы можете «Shift + клик» по маске на панели «Слои», чтобы включить или выключить.

Маска активируется по ключевому кадру, а затем отключается через короткое время, вызывая раскрытие.

Характерное для текстовых слоев свойство Деформация текста позволяет задать ключевой кадр любой деформации текста, примененной к текстовому слою. Вы можете получить доступ к списку эффектов деформации текста, выбрав «Тип» → «Деформация текста».

Деформация флага была применена к тексту и ключевому кадру для создания анимации деформации.

Свойство Transform позволяет выполнять преобразование ключевых кадров в слой. Доступ к различным преобразованиям (таким как «Поворот» и «Масштаб») можно получить, выбрав «Правка» → «Преобразование» или нажав Control + T , чтобы войти в режим свободного преобразования.

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

Изучение некоторых новых методов

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

Использование слоев шаблонов с анимацией смарт-объектов

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

Красная точка, движущаяся по кругу.

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

Для начала я выделю оба слоя и преобразую их в смарт-объект. Это можно сделать, щелкнув правой кнопкой мыши один из выбранных слоев и выбрав «Преобразовать в смарт-объект» из всплывающего списка.

Теперь мы можем анимировать оба объекта как один слой. Поскольку это смарт-объект, у меня есть доступ к свойству «Преобразование» на панели «Таймлайн», которое позволяет мне поворачивать ключевой кадр. Я добавил ключевой кадр на каждую половину оборота, чтобы получить один полный оборот. В результате получается круг, вращающийся на 360 градусов.

Шаг 3: Оба слоя вращаются как один.

Теперь, когда наша анимация работает, нам нужно удалить форму шаблона. Для этого двойным щелчком отредактируйте миниатюру смарт-объекта на панели «Слои». Когда смарт-объект открыт, мы можем скрыть слой «Форма шаблона».

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

Красная точка, движущаяся по кругу.

Встраивание анимации в смарт-объекты

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

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

В сцене ниже я уже настроил простую анимацию желтой точки, вращающейся на синем фоне.

Шаг 1: Желтая точка вращается на холсте.

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

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

Шаг 3: Новые ключевые кадры создают эффект подпрыгивания.

Давайте продолжим. Преобразуйте этот слой смарт-объекта в другой смарт-объект. Это даст нам новый смарт-объект для редактирования. Далее мы добавим трансформацию к этому смарт-объекту. Перейдите в «Редактировать» → «Свободное преобразование» и отрегулируйте ручки так, чтобы смарт-объект отображался в перспективе.

Теперь, когда вы воспроизводите анимацию, она будет анимироваться внутри искаженного смарт-объекта.

Во время трансформации воспроизводится анимация.

Анимация фильтров

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

В приведенной ниже сцене я уже настроил простую анимацию внутри смарт-объекта, которая показывает точку, движущуюся по красному фону.

Шаг 1: Анимация смарт-объекта желтой точки, движущейся по красному фону.

Поскольку наша анимация уже находится в смарт-объекте, я могу добавить фильтр непосредственно к нему. В этом случае я выберу «Фильтр» → «Искажение» → «Вращение».

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

Анимация фильтра «Вихрь».

Добавление стилей слоя к анимации смарт-объектов

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

В приведенной ниже сцене у меня уже есть смарт-объект, содержащий простую анимацию точки, движущейся по белому фону.

Шаг 1: Простая анимация смарт-объекта.

Моя цель — применить стиль слоя Bevel & Emboss к точке. Однако, если я попытаюсь применить стиль слоя к смарт-объекту в этот момент, это повлияет на весь смарт-объект, белый фон и все остальное.

Шаг 2: Стили слоя применяются ко всему изображению.

Чтобы это исправить, мне нужно убрать белый фон. Ранее я упоминал, что мы можем отредактировать смарт-объект, чтобы скрыть лишние слои. В этом примере я хочу продемонстрировать еще один метод.

Пока есть хороший тональный контраст между слоями, мы можем использовать параметры «Смешать, если» на панели «Стили слоя», чтобы удалить фон. Дважды щелкните слой смарт-объекта, чтобы открыть панель «Стили слоя», и регулируйте ползунок «Смешать, если» → «Этот слой», пока фон не исчезнет.

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

Чтобы завершить этот метод, щелкните правой кнопкой мыши слой на панели «Слои» и выберите «Преобразовать в смарт-объект». Это создаст новый смарт-объект, который сохранит изменения, которые мы только что сделали.

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

В анимацию смарт-объекта добавлены стили слоя.

Изменение анимации с помощью корректирующих слоев

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

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

Шаг 1: Анимация двух точек в оттенках серого.

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

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

Анимация окрашена корректирующим слоем.

Создание органических эффектов с помощью корректирующих слоев

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

Эффект органической анимации.

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

Шаг 1: Анимация размытой точки поверх другой.

Теперь добавим корректирующий слой «Уровни». Используйте панель «Свойства», чтобы установить ползунки теней и бликов, пока края объектов не станут четкими.

Воспроизведение анимации даст нам уникальный органический эффект.

Эффект органической анимации.

Собираем все вместе

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

Создание часов с движущимися стрелками

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

Анимация стрелок часов.

Сцена начинается с двух новых слоев: один содержит форму минутной стрелки (красный), а другой — наш объект-шаблон (серый).

Как мы узнали ранее, мы преобразуем эти два слоя в смарт-объект и анимируем вращение.

Шаг 2: Слои, объединенные в смарт-объект, анимируются как один.

Чтобы заблокировать анимацию, преобразуйте слои в другой смарт-объект. Это позволит нам преобразовать ( Control + T ) смарт-объект так, чтобы он выглядел в перспективе, как показано на изображении ниже.

Шаг 3: Анимация преобразуется в перспективу.

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

Шаг 4: Анимация со скрытым слоем шаблона.

Добавление стиля слоя «Тень» с настройкой «Распространение» на 100% имитирует некоторую глубину.

Шаг 5: Тень имитирует края стрелки часов.

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

Шаг 6: Анимация часовой и минутной стрелок.

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

Анимация стрелок часов.

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

Создание вращающегося глобуса

В этом уроке мы будем применять фильтры к анимированным смарт-объектам, чтобы создать новый эффект. Вот что мы будем создавать:

Анимация вращающегося земного шара.

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

Я создал новый квадратный документ и добавил графику карты мира в качестве нового слоя. Я пошел дальше и анимировал свойство Position, чтобы карта мира прокручивалась по сцене. Это было приурочено к циклу, когда он начинается снова.

Шаг 2: Простая зацикленная анимация.

Затем преобразуйте этот слой в смарт-объект.

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

Шаг 4: границы слоя видны во время анимации.

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

Шаг 5: Фильтр применяется к границам слоя.

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

Преобразуйте этот слой в новый смарт-объект. Наш результирующий слой смарт-объекта теперь будет анимироваться в границах холста. Если мы снова добавим фильтр Spherize, мы увидим, что он применяется правильно при воспроизведении анимации. Идите вперед и добавьте фильтр Spherize во второй раз, чтобы усилить его эффект.

Шаг 7: Фильтр применяется к границам холста.

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

Шаг 8: Слой-маска скрывает все, что находится за пределами земного шара.

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

Анимация вращающегося земного шара.

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

Создание анимации пламени

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

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

Для начала нам нужно создать очень высокую сцену. В данном случае у меня есть сцена размером примерно 500 × 10 000 пикселей. На новом слое я нарисовал очень грубую линию с помощью инструмента «Кисть».

Затем создайте новую сцену размером 500 × 500 пикселей с черным фоном. Перенесите длинную линию, которую мы только что создали, в эту новую сцену и создайте простую анимацию прокрутки.

Шаг 2: Простая анимация бегущей строки.

Добавьте новую маску слоя в форме перевернутой слезинки к анимированному слою. Убедитесь, что маска имеет мягкие края. Результат покажет часть линии, когда она анимируется через маску.

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

Шаг 4: Простая анимация с маской слоя.

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

Шаг 5: корректирующий слой уточняет форму.

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

Шаг 6: Размыв смарт-объект, а затем повторив корректирующий слой «Уровни», мы создадим более плавное движение.

Существует несколько способов введения цвета. Я хочу показать один способ, который хорошо сработал для меня. Создайте новый слой и с помощью инструмента «Кисть» нарисуйте синие (внизу) и желтые (кверху) блики на пламени. Изменение режима наложения этого слоя на «Hard Mix» даст нам несколько ярких цветных полос.

Шаг 7: Использование режимов наложения для добавления цвета.

Поскольку переходы между цветами слишком резкие, нам нужно их смягчить. Для этого снова выберите все слои ( Alt + Control + A ) и преобразуйте их в другой смарт-объект. Теперь мы можем добавить фильтр Motion Blur, чтобы лучше смешать цвета.

Шаг 8. Добавление размытия в движении смешивает цвета.

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

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

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

Photoshop Animation Заключение

К настоящему времени вы должны быть знакомы со всеми распространенными типами слоев и тем, как можно анимировать каждое из их свойств. Кроме того, теперь мы знаем, что Photoshop хорошо оснащен для создания потрясающих анимаций 9.0015 . Мы рассмотрели, как использовать смарт-объекты для расширения возможностей анимации, выступая в качестве шаблонов или позволяя нам объединять несколько анимаций. Мы также увидели, как улучшить нашу анимацию с помощью фильтров и стилей слоя. Мы даже научились создавать некоторые новые — и, казалось бы, невозможные эффекты (для Photoshop) — используя корректирующий слой «Уровни». Наконец, мы собрали все вместе, чтобы создать несколько полированных анимаций.

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

Дополнительное чтение

Текстурный трикстер, Стивен Петрани Дополнительные уроки и приемы по анимации в моем блоге
Анимация в Adobe Photoshop, Tuts+ Серия руководств по анимации

Игра с временной шкалой в Photoshop CS6 , одним из них является новая временная шкала для базовых анимаций, и на этот раз Photoshop получает немного вкуса After Effects. Поскольку идея блога состоит в том, чтобы поиграть с этими инструментами, мы решили придумать что-нибудь для этой новой функции.

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

Шаг 1

Откройте Photoshop CS6 и создайте новый документ. Залейте фоновый слой любым цветом, затем перейдите в Layer>Layer>Styles>Gradient Overlay . Используйте Radial для стиля , а для цветов используйте черный и #38556f для центра.

Шаг 2

Добавьте новый слой и залейте его узором. Я использую один из http://subtlepatterns.com/ под названием Broken Noise. Используйте Soft Light для режима наложения.

Шаг 3

Добавьте текст, который вы хотите использовать для светового эффекта. Я использую букву A от Abduzeedo, используя трафаретный шрифт Major Snafu. Вы можете скачать его по адресу http://www.dafont.com/major-snafu.font?text=a+A

Шаг 4

Для создания светового эффекта мы будем использовать стили слоя . Просто следуйте приведенным ниже инструкциям для Bevel & Emboss, Inner Shadow, Inner Glow, Color Overlay, Outer Glow и Drop Shadow. Шаг 5

Дублируйте слой и отключите стили слоя. Используйте Inner Shadow и Inner Glow , используя указанные ниже настройки.

Шаг 6

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

Шаг 7

Добавьте 2 слоя поверх остальных слоев и назовите их правый и левый. После этого сгруппируйте эти 2 слоя в папку. Измените режим наложения папки на Color Dodge. Инструментом «Кисть » (B) и очень мягкой кистью прокрасьте белым поверх правой части буквы А. Выберите левый слой и нарисуйте еще одно пятно света поверх левой части. Используйте изображение ниже для справки.

Шаг 8

Перейдите к Окно>Шкала времени. Вы увидите панель временной шкалы. Первое, что вы заметите, это то, что все слои находятся на временной шкале. Выберите 2 слоя в папке. Разверните их в дереве и убедитесь, что временная шкала находится в 0 кадре. Нажмите на опцию «Позиция», чтобы создать ключевой кадр.

Шаг 9

Переместите временную шкалу в положение 1:00, а затем переместите слои в композиции туда, куда вы хотите их переместить.

Шаг 10

Это вторая позиция световых пятен.

Шаг 11

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

Шаг 12

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

Временная шкала

Так выглядит временная шкала. Обратите внимание на ключевые кадры для точек, в которых анимация меняет положение.

Заключение

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