Создание анимации с помощью временной шкалы

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

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

Теперь откройте . На палитре включите временную шкалу, если она еще не включена, с помощью нажатия на иконку в правом нижнем углу палитры.

На временной шкале Вы увидите слои — один слой со стрелкой, и три слоя со словами.

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

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

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

Теперь начнем делать двигающийся текст. Пусть первое слово будет выплывать из-за пределов изображения. Ставите бегунок в начало. и перетаскиваете слово почти за пределы видимости — так, чтобы на изображении была видна только маленькая его часть. Кликаете по иконке напротив строки Это нужно сделать для того, чтобы потом вытащить слово.

Затем ставите бегунок в позиции, которое соответствует началу выплывания текста. и перетаскиваете текст на прежнее место.

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

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

Разберемся с прозрачностью. Пусть второе слов появляется медленно, как бы ниоткуда. Ставите бегунок в начало появления этого слова, идете на палитру Слои, и там ставите непрозрачность слоя 0%. Затем двигаете бегунок туда, где слово должно появиться полностью, и на палитре Слои ставите непрозрачность слоя 100%. На этом промежутке текст начинает появляться теперь медленно.

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

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

Видео о том, как делать анимацию с помощью временной ленты в программе Adobe Photoshop CS5

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

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

Вы узнаете:

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

Урок состоит из следующих разделов:

1. Обучающее видео.
2. Переключение на временную шкалу.
3. Продолжительность и частота кадров анимации.
4. Параметры временной шкалы.
5. Анимация плавного перехода от одного изображения к другому.

9. Редактируем положение ключевых кадров.
10. Подрезка слоев.

12. Использование кальки.
13. Анимация маскирования.
14. Добавляем титры.

16. Анимация освещения.
17. Сохранение анимации.
18. Анимация 3D объектов.
19. Размеры баннеров.
20. Вопросы.
21. Домашнее задание.

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

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

При создании нового документа в разделе 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 объявление на полстраницы

Вопросы:

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

Style (Cтиль).

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

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

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

Scale (Масштаб).

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

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

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

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

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

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

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

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

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

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

Обзор панели Timeline (Шкала времени)

Открывается эта панель через вкладку Window (Окно). После открытия у вас имеется возможность выбора между двумя режимами: Create Video Timeline (Создать шкалу времени для видео) или режим реального времени и Create Frame Animation (Создать анимацию кадра) или режим фреймов. Второй режим предназначен для покадровой анимации, что может очень ограничивать. Работает он путём преобразования слоёв в панели Layers (Слои) в отдельные кадры. Я не буду подробно рассказывать об этом режиме. Я хочу сосредоточиться на первом режиме «Создание шкалы времени для видео».

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

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

На временной шкале ниже показан обычный слой (1) со своими свойствами (2). Под цифрой (3) показан индикатор текущего времени, (4) существующие ключевые кадры.

Обратите внимание на скриншот ниже, шкала video timeline отображает слои на панели Layers. Каждый из них имеет свою выпадающую панель, в которой отображены свойства слоя (эти свойства могут быть анимированы). Анимировать свойства можно нажатием на значок секундомера. Заметьте, что на ключевой кадр автоматически помещается индикатор текущего времени.

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

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

Типы слоёв

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

Стандартный или пиксельный – слой, содержащий информацию о пикселях. Это основной и самый распространённый слой в Photoshop. Он включает в себя следующие свойства:

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

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

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

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

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

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

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

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

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

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

Хочется отметить ещё два вида – video layer (Видео слой) и 3D layer (3D слой), которые отличаются от других рассмотренных выше слоёв. Видео слой представляет собой группу слоёв, содержащих собственный набор свойств. А 3D слой - помимо содержания уникального набора свойств, подвергается воздействию в совершенно отдельной среде, отличной от других слоёв. Мы не будем подробно рассматривать эти слои. На скриншоте ниже вы можете посмотреть, как они выглядят на шкале времени.

Мой вам совет: изучите эти два вида. В остальной части урока мы будем рассматривать различные свойства традиционных видов слоёв, за исключением 3D и видео.

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

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

Position (Позиция) позволяет двигаться объекту по осям X и Y. Положение объекта меняется при помощи инструмента Перемещение (V).

При помощи свойства Позиция, мяч перемещается вдоль оси X вперёд и назад.

Opacity (Непрозрачность) предназначена для изменения непрозрачности слоя. Расположена она на панели Layers (Слои).

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

Свойство Style (Стиль) предназначено для применения стилей к слою. Доступ к стилям можно получить путём двойного клика по нужному слою.

Пульсирующая анимация объекта была создана при помощи стилей: Тиснение, Тень и Наложение цвета.

Layer mask (Слой-маска) или Vector mask position (Положение векторной маски) позволяет кадрировать позиции X и Y каждой маски. Всё это работает лучше, если маска не связана со слоем.

Маска, маскируя один слой, раскрывает фоновый.

Enabling or disabling a layer or vector mask (Включение или выключение слоя или векторной маски) . Для включения или отключения маски пройдите в меню Layer > Layer Mask (Слои – Слой-маска) и выберите либо Enable (Включить), либо Disable (Отключить) соответственно. Для векторной маски перейдите в меню Layer > Vector Mask (Слои – Векторная маска) или нажмите Shift + клик по миниатюрке маски, чтобы включить или выключить её.

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

Свойство Text Warp (Деформация текста) характерно для текстовых слоёв и предназначается для текстовой деформации. Чтобы получить доступ к дополнительным текстовым эффектам, пройдите в меню Type > Warp Text (Текст – Деформировать текст).

В этой анимации к тексту была применена деформация Flag (Флаг).

Transform (Трансформирование) – свойство, позволяющее производить различные преобразования к анимированному объекту (например, масштабирование или вращение). К списку различных преобразований можно перейти через меню Edit > Transform (Редактирование - Трансформирование) или нажать Ctrl + T для входа в режим свободного трансформирования.

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

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

Я буду работать в Adobe Photoshop CS6. Интерфейс у меня русский, поскольку я пишу с работы.

Дома у меня стоит английская версия, и вам я советую учиться на английской версии, вот почему:

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

Приступаем к созданию анимации в фотошопе CS6

Запускаем фотошоп.

Создаем новый документ File -New (Ctrl+N).

В открывшемся окне задаем размеры баннера: 600 х 120, назовем его «Новогодний баннер» -> «Ок».

Создаем фон

Я заранее подбираю материалы, которые буду использовать в работе(фоны, шрифты и т.п.).

Открываем подготовленную текстуру: Ctrl+O. Скачать используемую мной текстуру вы можете .

Открываем палитру слоев «Layers» — F7.

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

Если текстура оказалась слишком маленькой или очень большой по сравнению с баннером, откорректируйте ее размер при помощи трансформации «Ctrl+T».

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

После того, как подогнали текстуру по размеру баннера, переходим к ее цветокоррекции.

Заходим в меню «Image» — «Adjustsments» — «Hue/Saturation» (Изображение — Коррекция — Цветовой тон/Насыщенность).

Я выставила такие настройки, чтобы добиться яркого, насыщенного цвета:

Пишем текст

Создаем новый слой (Ctrl+Shift+N) либо щелкаем по иконке нового слоя в палитре слоев.

Выбираем инструмент «Horizontal Type Tool» (T).

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

На новом слое рисуем звездочки в произвольных местах. Чтобы звезды получились поярче, кликаем по несколько раз в одном месте. Вот что получилось у меня:

Делаем дубликат слоя (Ctrl+J). Щелкаем на иконку глаза в палитре слоев, чтобы скрыть видимость предыдущего слоя.

Выделите верхний слой с копией звезд. На панели слева выберите инструмент «Lasso Tool(L)».

Выделяем каждую звезду по очереди, нажимаем «V»(инструмент Move Tool) и переносим на любое другое место, таким образом у нас в разных кадрах звездочки будут на разных местах, благодаря чему создастся эффект мерцания.

После того, как передвинете все звезды на другое место, создайте дубликат слоя, на котором работали (Ctrl+J), скройте предыдущий слой в палитре слоев, щелкнув на глазик, и снова повторите операцию по перемещению звезд на новые места, вы также можете дорисовать несколько новых звезд.

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

Все готово.

Переходим к созданию анимации в фотошопе

Открываем временную шкалу. Заходим в меню «Window» — «Timeline» (Окно — Шкала времени).

В появившейся панели шкала времени находим кнопку посередине «Create Video Timeline» (Создать временную шкалу для видео).

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

У нас открылась панель покадровой анимации. Сейчас в ней только один кадр, в котором показаны все видимые слои (содержание выделенного кадра показывается в основном окне на мониторе).

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

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

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

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

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

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

Между первым и вторым ключевыми кадрами у вас появилось 2 промежуточных.

Теперь встаем на 2ой ключевой кадр(теперь он 4ый по счету), опять нажимаем на значок с кружками и создаем еще 2 промежуточных кадра. Теперь нам осталось замкнуть последний и первый кадр для получения плавной анимации.

Выделяем последний кадр в шкале времени. Нажимаем на кружки. В появившемся окне, в строке «Промежуточные кадры» выбираем «Первый кадр», кадров добавляем все так же 2.

Теперь под кадрами внизу слева указываем количество повторов воспроизведения анимации «Постоянно».

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

Выбираем формат файла для сохранения GIF, нажимаем «Сохранить…», выбираем директорию, куда будем сохранять, жмем опять «Сохранить».

Итак, в этом уроке мы посмотрели как сделать анимацию в фотошопе CS6.

Надеюсь, вы узнали что-то новое и полезное из этого урока.

22.02.16 5.8K

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Типы слоев

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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