Zielgruppe RedakteurVersion: GSB10.1Responsive Bilder

Für die unterschiedlichen Verwendungen eines Bilddokumentes müssen jeweils individuelle Bilddateien in das Bilddokument hochgeladen.

1 Bedienoberfläche

Die Bedienoberfläche ist zur Bildbearbeitung wird aus den vier Panels

• Standardansicht
• Quellbild bearbeiten
• Verwendung bearbeiten
• Bildübersicht

aufgebaut, welche die einzelnen Arbeitsbereiche zur Bildbearbeitung abbilden. Die Panels werden in den nachfolgenden Abschnitten ausführlicher dargestellt.

1.1 Standardansicht

Diese Ansicht entspricht im Wesentlichen dem der Bearbeitung von Bilddokumenten, so dass auf eine detaillierte Spezifikation der Text- und Link-Properties verzichtet wird und im Folgenden lediglich auf die Unterschiede bzw. die neuen Editorpanels eingegangen wird.

In dieser Ansicht wird mit dem „Originalbild“ nur eine einzige Bild-Ansicht dargestellt, d.h. die Darstellungen für Banner, Thumbnail, Poster entfallen in dieser Ansicht. Falls das Bilddokument ausgecheckt ist, kann ein Redakteur mit Hilfe der Bildbearbeitungsbuttons eine Bildquelle wählen bzw. ein neues Bild hochladen, ein vorhandenes Bild löschen oder das Bild bearbeiten.

• 

  Das Hochladen eines Bildes erfolgt entweder per Drag & Drop auf die Bild Fläche oder mit Hilfe des „Upload“ Buttons nach dem bisher bekannten Bearbeitungsablauf. Durch das Einfügen eines neuen Bildes werden alle ggf. vorhandene manuelle Bearbeitungsschritte am Originalbild verworfen und auf die vordefinierten Defaultwerte zurückgesetzt.

• 

  Ein vorhandenes Originalbild kann durch Klick auf den „Delete“ Button wieder gelöscht werden. Durch das Löschen des Originalbildes werden auch alle ggf. vorhandenen manuellen Bearbeitungsschritte am Originalbild verworfen.

• 

  Sofern im Bild-Dokument ein Originalbild vorhanden ist, gelangt der Redakteur durch die Auswahl des „Stift“-Buttons (vgl. Abbildung "Editor Bild-Dokument (Ausschnitt Bild-Property)") – wie bisher – zur Bildbearbeitung. Nach Klick auf dem Button öffnet sich die im folgenden Abschnitt dargestellte Editorpanel „Bildbearbeitung“.

Editor Bild-Dokument (Ausschnitt Bild-Property)

2 Quellbild bearbeiten

Im Editorpanel „Bildbearbeitung“ (vgl. Abbildung "Quellbild bearbeiten") wird im oberen Bereich auf der rechten Seite wie bisher die Bildvorschau mit dem Quellbild und den Bildverwendungen dargestellt. Auf der linken Seite der oberen Hälfte befinden sich die Bearbeitungsoptionen, während im unteren Bereich der gewählte Bildausschnitt in den zugehörigen Skalierungsstufen dargestellt wird. Im Editorpanel „Bildbearbeitung“ (vgl. Abbildung "Quellbild bearbeiten") werden dem Redakteur zwei wesentlichen Aspekte angeboten:

• Zum einen hat der Redakteur im oberen Bereich des Panels die Möglichkeit,

  • die Bild-Skalierung (Schieberegler)
  • die Position des Fokuspunkts (Klick an die Bildposition)
• Zum anderen kann der Redakteur im rechten Bereich des Panels die Auswirkungen seiner Bearbeitungsschritte auf die Bildverwendungen (im vorliegenden Beispiel: Formate „Landscape [4:1]“, „Banner [8:5]“ oder „Portrait [1:1]“) unmittelbar einsehen und kontrollieren.

Durch einen Klick auf den „Text bearbeiten“-Button in der rechten, oberen Ecke des Panels wird die Bildbearbeitung beendet und zur Standardansicht zurückgekehrt. Durch Klick auf den Button Übersicht gelangt man zur Bild-Übersicht (siehe Abschnitt "Bildübersicht").

Quellbild bearbeiten

2.1 Bearbeitungsoptionen

In Abbildung "Quellbild bearbeiten" wird im oberen Bereich das Originalbild auf der linken Seite und die Optionen zur Bearbeitung des Bildfokus auf der rechten Seite angeboten. Hier stehen folgende Optionen zur Verfügung:

Skalierung	Mit der Skalierung kann das Bild vergrößert bzw. verkleinert werden. Dazu steht dem Redakteur ein Slider zu stufenlosen Definition sowie ein Eingabefeld zu direkten Angabe des Skalierungswertes zu Verfügung. Die Skalierung beeinflusst den Inhalt der jeweiligen Bildausschnitte einer Bildverwendung. Durch eine Verkleinerung des Beispielbildes konnten bspw. alle Quadrate im Bildausschnitt berücksichtigen werden.
Fokuspunkt	Die Position des Fokuspunktes wird durch einen roten Doppelkreis im Originalbild dargestellt (vgl. Abbildung "Quellbild bearbeiten"). Der Redakteur kann den Punkt mit der Maus im Bild positionieren Mit dem Fokuspunkt wird im Bild die Stelle markiert, die zur automatischen Auswahl der Bildausschnitte in den jeweiligen Bildverwendungen genutzt wird. Falls der Fokuspunkt und die Ausrichtung des Bildausschnitts so gewählt wurden, dass ein Bildausschnitt nicht mehr vollständig innerhalb des Originalbilds liegt, wird der Bildausschnitt automatisch auf die vorgegebenen Größenangaben optimiert. Sollte der automatische Korrekturalgorithmus keine Lösung finden (etwa weil die Skalierung des Originalbildes zu klein gewählt wurde), wird die Größe des Bildausschnitts entsprechend angepasst.
Bild Upload	Das Hochladen eines neuen Bildes erfolgt mit Hilfe des „Upload“ Buttons nach dem bisher bekannten Bearbeitungsablauf. Durch das Einfügen eines neuen Bildes werden alle ggf. vorhandene manuelle Bearbeitungsschritte am Originalbild verworfen und auf die vordefinierten Defaultwerte zurückgesetzt.
Bild Löschen	Ein vorhandenes Originalbild kann durch Klick auf den „Delete“ Button wieder gelöscht werden. Durch das Löschen des Originalbildes werden auch alle ggf. vorhandenen manuellen Bearbeitungsschritte am Originalbild verworfen.

Alle Änderungen an den Bearbeitungsoptionen führen – falls zulässig (d.h. der Bildausschnitt einer Bildverwendung wurde für dieses Bild bisher nicht manuell ausgewählt) – unmittelbar zu einer Neuberechnung des Bildausschnitts der jeweiligen Bildverwendungen.

2.2 Bildvorschau und -kontrolle

Zu aktuellen Bildverwendung werden die vorgegebenen Skalierungsstufen im unteren Editorbereich angezeigt (vgl. Abbildung "Quellbild bearbeiten" , „Skalierungsstufen des Quellbildes“). Auf Wunsch kann die Ansicht Skalierungsstufe durch Klick auf den „-“ Button auch ausgeblendet werden.

Im linken Bereich des Editors werden die vorhandenen Bildverwendungen (im vorliegenden Beispiel: Formate „Landscape [4:1]“, „Banner [8:5]“ oder „Portrait [1:1]“) dargestellt, damit der Redakteur die Auswirkungen seiner Änderungen unmittelbar einsehen und kontrollieren kann.

Die Skalierungsstufen der Bildverwendungen,

• deren Bildausschnitte ausschließlich auf der Basis der vorgegebenen, automatischen Ableitungsregeln bzw. der geänderten Bearbeitungsoptionen (siehe Abschnitt "Bearbeitungsoptionen") berechnet wurden, werden ohne zusätzliche Kennzeichnungen angezeigt. In Abbildung "Quellbild bearbeiten" wären dies bspw. die Skalierungsstufe „Landscape [4:1]“.
• deren Bildausschnitte durch manuelle Anpassungen festgelegt wurden (siehe Abschnitt "Verwendung bearbeiten"), werden in der Vorschau der Skalierungsstufen durch einen „*“ gesondert gekennzeichnet.

Ausgehend von dieser Ansicht gelangt der Redakteur über das Anklicken einer Bildverwendung unmittelbar zur Bearbeitung der Bildverwendung, d.h. nach dem Klick auf eine Bildverwendung öffnet sich die im Folgenden dargestellte Ansicht „Verwendung bearbeiten“.

3 Verwendung bearbeiten

Um eine Bildverwendung zu bearbeiten, muss der Redakteur im Editorpanel „Bildbearbeitung“ (vgl. Abbildung "Quellbild bearbeiten") entweder die entsprechende Bildverwendung im Pull-Down Menü auswählen oder auf das entsprechende Format in der Bildvorschau im rechten Bereich des Editorpanels klicken. Die Bearbeitung des Quellbildes kann analog ausgewählt werden.

Bei der Bearbeitung der Bildausschnitte einer Bildverwendung wird zwischen zwei unterschiedlichen Bearbeitungsoptionen unterschieden:

• vorgegebene Ausschnittgröße: In diesem Fall ist die Größe des Bildausschnitts durch die Layout- bzw. Designvorgaben bereits vordefiniert und kann daher vom Redakteur nicht mehr verändert werden.
• Individuelle Ausschnittgröße: In diesem Fall wird die Größe des Bildausschnitts durch die Layout- bzw. Designvorgaben nur empfohlen und kann vom Redakteur angepasst werden.

Welche Bearbeitungsoptionen bei einer Bildverwendung zum Einsatz kommt, wird auf Basis der Layout- und Designvorgaben bei der Editorspezifikation festgelegt. Im folgenden Abschnitt werden zunächst die Bearbeitungsoptionen für eine vorgegebene Ausschnittgröße spezifiziert. Im Anschluss werden die ergänzenden Bearbeitungsoptionen für individuelle Ausschnittgrößen genauer ergänzt.

3.1 Vorgegebene Ausschnittgröße

In Abbildung "Verwendung bearbeiten (vorgegebene Ausschnittgröße)" wird das Editorpanel zur Bearbeitung einer Bildverwendung mit einer vorgegebenen Ausschnittgröße am Beispiel der Bildverwendung „Portrait [1:1]*“ dargestellt.

In Abbildung "Verwendung bearbeiten (vorgegebene Ausschnittgröße)" wird im oberen Bereich auf der rechten Seite wie bisher die Bildvorschau mit dem Quellbild und den Bildverwendungen dargestellt. Auf der linken Seite der oberen Hälfte befinden sich die Bearbeitungsoptionen, während im unteren Bereich der gewählte Bildausschnitt in den zugehörigen Skalierungsstufen dargestellt wird.

Im oberen Bereich kann der im Originalbild dargestellte Bildausschnitt mit Hilfe der Maus durch den Redakteur innerhalb des Originalbilds positioniert werden. Der Fokuspunkt dient dabei lediglich zur Orientierung und hat keinen Einfluss die Positionierung des Bildausschnitts durch den Redakteur.

Zusätzlich kann der Redakteur die Bildskalierung anpassen. Die Skalierung verhält sich dabei so, wie die bereits in Abschnitt "Bearbeitungsoptionen" beschriebene Skalierungsfunktion.

Verwendung bearbeiten (vorgegebene Ausschnittgröße)

Falls der Redakteur Änderungen an den voreingestellten Bearbeitungsoptionen vornimmt, wird die bearbeitete Bildverwendung von der automatischen Berechnung des Bildausschnitts ausgeschlossen. Links neben dem Schieberegler befinden sich zwei Buttons:

• Mit Klick auf den Upload-Button kann der Redakteur ein Alternativbild hochladen, das für nur diese Bildverwendung eingesetzt wird.
• Mit Klick auf den Undo-Button werden alle durch den Redakteur eingegebenen Änderungen zurückgesetzt (inkl. Löschen des Alternativbildes) und der Bildausschnitt der Verwendungen wird wieder mit den vordefinierten Standardwerten automatisch berechnet.

Im unteren Bereich des Panels werden Bildvorschau und -kontrolle der Bildausschnitt in den unterschiedlichen Skalierungsstufen dargestellt (vgl. auch Abschnitt "Bildvorschau und Kontrolle").

3.2 Individuelle Ausschnittgröße

Im Wesentlichen entsprechen die Bearbeitungsoptionen den im vorausgegangenen Abschnitt "Vorgegebene Ausschnittsgröße" dargestellten Optionen. Zusätzlich zu diesen Optionen kann der Redakteur die Größe des Bildausschnitts mit der Maus anpassen.

4 Bildübersicht

Falls ein Bild-Dokument nicht ausgecheckt ist, stehen dem Redakteur die in Abbildung "Editor Bild-Dokument (Ausschnitt Bild-Property)" dargestellt Bildbearbeitungsoptionen nicht zur Verfügung. Mit Hilfe des Pull-Down Menüs in der rechten oberen Ecke kann der Redakteur sich die Bildausschnitte in den einzelnen Bildverwendungen samt Skalierungsstufen in der Bildübersicht darstellen lassen, wenn er hier den Menüeintrag „Bildübersicht“ auswählt. (vgl. Abbildung "Bildübersicht: Verwendungen und Skalierungsstufen").

Im oberen Bereich des Übersichts-Panels wird das Originalbild dargestellt. Im unteren Bereich des Panels kann der Redakteur die Bildverwendungen (Formate „Quellbild“, „Landscape [4:1]“, „Banner [8:5]“ oder „Portrait [1:1]“) einsehen. Zu jeder Bildverwendung werden die vorgegebenen Skalierungsstufen angezeigt. Auf Wunsch kann die Ansicht einer Skalierungsstufe auch ausgeblendet werden.

Bildübersicht: Verwendungen und Skalierungsstufen