Добавить прозрачность к существующему PNG

Я хотел бы использовать это изображение на веб-сайте.

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

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

Я использовал Gimp для преобразования изображения в .png, но что мне делать дальше?

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

Ответы (5)

Инструмент GIMP Color to Alpha очень удобен , если вы знаете, как его использовать , и эта задача кажется особенно подходящей для него:

  1. Откройте изображение в GIMP и при необходимости измените его на цветовой режим RGB.
  2. Выберите «Слой» → «Прозрачность» → «Цвет в альфа-канал»…
  3. Выберите черный ( #000000) в качестве цвета, чтобы сделать его прозрачным.
  4. Нажмите «ОК».
  5. Сохраните полученное изображение в формате PNG:
    Изображение с прозрачностью
Фантастика - это был именно тот ответ, который мне был нужен! Просто на заметку: если опция «цвет в альфа-канал» неактивна, это означает, что ваше изображение находится в режиме индексированного цвета. Чтобы исправить это, перейдите в Image--> Mode--> RGB. Ваше здоровье!
@Heather: Спасибо, что заметили это, я добавил примечание об этом к ответу. Фактически, преобразование в RGB обычно является первым, что вы хотите сделать с индексированными изображениями в GIMP, если только вы не хотите , чтобы ваши изменения были ограничены существующей палитрой.
Как это сделать в графическом редакторе Paint.NET?
@Boris_yo: Похоже, плагин Unblend для Paint.NET должен делать то же самое, что и Color to Alpha в GIMP. Хотя я сам не пробовал.
Спасибо, это сработало, но подпись была черной, потому что немного ярче. Пробовал играть с яркостью и контрастом, помогло немного.
@Boris_yo: Трудно сказать, почему это может быть, не видя реальных фотографий, но методы из этого ответа могут помочь. Конечно, вам придется адаптировать их к Paint.NET самостоятельно.
Версия GIMP 2.8.18, которую я использовал, не предлагала сделать цвет прозрачным, но все равно работала, просто следуя вашим инструкциям и нажимая кнопку «ОК». Спасибо!
@ozborn: Если между 2.8.16 и 2.8.18 не было каких-либо серьезных изменений, они должны быть прямо над кнопками «Справка» / «Отмена» / «ОК». Смотрите этот скриншот .

Вы можете использовать инструмент GIMP «Выбор по цвету» или инструмент «Волшебная палочка». Как бы вы это ни делали, просто выберите все черные пиксели. Затем вместо удаления выделенных пикселей примените маску слоя:

Layer -> Mask -> Add layer mask

Выберите переключатель " Selection" и обязательно установите флажок " Invert mask". Теперь все черные пиксели прозрачны.

Экспорт в формате PNG или GIF.

Проблема заключается в краях вокруг стрелки, где у вас могут быть черные пиксели, образующие подложку. Я не знаю, как в GIMP, но в Photoshop есть хорошая функция, позволяющая удалить предыдущую подложку и / или добавить подложку по вашему выбору.

Я не использую gimp, но это изображение — простой случай, когда должно быть просто получить достойную прозрачность.

Если вы выберете все изображение, а затем используете его (или, скорее, версию в оттенках серого) в качестве альфа-канала, вы почти закончили.

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

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

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

Вот шаг за шагом, чтобы сделать это:

  • Начиная со слоя с исходным изображением на нем, называемого «изображение».
  • Дублируйте слой «изображение» в новый слой под названием «альфа-изображение» (с помощью кнопки «Дублировать слой» в диалоговом окне «Слои»).
  • Colors > Desaturate... > Lightnessна слое "изображение альфа"
  • Щелкните правой кнопкой мыши слой «изображение» и Add Alpha(если это еще не сделано)
  • Скопируйте все «альфа-изображение» (в слое «альфа-изображение» Select Allи Copy)
  • Pasteего на альфа-канал «изображения» (щелкните правую миниатюру слоя «изображение», а затем вставьте его)

    • Предыдущие шаги, возможно, идентичны одиночной команде «Цвет в альфа-канал».
  • Необязательно: щелкните правой кнопкой мыши «изображение» и Show Layer Mask(должно показать вам, что вы вставили). Если вы пропустите это, вы сможете увидеть изменение прозрачности вживую на следующем шаге.

  • Color > Curves
  • В диалоговом окне «Кривые» сделайте кривую плоской вверху, а затем быстро снижающейся влево, в результате чего большинство ярких пикселей станут полностью белыми (т. е. изображение там будет непрозрачным).
  • Снимите флажок Show Layer Mask, чтобы увидеть примененную прозрачность.

    Перемещение точки насыщения кривых (в верхней части кривых) и скорости, с которой она снижается, позволяет настроить, насколько края изображения прозрачны и насколько.

Привет, Демис, добро пожаловать в GDSE и спасибо за ответ! Чтобы сделать ваши инструкции более разборчивыми, я бы посоветовал использовать опции «маркированный список» или «нумерованный список». Еще раз спасибо и наслаждайтесь сайтом!

Вы можете использовать Adobe Photoshop. Перейдите в меню « Выбор » -> « Цветовой диапазон » . Удерживая нажатой клавишу Shift , щелкните цвет, который нужно удалить (в вашем случае черный). Нажмите ок. Тогда все ваше черное будет выделено; теперь нажмите удалить.