Oft fallen im Bereich der Bildbearbeitung Aufgaben an, die für eine Fülle von Bildern wiederholt werden muss. Hierfür bietet Adobe Photoshop die Stapelverarbeitung welche beliebige Schritte, z.B. für einen Ordner mit Bildern, wiederholt.

Hier sollen die notwendigen Schritte aufgezeigt werden, welche es benötigt, von Bildern automatisiert Thumbnails zu generieren. Das Orginal-Bild und das Thumbnail (Vorschaubild) sollen beide über ein Wasserzeichen geschützt sein.

Sämtliche benötigten Dateien werden zur Verfügung gestellt, sodass die notwendigen Schritte gut nachvollzogen werden können.

Das Ziel

Das Video zeigt auf, wie Sie die Aktion, welche wir erstellen, anwenden. Natürlich könne Sie jedes beliebige Wasserzeichen verwenden.

Vorbereitung

Die benötigten Dateien laden Sie bitte hier herunter. Nachdem Sie diese auf dem Desktop entpackt haben, starten Sie bitte Adobe Photoshop.

Zu Beginn starten wie Adobe Photoshop und  blenden die Aktionen-Palette über Fenster -> Aktionen oder die Funktionstaste F9 ein.

Aufrufen der Aktionen-Palette

Im rechten Teil verfügen wir nun über die Aktionen-Palette.

Aktionen-Palette

Mit Hilfe dieser Palette können wir (fast) alles was wir in Photoshop ausführen aufzeichen lassen und dann später durch einen Knopfdruck abspielen.

Darüber hinaus öffnen Sie bitte die Datei ROAE-Tutorial/logo.gif (Sie können später die Datei durch Ihr eigenes Logo ersetzen).

Aktion erstellen und aufzeichen

Hinweis: In den Dateien ist bereits die fertige Aktion enthalten (Datei Wasserzeichen_und_Thumbnaill-Photoshop_Aktion), welche Sie durch einen Doppelklick in Photoshop importieren können. Sie müssen also nicht die folgenden Schritte nicht durchführen.

Aus je einem Orginal-Bild sollen zwei Bilder erstellt werden. Einmal das Bild mit einem Wasserzeichen versehen, zum zweiten ein Thumbnail (Vorschaubild), mit einer Breite von 400 Pixeln und ebenfalls einem Wasserzeichen.

Schritt 01: Aktion erstellen

Um die notwendigen Schritte aufzeichnen zu lassen, klicken wir in der Aktionen-Palette auf Neue Aktion erstellen

Erstellen einer neuen Aktion

und tragen in dem neuen Fenster als Aktionsname Wasserzeichen und Thumbnail ein.

Neue Aktion erstellen & aufzeichnen beginnen

Rechts in der Aktionenpalette ist nun der Eintrag Wasserzeichen und Thumbnail markiert. Des weiteren ist der Aufnahme-Knopf aktiviert:

Aktionen werden aufgezeichnet

Bitte achten Sie darauf folgende Schritte genau wie beschrieben auszuführen. Kleine Abweichungen (z.B. wechseln zwischen den geöffneten Dateien) können später zu einem Fehler führen.

Schritt 02: Orginal-Bild öffnen

Über Datei -> Öffnen laden wir zuerst eines unser Original-Bilder in Photoshop. Wählen Sie die Datei ROAE-Tutorial/original_bilder/auto.jpg aus dem entpackten ZIP-Archiv (hier können Sie die Bilder nochmal herunterladen – falls Sie dass noch nicht gemacht haben sollten).

Schritt 03: Hintergrund in Ebene wandeln

Betrachten Sie nun die Ebenenpalette rechts unten (sollte diese nicht sichtbar sein, so blenden Sie diese bitte über Fenster -> Ebenen bzw. die Funktionstaste F7 ein). Klicken Sie mit der rechten Maustaste in der Ebenpalette auf die Ebene Hintergrund und wählen Sie im Kontexmenü Ebene aus Hintergrund. Durch diese Aktion wird die Ebene zu einer “gewöhnlichen” Ebene, was mehr Operationen gestartet.
Den Dialog  welcher Name, Farbe und ähnliches abfragt, bestätigen Sie mit ENTER, d.h. die Standardeinstellungen werden übernommen.

In Ebene wandeln

Die Ebene heißt danach nicht mehr Hintergrund, sondern Ebene 0 oder ähnlich.

Schritt 04: Wasserzeichen kopieren

Wechseln Sie nun auf das zuvor bereits geöffnete Datei logo.gif.

Wählen Sie nun das komplette Bild aus, in dem Sie über das Menü Auswahl -> Alles auswählen oder die Tastenkombination STRG + A verwenden. Kopieren Sie das Wasserzeichen in die Zwischenablage über das Menü Bearbeiten -> Kopieren (alternativ STRG + C).

Schritt 05: Wasserzeichen in Orginal-Bild einfügen

Wechseln Sie nun zurück auf das Original-Bild mit dem Auto und fügen dort das Wasserzeichen über Bearbeiten -> Einfügen (alternativ STRG + V) ein. Das Wasserzeichen wurde nun zentriert eingefügt und in der Ebenen-Palette eine neue Ebene erstellt:

Zentriertes Logo und neue Ebene

Schritt 06: Wasserzeichen ausrichten

Kontrollieren Sie dass in der Ebenen-Palette die Ebene, mit dem Wasserzeichen markiert ist (Ebene 1). Markieren Sie nun wieder alles über Auswahl -> Alles auswählen bzw. STRG + A. Richten Sie nun das Logo aus in dem Sie im Menü Ebene -> Ebenen an Auswahl ausrichten -> Untere Kanten und Ebene -> Ebenen an Auswahl ausrichten -> Rechte Kanten wählen. Das Wasserzeichen befindet sich nun bündig unten rechts.

Wasserzeichen ausgerichtet

Schritt 07: Bild mit Wasserzeichen speichern

Über Datei -> Speichern unter speichern wir das Bild  in dem Ordner roae_tutorial/fertige_bilder/orginal_Bild.jpg. Wählen Sie hierzu bei Format JPEG (*.JPEG, *.JPG, *.JPE).

Bei den Speicheroptionen setzten Sie bitte die Qualität (1) auf Hoch und klicken anschließend auf Speichern .

Qualtität für Bild festlegen

Schritt 08: Thumbnail erstellen

Wählen Sie im Menü Bild -> Bildgröße. Für die Breite tragen Sie 400 unter Pixel ein und klicken anschließend auf OK.

Bildgröße ändern

Schritt 09: Thumbnail speichern

Speichern Sie das verkleinerte Bild nun über Datei -> Speichern unter  in dem Ordner roae_tutorial/fertige_bilder/thumbnail.jpg. Wählen Sie als Dateityp auch hier wieder JPG. Als Qualitätsstufe dürfte hier Mittel in vielen Fällen ausreichend sein.

Schritt 10: Fenster schließen

Schließen Sie nun das Fenster mit dem Orignal-Bild. Eine Nachfrage ob Sie die Änderung speichern wollen verneinen Sie. Die Datei mit dem Wasserzeichen / Logo lassen Sie geöffnet.

Schritt 11: Aufnahme beenden

Beenden Sie nun die Aufnahme über den Button Aufnahme beenden.

Beenden der Aufnahme

Aktion auf alle Bilder in einem Ordner anwenden / Stapelverarbeitung

Damit die Aktion erfolgreich ausgeführt werden kann, schließen Sie alle Dateien in Photoshop. Anschließend öffnen Sie das Wasserzeichen (ROAE-Tutorial/logo.gif).

Einstellungen

Wählen Sie Datei -> Automatisieren -> Stapelverarbeitung. Es öffnet sich ein großer Dialog der sich in die Bestandteile Abspielen, Quelle, Ziel und Fehler unterteilt. Übernehmen Sie nun die Einstellungen wie im Screenshot gezeigt. Die einzelnen Werte sind gefolgt nochmal schriftlich erläutert:

Einstellungen für die Stapelverarbeitung

Abspielen

Wählen Sie bei Satz Standardaktion (1), bei Aktion Wasserzeichen und Thumbnails (2).

Quelle

Bei der Art der Qelle wählen Sie Ordner (3) damit Sie im Dialog den Pfad zu den Orginal-Bildern (ROAE-Tutorial/original-Bilder) angegeben können (4). Öffnen in Aktionen überschreiben (5) muss darüber hinaus aktiviert werden.

Ziel

Bei Ziel wählen Sie wie bei Quelle  Ordner (6) und legen als Pfad im Dialog den Ordner fertige Bilder (ROAE-Tutorial/fertige-Bilder) fest (7). Hier muss “Speichern unter” in Aktionen überschreiben aktiviert werden (8), da sonst die Dateien überschrieben werden.

Im Bereiech Dateibennenung legen Sie bitte folgendes fest: Dokumentenname (9) + _ (10) + Dreistellige Seriennummer (11) + Erweiterung (12). Die Anfangsseriennummer sollte den Wert 1 haben (13)

Fehler

Im Bereich Fehler wählen Sie Bei Fehlern anhalten (14)

Starten und Resultat

Nachdem Sie all diese Einstellungen vorgenommen haben, klicken Sie auf OK (15). Kurz darauf können Sie Photoshop bei der Arbeit zuschauen, wie innerhalb weniger Sekunden die Bilder erstellt  und im Ordner fertige Bilder abgelegt werden:

Die fertigen Bilder, automatisch generiert von Photoshop

Sie können nun natürlich die das Logo oder die Orginal-Bilder durch ihre eigenen ersetzen. Auch können Sie die Aktion anpassen und z.B. die Vorschaubilder mit abgerundeten Ecken versehen.

Für Fragen, Hinweise und Anmerkungen kann wie immer die Kommentarfunktion benutzt werden.

Siehe auch

• Thumbnails erzeugen und Durchschnittsfarbe in PHP ermitteln

Eines meiner etwas zurückliegenden Projekte zwang mich externe Bilder durch meinen Server zu laden, zu verkleinern und schließlich auch die Durchschnittsfarbe zu berechnen. Aus Gründen der Performancesteigerung war ich nie ein Fan davon die Durchschnittsfarbe Pixel für Pixel des Originalbildes zu berechnen. Es gibt eine viel elegantere und fast genauso exakte Lösung:

Unser Ziel: Wir möchten ein Bild (jpg, gif, png) über einen HTTP-Stream laden, dieses lokal auf dem Server speichern, ein entsprechendes Thumbnail (eine verkleinerte Version) erzeugen, speichern und schlussendlich die dominierende – oder auch durchschnittliche – Farbe im Bild berechnen und abspeichern. Eventuell möchten wir zusätzlich alles in einer Datenbank hinterlegen – das soll aber zunächst außerhalb unserer Betrachtung liegen.

Für das Berechnen der Durchschnittsfarbe gibt es einen wunderbar einfachen Trick. Doch dazu später mehr. Beginnen wir zunächst einmal mit einer Konstante und einer Funktion, die wir später noch benötigen:

DEFINE('CTX', stream_context_create(array(
    'http' => array(
        'timeout' => 20,
        'method' => 'get',
        'header' => 'Referer: XYZ'
    )
)));

Unsere Konstante CTX ist also ein array. Wir benötigen es für unsere HTTP-Anfrage, mit der wir das gewünschte Bild auf unseren Server laden. Für diese Anfrage verwenden wir die HTTP-GET-Methode, definieren einen Timeout von maximal 20 Sekunden und senden einen Referer im Header, den ich hier mal einfach nur “XYZ” genannt habe.

function randomstring_creator($len = 20) {
    $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    $string = '';
    mt_srand((double) microtime() * 1000000);
    for($i = 0; $i < $len; $i++) {
        $string .= $chars{mt_rand(0, strlen($chars))};
    }
    return($string);
}

Die Funktion randomstring_creator() generiert uns eine zufällige Zeichenfolge mit einer beliebigen Länge. Wir benötigen diese Funktion, da wir in diesem Beispiel die Bilder lokal unter einem zufälligem Namen speichern werden.

Weiter geht es mit unseren Klassen. Beginnen wir mit der Klasse Image:

class Image {
    var $img;
    var $source;
    var $local;
    var $dimX;
    var $dimY;
    var $avg_colour;
    function get($source, $quality = 90) {
// siehe unten
    }
    function calc_avg_colour() {
// siehe unten
    }
}

Unsere Klasse besitzt also die Eigenschaften source (die Url, von der das Bild stammt), local (den lokalen Speicherpfad), dimX, dimY (die Abmessungen des Bildes in Pixel) und avg_colour (den farblichen Durchschnittswert als HEX-Code in der Form rrggbb). Die Eigenschaft img ist eine Referenz auf das Image-Objekt, dass ich aber später noch näher beleuchten werde.

Die beiden Funktionen get() und calc_avg_colour() der Klasse sollten selbsterklärend sein. Mit der Funktion get(), die gleichzeitig auch als Konstruktor dient, laden wir das Bild, dass unter source zu finden ist, auf unseren Server und speichern es in der gewünschten JPEG-Qualität (90 als Standard) lokal.

calc_avg_colour() berechnet – wie der Name schon sagt – die Durchschnittsfarbe des in der Eigenschaft img gespeicherten Bildes.

Wir wollen zusätzlich aber auch kleine Abbilder des Originalbildes erstellen und erweitern dazu unsere Image-Klasse um die Klasse Thumbnail:

class Thumbnail extends Image {
    function create($parent, $X = 300, $Y = 300, $quality = 60) {
// siehe unten
    }
}

Diese Erweiterung besitzt zunächst nur eine Funktion, mit der das Thumbnail erstellt wird. Die übergebene Variable parent enthält dabei eine bereits existierende Image-Klasse, die herunterskaliert werden soll. Die maximale Breite und Höhe werden mit den Variablen X und Y (standard bei 300 Pixel) übergeben. Die JPEG-Qualität beträgt standardmäßig nur 60.

Das eigentliche Programm sieht dann nur noch so aus:

$imgurl = 'original.jpg';
// neues Objekt der Klasse Image erzeugen
$img = new Image;
// Bild aus der imgurl laden
if($img->get($imgurl)) {
    // ein Objekt der Klasse Thumbnail erzeugen
    $thumb = new Thumbnail;
    // und ein Thumbnail des oben definierten Objektes der Klasse Image generieren
    $thumb->create($img, 300, 300);
    // dann noch die Durschschnittsfarbe berechnen
    $thumb->calc_avg_colour();
    // und Daten ausgeben... fertig
    echo('Image: ' . $img->source . "\n");
    echo('Thumbnail: ' . $thumb->source . "\n");
    echo('Average colour: #' . $thumb->avg_colour . "\n");
} else {
    echo('Could not get the image.');
}

So, dann sehen wir uns also mal unsere Funktionen der Klassen an. Beginnen wir mit der Funktion get():

function get($source, $quality = 90) {
    $this->source = $source;
    // wir laden das Bild von $source:
    if(($file = file_get_contents($this->source, false, CTX))) {
        // wenn erfolgreich, erzeugen wir mit den geladenen Daten
        // ein neues Bild und speichern dieses in der Eigenschaft img
        $this->img = imagecreatefromstring($file);
        // wir lesen die Höhe und Breite des Bildes aus
        $this->dimX = imagesx($this->img);
        $this->dimY = imagesy($this->img);
        // und speichern das Bild unter zufälligem Namen mit imagejpeg lokal im Ordner "raw"
        $this->local = 'raw/' . randomstring_creator() . '.jpg';
        imagejpeg($this->img, $this->local, $quality);
        // bei Erfolg true zurückgeben
        return(true);
    } else {
        // false, wenn das Bild nicht geladen werden konnte
        return(false);
    }
}

Ein Thumbnail erzeugen wir mit dieser Funktion der Klasse Thumbnail:

function create($parent, $X = 300, $Y = 300, $quality = 60) {
    // zunächst die vorläufigen Abmessungen speichern
    $this->dimX = $X;
    $this->dimY = $Y;
    // die Abmessungen und deren Verhältnis des Originalbildes holen
    $origX = $parent->dimX;
    $origY = $parent->dimY;
    $ratio = $origX / $origY;
    // wenn das Originalbild breiter als hoch ist, kürzen wir die Höhe
    if($X / $Y > $ratio) {
        $this->dimX = $Y * $ratio;
    } else {
    // wenn das Originalbild höher als breit ist, kürzen wir die Breite
        $this->dimY = $X / $ratio;
    }
    // hier erstellen wir ein neues Bild mit den oben berechneten Abmessungen
    $this->img = imagecreatetruecolor($this->dimX, $this->dimY);
    // und kopieren das Originalbild einfach in das eben erstellte kleinere, dabei wird es verkleinert
    imagecopyresampled($this->img, $parent->img, 0, 0, 0, 0, $this->dimX, $this->dimY, $origX, $origY);
    // jetzt speichern wir das neue Thumbnail noch unter zufälligem Namen im Ordner "thumb"
    $this->source = $parent->local;
    $this->local = 'thumb/' . randomstring_creator() . '.jpg';
    imagejpeg($this->img, $this->local, $quality);
}

Das Herzstück: Wir wollen die Durchschnittsfarbe ermitteln. Dazu könnten wir einfach alle Farbwerte aller Pixel zusammen addieren und dann durch die Anzahl der Pixel teilen. Bei einem Thumbnail von der Größe 300 x 300 Pixel, würden wir aber eine Schleife mit 90.000 Durchläufen benötigen. Es gibt einen besseren Weg – einen ganz logischen Trick.

Durchschnittsfarbe berechnen

Wir haben oben beim Erstellen des Thumbnails die Funktion imagecopyresampled() verwendet. Was wenn wir unser Thumbnail einfach auf eine Größe von 1×1 Pixel skalieren? Genau: Es bleibt ein Pixel mit der Durschnittsfarbe übrig. Dessen Farbe auszulesen ist mit imagecolorat() dann nur noch eine Kleinigkeit. Los gehts:

function calc_avg_colour() {
    // ein temporäres Bild mit den Abmessungen 1x1 Pixel erstellen
    $avrg = imagecreatetruecolor(1, 1);
    // Das Thumbnail einfach reinkopieren, dabei auf 1x1 Pixel skalieren
    imagecopyresampled($avrg, $this->img, 0, 0, 0, 0, 1, 1, $this->dimX, $this->dimY);
    // Die Farbe des verbleibenden Pixels auslesen
    $rgb = imagecolorat($avrg, 0, 0);
    // Das temporäre Bild wieder löschen
    imagedestroy($avrg);
    // Und die Farbe in HEX umwandeln
    $r = dechex($rgb >> 16);
    $g = dechex($rgb >> 8 & 255);
    $b = dechex($rgb & 255);
    if(strlen($r) < 2) $r = 0 . $r;
    if(strlen($g) < 2) $g = 0 . $g;
    if(strlen($b) < 2) $b = 0 . $b;
    // tataaaa... da ist unsere Durchschnittsfarbe:
    $this->avg_colour = $r . $g . $b;
}

Super. Das wäre es. Ende und aus.