Из сегодняшней публикации вы узнаете как создавать классные гифки, которые украсят ваш дизайн и оживят любую страницу. Расскажут об этом представители студии InVision, которые активно используют этот вид анимации на своем сайте, предпочитая гифки перегруженному коду. Сегодня вы узнаете как создать такие же анимированные картинки.

Дизайн гифок

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

Главный секрет InVision заключается в том, что изначально их гифки это видео. Они создаются в ScreenFlow, так же, как и видеоматериалы для сайта. Эта программа довольно проста в изучении, и при этом располагает отличными инструментами для создания анимации.

После создания желаемого действия, работа экспортируется как видеофайл, а затем импортируется в Photoshop следующим образом: File > Import > Video Frames As Layers.

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

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

3. Используйте размытие когда это возможно

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

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

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

Экспорт гифок

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

5. Удаляйте повторяющиеся кадры

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

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

6. Уменьшайте количество цветов

При сохранении гифки в Photoshop, вы можете видеть выпадающее меню “colors” в правой части окна. Поэкспериментируйте со значением этого параметра. Постарайтесь указать минимально возможное значение, при котором гифка не потеряет «товарного вида».

7. Настройте параметр lossy

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

Если ничего из вышеперечисленного не работает

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

Автор статьи Andy Orsow

Перевод — Дежурка

Смотрите также:

• 10 способов использования пастельных тонов в веб-дизайне
• Творческий подход к каркасному моделированию
• Как создать руководство по стилю для веб-дизайна