На главную
О себе
Виды работ
web-работы
полиграфия
Мои работы
сайты
полиграфия

Вы находитесь в разделе «Статьи по web-дизайну»

Делаем GIF с прозрачным фоном в Photoshop

Прозрачный GIF (Graphics Interchange Format) в Adobe Photoshop делается следующим образом. Открываем файл, который нужно сделать прозрачным. Заходим в меню File > Save for Web & Devices (Alt+Ctrl+Shift+S). В открывшемся окне в поле Optimized file format выбираем GIF и отмечаем флажок Transparency.

Затем нам нужно определить, какие цвета будут прозрачными. Все цвета, присутствующие в изображении, содержатся во вкладке Color Table (Таблица цветов) и отображаются в виде цветных квадратиков. Выбираем в панели инструментов в левой части окна инструмент Eyedropper (пипетка).

Определить цвета можно двумя способами. Проще всего указать цвет пипеткой непосредственно на изображении — после этого цвет выделится на таблице цветов темной обводкой. Ну, а если вы точно знаете, какой цвет должен быть прозрачным, можно выделить его прямо на таблице цветов, нажав соответствующий цветной квадратик. И в первом и втором случае при необходимости выбора нескольких цветов нужно работать с нажатой клавишей Shift (или Ctrl). Цвет выбран, нужно дать указание программе сделать его прозрачным. Для этого нужно нажать иконку Maps selected colors to Transparent (Добавить выбранные цвета к прозрачности). На верхнем рисунке эта кнопка обведена кружком, и красный цвет выбран прозрачным. На изображении появится прозрачная область, а квадратик на таблице цветов изменит свой вид — часть его станет белым треугольником. Повторное нажатие на иконке Maps selected colors to Transparent отменит прозрачность выбранного цвета.

Несколько слов о способе задания прозрачности. За него отвечает выпадающее меню Specify Transparency Dither Algorithm, по-русски — Алгоритм имитации прозрачности (рис. внизу). Можно сделать четыре выбора: No Transparency Dither — нет алгоритма, Diffusion Transparency Dither — диффузный алгоритм, Pattern Transparency Dither — алгоритм на основе узора и Noise Transparency Dither — алгоритм на основе шума. В режиме диффузного алгоритма становится активным ползунок Amount (Величина), позволяющий менять значение диффузии. Что применять на практике? В зависимости от цели и изображения. Я же всегда оставляю по умолчанию — No Transparency Dither.

Нажимаем Save — прозрачный GIF готов. Работа производилась в Adobe Photoshop версии CS3, но все действия и клавиатурные сокращения актуальны как для более ранних версий (вплоть до v.7), так и для более поздей версии CS4.

 

Если изображение имело четкие границы, то дальнейшей обработки не требуется. В случае использования теней либо если границы прозрачности не совсем четкие иногда приходится повозиться, заново открыв созданный прозрачный GIF в Photoshop и стирая резинкой по одному пикселю границы изображения. В случае, если прозрачный GIF сделан кем-то другим, а вам нужно использовать его и при этом цвет фона изображения существенно отличается от цвета фона web-страницы, то такая обработка краев просто необходима. Придется инструментом Pencil выравнивать по краям цвета, подбирая близкие к фону страницы. При этом необходимо перед обработкой перевести изображение в RGB, а по окончании ее — обратно в индексированные цвета. На рисунках показано, как это делается. Первый рисунок — прозрачный GIF, приготовленный для красного фона (на белом фоне видна грубая красная граница), второй — увеличенная граница, полностью убрав которую получим «зубцы». На третьем рисунке края уже обработаны, на четвертом — примерная схема обработки краев.
Чтобы избежать подобных проблем, следует придерживаться правила: если предстоит сделать прозрачный GIF, необходимо заранее сделать цвет фона файла таким же (либо приближенным) как фон в web-странице.

Ссылка на статью при перепечатке обязательна.

Copyright 2003-2009 Serg
JavaScript WebEditor
О web-дизайне
Помощь полиграфисту
Связь со мной