Делаем gif-анимации сами. Инструкция.

Илья Слюсарев -

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

Создавать гифки в фотошопе с нуля — долго. Очень долго. На создание первой гифки у меня ушло 40 минут. На FL создание гиф-баннера стоит от 500 рублей. За 2500 можно сделать красивую анимацию. Есть ещё разные сервисы по созданию гифок, некоторые бесплатны. 



Я делаю простенькие анимации для Инстаграма* и «ВКонтакте»:

  • Когда нет идей для публикаций,
  • Когда лень что-то снимать,
  • Когда хочу протестировать новую рекламу.


Гифки можно использовать для публикаций в соцсетях, для анимированных изображений в емейлах, в баннерах для РСЯ. Для Фейсбука*, Инстаграма*, Твитера и некоторых других соцсетей, гифки — статичные картинки, чтобы они зашевелились и постоянно проигрывались, гифку нужно конвертировать в mp4. 

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

Вы можете посмотреть видео-процесс с комментариями, как создавать такую анимацию. Видео длится 14 минут. Чтение статьи занимает 5 минут. 
 



Создаем новый файл


Открываем фотошоп и создаем новый файл с разрешением 1080×1920 px. 
«Файл» → «создать новый файл» или ctrl+N 
 


 


Я буду создавать эффект пишущей машинки. Буду анимировать только одно слово. Но просто белое полотно, мне не нравится, поэтому я его дополнительно украсил. 
 


 


Добавляю нужный мне текст, и открываю шкалу времени. 
«Окно» → «Шкала времени» 
 


 


Появляется новое меню, которое чем-то похоже на видеоредактор. Это он и есть. 
 


 


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

После нужно будет все проверить и можно создавать. Инстаграм* увидит файл типа gif на телефоне, но не поймет, что это анимированный файл, и отнесется к ней как к фотографии. Поэтому нам нужно сохранить как видео файл. Нужно найти кнопку внизу Шкалы времени «Экспорт видео». И создать видеофайл. 
 


 


Но чаще мне нужны и видеофайл и гиф. Поэтому я сохраняю и в гифе. Жмите «Файл» → «Экспортировать» → «Сохранить для веб». И сохраняйте как гифку. 
 




Советы


Используйте минимум цветов. Это уменьшит размер файла. 

Размер гифки имеет значение, если вы делаете сайт. Для соцсетей это не имеет значения. «ВКонтакте» любую гифку пережимает в видео, и из гифки в 40 Мб, может получиться файл в 700 кБ. 

Будьте умеренно ленивым. Серьезно, создавать картинку больше получаса ну как-то несерьезно.