Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

15 января 2015 | Опубликовано в статьюшечки | 1 Комментарий »

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

 

 


blogtest

Дизайн гифок

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

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

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

gif-post_0000_Layer Comp 1

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

 

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

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


 

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

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

no-motion-example

motion-example


 

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

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

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

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

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

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

gif-post_0004_Layer-Comp-5

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

gif-post_0003_Layer Comp 4

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

 

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

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

gif-post_0002_Layer Comp 3


 

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

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

gif-post_0001_Layer Comp 2

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

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

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

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

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




Комментарии

  1. Alex Ru
    Thumb up Thumb down +1

    Lossy — сжатие данных с потерями, но если удерживать в разумных пределах этот параметр, то глаз просто напросто не заметит потери качества.