Многие умеют делать gif баннеры или анимашки, но не все заботятся о том, чтобы анимация не была слишком тяжелой. Умение делать "легкие" гифки - это искусство баланса между качеством и объемом анимации. В этой статье будет перечислено несколько советов как можно облегчить вес анимации.
1. Чем меньше размер картинки, тем меньше ее вес
90.1 КБ, 468*60px | 9.61 КБ, 50*6px |
на примерах выше видно что разница в размере и весе почти в 10 раз. Так что выводим из этого первое правило при создании гиф баннера: чем больше размер картинки, тем проще должна быть анимация.
2. Чем больше кадров, тем тяжелее анимация
90.16 КБ; 78 кадров | 50.2 КБ; 38 кадров |
Некоторым может это показаться удивительно, но если удалить половину кадров анимации, разницы почти не заметно.
просто зажмите кнопку CTRL и выделяйте кадры через один, а потом перетащите их в корзину. В некоторых случаях это можно повторить дважды (если анимация вытерпит повтора и не станет слишком резкой). Также можно воспользоваться автоматическим онлайн-сервисом, который сделает работу за вас. Например:
Находим Optimization method, выбираем Drop Frames
3. Убирайте галочку "прозрачность" с непрозрачных гифок
Во-первых "GIF с прозрачностью" - это миф. Если установить на анимашку прозрачность без подложки (matte), картинка будет "обрезаться". для того, чтоб этого не было нужно всегда устанавливать подложку, которая будет соответствовать цвету фона, на котором будет расположена картинка. (само собой, если фон изменится, то подложку будет видно). Так что, галочку transparenty нужно убрать и не трогать.
4. Чем больше количество цветов, тем больше вес изображения
При облегчении изображений требуется жертвовать его качеством. Например, можно понизить количество цветов. Некоторые изображения без проблем потерпят такие изменения. Высший пилотаж - стилизовать анимацию так, чтоб в ней и без того использовалась небольшая палитра оттенков.
5. Откажитесь от градиентов
При создании баннеров лучше вообще не использовать полу-прозраных областей и всяческих градиентных переходов - тогда можно будет без сожаления ставить галочку no deither. Если все же градиенты есть, то попробуйте понизить процент сглаживания так, чтоб не смотрелось слишком резко.
6. Добавьте шума и попрощайтесь с отменным качеством
90.16 КБ; lossy 0 | 71.63 КБ, lossy 200; |
Финальные помощники в подгонке качества картинки ползунки lossy и web sharp, чем больше значение поставите, тем хуже будет качество и меньше будет вес. Их тоже нужно докрутить до той черты, когда потеря качества еще не режет глаз.
- Подпись автора
Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.