Создание GIF анимации в Photoshop

GIF анимация в ФотошопеРанее на сайте мы рассматривали сторонние сервисы создания гиф анимации, однако большинство из них запросто может заменить обычный Фотошоп. Анимированные GIF файлы с его помощью делаются достаточно легко и быстро. Они, как правило, состоят из нескольких изображений (кадров), которые при пошаговой смене и образуют финальный результат. Сегодня постараемся максимально детально рассмотреть данный вопрос от А до Я:

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

A video posted by Alex Tod (@alextod35) on

Процесс занял буквально минут 5-10. Тут важно просто внимательно выполнять все шаги. В конце поста найдете англоязычный видеоурок по данной теме.

Добавление изображений GIF анимации в Photoshop

Первым делом нужно загрузить в графический редактор все картинки/фото, которые будут участвовать в анимации. Добавьте их в один проект разными слоями — этот будут кадры для результирующего GIF файла. Проверьте размеры картинок и их отображение чтобы все было как вам нужно. Слои можно скрывать (с помощью иконки глаза слева от слоя) дабы просматривать все объекты.

Картинки-слои для gif анимации

Далее в пункте меню Window (Окно) включаете отображение панели Timeline (Шкала времени). Инструмент отвечает за создание GIF анимации в Photoshop. Расположите его снизу в рабочей области.

Панель Timeline (Шкала времени)

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

На следующем шаге выделяете все слои в проекте (кликаете по ним удерживая клавишу Ctrl). После этого открываете контекстное меню в правом верхнем углу окна Timeline и по выбираете «Make Frames From Layers».

Добавление кадров в Timeline из слоев

Из всех видимых и выделенных слоев Adobe Photoshop создаст кадры анимированного GIF. В результате увидите их в панели Timeline.

Кадры анимированного GIF

Настройки GIF анимации в Фотошопе

Здесь вам нужно будет указать 2 вещи: продолжительность отображения разных кадров + число повторений гифки. Начнем с первого. Под каждым объектом-картинкой в Timeline найдете время показа и стрелочку вниз. Кликаете по ним и во всплывающем меню выбираете длительность карда.

Продолжительность кадра в GIF анимации

Элементам можно указывать разное время либо задать параметр одновременно для нескольких из них (совместное выделение как и в слоях — с помощью Ctrl).

Чтобы «зациклить» GIF в Фотошопе при создании анимации выбираете значение Forever в соответствующей настройке как показано на скриншоте ниже.

Циклическая GIF анимация в Фотошопе

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

Сохранение GIF анимации в Фотошоп

В финальной части нашего руководства рассмотрим как правильно сохранить GIF анимацию в Фотошопе. Для этой цели используется знакомый всем инструмент Save for Web, однако в последних версиях Adobe Photoshop СС он располагается в новом месте меню (File — Export). К счастью горячая клавиша Alt + Shift + Ctrl + S все еще работает.

Инструмент Save for Web для GIF анимации

В открывшемся окне настроек надо выбрать формат GIF, а также убедиться, что настройка Looping Options установлена в Forever. В нижнем правом углу окна есть возможность запустить созданный вами анимированный GIF в Photoshop для предпросмотра.

Настройки и сохранение GIF анимации

Если все функционирует так, как нужно, кликаете Save и сохраняете файл на локальном компьютере. Чтобы проверить работоспособность GIF требуется открывать его в браузере, т.к. встроенный просмотрщик Windows анимацию не проигрывает.

Кстати вы также легко можете экспортировать ваш проект в видео формат. Порядок действий аналогичный как при сохранении GIF анимации, но в Фотошоп меню выбираете пункт File — Export — Render Video.

Экспорт GIF анимации в видео формат

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

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

Если у вас остались еще какие-то вопросы о том как сделать GIF анимацию в Фотошопе или есть дополнения, пишите в комментариях.

17 комментариев к статье “Создание GIF анимации в Photoshop”
  1. Milko

    Спасибо за инструкцию, достаточно быстро получилось создать GIF анимацию пусть и не особо сложную.

  2. Tod

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

  3. Димон

    Классная у вас гифка получилась в начале статьи! Сделаю себе похожее видео в Инстаграме.

  4. Ух ты! Я всегда считала что в фотошопе нельзя сделать анимированную гифку. Пошла тестировать

  5. Жанна

    даже не лень хороший отзыв оставить! столько тупизма поначиталась, пока нормальное объяснение нашла, спасибо!

  6. Tod

    Жанна, и вам спасибо за позитивный отзыв.

  7. Дмитрий

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

  8. Саша

    Здравствуйте! Большое спасибо за статью, очень помогла! Но возник вопрос, у меня в ФШ гифка смотрится лучше, чем после сохранения на диске. В сохранённом варианте появляются пятна на прозрачном фоне (дизеринг?)и цвета, которые на оригинале чёткие, становятся размытыми. Вероятно я что-то неверно делаю? Но всё выполняю по Вашей инструкции! Вы не подскажите ли как решить эту проблему? И второй вопрос, возможно ли редактировать анимированный гиф как картинку в ФШ? Тогда проблему бы решил.. Спасибо в люом случае!!

  9. Tod

    Саша, в фотошопе вроде есть функция в меню как раз для этой ситуации — в меню «Файл» (File) — «Импорт» (Import) — «Видео кадры в слои» (Video Frames to Layers). Но у меня что-то не сработала, а вот если просто перетащить гифку в ФШ, то сразу подгрузились все кадры, это в Photoshop CC 2017. По поводу изображения в результирующей гифке — я бы глянул на настройки качества при сохранении, возможно, там можно что-то подправить.

  10. maximka

    Gif можно и без фотошопа на много быстрее делать вот как тут http://softgayd.ru/index.php/programmy/grafika/547-kak-sdelat-gif-animatsiyu-bystro

  11. Tod

    maximka, ну, в фотошопе не то чтобы слишком сложно, дело нескольких минут.

  12. Ольга

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

  13. Николай

    спасибо, помогло)

  14. Катерина

    Спасибо большое!

  15. Отличная статья! я сделала благодаря ей свой первый рекламный баннер

  16. Tod

    Марго, рады, что статья вам пригодилась)

  17. Мария

    Супер спасибо!!!!!!

Оставить комментарий

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *