Почему-то достаточно часто на сайтах встречаю вот такую (иногда такое встречается и на сайтах веб студий 😯 ) неверную реализацию (не всегда настолько сильно видны белые ореолы), вставки прозрачных gif изображений на сайт с неким абстрактным фоном (с каким-то мелким узором на фоне или просто некая цветовая заливка, пусть даже градиентная). Вот пример неправильного и правильного варианта:
 |
 |
| Не правильно | Правильно |
Проблема возникает из-за того, что gif не поддерживает полупрозрачности.
Поэтому если в том же photoshop подготовить нужное изображение, отделив его от какого-либо фона (как обычно вырезают какие-либо объекты), а потом сохранить в gif и указать в настройках gif`а поддержку прозрачности, часто образовывается белый ореол (если же края объекта изначально никак не будут сглажены и не будут иметь полупрозрачных областей, то ореола не будет), т.к. прозрачной остается только та область изображения, которая была на 100% прозрачна в самом фотошопе, у всех остальных полупрозрачных областей автоматически образуется белая подложка.
Один из вариантов, который применяют — это просто взять и сохранить нужное изображение со всем куском фона в виде подложки, тогда это может быть уже и не гиф вовсе, а jpg (т.е. в итоге получается изображение вообще без прозрачных и полупрозрачных областей). Иногда это действительно единственный выход (к примеру, если вырезанный объект состоит из многих градаций цветов, и не допустимо, чтобы все эти цвета были ограничены рамками в 256 цветов). При таком решении есть два минуса, во-первых, размер файла увеличивается, так как вынужден содержать излишнюю информацию в виде фона, а во-вторых, есть большая вероятность того, что края этого изображения не будут стыковаться с фоном сайта.
Но если же вы имеете изображение на манер тату (или же какой-то однотонной графики), лучше использовать способ, рассмотренный далее. Этот способ лишен недостатков, описанных выше.
Я использую для редактирования photoshop, но на самом деле можно использовать любой более или менее продвинутый графический редактор. Главное — принцип.
Пример решения проблемы
Итак, у нас есть изображение розы, которое нужно подготовить так, чтобы при сохранении в gif (с прозрачностью), в нем не содержалась лишняя информация, кроме той, которая будет помогать избежать эффекта белого ореола при помещении изображения на фон сайта.
 |
 |
| Роза | Фон сайта |
Я отталкиваюсь от того, что рисунок розы находится на белом фоне (т.е. рисунок не содержит прозрачных областей).
1.
В phoshop должно быть открыто два рисунков. Первый — это непосредственно роза, а второй нужно будет создать самому. Создается просто новый файл с размерами холста большего, чем роза. Сильно стараться на этом этапе сделать нужный размер не имеет смысла, проще будет потом подогнать размеры. Новый рисунок заливаем текстурой, такой же, какая будет на страничке, или же однотонным цветом, все зависит от того, какой фон будет на страничке.
2.
Если на рисунке с розой находятся, какие-либо посторонние серые пятна или просто сам фон не достаточно белый, все это можно убрать при помощи Image -> Adjustments -> Brightnes/Contrast… (оба регулятора экспериментально сдвигаются в право, это срабатывает только с изображениями на подобие розы в примере, т.е. ч/б). Если от какого-то мусора все равно не удается избавиться, то замазываем его белым цветом (кистью). В итоге у нас однозначно должна быть роза на белоснежном фоне.
3.
Берем инструмент «Волшебная палочка» (Magic Wand Tool) с настройками: Tolerance=1, Anti-aliased отключен, Contiguous отключен.
И щелкаем ею на белом участке изображения розы, таким образом выделив все белое.
4.
Нажимаем меню Select->Inverse. Таким образом выделение инвертируется и выделена будет именно роза, а не ее окружение.
5.
Выбираем инструмент Move Tool и перетаскиваем выделенный участок рисунка (по сути, саму розу с маленьким белым ореолом) на рисунок с фоном сайта.
После чего можно закрыть рисунок с розой, так как он нам больше не понадобится.
У нас получился рисунок, состоящий из двух слоев. Нижний слой — это фон, верхний — это розочка.
6.
Теперь слою с розочкой нужно установить режим наложения Multiple.
После чего на слое с розой пропадет белый ореол, и она уже будет выглядеть именно так, как в итоге будет смотреться на сайте.
7.
Щелкните левой кнопкой мыши, удерживая Ctrl (на клавиатуре), на слое с розой (в палитре слоев на маленькой картинке предосмотра розы), после чего должна получиться выделенная роза.
Или:
Это же можно сделать по другому. Для этого в палитре слоев должен быть выделен слой с розой. После взять инструмент «Волшебная палочка» (Magic Wand Tool) с теми же настройками, которые мы использовали ранее (шаг 3), и щелкнуть на любую прозрачную область розы. Если вы будете использовать этот способ, то следующий шаг (8) выполнять не нужно, т.к. мы сразу будем иметь выделение вокруг розы (ее пустого пространства).
8.
Инвертируем выделение, выбрав в меню Select->Inverse. После чего у нас становится выделена область вне розы, а не сама роза.
9.
Теперь нужно удалить ненужные куски фона (те, которые попадают в область выделения), чтобы вместо них появилась прозрачная область.
Если напротив фонового слоя стоит замочек ( на изображениях палитры слоев его видно, шаг 6), его нужно преобразовать в обычный слой (иначе этот слой нельзя будет сделать прозрачным в нужных нам местах). Делается это просто — нужно произвести двойной клик на этом слое, а в появившемся диалоговом окне нажать «Ок». После чего замочек пропадет.
В палитре слоев должен быть выделен слой с фоном. Если все в порядке, нажимаем Del на клавиатуре. И убираем выделение, нажав на клавиатуре комбинацию Ctrl+D.
10.
Все. В общем-то, все готово. Осталось только удалить ненужные пустые края рисунка при помощи инструмента Crop Tool (оставив при этом пару пикселей припуска).
11.
Теперь осталось сохранить этот рисунок в gif. Удобнее делать это через меню File->Save For Web. Количество цветов, с которым вы будете сохранять рисунок, в принципе, имеет значение. Так как если у вас используется фон наподобие того, что здесь в примерах, и количество цветов, с которым вы будете сохранять gif-файл, будет 64-256, то будет слишком большой размер файла, примерно в два раза больше, чем мог бы быть. Да и качество особо от этого не улучшится. Как показала практика, самый оптимальный вариант — это 16 или 32 цветов (при ч/б рисунке с цветным фоном). Но, я думаю, количество цветов вы уже подберете опытным путем. Нужно, чтобы размер файла был как можно меньше и в то же время не появлялся ореол вокруг рисунка при вставке его на страничку. Не забывайте так же, что если у вас рисунок состоит не из градаций серого, а и из разных цветов, то вполне востребованным может быть использование и большего количества цветов, чем 32, это зависит от ситуации.
Вот результат того, что получилось у меня (т.е. это изображение уже можно помещать непосредственно на сайт):
Буду рад, если эта статья кому-то будет полезной.
