Графика непрямоугольной формы
На самом деле вся графика, используемая при оформлении Web-узлов, имеет прямоугольную форму, но фон некоторых изображений является прозрачным, чем создается иллюзия, что граница изображения проходит по контуру силуэта объекта. В других случаях фон может не быть прозрачным, но иметь тот же самый цвет, что фон Web-страницы, в результате чего кажется, что графический объект "плавает" над страницей. Из двух наиболее широко распространенных форматов Web-графики (GIF и JPEG) только формат GIF способен хранить изображения с областями прозрачности. Если требуется создать изображение с действительно прозрачным фоном (а это бывает просто необходимо, когда графика должна "плавать" поверх многоцветного или имеющего текстурную или узорную заливку заднего плана страницы), то в составе изображения должно использоваться менее 256цветов (это максимум того, что обеспечивает формат GIF) и вне зависимости от общего числа цветов один из них должен быть зарезервирован в качестве цвета прозрачных областей.
Использование только одного оттенка цвета для кодирования прозрачных областей имеет два недостатка: в этом случае нельзя иметь прозрачные области с "растушеванными" или сглаженными границами, а также нельзя сымитировать частичную прозрачность участков изображения, наподобие той, что возникает при взгляде на объект сквозь слой воды или стекла.
Как уже было упомянуто, существуют два способа сделать так, чтобы графический элемент оформления Web-страницы имел видимую форму, отличающуюся от прямоугольной: или сделать фон изображения прозрачным, или придать ему цвет, соответствующий цвету заднего плана Web-страницы (описание последнего способа приведено в данной главе, в разделе "Графика со сглаженными кромками").
Ниже приводится описание действий по созданию изображения с прозрачным фоном.
1. Откройте файл изображения, которое должно предстать на прозрачном фоне. Для отделения этого изображения от фона воспользуйтесь любыми подходящими инструментами Photoshop 4.0. Проверьте, чтобы в момент начала работы изображение находилось в режиме RGB. Не следует преобразовывать изображение в режим индексированных цветов до того, как будет полностью завершена подготовка к экспорту файла в формате GIF.
2. Выделите область фона изображения. Если проще выделить не фон, а изображенный на переднем плане объект, то поступите именно таким образом, а затем инвертируйте выделенную область, нажав клавиши Cmd/Ctrl+Shift+I. Вне зависимости от того, какие инструменты использовались для построения выделенной области, проследите, чтобы флажки Anti-aliased (Сглаживание) в палитрах параметров этих инструментов не были установлены. Если для выделения фона или его части будет применяться инструмент Magic Wand (Волшебная палочка), то установите достаточно большую величину параметра Tolerance (Допуск), чтобы на фоне не оставалось невыделенных пропусков.
3. Полностью выделив весь фон, сохраните выделенную область. Это приведет к преобразованию выделенной области в маску альфа-канала изображения. Выберите команду меню Window <>Show Channels (Окно <>Показать Каналы) и выделите строку канала вновь созданной маски. Изображение маски появится в окне документа. Увеличьте масштаб маски в окне документа до 200% и тщательно просмотрите белые области маски на предмет того, являются ли они сплошь белыми. Может оказаться удобнее обнаруживать огрехи маски, временно преобразовав изображение в негатив нажатием клавиш Cmd/Ctrl+I, а затем, после завершения осмотра, нажав эти клавиши повторно для восстановления исходного вида изображения. Обнаружив огрехи маски, закрасьте их сплошным черным или белым цветом.
4. Загрузите откорректированную маску в качестве выделенной области и снова сделайте видимым канал RGB. Залейте фон любым однородным цветом. Самый простой способ проделать эту операцию - дважды щелкнуть на кнопке инструмента Paint Bucket (Заливка), чтобы вызвать палитру Paint Bucket Options (Параметры заливки). Установите параметр Tolerance (Допуск) равным 255, а в раскрывающемся списке Contents (Вариант) выберите Foreground Color (Основной цвет). Будьте внимательны и выбирайте в качестве основного цвета тот, который не встречается в составе изображения основного объекта. В противном случае участки изображения, окрашенные в данный цвет, также станут прозрачными.
5. После того как выполнены все требуемые коррекции и изменения изображения, выберите команду меню Image <>Mode <>Indexed Color (Изображение <>Режим <>Индексированный цвет). Выберите адаптивную палитру и установите вариант None (Отсутствует) для параметра Dither (Настройка растра). Если выбрать другой вариант настройки растра, то однородный цвет фона может превратиться в пеструю смесь пикселей. На запрос программы о том, хотите ли вы произвести сведение слоев изображения, щелкните на кнопке Yes (Да) - ведь в любом случае предстоит экспорт изображения во внешний файл. По выполнении экспорта можно будет просто закрыть текущее изображение без сохранения.
6. Теперь следует сохранить изображение в формате GIF, применив команду экспорта, а не команду Save As (Сохранить как). Итак, выберите команду меню File <>Export <>GIF89a (Файл <>Экспорт <>GIF89a). Появится окно диалога GIF89a Export Options (Параметры экспорта в формате GIF89a), показанное на рис. 12.8. В раскрывающемся списке Transparency From (Сделать прозрачными), недоступном для внесения изменений, будет установлен вариант Selected Colors (Выделенные цвета). Выберите инструмент Eyedropper (Пипетка), кнопка которого располагается возле правого нижнего угла окна просмотра. Щелкните кнопкой мыши, установив указатель-пипетку в область фона изображения. Вот и все, что требовалось сделать, но не пропустите шаг 7!
Рис. 12.8. Окно диалога GIF89a Export Options (Параметры экспорта в формате GIF89a)
7. Если при отсутствии растрирования и "дыр" в маске фон изображения все же содержит вкрапления иного цвета, то можно назначить ряд дополнительных оттенков в качестве цветов прозрачности. Выберите инструмент Zoom (Масштаб), кнопка которого располагается в окне диалога левее кнопки Eyedropper (Пипетка), и аккуратно рассмотрите увеличенное изображение на предмет ореолов и цветовых вкраплений фона. Найдя участок, отличающийся по цвету от фона, установите на него указатель-пипетку и щелкните кнопкой мыши. Лишний цвет немедленно преобразуется в серый тон средней интенсивности, используемый для маркировки прозрачных областей.
Обратите внимание на то, что, хотя с технической точки зрения для обозначения прозрачного фона используется только один цвет, инструмент Eyedropper (Пипетка) окна диалога GIF89a Export Options (Параметры экспорта в формате GIF89a) автоматически преобразует оттенки, указанные на шаге 7, в цвет, маркирующий прозрачные области. Так зачем же тогда следовало столь тщательно обеспечивать однородность окраски фона на первом, подготовительном, этапе работы? Да потому, что области любого цвета, указанного в качестве прозрачного, станут в дальнейшем прозрачными, в какой бы части изображения они не встретились. Если попытаться выделять цвета фона в качестве цветов прозрачности без предварительной заливки фона однородным цветом, то скорее всего это приведет к появлению прозрачных "дыр" в пределах объекта изображения.
