Приветствую вас в очередном уроке, благодаря которому вы узнаете как сохранить gif анимацию в фотошопе правильно. Что бы после сохранения она выглядела так, как вы ее делали, без лишних разводов, острых краев и прочей мелочи, с которыми многие сталкиваются.
Как сохранить в формате GIF
Примечание: формат gif доступен только, если изображения в 8 бит/канал. ( гиф поддерживает исключительно 8 битный/канал имейте это виду).
Примечание № 2: как быстро узнать бит/канал активного изображения, читайте в статье полезная информация во вкладке документа фотошоп.
Для преобразования изображения в 8 бит/канал зайдите во вкладку Изображение -> Режим -> 8 бит/канал.
Для сохранения анимации выберите Файл -> Сохранить для web -> Формат оптимизированного файла (GIF).
Обязательно установите галочку рядом с Преобразовать в sRGB, это позволит сохранить именно те цвета которые вы использовали, для отображения в браузере.
Затем в низу над кнопкой Сохранить установите параметры повторов, т.е сколько раз будет воспроизводиться анимация один раз, постоянно, или установите свое значение.
Примечание: в большинстве случаев ( 90%) устанавливают “постоянно”.
Теперь нажимаете сохранить, и наслаждаетесь. Если вам интересно ниже можно узнать как улучшить качество исходной анимации и повлиять на скорость ее загрузки в браузере.
Перед нами большое диалоговое окно. Давайте некоторые из параметров рассмотрим подробнее.
Цвета
Обратите внимание на данный параметр (максимальное количество цветов в цветовой таблице, по умолчанию он установлено 64. Данное число считается средним ( типо золотая середина ) значением, и отлично подходит практически для всего.
Например для черно-белой анимации я считаю значение 64 излишни большое. Для ч/б анимации устанавливаю значение 16, мне кажется оно идеальным. А для анимации например каких либо web элементов ( кнопок, баннеров, аватаров и пр. ) среднее значение бывает слишком мало, что приводить к неприятным разводам. давайте рассмотрим на примере:
Эта анимация сохранена со значением 16 | А эта со значением 256 Вы увидели хоть малейшую разницу?
Единственное что хочу заметить, на больших анимациях варьируется размер исходного файла.
А теперь следующий пример, на web кнопке
Сохранено gif со значением цвета 64 ( размер 18,9 kb )
Сохранено gif со значением цвета 256 ( размер 37,9 kb )
Чувствуется разница правда? и в качестве и размере. Всегда приходится чем то жертвовать, в моем случае я отдаю приоритеты “Качеству” лишние 19 кб меня так не пугают, в отличии от качества.
Чересстрочно
Данный параметр не менее важен как и все остальные. Если сохранить анимацию с активной галочкой Чересстрочно, в браузере анимация будет идти вместе с загрузкой изображения. А если сохранять не используя данный параметр, анимация будет показана только после полной загрузки изображения. Использование данного параметра сокращает время загрузки, однако значительно влияет на размер исходного файла.
Как правило чересстрочно активна по умолчанию, использовать ее или нет решайте сами.
Давайте повторим основные моменты сохранения gif анимации в фотошопе:
- Выберите Файл -> Сохранить для web -> GIF
- Установить галочку возле sRGB
- Установить параметры повторов (постоянно, однократно, другое)
- Нажать кнопку “Сохранить”
Есть пара вопросов:
- Вы используете “Чересстрочно” ?
- Для вас важнее качество или размер?
