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

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

дизайн

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

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

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

Иногда трудности создания плавающих изображений могут обуславливаться сложностью заливки фона веб-страницы. Если в таких целях используется градиентная или текстурная заливка, то для создания иллюзии плавающего объекта нужно в качестве фона создаваемого графического элемента использовать копию заливки документа. В графическом редакторе необходимо создать новый документ и залить все пространство требуемым фоном, затем разместить графический элемент в отдельном слое над созданным фоном.

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

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