Во многих крутых компаниях GIF-анимации играют очень мощную роль в маркетинге. Некоторые даже задумываются о том, чтобы использовать GIF-ки на своих главных страницах вместо программной анимации.
Многие дизайнеры встают перед задачей создания крутых GIF-ок, поэтому мы решили затронуть эту тему.
Дизайн GIF
1. Секретный соус
Вот один маленький грязный секрет: GIF анимации — это видео. Обычно используется ScreenFlow, который также используется для создания видео презентаций продуктов. Он довольно простой в освоении, и при этом имеет вполне полезные инструменты для анимации.
После создания можно экспортировать как видео и импортировать в Photoshop File > Import > Video Frames As Layers.
Для профессионалов: Если ScreenFlow или After Effect вам не по карману, создайте анимацию в Keynote и экспортируйте её, как видео. Да-с, там таки появилась такая возможность.
2. Меньше цветов = более забавно
Если вы хотите делать по-настоящему крутые GIF-ки, вы должны быть более избирательны в использовании цветов. Это не только скажется размере файла; использование меньшего количества цветов позволит создавать более длительные анимации при сохранении маленького размера.
“Хотите крутую GIF-ку? Будьте более избирательны в использовании количества цветов.”
3. Если возможно, используйте motion blur
Такие программы, как ScreenFlow и After Effect позволяют экспортировать видео с эффектом motion blur. Это не только делает анимацию более профессиональной, но также помогает избавиться от лишних кадров из GIF в Photoshop ради размера файла.
4. Быть (отчасти) ленивым
Представьте себе сколько всего можно было бы добавить в GIF-ку, которая была в начале этого поста. Маленькие подсказки с именами пользователей, кликающий по кнопке “+” курсор, наведение курсора над аватарками, раскрывая при этом еще больше подсказок и состояний. Людям не нужно видеть все, чтобы у них сложилась полная картина, поэтому покажите им только то, что вам нужно показать — ваше время и размер файла ограничены.
Экспорт GIF
Перед тем, как вы расслабитесь по поводу следующих ниже советов, попробуйте экспортировать свою GIF-ку. Если в результате вы получаете приемлемый размер файла — хорошо! Продолжайте в том же духе. Если файл слишком большой, то попробуйте это.
1. Избавьтесь от дублируемых кадров
Ваша анимация заканчивается и начинается с одной и той же точки. Если присмотреться, то вы заметите, что эти моменты содержат несколько дублируемых кадров, длиной в 0,03 секунды. Если там 10 дублируемых кадров, то удалите 9 из них и настройте длину каждого кадра больше, например 1 секунду.
Если это не помогает, то попробуйте заново импортировать видео, но в этот раз выберите Limit To Every 2 Frames. Это должно существенно урезать размер файла.
Для профессионалов: Это не жесткое и обязательное правило, но если ваша GIF-ка имеет больше 150 кадров, то вам будет очень сложно сохранить маленький размер файла.
2. Урежьте цвета
Когда вы сохраняете вашу GIF-ку в Photoshop, вы увидите выпадающий список “colors” справа. Поиграйте с этим значением. Задайте максимально низкое значение, которое при этом не превратит вашу анимацию в кашу.
3. Поиграйте с “lossy”
Если честно, то мы не знаем, что означает “lossy”. Но мы знаем, что если вы задаете значение где-то между 1 и 10, то вы тем самым сбросите несколько килобайт без потери качества.
Ничего из этого не работает. Помогите!
Если вы испробовали все из вышеперечисленного, но при этом не можете сократить размер файла, то это значит, что нужно вернуться на шаг назад. Не пытаетесь ли вы показать слишком много в своей GIF-ке? Есть ли какой-то другой вариант отобразить это? А что если я разобь/ эту GIF-ку на 2 отдельные? Как и самые креативные продукты, ваша GIF-ка будет выглядеть лучше если вы сфокусируетесь на одной вещи.
Бонус-видео: самый быстрый способ
Попробуйте: Загрузите видеофайл, который был сделан для создания этой публикации! (Вам понадобится ScreenFlow 5, чтобы его открыть)
Голова кругом? Вот несколько сервисов, которые автоматически делают GIF из видео.
Если все эти советы кажутся вам трудоемкими, попробуйте эти инструменты.
GIPHY GIF Maker (бесплатно) — Вы можете оставить свою GIF-ку приватной, если у вас есть аккаунт. В противном случае, все они будут доступны посетителям GIPHY.
EZGIF (бесплатно) — это конечно не такой простой инструмент, как GIPHY, но у него есть больше возможностей.
GifBrewery 3 ($4.99) — Это, пожалуй, единственный инструмент, который стоит купить, чтобы делать GIF-анимации.
