Заметки иконщика

Вспомогалка: Борьба с прозрачностью в gif.

Итак, это небольшой урок по подготовке различных элементов для сайтов, иконок, кнопок и т.п. с прозрачным фоном.

Допустим у нас есть такая кнопулька, и нам нужно её сохранить в формате gif с прозрачным фоном для последующей вставки в сайт.

Берем Photoshop или Illustrator (смотря в чем делали кнопку) и сохраняем через пункт:
Save for Web and Devices, предварительно отключив фоновый слой.
Если фон сайта куда будет ставиться кнопка белый то все будет красиво, а если другой цвет, например черный, то получатся рваные края у изображения вот такого плана:

Столько старались, делали такую красивую кнопку, а тут она как… обидно… Конечно можно сразу сделать черный фон у кнопки, но ведь нам нужена кнопка с прозрачным фоном…
Это происходит из-за того, что gif не поддерживает полноценную прозрачность, и под полупрозрачные пикселы по умолчанию подкладывает пикселы с белым цветом.

Поэтому, чтобы не было таких некрасивостей, выбираем цвет подложки при сохранении в gif такой же как предполагаемый цвет фона сайта:

и тогда на странице она будет выглядеть так как было задумано, ну не считая тени 🙂 т.к. фон черный 🙂

Или вот на зеленом фоне до и после:

Многие скажут: но как же формат PNG он поддерживает полноценную прозрачность?

Да поддерживает, но не все браузеры и не всегда корректно эту прозрачность показывают.

Как-то вот так 🙂

About 
Дизайнер иконок я :)

0 Comments

Leave a Reply

 

Ваш e-mail не будет опубликован. Обязательные поля помечены *