Категория > Самоучитель CSS > Создание GIF анимации в Photoshop - «Веб-дизайн»

Создание GIF анимации в Photoshop - «Веб-дизайн»


4-05-2017, 16:49. Автор: Эммануил

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



  • импорт картинок в гифку;

  • настройки GIF анимации в Adobe Photoshop;

  • экспорт / сохранение в GIF формат или видео.


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



    A video posted by Alex Tod (@alextod35) on Jan 15, 2017 at 5:11am PST



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


    горячая клавиша Alt + Shift + Ctrl + S все еще работает.


    Создание GIF анимации в Photoshop - «Веб-дизайн»
    Создание GIF анимации в Photoshop - «Веб-дизайн»


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


    Создание GIF анимации в Photoshop - «Веб-дизайн»
    Создание GIF анимации в Photoshop - «Веб-дизайн»


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


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


    Создание GIF анимации в Photoshop - «Веб-дизайн»
    Создание GIF анимации в Photoshop - «Веб-дизайн»


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


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



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


    Перейти обратно к новости