Как перенести слои из Photoshop в After Effects

Обновлено: 21.11.2024

Adobe Photoshop и Illustrator – это два стандартных приложения для создания пиксельной и векторной графики соответственно. Хотя вы можете экспортировать самые разные форматы файлов из любого из них для импорта в After Effects, лучше всего импортировать исходные форматы файлов, создаваемые обоими приложениями. При импорте исходных файлов Photoshop (.psd) и Illustrator (.ai) вы можете в полной мере воспользоваться преимуществами интеграции между приложениями. Вы можете импортировать многослойные файлы Photoshop и Illustrator в виде видеоряда или композиции. Если вы импортируете файл как видеоряд, After Effects автоматически выравнивает слои; однако, если вы решите импортировать его как композицию, файл преобразуется в новую композицию в After Effects, и приложение импортирует каждый слой как отдельный элемент видеоряда, чтобы их можно было анимировать отдельно. Этот процесс практически идентичен для обоих типов файлов.

1 Выделив панель "Проект", нажмите клавишу тильды (~) на клавиатуре, чтобы развернуть панель в полноэкранный режим.

Выберите «Файл» > «Импорт» > «Файл». Перейдите к изображениям > Photoshop & Illustrator и выберите файл Archaic Wheels.ai.

2 В раскрывающемся меню «Импортировать как» выберите «Композиция» — «Сохранить размеры слоя». Нажмите кнопку «Открыть», чтобы импортировать файл.

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

Композиция и композиция — сохранение размеров слоев

При импорте исходных файлов Photoshop и Illustrator в After Effects параметр «Импортировать как» часто понимается неправильно. Технически разница заключается не в том, как файл импортируется, а в том, как After Effects упорядочивает слои в файле при преобразовании файла в композицию. Layer Sizes), вы получите новую композицию и папку, содержащую каждый отдельный слой из вашего файла. Разница не в том, как After Effects вводит ваши файлы; дело в том, как он устанавливает точку привязки для каждого импортированного слоя.

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

Возьмите титры и графику, созданные в Photoshop, и импортируйте их в After Effects для окончательного оформления. Вот как это сделать.

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

Большинству пользователей проще всего разработать эти титры или графику в Photoshop, но это не должно быть концом процесса. Чего многие не понимают, так это того, что вещи, разработанные в Photoshop, можно относительно легко перенести в After Effects. Это связано с тем, что Adobe включает в After Effect механизм рендеринга Photoshop, который упрощает добавление движения и анимацию графики. Давайте кратко рассмотрим, как импортировать графику Photoshop в After Effects, что дает вам возможность создавать удивительные работы с моушн-графикой, например:

Шаг 1. Разработайте графику

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

Шаг 2. Импортируйте графику

<р>1. В After Effects выберите «Файл» > «Импорт» > «Файл» или просто нажмите Command+I.

<р>2. Появится диалоговое окно, в котором вы можете просмотреть и найти свой PSD. Прежде чем нажать кнопку "ОК", обязательно выберите "Импортировать как: композиция", а также установите флажок "Последовательность Photoshop".

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

<р>3. Появится дополнительное окно с вариантами импорта слоев, просто оставьте его как есть и нажмите OK. После того, как вы это сделаете, создание вашей композиции может занять некоторое время в зависимости от размера PSD-файла.

Шаг 3. Анимируйте графику

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

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

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

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

Базовые переносы слоев

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

При создании слоев Photoshop обязательно называйте их последовательно (1, 2, 3 и т. д.) или в алфавитном порядке (a, b, c и т. д.), при этом слой 1 или слой а должен быть верхним. (см. рис. 2.1). Это гарантирует, что слои останутся в правильном порядке при импорте файла в After Effects. Я создал для себя настоящие проблемы, не забывая об этом, и в итоге выбрал Фон в качестве верхнего слоя 20-слойного проекта!

Рисунок 2.1. Правильное название гарантирует, что слои вашего проекта останутся в правильном порядке при передаче.

Вы можете импортировать файлы Photoshop в After Effects либо как файл видеоряда, который объединяет все слои вместе (или позволяет выбрать только один слой в файле), либо как композицию, которая оставляет слои нетронутыми ( см. рис. 2.2). После импорта файла в ваш проект у вас будет составной слой и папка, содержащая все отдельные слои.

Рисунок 2.2. Импорт файла Photoshop в виде композиции сохранит слои без изменений.

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

Рисунок 2.3. Переместите папку с импортированными файлами, чтобы сохранить правильное положение слоев и иерархию.

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

Вы можете легко редактировать файл после его импорта в After Effects. Щелкните любой слой в окне «Проект» и выберите «Правка» > «Редактировать оригинал» (/Ctrl+E). Это запустит Photoshop и откроет файл для редактирования.

После внесения изменений в Photoshop сохраните файл. Вернитесь в свой проект After Effects, выберите слой (слои) редактируемого файла и выберите «Файл» > «Обновить видеоряд» в меню (Shift++L/Shift+Ctrl+L). Это обновит весь проект с отредактированными слоями, поэтому нет необходимости повторно импортировать файл или начинать заново с новым проектом.

Перенос слоев с эффектами стиля

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

Есть только четыре стиля слоя, которые будут правильно переданы визуально, хотя они и не редактируются в After Effects: «Тень», «Скос и тиснение», «Наложение цвета» и «Внутренняя тень» (рис. 2.4).

Рисунок 2.4. Существует только четыре эффекта стиля слоя, которые отображаются правильно при переносе слоев в After Effects.

Когда файл Photoshop импортируется в After Effects как композиция, он предоставляет вам все фактические слои Photoshop, а также слой композиции для каждого слоя, к которому применен эффект. Это также даст вам слой композиции для каждого набора слоев, который у вас есть в вашем файле, хотя все слои в композиции набора слоев не будут перемещаться по отдельности (рис. 2.5).

Рисунок 2.5. Слои композиции создаются при импорте слоев с примененными эффектами стиля, а также наборов слоев.

При применении эффектов, которые не переносятся, особенно если к одному слою применено несколько эффектов, вам потребуется создать новый слой и связать его со слоем стиля. Выберите «Объединить связанные» в меню палитры «Слои», и эффекты будут визуализированы и растеризованы, как показано на рис. 2.6. В этом примере слой с примененными эффектами стиля был продублирован, чтобы продемонстрировать, как оба слоя будут перенесены в After Effects.

Рисунок 2.6. Объедините стилизованные слои с новыми пустыми слоями, чтобы визуализировать эффекты в одном слое, сохраняя всю прозрачность содержимого слоя.

Импорт этого примера файла с одним визуализированным слоем и одним слоем с примененными эффектами стиля показывает, что эффекты не будут передаваться правильно, если они не будут предварительно визуализированы (см. рис. 2.7).

Рисунок 2.7: После импорта файла Photoshop со слоем эффекта стиля (черный) и визуализированным слоем вы можете увидеть, какой метод будет предпочтительным.

Однако, если вы не выполняете предварительный рендеринг слоев, вы можете импортировать файл как видеоряд и объединить слои. Это приведет к рендерингу всех эффектов стиля на лету, но также сгладит файл, так что не останется редактируемых слоев (см. рис. 2.8).

Рисунок 2.8. Импорт файла Photoshop в качестве видеоряда и объединение слоев позволит получить плоское изображение со всеми отрендеренными слоями эффектов стиля.

Карты смещения: статические слои в движении

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

В этом первом проекте по изучению карт смещения мы будем использовать файл Water.jpg, который находится на DVD (рис. 2.9). Обратите внимание, что это фотография в ракурсе, которая будет важна при создании изображения карты смещения.

Для сравнения и примеров вы можете просмотреть готовые примеры фильмов QuickTime для этой главы, которые можно найти на DVD.

Рисунок 2.9: Исходное изображение, которое будет приведено в движение с помощью карты смещения

Создание карты смещения

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

Чтобы создать карту смещения для этого проекта, мы начнем с нового файла изображения в Photoshop размером 720 720 пикселей в оттенках серого. Примените к изображению фильтр «Облака» («Фильтр» > «Рендеринг» > «Облака»). Это создаст контрастные светлые и темные области в случайном порядке.

Нам нужно будет замостить это изображение горизонтально, чтобы использовать его в качестве движущейся карты смещения. Чтобы создать бесшовную плитку, примените фильтр «Смещение» («Фильтр» > «Другое» > «Смещение») и установите для параметра «Смещение по горизонтали» значение +350 пикселей с выбранным параметром «Обтекание». Внизу по центру изображения будет четкая вертикальная линия разделения, которую необходимо отредактировать. С помощью инструмента «Штамп» с большой мягкой кистью выделите области изображения, которые, скорее всего, перекроют линию жесткого края, и смешайте их с остальной частью изображения (рис. 2.10).

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

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

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

Изображение воды, к которому мы применяем карту смещения, представляет собой вид в перспективе, поэтому мы будем контролировать количество движения по направлению к задней части сцены (или верхней части окна изображения), добавив слой заливки сплошным цветом с мягкая градиентная маска (рис. 2.11). При выборе цвета слоя «Заливка» выберите 50 % серого (128 RGB), потому что это будет означать 0 % как цвет карты смещения, в то время как белый — +100 %, а черный — −100 %. Чтобы усилить иллюзию глубины, увеличьте высоту изображения до 480 пикселей, а окончательный размер – 720 480 пикселей.

Рисунок 2.11: Смягчение эффекта облака и добавление нейтральной градации от самой дальней точки перспективы создаст ощущение глубины в движении финальной композиции.

Применение карты смещения

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

Создайте новый проект в After Effects и создайте новую композицию, выбрав предустановку, NTSC DV, 720 480 и продолжительность 5 секунд.
Импортируйте файл Water.jpg с DVD и только что созданное изображение карты облаков (или используйте предоставленное изображение карты CloudsBlur720.jpg на DVD). Отцентрируйте изображение карты облаков в окне Comp 1 (рис. 2.12).

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

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

Рисунок 2.17: Предварительный просмотр RAM позволит вам проверить величину смещения и скорость эффекта движения.

Маскирование и настройка карты смещения

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

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

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

Начиная с нового файла, 720 480 пикселей, оттенки серого, примените фильтр «Разностные облака» («Фильтр» > «Рендеринг» > «Разностные облака»). Повторите применение фильтра не менее дюжины раз (/Ctrl+F), пока не получите детализированный узор завихрения с большим контрастом (рис. 2.19). Затем добавьте новый слой и примените к нему фильтр «Облака». Установите непрозрачность слоя на 50%, и результирующее изображение станет мягче, но детали по-прежнему просвечивают через поверхность (рис. 2.20).

Рисунок 2.19. Повторное применение фильтра "Разностные облака" к самому себе несколько раз создает замысловатый вихревой узор.

Рисунок 2.20. Слой облаков 50 %, добавленный над завихрением, смягчает его без потери деталей.

Создайте новый проект в After Effects и следуйте инструкциям предыдущего проекта по настройке и импорту, используя только что созданную новую карту смещения и изображение Reflect.jpg с DVD. Как и в предыдущем проекте карты смещения, выполните шаги, чтобы создать анимированную предварительную композицию слоя карты смещения. Используйте те же настройки смещения для скорости цикла анимации.

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

Теперь нам нужно замаскировать верхнюю часть карты смещения, чтобы эффект применялся только к воде на изображении. Откройте композицию карты смещения в окне «Композиция». Добавьте слой сплошного цвета (Layer > New > Solid) и установите цвет на 50% серого (128 R, 128 G, 128 B). Чтобы быстро применить регулируемую маску, мы будем использовать фиксированный переход «Линейное вытеснение» («Эффект» > «Переходы» > «Линейное вытеснение»). Установите Wipe Angle на 0 и Transition Completion на 30%. Это поместит край эффекта близко к линии дерева, но добавление Растушевки в 75 пикселей сделает плавный переход в воду и уменьшит количество движения в воде возле береговой линии (рис. 2.21).

Рисунок 2.21: Добавление сплошного слоя и применение статического переходного вытеснения замаскирует эффект карты смещения на изображении.

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

Заменить и повторно подключить PSD-файл в After Effects — действенный прием

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

Пересвязать psd-файлы в After Effects — Как это сделать: Вот хитрость:

Чтобы повторно связать PSD-файлы в After Effects, создайте пустую папку, например, с именем «temp» в папке, где находится существующий PSD-файл. Затем временно переместите PSD-файл в эту папку (тем самым скрыв его для AE).

Теперь вы можете сделать копию PSD-файла и поместить ее в другое место, где вы хотите сохранить новый PSD-файл, с которым вы хотите работать/изменять/редактировать.

Затем, когда вы снова откроете новый проект, файл будет отсутствовать для всех слоев PSD-файла.

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

(Обратите внимание, что любые новые слои PSD, которые не были импортированы изначально, не будут импортированы, вам нужно будет сделать это вручную.)

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

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

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