josemidev/piezas-graficas

Peças gráficas publicitárias

Esta skill cobre o ciclo completo de uma campanha de peças: ler o material da agência, extrair os recursos reais (fotos, logotipos, tipografias, textos), compor cada formato, exportar e entregar tudo em uma galeria HTML de revisão onde a pessoa vê todas as peças juntas e responde com feedback. As correções do cliente chegam em rodadas, então tudo deve poder ser regenerado rapidamente a partir de uma origem editável.

A regra central: sempre uma galeria HTML de revisão

Cada entrega, incluindo cada rodada de correções, termina com um index.html que mostra todas as peças exportadas, e é enviado à pessoa (ou aberto no Finder) junto com a pasta export/. Assim ela pode comparar formatos de relance, detectar erros que em um arquivo solto não são vistos e responder com capturas pontuais, que é como chega o feedback real ("aqui a letra se sobrepõe", "no 160x600 tira este benefício").

A galeria deve:

• agrupar por família (Homepage / Display / Post / Story…) e mostrar cada peça no seu tamanho real ou escalada sem deformar;
• indicar abaixo de cada peça a medida, o nome do arquivo, o peso do JPG e links para o PNG e para a versão @2x;
• em formatos com zona segura (stories, fundos de carrossel), ter uma caixa para sobrepor a zona segura e as áreas reservadas;
• funcionar com modo claro e escuro, e abrir com duplo clique (caminhos relativos a export/).

Use scripts/gallery.py; regenere a galeria sempre que as peças mudarem.

Fluxo de trabalho

1. Pasta do projeto. Uma pasta por marca ou campanha (<marca>-<campanha>/) com src/ (origem editável, assets e scripts), export/<familia>/ e index.html. Não misture marcas: se chegarem duas marcas ao mesmo tempo, cada uma vai na sua pasta (e, se o usuário pedir, em sessões paralelas).
2. Ler o material. Veja references/extraccion.md:
   • Google Slides público: baixe /export/pptx e /export/pdf, renderize os slides para ver os key visuals e extraia dos .rels os links para editáveis ("EDITABLE", "DESCARGAR", "IMÁGENES").
   • PDF do Illustrator: fotos com sua máscara (smask), logotipos como vetores (get_drawings → SVG), tipografias embutidas e o texto legal real.
   • PSD: artboards e camadas com psd-tools; cada elemento é composto separadamente a partir de sua camada.
3. Inventário antes de compor. Liste para a pessoa qual modelo, preço, benefícios, legal e logotipos leva cada peça, e de onde saiu cada dado. Se dois slides se contradizem (dois preços para o mesmo modelo), use o editável mais recente e sinalize isso; não escolha em silêncio.
4. Compor. Use a origem que melhor se adapta:
   • HTML + CSS (assets/banners-template.html): um div.ad[data-name] por peça, tudo em posição absoluta, com as fontes e os SVG extraídos. É o mais rápido de corrigir por rodadas.
   • Python (PIL) por camadas quando a origem é um PSD e é preciso reorganizar elementos já rasterizados.
5. Exportar. scripts/export_pieces.mjs (Playwright) captura cada .ad em @1x e @2x em PNG; scripts/to_jpg.py gera os JPG com cor completa e com o limite de peso por família. Veja references/formatos.md.
6. Revisar um a um antes de entregar. Olhe cada peça exportada (e ampliada nas zonas críticas), seguindo references/checklist-revision.md. Corrija e itere; não entregue o que não viu.
7. Entregar. Galeria + pasta aberta no Finder + um resumo curto: o que foi feito, que decisões você tomou e o que ficou por confirmar.

Princípios de composição

• Hierarquia explícita. Pergunte ou deduza a ordem de prioridade e respeite-a em todos os formatos. Uma ordem habitual em promoções: 1) a oferta (preço ou porcentagem), 2) o logotipo do comércio ou da marca, 3) o resto no mesmo nível (logotipo da campanha, benefícios, produto).
• Aproveitar o espaço. Cada formato tem sua própria composição; não basta escalar. Se o produto é largo, dê a largura completa e coloque a informação em uma fileira; se é alto, coloque-o em coluna junto ao texto. Verifique que não fiquem grandes buracos nem elementos minúsculos.
• Não regenerar o produto. Use a foto real do veículo ou produto, sem mudar cor, pneus nem design. Se faltar cena para um formato novo, estenda céu, mar ou solo de forma natural (veja references/extraccion.md, "Estender fundos").
• Placas e textos dentro da foto. Se for preciso mudar o texto de uma placa, redesenhe-a em perspectiva sobre o contorno real, nunca com um retângulo plano sobreposto.
• Contraste. Texto branco sobre fotografia: degradês suaves até alcançar pelo menos 4.5:1 em todo o bloco de texto, e meça.
• Entrelinha. Meça o entrelinha no editável e replique-o; as tipografias condensadas com entrelinha muito fechado fazem as linhas se tocarem.

Rodadas de correções

As correções chegam como capturas ou e-mails do cliente. Para cada uma:

• aplique a mudança na origem (não retoque o PNG) e reexporte todas as peças afetadas;
• se o pedido disser "todas as peças de tamanho X", busque esse tamanho em todas as marcas do projeto e avise quais você tocou e quais não se aplicavam;
• revise visualmente novamente as peças tocadas (uma mudança de texto geralmente quebra uma quebra de linha nos formatos estreitos);
• atualize a galeria.

Erros que já ocorreram e convém prevenir: nome de modelo incompleto (o modelo sem sua versão, quando o key visual a inclui), preço de outra versão, botão onde o cliente não quer (homepage sem botão, display com botão), benefícios do banco em formatos onde não cabem, palavras soltas no final de um parágrafo ("CHEIO" sozinho, "90%" sozinho).

Arquivos desta skill

• references/extraccion.md: como extrair fotos, vetores, tipografias e textos de PDF, PSD e Slides; estender fundos; placas.
• references/formatos.md: medidas habituais, zonas seguras, limites de peso e exportação nítida.
• references/checklist-revision.md: o que olhar em cada peça antes de entregar.
• scripts/export_pieces.mjs: exporta cada .ad do HTML para PNG @1x/@2x.
• scripts/to_jpg.py: PNG → JPG sRGB 4:4:4 com limite de peso.
• scripts/gallery.py: gera a galeria index.html de revisão.
• scripts/pdf_assets.py: extrai imagens com máscara, fontes e vetores (SVG) de um PDF do Illustrator.
• scripts/psd_elements.py: lista artboards e camadas de um PSD e extrai cada grupo de camadas como PNG com transparência.
• assets/banners-template.html: template de maquetação por peças.