Анимация движения. Покадровая анимация в фотошопе

Начиная с версии CS3 Extended, доступна работа с анимацией. Gif-рисунки создаются из набора кадров или напрямую из видеороликов. Так вы самостоятельно смастерите динамическую картинку для сайта, аватарки, презентации? поздравительной открытки. Подобную графику можно использовать в других проектах или при монтаже. Узнайте, как сделать анимацию в Фотошопе, чтобы свободно работать с таким видом изображений.

Adobe Photoshop обладает множеством возможностей, среди которых и создание анимаций

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

Анимация из видео

Самый простой способ - конвертация видео в анимацию. Не надо ничего настраивать. Достаточно просто открыть ролик в Photoshop . Утилита воспринимает форматы avi, mov, mp4, mpg, mpeg, m4v. Для их корректного запуска необходим установленный QuickTime. Добавленный таким образом медиафайл нельзя отредактировать или обрезать. Только преобразовать в графику.

Но есть и другой метод. Вот как в Фотошопе сделать gif из кино:

1. Перейдите в Файл - Импортировать.
2. Нажмите «Кадры из видео в слои».
3. Откроется меню с некоторыми настройками. Справа будет мини-плеер для предварительного просмотра.
4. В поле «Диапазон» отметьте один из параметров: «От начала до конца» или «Только выделенный». Во втором случае будет вставлена выбранная вами часть видео. Чтобы вырезать нужный фрагмент, передвиньте чёрные маркеры под плеером. В проект добавится кусок, который находится между ними.
5. В Photoshop можно загрузить максимум 500 кадров. Если рабочий материал больше этой величины, его придётся резать или добавлять по частям в разные документы.
6. Отметьте галочкой пункт «Создать покадровую анимацию». Так к видео автоматически будут применены все необходимые настройки. Без этого динамику придётся задавать вручную.
7. Параметр «Оставить каждый [число]» позволит импортировать не все слайды, а, скажем, каждый третий. Итоговая GIF получится прерывистой.
8. Подтвердите действие и дождитесь, пока утилита обработает ролик.
9. Перейдите в «Окно - Рабочая среда» и выберите пункт «Движение». Этот набор установок лучше всего подходит для создания анимированных картинок.
10. Внизу будет некий аналог медиапроигрывателя. В нём указана частота кадров. Есть кнопка «Play», перемотка, масштаб видеодорожки. Отображены все снимки по очереди.
11. Они также будут распределены по слоям, список которых находится справа снизу окна Photoshop. Кликните на один из них, чтобы поработать с отдельным слайдом.
12. Можно удалить некоторые кадры или отредактировать их.
13. Все снимки будут находиться в одной области. Это не очень удобно. Чтобы отключить видимость слоя, кликните на пиктограмму в виде глаза рядом с ним. Слайд останется в документе и, если надо, появится в gif-анимации. Чтобы он вновь отображался, нажмите на место, на котором был «глаз».
14. Если хотите попробовать другой тип визуализации (под акварель, карандаши, неоновые огни), нажмите на «Фильтры» в строке меню.
15. Для добавления эффектов Photoshop (свечение, тень, градиент, узор), щёлкните правой кнопкой мыши на слой и выберите «Параметры наложения».
16. Чтобы поменять местами слайды, перетащите их курсором.
17. Для выбора времени показа (или задержки) кадра кликните на маленький чёрный треугольник под ним.

Анимация из картинок

Вот как создать анимацию в Фотошопе, используя картинки:

1. Вставьте нужные изображения. Каждое из них добавьте на свой слой (слой под названием «Фон» удалите).
2. Обычно рисунки открываются в окнах или вкладках (зависит от настроек интерфейса Photoshop). Чтобы совместить их в одной рабочей области, скопируйте их туда или переместите. Они автоматически отправятся на новые слои.
3. Перейдите в Окно - Рабочие среды - Движение. Активируется панель «Анимация» с проигрывателем.
4. Выберите слой, который должен стать первым кадром в вашей GIF .
5. Сделайте остальные листы невидимыми, нажав на иконку в виде глаза рядом с ними.
6. На панели с проигрывателем кликните на кнопку «Преобразовать в анимацию» справа внизу. Она похожа на прямоугольник, разделённый на три части.
7. Там будет один кадр с выбранным вами слоем. Продублируйте его. Для этого щёлкните на маленькую кнопку «Создание копии».
8. Сделайте нужное вам количество слайдов.
9. Получилась gif-анимация из одной картинки. Чтобы это исправить, нажмите на второй кадр и сделайте видимым второй слой, убрав «глаз» из первого. Отобразится нужный объект.
10. Итак поочерёдно «заполняйте» слайды.

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

1. На инструменте «Анимация» в верхнем правом углу (на самой панели, а не на окне Photoshop) есть кнопка, похожая на список со стрелкой. Нажмите на неё.
2. В появившемся меню выберите «Создать кадры из слоёв».

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

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

Важно ещё разобраться, как сохранить анимацию в Фотошопе. Если её оформить как psd-файл или «статичную» картинку с расширением jpg, bmp, png, толку никакого не будет. Вместо движения, трансформации или мелькания получится один застывший кадр. Чтобы сделать набор сменяющихся рисунков, надо преобразовать документ в формат GIF.

1. Когда закончите работу в Photoshop, не спешите его закрывать и превращать в psd-проект.
2. Перейдите в Файл - Сохранить как. Или нажмите клавиши Shift+Ctrl+S.
3. Задайте имя своему творению и укажите папку, в которую хотите его поместить.
4. В выпадающем списке «Тип» выберите «CompuServe GIF».
5. Подтвердите действие.

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

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

Подготовка холста и слоев

Для начала необходимо создать документ.

В появившемся диалоговом окне можно указать название, размеры и прочее. Все параметры устанавливаются на ваше усмотрение. После изменения этих параметров нажимаем «ОК».

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

Эти слои в будущем будут кадрами вашей анимации.

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

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

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

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

Теперь добавляем столько кадров, сколько вам необходимо, нажатием на кнопку «Добавить кадр».

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

Все! Анимация готова. Вы можете просмотреть результат, нажав на кнопку «Запуск воспроизведения анимации». А после этого можете сохранить ее в формате *.gif.

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

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

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

Для анимирования интерфейса, создания интерактивных прототипов или рекламных роликов используют специальные программы, например, Adobe Animate или After Effects.

Чтобы создать простой веб-баннер или презентацию, не обязательно разбираться со специальными программами. Для этого подойдут и встроенные средства Photoshop.

C чего начать

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

Для создания анимации я взял один из ярких проектов с Behance и перерисовал его в Photoshop. Выровнял по контент-сетке, подобрал размеры и поместил каждый элемент в отдельный слой. В результате у меня появился отрисованный в PSD-формате первый экран сайта, который затем я анимировал.

Шкала времени

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

Для этого я открываю вкладку «Окно» и ставлю галочку напротив строки «Шкала времени».

Внизу окна в Photoshop должна появиться широкая строка, с помощью которой можно управлять кадрами в анимации.

Чтобы создать первый кадр, нажимаю иконку «Создать анимацию кадра» на «Шкале времени».

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

Промежуточные кадры

В Photoshop элемент можно анимировать несколькими способами:

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

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

Поэтому я добавлю еще один кадр в «Шкалу времени» с помощью кнопки «Создать копию кадров».

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

На следующем кадре проверяю, виден ли слой с балалайкой.

После работы с изображением балалайки настраиваю появление текстовой строки. В первом кадре я выделяю текст «Soul sings» и сдвигаю его вправо за пределы макета. С текстом «3 strings» поступаю так же - сдвигаю влево, пока он не исчезнет.

Во втором кадре возвращаю текст назад.

Отлично. Теперь вставим промежуточные кадры между ключевыми.

Для этого нажимаю кнопку «Создание промежуточных кадров» на «Шкале времени».

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

Чем больше кадров, тем дольше анимация и плавнее двигается элемент. Если кадров слишком мало - элементы будут двигаться рывками.

Первая часть анимации готова. Теперь ее можно воспроизвести и посмотреть, что получилось.

Нажимаю на кнопку воспроизведения на «Шкале времени».

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

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

Покадровая анимация вручную

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

Я несколько раз скопирую последний кадр, чтобы создать движение стрелки и текста «go to shopping».

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

Теперь можно запустить анимацию и посмотреть результат.

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

Поэтому я увеличил длительность последнего кадра: нужно нажать на стрелку около надписи «0 сек.» и выбрать другое время из списка.

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

Сохранение и экспорт

В окне предпросмотра можно еще раз просмотреть анимацию и изменить настройки сохранения.

По умолчанию после воспроизведения анимация останавливается. Поэтому меняю режим воспроизведения на «Повторение» и сохраняю.

Вот какая анимация получилась в результате:

Заключение

В Photoshop просто создавать короткие интерактивные баннеры и презентации, анимировать отдельные элементы. Удобно экспериментировать с результатом.

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

Таким же способом я создавал шаблон с анимацией Retrowave 8 Bit , который доступен в моем портфолио на GraphicRiver.

Для урока подойдет любой снимок. Бесплатные фото вы найдете на сайтах Unsplash и Pixabay или можете купить высококачественный снимок на PhotoDune . Я буду использовать это фото.

1. Подготовка документа

Шаг 1

Жмем Ctrl+N, чтобы создать новый документ размером 500 х 500 пикселей, 300 пикселей/дюйм.

Шаг 2

Переходим File - Place (Файл - Поместить) и вставляем фото на рабочий документ.

Шаг 3

Корректируем размер фотографии по размеру документа и жмем Enter.

Шаг 4

Кликаем правой кнопкой мыши по слою с фото и выбираем Rasterize Layer (Растрировать слой).

Шаг 5

Жмем клавишу М, чтобы активировать Rectangular Marquee Tool (Прямоугольное выделение), и выделяем все рабочее полотно.

Шаг 6

Чтобы вырезать выделенную часть картинки, жмем правой кнопкой по выделенной области и в контекстном меню выбираем Layer Via Cut (Вырезать на новый слой).

Шаг 7

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

Шаг 8

Дважды кликаем по названию нового слоя и переименовываем его на «Основа».

Шаг 9

Кликаем правой кнопкой по этому слою и выбираем Convert to Smart Object (Преобразовать в смарт-объект).

2. Добавляем кадры и элементы анимации

Шаг 1

Теперь мы должны создать кадры для нашей будущей анимации. Семь раз дублируем слой «Основа». Жмем по нему правой кнопкой мыши и выбираем Duplicate Layer (Скопировать слой) или используем комбинацию клавиш Ctrl+J.

Шаг 2

Каждую копию называем «Кадр 1», «Кадр 2» и так до семи.

Шаг 3

Скрываем все слои, кликнув на значок глаза на панели слоев, кроме слоя «Кадр 2».

Шаг 4

Выбираем второй кадр, жмем Ctrl+T и на верхней панели кликаем на иконку Warp (Деформация).

Шаг 5

Двигаем усики сетки, чтобы растянуть картинку.

Шаг 6

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

Шаг 7

Продолжаем деформировать следующий кадр с помощью Warp (Деформация).

Шаг 8

Выбираем следующий кадр и жмем Ctrl+T, затем переходим Edit - Transform - Distort (Редактирование - Трансформация - Искажение).

Шаг 9

Зажимаем Shift и правый верхний угол перемещаем на -2 градуса, а нижний правый - на 2, затем нажимаем Enter.

Шаг 10

Дважды кликаем по этому же слою и в появившемся окне Layer Style (Стиль слоя) снимаем галочки с каналов Blue (Синий) и Green (Зеленый).

Шаг 11

Выбираем следующий слой. Активируем трансформацию Distort (Искажение) и перемещаем верхний левый угол на 2 градуса, а нижний правый - на 2 градуса влево, затем нажимаем Enter.

Шаг 12

Дважды кликаем по этому слою и убираем галочки с каналов Red (Красный) и Blue (Синий).

Шаг 13

Выбираем последний слой и устанавливаем его режим смешивания на Hard Mix (Жесткое смешение).

Шаг 14

Теперь мы должны создать текстуру с помехами. Жмем клавишу U и рисуем прямоугольник размером 500 х 4 пикселя.

Шаг 15

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

Шаг 16

Дублируем (Ctrl+J) его и опускаем копию ниже на 8 пикселей, зажав при этом клавишу Shift.

Шаг 17

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

Шаг 18

С зажатой клавишей Shift выбираем все слои с линией, затем на панели слоев кликаем по ним правой кнопкой мыши и выбираем Rasterize Layer (Растрировать слой).

Шаг 19

После этого снова кликаем по ним правой кнопкой и выбираем Merge Layers (Объединить слои).

Шаг 20

Дублируем (Ctrl+J) получившийся слой и с зажатой клавишей Shift перемещаем его вверх на 504 пикселя.

Шаг 21

Объединяем обе копии вместе (Ctrl+E) и называем получившийся слой «ТВ-текстура».

Шаг 22

Уменьшаем непрозрачность слоя до 15% и устанавливаем режим смешивания на Overlay (Перекрытие).

Шаг 23

Создаем новый слой (Ctrl+Shift+N) и называем его «Рамка». Заливаем слой черным цветом и устанавливаем Fill (Заливка) на 0%.

Шаг 24

Дважды кликаем по этому слою и применяем стиль слоя Stroke (Обводка). Используем следующие параметры:

• Size (Размер): 25 px;
• Position (Положение): Inside (Внутри);
• Color (Цвето): черный.

Шаг 25

Теперь мы должны растрировать стиль слоя. Кликаем правой кнопкой по слою и выбираем Rasterize Layer Style (Растрировать стиль слоя).

Шаг 26

Переходим Filter - Blur - Gaussian Blur (Фильтр - Размытие - Размытие по Гауссу) и устанавливаем Radius (Радиус) на 4 пикселя.

Шаг 27

Корректируем размер рамки, используя Ctrl+T с зажатой клавишей Shift.

3. Создаем анимацию

Шаг 1

Теперь у нас все готово для создания анимации. Переходим Window - Timeline (Окно - Шкала времени) и кликаем на кнопку Create Video Timeline (Создать шкалу времени для видео).

Шаг 2

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

Шаг 3

Уменьшаем непрозрачность слоя «Кадр 2» до 0%.

Шаг 4

На временной шкале разворачиваем второй кадр, кликнув на стрелку на временной шкале, и перемещаем временной индикатор на позицию 0:00:00:05.

Шаг 5

Теперь мы должны создать первый ключевой кадр. Рядом с Opacity (Непрозрачность) кликаем на значок таймера. В результате на шкале появится желтый ромб - это наш первый ключевой кадр анимации.

Шаг 6

Передвигаем индикатор времени на 0:00:00:13 и увеличиваем непрозрачность слоя до 100%. После изменения непрозрачности ключевой кадр добавится автоматически.

Шаг 7

После этого перемещаем индикатор на 0:00:00:20 и устанавливаем непрозрачность слоя на 0%.

Шаг 8

Выбираем следующий слой «Кадр 3» и уменьшаем его непрозрачность до 0%. Затем создаем ключевые кадры с разным уровнем непрозрачности, как мы делали это выше: 0:00:00:13, 0:00:00:20 и 0:00:00:26.

Шаг 9

На временной шкале выделяем все три ключевых кадра, кликаем по ним правой кнопкой мыши и выбираем Copy (Копировать).

Шаг 10

Передвигаем индикатор времени на позицию 0:00:01:00, создаем новый ключевой кадр, кликаем по нему правой кнопкой мыши и выбираем Paste (Вставить).

Шаг 11

После этого перемещаем индикатор на 00:00:02:00 и снова вставляем скопированные ключевые кадры. Первый из скопированных ключевых кадров перемещаем на позицию 0:00:01:24, а последний - на 0:00:02:20. Это позволит нам сделать эффект более интересным.

Шаг 12

Теперь мы должны переместить индикатор на 0:00:03:10 и вставить ключевые кадры еще раз. После этого первый из скопированных кадров перемещаем на 0:00:03:13, а последний - на 0:00:03:21.

Шаг 13

Теперь анимируем следующий слой. Выбираем слой «Кадр 4» и уменьшаем его непрозрачность до 0%. Затем добавляем три ключевых кадра, чередуя непрозрачность, как мы делали это выше: 0:00:00:13, 0:00:00:18 и 0:00:00:22. Затем копируем эти кадры и вставляем рядом так, чтобы центральный был на позиции 0:00:01:03.

Шаг 14

Добавляем еще три новых кадра: 0:00:03:00, 0:00:03:05 и 0:00:03:20.

Шаг 15

Копируем три кадра, созданных в шаге 14 и перемещаем их на позицию 0:00:04:00.

Шаг 16

На панели слоев выбираем следующий слой и уменьшаем его непрозрачность до 0%. После этого добавляем три ключевых кадрах на позициях 0:00:00:10, 0:00:00:15 и 0:00:00:20. Не забываем чередовать непрозрачность слоя.

Затем копируем эти три кадра дважды и каждую копию перемещаем так, чтобы центральный ключевой кадр первой копии находился на позиции 0:00:01:00, а второй копии - на 0:00:01:15.

Шаг 17

Добавляем три новых ключевых кадра на позициях 0:00:02:15, 0:00:02:20 и 0:00:03:20.

Шаг 18

Теперь мы должны создать анимацию для следующего слоя. Уменьшаем непрозрачность слоя «Кадр 6» до 0% и создаем три ключевые точки на позициях 0:00:00:25, 0:00:01:00 и 0:00:01:05.

Затем копируем эти три кадра дважды и каждую копию перемещаем так, чтобы центральный ключевой кадр первой копии находился на позиции 0:00:01:15, а второй копии - на 0:00:02:00.

Шаг 19

Копируем все девять ключевых кадров и вставляем так, чтобы первый кадр копии находился на позиции 0:00:03:00.

Шаг 20

Выбираем последний слой «Кадр 7» и уменьшаем его непрозрачность до 0%. После этого создаем три кадра на позициях 0:00:00:15, 0:00:00:18 и 0:00:00:22.

Шаг 21

Дважды дублируем эти три кадра и размещаем копии так, чтобы первый кадр первой копии был на позиции 0:00:01:24, а второй копии - на 0:00:02:04.

Шаг 22

Дублируем все шесть ключевых кадров и вставляем так, чтобы первый кадр копии находился на позиции 0:00:03:10.

Шаг 23

Шаг 24

Перемещаем индикатор в самый конец временной шкалы и опускаем слой с ТВ-текстурой на 500 пикселей вниз, зажав при этом клавишу Shift.

4. Сохраняем анимацию в формате GIF

Наша анимация готова к сохранению. Жмем Alt+Shift+Ctrl+S, чтобы открыть окно Save for Web (Сохранить для Web), затем устанавливаем Looping Option (Параметры повторов) на Forever (Постоянно). Затем сохраняем анимацию в формате GIF. Также в этом окне вы можете изменить размер изображения, если вы хотите уменьшить вес готового GIF-файла.

5. Как заменить фото

Шаг 1

Если вы хотите быстро заменить фото в анимации, жмем правой кнопкой по смарт-объекту «Основа» и выбираем Edit Contents (Редактировать содержимое).

Шаг 2

Размещаем новое фото над старым, жмем Ctrl+S, чтобы сохранить документ, и закрываем его.

Мы закончили!

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

Надеюсь, вам понравился этот урок. Оставляйте комментарии, если возникли трудности и вам нужна помощь. Также не забудьте посмотреть шаблон Retrowave 8 Bit в моем портфолио на GraphiRiver.

Вы узнаете:

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

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

1. Обучающее видео.
2. Что такое анимация.
3. Часть 1. Покадровая анимация.
4. Настройка интервалов.
5. Настройка периодичности повторов.

7. Оптимизация анимации.
8. Сохранение анимации.

10. Открытие GIF-файлов.
11. Кнопки унификации слоев анимации.
12. Закрытие панели анимации.
13. Вопросы.
14. Домашнее задание.

Что такое анимация

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

При помощи анимации в программе Photoshop можно создавать слайд-шоу из фотографий или картинок, делать аватарки, баннеры, заставки для веб-страниц, динамичные открытки и различные презентации. Следует иметь в виду, что Photoshop все-таки графический редактор, и не рассчитан на сложные анимационные процессы. В программе есть два способа создания анимации – это покадровая анимация и анимация в режиме временной шкалы. Мы последовательно рассмотрим оба вида анимации. Весь 36 урок мы посвятим изучению покадровой анимации. А в 37 уроке займемся временной шкалой. Некоторые простые задачи удобнее выполнять именно в режиме покадровой анимации. Даже если вы умеете работать с временной шкалой из других программ, все равно, я вам советую попробовать выполнить задания из этого урока. Исходя из полученных знаний вы сможете принять решение о том какой метод вы будете использовать в каждом конкретном случае.

Часть 1. Покадровая анимация

Панель Frames (Покадровая) появилась уже давно. Рассмотрим ее настройки на примере анимации рисования звездочки.

Создайте новый документ размером 800 на 800 пикселей, разрешение 72, цветовой режим RGB. Создайте новый слой, щелкнув по значку внизу палитры Layers (Слои). Или нажмите Shift +Ctrl +N.

На панели инструментов выберите инструмент кисть черного цвета, диаметром 35 пикселей с размытыми краями. Нарисуйте первую наклонную линию (поставьте точку, нажмите Shift и поставьте следующую точку - линия получится прямой).

Создайте второй слой. Начертите следующую линию . Затем третий слой
и еще одну линию и т. д. У вас должно получиться шесть слоев, включая фоновый слой.

Чтобы открыть панель Animation (Анимация), щелкните в меню Window (Окно) по пункту Animation (Анимация). Или в меню Window (Окно) установите Workspace (Рабочая среда) на Video and Film/Video (Видео). Убедитесь, что панель находится в режиме именно покадровой анимации.
В противном случае щелкните по значку в правой нижней части панели анимации.

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

Нажмите значок внизу панели Animation (Анимация). Появится второй кадр (копия первого кадра). Чтобы его изменить включите видимость первого слоя в палитре Layers (Слои). Снова нажмите на значок и включите видимость второго слоя.

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

В нижней части панели Animation (Анимация) находятся инструменты добавления, удаления и просмотра анимации.

- преобразование в анимацию по временной шкале.

- Tween (Создание промежуточных кадров).

- Duplicate сurrent frame (Создание копии выделенных кадров).

- Кнопки воспроизведения (Как на любом магнитофоне).

Selects First Frame (Выбрать первый кадр ); Selects Previews Frame (Выбрать предыдущий кадр );

Play (Запуск анимации);

Selects Next Frame (Выбрать следующий кадр).

- Удаление выделенных кадров. Следует иметь в виду, что клавиша Del на клавиатуре не удаляет выделенный кадр, а удаляет выделенный слой с палитры Layers (Слои).

Настройка интервалов.

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

Под каждым кадром внизу написано 0 с. и стоит стрелка. Нажмите на стрелку и выберите частоту смены кадров. Выберите значение 0,5 для всех кадров (это значит, что через половину секунды произойдет смена кадров).

Настройка периодичности повторов.

Следующим этапом будет настройка периодичности повторов анимации. Щелкните по стрелочке в нижней части панели анимации. Появится меню выбора периодичности.

Если выбрать Forever (Навсегда/Постоянно), то анимация будет повторяться снова и снова. Этот процесс называется зацикливание.

Если выбрать Once (Однократно), то анимация проиграется один раз и остановится на последнем кадре.

При выборе пункта Other (Другое) можно задать другое количество повторов в пределах (от 1 до 999).

Теперь давайте проиграем созданную анимацию. Для этого нажмите кнопку Play (Запуск анимации). Если вам все нравится, переходите к следующему этапу, если нет, то подкорректируйте анимацию по своему усмотрению.

Перейдите в панель анимации. Нажмите на значок Duplicate сurrent frame (Создание копии выделенных кадров). Выделите все слои, кроме фонового слоя.
Отключите видимость фонового слоя. Нажмите Ctrl + Shift + Alt + E. Появится новый слой, на котором будут отпечатаны все выбранные слои.
На миниатюре слоя будет изображена звезда на прозрачном фоне. Назовите этот слой Звезда.

Дважды щелкните по слою для перехода в настройки стиля. Задайте тень и наложение цвета. Цвет выберите по своему желанию.

Вернитесь к первому кадру анимации
и снимите видимость слоя со звездой
в палитре Layers (Слои).

Выделите последний кадр. В палитре Layers (Слои) оставьте видимыми только слой Звезда и фоновый слой.

Скопируйте этот слой и измените настройки стиля: Поменяйте цвет, задайте тиснение или обводку. Перейдите в панель анимации. Нажмите значок Duplicate сurrent frame (Создание копии выделенных кадров). Вернитесь к первому кадру в панели анимация и снимите видимость этого слоя в палитре.

Еще раз скопируйте слой и поменяйте стиль. Выберите инструмент Move (Перемещение) или нажмите Ctrl +T , для перехода к инструменту Свободное трансформирование. Измените масштаб. Перейдите в панель анимации. Нажмите значок. Вернитесь к первому кадру и снимите видимость этого слоя.

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

Нажмите кнопку Play (Запуск анимации) и посмотрите на результат проделанной работы.

Оптимизация анимации.

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

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

Выберите Optimize Animation…(Оптимизировать анимацию) . Отметьте галочками оба пункта.
Bounding Box (Ограничительная рамка) - обрезает кадры по измененной области по сравнению с предыдущим кадром.

Redundant Pixel Removal (Удаление лишних пикселов). Если пиксель не изменился по сравнению с предыдущим кадром, он становится прозрачным.

Чтобы PhotoShop сохранял кадры, включающие прозрачность, выберите параметр «Автоматически». Для этого выберите один или несколько кадров. Щелкните правой кнопкой мыши по миниатюре кадра. Выберите один из трех параметров:

Automatic (Автоматически) — текущий кадр отбрасывается, если следующий кадр содержит прозрачность слоя.,

Do not dispose (Не располагать) -Текущий кадр виден через прозрачные участки следующего кадра.,

Dispose (Располагать) — текущий кадр не виден через прозрачные участки следующего кадра.

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

Теперь пришло время сохранить анимацию. Конечно, в процессе работы нужно было сохранять файл в формате PSD, чтобы не попасть в ситуацию с внезапным отключением электроэнергии или неожиданной перезагрузкой компьютера. Но сейчас я имею в виду другое сохранение. Анимацию можно сохранить в виде анимированного GIF-файла с помощью команды Save for Web (Сохранить для Web и устройств).

Выберите в меню File (Файл) пункт Save for Web (Сохранить для Web и устройств). Установите в настройках формат Gif. Обратите внимание на размер будущего файла. По возможности уменьшите его размер. Как это сделать мы подробно разбирали в уроке Image Size (Размер изображения). При оптимизации используйте модель редукции цвета Адаптивная, Перцепционная или Селективная, чтобы обеспечить согласованность цветов во всех кадрах. Нажмите Save (Сохранить), введите имя, путь и еще раз нажмите Save (Сохранить).

Раньше, чтобы записать анимацию мы переходили в приложение ImageReady.

В Photoshop CS2 появилась панель Анимации. Но, чтобы сохранить анимированный файл, все равно приходилось переходить в ImageReady. Для перехода служила кнопка внизу панели инструментов или меню File (Файл)- Edit in ImageReady (Перейти в ImageReady).

Начиная с Photoshop CS3 и выше, для записи анимации не нужны дополнительные программы. Для редактирования теперь служит панель Анимации, а для записи приспособили в меню File(Файл) пункт Save for Web (Сохранить для Web ) .

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

Создайте новый документ размером 500 на 250 пикселей. Выберите инструмент Type (Текст), шрифт Impact, размер 150 пт. и напишите любое слово. Задайте непрозрачность 100 %. Добавьте стили слоя: тень, градиент и тиснение. Можете выбрать другой стиль, не обязательно делать как у меня. Деформацию текста также можно анимировать. В панели анимации задайте интервал 0,2 сек. Нажмите кнопку , чтобы скопировать первый кадр. Перейдите в палитру Layers (Слои) и уменьшите непрозрачность до 0. Поменяйте стиль слоя (например, вместо наложения градиента добавьте наложение цвета). Переключаясь между кадрами, вы сможете наблюдать, как меняется изображение.

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

В появившемся окне можно настроить количество добавляемых кадров. Чем их больше, тем равномернее будет переход. В графе Tween With (Промежуточные кадры) можно выбрать из списка, куда будут вставлены кадры:

Last (Последний кадр); Selection (Выделение); Previous Frame (Предыдущий кадр); First Frame (Первый кадр); Next Frame (Следующий кадр). Список меняется в зависимости от выделенного кадра.

Оставьте все настройки по умолчанию. Нажмите ОК.

Нажмите на Play (Запуск анимации). Если все устраивает, то переходите к сохранению анимации.

Открытие GIF-файлов.

В Photoshop CS3 и CS44 видео и GIF-файлы анимации не открываются через меню File (Файл) – Open (Открыть). При попытке открыть появляется окно:

Обязательно установите QuickTime Pro 7.1 или выше.

В Photoshop CS5 этой проблемы нет. Файлы легко открываются обычным способом.

Выберите в меню File (Файл) –Import (Импортировать) - Video Frames to Layers (Кадры видео
в слои…). У Вас будет недоступен выбор GIF файлов в поле тип файла. Однако этот недочет можно легко обойти, если предварительно скопировать название файла.gif и вставить его в поле имя файла или вручную набрать наименование в этом поле. Или введите * в поле Имя файла и нажмите Load (Загрузить), тогда
наименование gif файла станет видимым и его можно открыть (Видимыми станут и другие файлы, даже те которые нельзя открыть в программе).

Настройки в появившемся окне оставьте по умолчанию. Отмеченными должны быть пункты From Beginning To End (От начала до конца) и Make Frame Animation (Создать покадровую анимацию). К сожалению, файлы, открытые таким способом, не будут содержать прозрачного фона – вместо него будет белый цвет. При открытии такого файла в CS5 прозрачный фон сохранится.

Кнопки унификации слоев анимации.

Посмотрите внимательно, как изменилась палитра Layers (Слои) при работе с покадровой анимацией. Появились кнопки позволяющие применять изменения в текущем кадре ко всем остальным кадрам. Отметьте галочкой пункт Propagate Frame 1 (Распространить кадр 1).

Посмотрим как они действуют… Откройте файл с анимацией рисования звезды. Выберите любой кадр и отключите видимость фонового слоя. Нажмите Play (Запуск анимации). Прозрачным стал только выбранный кадр. Нажмите кнопку Unify layer visibility (Унифицировать видимость слоя). Появится окно: .

Нажмите Match (Синхронизировать) и снова запустите анимацию . Рисование звездочки будет проходить на прозрачном фоне на протяжении всей анимации. Прозрачность первого кадра теперь присвоена всем кадрам анимации. Аналогичным образом вы можете управлять положением и стилем слоя.

В палитре Layers (Слои) выберите пункт Animation Options (Параметры анимации). По умолчанию кнопки унификации слоев появляются Automatic (Автоматически) при включении покадровой панели анимации. Вы можете изменить это правило, выбрав пункт Always Show (Всегда показывать) или Always Hide (Всегда скрывать).

Закрытие панели анимации.

Закрыть панель анимации можно разными способами:

Вы можете свернуть или закрыть панель анимации, а также перейти в Preferences (Установки), щелкнув по User Interface Preferences (Параметры интерфейса).

Вопросы:

1. Что произойдет, если в покадровой анимации выделить кадр и нажать на клавиатуре Del?

Выделенный кадр будет удален.

Слой, выделенный в палитре Layers (Слои) будет удален со всех кадров анимации.

Слой, выделенный в палитре Layers (Слои) будет удален только для выделенного кадра анимации.

Слой, выделенный в палитре Layers (Слои) будет удален со всех кадров анимации кроме фонового слоя.

1. У Вас есть три кадра. Анимация будет непрерывная. Что нужно сделать, чтобы добавить
   5 промежуточных кадров между последним и первым кадрами?

Выбрать первый кадр. Нажать кнопку
В настройках в графе Tween With (Промежуточные кадры) выбрать Next Frame (Следующий кадр).

Выбрать последний кадр. Нажать кнопку
В настройках в графе Tween With (Промежуточные кадры) выбрать Previous Frame (Предыдущий кадр).

Выбрать последний кадр. Нажать кнопку Tween (Создать промежуточные кадры).
В настройках в графе Tween With (Промежуточные кадры) выбрать First Frame (Первый кадр).

1. Для чего нужна оптимизация анимации?

Для преобразования в анимацию по временной шкале.

Для уменьшения размера Gif файла за счет исключения областей, не изменяющихся при переходе от кадра к кадру.

Для настройки периодичности повторов анимации.

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

1)Выполнить покадровую анимацию рисования звезды (по уроку).

2) Выполнить покадровую анимацию текста.