Все приложения пакета Studio MX могут работать с растровой графикой. Как уже говорилось в главе 9, растровая графика — это таблица, составленная из пикселей. Проблема этого типа графики состоит в том, что размеры файлов могут быстро стать очень большими и, в отличие от векторной графики, на странице можно перемещать только пиксели, но не выделения. При этом область, ранее занятая перемещаемым фрагментом, заполняется цветом фона.

Рис. 11.1. Возможность работать над одним и тем же объектом во всех трех приложениях позволяет дизайнеру при создании рисунка использовать сильные стороны каждого из них

Большое значение имеет размер файлов. Разрешение растровых рисунков измеряется в пикселях на дюйм. Чем большее количество пикселей должен отобразить компьютер на квадратном дюйме, тем больше информации содержится в файле. Это однозначно влияет на его размеры. Для Web этот вопрос важнее всех остальных, так как броузер, прежде чем отобразить информацию на экране, должен получить ее из Internet. Чем больше времени займет процесс получения информации, тем дольше пользователь будет ожидать появления рисунка на экране.
Существуют три формата сжатия файлов: GIF, PNG и JPG, в которых традиционно хранится и штриховая графика, созданная для Web. Форматы PNG и JPG мы уже обсуждали в главе 9. Теперь давайте поговорим о формате GIF.
За аббревиатурой GIF скрывается полное наименование формата — Graphic Interchange Format. Этот формат был разработан для точного переноса цветов графики между платформами Мае и PC. Его палитра ограничена 256 цветами, но на самом деле редко бывает, когда требуются все 256 цветов. Сокращая палитру до того количества цветов, которые реально используются в рисунке, можно добиться существенного уменьшения размеров файла.
Когда же использовать формат GIF? Посмотрите на рисунок с несколькими цветами и тенью. К таким рисункам можно отнести те, которые созданы на основных тонах, например логотипы или иллюстрации в стиле комиксов. Ниже объясняется, почему для таких типов рисунков формат GIF предпочтительнее, чем JPG.
Аналогично формату JPG, при создании файла GIF рисунок существенно сжимается. О методе сжатия, используемом форматом GIF, нужно знать следующее. В отличие от JPG, формат GIF использует метод сжатия без потери качества. (Отметим, что современные методы сжатия GIF позволяют при желании осуществлять схемы сжатия с потерей качества (аналогично JPG), дополнительно уменьшая размер файла). Хотя при сжатии не происходит потерь, этого же нельзя сказать о преобразования форматов. Когда рисунок преобразуется из схемы цветов RGB в индексированную схему, обращение к цвету происходит по его индексу, а не набору составляющих. Только в этом месте может появиться ухудшение качества. В формате GIF, как только файл будет в него преобразован, дальнейшая потеря цветов произойти не может.
Формат GIF использует метод сжатия LZW (Lempeel-Zev-Welch). Это — основной алгоритм, используемый приложением архивации Stufflt. Метод сжатия LZW основан на поиске повторяющихся цепочек данных. Это значит, что он идеален для сжатия строк идентичных цветов. Для примера возьмем талисман компании JTC, который имеет большие монотонные области, например красный цвет на кроссовках. Когда алгоритм сжатия обнаружит этот ряд из 25 красных пикселей, информация сохранится как "25 красных". Когда этот алгоритм обнаружит ряд градиента от синего к темно-синему (как в логотипе JCT), отобразится каждый пиксель. Если вы можете заменить 25 единиц информации всего одной, то быстро поймете, почему метод LZW так эффективен при работе с рисунками в формате GIF.
Хотя в формат GIF может экспортировать и приложение FreeHand, для современных сценариев дизайна все же лучше использовать Fireworks.
Создание рисунка GIF в Fireworks MX
Процесс создания рисунка GIF в Fireworks не сложен и выполняется в диалоговом окне Export Preview.
1. В Fireworks MX откройте файл JCT_Dude. png и измените масштаб представления на 100%. Принимая решение относительно преобразования рисунка в файл GIF, сконцентрируйте внимание не на том, что на нем изображено, а на областях одинаковых цветов. Если посмотреть на талисман компании JCT с этой точки зрения, то видно, что, кроме содержащих оттенки областей волос, рук лица и брюк, все остальные области окрашены в монотонные цвета. Области, содержащие оттенки, не имеют переходных тонов, а это значит, что вряд ли они будут преобразованы в цвета, далекие от оригинала.
2. Выберите в меню команду File=>Export Preview. Откроется диалоговое окно (рис. 11.2), в котором вам необходимо выбрать цветовую палитру для рисунка. В списке, предлагаемом меню Palette, представлено множество вариантов. Выбирая палитру, обратите внимание на числа в верхнем левом- углу панели Preview, которые означают размеры файла и расчетное время его загрузки. Ниже приведены варианты палитры.

•  Adaptive. Таблица цветов строится на основании реальных цветов рисунка. Этот вариант можно выбрать, когда качество рисунка имеет первостепенное значение.
•  WebSnap Adaptive. Эта палитра тоже строится из цветов рисунка, однако все цвета, которые не попадают в набор Web Safe, преобразовываются в ближайшие эквиваленты.
•  Web 216. Рисунок отображается на палитре Web Safe, состоящей из 216 цветов, которые одинаково отображаются в броузерах на платформах PC и Маc.
•  Exact. Эта палитра практически не используется. Она формируется из всех цветов рисунка. Если это количество превосходит 256, она автоматически переключается на палитру Adapt ive.

Рис. 11.2. Диалоговое окно Export Preview, используемое для создания рисунков GIF, позволяет также оптимизировать рисунки для экспорта

•  System (Windows) и System (Macintosh). Рисунок отображается в палитре выбранной системы. Этот вариант используют лишь те, кто пережил время, когда при переносе рисунка PC на платформу Мае происходило смещение цвета, поскольку палитры этих систем сильно отличались. Палитра Web Safe как раз и составлена из тех 216 цветов, которые не отличаются на этих двух платформах, что и представлено в этом списке под названием Web 216.
•  Greyscale. Цвета заменяются 256 оттенками серого.
•  Black and White. Дань тем временам, когда цветовая палитра была предельно простой: что не черное — то белое.
•  Uniform. Математическая палитра, основанная на значениях RGB в рисунке.
•  Custom. Эта палитра управляется внешней палитрой или рисунком GIF.

3. Выберите палитру WebSnap Adaptive. Если вы посмотрите на оттенки в области рта, то увидите произошедшие изменения. Выберите палитру Web 216, и область рта станет крупнозернистой, так как цвета оттенков не существуют в этих палитрах. В данном случае цвета палитры для передачи оттенков смешиваются. Если вы будете перемещаться по вариантам вниз, полутона станут еще более жесткими.
4. Другим способом уменьшения размеров файла является сокращение количества цветов в палитре. В вариантах, предлагаемых меню Colors, справа от меню Loss, представлены от 2 до 256 цветов. С уменьшением количества цветов уменьшаются и размеры файла, однако с уменьшением количества цветов ухудшается цветопередача в рисунке.
5. Закройте диалоговое окно Export Preview.
В версии Fireworks MX появился еще один способ применения предварительных установок. В открытом окне Property, в области Compression, представлен список вариантов. При их выборе рисунок меняется прямо на экране.
Еще один способ применения сжатия GIF — использование панели Optimize (рис. 11.3). Если эта панель не сгруппирована ни с одной из открытых, выберите команду меню Window=>Optimize или нажмите клавишу <F6>. Панель Optimize содержит все элементы Управления, необходимые для того, чтобы выбрать для рисунка правильное сочетание цветов, сжатия и качества рисунка.

Рис. 11.3. Панель Optimize, появившаяся в версии Fireworks MX, содержит критичные элементы оптимизации рисунка