На главную Статьи Функции

Изображения с прозрачным фоном




Допустим у нашего сайта очень красивый фоновый рисунок, но нам этого недостаточно и мы хотим еще и разместить логотип, но так, чтобы он был на фоне рисунка, а не в рисунке или как-либо еще. Обычно, для решения этой проблемы используют изображения с прозрачным фоном в форматах GIF или PNG.
Изображения с прозрачным фоном будем создавать в Adobe Photoshop, в Corel есть такая функция, но она очень коряво работает.
Итак, будем считать, что изображение на прозрачном фоне у нас уже есть, если нет, то создаем новый слой из фона, если он еще не создан, и удаляем ненужный фон. Далее идем в меню File->>Save for Web & Devices… (Сохранить для Веб и Устройств). В открывшемся окне нам предложат выбрать расширение (GIF, JPEG или PNG). Выбираем GIF, и из всего многообразия гиф тот который больше по душе, ставим галочку «Прозрачность(Transparency)». Нажимаем сохранить и казалось бы все, картинка готова:
Вот тут то и возникает проблема выбора цвета Подложки(“Matte” в CS4). На странице с белым фоном изображение смотрится отлично, однако перенеся изображение на любой фон мы получаем рваные белые края.

Прозрачный GIF с белой подложкой Прозрачный GIF с прозрачной подложкой Прозрачный GIF с подложкой цвета фона

 

Бороться с этим можно так: задать цвет подложки прозрачным – none (тогда края изображения будут просто неровными) или подобрать такой цвет подложки, который ближе всего к фоновому изображению, однако не всегда это просто сделать, т.к. фоновый рисунок может содержать довольно много цветов.

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

Изображение PNG с прозрачным фоном

Резюме:Преимущество GIF - малый объем, недостаток - сложно подобрать цвет подложки. Формат PNG - больший объем чем GIF, не поддерживается IE версии 6 и ниже (Еще у многих можно найти эту версию), плюс - это изображение действительно с прозрачными фоном.



© 2010-2024 При использовании материалов ссылка на сайт www.webchaynik.ru обязательна

обратная связь