Главная » Photoshop » Вы здесь

Оптимизация и сохранение изображений в формате GIF

Как сохранить гифку в фотошопе
После создания анимации в Фотошопе ее необходимо сохранить в одном из доступных форматов, одним из которых является GIF. Особенностью данного формата является то, что он предназначен для отображения (воспроизведения) в браузере.

Если Вас интересуют другие варианты сохранения анимации, то рекомендуем прочитать вот эту статью:

Урок: Как сохранить видео в Фотошопе

Процесс создания GIF анимации был описан в одном из предыдущих уроков, а сегодня мы поговорим о том, как сохранить файл в формате GIF и о настройках оптимизации.

Урок: Создаем простую анимацию в Фотошопе

Сохранение GIF

Для начала повторим материал и ознакомимся с окном настроек сохранения. Открывается оно нажатием на пункт «Сохранить для Web» в меню «Файл».

Пункт Сохранить для Web в меню Файл для сохранения гифки в Фотошопе

Окно состоит из двух частей: блока предпросмотра

Блок препросмотра в онке настроек параметров сохранения гифки в фотошопе

и блока настроек.

Блок настроек в окне параметров сохранения гифки в Фотошопе

Блок предпросмотра

Выбор количества вариантов просмотра выбирается в верхней части блока. В зависимости от потребностей, можно выбрать нужную настройку.

Выбор вариантов просмотра в окне настроек параметров сохранения гифки в Фотошопе

Изображение в каждом окне, кроме оригинала, настраивается отдельно. Это сделано для того, чтобы можно было выбрать оптимальный вариант.

В левой верхней части блока находится небольшой набор инструментов. Мы будем пользоваться только «Рукой» и «Масштабом».

Инструменты Рука и Масштаб в окне настроек параметров сохранения гифки в Фотошопе

При помощи «Руки» можно перемещать изображение внутри выбранного окна. Выбор также производится данным инструментом. «Масштаб» выполняет одноименное действие. Приближать и удалять картинку можно и кнопками в нижней части блока.

Управление масштабом изображения в окне настроек параметров сохранения гифки в Фотошопе

Чуть ниже находится кнопка с надписью «Просмотр». Она открывает выбранный вариант в браузере по умолчанию.

Кнопка просмотра изображения в браузере в окне настроек параметров сохранения гифки в Фотошопе

В окне обозревателя, кроме набора параметров, мы можем также получить HTML код гифки.

Предпросмотр изображения в браузере по умолчанию при сохранении гифки в Фотошопе

Блок настроек

В данном блоке происходит настройка параметров изображения, рассмотрим его подробнее.

  1. Цветовая схема. Данная настройка определяет, какая таблица индексированных цветов будет применена к изображению при оптимизации.

    Выбор схемы индексирования цветов при сохранении гифки в Фотошопе

    • Перцепционная, а попросту «схема восприятия». При ее применении Фотошоп создает таблицу цветов, руководствуясь текущими оттенками изображения. По мнению разработчиков, эта таблица максимально приближена к тому, как человеческий глаз видит цвета. Плюс – наиболее приближенное к оригиналу изображение, цвета максимально сохранены.
    • Селективная схема похожа на предыдущую, но в ней преимущественно используются цвета, относящиеся к безопасным для web. Здесь также сделан упор на отображение оттенков, приближенных к исходным.
    • Адаптивная. В данном случае таблица создается из цветов, которые чаще встречаются в изображении.
    • Ограниченная. Состоит из 77 цветов, часть образцов которых заменены белым цветом в виде точки (зерна).
    • Заказная. При выборе этой схемы появляется возможность создать собственную палитру.
    • Черно-белое. В этой таблице используются только два цвета (черный и белый), также с использованием зернистости.
    • В градациях серого. Здесь применяются различные 84 уровня оттенков серого цвета.
    • MacOS и Windows. Данные таблицы составляются на основании особенностей отображения картинок в браузерах под управлением этих операционных систем.

    Вот несколько примеров применения схем.

    Образцы изображений с применением различных таблиц индексирования цветов при сохранении гифки в Фотошопе

    Как видим, первые три образца имеют вполне приемлемое качество. Несмотря на то, что визуально они почти не отличаются друг от друга, на разных изображениях эти схемы будут работать по-разному.

  2. Максимальное количество цветов в цветовой таблице.

    Настройка максимального количества цветов в таблице индексиррования при сохранении гифки в Фотошопе

    Количество оттенков в изображении напрямую влияет на его вес, а соответственно и на скорость загрузки в браузере. Чаще всего применяется значение 128, поскольку такая настройка почти не влияет на качество, при этом уменьшая вес гифки.

    Примеры настройки максимального количества цветов в таблице индексирования при сохранении гифки в Фотошопе

  3. Web-цвета. Данная настройка устанавливает допуск, с которым оттенки преобразуются в эквивалентные из безопасной Web-палитры. Вес файла определяется значением, выставляемым ползунком: значение выше – файл меньше. При настройке Web-цветов не стоит также забывать и о качестве.

    Настройка допуска преобразования цветов изображения в Web-цвета при сохранении гифки в Фотошопе

    Пример:

    Примеры настройки допуска преобразования цветов в Weeb при сохранении гифки в Фотошопе

  4. Дизеринг позволяет сгладить переходы между цветами с помощью смешивания оттенков, которые содержатся в выбранной таблице индексирования.

    Настройка дизеринга при сохранении гифки в Фотошопе

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

    Пример:

    Примеры применения настроек дизеринга при сохранении гифки в Фотошопе

  5. Прозрачность. Формат GIF поддерживает только абсолютно прозрачные, либо абсолютно непрозрачные пиксели.

    Настройка прозрачности фона при сохранении гифки в Фотошопе

    Этот параметр, без дополнительной подстройки, плохо отображает кривые линии, оставляя пиксельные лесенки.

    Примеры применения подстройки Матовый при сохранении гифки в Фотошопе

    Подстройка называется «Матовый» (в некоторых редакциях «Кайма»). С ее помощью настраивается смешивание пикселей картинки с фоном страницы, на которой она будет расположена. Для наилучшего отображения выбирают цвет, соответствующий цвету фона сайта.

    Настройка смешивания пикселей изображения с фоном страницы ри сохранении гифки в Фотошопе

  6. Чересстрочно. Одна из самых полезных для Web настроек. В том случае, если файл имеет значительный вес, позволяет сразу показывать картинку на странице, по мере загрузки улучшая ее качество.

    Настройка чересстрочности при сохранении гифки в Фотошопе

  7. Преобразование sRGB помогает сохранить максимум оригинальных цветов изображения при сохранении.

    Настройка преобразования цветов в sRGB при сохранении гифки в Фотошопе

Настройка «Дизеринг прозрачности» значительно ухудшает качество изображения, а о параметре «Потери» мы поговорим в практической части урока.

Настройки дизеринга прозрачности и потерь данных при сохранении гифки в Фотошопе

Для наилучшего понимания процесса настройки сохранения гифки в Фотошопе, необходимо попрактиковаться.

Практика

Цель оптимизации изображений для интернета – максимальное снижение веса файла при сохранении качества.

  1. После обработки картинки переходим в меню «Файл – Сохранить для Web».
  2. Выставляем режим просмотра «4 варианта».

    Выбор количества вариантов просмотра результатов при сохранении гифки в Фотошопе

  3. Далее нужно один из вариантов сделать максимально похожим на оригинал. Пусть это будет картинка справа от исходника. Делается это для того, чтобы оценить размер файла при максимальном качестве.

    Настройки параметров следующие:

    • Цветовая схема «Селективная».
    • «Цвета» – 265.
    • «Дизеринг»«Случайное», 100 %.
    • Убираем галку напротив параметра «Чересстрочное», поскольку конечный объем изображения будет довольно маленьким.
    • «Web-цвета» и «Потери» – ноль.

      Настройка параметров эталонного изображения при сохранении гифки в Фотошопе

    Сравним полученный результат с оригиналом. В нижней части окна с образцом мы можем видеть текущий размер гифки и скорость ее загрузки при указанной скорости интернета.

    Сравнение результата оптимизации изображения с оригиналом при сохранении гифки в Фотошопе

  4. Переходим на картинку ниже только что настроенной. Попробуем ее оптимизировать.
    • Схему оставляем без изменений.
    • Количество цветов уменьшаем до 128.
    • Значение «Дизеринга» снижаем до 90%.
    • Web-цвета не трогаем, так как в данном случае это нам не поможет сохранить качество.

      Настройка параметров целевого изображения при сохранении гифки в Фотошопе

    Размер гифки снизился с 36,59 КБ до 26,85 КБ.

    Снижение размера изображения после оптимизации при сохранении гифки в Фотошопе

  5. Поскольку на картинке уже присутствует некоторая зернистость и небольшие дефекты, попробуем увеличить «Потери». Данный параметр определяет допустимый уровень потери данных при сжатии GIF. Меняем значение на 8.

    Настройка уровня допустимых потерь данных при сжатии GIF для сохранения гифки в Фотошопе

    Нам удалось еще уменьшить объем файла, при этом немного потеряв в качестве. Гифка теперь весит 25,9 килобайт.

    Размер изображения после настройки потерь при сохранении гифки в Фотошопе

    Итого, мы смогли снизить размер картинки примерно на 10 КБ, что составляет более 30%. Весьма неплохой результат.

  6. Дальнейшие действия весьма просты. Нажимаем на кнопку «Сохранить».

    Кнопка Сохранить в окне настроек сохранения гифки в Фотошопе

    Выбираем место для сохранения, даем название гифке, и снова жмем «Сохранить».

    Выбор места и имени сохранения гифки в Фотошопе

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

    Сохрание гифки вместе с HTML документом в Фотошопе

    В результате получим страницу и папку с изображением.

    Папка с сохраненной гифкой в Фотошопе

Совет: при присвоении имени файлу старайтесь не использовать кириллические символы, поскольку не все браузеры в состоянии их прочитать.

На этом урок по сохранению изображения в формате GIF завершен. На нем мы выяснили, каким образом можно оптимизировать файл для размещения в интернете.

Мы рады, что смогли помочь Вам в решении проблемы.
Попробуйте найти другие ответы на сайте



...или задайте вопрос в комментариях, где Вам обязательно ответят в кратчайшие сроки.

Опрос: помогла ли вам эта статья?

Да Нет

Еще статьи по этой теме:

Поделиться статьей в социальных сетях

Оставьте свое мнение о статье