josemidev/piezas-graficas

Pièces graphiques publicitaires

Cette compétence couvre le cycle complet d’une campagne de pièces : lire le matériel de l’agence, extraire les ressources réelles (photos, logos, typographies, textes), composer chaque format, exporter et livrer le tout dans une galerie HTML de révision où la personne voit toutes les pièces ensemble et répond avec ses retours. Les corrections du client arrivent par rounds, donc tout doit pouvoir être regénéré rapidement depuis une source modifiable.

La règle centrale : toujours une galerie HTML de révision

Chaque livraison, y compris chaque round de corrections, se termine par un index.html qui affiche toutes les pièces exportées, et est envoyé à la personne (ou ouvert dans le Finder) avec le dossier export/. Ainsi, on peut comparer les formats d’un coup d’œil, détecter des erreurs qui dans un fichier seul ne se voient pas, et répondre avec des captures ponctuelles, ce qui est la manière dont arrivent les vrais retours (« ici la lettre se superpose », « dans le 160×600 retire cet avantage »).

La galerie doit :

• regrouper par famille (Homepage / Display / Post / Story…) et afficher chaque pièce à sa taille réelle ou mise à l’échelle sans déformation ;
• indiquer sous chaque pièce la mesure, le nom du fichier, le poids du JPG et des liens vers le PNG et la version @2x ;
• pour les formats avec zone de sécurité (stories, fonds de carrousel), avoir une case à cocher pour superposer la zone de sécurité et les zones réservées ;
• fonctionner en mode clair et sombre, et s’ouvrir en double-cliquant (chemins relatifs vers export/).

Utilise scripts/gallery.py ; régénère la galerie à chaque modification des pièces.

Flux de travail

1. Dossier du projet. Un dossier par marque ou campagne (<marque>-<campagne>/) avec src/ (source modifiable, assets et scripts), export/<famille>/ et index.html. Ne mélange pas les marques : si deux marques arrivent en même temps, chacune va dans son dossier (et, si l’utilisateur le demande, dans des sessions parallèles).
2. Lire le matériel. Voir references/extraction.md :
   • Google Slides public : télécharger /export/pptx et /export/pdf, rendre les diapositives pour voir les key visuals et extraire des .rels les liens vers les fichiers modifiables (« EDITABLE », « TÉLÉCHARGER », « IMAGES »).
   • PDF Illustrator : photos avec leur masque (smask), logos sous forme de vecteurs (get_drawings → SVG), typographies intégrées et le texte légal réel.
   • PSD : artboards et calques avec psd-tools ; chaque élément est composé séparément à partir de son calque.
3. Inventaire avant de composer. Lister pour la personne quel modèle, prix, avantages, texte légal et logos porte chaque pièce, et d’où provient chaque donnée. Si deux diapositives se contredisent (deux prix pour le même modèle), utiliser la source modifiable la plus récente et le signaler ; ne pas choisir en silence.
4. Composer. Utiliser la source la mieux adaptée :
   • HTML + CSS (assets/banners-template.html) : un div.ad[data-name] par pièce, tout en position absolue, avec les polices et les SVG extraits. C’est le plus rapide à corriger par rounds.
   • Python (PIL) par calques lorsque la source est un PSD et qu’il faut réagencer des éléments déjà pixellisés.
5. Exporter. scripts/export_pieces.mjs (Playwright) capture chaque .ad en @1x et @2x en PNG ; scripts/to_jpg.py génère les JPG avec couleur complète et la limite de poids par famille. Voir references/formatos.md.
6. Revoir un par un avant de livrer. Regarder chaque pièce exportée (et agrandir les zones critiques), en suivant references/checklist-revision.md. Corriger et itérer ; ne pas livrer ce que l’on n’a pas vu.
7. Livrer. Galerie + dossier ouvert dans le Finder + un résumé court : ce qui a été fait, les décisions prises et ce qui reste à confirmer.

Principes de composition

• Hiérarchie explicite. Demander ou déduire l’ordre de priorité et le respecter dans tous les formats. Un ordre habituel dans les promotions : 1) l’offre (prix ou pourcentage), 2) le logo du commerce ou de la marque, 3) le reste au même niveau (logo de campagne, avantages, produit).
• Utiliser l’espace. Chaque format a sa propre composition ; il ne suffit pas de mettre à l’échelle. Si le produit est large, lui donner toute la largeur et placer l’information sur une ligne ; s’il est haut, le mettre en colonne à côté du texte. Vérifier qu’il n’y a pas de grands vides ni d’éléments trop petits.
• Ne pas regénérer le produit. Utiliser la photo réelle du véhicule ou du produit, sans changer la couleur, les pneus ni le design. Si un nouveau format manque de scène, étendre le ciel, la mer ou le sol de façon naturelle (voir references/extraction.md, « Étendre les fonds »).
• Plaques d’immatriculation et textes dans la photo. Si le texte d’une plaque doit être changé, le redessiner en perspective sur le contour réel, jamais avec un rectangle plat par-dessus.
• Contraste. Texte blanc sur photographie : dégradés doux jusqu’à atteindre au moins 4.5:1 sur tout le bloc de texte, et le mesurer.
• Interlignage. Mesurer l’interlignage dans la source modifiable et le reproduire ; les typographies condensées avec un interlignage très serré font que les lignes se touchent.

Rounds de corrections

Les corrections arrivent sous forme de captures ou d’e-mails du client. Pour chacune :

• appliquer la modification dans la source (ne pas retoucher le PNG) et réexporter toutes les pièces affectées ;
• si la demande dit « toutes les pièces de taille X », chercher cette taille dans toutes les marques du projet et signaler lesquelles ont été modifiées et lesquelles ne s’appliquaient pas ;
• revoir visuellement les pièces modifiées (un changement de texte casse souvent un saut de ligne dans les formats étroits) ;
• mettre à jour la galerie.

Erreurs déjà survenues et à éviter : nom de modèle incomplet (le modèle sans sa version, alors que le key visual l’inclut), prix d’une autre version, bouton là où le client ne le veut pas (homepage sans bouton, display avec bouton), avantages de la banque dans des formats où ils ne vont pas, mots isolés en fin de paragraphe (« PLEIN » seul, « 90 % » seul).

Fichiers de cette compétence

• references/extraction.md : comment extraire photos, vecteurs, typographies et textes de PDF, PSD et Slides ; étendre les fonds ; plaques.
• references/formatos.md : mesures courantes, zones de sécurité, limites de poids et exportation nette.
• references/checklist-revision.md : quoi vérifier sur chaque pièce avant de livrer.
• scripts/export_pieces.mjs : exporte chaque .ad du HTML en PNG @1x/@2x.
• scripts/to_jpg.py : PNG → JPG sRGB 4:4:4 avec limite de poids.
• scripts/gallery.py : génère la galerie index.html de révision.
• scripts/pdf_assets.py : extrait images avec masque, polices et vecteurs (SVG) d’un PDF Illustrator.
• scripts/psd_elements.py : liste artboards et calques d’un PSD et extrait chaque groupe de calques en PNG avec transparence.
• assets/banners-template.html : template de maquettage par pièces.