Jetzt wollen wir uns mal an die Vespa machen, die übrigens in Gallipoli/Apulien in der Altstadt herumstand.
Wir müssen dazu drei Dateien vorbereiten.
Die erste haben wir schon im Teil 2 erzeugt und sieht so ähnlich (verkleinert) aus:
Die zweite erzeugen wir mit convert -size 100x100 xc: -channel R \ -fx 'yy=(j+.5)/h-.5; (i/w-.5)/(sqrt(1-4*yy^2))+.5' \ -separate +channel sphere_lut.png
Daraus wird unter PHP
<?php $lut=$absoluter_Pfad_mit_DIRECTORY_SEPARATOR."sphere_lut.png"; $cmdP1= "convert -size 400x400 xc: -channel R ". "-fx \"yy=(j+.5)/h-.5; (i/w-.5)/(sqrt(1-4*yy^2))+.5\" ". "-separate +channel $lut "; ?>
Das sieht etwas verwirrend aus. ImageMagick hat außer den eingebauten Funtionen wie z.B. -size oder -separate auch noch die Möglichkeit, die Transformation Pixel für Pixel selbst zu machen mit dem -fx special effects image operator. Was da genau passiert, kann man mit wenigen Worten hier nicht erklären, aber es ist hier gut dokumentiert
Am besten, man macht das so wie gewöhnlich: man findet einen Effekt, probiert ihn aus und wenn man etwas ändern möchte, muß man sich einlesen.
Rein technisch ist sphere_lut.php eine lookup table, die bei der Erzeugung des eigentlichen Bildes Pixel für Pixel ausgelesen wird. Dabei werden die Grauwerte jedes Pixels (skaliert von 0.0 bis 1.0) dazu verwendet, um die Bildtranformation zu steuern.
Im vorliegenden Fall wird ein quadratisches Bild auf einen Kreis abgebildet
sphere_lut.png sieht so aus:
Im Prinzip ist es ein Kreis, der einen horizontalen Gradienten von schwarz nach weiß besitzt. Die weißen und schwarzen Ecken kann man sich wegdenken, weil sie später ausgeblendet werden.
Die dritte Datei wird aus der ersten Datei abgeleitet. Sie soll unserer Vespa einen 3D- Effekt geben.
convert sphere_mask.png \ \( +clone -blur 0x20 -shade 110x21.7 -contrast-stretch 0% \ +sigmoidal-contrast 6x50% -fill grey50 -colorize 10% \) \ -composite sphere_overlay.png
Daraus wird unter PHP
<?php $overlay=$absoluter_Pfad_mit_DIRECTORY_SEPARATOR.'sphere_overlay.png'; $cmdP3= "convert $mask ( +clone -blur 0x20 -shade 110x21.7 -contrast-stretch 0% ". " +sigmoidal-contrast 6x50% -fill grey50 -colorize 10% ) ". " -composite $overlay "; ?>
Achtung: die escapten Klammern \( und \) werden einfach zu ( und ) !!!
Hier wird unser weißer Kreis unscharf gemacht (-blur…), aus einer Richtung und einer Höhe belichtet (-shade …) und dann das Ergebnis verbessert.
Bei Gimp heißt dieser Effekt Bumpmap.
Das Ergebnis sollte so aussehen:
Jetzt können wir die Vespa erzeugen:
convert vespa_orig.png -resize 100x100 sphere_lut.png -fx 'p{ v*w, j }' \
sphere_overlay.png -compose HardLight -composite \
sphere_mask.png -alpha off -compose CopyOpacity -composite \
sphere_vespa.png
<?php
$input=$absoluter_Pfad_mit_DIRECTORY_SEPARATOR.'vespa.jpg';
$out=$absoluter_Pfad_mit_DIRECTORY_SEPARATOR.'vespa_button.jpg';
$cmd=" convert $input -resize 400x400 ".
" $lut -fx \"p{ v*w, j }\" ".
" $overlay -compose HardLight -composite ".
" $mask -alpha off -compose CopyOpacity ".
" -composite $out ";
?>
Hier ist das Originalbild (verkleinert)
Und hier unser Button
Viel Spaß beim Bildermachen.
