CommunityImagegithub.com

compositeur-de-bannière

Construisez des bannières larges et des images d'en-tête (subreddit, Discord, chaîne YouTube, forum, wiki, site de fans, page d'événement ou d'équipe) en composant des photos réelles, des extraits, des affiches et des logos en une seule bande avec des coutures douces, les logos et les titres étant conservés exactement tels que publiés.

Qu'est-ce que compositeur-de-bannière ?

Ce skill permet de créer des bannières et images d'en-tête pour diverses plateformes en assemblant des images réelles (photos, affiches, logos) côte à côte, sans redessiner ni générer de contenu. Il est particulièrement utile pour les communautés qui exigent que les visages des personnes réelles et les logos officiels restent intacts. Contrairement aux générateurs d'images par IA, ce skill évite les problèmes de ressemblance et de fidélité des marques. Il supporte toutes les plateformes (Reddit, Discord, YouTube, etc.) et fonctionne en écrivant un fichier de spécification JSON, puis en exécutant un script Python pour composer la bannière. Le flux de travail inclut la définition du brief, la recherche d'actifs officiels (logos, images), le détourage des logos de manière fidèle, la mise en page avec des considérations de placement (éviter les visages dans les zones de fondu, garder les logos lisibles), la construction et l'inspection visuelle, puis la sauvegarde avec un rapport de sources. Il gère également plusieurs tailles de bannières (desktop/mobile) et des bandes très fines.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/sivarajd/banner-compositor/tree/HEAD

Installed? Explore more Image skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Compositeur de bannière

Construisez une bannière en disposant des images réelles côte à côte, en fusionnant les coutures et en superposant les logos. Rien n'est redessiné : les visages restent tels que photographiés et les titres tels que conçus.

Pourquoi composer et non générer

On demande souvent une invite pour une IA d'image pour ce travail. La génération échoue exactement sur les deux choses qu'une bannière communautaire doit réussir :

  • Logos textuels. Un générateur réécrit un logo. Le résultat est proche mais faux, et les fans le remarquent immédiatement.
  • Personnes réelles. Un générateur redessine les visages. Le résultat est un sosie, que de nombreuses communautés interdisent comme contenu retouché et qui déforme la personne.

Donc, lorsqu'on vous demande une invite de génération, dites cela en deux ou trois phrases et proposez la composition. Si l'utilisateur souhaite toujours impliquer un générateur, limitez-le à un arrière-plan sans texte ni personnes, et placez les actifs réels par-dessus avec ce skill.

Flux de travail

1. Définir le brief

Déterminez ces éléments à partir de la demande et des fichiers avant de poser des questions :

  • Taille. Les plateformes modifient les tailles de bannière, utilisez donc les preuves les plus récentes dont vous disposez, dans cet ordre : la taille indiquée par l'utilisateur depuis la boîte de dialogue de téléchargement de la plateforme ; la page d'aide actuelle de la plateforme ; references/platform-sizes.md (datée, avec sources) ; la taille en pixels de la bannière existante, qui peut être antérieure à un changement. Dites à l'utilisateur quelle taille vous avez utilisée et d'où elle vient. Certaines plateformes acceptent des bannières distinctes pour desktop et mobile : voir "Plusieurs tailles" ci-dessous.
  • Sujets et ordre. Ce qui entre, de gauche à droite, et si un sujet doit avoir plus d'espace.
  • Actifs disponibles. Listez le dossier. Ouvrez et regardez chaque image vous-même. Un nom de fichier ou une légende ne vous dit pas ce qu'une image montre, sa netteté ou quel texte est intégré.
  • Règles de la communauté. Règles de la communauté sur les images modifiées, et tout ce que l'utilisateur a dit sur le ton. Lisez-les si elles sont dans le projet.

Ne demandez que ce que vous ne pouvez pas déterminer de cette manière, comme une liste de sujets manquante.

2. Combler les lacunes

Pour chaque sujet, vous avez besoin d'un logo ou d'un titre et d'une ou plusieurs images. Si quelque chose manque, cherchez du matériel officiel : les propres publications et chaînes du détenteur des droits, les dossiers de presse et les médias qui reproduisent l'œuvre d'art officielle. references/asset-sourcing.md contient les tactiques de recherche, un bref pour déléguer la recherche à des sous-agents et le format du fichier de sources. Déléguez lorsque l'utilisateur demande des sous-agents ou que votre environnement le favorise ; sinon, cherchez en ligne.

Trois règles s'appliquent, quelle que soit la méthode de recherche :

  • Officiel uniquement, et dites comment vous le savez. Les montages de fans et les rendus IA sont omniprésents. Enregistrez d'où vient chaque fichier. Lorsque "officiel" repose sur une légende et non sur le message original, mentionnez-le dans le rapport final.
  • N'inventez jamais un actif. Si aucun logo n'existe, la bannière s'en passe ou utilise le recadrage d'affiche décrit ci-dessous. Ne concevez pas de substitut.
  • Tenez l'utilisateur à l'écart des requêtes sortantes. Pas de noms, de noms de projet ou d'adresses e-mail dans les URL, les en-têtes ou les requêtes de recherche.

Enregistrez les téléchargements dans un dossier de travail et visualisez chacun avant de lui faire confiance. scripts/contact_sheet.py place plusieurs candidats sur une seule feuille, ce qui est plus rapide que de les ouvrir un par un.

3. Obtenir les logos, de la manière la plus fidèle d'abord

  1. Un fichier logo transparent fourni par l'utilisateur. Utilisez-le. Si ses bords présentent une frange colorée sur votre fond, exécutez cutout_logo.py --key alpha --defringe 2.
  2. L'affiche avec son titre laissé en place. Recadrez l'affiche pour que le titre soit placé là où le designer l'a mis. Rien n'est découpé, donc le style est exact. C'est la meilleure voie lorsque la seule source est petite.
  3. Un découpage à partir d'une illustration clé. Utilisez scripts/cutout_logo.py pour détourer le logo de son fond. Choisissez la clé en fonction de ce qui sépare le logo du fond : une différence de canal comme r-b pour des lettres chaudes sur un fond froid, luma pour du clair sur du foncé, inv-luma pour du foncé sur du clair, bg pour une couleur de fond unie. Passez toujours --test-sheet et regardez le résultat sur des fonds clairs et foncés.

Un découpage est la voie la moins fidèle. Les parties sombres ou ombragées d'un logo disparaissent lorsqu'elles sont proches de la couleur de fond. Placez le logo sur un fond similaire à celui d'origine, ou donnez-lui un backing dans la spécification de mise en page (une silhouette remplie plus une ombre douce), et dites à l'utilisateur que le logo est un découpage.

Ne réécrivez jamais, ne restylez jamais, ne recolorez jamais et ne "nettoyez" jamais un logo textuel en le redessinant.

4. Mettre en page dans un fichier de spécification

Écrivez la mise en page au format JSON et construisez-la avec scripts/compose_banner.py. La spécification est ce qu'il faut conserver : lorsque de meilleures images apparaîtront plus tard, changez un chemin et reconstruisez. references/spec-format.md documente tous les champs, et assets/example-spec.json est un point de départ.

Le modèle est une rangée de tuiles (photos, chacune redimensionnée et recadrée pour un emplacement, chacune fondant dans celle de gauche) puis des superpositions (logos, dessinés en dernier pour que les fondus ne puissent pas les manger). Les décisions de mise en page que le script ne peut pas prendre pour vous :

  • Gardez les visages hors du fondu. Les feather pixels de gauche de chaque tuile après la première sont semi-transparents. Un visage à cet endroit se transforme en fantôme sur son voisin. Déplacez le recadrage ou élargissez l'emplacement.
  • Placez un logo sur une zone calme de la tuile de son propre sujet : fond flou, ciel, mur sombre. Ne le laissez pas empiéter sur la tuile du sujet suivant.
  • Équilibrez les sujets. Des largeurs de logo similaires et des tailles de visage similaires forment une seule bannière. Si un logo doit être beaucoup plus petit, dites à l'utilisateur pourquoi.
  • Gardez les faits modifiables à l'écart. Recadrez les dates de sortie, les prix et les lignes "à venir" intégrées aux affiches, sauf si l'utilisateur les souhaite. Le texte de la bannière ne peut pas être modifié ultérieurement.
  • Redimensionnez et recadrez uniquement. Pas de retouche, de modification de visage ou de suppression de filigrane ou de crédit. Si le seul exemplaire porte un filigrane tiers, trouvez-en un autre ou laissez-le de côté.
  • Tenez compte du mobilier de la plateforme. De nombreux sites superposent un avatar ou un titre dans un coin et recadrent les côtés sur les téléphones. Gardez les visages et les logos hors de ces zones lorsque vous les connaissez.

Plusieurs tailles. Lorsqu'une plateforme demande plusieurs bannières (desktop et mobile, ou deux sites), écrivez une spécification par taille et réutilisez les actifs. Ne redimensionnez pas une bannière terminée à une forme différente : les recadrages et les positions de logo qui fonctionnent à un rapport hauteur/largeur coupent les visages à un autre. Lorsque les tailles ne diffèrent que de quelques pixels, copiez la spécification et ajustez la dernière tuile.

Bandos très fines. À environ 8:1 (par exemple 1072x128), un visage qui remplit la hauteur ne fait qu'environ 100 px de large, il y a donc de la place pour plus de sujets mais moins de chacun. Recadrez serré sur les visages, attendez-vous à utiliser moins d'images par sujet que dans une bannière plus haute, et vérifiez que chaque logo est toujours lisible à cette hauteur. Un logo textuel à deux lignes empilées ou un slogan peut être trop petit pour être lu ; dites-le et laissez l'utilisateur décider quoi faire.

5. Construire, regarder, corriger

python scripts/compose_banner.py layout.json --preview preview/

Le script s'arrête sur les problèmes qu'il peut prouver : fichier manquant, recadrage qui laisserait une bande vide, écart entre les tuiles, fondu plus large que le chevauchement. Il émet des avertissements pour les problèmes plus légers, comme un fort agrandissement.

Ensuite, regardez le résultat, et regardez-le en taille réelle. Une bannière large réduite pour tenir dans un visionneur cache les coutures fantômes et les bords de logo cassés. --preview écrit des segments en pleine résolution pour cela, ainsi que guides.png avec les coutures et les boîtes de superposition dessinées. Vérifiez chaque segment pour :

  • les visages coupés par une couture ou fantômes dans un voisin
  • les bords de logo : trous, halos, franges, tout ce qui est illisible à cette taille
  • les bandes vides, les personnes étirées, les bords de tuile visibles
  • le texte que vous n'aviez pas l'intention d'inclure

Corrigez la spécification et reconstruisez. Corrigez tout ce qu'un regard montre avant de regarder à nouveau.

6. Sauvegarder et rapporter

  • N'écrasez jamais la bannière existante de l'utilisateur. Écrivez un nouveau nom de fichier. Le script refuse d'écraser sauf si --force est donné, ce qui est réservé à vos propres brouillons.
  • Conservez la spécification, les actifs qu'elle utilise et un fichier SOURCES.md ensemble dans un dossier qui survivra à la session. Un dossier temporaire perd les téléchargements, et la bannière ne peut alors pas être reconstruite.
  • Ne téléchargez ni ne publiez. L'utilisateur le fait.

Rapportez dans cet ordre : où se trouve le fichier et sa taille ; ce qu'il contient, de gauche à droite ; les points faibles (sources douteuses, logos découpés, slogans illisibles, tuiles qui semblent collées) ; et à quel point vous êtes sûr que chaque actif trouvé est officiel. Dites clairement ce que vous n'avez pas vérifié, par exemple comment le site recadre la bannière sur les téléphones.

Scripts

ScriptUtilisation
scripts/compose_banner.pyConstruit la bannière à partir d'une spécification JSON ; --preview DIR écrit des segments d'inspection et des guides.
scripts/cutout_logo.pyDétoure un logo à partir d'une illustration clé, ou défrange un logo transparent existant ; --test-sheet l'affiche sur trois fonds.
scripts/contact_sheet.pyDispose les images candidates sur une seule feuille étiquetée pour une vérification visuelle rapide.

Exécutez n'importe lequel d'entre eux avec --help pour les options.

Droits et usage loyal

Les photos, affiches et logos appartiennent à leurs propriétaires. Une bannière de fan ou de communauté qui montre des œuvres officielles inchangées est une pratique courante, mais c'est à l'utilisateur de décider si son utilisation est acceptable, alors mentionnez-le une fois lorsque vous recherchez des actifs sur le web. Ne construisez pas une bannière qui ferait passer la page pour le compte officiel du détenteur des droits.

Skills associés