Формат GIF предназначен для сжатия изображений с большими областями сплошного цвета и чёткими элементами, вроде рисунков, логотипов или текста. Будучи форматом изображения 8 битовой глубины он давно бы исчез с просторов Интернета после введения форматов JPEG и PNG, GIF, но несмотря на это он по прежнему является излюбленным форматом среди веб-разработчиков благодаря своей функции покадровой анимации.

Кстати, если вам часто приходится работать с анимированными GIF файлами, то возможно вам будет интересно просмотреть автоматизированное решение – Photoshop экшен «Gift Export», доступный на Envato, который берёт несколько изображений, автоматически загружает их в Photoshop и экспортирует в формат GIF.

1. Обрезка анимации

Для начала откройте видео-файл в Photoshop. Большая часть видео для всей последовательности GIF анимации нам не нужна, поэтому можете обрезать её, прибегнув к помощи панели Timeline(Временная шкала). Просмотрите видео и найдите подходящий фрагмент, а остальное удалите.

2. Уменьшение размера изображения

Вы можете уменьшить размер изображения с помощью меню Image (Изображение), либо сделать это чуть позже в диалоговом окне Save for Web (Сохранить для Web). Лично я предпочитаю уменьшать изображение в начале работы в диалоговом окне Image Size (Размер изображение), потому как вы сэкономите время, нежели будете делать это в конце при сохранении. При изменении размера изображения, видео-слой необходимо преобразовать в смарт-объект, но не стоит беспокоиться, это никак не повлияет на рабочий процесс.

3. Save for Web (Сохранить для Web)

Что я люблю в этом процессе, так это то, что вам не нужно делать каких-либо преобразований на панели Timeline (Временная шкала) для сохранения покадровой анимации, так как диалоговое окно Save for Web (Сохранить для Web) сделает всю работу за вас, как только при выходе вы выберите формат GIF. Посмотрите, в правом нижнем углу диалогового окна появились параметры анимации. Если вы захотите уменьшить размер изображения, то сделать это можно в данном окне.

4. Уменьшение количества кадров

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

5. Количество цветов

Наиболее важной опцией для оптимизации размера файла формата GIF является количество цветов, которые используются в таблице цветов. Максимальное их число 256 и ограничены они 8-битной глубиной. Вообще говоря, количество цветов вы можете уменьшить до 64 или менее. Здесь всё зависит от исходного видео, возможно, вам придётся увеличить их количество для получения лучшего результата.

6. Алгоритм сокращения цветов

• Perceptual (Перцепционный) предназначен для создания пользовательской таблицы цветов, отдавая предпочтение тем тонам, которые чётко распознаёт глаз человека.
• Selective (Селективный) создаёт таблицу цветов, аналогичную Перцепционной таблице, но созданную на ключевых оттенках изображения. В этом алгоритме предпочтение отдаётся web-цветам. В Photoshop он установлен по умолчанию.
• Adaptive (Адаптивный) предназначен для создания пользовательской таблицы цветов спектра, преобладающих в изображении. К примеру, для изображения, в котором больше всего преобладает синих и зелёных цветов, будет создана таблица из синих и зелёных оттенков. Большинство оттенков изображения собирается в определённой области спектра.
• Restrictive (Ограниченный) применяет стандартную палитру, состоящую из 216 безопасных web-цветов. Этот параметр гарантирует, что ни один браузер не применит дизеринг к цветам изображения с 8 битовой глубиной цвета. Если изображение имеет менее чем 216 цветов, то неиспользуемые цвета удалятся из таблицы.
• Custom (Заказная) палитра цветов выбранных пользователем.

7. Dithering (Дизеринг)

Так как GIF-файлы содержат ограниченное количество цветов, вы можете имитировать недостающие цвета доступными при помощи сглаживания. Для этого в меню Dithering (Дизеринг) необходимо выбрать один из алгоритмов. Метод Diffusion (Случайный) предназначен для регулирования количества смешения. Методы Pattern (Регулярный) и Noise (Шум) не предназначены для этого. Чем больше сглаживание на изображении, тем больше будет размер файла. Смешение добавляет разноцветные пиксели вблизи друг от друга для имитации вторичных цветов или гладких градаций в цвете. Чтобы получился хороший результат, некоторые изображения должны содержать сглаживание. Но если вы хотите сохранить маленький размер файла, то сглаживание нужно использовать как можно меньше.

8. Другие опции

• Web Snap (Web-оснастка) помогает предотвратить размытие в браузере. Делается это путём привязки некоторых цветов к безопасным web-цветам. Чем больше web-цветов, находящихся в GIF, тем меньше браузером будет использоваться сглаживание. При значении 0% цвета будут не затронуты, а при значении 100% все цвета в изображении изменятся для Web-безопасности.
• Lossy (Потери) – данная опция контролирует степень потерь визуальной информации, которая способна уменьшать размер файла.
• Если в изображении содержится прозрачность, то поставьте галочку возле опции Transparency (Непрозрачность) для сохранения прозрачных пикселей. Убрав галочку, тем самым частично или в полной мере прозрачные пиксели заполнятся матовым цветом.
• При активной опции Interlaced (Чересстрочно) файлы формата GIF в браузере будут загружаться в несколько проходов.

9. Сравнение оригинала и оптимизированных версий

В результате добавления множества пользовательских изменений можно сравнить разницу в качестве и размере файла при помощи режима 2-Up (Два варианта).

10. Просмотр, сохранение настроек и оптимизация размера файла

Если в результате оптимизации GIF файла вы довольны окончательными настройками с возможностью предварительного просмотра в браузере, то не забудьте сохранить их в как пресет. Кроме того, вы можете указать ограничение на размер GIF файла при помощи дополнительной настройки Optimize to File Size (Оптимизация по размеру файла). После того, как вы её примените, программа Photoshop автоматически попытается подогнать размер с наилучшим качеством изображения.

 

 

источник

Серия сообщений "уроки по анимации":
Часть 1 - Блестяшки с помощью фильтра Lens Flare (Блик)
Часть 2 - Украшаем текст и картинку с помощью готовой анимации.
...
Часть 15 - Анимация горящей свечи
Часть 16 - Совершенствуем анимацию в Photoshop
Часть 17 - 10 способов оптимизации GIF
Часть 18 - Анимация движения и перемещения в фотошопе.
Часть 19 - Анимация перемещения блика по объекту в фотошопе