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

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

В этом уроке мы рассмотрим базовое создание анимации в Photoshop CC.

Категория: Анимация

Версия Photoshop: Photoshop CC (2014)

Сложность: Низкая

Дата: 09.08.2015

Обновлено: 31.08.2017

Создаем новый файл с размерами 700 x 300 px.

Открываем окно Timeline (Window — Timeline (Окно — Шкала времени)).

Нажимаем на кнопку «Create Frame Animation» (Создать анимацию кадра).

Окно «Шкала времени» — «Создать анимацию кадра» (Create Frame Animation) Photoshop CC

Используя инструмент Type Tool (Инструмент «Горизонтальный текст» / Клавиша «T») создаем 3 слоя с текстом («Анимация», «это», «просто»).

Инструментом Move Tool (Инструмент «Перемещение» / Клавиша «V») размещаем текст как на изображении ниже.

Анимация это просто.

В окне Timeline (Шкала времени) выбираем первый кадр и нажимаем на кнопку «Duplicates selected frames» (Создание копии выделенных кадров).

Окно «Шкала времени» — «Создание копии выделенных кадров» (Duplicates selected frames) Photoshop CC

Создаем 4 копии выделенных кадров.

Создаем копии кадров в программе Photoshop CC

Далее в окне Timeline (Шкала времени) выбираем первый кадр и в окне Layers (Window — Layers (Окно — Слои)) отключаем для кадра видимость всех слоев кроме фона.

Отключаем для кадра видимость всех слоев кроме фона (Photoshop CC).

Выбираем в окне Timeline (Шкала времени) второй кадр и оставляем видимыми только слои «Анимация» и «Фон».

Далее выбираем третий кадр и оставляем в нем видимыми слои «Анимация», «это» и «фон».

Выбираем четвертый кадр и оставляем в нем видимыми все слои.

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

Выставляем время отображения для каждого кадра в 1 секунду (Photoshop CC).

Зададим параметр повтора нашей анимации. В меню окна Timeline (Шкала времени), меняем параметр повтора с «Однократно» на «Постоянно» (изображении ниже).

Выставляем параметр повтора нашей анимации (Photoshop CC).

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

Запуск воспроизведения анимации (Photoshop CC).

Нам осталось только сохранить нашу анимацию в формате, который её поддерживает (.gif).

Переходим через меню File — Save for Web (Файл — Сохранить для Web / Alt+Shift+Ctrl+S) выставляем настройки как на изображении ниже и нажимаем «Сохранить».

Настройки анимации в «Файл — Сохранить для Web» (File — Save for Web) Photoshop CC. Финальный результат

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

Читайте также:  Лицензия на производство электроэнергии

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

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

Для начала нужно создать новый документ, а затем зайти в меню Window («Окно») и установить галочку напротив пункта Timeline («Шкала времени»). После этого появится окошко, напоминающее видеоредактор. В нем будут отображены все слои, которые на данный момент открыты в документе.

Далее нужно кликнуть на кнопку Create Video Timeline («Создать шкалу времени для видео»), перейти в меню Layers («Слои»), выбрать пункт Video Layers («Слои видео») и создать пустой видеослой.

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

Берем кисть и создаем первый кадр анимации. Далее передвигаем ползунок времени и рисуем содержимое следующего кадра. Чтобы видеть свои действия на предыдущем этапе, нужно кликнуть по меню в правом верхнем углу и выбрать Enable Onion Skins («Перейти в режим кальки»).

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

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

Когда основная работа будет закончена, можно поработать над эффектами. Например, добавить на шкалу времени слой с надписью или картинкой. Если понадобится изменить цвет анимации, делайте это так же, как у обычных слоев. Дважды кликните по слою, выберите команду Color Overlay («Наложение цвета»), возьмите нужный цвет, скопируйте стиль слоя и вклейте его на все остальные слои.

В конце нужно сохранить полученную анимацию как видео. Для этого перейдите в меню File («Файл») → Export («Экспортировать») → Render Video («Экспорт видео»). Если нужен формат GIF, выбираем пункт Save for Web («Сохранить для Web»). В открывшемся окошке можно поменять настройки, а затем нажать Save («Сохранить»).

Анимация при помощи «Марионеточной деформации»

GIF-анимацию в Photoshop можно создавать при помощи инструмента Puppet Warp («Марионеточная деформация»). Этот способ гораздо быстрей, чем рисовать анимацию вручную. Вы можете просто взять фотографию или картинку в формате PNG из интернета или личных архивов. Главное — проследить, чтобы у изображения не было фона. Если он все-таки есть, объект придется вырезать.

Читайте также:  Рейтинг цветных струйных принтеров

Итак, откройте изображение в Photoshop и перейдите в панель слоев. Кликните правой кнопкой мыши по созданному нулевому слою и преобразуйте его в смарт-объект. Если собираетесь использовать какие-то эффекты, например, тень или обводку, — примените их с самого первого кадра. Это будет гораздо проще и быстрее, чем позже добавлять что-то на все созданные слои. Далее в том же меню кликните Duplicate Layer («Создать дубликат слоя»).

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

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

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

Чтобы анимация была плавной и реалистичной, придется двигать картинку постепенно. Для этого нужно несколько раз повторить весь процесс: копируем слой → двигаем изображение → жмем Enter. В нашем случае понадобилось создать14 слоев, чтобы «поднять» ухо персонажа и вернуть его в исходное положение.

После того, как вы закончили двигать картинку, нужно выделить все слои, кликнуть по ним правой кнопкой мыши и нажать Rasterize («Растрировать слой»).

Далее начинается работа со «Шкалой времени». Кликаем на Create Frame Animation («Создать анимацию кадра»), переходим в меню, расположенное в правом верхнем углу, и выбираем команду Make Frames From Layers («Создать кадры из слоев»).

Итак, все слои собраны на одной шкале. Если щелкать по ним поочередно, можно увидеть, как картинка движется по заданной траектории. Далее нужно установить время для каждого движения и способ воспроизведения (однократно, постоянно или несколько раз). Можете выбрать из предложенных вариантов или добавить свои параметры. Чтобы посмотреть, как все работает, жмем кнопку воспроизведения.

Если все устраивает — сохраняем нашу анимацию в формате GIF. Для этого в меню «Файл» выбираем пункт «Сохранить для Web».

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

Если вы всерьез заинтересовались анимацией и дизайном — присмотритесь к профессии веб-дизайнера. Освоив ее, вы будете на профессиональном уровне создавать анимацию для сайтов и приложений, а при желании сможете углубить знания и получить специализацию моушн-дизайнера. Сделать первый шаг к интересной и востребованной профессии поможет курс «Веб-дизайн с 0 до PRO» от Skillbox.

Читайте также:  Какое приложение радио работает без интернета

И так вы нашли нужную картинку, я взяла вот такую

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

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

Открываем закладочку -Выделение — Все ( выбрав команду — Все, мы все наши слои подготовим к перемещению) Кликаем мышкой на инструмент Перемещение, чтобы активировать его

Удерживая клавишу Shift, мышкой перетаскиваем слои анимашки на свою картинку

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

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

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

Первый кадр вашей анимации — открыт глазок на самой картинке + открываете глазок на первом слое анимации

Создаем дубликат кадра в анимационной панели

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

Второй кадр анимации — картинка + 2-ой слой анимашки
Третий кадр анимации — картинка + 3-ий слой анимашки
Четвертый кадр анимации — картинка + 4-ый слой анимашки
Пятый кадр анимации — картинка + 5-ый слой анимашки.

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

И смотрим, что у нас получилось

А если повторить перенос слоев анимашки несколько раз, то можно украсить полностью елку

Ссылка на основную публикацию
Как на айфоне скрыть номер когда звонишь
Иногда жизнь преподносит ситуации, в которых лучший выход – не показывать личные данные. С ростом популярности смартфонов распространенным типом персональной...
Как запустить лаунчер майнкрафт без интернета
В игре уже давно ввели возможность создание локального сервера в своём собственном мире, при этом все, кто находится в одной...
Как запустить мультиварку polaris
Многим доводилось посмотреть видео ютубовское: девочка лет десяти готовила сложные рецепты мультиваркой. Поларис, Редмонд, Панасоник — имена на слуху каждый...
Как на андроиде вернуть панель уведомлений
Панель уведомлений Android иногда наполняется таким количеством сообщений, что можно просто инстинктивно закрыть его без проверки всего, что там было....
Adblock detector