7 советов по созданию GIF анимаций

https://medium.com/InVisionApp/d51af4bae8b7
  • Перевод
  • Tutorial
61563fa3ab3147239dc7777662290fbe

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

В конце концов люди начали спрашивать нас: «Как вы создаете GIF анимации?». Пришло время раскрыть секрет.


Дизайн GIF изображений


1. Секретный ингредиент


Вот мой небольшой секрет: все мои GIF анимации сначала были видео-файлами. Обычно я использую ScreenFlow, который я кстати также применяю для создания видео наших продуктов. Это простая программа, которая в то же время содержит множество полезных анимационных инструментов.
После того как я сохраняю анимацию как видео файл, я импортирую его в Photoshop через File > Import > Video Frames As Layers.



Совет: Если ScreenFlow или After Effects вам не по карману, то создайте анимацию в Keynote, и экспортируйте ее как видео. Наконец-то, хоть какое-то применение этой функции в Keynote.

2. Меньше цветов = больше веселья


Если вы хотите делать крутые GIF анимации, то нужно с особым трепетом подойти к выбору цвета. Это повлияет не только на размер файла, но и позволит создать более продолжительные анимации с маленьким размером файла. (Для меня маленький — это менее 1MB)

3. Используйте размытие в движении (motion blur), если возможно


Такие программы как ScreenFlow и After Effects позволяют экспортировать видео с применением размытия в движении. Это не только придаст вашей анимации профессиональный вид, но и упростит процесс уменьшения размера файла в Photoshop.

motionblur

nomotionblur



4. Будьте (отчасти) ленивыми


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

Экспорт GIF анимаций


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

5. Удалите кадры-дубликаты


Скорее всего ваша анимация останавливается или остается неподвижной на какой-то момент времени. Присмотревшись, можно заметить, что этот момет состоит из нескольких одинаковых кадров. Если таких кадров 10 штук, то удалите 9 из них и установите длительность оставшегося кадра на, например, 1 секунду.

delete_dublicates

Если это не поможет, попробуйте заново импортировать видео, но на этот раз выберите параметр Limit To Every 2 Frames. Это должно значительно уменьшить размер файла.



Совет: Если ваша анимация состоит из более 150 кадров, то возникнут проблемы при попытках уменьшить размер файла.

6. Меньше цветов


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



7. Измените параметр Lossy* (потери)


Если честно, то я даже не знаю, что этот параметр означает. Но я точно знаю, что если вы поставите его на уровне между 1 и 10, то избавитесь от лишних килобайтов без потери качества.



*«Потери» (Lossy) — допустимый уровень потери графической информации в растровом файле, позволяющий уменьшить файловый размер изображения

Ничего не изменилось! Помогите!


Если вы попробовали все, что было сказано выше, но так и не смогли уменьши размер GIF анимации, то нужно сделать шаг назад. Может вы хотите невозможного? Есть ли другой способ добиться желаемого? Можно ли разбить файл на две GIF анимации? Будет лучше, если ваша GIF анимация сделает акцент на одном аспекте.

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

    <irony>Ну да, мегабайтные изображения намного лучше</irony>
      +2
      Тут вопрос в том — чем вы готовы пожертвовать: траффиком или процессорным временем.
      Я полагаю, что аналогичные CSS/JS анимации более CPU intensive и, соответственно, будут «грузить» браузер больше на порядки.
      Опять же, это влияет на жизнь батареи (на лэптопах, мобильных устройствах).
      Ну и — Gif более кроссплатформенны, чем CSS/JS :)
        +5
        Без особой необходимости анимацию лучше вообще не использовать.
          0
          Ну или так, да.
            0
            Это путь слабых (тоже ирония)
          +8
          Кстати да, 8-й совет:

          Обрабатывайте гифки после создания каким-нибудь минификатором. Например после обработки Gifsicle титульная гифка стала весить 650кб вместо 1081кб.
        +3
        Вместо Photoshop'а можно конвертировать видео в GIF с помощью ffmpeg и сжимать/оптимизировать с помощью ImageMagick. Пример скрипта.
          +3
          С моим медленным интернетом(за невозможностью получить более быстрый), Ваш сайт я успел посмотреть еще до загрузки картинок и закрыть его.
            +1
            Спасибо за перевод. Вопросов нет.
            –8
            Альтернативное мнение
            GIF-анимация — чума веба 2010-х годов.
            Это как эмодзи, только еще хуже. Ну нормально же без этого жили, нет блин, надо везде запихать мерзкие движущиеся картинки и мерзкие желтые рожи.
              +3
              aulandsdalen, если вам так уж сильно не нравится анимация изображений, то зачем вы мучаетесь? В некоторых браузерах была/есть опция показа/отключения gif-анимации (показывается только первый кадр). Думаю, что и для тех браузеров, где этой опции нет изначально — можно найти нужное расширение или скрытую опцию. В крайнем случае — можно задать правило в блокировщике рекламы и не грузить .gif вообще.
              Это самое простое из того, что приходит на ум. Но лично мне gif-анимация не мешает, а красиво-сделанная gif-анимация очень даже нравится.
                +1
                Дело в том, что если на десктопе я могу что-то сделать, то на мобильнике — ничего. И вот открываю я очередную страничку по лимитированному мобильному интернету, а она подгружает этих анимированных картинок мегабайт так на сто.
                А еще оно все движется самовольно, без моего на то желания, а это просто ужасно. Зато модненько, красивенько и вебдванольно.
              +6
              Даже с моим не самым медленным интернетом, жутко раздражают подобные сайты. Ладно бы еще анимация не отображалась до полной загрузки… А так нужно наблюдать эти дерганья и после загрузки еще раз смотреть уже с «нормальным» фпс.
                0
                А чем не подходит svg, swf, webm, ogv, etc?
                  +1
                  Прошу прощения, снимаю вопрос — не увидел тега «перевод».
                  +1
                  Ценный совет для тех у кого не получается делать плавные анимации с fps 30, сам долго бился.
                  toster.ru/q/109609
                    +1
                    Утром Medium Daily Digest, вечером перевод на Хабре. Удобно ;-)
                    По теме — сразу вспомнил известное видео Addy Osmani, где он в том числе оптимизирует тяжелый GIF
                      +3
                      Благодарю за полезную инфу, возьму себе на заметку!

                      Может, кому пригодится, года 3 назад делал пошаговую инструкцию по созданию gif-анимации из уже готовых кадров в Ulead Gif Animator 5.

                      Делал с помощью этой программы gif-слайдшоу по игровому процессу настолки «Проект Манхэттен» от Мосигры:
                      Стройка

                      Выбор чертежа

                      Шпионаж

                      Авиаудар и ремонт

                      Постройка и погрузка приборов



                      Саму игрушку тогда любезно предоставил Milfgard, и вещь, скажу я вам, действительно достойная :)

                      Кроме этого использовал GIF-слайдшоу также в своих обзорах электронных книжек и пару компактных фотоаппаратов. В качестве наглядной, но в то же время компактной, штуки для демонстрации фишек и возможностей описываемого в обзоре гаджета, приложения или любого прибора, игрушки, явления, имхо, GIF иногда подходит в самый раз.
                      Вот, например, мои статьи на Хабре о гаджетах, где я эту штуку использовал (в хронологическом порядке): Pocketbook Touch, PocketBook Basic New 613, Assistant AE-601, Kindle 5 (он же, при более детальном рассмотрении — Kindle 4), Nook ST и пара компактов от Nikon (Coolpix P7700 и Coolpix P310).
                        +1
                        Я логотип оптимизировал долго в Gif а потом на Svg. В итоге логотип получился в несколько сотен байт и встроен в страницу. А старичкам отдается по прежнему Gif.

                        Есть ещё самая важная оптимизация когда в каждом кадре только разница с предыдущим. Или я упустил этот момент в статье?
                          +1
                          Если речь идет об анимации интерфейса, я обычно их сперва реализую на CSS\JS и потом пользуюсь программой ScreenToGif
                          Получается, например, такое:

                            0
                            Если делать черное-белое, то в 150 кб запросто помещается вот такое www.trayos.com/i/preview.gif (извините, нет кармы для спойлера или ссылки)

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

                            Самое читаемое