igalis-commits/art-directing-site-imagery

Art Direction von Website-Bildern

Überblick

Website-Bilder funktionieren als Set, nicht als einzelne Bilder. Drei gute Fotos, die nichts gemeinsam haben, wirken schlechter als drei gewöhnliche, die ein Licht, eine Palette und ein Motiv teilen. Und ein schönes Bild, das den Satz daneben nicht beweist, ist Dekoration.

Kernprinzip: Entscheide die Konstanten für das gesamte Set, bevor ein einziges Bild generiert wird, und lass jedes Bild die Behauptung beweisen, neben der es steht.

Engine und Art Director

Bilder auf einer Seite stammen von einer Engine, die von einem Art Director gesteuert wird – niemals aus Stockbibliotheken und niemals aus Ausschnitten älterer Seiten.

In unserem Stack ist die Engine Botika, unsere eigene On-Model-Rendering-Engine, und der Art Director ist ein Skill, der darüber liegt: Er enthält die Konstanten des Briefings, wählt das Model, die Pose, die Outfit-Vervollständigung und den Hintergrund für jedes Bild, führt den Render-Batch durch und prüft die Ergebnisse per QA gegen den erforderlichen Stil. Dieser Skill steuert eine private Pipeline und ist nicht Teil dieses Repositorys. Der Vertrag, den er erfüllt, ist das, was dieser Skill von jeder Engine benötigt:

Eingabe	Ausgabe
Die Konstanten des Briefings (Palette, Licht, Umgebung, Ausschnitt, Kontinuität, Variation)	Ein Set in nativer Auflösung, benannt nach seinem Slot
Ein Quell-Asset pro Kleidungsstück oder Motiv	Source-vs-Render-Sheets zur Wiedergabetreue
Die Slot-Liste: der Claim jedes Abschnitts und das Seitenverhältnis seiner Box	Ein QA-Log: was geprüft wurde, was neu gerendert wurde

Wenn Ihre Engine die Konstanten nicht als Eingabe akzeptieren kann, ist der Art-Director-Schritt eine Person mit einer Checkliste, und die Checkliste ist dieser Skill.

Budgetregel

Rendering kostet Credits und Zeit. Ein Render pro separatem Job. Verwende ein vorhandenes Asset wieder, bevor du ein neues erstellst. Frage eine Person, bevor ein Batch etwa sechs überschreitet. Keine spekulativen Batches „für den Fall, dass wir sie brauchen“. Derselbe Render dient oft zwei Abschnitten: Verwende ihn wieder.

Lege zuerst die Konstanten fest

Schreibe diese auf. Jedes Bild wird dann daran gemessen, und jedes Bild, das sie verfehlt, wird neu generiert, nicht akzeptiert.

Konstante	Entscheidung
Palette	drei Neutrale, höchstens ein Akzent, als Hex
Licht	eine Sprache: weiches Tageslicht, hartes gerichtetes Licht oder bedeckt
Umgebung	Studio, realer Ort oder ein deklariertes Verhältnis von beidem
Ausschnitt	wähle zwei von Ganzkörper / Mitte / Nah, niemals drei
Kontinuität	die eine Sache, die im gesamten Set gleich bleibt
Variation	die eine Sache, die sich im gesamten Set ändert

Das stärkste Kontinuitätsmittel für ein Produktset ist ein Kleidungsstück auf verschiedenen Models und Szenen. Es zeigt die Bandbreite und beweist gleichzeitig Konsistenz, was normalerweise genau der Anspruch der Seite ist. Die schwache Version ist ein Model in verschiedenen Kleidungsstücken: Sie beweist nichts und sieht aus wie ein Lookbook.

Bilder beweisen den Text

Bevor du mit dem Layout beginnst, schreibe für jeden Abschnitt den einen Claim, den sein Text macht, und das Bild, das ihn beweist. Ein Gesichtsausschnitt unter „Szene“ oder ein schlichtes Kleid unter „Drucke und Logos“ schmückt die Karte, anstatt sie zu demonstrieren.

Abschnitts-Claim	Das Bild ist
Drucke bleiben ausgerichtet	Streifen, die entlang einer Naht ausgerichtet sind
Logos bleiben platziert	Ein Emblem auf der Brust, an derselben Stelle bei jedem Model
Skalierbar für einen Katalog	Viele verschiedene Produkte in einem Studio, mit einer Liste von Status
Ein Kleidungsstück, jede Szene	Dasselbe Kleidungsstück und Model an mehreren Orten, wobei sich die Steuerungselemente ändern
Inklusiv	Ein Kleidungsstück auf mehreren verschiedenen Models

Wenn ein Abschnitt einen Claim hat und kein Bild, das ihn beweist, ist das ein Render-Briefing.

Anpassen an ein vorhandenes Set

Wenn du zu bereits vorhandenen Bildern hinzufügst, leite die Konstanten aus dem Vorhandenen ab, bevor du etwas generierst. Messe, anstatt nach Augenmaß zu schätzen: Messe die Hintergrundleuchtdichte und die dominanten Farbtöne der vorhandenen Frames und notiere den Ausschnitt und die Beleuchtung jedes einzelnen.

Wenn das vorhandene Set aus vier hellen Frames und einem dunklen besteht, ist das neue Set vier helle und ein dunkles. Verhältnisse sind Teil des Looks.

Beschaffung des Motivs

• Extrahiere jedes Kleidungsstück aus dem Look-Foto mit einem Bildmodell, wobei das Look-Foto als Referenz dient. Rendere ein Produkt pro Kleidungsstück, einen Look pro Render.
• Verwende niemals ein Quellbild, das ein fremdes Wortmarken- oder Logo trägt.
• Wähle die Pose für die Geschichte. Oberkörperposen für Oberteile. Ganzkörper für Kleider, Jeans, Röcke und Hosen. Eine Hand auf der Hüfte zeigt eine Tasche und ausgerichtete Streifen.
• Hintergründe sind neutral. Transportiere Stimmung durch Casting und Styling, nicht durch einen warmen Hintergrund.

Prompting für Szenen

Beschreibe die Szene, niemals das Kleidungsstück. Das Kleidungsstück wird als Eingabe bereitgestellt; es zu beschreiben, bekämpft das Modell und verschlechtert die Wiedergabetreue.

Reihenfolge: Ort, Licht, Kamera, Pose und Stimmung, Palette.

Leere Stadtstraße in der Dämmerung neben einem langen, gewellten Stahlladen, kühles blaues Umgebungslicht mit einer warmen Natriumlampe, die von rechts streift, 35 mm Ganzkörper-Umgebungsframe, das Model steht still rechts im Bild mit einem langen leeren Stück Wand auf der linken Seite, Hände entspannt an den Seiten, schaut direkt in die Kamera, filmisch und ruhig, kühle Beton-Grau- und Creme-Palette.

Speziell für das Web:

• Bitte das Motiv außermittig und benenne die leere Seite. Ein Hero braucht Platz für Text.
• Verwende durchgehend positive Formulierungen. Die Nennung dessen, was du nicht willst, platziert es im Bild.
• Eine Szene ist ein echter, spezifischer, belebter Ort voller Dinge, die dort hingehören. Ein blasser leerer Raum mit einem Model darin wirkt wie ein Studio, das so tut, als wäre es ein Ort.
• Vorlagen überschreiben Prompts. Wenn eine Vorlage immer wieder einen Look zurückgibt, den du nicht verlangt hast, entferne sie und steuere die gesamte Szene über den Prompt.

Hero-Grids

Ein Grid mit Porträts scheitert auf drei Arten, alle in der ersten Sekunde sichtbar:

• dasselbe Foto zweimal nebeneinander
• ein Kopf, der durch die Hero-Kante abgeschnitten wird
• Änderungen, die gleiten, anstatt auszublenden

Regeln: Jedes sichtbare Foto ist einzigartig, keines ist durch die Kante des Heroes abgeschnitten, und Fotos wechseln den Platz, indem sie aus einer Zelle ausblenden und in eine andere einblenden. Teste es, indem du acht Sekunden lang Frames sampelst und bei jeder doppelten Quelle, Kachel außerhalb des Hero-Rechtecks, Kachelüberlappung oder Kachel unter dem Text als fehlgeschlagen markierst.

QA in nativer Auflösung

Thumbnails und Kontaktbögen verbergen genau die Fehler, die auf einem 27-Zoll-Monitor auffallen. Lokalisiere Hände und Füße auf einem Lokalisierungsblatt, schneide diese Regionen dann aus der Datei in voller Größe aus und betrachte sie mit 2x bis 4x:

• Füße und Schuhe: Vergleiche die beiden als Paar. Sohlenstärke, Leistenform, Riemen, Absatz.
• Hände: Zähle die Finger. Wenn du die Anzahl nicht erkennen kannst, ist das ein Fehler, kein Bestehen.
• Gelenkverbindungen: Ein Bein, das Saum mit Schuh verbindet, Schultern, Ellbogen, Knie
• Kontaktschatten: unter dem Fuß, nicht versetzt
• Kleidungsstück-Wiedergabetreue: Taschen, Nähte, Kragen, Saumlänge und Waschung im Vergleich zur Quelle
• Text: jegliche Beschilderung oder Aufdruck im Bild

Die günstigste Lösung ist kompositorisch. Ein Frame, der am mittleren Oberschenkel endet, beseitigt den Schuhfehler vollständig. Verwende es immer, wenn die untere Hälfte nicht der Punkt ist. Ein Prompt-Guard funktioniert auch: „Der Frame endet am mittleren Oberschenkel und nirgendwo sind Füße, Knöchel oder Schuhe sichtbar.“

Auflösung

Liefere etwa das 2-fache der größten CSS-Breite, die der Slot einnehmen wird, und serviere die 1x-Datei über srcset an 1x-Bildschirme. Prüfe das effektive Verhältnis jedes Bildes an jeder Scrollposition (benötigte Pixel geteilt durch Pixel in der Datei; über 1,0 ist unscharf). Das Hochskalieren einer kleinen Quelle fügt Pixel hinzu, keine Details. Sage das und biete ein erneutes Rendern an.

Farbflächen und Text auf Bildern

Text über einem Bild oder einer Farbfläche wird gemessen, nicht beurteilt. Weißer Text benötigt 3:1 bei großen Größen und 4,5:1 bei Fließtextgröße, gemessen an den Pixeln. Eine Vignette innerhalb der Fläche verbessert die Lesbarkeit, ohne die Farbe abzustumpfen. Mock-UI, das auf einer Farbfläche platziert wird, benötigt eine eigene Textfarbe, sonst erbt es Weiß von der Szene und verschwindet auf einer weißen Karte.

Komposition für den Slot

Generiere locker, beschneide eng. Bringe die gelieferte Seite an die CSS-Box an, damit der Browser fast nichts auswählen muss:

• Karten-Grids: ein Seitenverhältnis für jede Karte, am Wrapper gesetzt, object-fit: cover am Bild
• Heroes: innerhalb von etwa 10% des breitesten Viewport-Verhältnisses, das du unterstützt
• Overlay-Zonen: Wenn Kartentext im unteren Drittel eines Bildes sitzt, muss diese Zone ruhig sein
• Collagen, die Konsistenz beweisen: eine große Zelle plus zwei kleine, alle drei im gleichen Seitenverhältnis

Checkliste

• Konstanten vor der Generierung festgelegt
• Jeder Abschnitt hat einen Claim und ein Bild, das ihn beweist
• Jedes Bild an den Konstanten gemessen; Fehlschläge neu generiert, nicht akzeptiert
• Verhältnis von hellen zu dunklen Frames entspricht dem vorhandenen Set
• Models unterscheiden sich im Set; das Kleidungsstück oder das Licht nicht
• Hände, Füße und Kleidungsdetails in nativer Auflösung geprüft
• Keine fremden Wortmarken in irgendeiner Quelle
• Platz für Text vorhanden und auf der richtigen Seite in jedem Hero-Frame
• Geliefertes Seitenverhältnis entspricht der CSS-Box; effektives Verhältnis bei oder unter 1,0
• Text über Bildern auf Kontrast gemessen
• Vor dem erneuten Rendern wiederverwendet; jeder Batch über etwa sechs von einer Person genehmigt