Advertisement
  1. Design & Illustration
  2. Tools & Tips
Design

10 Способов Оптимизации GIF Анимации

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Animation in Adobe Photoshop.
How to Create an Animated Pixel Art Sprite in Adobe Photoshop
Create Your Own Animated Pre-loader in Photoshop

Russian (Pусский) translation by Andrey Rybin (you can also view the original English article)

GIF — стандартный формат сжатия изображений с большими областями однотонных цветов и четких элементов, таких как line art, логотипы или текст. Имея всего лишь 8 разрядность, он мог бы исчезнуть с просторов Интернета после введения форматов JPEG и PNG, но GIF по-прежнему является популярным веб-форматом благодаря его возможностям покадровой анимации. В этом уроке, мы подробнее рассмотрим возможные варианты, как конвертировать видео в GIF анимацию, и как оптимизировать размер файла. Давайте начнем!

Кроме того, если вам часто приходится иметь дело с GIF анимацией, вы можете использовать автоматизированное решение: Gift Export- экшен для Photoshop, доступный на Envato Market, который позволит вам взять несколько изображений, автоматически загрузить их в Photoshop, и экспортировать их как GIF.


1. Нарезка Анимации

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

10 Ways to Optimize a GIF File

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

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

10 Ways to Optimize a GIF File

3. Опция Save for Web 

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

10 Ways to Optimize a GIF File

4. Уменьшение Числа Кадров

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

10 Ways to Optimize a GIF File

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

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

10 Ways to Optimize a GIF File

6. Какой Алгоритм для Уменьшения Цветности Выбрать?

  • Perceptual (Перцепционный) предназначен для создания пользовательской таблицы цветов, в которой предпочтение отдается тонам, к которым человеческий глаз наиболее чувствителен.
  • Selective (Селективный), создает таблицу цветов подобную Перцепционной, но использует наиболее часто повторяющиеся цвета в изображении и предпочтение отдается цветам, используемым в Web. Использование этой таблицы цветов дает наибольшую цветовую целостность. (Эта опция стоит по умолчанию).
  • Adaptive (Адаптивный) предназначен для создания пользовательской таблицы цветов на основе спектра цветов изображения. Например, для изображения с оттенками зеленого и голубого, будет создана таблица преимущественно состоящая из зеленых и голубых цветов. В большинстве изображений цвета сконцентрированы в какой-то конкретной части спектра.
  • Restrictive (Ограниченный) применяет стандартную палитру, состоящую из 216, стандартную цветовую web-таблицу общую для 8 битных (256-цветов) палитр для Windows  и Mac OS . Этот параметр гарантирует, что ни один браузер не применит дизеринг к цветам изображения с 8 битовой глубиной цвета. Если изображение имеет меньше, чем 216 цветов, то неиспользуемые цвета удаляются из таблицы.
10 Ways to Optimize a GIF File

7. Дизеринг

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

10 Ways to Optimize a GIF File

8.Опции: Web Snap, Lossy, Transparency and Interlaced

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


9. Сравните Оригинальную и Оптимизированную Версии

После того, как вы внесли различные изменения, вы можете проверить разницу размеров файлов и разницу в качестве, используя режим 2-Up.

10 Ways to Optimize a GIF File

10. Просмотр, Сохранение Настроек и Оптимизация Размера Файла

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

10 Ways to Optimize a GIF File
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.