Практика разработки Web-страниц


Фон не появляется вокруг краев изображения


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

Без прозрачности рисунок показывает свой настоящий размер

увеличить изображение
Без прозрачности рисунок показывает свой настоящий размер

К счастью, рисунки GIF могут включать в себя прозрачные пиксели и области. Прозрачные области наиболее часто встречаются вокруг краев изображений, но могут быть и внутри изображения.

Чтобы задать прозрачность, выполните следующие действия.

  1. Откройте файл с рисунком в своей графической программе. По возможности используйте исходный рисунок в Fireworks, Photoshop или Illustrator file или откройте файл GIF.
  2. Только один цвет на вашем рисунке может быть прозрачным; все области, закрашенные этим цветом, станут просвечивать. Прежде чем экспортировать изображение, выберите цвет, который будет прозрачным. Если этот цвет – обычно белый – часто используется в вашей графике, измените фон рисунка или границы рисунка на другой цвет. (В идеале это должен быть цвет фона вашей страницы, хотя может и не быть.)
  3. Экспортируйте файл: например, нажмите Save For Web (Photoshop) или Export Preview (Fireworks). Выделите формат GIF.
  4. Выберите Indexed Transparency. Области, в которых вы хотите установить прозрачность, должны быть помечены серой шахматной сеткой. Если ее нет, нажмите кнопку Add Color To Trans-parency и щелкните по областям, в которых вы хотите сделать рисунок прозрачным.

    Большинство графических программ выделяют области прозрачности серой шахматной сеткой

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

  5. Экспортируйте файл и просмотрите рисунок на странице с нужными вам параметрами фона.

Разные способы отображения фона сквозь рисунок

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




Начало  Назад  Вперед