Цветовая маска на png файле

Question

Я хотел бы предложить пользователю простой способ изменить цвет файла png (например, показать цветовую палитру и показать предварительный просмотр результата в реальном времени).

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

Например (изображения не на 100% похожи, но вы понимаете: светлая линия с градиентом от светлого к темному и, наконец, темная линия):

Я бы предпочел универсальный png, к которому я мог бы применить маску или что-то программно

Answer 1

Может быть, вы могли бы попробовать SVG вместо PNG.Это формат xml, в котором вы можете легко изменить цвет.

Answer 2

Требуется .png, содержащий альфа-канал с подробностями.

Пример изображения для градиента любого цвета:

Как это выглядит внутри Photoshop:

А вот пример использования изображения с HTML / CSS:

http://jsfiddle.net/wbk8d/

<div class="red"></div>
<div class="magenta"></div>
<div class="blue"></div>

div {
    background: url(http://i.stack.imgur.com/LliRn.png);
    width: 320px;
    height: 60px;
    margin: 0 0 10px 0
}
.red {
    background-color: red
}
.magenta {
    background-color: #f0f
}
.blue {
    background-color: blue
}

Answer 3

Насколько я понял, вам нужен универсальный способ создания сайтов. В этом случае я рекомендую проверить, может ли ваш дизайнер работать с вами в диапазоне HSL . Если нет, вы можете указать это самостоятельно. Это значит, что он обладает цветом и яркостью.

Проверьте этот конструктор, чтобы найти в DotNet простой способ изменить любое изображение с помощью HSL-методов:

http://colorschemedesigner.com