Онлайн учебник по работе
с программой ImageReady

Создание графики для сайта

Ограничения при использовании форматов изображений

Форматы PNG-8 и PNG-24

Оба формата PNG могут сохранять полупрозрачные области (например, смягченные растушеванные границы), используя метод под названием альфа-прозрачность. В этом случае у точки может быть 256 уровней непрозрачности, начиная с полной прозрачности и заканчивая полной непрозрачностью. В формате PNG-8 максимально возможное количество цветов оптимизированного изображения - 256, этот формат похож на GIF. В формате PNG-24 у изображения могут быть миллионы цветов, этот формат, в свою очередь, похож на JPEG. В форматах PNG используется метод сжатия без потерь данных.

Какие же существуют ограничения при использовании форматов PNG? Например, в этом формате нельзя создать анимацию (а в формате GIF можно), кроме того, файлы в формате PNG-24 больше по размеру аналогичных JPEG-файлов. И, что еще важнее, форматы PNG непосредственно не поддерживается двумя основными Web-браузерами, за исключением версий Internet Explorer 4.0 и Netscape Navigator 6 и более поздних. Предыдущим версиям этих программ для отображения картинок в данном формате требуется встраиваемый модуль, например PNG Live. Чем же плохи эти модули? Пользователь, возможно, не захочет тратить время на загрузку встраиваемого модуля, а без него ваш сайт не будет смотреться так же выигрышно, как при его использовании.

Панель инструментов в программе ImageReady

Панель инструментов в программе ImageReady аналогична панели инструментов в программе Photoshop, но в ней есть дополнительные Web-инструменты для создания карт изображения, их просмотра, просмотра ломтиков изображений (slice), предварительного просмотра ролловеров (rollover) и перехода в Web-браузер (рис. 23.29). Щелкнув по кнопке Jump to (Перейти к), вы сможете перейти в программу Photoshop.

Рис. 23.29. Панель инструментов в программе ImageReady

В нижней части всплывающей палитры, содержащей перечень инструментов, входящих в одну группу, находится стрелка, предназначенная для создания отдельной палитры с пиктограммами данных инструментов. Для этого при нажатой кнопке мыши укажите курсором на стрелку и отпустите кнопку (рис. 23.29).

Как и в программе Photoshop, в программе ImageReady есть панель опций инструмента, вид которой зависит от того, какой инструмент активизирован рис. 23.30 и 23.31). Перетащите левый край панели опций, чтобы поместить ее в другом месте рабочего стола. Для того чтобы свернуть панель опций в программе ImageReady, дважды щелкните по ее левому краю (рис. 23.32).

Оптимизация изображений для сети в программе ImageReady

Оптимизация - процесс выбора такого формата файла, его размера и цветовых параметров, которые позволяют в максимально возможной степени сохранить качество изображения, но при этом обеспечить высокую скорость загрузки его по сети. В принципе, можно оптимизировать изображение и в программе Photoshop с помощью диалогового окна, вызываемого командой File > Save for Web (Файл > Сохранить для Web), однако лучше перейти в программу ImageReady и воспользоваться там специальными палитрами оптимизации, содержащими более широкий набор опций.

Если вы освоите программу ImageReady, вам не составит труда пользоваться диалоговым окном Save for Web программы Photoshop, так как их опции практически идентичны. Диалоговое окно Save for Web рассматривается в конце учебника.

Рис. 23.30. Панель опций инструмента Rectangle shape

Рис. 23.31. Панель опций инструмента Туре

Рис. 23.32. Свернутая панель опций инструмента Туре

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

GIF и JPEG - два формата, обычно используемых для графики в сети. Рекомендуем применять формат GIF в случае, когда изображение содержит элементы с четкими границами, например однотонные области, штриховой рисунок и текст. Формат PNG-8, похожий на GIF, использует те же параметры палитры Optimize (Оптимизация), что и GIF, и результаты оптимизации практически идентичны. Оптимизированный файл в формате GIF или PNG-8 может содержать до 256 цветов.

Вы можете воспользоваться командой Save а Сору (Сохранить копию) программы Photoshop, чтобы сохранить копии файла в формате GIF или JPEG, но мы считаем, что программа ImageReady предлагает лучшие способы сохранения файла в этих форматах за счет более широкого набора средств оптимизации и предварительного просмотра. Поэтому основное внимание уделено оптимизации файлов формата GIF и JPEG именно в программе ImageReady.

Четыре цветовые палитры формата GIF

То, что Web-дизайнеры обычно называют «цветовые палитры», в программе ImageReady получило название «алгоритмы сокращения, количества цветов (color reduction algorithms)»

Существует четыре алгоритма сокращения количества цветов в формате GIF:

• Perceptual (Учитывающий восприятие) - создает таблицу на основе текущих цветов изображения. При этом особое внимание уделяется тому, как человек воспринимает цвета. Преимущество данной таблицы заключается в сохранений целостности цвета;
• Selective (Селективный) - создает таблицу цветов на основе текущих цветов изображения. Опции Perceptual и Selective похожи, но последняя в большей степени нацелена на сохранение цветов однотонных элементов изображения, а также Web-цветов;
• Adaptive (Адаптивный) - создает таблицу на основе части цветового спектра, где представлено большинство оттенков изображения. Эта опция формирует оптимизированный файл немного большего размера;

При переключении опций Perceptual, Selective, Adaptive сохраняются все Web-цвета, входящие в таблицу цветов изображения.

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

Рис. 23.33. Вкладка 2-Up в программе ImageReady

Рис. 23.34. Палитра Optimize программы ImageReady