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

23

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

введите описание изображения здесь

Исходное изображениевведите описание изображения здесь

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

введите описание изображения здесьвведите описание изображения здесь

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

Никлас
источник
1
Было бы лучше, если бы вы пояснили, как вы конвертировали его в прозрачный png.
Joonas
Спасибо за комментарий. Я обновляю вопросы информацией о том, что я использовал GIMP так же, как я делаю GIF прозрачным. Я еще не пытался сделать это GIF, но это был бы мой альтернативный шаг, чтобы посмотреть, работает ли это лучше.
Никлас
2
Я могу сказать вам прямо сейчас, что .gif не будет работать лучше. Текущее качество вашего изображения .png не самое лучшее, что может сделать .png. Однако это лучшее, что может сделать .gif. Поэтому в том, как вы делаете это, должно быть что-то, что оставляет белые пятна вокруг логотипа. (Это может помочь вам journalxtra.com/easyguides/… )
Joonas
Дополнительное странное наблюдение GIMP 2.8.10: * когда прозрачность добавляется через «Слой» -> «Прозрачность» -> «Цвет в альфа», вычитание выполняется независимо от выделения * при первом выполнении «Слой» -> «Прозрачность» - > «Добавить альфа-канал», тогда «Цвет к альфа-каналу» будет действовать только при выделении.
Томас

Ответы:

31

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

Если я возьму изображение, которое вы разместили выше, и просто запустите на нем 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 с низким разрешением, подобными этим.

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

Илмари Каронен
источник
2

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

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

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

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

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

Горацио
источник