Как вы знаете, в Adobe Photoshop CS3 был добавлен и существенно доработан инструментарий для создания анимации. Но в CS4 он намного лучше и поддерживает анимацию 3D моделей. В этом дополнительном разделе, который я изначально не хотел добавлять в статью, рассматриваются инструменты анимации, которые могут быть полезны при создании Motion графики для презентаций и WEB-сайтов.
Инструменты анимации в Adobe Photoshop CS3 и Adobe Photoshop CS4.
В новой версии Adobe Photoshop в области анимации добавили массу полезных возможностей. Теперь более удобно стало создавать анимацию благодаря специально подготовленному интерфейсу (хотя появился этот интерфейс еще в версии CS3), появилась полная поддержка анимации 3D моделей и их компонентов. Теперь панель анимации и другие панели для удобства можно прикреплять с нижней стороны окна Photoshop, что делает его более похожим на упрощенную версию Adobe After Effects.
В данном разделе будет продемонстрирована работа Photoshop CS4 в области подготовки анимации для презентации и motion графики для WEB сайта.
Итак, как же выполняется анимация в Adobe Photoshop CS4. Если вы знакомы с Adobe After Effects вам уже известно, что на timeline в каждом слое есть анимируемые параметры. Для анимации параметра необходимо создать ключ анимации (символ часиков) и далее при включенном режиме анимации выбранного параметра выполнять изменения во времени. Все очень просто.
В отличие от After Effects в Photoshop анимации подвержены далеко не все инструменты. Например, нельзя анимировать эффекты и фильтры Photoshop. Даже если используется тип слоя Smart Object, где фильтры размещаются на отдельном подуровне и могут быть изменены в любой момент. Другим отрицательным моментом является создание корректирующих слоев и в них также нельзя анимировать параметры корректировки, например яркости, насыщенности или др. Но при наличии маски на слое добавляются два параметра – Layer Mask Position и Layer Mask Enable.
Внимание! Если в слое используется маска, при анимации перемещения слоя необходимо активировать параметры анимации – Position и Layer Mask Position. Иначе маска слоя будет находиться на одном месте, а слой с изображением будет перемещаться, что приведет к исчезновению картинки за областью маски.
При работе с 2D слоями анимируются следующие параметры – Position, Opacity, Style. Также, для достижения желаемого результата можно применить тип смешивания по слою – к примеру: Multiply, Lightness, Saturation и др.
Параметры анимации в Photoshop CS4 для 2D слоя и 3D слоя.
При использовании 3D слоев в списке доступных для анимации параметров появляются следующие пункты – 3D Object Position, 3D Camera Position, 3D Render Settings, 3D Cross Section. Если вы хотите анимировать 2D слой как 3D, то для этого вам потребуется преобразовать выделенный слой, для этого нужно использовать команду меню 3D > New 3D Postcard form Layer.
Теперь посмотрим непосредственно на саму панель Animation. Данная панель теперь представлена в двух вариантах – Timeline и Frames. Панель Frames появилась уже давно, а вот вариант Timeline появился совершенно недавно в предыдущей версии Photoshop CS3. Лично для меня этот вариант намного удобней и интересен по сравнению с режимом Frames.
Благодаря интерфейсу похожему на Timeline используемой в Adobe After Effects, панель легко осваивается и к работе можно приступить буквально за пару минут изучения.
Интерфейс панели Animation, сверху режим Timeline, снизу режим Frames.
На представленном выше рисунке показана панель Animation в режимах Timeline и Frames, какие инструменты представлены в ней мы сейчас и разберем:
- А.1 – кнопки управления воспроизведением (Selects First Frame, Selects Previews Frame, Play, Selects Next Frame, Enable Audio Playback).
- А.2 – Инструменты масштабирования Timeline (Zoom Out, Zoom Slider, Zoom In).
- А.3 – Toggle Onion Skin и Delete.
- А.4 – Convert to Frame Animation.
- А.5 – Слои с параметрами для анимации. Часики отвечают за активацию режима анимации для данного слоя. Расположенные рядом с левой стороны стрелочки и ромбик отвечают за перемещение между ключевыми кадрами и за создание нового ключевого кадра.
- А.6 – ключевые кадры. Желтым отмечен выделенный кадр, серым не невыделенный.
Панель Animation в режиме Frames полностью сохранилась в первоначальном варианте, как и была еще в предыдущих версиях Photoshop.
- В.1 – Selects Looping Options – устанавливает число повторений анимации. Кнопки управления воспроизведением (Selects First Frame, Selects Previews Frame, Play, Selects Next Frame).
- В.2 – Tweens Animation Frames управляет количеством повторяющихся кадров. Если щелкнуть на данной кнопке, то откроется диалоговое окно Tween, в котором вы указываете, какой кадр должен быть продублирован, и в каком количестве. А также, какие слои (все или выделенный), и какие параметры необходимо записать – Position, Opacity, Effects. Duplicates Selected Frames – производит дублирование выделенных кадров. Delete Frames – удаляет выделенные кадры.
Диалоговое окно Tween.
- В.3 – Convert to Timeline Animation – производится конвертирование кадров анимации из режима Frames в режим Timeline. Все кадры отображаются в данном режиме в виде ключевых кадров в каждом кадре анимации.
- В.4 – Кадр анимации. В верхнем левом углу находится его порядковый номер, внизу кадра расположено меню, которое позволяет указать время задержки кадра в секундах.
Помимо Timeline при редактировании анимации нужно менять и другие её параметры – продолжительность, отображение времени и др. Для этого служит меню, которое позволяет изменять эти и другие параметры. Для вызова меню щелкните в верхнем правом углу на кнопке вызова меню панели.
Меню панели Animation (Timeline).
Итак, в меню представлены следующие команды:
- Delete Keyframe(s) – удалить ключевой кадры (кадры).
- Keyframe Interpolation – в Photoshop поддерживаются только два типа интерполяции между ключевыми кадрами – Linear и Hold.
Вид интерполяции ключевых кадров по методам Linear и Hold.
- Select All Keyframes, Select No Keyframes – выделение всех ключей анимации, или снятие выделения с ключей анимации.
- Copy Keyframe(s), Paste Keyframe(s) – копировать и \ или вставить ключевые кадры.
- Set Start of Work Area, Set End of Work Area – устанавливают начальное и конечно положение маркеров рабочей области. Это полезно когда выполняется предварительная визуализация или тестовый экспорт созданной анимации. К примеру, если вы создали анимацию, но хотите просмотреть только часть из неё или определенный момент вы просто можете воспользоваться этими пунктами и установить начало и конец ролика.
- Go To > Time, Next Frame, Previews Frame, First Frame, Last Frame, Work Area Start, Work Area End – данный пункт меню отвечает за быструю навигацию по Timeline, как по кадрам так и по всей продолжительности композиции.
- Allow Frame Skipping – данная команда отвечает за оптимизацию воспроизведения анимации. Если она активна то Photoshop будет воспроизводить анимацию с пропусканием кадров т.к. при композиции их требуется визуализировать, а это занимает время особенно в сложных композициях. Если данная команда не активна, то Photoshop будет рассчитывать каждый кадр анимации и композиции.
- Move Layer In Point to Current Time, Move Layer End Point to Current Time – данные команды меню устанавливают начальную и конечную точки слоя в кадре где стоит слайдер текущего времени.
- Trim Layer Start to Current Time, Trim Layer End to Current Time, Trim Document Duration to Work Area – данные команды выполняют обрезку по текущей позиции слайдера для начала и конца слоя, а также выполняют обрезку документа по продолжительности композиции.
- Split Layer – Разрезает слой на два отдельных слоя с установкой начальной и конечной точки слоев в месте разрыва..
- Lift Work Area – создает новый слой и устанавливает его начальную и конечные точки. По умолчанию начальная точка ставится в конце рабочей области, поэтому может возникнуть проблема с тем, что слой будет не отображаться. Просто установите начальную точку в другом месте, в каком вам требуется.
- Extract Work Area – исключает слой из рабочей области. Его можно вернуть перетащив слой из начальной точки.
- Flatten Frames Into Layers – данная команда создает слои по каждому кадру анимации.
- Make Frames From Layers – данная команда создает кадры из слоев созданных командой Flatten Frames Into Layers размещает их по времени. Выглядит Timeline со слоями в виде лесенки.
Пример работы команд Flatten Frames Into Layers и Make Frames From Layers для создания анимации 3D слоя.
- Edit Timeline Comment, Export Timeline Comments – команды редактирования комментариев к Timeline и их экспорта. Для добавления комментария к текущему кадру просто вберите команду Edit Timeline Comment и в открывшемся диалоговом окне Edit Timeline Comment запишите комментарий. Если у вас несколько комментариев воспользуйтесь выводом их в формате HTML, для этого предназначена команда Export Timeline Comments. Для примера как выглядит экспортированный список комментариев, щелкните здесь.
Пример создания комментария.
- Document Settings – позволяет изменить продолжительность композиции и анимации, и выбрать скорость воспроизведения (fps). Для изменения времени выберите в меню Document Timeline Settings и в открывшемся диалоговом окне выставьте значение в поле Duration. А для изменения частоты кадров выберите в списке Frame Rate частоту, которую вы хотите использваоть – 24, 25, 29,97 и т.д. кадров \ сек.
Диалоговое окно Document Timeline Settings.
- Onion Skin Settings, Enable Onion Skins – данные инструменты отвечают за визуализацию эффекта который позволяет добавить к текущему кадру еще картинку из предыдущих или последующих кадров и произвести их смешивание между собой. В диалоговом окне Onion Skin Options вы выставляете, сколько кадров включается в данный эффект, и указываете степень прозрачности кадров, и тип смешивания.
Пример применения Onion Skin и окно с параметрами Onion Skin Settings.
- Show > All Layers, Favorite Layers, Set Favorite Layers – данные команды управляют отображением как всех слоев, так и выбранных в качестве текущих и основных слоев. Если у вас много слоев вы можете, выделив те слои, которые вы хотите использваоть их отметить как Favorite Layers и затем, используя команду Show > Favorite Layers, скройте те слои, которые не отмечены как основные и работайте с теми, что были отмечены.
Оставшиеся команды Panel Options, Close и Close Tab Group являются стандартными для Adobe Photoshop при работе с панелями и их отображением.
Однако отрицательной стороной анимации в Adobe Photoshop CS4 является полное отсутствие контекстных меню, приходится всегда щелкать на меню панели Animation, что все же снижает производительность в работе.
Для примера я попытался сделать небольшую анимацию только средствами Adobe Photoshop CS4, получился вот такой ролик.
В дополнительных материалах готовый psd файл называется siteHead_animation_final.psd.
Пример анимации выполнений средствами Adobe Photoshop CS4 Extended.
Анимация 3D моделей в Photoshop
В заключение данного дополнения я затрону анимацию 3D моделей. В Adobe Photoshop CS4 анимация 3D моделей не хвастается огромными преимуществами по сравнению с тем же After Effects и тем более с такими монстрами как Autodesk Combustion, Fusion и др.
Но все же разработчики внедрили и эту возможность. С одной стороны это плюс с другой минус. Для начала, анимировать 3D слои которые изначально создавались в Photoshop это очень удобно и даже нужно, особенно если вы готовите оформление сайта с анимированными эффектами. Но если вы хотите подготовить презентацию трехмерной модели и анимировать её в Photoshop вы просто скажите себе – «Ну зачем я сюда вообще полез, надо было анимацию делать в 3ds Max (Maya, Inventor, Revit – выбрать что по вкусу)». И это так!
Если объекты в том же 3ds Max состоят из разных частей, то в Photoshop они будут объединены в один объект, и тут уже ничего не поделаешь. Если объекты разбиты на разные части и импортированы в Photoshop как отдельные 3D слои, то все равно анимация доставит массу неудобств, т.к. подгонять объекты друг под друга очень трудно, и не дает никого желаемого результата.
Внимание!
Неизвестно как разработчики Photoshop CS4 обдумывали работу с CAD системами, но напрямую не поддерживается в Adobe Photoshop CS4 формат *.stp или тот же *.stl. Поэтому получается очень сильный сумасброд – конвертирование в *.obj через программу компьютерной графики и анимации – такую как Autodesk 3ds Max. Конечно, можно таким вот методом нарисовать текстуры и т.п. в Photoshop, а потом использовать их в 3ds Max для визуализации, но все же это далеко не очень удобно. Особенно в плане затрат на программное обеспечение.
Можно сделать следующим образом, сделать простую анимацию всего объекта или модели и затем, уже используя, к примеру, возможности рисования на трехмерных поверхностях сделать специальные разметки или пометить области – это полезно только в том случае если вы инженер и занимаетесь проектированием различных конструкций.
Но для этого все равно требуется создание разверток, а развертки из CAD систем идут ни на что не пригодные и поэтому приходится снова обращаться к программам компьютерной графики и анимации.
Рабочее пространство Photoshop при создании анимации 3D объекта.
Отрицательной стороной всей визуализации анимации в Photoshop CS4 – очень медленный визуализатор. Также для достижения максимальной скорости работы приложения необходимо наличие высокопроизводительной ГПУ – к примеру, NVIDIA Quadro или ATI FireGL.
Чтобы создать видео-файл необходимо экспортировать анимацию. Для этого предназначена команда File > Export > Render Video. Откроется диалоговое окно Render Video где вы устанавливаете параметры вывода.
Диалоговое окно Render Video.
После нажатия кнопки Render начнется визуализация видео секвенции.
Для примера, я создал небольшую простенькую анимацию модели шасси, сама модель создана в Autodesk Inventor, экспортирована через Autodesk 3ds Max в формат *.obj и далее импортирована в Adobe Photoshop CS4. В дополнительных материалах готовый psd файл называется inventor_suspension_animation.psd.
Получилось скромненько, но зато позволяет благодаря сечениям увидеть внутреннюю структуру модели.
Пример анимации 3D модели созданной в Adobe Photoshop CS4.
Далее, этот видеоматериал можно добавить на WEB-сайт, как и было сделано в этой статье через публикацию на видео сервисе.
Рекомендую вам использовать совместно с Adobe Photoshop CS4 такие программы как Adobe Flash CS4, Adobe Premiere CS4, Adobe After Effects CS4 и Adobe Soundbooth CS4. Данные программы позволяют создавать практически безграничный по насыщенности и зрелищности контент, как для видео, так и для WEB сайтов.
В завершении статьи не обойдем стороной и аппаратные решения созданные для работы с Adobe Creative Suite 4. Благодаря усилиям корпорации NVIDIA была выпущена новая профессиональная графическая карта NVIDIA Quadro CX.
Презентация NVIDIA Quadro CX. (Использован материал с сайта корпорации NVIDIA (www.nvidia.ru)).
