Icons farblich anpassen mit ImageMagick

Nachfolgend soll beschrieben werden, wie sich die Farbe an einem Icon ändern lässt.

Ausgehend von folgender Grafik:

Soll dies daraus enstehen:

Erster Ansatz

Im ersten Ansatz wird naiv die Farbe ausgetauscht.

convert profile.png -fuzz 90% -fill red -opaque black out.png<span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span>

Das Ergebnis wirkt auf den ersten Blick vielversprechend:

Bei genauerer Betrachtung jedoch fallen die Pixel auf.

Hintergrundinformationen

Die Grafik besitzt einen vollständig transparenten Hintergrund. Die Linien sind an den Rändern ebenso leicht transparent. Um auch diese Pixel in rot aufzufärben, nutzt der Befehl oben den Paremeter -fuzz mit dem Argument 90%. Sollte der Parameter ausgelassen werden oder das Argument zu niedrig sein, ergibt sich ein schwarzer Rand.

Zur Verdeutlichung dient nachfolgend aufgeführter Bildausschnitt, in dem die Ursprungsgrafik stark vergrößert wurde.

Tatsächlich sind die Ränder nicht grau, sondern leicht transparenz. Dies soll im zweiten Ansatz ausgenutzt werden.

Zweiter Ansatz

Im zweiten Ansatz wird der Alpha Kanal, also die Transparenz zunächst extrahiert. Dann wird im eine vollständig rote Fläche erzeugt, auf der dann die extrahierte Alpha-Map gelegt wird.

Zunächst wird der transparente Bereich betrachtet.

convert profile.png -alpha extract alpha.png

Nachfolgend wird eine rote Fläche erzeugt; auf Basis der ursprünglichen Grafik um die Größe des Bildes nicht besonders behandeln zu müssen.

convert profile.png +level-colors "red", profile-red-full.png

Und schließlich wird die Alpha-Map über das Bild gelegt.

convert profile-red-full.png alpha.png -alpha off -compose copy_opacity -composite profile-red.png

Zusammenfassung

Aufbauend auf den obigen Anführungen, werden nachfolgend einige Shell Scripte aufgeführt.

colorize.sh

#!/bin/bash

SRC=$1
COLOR=$3
DST=$2

# Extract alpha map
convert "$1.png" -alpha extract "$1.alpha.png"

# Colorize
convert "$1.png" +level-colors "$3", "$1-new-full.png"

# Compose
convert "$1-new-full.png" "$1.alpha.png" -alpha off -compose copy_opacity -composite "$DST.png"

# Cleanup
rm "$1.alpha.png"
rm "$1-new-full.png"

./colorize.sh profile profile-red "#00b0eb"

colorizer.sh

#!/bin/bash

[[ $# -ne 1 ]] && exit 1

SRC=$1

./colorize.sh "$1" "$1-white" "white"
./colorize.sh "$1" "$1-grey" "#F5F4F7"
./colorize.sh "$1" "$1-red" "#F5F3F3"
./colorize.sh "$1" "$1-blue" "#F1F7FA"
./colorize.sh "$1" "$1-green" "#F4F7F3"
./colorize.sh "$1" "$1-purple" "#4F526E"

./colorizer.sh profile