Ibexa DXP v3.3 New Feature Preview: Image Editor

Die Funktion umfasst das Zuschneiden und das Spiegeln von Bildern und die Bestimmung eines Fokuspunktes in einem Bild - um eine optimale Darstellung des Hauptmotivs des Bildes über alle Geräte und Bildschirmauflösungen hinweg zu gewährleisten.

Dies ist der erste Teil einer dreiteiligen Vorschau-Blogserie, in der wir einen kleinen Einblick in die kommenden neuen Funktionen unserer neuesten Softwareversion v3.3 geben, die in Kürze verfügbar sein wird.

Die in Ibexa DXP v3.3 enthaltene Funktion des Image Editors wurde aufgrund des Wunsches unserer Kunden entwickelt: grundlegende Bildbearbeitungen an hochgeladenen Bildern auf benutzerfreundliche und effiziente Weise durchführen zu können, während man an einem Content-Element in der Bearbeitungsoberfläche arbeitet. Obwohl jeder Kunde und jedes Projekt andere Bedürfnisse haben kann, haben wir in dieser ersten Ausgabe des Image Editors die am häufigsten gewünschten Funktionen zur Bildbearbeitung aufgenommen.

Die Oberfläche des Image Editors besteht aus:

• Das zu bearbeitende Bild
• Eine Symbolleiste auf der rechten Seite mit drei Bearbeitungsoptionen: Spiegeln, Fokuspunkt und Zuschneiden
• Schaltflächen zum Rückgängigmachen oder Wiederherstellen von Bildbearbeitungen oder zum Zurücksetzen des Bildes in den Originalzustand
• Bildinformationen unterhalb des Bildes, die die aktuelle Bildgröße in Pixel (Breite x Höhe) anzeigen
• Schaltflächen zum Speichern und Abbrechen

Der Image Editor wird durch Klicken auf die Schaltfläche "Bearbeiten" gestartet, die im Bearbeitungsmodus auf den Bildfeldern angezeigt wird:

Motiv hervorheben oder den Fokus eines Bildes mit der Zuschneidefunktion verbessern

Die visuelle Wirkung und Komposition eines Bildes kann durch einen durchdachten Bildausschnitt erheblich verbessert werden. Das Zuschneiden eines Bildes kann Elemente im Foto hervorheben, um die gewünschte Geschichte besser auszudrücken, oder störende Elemente entfernen. Durch das Zuschneiden lässt es sich auch an ein Motiv im Bild "heranzoomen" oder die Bildausrichtung ändern.

Die Option "Zuschneiden" in der Symbolleiste des Image Editors zeigt die verfügbaren Zuschneideformate an, zu denen auch die folgenden gehören:

• 1:1 - Quadratisches Format. Die Breite und Höhe des Bildes sind gleich.
• 3:4 - Für jeweils 3 Einheiten in der Breite gibt es 4 Einheiten in der Höhe, wodurch ein rechteckiges Hochformat entsteht.
• 4:3 - Für jeweils 4 Einheiten in der Breite gibt es 3 Einheiten in der Höhe, wodurch ein rechteckiges Querformat entsteht.
• 16:9 - Breitbildformat, 78 % breiter als hoch, z. B. ein Bild mit einer Größe von 1920 x 1080 Pixel.
• Benutzerdefiniert - Ermöglicht es, das Bild nach Belieben zuzuschneiden, losgelöst von den Einschränkungen, die ein vordefiniertes Seitenverhältnis mit sich bringt.

Wenn auf das gewünschte Format geklickt wird, wird der Zuschneidebereich über dem Bild aktiviert und das Seitenverhältnis (Breite x Höhe) des Zuschneidebereichs erscheint in den Feldern "Zuschneidegröße". Die Größe des Zuschneidebereichs kann geändert werden oder es kann auf den Teil des Bildes gezogen werden, der zugeschnitten werden soll:

Der Zuschnitt kann durch Klicken auf das X-Symbol verworfen oder durch Klicken auf das Häkchensymbol ausgeführt werden. Nach der Ausführung zeigt der Image Editor das zugeschnittene Bild an:

Visuelle Beispiele für die im Image Editor verfügbaren vordefinierten Schnittformate:

Ein kompositorisch ansprechenderes Bild mit der Flip-Funktion erstellen

Unsere Augen treten von links in einen Bildrahmen ein und Elemente, die sich von links nach rechts bewegen, sind angenehmer zu betrachten. Wenn sie sich von rechts nach links bewegen, kann das Bild für das Auge weniger angenehm erscheinen. Das Kippen eines Bildes kann daher beeinflussen, wohin das Auge gelenkt wird, und das Storytelling verstärken, indem die Augen des Betrachters zu wichtigen Elementen im Rahmen geführt werden und Emotionen erzeugt oder verstärkt werden.

Mit dem Image Editor kann ein Bild entweder horizontal oder vertikal gespiegelt werden. Eine horizontale Spiegelung führt zu einem gespiegelten Bild, während eine vertikale Spiegelung das Bild auf den Kopf stellt.

Dieses Beispiel zeigt, wie die horizontale Spiegelungsfunktion des Bildeditors weniger Spannung in einem Bild erzeugen und die Augen des Betrachters auf angenehmere Weise durch den Rahmen führen kann:

Durch die Kombination der Funktionen "Zuschneiden" und "Spiegeln" kann ein Bild kompositorisch ansprechender, auffälliger oder mit beeindruckenden kreativen Effekten gestaltet werden:

Optimale Anzeige des Bildes auf allen Geräten durch Festlegen eines Fokuspunktes sicherstellen

Der Begriff "Fokuspunkt" hat je nach Kontext eine Vielzahl von Definitionen. Der Image Editor bietet mit der Funktion "Fokuspunkt" die Möglichkeit, das Hauptmotiv des Bildes zu definieren; das Motiv, das im Fokus sein soll und die Anforderungen an ein responsives Design für verschiedene Geräte und Bildschirmauflösungen unterstützt.

Da das Seitenverhältnis nicht auf allen Geräten gleich ist, bleibt der Fokuspunkt nicht immer im Bild, wenn das Bild verkleinert wird. Es muss sichergestellt werden, dass das Hauptmotiv unabhängig vom verwendeten Gerät angezeigt wird, insbesondere bei Inhalten, bei denen das Bild ein wichtiger Teil des Storytellings ist.

Beim Klicken auf die Schaltfläche "Punkt anzeigen" zeigt der Image Editor den Standard-Fokuspunkt an, der in der Mitte des Bildes platziert wird. Die Festlegung des gewünschten Fokuspunktes erfolgt einfach durch Ziehen des Fokuspunkt-Cursors auf das gewünschte Motiv des Bildes. Mit dem roten Kreuzsymbol kann man die Fokuspunktbestimmung zurücksetzen.

Speichern der Bildbearbeitungen

Ist man mit den vorgenommenen Bildbearbeitungen zufrieden und möchte den Image Editor verlassen, werden die Bearbeitungen durch Klicken auf die Schaltfläche Speichern übernommen. Das Bild wird in seinem neuen, geänderten Zustand im Bildspeicher abgelegt. Wenn das Bild, das bearbeitet wurde, von mehr als einem Content-Element verwendet wird, wird eine Warnmeldung angezeigt. Hierbei kann gewählt werden, ob das geänderte Bild als neue Bilddatei gespeichert werden soll (nur für das aktuell bearbeitete Content-Item) oder ob das geänderte Bild auf alle Content-Elemente angewendet werden soll, in denen es verwendet wird.

Effizienzsteigerung als Content-Ersteller mit dem Image Editor

Obwohl der Image Editor kein Ersatz für Photoshop oder andere vollwertige Bildbearbeitungsprogramme ist, ermöglicht er Content-Erstellern sicherlich ein effizienteres Arbeiten, wenn bei der Erstellung von Inhalten in der Ibexa DXP grundlegende Bearbeitungen an einem Bild vorgenommen werden müssen. Mit dem Image Editor können auch Redakteure ohne Zugang zu - oder Erfahrung in der Verwendung von - Bildbearbeitungsprogrammen einfache Bildbearbeitungen durchführen, ohne dass Grafikdesigner oder Kollegen mit Erfahrung in der Verwendung von fortgeschrittenen Bearbeitungsprogrammen hinzugezogen werden müssen.

Machen Sie den Image Editor zu einem Teil Ihres Arbeitsablaufs bei der Erstellung von Inhalten!

Quelle: https://www.ibexa.co/de/blog/ibexa-dxp-v3.3-new-feature-preview-image-editor