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

Использование слоя шаблона с анимацией смарт-объектов

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

Давайте рассмотрим, как это делается:

В приведенной ниже сцене я создал два слоя: один с красной точкой (“Dot” ), и второй с большим серым кругом (“Template Shape” ). Я добавил к большому серому кругу метки-разделители, чтобы нагляднее продемонстрировать эффект перемещения:

Шаг 1: Сцена, состоящая из двух слоев: красной точки и большого серого круга. (Увеличенная версия )

Сначала я выделяю оба слоя и преобразую их в смарт-объект, кликнув правой кнопкой по одному из выделенных слоев и выбрав из контекстного меню пункт «Преобразовать в смарт-объект »:

Шаг 2: Преобразование слоев в смарт-объект. (Увеличенная версия )

Теперь мы можем анимировать оба слоя как один. Так как это смарт-объект, у меня есть доступ к свойству «Преобразования » в панели шкалы времени, которое позволяет задать ключевой кадр для вращения. Я добавил кадр для каждой половины вращения, чтобы создать один полный оборот. В результате я получил вращающийся вокруг своей оси круг:

Шаг 3: Оба слоя вращаются как одно целое

Теперь, когда наша анимация работает, нужно удалить фигуру шаблона. Для этого дважды кликните по миниатюре смарт-объекта в палитре слоев. Открыв смарт-объект, мы можем скрыть слой “Template Shape” :

Шаг 4: Скройте слой » Template Shape». (Увеличенная версия )

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

Красная точка движется по кругу

Вложение анимации в смарт-объекты

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

Анимация подпрыгивающей точки создана с использованием нескольких наборов ключевых кадров

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

Шаг 1: Желтая точка, вращающаяся на холсте

Шаг 2: Преобразование слоя желтой точки в смарт-объект. (Увеличенная версия )

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

Шаг 3: Новые ключевые кадры создают эффект подпрыгивания

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

Шаг 4: Преобразование анимации. (Увеличенная версия )

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

Воспроизведение анимации с трансформацией

Анимация фильтров

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

В приведенной ниже сцене я уже создал простую анимацию точки (внутри смарт-объекта ), движущуюся на красном фоне:

Шаг 1: Анимация смарт-объекта, желтая точка, движущаяся на красном фоне

Так как наша анимация уже находится внутри смарт-объекта, я могу добавить фильтр непосредственно к нему. Я перехожу в Фильтр> Искажение> Скручивание :

Шаг 2: Применение фильтра «Скручивание» к анимации смарт-объекта. (Увеличенная версия )

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

Анимация фильтра «Скручивание»

Добавление стилей слоя к анимации смарт-объекта

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

Шаг 1: Простая анимация смарт-объекта

Я хочу применить к этой точке стиль слоя «Тиснение ». Но если я сейчас попытаюсь применить стиль слоя к смарт-объекту, это повлияет на все его содержимое:

Шаг 2: Стили слоя, примененные к изображению в целом

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

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

Шаг 3: Настройка слайдера «Наложение, если». (Увеличенная версия )

После этого кликните правой кнопкой мыши по слою в палитре слоев и выберите пункт «Преобразовать в смарт-объект». Мы получим новый смарт-объект, который сохранит внесенные нами изменения:

Шаг 4: Преобразование в смарт-объект. (Увеличенная версия )

Когда мы добавим к анимации набор стилей слоя, эффект будет применяться только к этому объекту:

Стили слоя, добавленные к анимации смарт-объекта

Изменение анимации с помощью корректирующих слоев

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

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

Шаг 1: Анимации из двух точек

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

Шаг 2: Настройки для корректирующего слоя «Карта градиента» (Увеличенная версия )

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

Анимация была раскрашена с помощью корректирующего слоя

Создание естественных эффектов с помощью корректирующих слоев

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

Естественный эффект анимации

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

Доброго вечера, дорогие подписчики и просто читатели моего блога! Готовы ли Вы узнать о том, как “оживить” свою картинку? И не с помощью магии, а с помощью всего на всего нашего любимого фотошопа! Как же долго я откладывал этот урок, сам не понимая почему. Ведь это основы фотошопа! Но теперь я решился исправиться.

И исправиться настолько, что в конце видео Ваш ждет еще и видео урок о том, как делать анимацию в фотошопе .

Я долго не писал уроки по фотошопу, и у меня были на то причины. Ведь я заканчивал свой рассказ “ ”. Милости прошу прочитать его, и высказать свое мнение прямо в комментариях!

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

У нас есть Чиполлино, и нам нужно сделать так, чтобы он махал нам ручкой.

Шаг 1. Для начала нужно “включить” анимацию в фотошопе. Для этого заходим “Окно”->”Анимация” . Может еще быть написано “Шкала времени” .

Шаг 2. Для того чтобы рука шевелилась, нам нужно вырезать её и ставить в разные положения. Для вырезания руки я, лично, использую “Магнитное лассо” . Делаем копию основного (Ctrl+J ) и работаем с копией. Оригинал не трогаем.

Выделяем аккуратно руку и вырезаем её!

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

Шаг 4. Этот шаг необязательный, но лучше используя инструмент “Ластик” немного подправить руку, сделав её более природной. Тяжело это объяснить, конечно на словах. Если поняли для чего мы используем ластик, то выполняйте этот шаг, если все же не поймете, можете пропустить. Это не принципиально, так как нам самое главное научиться создавать простую анимацию!

Шаг 5. Теперь работаем с кадрами. В каждом кадре включаем только те слои, которые нам нужны. Например, в 1 кадре нам нужен наш оригинал, а в нашем случаи “Слой 0” .

Теперь создаем новый кадр:

И уже в новом кадре включаем другие слои. То есть, наш “Слой 0 копия” и “Слой 1” , то есть, другое положение руки. Надеюсь, алгоритм понятен Вам, дорогие читатели.

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

Шаг 7. Сохраняем нашу . Не зря я включил этот шаг в свой урок, так как сохранение гиф-анимации происходит немного по-другому, чем просто изображение.

Выбираем формат (по дефолту стоит GIF) и сохраняем.

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

Я буду работать в 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.

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

Анимация текста фотошопе

Всем привет!

Сегодня мы будем создавать анимацию появляющегося текста.

Сначала мы создадим фон и зальем его черным цветом.

Затем установим шрифт из папки с исходниками, напишем текст и применим к нему стили слоя.

В завершение урока "" мы перейдем в панель анимации и «оживим» изображение.

Всем привет!

Сегодня мы будем создавать анимацию падающих осенних листьев.

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

Всем привет!

В данном уроке мы будем создавать анимацию дождя в фотошопе.

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

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

Всем привет!

Сегодня мы будем создавать сказку – сделаем анимацию снежинок в шаре .

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

Давайте без лишних слов приступим к созданию чуда!

Всем привет!

Сегодня мы будем создавать анимацию горящей свечи в фотошоп.

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

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

Анимация рождественского венка

Всем привет!

Сегодня мы будем добавлять сияние рождественскому венку .

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

Анимация снега

Всем привет!

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

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

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

Как сделать анимацию в фотошопе используя кисти Боке

type="text/javascript">yandex_partner_id = 66431;yandex_site_bg_color = "FFFFFF";yandex_ad_format = "direct";yandex_font_size = 1;yandex_direct_type = "horizontal";yandex_direct_border_type = "block";yandex_direct_limit = 2;yandex_direct_title_font_size = 3;yandex_direct_header_bg_color = "FEEAC7";yandex_direct_bg_color = "FFF9F0";yandex_direct_border_color = "FBE5C0";yandex_direct_title_color = "0000CC";yandex_direct_url_color = "006600";yandex_direct_text_color = "000000";yandex_direct_hover_color = "CC0000";yandex_direct_favicon = true;yandex_no_sitelinks = false;document.write(" ");

Как сделать анимацию в фотошопе

используя кисти Боке

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

Я, кто ещё помнит, обещал продолжить эту тему и расширить её таким эффектом, как кисти Боке.

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

Для справки (из Википедии) : Боке́ (от яп. ボケ боке - «размытость», «нечёткость») - термин, появившийся в русском языке в конце 1990-х годов и описывающий субъективные художественные достоинства части изображения, оказавшегося не в фокусе на фотографии. На многих изображениях фон размывается фотографом намеренно, для визуального выделения главного объекта съёмки.

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

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

Рассмотрим этот урок на примере открытки, которую я подготовил специально для этого урока - « С первым летним днём!».

Файлы в формате GIF повсюду. Некогда скромные анимированные изображения теперь являются неофициальным языком интернета. GIF анимация — это самый быстрый способ выразить эмоции в Twitter, а ещё мы можем тратить часы на её просмотр пролистывая ленту новостей в VK, Facebook или Одноклассниках.

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

Примечание: Во всех примерах из этой статьи я использую Photoshop CC 2017.

Как создать GIF анимацию из видео

Для начала необходимо запустить Photoshop, перейти в «Файл» > «Импортировать» > «Кадры видео в слои» и выбрать необходимую видеозапись.

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

Примечание: Имейте в виду, что чем больше видео, которое вы импортируете, тем больше будет ваш GIF. Также, если вы импортируете слишком длинную видеозапись, выбор «Оставить каждый 2 Кадры» (или больше) — это простой способ уменьшить размер, не слишком сильно влияя на качество.

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

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

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

В итоге должно получиться что-то вроде этого:

Создание GIF анимации из серии статических изображений

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

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

1. Если вы уже создали изображения для своей анимации, импортируйте их, выбрав «Файл» > «Сценарии» > «Загрузить файлы в стек…». Нажмите «Обзор» и выберите свои изображения, затем нажмите «ОК». Каждое изображение будет помещено на отдельный слой внутри одного и того же файла.
2. Если вы еще не создали изображения, сделайте это сейчас. Помните, что каждое отдельное изображение — это часть будущей анимации.

Теперь вы готовы начать создавать анимацию.

Анимирование статических изображений

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

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

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

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

Повторяйте этот процесс, пока не добавите все необходимые для анимации кадры.

Завершение

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

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

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

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

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

Усовершенствование анимации путём добавления промежуточных кадров

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

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

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

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

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

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

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

Для сохранения созданной анимации перейдите в «Файл» > «Экспортировать» > «Сохранить для Web (старая версия)…». В открывшемся окне выберите формат GIF, а в поле «Цвета» укажите 256. Для того, чтобы уменьшить общий размер файла, уменьшите размер в поле «Размер изображения».

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