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

        Основная цель оптимизации изображений в формате GIF - уменьшение объема файла. При этом ставится задача сохранения приемлемого качества изображения.

        Для статических (не анимированных) GIF-изображений можно выделить следующие методы оптимизации:

• уменьшение количества цветов;
• оптимизация палитры изображения;
• стилизация изображения;
• фрагментарная оптимизация;

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

   6.1       Уменьшение количества цветов.

          Для большинства не фотографических изображений для нормального

воспроизведения вполне достаточно 256 и менее цветов. Поэтому «лишние»

цвета можно (и нужно) убрать из изображения, тем самым, уменьшив размер файла. Как уже отмечалось, формат GIF поддерживает размер палитры до 256 цветов. Теоретически, мы можем задать любое число цветов палитры в диапазоне 1...256. например. 33 цвета или 100. Практически же, количество цветов в изображении выбирается из ряда 2. 4. 8. 16. 32, 64, 128. 256. Приведенный ряд является рядом максимального количества цветов при использовании от 1 до 8 бит на пиксель. В случае если мы задействовали в рисунке, допустим. 100 цветов, то для сохранения информации о цвете каждого пикселя все равно будет использовано 7 бит (то есть 28 цветов окажутся «не востребованными» и память будет использоваться не оптимально). Поэтому при выборе количества цветов нужно ориентироваться на приведенный выше ряд, при этом следует постепенно уменьшать

размер палитры до появления заметного ухудшения качества картинки.

          Оптимизация палитры изображения. Использование палитры - это процедура преобразования полноцветного  изображения в индексное (другими словами - это переход от произвольных цветов к цветам из заданного набора). Палитра конечного изображения может быть либо фиксированной, либо оптимизированной. В первом случае графический редактор просматривает каждую точку изображения и подбирает ей ближайшую по цвету из палитры. Этот способ дает самые худшие результаты с точки зрения верности воспроизведения цветов. Попробуйте, например, преобразовать фотографию красной розы в индексное изображение, используя палитру, содержащую оттенки зеленого. Это конечно, крайний случай, но данный пример весьма показателен с точки зрения оценки качества преобразования с использованием фиксированной палитры. Тем не менее, данный способ применяется - в основном для того, чтобы изображения приемлемо выглядели на мониторах с малым количеством цветов (16 256). Обычно в этом случае пользуются так называемой палитрой Netscape (другое название - безопасная палитра), состоящей из набора часто используемых цветов и их оттенков. Применение палитры Netscape гарантирует, что изображения будут одинаково показаны всеми браузерами. При использовании оптимизированной палитры обрабатывающая программа вначале анализирует изображение и составляет список всех используемых цветов. Далее, на основании частоты появления цветов и максимального числа «удерживаемых» цветов, составляется палитра, которая называется оптимизированной. После этого, уже обычным способом, рисунок анализируется, и цвет пикселя заменяется ближайшим из палитры. Этот способ дает гораздо лучшие результаты. Иногда при недостатке цветов в палитре применяется так называемый дизеринг (color dithering). Например, у нас в палитре 16 стандартных чистых цветов, а нам нужен отсутствующий оранжевый цвет. В таком случае, мы можем составить его из красных и желтых точек, разместив их в шахматном порядке. Человеческое зрение обладает свойством смешения цветов точек, размеры которых не больше разрешающей способности глаз. Поэтому, издалека нам покажется,  что в изображении присутствует сплошной оранжевый цвет. Применение дизеринга для преобразования изображений может дать очень хорошие результаты. Но следует помнить, что с точки зрения оптимизации размеров файла эффект будет, скорее всего, обратным. Применение дизеринга может привести к увеличению, причем довольно существенному, размера файла. Все дело в способе хранения GIF-изображения, которое перед записью на диск подвергается сжатию методом LZW. Особенность этого метода заключается в том,  что сжатию лучше всего поддаются области,  заполненные однородным цветом, и хуже всего - области, состоящие из набора разноцветных точек. Дизеринг же, как раз,  и основан на том,  что получает недостающие цвета путем «перемешивания» точек разных цветов. Поэтому к оптимизации при помощи дизеринга нужно относиться очень аккуратно.

  6.2         Стилизация изображения.

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

   6.3        Фрагментарная оптимизация.

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

             Каждый фрагмент исходного рисунка оптимизируется отдельно. Дня фрагментов, содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно использовать полную палитру в 256 цветов (или даже сохранять их в формате JPG). Этот способ позволяет сократить «вес» изображения примерно в 2-3 раза. Хотя, если количество фрагментов превысит 10-12. то возможного выигрыша может и не получиться, так как для каждого фрагмента требуется хранить свою копию палитры и служебной информации.

 7.     Работа с  программой GIF Animator.

             Ulead GIF Animator - одна из наиболее распространенных программ для создания анимированных изображений.

  7.1.      Начало работы.

            При первом запуске программы на экране появляется окно выбора варианта начала работы Startup Wizard:

• Wizard-использовать мастер создания анимации;

• Blank animation - создать новую анимацию;
• Open an existing GIF animation — открыть GIF-файл;
• Open an existing video file - открыть видеофайл:
• Open a sample GIF file - открыть готовый пример GIF-файла.

           Это окно при следующих запусках программы открываться не будет, если установить соответствующий

флаг (Do not show...).

  7.2.     Создание и редактирование слайдов.

         Основное окно программы состоит из окна бланка анимации, монтажного окна, окна цветовой палитры, раздела установки атрибутов изображения, панелей инструментов. Добавление слайдов в анимацию может быть выполнено разными способами. Первый способ - создание пустого бланка (Layer>Add Blank image) и формирование изображения в режиме Edit с помощью простейших встроенных инструментов рисования. Для «поточечной» прорисовки удобно работать с увеличенным изображением (View>Zoom In или «+» на дополнительной клавиатуре). Для уменьшения масштаба используйте команду View>Zoom Out или «-» на дополнительной клавиатуре.

        Второй способ добавления слайдов в анимацию - использование готовых файлов с рисунками (Layer>Add Images). GIF Animator позволяет вставлять рисунки, сохраненные во многих распространенных графических форматах. С помощью этой команды Вы можете вставить в свой файл другую GIF-анимацию. Если в качестве источника изображения выбран файл, содержащий видеопоследовательность (Layer>Add Video), то она также будет преобразована в набор слайдов формата GIF. Третий способ создания слайдов - использование внешнего графического редактора (например,  Paint или Photoshop). В этом случае подготовленное изображение или его фрагмент в режимах Compose или Edit переносится в создаваемую GIF-анимацию с помощью стандартных операций работы с буфером обмена. В окне бланка анимации выводится изображение слайда, выделенного в монтажном окне. В режиме Compose изображение или его часть можно с помощью мыши или клавиатуры перемещать в окне бланка анимации. Размер изображения при этом автоматически изменяется. Таким образом, можно получить различные эффекты перемещения достаточно сложных объектов по полю рисунка. Созданные слайды можно размножать (Edit>Duplicate или Ctrl+C - Ctrl+V), вращать и зеркально отображать (Edif>Rotate&Flip). Для изменения размеров слайдов используйте команду Edif>Resample. Группу слайдов в монтажном окне можно выделить, удерживая Shift или Ctrl. При необходимости выделения части изображения используйте команду Edif>Crop. Для изменения положения слайда в монтажном окне используйте кнопки на панели инструментов Move Layer Up, Move Layer Down или Alt+ Up. Alt+Down. К создаваемой анимации можно добавить текст с наложением различных эффектов (Layer>Add Banner Text). Ряд команд меню Layer позволяют добавить в анимацию такие визуальные эффекты, как плавный переход изображений (Add Simple Transition), цветовая анимация (Add Color Animation), изображение на гранях вращающегося куба (Add Cube Effect), плавная прокрутка изображения (Add Scrolling). Для слияния слайдов и целых GIF-анимаций и фоновых изображений используйте команды Merge Linages, Merge Animations и Background Merge меню Layer. Применение фильтров и видеоэффектов GIF Animator позволяет создавать последовательности изображений с использованием набора фильтров и видеоэффектов. Следует помнить, что фильтры и некоторые видеоэффекты реализуются только при условии установки дополнительных программных модулей (меню File>Preferences>Plug-in Filters).

        Фильтры и видеоэффекты применяется к отдельному кадру, который предварительно должен быть выделен в монтажном окне (в режимах Compose или Edit). Выбор конкретного фильтра

производится в меню Filters, а выбор и предварительный просмотр видеоэффекта - в меню Video F/X. Добавление комментариев. Для автоматического добавления персональных комментариев в конце каждого файла при его сохранении или оптимизации нужно в меню File>Preferences на вкладке Personal установить соответствующий флаг. Текст комментария (не более 512 символов) вводится в поле Content. Обычный блок комментариев можно добавить в любое место файла в режимах Edit и Compose. Для этого нужно в меню Layer выбрать команду Add Comments и ввести тексты заголовка комментария и собственно комментария соответственно в поля Comment title и Comments. Оптимизация изображения GIF Animator выполняет оптимизацию цветовой палитры и оптимизацию анимированных изображений. Для выполнения оптимизации подготовленного GIF-файла нужно выбрать вкладку Optimize в окне бланка анимации. Для раскрытия окна дополнительных параметров оптимизации нужно нажать кнопку Advanced.

        Подробное описание программы Ulead GIF Animator можно найти на фирменном сайте разработчика:

                                http://www.ulead.com.

            8.    Разработка баннеров для Web-страниц и программ.

         Наиболее часто GIF-технология применяется для разработки анимированных баннеров. Баннером называется небольшое рекламное объявление, размещаемое на Web-странице или в окне свободно распространяемой (freeware) программы. В отличие от обычного рисунка, баннер содержит гиперссылку на сайт рекламодателя. Основной критерий оценки эффективности баннера - это CTR (Click True Ratio), т.е. отношение количества людей щелкнувших на баннер к общему количеству на него посмотревших. Статистику этого параметра ведет практически любая служба обмена баннерами в сети. В среднем, этот показатель лежит в пределах от 0.5 до 8% в зависимости от тематики, качества изготовления баннера. его размещения на странице и ряда других факторов. Ниже приведены основные правила, соблюдение которых позволит сделать баннер более эффективным:

• баннер должен быть анимированным - это обязательное условие, так как разница в CTR между статичными и анимированными баннерами может достигать 300%;
• не перегружайте баннер текстовой информацией - если у вас есть что сказать, то для этого существует сам сайт, а баннер - это реклама, и чем меньше в нем содержится информации, тем лучше она усваивается читателями;
• не злоупотребляйте сокращениями слов (даже общепринятыми аббревиатурами) - текстовая информация должна восприниматься без дополнительных усилий;
• не перегружайте баннер цветами - на таком маленьком пространстве более чем достаточно двух-трех разных цветов;

• не злоупотребляйте сложными изображениями - графические изображения должны упорядочивать рекламу, придавать ей структуру и правильно направлять взгляд читателя;
• продумайте визуальный ряд баннера - в одном кадре должно быть не более одного рисунка, причем, если кадров анимации больше двух, то должен быть один общий для них постоянный элемент, который будет

        правильно простраивать визуальный ряд;

• не создавайте баннеры с большим числом кадров - лучше иметь не больше трех разных кадров, каждый из которых будет полноценной рекламой;
• не делайте слайд-шоу слишком длинным - рекомендуется время
• 5-7 секунд «на круг»;
• в одном из кадров баннера рекомендуется крупно написать свой адрес или адрес заказчика рекламы - как показывает практика, это косвенно     увеличивает CTR;
• баннер не должен «весить» более 7-10 Кбайт - практически все службы обмена баннерами накладывают верхнее ограничение на объем одного баннера для того, чтобы, во-первых, оградить серверы от перегрузки, во-вторых, чтобы посетитель не ждал слишком долго появления рекламы при загрузке страницы.

                Вопросы баннерной рекламы подробно обсуждаются на сайте:

              http: //www.banner.maker.ru.

           9.   Программа для создания анимации Animate Me!

          Создание анимированных файлов в формате GIF и всевозможных анимационных эффектов для презентаций - задача достаточно сложная. Однако из этой ситуации есть довольно элегантный выход. Речь идет о программе Animate Me! от компании Image Tools Group. С ее помощью любой, даже совсем не разбирающийся в графике человек, сможет создать сложную и интересную анимацию. Для этого нужна только начальная картинка и... немного времени на эксперименты.

Animate Me! - очень маленькая утилита. Ее дистрибутив занимает всего чуть больше мегабайта (а если быть точным - 1,19 Мб. Принцип работы Animate Me! следующий: берется фоновая картинка, к которой применяется сценарий, состоящий из ряда специальных эффектов, причем каждый эффект регулируется с помощью различных параметров. В результате этого можно получить огромное множество различных анимационных комбинаций. Интерфейс Animate Me! очень прост. Главное окно программы состоит из двух панелей. В левой отображается анимационный сценарий. Он представляет собой последовательный список всех спецэффектов. В правой панели показывается фоновая картинка, а также результаты выполнения сценария. Управление программой осуществляется с помощью удобной панели инструментов, на которой расположены кнопки со всеми основными действиями. Кроме того, в Animate Me! реализованы меню и горячие клавиши. Все это позволяет пользователю управлять работой программы наиболее удобным для него способом. Ну, а теперь давайте подробно рассмотрим, как создаются анимационные эффекты. Для начала нужно нажать на кнопку "Новый", расположенную на панели инструментов, или выбрать соответствующий пункт в разделе "Файл" верхнего меню. Следующий шаг - загрузка фонового рисунка - например, баннера, который вы хотите анимировать. Animate Me! поддерживает работу с файлами следующих форматов: BMP, JPEG, PSD, PCX и GIF. Кроме того, сразу с программой поставляются пустые шаблоны наиболее распространенных элементов веб-страниц - баннеров и кнопок.

         А теперь начинается самое интересное - создание анимационного сценария. Для добавления нового эффекта используется "плюсик" на панели инструментов или соответствующий пункт в верхнем меню. В появляющемся диалоге необходимо указать название эффекта, а также выбрать его тип. После этого в списке сценария левой панели появляется новый пункт. Для того чтобы настроить параметры эффекта, нужно навести на него курсор мыши и дважды нажать на левую кнопку. В открывшемся окне необходимо заполнить все поля (для каждого эффекта они свои). Кроме того, здесь же можно посмотреть, как будет выглядеть получившийся эффект. Для этого достаточно нажать на кнопку "Тест". Если результат устраивает пользователя, то его нужно сохранить, после чего закрыть окно параметров. Теперь остается только включить эффект. Для этого необходимо установить галочку рядом с его названием.

        Так шаг за шагом создается весь анимационный сценарий. Любой из эффектов можно в любое время включить или выключить. Кроме того, их можно и удалять. Для этого в панели инструментов есть специальная кнопка ("крестик"). После того как сценарий готов, нужно задать параметры анимации. Делается это так. Сначала нужно нажать на соответствующую кнопку на панели инструментов ("горячее" сочетаний клавиш - CTRL+F9), после чего в появившемся диалоге установить количество кадров и задержку (определяется как целое число сотых долей секунды). Следует отметить, что большое количество кадров ведет к лучшему качеству анимации, но увеличивает размер конечного файла и, соответственно, время его загрузки на веб-странице. Поэтому здесь важно найти компромисс.

        Вот и все. Теперь осталось только нажать на кнопку "Применить" (F9), расположенную на панели инструментов. После этого программа строит анимацию на основе списка эффектов, отмеченных флажками, и отображает результат в правой панели. Если пользователя что-то не устраивает, то он может внести любые изменения в сценарий. Добившись нужного результата, у него есть возможность записать его в файл формата GIF или AVI. Для этого используется кнопка "Экспорт" на панели инструментов. Кстати, уважаемые читатели, обратите внимание, что эта функция недоступна в демонстрационной версии программы Animate Me! Кроме того, разработанный сценарий эффектов можно сохранить отдельно и в будущем использовать его для любых фоновых изображений.

         В Animate Me! есть одна возможность, которая наверняка порадует многих пользователей, собирающихся использовать эту программу для создания веб-графики. Речь идет о возможности пакетного преобразования файлов.

        Кратко рассмотрим эффекты, которые помогут вам создать красивый баннер или неповторимые кнопки для своего веб-сайта.

 Движущийся объект.

         Это наиболее интересный эффект. Для его работы пользователь должен указать файл формата BMP, JPG, ICO, PSD, PCX или GIF, содержащий объект, который будет перемещаться по фоновой иллюстрации. Кстати, в программе уже есть набор стандартных картинок. Все они анимированные, так что их применение позволяет добиться весьма привлекательных результатов. Существуют три стиля движения объекта: случайный (задается начальная позиция объекта и радиус его смещения), линейный (задается начальная позиция объекта, а также его вертикальное и горизонтальное смещение) и траектория (задаются точки-вершины траектории).

Движущиеся частицы.

        Эффект предназначен для перемещения небольших частиц, выбранных из растровой полоски формата BMP по фоновому рисунку. Пользователь может задать количество частиц, радиус их появления и стиль движения (как для движущихся объектов).

Бегущий текст.

        Эффект предназначен для создания бегущей текстовой строки на фоновом рисунке. Задается текст, его параметры, угол наклона и стиль движения (как для движущихся объектов).

Изменяющийся цвет.

         Эффект предназначен для плавного изменения цвета образа. Параметры "Красный", "Зеленый" и "Синий" задают шаг изменения цветов.

Волна.

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

Встряска.

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

Появление.

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

Взрыв.

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

         Всех описанных выше эффектов вполне достаточно для создания сложной, интересной и неповторимой анимации.

10.         Заключение.

          Мы рассмотрели основы работы с GIF Animator и Animate Me! С их помощью можно создавать вполне интересные анимации, которые можно использовать в web-дизайне и в презентациях, придавая нашей работе большую наглядность и индивидуальность. Это, безусловно, повышает эффективность восприятия  доводимой до нужной аудитории информации. Рассмотренные принципы создания GIF-анимации,  методы их оптимизации, а также знание структуры GIF-файла помогут нам добиться поставленных целей.