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

Я хочу преобразовать JPG в прозрачный, и используя GIMP, я добавил альфа-слои и прозрачность таким же образом, как я сделал прозрачный GIF, я преобразовал его в PNG, но он не отображается хорошо, когда я загружаю его в свой шаблон:

Исходное изображение

Почему это не выглядит хорошо, когда он превращен в прозрачный PNG? Могу ли я быть счастливее, делая прозрачный GIF? ИЛИ это синие цвета, которые плохо сочетаются с черным, и мне бы больше повезло, если бы я использовал другие логотипы:

Благодарность

По моему опыту, основной способ добавления плавной прозрачности к изображению в GIMP заключается в использовании инструмента Layer → Transparency → Color to Alpha .... Конечно, вы должны знать, как эффективно использовать его - само по себе все, что он делает, - это делает ваши изображения забавными и прозрачными.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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