Photoshop 7 и webдизайн
Изображение с прозрачным фоном
Рисунок 2.4. Изображение с прозрачным фоном может быть наложено на текстуру без появления однотонной рамки
Эффект прозрачности достигается за счет того, что все точки изображения, закрашенные определенным цветом (он устанавливается при сохранении файла), на экран не выводятся (соответствующие области экрана остаются без изменений).
Использование прозрачности позволяет создавать оригинальные элементы web-страниц, но применять ее надо с осторожностью. Дело в том, что прозрачность в формате GIF не может быть частичной — пиксел или прозрачный, или нет. Это может привести к тому, что из-за плохого подбора цветов вокруг прозрачной части изображения возникнет своеобразный ореол из пикселов, цвет которых уже не относится к информативной части изображения, но еще не перешел в цвет фона.
Особенно часто такие явления возникают при подготовке изображений на светлом фоне и перемещении их на фон темный и наоборот. Подробнее о подобных явлениях и о методах борьбы с ними будет рассказано в следующей главе.
Примечание 5
Примечание 5
Рассматриваемый ниже формат PNG предоставляет возможность сохранения изображений с частичной прозрачностью пикселов. Однако современные браузеры не реализуют правильное отображение таких файлов.
Еще одна особенность файлов GIF, долгое время делавшая этот формат популярным — возможность создания анимированных изображений. До появления таких программных средств, как Macromedia Flash, позволяющих создавать занимающие мало места на диске анимированные изображения, других средств для создания небольших анимированных изображений в распоряжении web-дизайнеров не было.
В отличие от Flash, в GIF-файлах анимация сохраняется не в форме векторных объектов, а в виде отдельных растровых кадров. Каждый кадр представляет собой самостоятельное изображение с возможностью создания собственной таблицы цветов. Наличие таких индивидуальных таблиц позволяет увеличить цветовой охват и улучшить качество изображения в целом. Кадры могут быть прозрачными и накладываться друг на друга в различных режимах (замещая предыдущее изображение, накладываясь поверх него и т. д.). Некоторые программы для редактирования анимации (например, Ulead Gif Animator) используют прозрачность кадров для уменьшения размеров файла. Они анализируют изображение и заменяют повторяющиеся на нескольких кадрах пикселы на прозрачные. В некоторых случаях больше половины кадра оказывается залито одним цветом, что значительно повышает степень сжатия.
В настоящее время GIF-анимация постепенно уступает место технологии Flash, но GIF-файлы все еще широко используются. Основная сфера их применения — создание рекламных баннеров (небольших изображений, демонстрируемых на web-страницах в качестве ссылок на рекламируемые сайты).
Редактирование анимированных GIF-файлов рассматривается в главе, посвященной программе Adobe ImageReady, поставляемой совместно с Adobe PhotoShop и предназначенной для редактирования, оптимизации и сохранения web-графики.
Как было сказано выше, изображение в GIF-файле может быть сохранено с указанием на нормальный или чересстрочный вывод на экран. При нормальном порядке вывода изображение сохраняется в файл последовательно: описания строк следуют в порядке возрастания номеров (1, 2, 3,...). Такое изображение выводится на экран постепенно, по мере загрузки с сервера. Место под него может быть отведено заранее (путем указания размеров средствами HTML), но пикселы будут отображены только после их загрузки. Если же изображение сохранено в чересстрочном режиме, то порядок строк меняется. Вначале сохраняется каждая восьмая строка, затем — каждая четвертая, после этого — каждая вторая и шестая строки, и наконец — все нечетные строки.
Примечание 6
Примечание 6
В англоязычных источниках сохранение с чередованием строк обозначают термином Interlaced.
Такой хитрый способ записи изображения позволяет отобразить его на экране пользователя в полном размере до окончания загрузки. Дело в том, что браузеры, загрузив, скажем, все «восьмые» строки, предполагают, что все изображение состоит только из них, и заполняют промежутки между уже известными строками их копиями. После загрузки очередной порции изображения оно перерисовывается с учетом полученных данных. При этом создается эффект постепенного улучшения разрешения.
На Рисунок 2.5 видно, как отображаются во время загрузки обычное и чересстроч-ное изображения.
