- Особенности веб-графики
- Добавление рисунка на веб-страницу
- Альтернативный текст
- Изменение размера рисунка
- Рамка вокруг изображений
- Обтекание рисунка текстом
- Отступы вокруг рисунка
- Выравнивание изображения по центру
- Сглаживание краев
- Замена текста изображением
- Прозрачность в рисунках
- Полупрозрачный слой с непрозрачным текстом
- Создание паспарту
- Добавление тени к рисунку
- Оптимизация графики
- Блок с закругленными уголками
- Эффект перекатывания

Разделы
Сглаживание краев
Компьютерные изображения по своей природе всегда прямоугольны, что не всегда заметно, особенно когда цвет фона картинки совпадает с фоном веб-страницы. На рис. 1 показано изображение солнышка на белом фоне, а такой же цвет содержит и фон под ним, поэтому видна только нарисованная фигура.
Рис. 1. Фон изображения совпадает с цветом фона веб-страницы
Если в качестве фона документа установлен рисунок или цвет фона отличается от белого, то удобнее всего в изображении задать прозрачность. Тогда мы снова увидим только фигуру солнца (рис. 2).

Рис. 2. В изображении установлена прозрачность
Однако при использовании прозрачных участков вокруг краев наблюдается заметная светлая каемка. Причем она возникает в том случае, когда изображение помещают на темный фон, на белом или светлом фоне она становится невидима.
Давайте разбираться, почему происходит подобное безобразие. Если увеличить фрагмент изображения (рис. 3), то можно увидеть, что используется несколько больше цветов, чем может показаться вначале.

Рис. 3. Увеличенный фрагмент изображения
Такой прием, когда на краях рисунка применяется несколько оттенков одного цвета, позволяет делать края изображения более гладкими. Прием получил название сглаживание или антиальясинг, если пользоваться компьютерным жаргоном. Края при этом получаются чуть размытыми, но зато выглядят действительно более сглаженными. Вот только пикселы светлых оттенков и образуют злополучную каемку.
Конечно, можно вообще отказаться от сглаживания, часто так и делают, особенно в рисунках небольших по размеру, но при этом отдельные пикселы выпирают, и изображение становится слегка «угловатым» на краях (рис. 4).

Рис. 4. Рисунок без сглаживания
Давайте разбираться, как в программе Photoshop делать изображения со сглаженными краями, учитывать прозрачные участки или наоборот, убрать антиальясинг.

Отправить комментарий