Сглаживание краев в веб-графике ( антиальясинг) Эта интересная статья взята с сайта и интересна тем, кто работает в программе Adobe Photoshop, и хотел бы понять, отчего при сохранении картинок на прозрачном фоне для Web на них часто образуется некрасивая белая обводка и как от нее избавиться.
Компьютерные изображения по своей природе всегда прямоугольны, что не всегда заметно, особенно когда цвет фона картинки совпадает с фоном веб-страницы. На рис. 1 показано изображение солнышка на белом фоне, а такой же цвет содержит и фон под ним, поэтому видна только нарисованная фигура.
Рис. 1. Фон изображения совпадает с цветом фона веб-страницы
Если в качестве фона документа установлен рисунок или цвет фона отличается от белого, то удобнее всего в изображении задать прозрачность. Тогда мы снова увидим только фигуру солнца (рис. 2).
Рис. 2. В изображении установлена прозрачность
Однако при использовании прозрачных участков вокруг краев наблюдается заметная светлая каемка. Причем она возникает в том случае, когда изображение помещают на темный фон, на белом или светлом фоне она становится невидима.
Давайте разбираться, почему происходит подобное безобразие. Если увеличить фрагмент изображения (рис. 3), то можно увидеть, что используется несколько больше цветов, чем может показаться вначале.
Рис. 3. Увеличенный фрагмент изображения.
Такой прием, когда на краях рисунка применяется несколько оттенков одного цвета, позволяет делать края изображения более гладкими. Прием получил название сглаживание или антиальясинг, если пользоваться компьютерным жаргоном. Края при этом получаются чуть размытыми, но зато выглядят действительно более сглаженными. Вот только пикселы светлых оттенков и образуют злополучную каемку.
Конечно, можно вообще отказаться от сглаживания, часто так и делают, особенно в рисунках небольших по размеру, но при этом отдельные пикселы выпирают, и изображение становится слегка «угловатым» на краях (рис. 4).
Рис. 4. Рисунок без сглаживания.
Давайте разбираться, как в программе Photoshop делать изображения со сглаженными краями, учитывать прозрачные участки или наоборот, убрать антиальясинг.
Антиальясинг в рисунках
Вначале готовим картинку на прозрачном фоне (рис. 5), в Photoshope такое изображение характерно клетчатым полем с белыми и серыми квадратиками, которое и обозначает прозрачность.
Рис. 5. Исходная картинка.
Теперь выбираем пункт меню File > Save for Web... (Файл > Сохранить для Web, <alt>+<shift>+<ctrl>+<s></s></ctrl></shift></alt>) и переходим в специальную панель, предназначенную для оптимизации веб-графики. Справа в этой панели находится набор настроек, который меняется в зависимости от выбранного формата. В данном случае нас интересует GIF, поскольку он поддерживает прозрачность и хорошо подходит для приведенного изображения. С помощью всего двух параметров — Transparency (прозрачность) и Matte (цвет краев), показанных на рис. 6, можно регулировать прозрачность в изображении и сглаженность краев картинки.
Рис. 6. Параметры Transparency и Matte в панели оптимизации файла.
Принцип комбинирования этих параметров следующий.
Включение прозрачности приводит к тому, что области в рисунке, которые отмечены клетчатым фоном, становятся прозрачными.
При отключении Transparency прозрачные участки в изображении заполняются цветом, который указан параметром Matte (рис. 7).
Рис. 7. В изображении отключена прозрачность и установлен цвет краев.
Когда прозрачность включена, а цвет краев установлен как None (нет, значит никакого цвета) что продемонстрировано на рис. 8, то программа анализирует степень прозрачности пикселов. Все пикселы, которые прозрачны более чем на 50%, становятся полностью прозрачными, а пикселы, у которых прозрачность менее или равна 50%, заменяются ближайшим цветовым эквивалентом и теряют свою прозрачность. Конечный результат зависит от исходного изображения и в некоторых случаях может оказаться не ахти. Например, применительно к рис. 5 отключение цвета краев инициирует зазубрины на краях картинки.
Рис. 8. Отключение цвета краев в изображении.
Самое интересное произойдет, если включить прозрачность и установить цвет краев, который совпадает с цветом фона рисунка. Вокруг контура картинки добавятся дополнительные пикселы (рис. 9), благодаря которым края изображения останутся сглаженными при добавлении рисунка на указанный фон.
Рис. 9. Включение прозрачности и установка цвета краев.
Замечание
Яркий зеленый цвет взят лишь в качестве образца, никто в действительности не собирался на нем размещать розовых динозавров. И не советуем пробовать.
Если вернуться к изображению солнышка, то после установки цвета краев картинка приобрела вид, показанный на рис. 10.
Рис. 10. Изображение солнышка с включенными цветными краями.
Зрелище получилось не очень эффектное, но не стоит забывать, что рисунок предназначен для размещения на цветном фоне (а именно #a58d77). И на этом фоне картинка будет смотреться как надо.
Итак, прочитав все выше изложенное, делаем вывод:
Чтобы при сохранении картинок на прозрачном фоне для Web (Save for Web) вокруг них не возникал белый ориол, необходимо в настройках
поставить галочку рядом с параметром Transparency (прозрачность), а параметр Matte (цвет краев) сделать = None Оригинал поста здесь
Если пост понравился, можно нажать кнопку + НРАВИТСЯ
и добавить в свой дневник, нажав (+В ЦИТАТНИК)в левом верхнем углу поста.
La_Perla
