Создание продвинутой анимации в Photoshop: Обзор панели шкалы времени. Рабочий процесс создания анимации по временной шкале (Photoshop Extended)

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

Предустановки урока

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

1. Создание снежинок

Шаг 1
Создайте новый документ с размером холста 800x800 пикселей

Шаг 2
Выберите инструмент Кисть (Brush tool), и задайте размер примерно 4 пикселя

Шаг 3
Создайте новый слой, и произвольно разбросайте по холсту некоторое количество черных точек. Каждая точка будет обозначать отдельную снежинку. Назовите этот слой “Снежинки”. Старайтесь избегать сосредоточения чрезмерного количества снежинок на одном участке.

2. Настройка анимации

Шаг 1
Прежде чем приступить к анимации снежинок, давайте еще раз ясно представим себе их полет. По мере падания с неба, они произвольно меняют свое направление, отклоняясь из стороны в сторону, что в совокупности придает этому зрелищу некоторую грациозность (обратите внимание на рисунок ниже). Итак, мы можем разбить полет снежинки как бы на две составляющие: сверху вниз, и из стороны в сторону. Мы начнем анимацию с воспроизведения движения снежинок из стороны в сторону.

Шаг 2
Откройте шкалу времени: Окно > Шкала времени (Window > Timeline)

Шаг 3
Откроется панель временной шкалы. Но саму временную шкалу вы пока не увидите. Обратите внимание на одну единственную кнопку по центру панели, предлагающую вам выбрать какую именно шкалу вы хотели бы создать. Убедитесь, что выбран вариант “Создать временную шкалу для видео” (Create Video Timeline).

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

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

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

Шаг 7
Затем расположите еще две направляющие по сторонам снежинки. Это задаст расстояние, на которое снежинка отклоняется при движении из стороны в сторону.
Чтобы расположить две боковые направляющие симметрично, можете воспользоваться помощью линейки, отображение которой включается сочетанием клавиш Command/Ctrl + R.

3. Анимация бокового движения

Шаг 1
Теперь, когда наша сцена подготовлена, и у нас есть доступ к покадровой анимации, мы можем приступать к перемещению нашей снежинки. Расположите указатель воспроизведения на отметку 1 секунда (1:00f) на шкале времени, после чего, при помощи инструмента Перемещение (Move tool) сместите снежинку до левой направляющей линии.
Если при этом вы будете удерживать Shift, то движение получится строго горизонтальным.

Шаг 2
Теперь переместите бегунок на шкале времени на отметку третьей секунды (3:00f) и сместите снежинку к правой линии.

Шаг 3
Наконец, расположите бегунок на шкале времени на отметке 4:00f и сместите снежинку обратно к центральной направляющей линии.

Шаг 4
Так как ваша анимация будет проигрываться в течение всего четырех секунд, нам нужно расположить конец рабочей области на отметке 4 секунды. Сместите бегунок конца рабочей области на 4-секундную отметку шкалы времени. Затем раскройте выпадающее меню в правом верхнем углу временной панели, и выберите пункт Цикл воспроизведения (Loop Playback).

Шаг 5
Нажатием клавиши Пробела вы сможете просмотреть созданную анимацию.

Шаг 6
Здесь видно, что движение снежинок слишком резкое. Это можно исправить добавлением дополнительных кадров. Итак, расположите бегунок на шкале времени прямо перед отметкой 1:00, и обратите внимание на положение снежинки.

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

Шаг 8
Повторите эту процедуру, расположив бегунок на шкале времени с другой стороны отметки 1:00f.

Шаг 9
То же самое в районе отметки 3:00f

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

4. Развиваем анимацию

Шаг 1
Теперь, когда наши снежинки умеют двигаться из стороны в сторону, нам нужно убедиться, что ни одна из них не в процессе движения не покидает пределов холста. Для этого определите исчезающие за границами холста снежинки, и сотрите их при помощи Ластика (Eraser Tool).

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

Шаг 3
Выделите оба слоя на палитре слоев, кликните по ним ПКМ и выберите в контекстном меню пункт “Преобразовать в смарт-объект” (Convert to Smart Object). Важно, чтобы выделенными оказались оба слоя.

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

Шаг 5
Создайте под слоем со снежинками новый слой и залейте его белым цветом.

Шаг 6
Расположите слой со снежинками в верхней части холста.

5. Анимация движения вниз

Шаг 1
На панели временной шкалы кликните по стрелке рядом с названием слоя со снежинками, чтобы получить доступ к свойствам анимации. Обратите внимание, что свойство Позиция оказалось замененным на свойство Перспектива (Transform). Это произошло потому, что мы преобразовали слой в смарт-объект.

Шаг 2
Расположите маркер окончания рабочей области на 4-секундной отметке (4:00f).

Шаг 3
Переместите бегунок на шкале времени на первый кадр и кликните по иконке с секундомером. Установите ключевым кадром первый кадр.

Шаг 4
Переместите бегунок шкалы времени на отметку 4:00f, и при помощи инструмента Перемещение (Move tool) сместите снежинки в нижнюю часть холста.

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

6. Добавление снега

Шаг 1
Создайте копию слоя со снежинками: Слои > Создать дубликат слоя (Layer > Duplicate Layer). То же самое можно сделать, бросив слой со снежинками на иконку создания нового слоя в нижней части палитры слоев. При дублировании слоя анимация сохраняется. Имейте ввиду, что при создании дубликата слоя обычным сочетанием Command/Ctrl + J будет создан дубликат без анимации.

Шаг 2
Переместите копию по временной шкале примерно до отметки 10f.

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

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

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

Шаг 6
Выделите все созданные слои со снежинками, и преобразуйте их в один смарт-объект.

7. Делаем движение снежинок еще более беспорядочным

Шаг 1
Наш снегопад выглядит довольно неплохо. Но его еще можно усовершенствовать. На следующих нескольких шагах мы займемся как раз тем, что внесем в него еще большую разнообразность. Начните с создания копии слоя со снежинками (Command/Ctrl + J). Так как вся анимация у нас сейчас заключена внутри одного смарт-объекта, она будет полностью сохранена при копировании.
Убедитесь, что бегунок на шкале времени расположен на первом кадре, так, чтобы анимация созданной копии длилась все 4 секунды.

Шаг 2
Активируйте Свободную трансформацию (Ctrl+T) и сделайте этот слой чуть больше, так же немного повернув его.

Шаг 3
Создайте еще одну копию (Command/Ctrl + J) измените ее размер и поверните в противоположном направлении. Это создаст эффект пересекающейся траектории снежинок, делая их полет еще более естественным.

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

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

Шаг 6
Убедитесь, что маркер конца рабочей области находится на отметке 4 секунды (4:00f). Когда созданная анимация вас полностью удовлетворит, выделите все слои и объедините их в один смарт-объект. Переименуйте его в “Снегопад”. Нажатием Command/Ctrl + S сохраните файл.

8. Подготовка изображения на которое будет добавлен снег

Шаг 1
Теперь, когда у нас есть готовый снегопад, мы можем приступить к подготовке фотографии, на которую этот снегопад и будет добавлен. Откройте выбранное вами фото. В моем случае это – фото с заснеженной парковой аллеей.

Шаг 2
Следующим шагом мы обрежем фото. Я не очень люблю обрезать фото, особенно чужие. Но так как наше законченное изображение должно стать квадратным GIF-файлом, нам придется применить обрезку. Выберите инструмент Рамка (Crop Tool (C)), и задайте пропорции 1:1 (квадрат).

Шаг 3
Расположите манипуляторы так, чтобы у вас получился квадрат 600x600 пикселей, и нажмите Enter.

9. Добавление снегопада на фото

Шаг 1
Перейдите к документу с созданным снегопадом, кликните по холсту и перетащите смарт-объект на вкладку документа с фото. Наведение курсора на вкладку откроет соответствующий документ. Наведите курсор на область холста и отпустите кнопку мыши. Смарт-объект появится поверх вашего фото.

Шаг 2
Если временная шкала еще не открыта, откройте ее: Окно > Временная шкала (Window > Timeline). Кликните по кнопке Создания шкалы времени для видео (Create Video Timeline).

Шаг 3
Сместите маркер окончания рабочий области на отметку 4:00f.

Шаг 4
Нажмите Пробел для предпросмотра анимации. Как уже упоминалось выше, возможно, фотошопу потребуется некоторое время на то, чтобы отрендерить анимацию. Но в конце концов мы сможем увидеть наш снегопад, при чем очень отчетливо, так как наши снежинки – черного цвета. Позже мы это исправим.

10. Заполняем фото снегом

Шаг 1
Теперь нужно добавить дополнительные слои, чтобы заполнить снегом поверхность фото. Но для начала активируйте Свободную трансформацию (Ctrl+T) и сделайте слой со снегопадом чуть больше чем размер холста.

Шаг 2
Скопируйте слой со снегопадом и при помощи Свободной трансформации подкорректируйте размер копии в соответствии с уходящей в перспективу аллеей. Так как этот слой уменьшен в размере, то и снежинки на нем будут падать медленнее (точно так же как и в реальной жизни).

Шаг 3
Для того, чтобы избежать эффекта, когда снежинки на данном слое будут внезапно появляться сверху и так же внезапно исчезать внизу, мы воспользуемся слоем-маской. Для начала отключите видимость оригинального слоя со снегопадом, так как нам нужно отчетливо видеть дубликат. Кликнув по специальной кнопке Добавления слоя-маски (Add layer mask) в нижней части палитры слоев, создайте для этого слоя слой-маску. Воспользуйтесь крупной мягкой кистью для того, что бы замаскировать верхнюю и нижнюю часть этого слоя.

Шаг 4
Нажмите Пробел для предпросмотра созданной анимации. Снег должен падать за линией ближайших деревьев, и исчезать вблизи уровня земли.

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

Шаг 6
Создайте еще одну копию слоя со снегопадом (Command/Ctrl +J). На этот раз очистите дубликат от слоя-маски (перетащите ее на иконку с изображением мусорной корзины в нижней части палитры слоев). Фотошоп попросит вас подтвердить это действие. Выберите “Удалить” (Delete).

Шаг 7
Измените размер слоя. Создайте еще несколько копий и варьируйте их размер при помощи Свободной трансформации (Command/Ctrl + T).

Шаг 8
Создайте очередную копию слоя со снегопадом и увеличьте ее размер до 175% от исходной.

Шаг 9
Пройдите в меню: Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian blur), задав радиус размытия 2.9 пикселей. Это создаст иллюзию расфокусировки, как будто отдельные снежинки пролетают прямо перед объективом камеры.

Шаг 10
В качестве дополнительного шага примените еще один фильтр с гауссовским размытием чуть меньшего радиуса к двум слоям дальнего плана.

11. Завершение работы над снегом

Шаг 1
Последнее, что нам остается – это сделать снежинки белыми. Для этого кликните по иконке одного из смарт-объектом со снегопадом. В результате откроется окно редактирования смарт-объекта. Включите здесь видимость белого фонового слоя.

Шаг 2
Теперь создайте поверх всех существующих слоев слой коррекции Инверсия (Invert). Результатом станет белый снег на черном фоне.

Шаг 3
Сохраните документ со смарт-объектом, закройте его и вернитесь к своему рабочему документу. Вы заметите, что фотография стала не видимой. Выделите все слои со снегопадами и установите их в Режим наложения (Blend mode) – Экран (Screen).

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

12. Модификация снега

Шаг 1
Так как снегопад создан при помощи смарт-объектов, мы можем легко вносить любые изменения. Итак, усовершенствуем снег. Двойным кликом по иконке смарт-объекта откройте окно редактирования.

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

Шаг 3
Открывая каждый смарт-объект двойным кликом добирайтесь до оригинального слоя со снежинками.

Шаг 5
Сохраните и закройте каждый смарт-объект. Вернитесь к своей сцене со снегопадом. Нажмите пробел для предпросмотра анимации. Снег выглядит заметно лучше.

13. Создание GIF-файла

Шаг 1
Самый быстрый способ создания GIF-файла – это опция сохранения для WEB. Но в данном случае мы использовали большое количество смарт объектов, включающих определенное количество слоев, поэтому фотошопу потребуется очень много времени для обработки всей информации. Вместо этого мы сначала создадим видео файл. Пройдите в меню Файл > Експорт > Просмотреть видео (File > Export > Render Video).

Шаг 2
Задайте настройки, приведенные на скриншоте ниже и нажмите “Рендринг” (Render).

Шаг 3
После того, как файл будет отрендрирован, сохраните его на своем жестком диске и снова откройте в фотошопе. Фотошоп автоматически откроет его как видеофайл.

Шаг 4
Теперь пройдите в меню Файл > Сохранить для Web (File > Save for Web), задайте необходимые настройки и нажмите “Сохранить” (Done). Если вы хотите, чтобы ваша анимация воспроизводилась циклически, не забудьте включить соответствующую опцию.

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

Вы узнаете:

Как изменить продолжительность анимации и сделать слайдшоу с переходами.
Как устроена 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 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) Придумайте любой баннер или видео-открытку. Проявите свою фантазию. Пусть это будет небольшая анимация, но своя.

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

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

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

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

Для создания анимации во временной шкале в Photoshop Extended используется следующий общий рабочий процесс.

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

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

2. В меню панели «Анимация» задайте параметры временной шкалы документа.

Укажите длительность и частоту кадров.

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

Добавьте одно из следующего.

Новый слой для добавления содержимого.

Новый видеослой для добавления видеосодержимого.

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

4. Добавьте содержимое к слою.

5. Добавьте слой-маску (необязательно).

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

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

7. Включите установку ключевых кадров для параметра слоя.

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

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

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

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

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

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

Включите или отключите слой-маску.

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

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

9. Добавьте дополнительные слои с содержимым и при необходимости измените их параметры.

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

Для воспроизведения анимации используйте элементы управления панели «Анимация». Затем просмотрите анимацию в браузере. Просмотреть анимацию можно также в диалоговом окне «Сохранить для Web и устройств».

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

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

clair123rf; Перевод: Рыбка

Задумывались ли вы, как создаются анимированные GIF-файлы? Автор урока предлагает вам за одну ночь освоить некоторые секреты анимации с помощью этого урока. Так же вы научитесь использовать Шкалу времени (Timeline) , которая доступна в версии Photoshop CS6. А теперь начнём!

Результат урока.

Шаг 1

Создайте новый документ (Ctrl + N ) с размерами файла 800 х 500 пикселей. Залейте фон любым цветом, который вы хотите. Теперь идём в меню Слои - Стиль слоя - Наложение градиента (Layer> Layer Styles> Gradient Overlay). Примените следующие настройки: Стиль Радиальный (Radial), цвета от чёрного (# 000000) к синему (# 54799b), который будет использоваться в центре.

Шаг 2

Создайте новый слой и назовите его Noise Layer . Выберите инструмент Заливка (Paint Bucket Tool) и залейте созданный слой тёмным цветом (# 231f20). Оставьте активным слой Noise Layer и идите в меню Фильтр - Шум - Добавить шум (Filter> Noise> Add Noise). В диалоговом окне настроек фильтра поставьте такие значения: Эффект (Amount) 3%, распределение Равномерное (Uniform) и нажмите ОК.

Шаг 3

Нажмите комбинацию клавиш (Ctrl + U) и в появившемся диалоговом окне настроек коррекции введите значения Насыщенности (Saturation) 100%: Измените этому слою режим наложения на Мягкий свет (Soft Light).

Примечание переводчика: для того чтобы добиться такого цвета как у автора на скриншоте, можно при коррекции Цветовой тон / Насыщенность (Hue/Saturation) значение Цветового тона (Hue) поставить на - 140.

Шаг 4

Добавьте любой текст, который вы хотите. Здесь мы будем использовать текст логотипа сайта 123RF. В стилях слоя используйте Обводку (Stroke). Значения размера обводки выберите по своим предпочтениям.

Примечание переводчика: На скрине автора уже растрированный текст вместе со стилем Обводка. Чтобы у вас получилось так же, после того как применили обводку, уберите Заливку (Fill) слоя с текстом на 0%, преобразуйте этот слой в смарт объект, а затем растрируйте его.

Шаг 5

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

Тиснение (Bevel & Emboss)

Внутренняя тень (Inner Shadow)

Внутреннее свечение (Inner Glow)

Наложение цвета (Color Overlay)

Внешнее свечение (Outer Glow)

Тень (Drop Shadow)

Шаг 6

Как только вы закончите создавать световые эффекты с помощью стилей слоя, перейдите в палитру слоёв и уменьшите этому слою значение Заливки (Fill) на 0%.

Шаг 7

Дублируйте слой, который вы создали в шаге 5 и отключите этой копии все стили слоя. Настройте теперь стили так:

Внутренняя тень (Inner Shadow)

Внутреннее свечение (Inner Glow)

Шаг 8

Ниже результат после того как вы применили стили слоя.

Шаг 9

Теперь мы создадим движущиеся световые пятнышки. Создайте 5 слоев поверх существующих, и переименуйте их как 1,2,3, R и F. Если у вас свой текст создайте слои в соответствии с вашими буквами. Сгруппируйте эти слои в папку, которой дайте название Light Spots и смените режим наложения на Осветление основы (Color Dodge).

Активируйте инструмент Кисть (Brush Tool), выберите мягкую кисточку, установите Непрозрачность (Opacity) на 95% и белым цветом нарисуйте пятнышки поверх текста. Для каждой буквы отдельное световое пятно на своём слое. Ниже на скриншоте вы можете рассмотреть, как слои выглядят у автора в палитре слоёв.

Шаг 10

Теперь идём в меню Окно - Шкала времени (Window > Timeline). Вы заметите, что ваши слои уже построены в этой палитре в левой её части. Выделите каждый из пяти слоёв со световыми пятнами, которые находятся в группе Light Spots и убедитесь что индикатор текущего времени (голубой слайдер) стоит на нулевом кадре. Теперь на каждом слое в группе, при его активности, нажмите на опцию Позиция (Position), чтобы создать ключевой кадр.

Примечание переводчика: Для того чтобы активировать шкалу времени, нажмите кнопку Создать временную шкалу для видео (Create Video Timeline) и все ваши слои загрузятся в шкалу времени. Выделен в ней будет тот же слой или группа, что и в палитре слоёв.

Шаг 11

Установитеиндикатор текущего времени (голубой слайдер) на отметке 01:00 F и переместите слои со световыми пятнами по траектории их движения относительно контура буквы.

Шаг 12

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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