Sobreposição em imagem

O nó Sobreposição em imagem (Image Overlay) posiciona camadas sobre uma imagem base, exatamente onde você as coloca. Uma camada pode ser uma imagem, como um logo ou um recorte, um texto real em uma fonte incluída, um QR code ou uma forma simples. Nada é redesenhado por IA, então um elemento da marca sai igual ao arquivo que você forneceu. Use o nó para marcas d’água, logos, títulos, selos de preço e banners dimensionados para cada plataforma.

Quando usar

• Aplique uma marca d’água ou a sua marca em todas as imagens geradas antes de publicá-las.
• Monte banners para YouTube, LinkedIn ou X e capas de vídeo com o arquivo real do seu logo sobre um fundo gerado por IA.
• Coloque um recorte do Remover fundo (Remove Background) sobre um novo fundo, com uma sombra.
• Adicione um selo ou um adesivo, como “NOVO”, uma etiqueta de preço ou uma avaliação, a fotos de produto.
• Coloque um QR code em um folheto, ou um código por produto em um lote.
• Monte cards de antes e depois ou cards de comparação a partir de dois resultados.

Início rápido

Entradas

O nó mostra 4 entradas de camada no começo. Use + Camada e − Camada para mostrar de 1 a 12, e a contagem também aumenta quando você conecta uma camada de número maior. Toda execução precisa de pelo menos uma camada: uma imagem conectada ou uma camada de texto, QR ou forma.

Posicionar uma camada

Cada camada se prende à imagem base em uma âncora, e toda distância é uma porcentagem da imagem base.

Por que porcentagens: o tamanho da imagem base é decidido em um nó anterior. Hoje ela pode ser uma renderização em 2K, e amanhã um pôster em 4K. Uma camada definida como “12% de largura, a 4% da borda direita” fica no mesmo lugar nas duas, e uma posição em pixels não ficaria. Depois que uma imagem base é conectada, o painel de configurações mostra o valor em pixels ao lado de cada porcentagem.

Uma camada que fica parcialmente fora da base é cortada na borda da base. Uma camada totalmente fora da base é ignorada, e isso não é um erro. Logos em SVG são desenhados no tamanho final em pixels, então continuam nítidos.

Começar de uma predefinição

Predefinição (preenche a camada 1) configura a Camada 1 com um clique. Todos os valores continuam editáveis depois.

Exemplo: uma marca d’água

Conecte a foto à Base e o logo à Camada 1 e, depois, defina estes valores na Camada 1:

Em uma base de 2000 × 1000 pixels, o logo tem 240 pixels de largura. A borda direita dele fica a 80 pixels da direita, e a borda inferior, a 60 pixels de baixo. Em uma base de 4000 × 2000, todos esses números dobram, e o nó não precisa de nenhuma mudança.

Tipos de camada

Para transformar uma camada de texto, QR ou forma de volta em uma camada de imagem, use Reverter para espaço de imagem.

Camadas de texto

• Fontes: Inter, Montserrat, Space Grotesk, Playfair Display, Oswald, Bebas Neue, Anton, Pacifico, Rubik e Heebo. Rubik e Heebo compõem hebraico. As fontes variáveis aceitam qualquer Peso de 100 a 900.
• Layout: Alinhamento, Espaçamento entre letras, Altura da linha e Maiúsculas. O texto da direita para a esquerda é disposto da direita para a esquerda em cada linha.
• Contorno: um contorno em volta das letras, com Espessura do contorno e Cor do contorno.
• Caixa de fundo (pílula / selo): uma caixa atrás do texto, com Cor da caixa, opacidade, Margem interna e um raio de canto. Um raio grande forma uma pílula.

Camadas de imagem

Toda camada pode ter uma sombra projetada e cantos arredondados. Uma camada de imagem tem mais quatro acabamentos:

• Recorte corta a imagem em um círculo.
• Suavização das bordas esmaece as bordas ao longo de um número de pixels.
• Contorno desenha uma linha em volta da silhueta.
• Brilho adiciona um brilho colorido em volta dela.

Camadas de QR

Digite o link em Conteúdo do QR (URL ou texto). Você pode mudá-lo a qualquer momento, e o código é atualizado. Cor do QR, Fundo do QR e Zona de silêncio definem o visual.

Para pegar o link do workflow, ative Usar saída do workflow. O nó ganha uma entrada Link do QR: conecte a ela um nó Texto, uma coluna de Lista ou qualquer saída de texto. Com uma coluna de Lista, uma execução cria um código por linha, por exemplo cinquenta códigos para cinquenta páginas de produto. Uma execução com Usar saída do workflow ativado e nada conectado é recusada, com uma mensagem que cita a entrada.

Tamanhos de plataforma e áreas seguras

Tamanho da plataforma transforma a saída no tamanho em pixels de uma plataforma:

O padrão é Manter o tamanho da imagem base. Quando você escolhe uma plataforma, a prévia desenha a área segura dela como uma caixa tracejada: a parte que todo dispositivo mostra. Escolher uma plataforma também define Ajuste da base como Preencher, para que a imagem preencha o canvas. Para o Banner do canal do YouTube, a prévia mostra três zonas, uma dentro da outra: o que as TVs mostram, o que os computadores mostram e o que todos os dispositivos mostram.

Enquanto você arrasta, uma camada se encaixa nas linhas centrais, nas bordas e na área segura. Segure Shift para arrastar livremente.

Exportar também para renderiza a mesma composição em mais canvases de plataforma, na mesma execução. Marque quantas plataformas precisar, até as doze. Os arquivos extras aparecem como chips no resultado. Cada plataforma marcada também é uma saída no nó. Por exemplo, a renderização do Cabeçalho do X / Twitter pode alimentar um nó Publicar no X (X Post) enquanto a Capa de empresa do LinkedIn alimenta um nó Publicar no LinkedIn (LinkedIn Post), na mesma execução. Cada plataforma extra aumenta o preço da execução, como explica a seção Créditos.

Abrir editor completo abre uma visualização de edição grande do nó. O cabeçalho dela tem o mesmo menu de plataformas, e a área de trabalho vira o canvas dessa plataforma, com a área segura.

Tamanho e formato da saída

Saída de máscara

A saída Máscara é uma imagem em preto e branco. O branco marca a área que uma edição com IA pode mudar. Saída de máscara escolhe o que fica branco:

Conecte a máscara à entrada Máscara do Modificar imagem (Modify Image).

Fazer parecer parte da imagem

O nó nunca redesenha as suas camadas. Esse é o objetivo, mas às vezes você quer que a cena reaja a elas: uma sombra de contato embaixo de um produto posicionado, uma luz combinando sobre um logo, um reflexo no chão.

Clique em Adicionar acabamento com IA (para parecer parte da imagem). Ele adiciona um nó Modificar imagem depois deste. O novo nó é conectado à composição e ao anel de máscara em volta das suas camadas, e o prompt dele pede exatamente isso. O modelo só pode pintar dentro do anel, então ele adiciona sombras e luz em volta dos elementos. Todo pixel fora da máscara vem da composição, então os elementos continuam com precisão de pixel. Para orientar o visual, conecte um seletor Efeitos de composição (Composition Effects) a esse nó Modificar imagem.

Sugerir posição (IA), nas configurações de uma camada, pergunta a um modelo de visão onde a camada deve ficar. Ele evita rostos, o assunto principal e texturas carregadas, e fica dentro da área segura quando uma plataforma está definida. Depois, ele preenche a âncora e os deslocamentos. Custa o mesmo que uma execução do Descrever imagem (Describe Image), e você pode arrastar a camada depois, como sempre.

Créditos

O Sobreposição em imagem custa 11 créditos pela composição e pela máscara dela, qualquer que seja o tamanho da imagem base ou o número de camadas. Cada plataforma extra em Exportar também para aumenta o preço.

O botão Executar mostra o preço exato antes da execução, e a estimativa do workflow e a API usam a mesma fórmula. O nó Modificar imagem que o Adicionar acabamento com IA cria é cobrado à parte, pelo preço do modelo dele.

Dicas

• Use arquivos transparentes. Use um PNG transparente ou um SVG como camada. Um logo em JPG opaco é posicionado como um retângulo, então passe-o antes pelo Remover fundo.
• Mantenha os elementos da marca como arquivos. Desenhe a imagem com um nó de IA e posicione aqui o logo real. Um modelo sempre redesenha um logotipo de texto com pequenos erros.
• Integre as marcas à imagem. Use Multiplicação para marcas escuras sobre fotos claras e Tela para marcas claras sobre fotos escuras.
• Destaque um recorte. Uma sombra projetada suave separa uma pessoa ou um produto de um fundo carregado. Experimente desfoque 24, Sombra X 0, Sombra Y 12 e opacidade de 50%.
• Faça um banner a partir de uma renderização mais larga. Ative Tamanho de saída personalizado com Preencher, por exemplo em 1500 × 500 pixels. O logo continua posicionado em relação à base, não ao canvas.
• Gere a base primeiro. Os valores em pixels ao lado de cada porcentagem aparecem quando uma imagem base de tamanho conhecido está conectada.
• Gire e depois desloque. A rotação gira a camada em torno do próprio centro. Adicione um deslocamento para manter uma marca girada bem junto de um canto.
• Use camadas de texto para palavras e arquivos para logos. Use uma camada de texto para títulos, legendas, preços e tarjas inferiores, e um arquivo SVG ou PNG para o logotipo da marca.

Pela API

POST /v1/image-overlay recebe a imagem base e as camadas. Esta chamada posiciona a marca d’água do exemplo acima:

{
  "imageUrl": "https://example.com/photo.png",
  "layers": [
    { "imageUrl": "https://example.com/logo.svg", "anchor": "bottom-right", "width": 12, "x": -4, "y": -6, "opacity": 0.95 }
  ]
}

• Uma camada de texto, QR ou forma define layers[i].kind como text, qr ou shape, com um objeto text, qr ou shape. opacity vai de 0 a 1, e zIndex define a ordem de empilhamento.
• canvas define um tamanho de plataforma ou um tamanho de saída personalizado. outputFormat é png, jpg ou webp.
• variants, por exemplo ["youtube-thumbnail", "x-header"], adiciona renderizações de plataforma. O resultado lista essas renderizações como variants, cada uma com id, label, width, height e url.
• maskMode é around, layers, outside ou none, e maskSpread é a largura do anel. A saída do job leva a máscara como maskUrl.
• Uma camada de QR com qr.fromInput definido como true pega o link de um qrText no nível superior.