Почему мой прозрачный PNG выглядит плохо?

По моему опыту, основной трюк для добавления плавной прозрачности к изображению в GIMP заключается в использовании инструмента « Слой» → «Прозрачность» → «Цвет в альфа- канал». Конечно, вы должны знать, как использовать его для получения хорошего эффекта — все, что он делает сам по себе, — это делает ваши изображения смешными и полупрозрачными.

Если я возьму изображение, которое вы разместили выше, и просто запущу на нем Color to Alpha (конечно, выбрав белый цвет для прозрачного цвета), я получу следующее:

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

Проблема в том, что инструмент Color to Alpha сделал то, что должен был сделать: он преобразовал весь белый цвет исходного изображения в прозрачность. Это означает, что серые линии стали полупрозрачными черными линиями, а светло-голубые стали полупрозрачными темно-синими.

Однако на самом деле мы хотим , чтобы основные цвета текста и других элементов логотипа оставались непрозрачными, а полупрозрачными становились только сглаженные пиксели по краям. Чтобы исправить это, нам нужно добавить немного белого обратно в цвета. Один из способов добиться этого для такого изображения, где непрозрачные области состоят в основном из одного цвета, заключается в следующем:

1. Дублируйте слой.

2. На нижнем слое преобразуйте прозрачность в маску, выполнив « Слой» → «Маска» → «Добавить маску слоя»… и выбрав «Перенести альфа-канал слоя».

3. После переноса прозрачности на маску сделайте нижний слой полностью белым (например, с помощью инструмента Bucket Fill в режиме «Заполнить все выделение»).

4. Теперь вы добавили немного белого ко всем цветам изображения, но внутренности букв и цифр все еще не полностью непрозрачны. Чтобы сделать их такими, нам нужно нормализовать маску на нижнем слое — но, поскольку разные части изображения имеют разные цвета и яркости, нам нужно сделать это отдельно для каждой части.

   Для этого щелкните маску нижнего слоя в диалоговом окне «Слои», чтобы отредактировать ее, используйте инструмент «Прямоугольное выделение», чтобы выбрать каждую отдельную часть изображения («B», «NANO» и рисунок над ними) в поверните и запустите Colors → Auto → Normalize для каждого выбора.

После всего этого (и, возможно, объединения слоев) результат должен выглядеть так:

Если вы сравните это с первым изображением выше, разницы почти не видно. Но посмотрите, что произойдет, если мы поместим его на черный фон:

Теперь цвета выглядят непрозрачными, но фон по-прежнему прозрачен, а края гладкие.

К сожалению, вы также можете увидеть серую окантовку вокруг букв, особенно «B». Я подозреваю, что это в основном потому, что исходное изображение JPEG уже пострадало от потери цветности в этих областях из-за сжатия с потерями, просто это не было так заметно на белом фоне. Есть два способа (известных мне) исправить это: вы можете либо вручную настроить уровни цвета маски на белом слое, чтобы уменьшить окантовку, либо вы можете попробовать взять сплошные цвета из букв в исходном изображении и заменив белый цвет на нижнем слое белыми сплошными цветами (прямоугольный выбор, заливка ведра). Или вы даже можете попробовать оба.

Тем не менее, все это действительно то, что вы должны попробовать, только если у вас нет другого выбора. Гораздо лучшим решением будет попытаться найти исходные векторные (AI, SVG, EPS, PDF и т. д.) файлы, из которых наверняка были созданы эти логотипы — они должны иметь полную информацию о прозрачности, не содержать артефактов сжатия и быть масштабируемыми . ! Только в том случае, если действительно невозможно получить оригиналы, вы должны даже рассмотреть возможность работы с файлами JPEG с низким разрешением, подобными этим.

Кроме того, даже если вы в конечном итоге используете растровые изображения, вы все равно можете получить гораздо более чистый результат, перерисовав некоторые элементы — в частности, текст, который кажется простым Copperplate .

Проблема здесь в том, что по краям изображения есть «выцветание до белого», и вы не удалили это. Выцветание или сглаживание достигается с помощью серых тонов, которые становятся высококонтрастными по сравнению с более темными цветами.

Я не использую GIMP, но, говоря простым языком, самый простой способ работы с этим — создать новый слой в нижней части стека слоев и залить его очевидным цветом, высокой контрастностью и, как правило, не на изображении. Я часто использую RGB(255,0,0). Это мгновенно выделит для вас все области, которые вам нужно удалить или настроить, чтобы изображение работало на любом фоне. Вам нужно удалить (не закрасить белым) области в верхних слоях, чтобы вы видели красный цвет нижнего слоя, просвечивающий сквозь них. Когда вы закончите, вы удалите или скроете контрастный слой перед экспортом PNG. Этот контрастный слой особенно полезен, потому что вы можете увидеть конечный результат без необходимости экспортировать его для тестирования.

То, что вы хотите получить, - это, по сути, один слой со всеми удаленными прозрачными частями (не белыми, а прозрачными). Обычно для этого я использую слой-маски, поскольку это не является разрушительным, но делаю все, что нужно.

Однако я думаю, что у вас будут лучшие результаты, если вы реконструируете элементы, а не просто импортируете JPEG. Кроме того, линии здесь очень тонкие и светлые, а на черном цвете они могут пропадать.

В некоторых случаях лучше представить логотип как штамп или наклейку, оставить внутренние части белыми и провести белую линию шириной 5 пикселей по внешним краям.