Как создать анимированный GIF с рекламой в Adobe Photoshop

  1. Слои являются основой
  2. Создавайте снимки для анимированного GIF
  3. Как экспортировать анимацию из Photoshop в GIF

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

По сути, анимированный GIF представляет собой набор из двух или более неподвижных изображений, хранящихся в одном файле. Затем они чередуются на дисплее с установленным интервалом. Анимированный GIF может выглядеть как мигающая реклама, но также и как простое видео. Это зависит от того, сколько снимков вы поворачиваете. Недостатком является ограничение максимального количества цветов (256), преимуществом является размер анимации в GIF и более простая вставка в веб по сравнению с Flash-анимацией.

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

Слои являются основой

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

Поэтому создайте новый файл (« Файл»> «Новый» ) с размерами 468 x 60 px и разместите рисунок с основной формой баннера.

Поэтому создайте новый файл (« Файл»> «Новый» ) с размерами 468 x 60 px и разместите рисунок с основной формой баннера

GIF в Adobe Photoshop

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

GIF в Adobe Photoshop

Создавайте снимки для анимированного GIF

Используйте функцию « Окно»> «Анимация», чтобы отобразить панель для отдельных кадров анимации. Вы увидите новую панель внизу и щелкните « Преобразовать в анимацию кадров» в правом нижнем углу. Окно Photoshop должно выглядеть примерно так:

GIF в Adobe Photoshop

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

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

Внизу каждого окна анимации находится длина его отображения в секундах. Для обоих полей установите длительность отображения 0,5 секунды или отрегулируйте ее при необходимости. Чтобы анимация циркулировала и чередовалось отображение и скрытие текста «Скидка», измените повторение анимации со значения « По умолчанию» на « Навсегда» в левом нижнем углу панели анимации. Теперь вы можете нажать кнопку воспроизведения рядом с ним и просмотреть анимацию прямо в окне Photoshop.

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

GIF в Adobe Photoshop

Как экспортировать анимацию из Photoshop в GIF

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

Экспортируйте анимированный GIF после подготовки, как описано в предыдущих разделах, вызвав Файл> Сохранить для Web и устройств и выбрав GIF в качестве выходного формата. Затем нажмите Сохранить .

Затем нажмите Сохранить

GIF в Adobe Photoshop

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

Как видите, создать баннер в Photoshop очень просто