piezas-graficas

Werbegrafiken

Diese Skill deckt den gesamten Zyklus einer Kampagnengrafik ab: das Lesen des Agenturmaterials, das Extrahieren der eigentlichen Ressourcen (Fotos, Logos, Schriften, Texte), das Zusammenstellen jedes Formats, den Export und die Auslieferung in einer HTML-Review-Galerie, in der die Person alle Stücke gemeinsam sieht und Feedback geben kann. Die Kundenkorrekturen kommen in Runden, daher muss alles schnell aus einer editierbaren Quelle regeneriert werden können.

Die zentrale Regel: Immer eine HTML-Review-Galerie

Jede Lieferung, einschließlich jeder Korrekturrunde, endet mit einem index.html, das alle exportierten Stücke anzeigt und zusammen mit dem Ordner export/ an die Person gesendet (oder im Finder geöffnet) wird. So können Formate auf einen Blick verglichen, Fehler erkannt und mit konkreten Screenshots reagiert werden – so kommt das echte Feedback („Hier überschneidet sich der Text“, „Entferne diesen Vorteil im 160×600“).

Die Galerie muss:

• nach Familie gruppieren (Homepage / Display / Post / Story…) und jedes Stück in Originalgröße oder verzerrungsfrei skaliert anzeigen;
• unter jedem Stück die Maße, den Dateinamen, die JPG-Größe sowie Links zum PNG und zur @2x-Version angeben;
• bei Formaten mit Sicherheitszone (Stories, Karussell-Hintergründe) ein Kontrollkästchen zum Einblenden der Sicherheitszone und der reservierten Bereiche haben;
• sowohl im hellen als auch im dunklen Modus funktionieren und per Doppelklick geöffnet werden können (relative Pfade zu export/).

Verwende scripts/gallery.py; generiere die Galerie jedes Mal neu, wenn sich die Stücke ändern.

Workflow

1. Projektordner. Ein Ordner pro Marke oder Kampagne (<marke>-<kampagne>/) mit src/ (editierbare Quelle, Assets und Skripte), export/<familie>/ und index.html. Mische keine Marken: Wenn zwei Marken gleichzeitig eintreffen, kommt jede in ihren eigenen Ordner (und, wenn vom Benutzer gewünscht, in parallelen Sitzungen).
2. Material lesen. Siehe references/extraktion.md:
   • Öffentliche Google Slides: /export/pptx und /export/pdf herunterladen, die Folien rendern, um die Key Visuals zu sehen, und aus den .rels die Links zu Editierbaren extrahieren („EDITABLE“, „DESCARGAR“, „IMÁGENES“).
   • Illustrator-PDF: Fotos mit ihrer Maske (smask), Logos als Vektoren (get_drawings → SVG), eingebettete Schriften und den tatsächlichen rechtlichen Text.
   • PSD: Artboards und Ebenen mit psd-tools; jedes Element wird separat aus seiner Ebene zusammengesetzt.
3. Inventar vor dem Zusammenstellen. Liste für die Person auf, welches Modell, Preis, Vorteile, rechtlicher Hinweis und Logos jedes Stück enthält, und woher jedes Datum stammt. Wenn zwei Folien sich widersprechen (zwei Preise für dasselbe Modell), verwende die aktuellste Editierbare und weise darauf hin; wähle nicht stillschweigend aus.
4. Zusammenstellen. Verwende die am besten geeignete Quelle:
   • HTML + CSS (assets/banners-template.html): ein div.ad[data-name] pro Stück, alles absolut positioniert, mit den extrahierten Schriften und SVGs. Das ist am schnellsten für Korrekturrunden.
   • Python (PIL) schichtweise, wenn die Quelle ein PSD ist und bereits gerasterte Elemente neu angeordnet werden müssen.
5. Exportieren. scripts/export_pieces.mjs (Playwright) erfasst jedes .ad mit @1x und @2x als PNG; scripts/to_jpg.py erzeugt die JPGs mit voller Farbpalette und dem nach Familie begrenzten Gewicht. Siehe references/format.md.
6. Eins nach dem anderen prüfen vor der Auslieferung. Sieh dir jedes exportierte Stück an (und vergrößerte kritische Bereiche) gemäß references/checklist-revision.md. Korrigiere und iteriere; liefere nichts aus, was du nicht gesehen hast.
7. Ausliefern. Galerie + geöffneter Ordner im Finder + eine kurze Zusammenfassung: was gemacht wurde, welche Entscheidungen getroffen wurden und was noch zu bestätigen ist.

Kompositionsprinzipien

• Explizite Hierarchie. Frage oder leite die Prioritätsreihenfolge ab und halte sie in allen Formaten ein. Eine übliche Reihenfolge in Werbeaktionen: 1) das Angebot (Preis oder Prozentsatz), 2) das Logo des Händlers oder der Marke, 3) der Rest auf gleicher Ebene (Kampagnenlogo, Vorteile, Produkt).
• Platz nutzen. Jedes Format hat seine eigene Komposition; es reicht nicht, es nur zu skalieren. Wenn das Produkt breit ist, gib ihm die volle Breite und platziere die Informationen in einer Reihe; wenn es hoch ist, platziere es in einer Spalte neben dem Text. Überprüfe, ob keine großen Lücken oder winzigen Elemente entstehen.
• Produkt nicht neu generieren. Verwende das echte Foto des Fahrzeugs oder Produkts, ohne Farbe, Reifen oder Design zu ändern. Fehlt eine Szene für ein neues Format, erweitere Himmel, Meer oder Boden auf natürliche Weise (siehe references/extraktion.md, „Hintergründe erweitern“).
• Kennzeichen und Texte innerhalb des Fotos. Wenn der Text auf einem Schild geändert werden muss, zeichne es perspektivisch über die tatsächliche Kontur neu, niemals mit einem flachen Rechteck darüber.
• Kontrast. Weißer Text über Fotografie: sanfte Verläufe, die mindestens 4.5:1 im gesamten Textblock erreichen, und messe dies.
• Zeilenabstand. Messe den Zeilenabstand im Editierbaren und repliziere ihn; kondensierte Schriften mit sehr engem Zeilenabstand führen dazu, dass sich die Zeilen berühren.

Korrekturrunden

Die Korrekturen kommen als Screenshots oder E-Mails des Kunden. Für jede:

• wende die Änderung an der Quelle an (bearbeite nicht das PNG) und exportiere alle betroffenen Stücke neu;
• wenn die Anforderung „alle Stücke der Größe X“ lautet, suche nach dieser Größe in allen Marken des Projekts und teile mit, welche du bearbeitet hast und welche nicht zutrafen;
• überprüfe die bearbeiteten Stücke visuell erneut (eine Textänderung bricht oft einen Zeilenumbruch in schmalen Formaten);
• aktualisiere die Galerie.

Fehler, die bereits aufgetreten sind und vermieden werden sollten: unvollständiger Modellname (das Modell ohne seine Version, wenn das Key Visual sie enthält), Preis einer anderen Version, Button, wo der Kunde ihn nicht möchte (Homepage ohne Button, Display mit Button), Bankvorteile in Formaten, in denen sie nicht hingehören, einzelne Wörter am Ende eines Absatzes („VOLL“ allein, „90%“ allein).

Dateien dieser Skill

• references/extraktion.md: wie man Fotos, Vektoren, Schriften und Texte aus PDF, PSD und Slides extrahiert; Hintergründe erweitert; Schilder bearbeitet.
• references/format.md: übliche Maße, Sicherheitszonen, Gewichtsgrenzen und scharfer Export.
• references/checklist-revision.md: worauf man bei jedem Stück vor der Auslieferung achten muss.
• scripts/export_pieces.mjs: exportiert jedes .ad aus dem HTML als PNG @1x/@2x.
• scripts/to_jpg.py: PNG → JPG sRGB 4:4:4 mit Gewichtsgrenze.
• scripts/gallery.py: generiert die Review-Galerie index.html.
• scripts/pdf_assets.py: extrahiert Bilder mit Maske, Schriften und Vektoren (SVG) aus einem Illustrator-PDF.
• scripts/psd_elements.py: listet Artboards und Ebenen eines PSD auf und extrahiert jede Ebenengruppe als PNG mit Transparenz.
• assets/banners-template.html: Vorlage für die Layout-Vorlage nach Stücken.