Анимированное изображение сохраняется в формате GIF (Graphics Interchange Format - Формат обмена графическими данными). Например, название файла выглядит так ЛЕС.gif, где ЛЕС - это имя файла, которое, конечно, может быть любым и далее идет .gif или .GIF - указание на формат файла или, как еще говорят, расширение файла. Вот эта часть названия файла и указывает вашему компьютеру, как работать с данным видом информации. Например, какой программой можно открыть данный файл, какими свойствами он обладает и т. д. Как открыть GIF- файл в программе фотошоп, я расскажу в одном из следующих уроков, а сегодня разберем возможности программы Photoshop CS3 и Photoshop CS4 в вопросе сохранения анимации.



И так анимированное изображение создано и находится на рабочем столе Photoshop



Для того чтобы его сохранить идем к вкладке Файл на панели меню, расположенной в верхней строке рабочего стола. В выпадающем диалоговом окне переходим к команде Сохранить для Web и устройств (Save For Web & Devices). Т.е. выполняем последовательно команду Файл > Сохранить для Web и устройств
(File > Save For Web & Devices).

После выполнения данных действий откроется окно Save For Web & Devices в котором можно задать параметры сохранения нашего GIF - файла. Внимательно рассмотрите это окно.



Диалоговое окно Save For Web & Devices содержит
четыре вкладки.

- Original ( Оригинальное )- изображение в исходном состоянии.

-Optimized ( Оптимизированное )- изображение после применения выбранных средств оптимизации для Web.

- 2-up - исходное изображение рядом с оптимизированным. Вкладка используется чаще всего.

- 4-up - исходное изображение и три возможных варианта его оптимизации. Применение данной вкладки требует значительного объема оперативной памяти компьютера.

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

Перейдем непосредственно к настройкам, которые находятся в правой части диалогового окна

Save For Web & Devices.



Разберемся со значениями основных элементов управления настройками.

В самом верху имеется окно с выпадающим списком форматов в которых можно сохранять изображения, загружаемые в браузер. Имеются следующие форматы - JPEG, PNG, GIF и формат

WBMP, который поддерживается мобильными телефонами. Нам нужен формат GIF. Его и выставляем.

Color reduction algorithm (Алгоритм сокращения цветности) В выпадающем списке перечислены доступные алгоритмы. Здесь можно поэкспериментировать, чтобы выбрать параметр

обеспечивающий наилучшие результаты.

Specify the dithering algorithm (Алгоритм сглаживания) - список со стандартными параметраи сглаживания. Также можно поэкспериментировать, подбирая оптимальный вариант.

Lossy (Сжатие с потерями) - поле, в котором можно создать GIF-файлы с потерей качества изображения при сжатии. Пожертвовав качеством изображения, вы получите файл меньшего размера. Т. е. чем больше значение данного параметра, тем хуже качество, но меньше размер файла. При изменении в пределах 5 - 15% качество практически не изменяется, зато снижается размер изображения.

Dither (Сглаживание) - Это параметр сглаживания изображения. При небольшом изменении также можно снизить размер, не затронув качества.

Matte (Кайма) - Это важный параметр, на который нужно обратить внимание. Этот пункт обеспечивает незаметный переход от кромки изображения к фоновому цвету. Кайма должна быть того же цвета, что и фон на котором будет располагаться изображение. Например мой падающий осенний листик из первого урока расположен у меня на страничке на зеленом фоне, а в диалоговом окне Matte при сохранении остался белый цвет и поэтому вокруг листочка видна белая кайма и изображение выглядит от этого "неопрятным", как-будто вырубленным. Если в этом окне указать правильный цвет, то такого изъяна на изображении не будет.

Colors (Цвета) - список, позволяющий выбрать точное количество цветов для изображения. По умолчанию 256 - самое большое. Но чем больше цветов, тем размер файла , естественно, больше.

Web Snap (Привязка к Веб) - с помощью изменения процентной величины можно заменить цвета присутствующие в изображении ближайшеми эквивалентами цветов из палитры 216 Web-safe (216 цветов Веб). Проще говоря, все основные оттенки заменяются цветами Веб, что значительно сокращает количество цветов и уменьшает размер файла. Дает хорошие результаты, если в изображении изначально мало цветов и всевозможных оттенков или цветность изображения не очень важна.

Interlaced (Чересстрочная развертка) - Данный пункт определяет тип загрузки изображения в браузере. Если флажок убран, то изображение будет загружаться постепенно с верху. Если флажок проставлен, то изображение появится все сразу, но будет плохого качества, а затем в процессе загрузки картинка обретет ясность.

Transparency (Прозрачность) - Если в вашем изображении есть прозрачные области, то необходимо поставить значок рядом с этим пунктом. Иначе прозрачные области будут залиты цветом, который стоит в пункте Matte.

Color Table (Таблица цветов) - Таблица, которая представляет цвета, которые используются в оптимизированном изображении форматов GIF и PNG-8. Цвета с точкой в центре образца являются цветами Веб.Щелкнув по образцу цвета, его можно удалить или поменять на прозрачный. Например, таким образом можно заменить белый цвет на прозрачный вокруг изображения.

Под таблицей цветов имеется блок, где отображается размер сохраняемого оптимизированного изображения. Размеры картинки можно изменить. А также выбрать качество сохранения. По умолчанию - Bicubic.

И еще, надо помнить, что настраивая и выставляя параметры в диалоговом окне Save For Web & Devices (Сохранить для Web и устройств), мы не изменяем параметры самого исходного изображения, поскольку изображение с новыми параметрами сохраняется в новый файл с новым именем. Если в дальнейшем вы также хотите дорабатывать свою анимацию, что-то изменять в ней, т. е. продолжить работу , то файл нужно сохранить в формате Photoshop (PSD). При этом сохранятся все слои и кадры исходной анимации. Т. е. выполняем команду Файл>Сохранить как и в окне
сохранения устанвливаем формат PSD.

А еще при всем обилии информации, пугаться не стоит. Внимательно прочитав данный урок 2-3 раза при открытой программе Фотошоп и поэкспериментировав с параметрами сохранения, я думаю, многое прояснится. Кроме того, понимание каких-то нюансов придет в процессе создания анимации. Практика - великая вещь. Создавайте и сохраняйте свои анимационные картинки. На следующем уроке продолжим создавать анимашки с помощью размножения кадров анимации.


ИСТОЧНИК

Серия сообщений "уроки по анимации":
Часть 1 - Jasc animation Shop
Часть 2 - Программа Fanta Morph с инструкцией
...
Часть 11 - Перекрытие узора готовым анимированным глиттером
Часть 12 - Анимация с нуля.Урок первый.
Часть 13 - Анимация с нуля.Урок второй.
Часть 14 - Объёмная анимация
Часть 15 - Блеск драгоценностей
...
Часть 20 - Урок Sothink SWF Easy (Луна)
Часть 21 - УЧИМСЯ ПОЛЬЗОВАТЬСЯ ФИЛЬТРОМ Alien Skin Xenofex 2 - Constellation
Часть 22 - Большой каталог полезных сайтов

Серия сообщений "уроки по анимации":
Часть 1 - Блестяшки с помощью фильтра Lens Flare (Блик)
Часть 2 - Украшаем текст и картинку с помощью готовой анимации.
Часть 3 - Перекрытие узора готовым анимированным глиттером
Часть 4 - Анимация с нуля.Урок первый.
Часть 5 - Анимация с нуля.Урок второй.
Часть 6 - Урок. Мерцающие звездочки
Часть 7 - Объёмная анимация
...
Часть 17 - 10 способов оптимизации GIF
Часть 18 - Анимация движения и перемещения в фотошопе.
Часть 19 - Анимация перемещения блика по объекту в фотошопе