В общем, первым шагом в мотаже эффектов было наложение чёрных точек на пустое небо. По сценарию это должны быть виверны, поэтому первым в голову мне пришла идея наложить анимированных маленьких птичек. Птичек я решил поискать в 3DS максе и даже нашёл готовый проект, но он почему-то при рендеринге отображал чёрный экран. Затем я попытался сделать что-то подобное в плагине Trapcode Particular, но покопавшись минут 20 в его настройках так и не смог подобрать ничего адекватного. И лишь затем я подумал, а почему бы не попробовать наложить анимированную гифку? При первом же запросе "анимация птица" яндекс мне выдал подходящую анимашку. И тут началось самое интересное.
Оказывается Adobe After Effects не признаёт прозрачность гифок и вместо прозрачности ставит им белый фон. Первой идеей было поменять режим наложения слоя на Darken , но так терялись и белые участки на теле птички. В принципе выглядело неплохо, но хотелось лучшего. К тому же тут попалась и картинка получше, с большим количеством кадров.
Её я изначально закинул в фотошоп и был приятно удивлён - в CS5 появилась возможность редактировать анимированные гифки покадрово . Хотя, возможно, это было и в CS4. А раньше для редактирования другие кадры, кроме первого, были недоступны. Хорошая фича. Фон тоже оказался прозрачным. Сначала я подумал, что можно просто сохранить png-sequence и принялся делать это покадрово. Но кадров оказалось около 20-ти, и я подумал, что должны же тут быть какая-то автоматизация. Производитель ведь один и тот же. Интуитивно выбрал File > Export > Render Video... и тут же нашёл опцию Image Sequence. Выбрал формат PNG, сохранил. Затем в After Effects выбрал File > Import > File , нашёл сохранённые пнг-шки, поставил галочку sequence - и вот, анимация уже совершенно прозрачная лежит в AE. Отлично, уже прогресс. Дальше немного наладил цвет, затемнил, и выглядело это уже очень даже неплохо, если бы одно но. Анимация проигрывается только один раз. Тут обратился к урокам крамера по созданию кровяных частиц, но там нашлось только руководство о том, как выставить в анимации нужные нам 24 кадра в секунду. Повторение анимации он уже задавал непосредственно в настройках плагина с частицами, который он использовал. Что ж, пришлось кумекать самому. Пролистал ниже настройки png sequence (они вызываются по правому клику по анимации в проекте, затем Interpret Footage > Main) и нашёл строчку Loop _ times, ввёл в неё 100500 раз. Это было то что нужно, и теперь я смог растянуть анимацию птиц на всё время клипа. Дальше уменьшил их до нужных размеров, размножил, чуток подразмыл, немного сместил, чтобы анимация на каждой птичке не проигрывалась одинаково, добавил всем им небольшой эффект wiggle, чтобы летели не так прямо. Затем построил саму анимацию полёта по кривой и вот, всё выглядит примерно так, как я и хотел.
В общем, дейсвтуя набоум нашёл все нужные мне опции и узнал много чего нового. Порой самому разбираться намного лучше и интереснее, чем сразу лезть в интернет в поисках каких-то гайдов. Один этап позади, но дальше меня ждёт ещё очень много сложностей.

Тип сжатия

Выбирает компрессор видеосигнала (кодек) для сжатия видео.

Кадров в секунду

Задает число отдельных изображений, отображающихся за одну секунду. Стандартный видеоформат NTSC имеет частоту кадров 29,97 кадр/сек. Европейский видеоформат PAL имеет частоту кадров 25 кадр/сек. Стандарт для кинофильмов - 24 кадр/сек. Фильм QuickTime иногда создается с более низкой частотой кадров, чтобы снизить пропускную способность и нагрузку на процессор.

Фильмы с более высокой частотой кадров лучше передают движение, но имеют большой размер файла. Если выбрать частоту кадров меньше текущей, кадры удаляются. Если выбрать частоту кадров больше текущей, существующие кадры дублируются (не рекомендуется, поскольку в этом случае увеличивается размер файла без повышения качества). В большинстве случаев ваш ролик будет выглядеть лучше, если вы выберете число, на которое его частота кадров делится без остатка. Например, если частота источника составляет 30 кадров в секунду, необходимо выбрать частоту кадров 10 или 15. Не следует выбирать частоту, превышающую частоту исходного материала.

Частота ключевых кадров

Указывает частоту ключевых кадров. Увеличение частоты ключевых кадров (меньшее число) улучшает качество видео, но увеличивает размер файла. Некоторые кодеки автоматически вставляют дополнительные ключевые кадры, если изображение слишком сильно изменилось по сравнению с предыдущим кадром. Обычно достаточно одного ключевого кадра на каждые 5 секунд (умножьте количество кадров в секунду на 5). Если создается файл для потоковой передачи данных по протоколу RTSP, и возникают сомнения по поводу надежности связи, можно увеличить частоту ключевых кадров до одного ключевого кадра на каждую секунду или две секунды.

Ограничить скорость передачи данных до

Задает значение скорости передачи данных при воспроизведении (в килобитах в секунду). Большее значение скорости передачи данных обеспечивает более высокое качество воспроизведения, однако не рекомендуется превышать значение предельной пропускной способности.

Глубина

Задает количество цветов в экспортируемом видео. Это меню недоступно, если выбранный кодек поддерживает только одну глубину цвета.

Качество

Если параметр доступен, перетащите ползунок или введите значение, чтобы настроить качество экспортируемого видео, и, соответственно, размер файла. При использовании одного и того же кодека для захвата и экспорта и при наличии отрендеренной последовательности (для предварительного просмотра) можно сократить время рендеринга. Для этого настройки качества экспорта и исходные настройки качества захвата должны совпадать. Если качество превышает исходный уровень качества записи, то качество создаваемого видеоряда не улучшится, а время обработки может увеличиться.

У нас в 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!

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

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

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

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

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

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

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

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

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

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