Преобразовать мотив переднего плана в степени прозрачности?

У меня есть 24-битный PNG, где мотив представляет собой тонкий узор. Сам узор светло-серого цвета, т. е. фоновый цвет PNG такой же, #eeeа узор находится в диапазоне чуть более темных серых тонов.

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

Я могу найти множество руководств по тому, как просто сделать фон прозрачным, но как мне преобразовать мотив переднего плана в степени прозрачности?

Я полный новичок в программах для графического дизайна. Доступен Adobe Photoshop 5, и я также могу установить бесплатное программное обеспечение для Windows (например, Windows Gimp).

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

Обновление: вот исходный PNG, который я пытаюсь преобразовать:

Шаблон

(Примечание: это изображение лицензировано, использование или распространение другими лицами запрещено):

Было бы намного легче помочь, если бы вы показали нам изображение, о котором говорите.

Ответы (5)

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

Прозрачное изображение

И используя его в качестве фона для HTML-страницы с установленным цветом фона, #aa00ccя получил такой результат:

Фон

В фотошопе:

  1. Изображение → Режим → Оттенки серого.

  2. Откройте панель каналов и, удерживая команду, щелкните миниатюру канала. Это сделает выбор из канала.

  3. Выберите → Инверсия.

  4. Откройте панель слоев и создайте новый растровый слой.

  5. Нажмите D, чтобы сбросить цвета переднего плана и фона на белый и черный.

  6. Нажмите X, чтобы поменять местами цвета переднего плана и фона. Это будет означать, что черный цвет является цветом переднего плана.

  7. Нажмите опцию «Удалить», чтобы заполнить выделение черным цветом.

  8. Отключите слой исходного изображения (это должен быть нижний слой).

Теперь у вас есть полностью черный слой с данными изображения в альфа-канале.

Если я правильно понял ваш вопрос, вам нужно создать PNG с рисунком (например, прозрачность 50%) и без фона (прозрачность 100%).

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

Темные и светлые части накладываются на фон, поскольку они полупрозрачны (использование градиента для отображения фона взаимозаменяемо):

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

Таким образом, вы можете изменить цвет фона, градиент или изображение, даже если шаблоны остаются прежними.

Обновление: это просто инвертированный узор, который используется в качестве маски слоя:

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

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

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

Если оставить это в стороне, есть множество способов добиться того, чего вы хотите. В этом случае, я думаю, самым простым способом (и лучшим в то же время) будет:

  1. Скопируйте ваше изображение на новый слой (не получится, если он останется слоем «Фон», так как «Фон» в Ps всегда полностью непрозрачен). Это можно сделать, например, с помощью Ctrl+ J( Cmd+ Jесли это ваша лодка;))
  2. Дважды щелкните слой, чтобы открыть окно «Стиль слоя». По умолчанию вы должны попасть в раздел «Параметры наложения». Там внизу вы должны увидеть два ползунка, по умолчанию заполненные градиентом от черного к белому. Верхний должен быть помечен как «Этот слой». Если вы хотите сделать белые части изображения прозрачными, передвиньте правый ползунок. Вы должны увидеть «шахматную доску», появляющуюся в самых ярких местах вашего узора. Сейчас все полностью прозрачно или непрозрачно, но вы можете добавить «промежуточные» уровни прозрачности, Altщелкнув ползунок. Затем он разделится на две части, сделав цвета между частями ползунка «полупрозрачными». Вы можете прочитать больше в этом уроке .
  3. Вот и все! Если вы хотите увидеть, как ваш новый прозрачный узор будет выглядеть с разными цветами фона, добавьте цветной слой под узором (я рекомендую корректирующий слой «Сплошной цвет», так как он позволит легко изменить цвет заливки).
  4. Убедитесь, что виден только ваш прозрачный шаблон, и экспортируйте его в прозрачный PNG. Вы можете сделать это несколькими способами, но я советую использовать функцию «Сохранить для Интернета», так как вы сможете увидеть, как будет выглядеть ваш PNG в зависимости от заданных параметров, прежде чем он будет экспортирован.
Не за что! :)

как преобразовать мотив переднего плана в степени прозрачности?

Чтобы ответить на этот вопрос (поскольку вы сказали, что вы полный новичок), просто (например) выберите слой с узором и нажмите 5 и 0 на цифровой клавиатуре, чтобы установить непрозрачность на 50%. Убедитесь, что слой узора является единственным слоем.

Прозрачность в Photoshop выглядит так (если вы не знаете):введите описание изображения здесь

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