banner-compositor

Compositor de banners

Construa um banner organizando imagens reais lado a lado, mesclando as emendas e sobrepondo logotipos. Nada é redesenhado: rostos permanecem como nas fotos e títulos permanecem como foram criados.

Por que compor e não gerar

As pessoas costumam pedir um prompt de IA para imagem para este trabalho. A geração falha exatamente nas duas coisas que um banner comunitário precisa acertar:

• Marcas de título. Um gerador reescreve um logotipo. O resultado é próximo, mas errado, e os fãs percebem na hora.
• Pessoas reais. Um gerador redesenha rostos. O resultado é uma aparência semelhante, que muitas comunidades banem como conteúdo adulterado e que deturpa a pessoa.

Portanto, quando for solicitado um prompt de geração, diga isso em duas ou três frases e ofereça a composição. Se o usuário ainda quiser envolver um gerador, limite-o a uma placa de fundo sem texto e sem pessoas, e coloque os assets reais por cima com este skill.

Fluxo de trabalho

1. Definir o briefing

Defina estes pontos a partir da solicitação e dos arquivos antes de perguntar qualquer coisa:

• Tamanho. As plataformas mudam os tamanhos dos banners, portanto use a evidência mais recente que você tiver, nesta ordem: o tamanho que o usuário informou a partir do diálogo de upload da plataforma; a página de ajuda atual da plataforma; references/platform-sizes.md (datado, com fontes); o tamanho em pixels do banner existente, que pode ser anterior a uma mudança. Informe ao usuário qual tamanho você usou e de onde ele veio. Algumas plataformas usam banners separados para desktop e celular: veja "Mais de um tamanho" abaixo.
• Assuntos e ordem. O que entra, da esquerda para a direita, e se algum assunto deve ter mais espaço.
• Assets disponíveis. Liste a pasta. Abra e veja cada imagem você mesmo. Um nome de arquivo ou legenda não informa o que uma imagem mostra, quão nítida ela é ou que texto está embutido.
• Regras da comunidade. Regras da comunidade sobre imagens editadas, e qualquer coisa que o usuário tenha dito sobre tom. Leia-as se estiverem no projeto.

Pergunte apenas o que você não conseguir definir desta forma, como uma lista de assuntos ausente.

2. Preencher as lacunas

Para cada assunto, você precisa de um logotipo ou marca de título e uma ou mais imagens. Se algo estiver faltando, procure por material oficial: as próprias postagens e canais do detentor dos direitos, kits de imprensa e veículos de notícias que reproduzem a arte oficial. references/asset-sourcing.md contém as táticas de pesquisa, um briefing para delegar a pesquisa a subagentes e o formato do arquivo de fontes. Delegue quando o usuário pedir subagentes ou seu ambiente favorecer isso; caso contrário, pesquise diretamente.

Três regras se aplicam independentemente de como você pesquisa:

• Apenas oficial, e informe como você sabe. Edições de fãs e renderizações de IA estão por toda parte. Registre de onde cada arquivo veio. Quando "oficial" se basear em uma legenda e não na postagem original, informe isso no relatório final.
• Nunca invente um asset. Se nenhum logotipo existir, o banner fica sem ele, ou usa o recorte de pôster descrito abaixo. Não crie um substituto.
• Mantenha o usuário fora de solicitações externas. Sem nomes, nomes de projetos ou endereços de e-mail em URLs, cabeçalhos ou consultas de pesquisa.

Salve os downloads em uma pasta de trabalho e veja cada um antes de confiar nele. scripts/contact_sheet.py coloca muitos candidatos em uma única folha, o que é mais rápido do que abri-los um de cada vez.

3. Obter os logotipos, da forma mais fiel primeiro

1. Um arquivo de logotipo transparente fornecido pelo usuário. Use-o. Se suas bordas mostrarem uma franja colorida no seu fundo, execute cutout_logo.py --key alpha --defringe 2.
2. O pôster com seu título mantido no lugar. Recorte o pôster para que o título fique onde o designer o colocou. Nada é recortado, então o estilo é exato. Esta é a melhor rota quando a única fonte é pequena.
3. Um recorte de uma arte-chave. Use scripts/cutout_logo.py para extrair o logotipo do seu fundo. Escolha a chave pelo que separa o logotipo do fundo: uma diferença de canal como r-b para letras quentes em um fundo frio, luma para claro sobre escuro, inv-luma para escuro sobre claro, bg para uma cor de fundo sólida. Sempre passe --test-sheet e veja o resultado em fundos claros e escuros.

Um recorte é a rota menos fiel. Partes escuras ou sombreadas de um logotipo desaparecem quando estão próximas da cor de fundo. Coloque o logotipo em um fundo semelhante ao original, ou dê a ele um backing na especificação de layout (uma silhueta preenchida mais uma sombra suave), e informe ao usuário que o logotipo é um recorte.

Nunca reescreva, reformate, recolor ou "limpe" uma marca de título redesenhando-a.

4. Organizar em um arquivo de especificação

Escreva o layout como JSON e construa-o com scripts/compose_banner.py. A especificação é a coisa a ser mantida: quando imagens melhores aparecerem depois, mude um caminho e reconstrua. references/spec-format.md documenta cada campo, e assets/example-spec.json é um ponto de partida.

O modelo é uma linha de blocos (fotos, cada uma dimensionada e cortada para um slot, cada uma se mesclando com a da esquerda) e depois sobreposições (logotipos, desenhados por último para que as mesclagens não possam comê-los). Julgamento de layout que o script não pode fazer por você:

• Mantenha rostos longe da mesclagem. Os pixels de feather à esquerda de cada bloco após o primeiro são semitransparentes. Um rosto ali se transforma em um fantasma sobre o vizinho. Mova o corte ou alargue o slot.
• Coloque um logotipo sobre uma área neutra do bloco de seu próprio assunto: fundo fora de foco, céu, uma parede escura. Não deixe que ele invada o bloco do próximo assunto.
• Equilibre os assuntos. Larguras de logotipo semelhantes e tamanhos de rosto semelhantes são lidos como um único banner. Se um logotipo precisar ser muito menor, informe ao usuário o motivo.
• Mantenha fatos mutáveis de fora. Corte as datas de lançamento, preços e linhas de "em breve" embutidas em pôsteres, a menos que o usuário queira. O texto do banner não pode ser editado posteriormente.
• Apenas dimensione e corte. Sem retoques, edições de rosto ou remoção de marcas d'água ou créditos. Se a única cópia tiver uma marca d'água de terceiros, encontre outra cópia ou deixe-a de fora.
• Cuidado com os elementos da plataforma. Muitos sites sobrepõem um avatar ou título em um canto e cortam as laterais em celulares. Mantenha rostos e logotipos fora dessas zonas quando você as conhecer.

Mais de um tamanho. Quando uma plataforma quiser vários banners (desktop e celular, ou dois sites), escreva uma especificação por tamanho e reutilize os assets. Não redimensione um banner pronto para uma forma diferente: os cortes e posições de logotipo que funcionam em uma proporção cortam rostos em outra. Quando os tamanhos diferirem apenas por alguns pixels, copie a especificação e ajuste o último bloco.

Faixas muito estreitas. Em torno de 8:1 (por exemplo, 1072x128), um rosto que preenche a altura tem apenas cerca de 100 px de largura, então há espaço para mais assuntos, mas menos de cada um. Corte próximo aos rostos, espere usar menos imagens por assunto do que em um banner mais alto, e verifique se cada logotipo ainda é legível nessa altura. Uma marca de título de duas linhas empilhada ou um subtítulo pode ser pequeno demais para ler; informe isso e deixe o usuário decidir o que fazer.

5. Construir, olhar, corrigir

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

O script para em problemas que pode provar: arquivo ausente, corte que deixaria uma faixa vazia, lacuna entre blocos, mesclagem mais larga que a sobreposição. Ele avisa em problemas mais brandos, como alto redimensionamento.

Depois veja o resultado, e veja-o em tamanho real. Um banner largo reduzido para caber em um visualizador esconde mesclagens fantasmas e bordas de logotipo quebradas. --preview escreve segmentos em resolução total para isso, além de guides.png com as emendas e caixas de sobreposição desenhadas. Verifique cada segmento quanto a:

• rostos cortados por uma emenda ou fantasmas em um vizinho
• bordas de logotipo: buracos, halos, franjas, qualquer coisa ilegível neste tamanho
• faixas vazias, pessoas esticadas, bordas de bloco visíveis
• texto que você não pretendia incluir

Corrija a especificação e reconstrua. Corrija tudo que uma olhada mostrar antes de olhar novamente.

6. Salvar e relatar

• Nunca sobrescreva o banner existente do usuário. Escreva um novo nome de arquivo. O script se recusa a sobrescrever a menos que receba --force, que é apenas para seus próprios rascunhos.
• Mantenha a especificação, os assets que ela usa e um SOURCES.md juntos em uma pasta que sobreviverá à sessão. Uma pasta temporária perde os downloads, e então o banner não pode ser reconstruído.
• Não faça upload ou publique. O usuário faz isso.

Relate nesta ordem: onde o arquivo está e seu tamanho; o que está nele, da esquerda para a direita; os pontos fracos (fontes duvidosas, logotipos recortados, subtítulos ilegíveis, blocos que parecem colados); e o quão certo você está de que cada asset encontrado é oficial. Diga claramente o que você não verificou, por exemplo como o site corta o banner em celulares.

Scripts

Script	Uso
scripts/compose_banner.py	Construir o banner a partir de uma especificação JSON; --preview DIR escreve segmentos de inspeção e guias.
scripts/cutout_logo.py	Extrair um logotipo de uma arte-chave, ou desfraldar um logotipo transparente existente; --test-sheet mostra-o em três fundos.
scripts/contact_sheet.py	Organizar imagens candidatas em uma única folha rotulada para uma verificação visual rápida.

Execute qualquer um deles com --help para as opções.

Direitos e uso justo

Imagens de divulgação, pôsteres e logotipos pertencem a seus proprietários. Um banner de fã ou comunidade que mostra arte oficial inalterada é uma prática comum, mas o usuário decide se o uso é aceitável, portanto mencione isso uma vez quando você obtiver assets da web. Não construa um banner que poderia fazer a página se passar pela conta oficial do detentor dos direitos.