Показатель отказов: от чего он зависит?

Показатель отказов – важный параметр работы сайта. Он показывает, насколько ресурс интересен и полезен для пользователей. Соответственно, чем ниже процент отказов, тем вы...

Копия сайта и необходимость ее создания

Несмотря на то, что сайт – это не вещь, его тоже можно потерять. Серьезные проблемы с интернет-порталом могут быть результатом:Посягательств со стороны злоумышленников. П...

Грамматические ошибки на сайте: накажут ли за них поисковики?

Стоит ли опасаться гнева поисковика, если на страницах сайта присутствуют грамматические ошибки? Этот вопрос волнует всех, кто уже давно распоряжается собственным виртуал...

7 подсказок для создания анимированных гифок

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

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

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

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

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

 

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

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

 

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

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

 

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

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

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

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

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

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

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

 

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

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

 

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

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

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

Источник