igall-commits/art-directing-site-imagery

Direção de Arte para Imagens de Site

Visão Geral

A imagética de um site falha como conjunto, não como fotos individuais. Três boas fotografias que não compartilham nada parecem piores do que três fotos comuns que compartilham luz, paleta e assunto. E uma imagem bonita que não comprova a frase ao lado dela é decoração.

Princípio central: decida as constantes do conjunto antes de gerar uma única imagem, e faça com que cada imagem comprove a afirmação ao lado dela.

Motor e diretor de arte

As imagens de uma página vêm de um motor, dirigidas por um diretor de arte, nunca de banco de imagens e nunca de recortes de páginas mais antigas.

Em nossa stack, o motor é o Botika, nosso próprio motor de renderização em modelo, e o diretor de arte é uma skill que fica acima dele: ela mantém as constantes do briefing, escolhe o modelo, pose, finalização do look e fundo para cada imagem, executa o lote de renderização e verifica a qualidade dos resultados em relação ao estilo exigido. Essa skill aciona um pipeline privado e não faz parte deste repositório. O contrato que ela cumpre é o que esta skill precisa de qualquer motor:

Entrada	Saída
as constantes do briefing (paleta, luz, ambiente, corte, continuidade, variação)	um conjunto em resolução nativa, nomeado para seu slot
um ativo de origem por peça de roupa ou assunto	folhas de comparação fonte versus render para fidelidade
a lista de slots: a afirmação de cada seção e a proporção de sua caixa	um log de QA: o que foi verificado, o que foi refeito

Se seu motor não puder receber as constantes como entrada, a etapa de diretor de arte é uma pessoa com uma lista de verificação, e a lista de verificação é esta skill.

Regra de orçamento

Renderizar custa créditos e tempo. Um render por trabalho distinto. Reutilize um ativo existente antes de criar um novo. Pergunte a uma pessoa antes de qualquer lote acima de cerca de seis. Nenhum lote especulativo "caso precisemos". O mesmo render frequentemente atende a duas seções: reutilize-o.

Fixe as constantes primeiro

Anote-as. Cada imagem é então verificada em relação a elas, e qualquer imagem que não as atenda é regenerada, não aceita.

Constante	Decida
Paleta	três neutros, no máximo um acento, em hexadecimal
Luz	uma linguagem: luz do dia suave, direcional forte, ou nublado
Ambiente	estúdio, local real, ou uma proporção declarada de ambos
Corte	escolha dois de corpo inteiro / meio / close, nunca três
Continuidade	a única coisa que permanece a mesma em todo o conjunto
Variação	a única coisa que muda em todo o conjunto

O dispositivo de continuidade mais forte para um conjunto de produtos é uma peça de roupa em diferentes modelos e cenas. Isso demonstra variedade enquanto prova consistência, que geralmente é exatamente a afirmação que a página está fazendo. A versão fraca é um modelo em diferentes roupas: não prova nada e parece um lookbook.

Imagens comprovam o texto

Antes de tocar no layout, escreva para cada seção a afirmação que seu texto faz e a imagem que a comprova. Um close de rosto sob "Cena" ou um vestido liso sob "Estampas e logotipos" decora o card em vez de demonstrá-lo.

Afirmação da seção	A imagem é
Estampas permanecem alinhadas	listras alinhadas em uma costura
Logotipos permanecem posicionados	um emblema no peito, no mesmo lugar em cada modelo
Escalável para catálogo	muitos produtos diferentes em um estúdio, com uma lista de status
Uma peça, qualquer cena	a mesma peça e modelo em vários lugares, os controles mudando
Inclusivo	uma peça em vários modelos diferentes

Se uma seção tem uma afirmação e nenhuma imagem que a comprove, isso é um briefing de render.

Combinando com um conjunto existente

Ao adicionar imagens a um conjunto já existente, derive as constantes do que já está lá antes de gerar qualquer coisa. Meça em vez de olhar: amostre a luminância do fundo e os tons dominantes dos quadros existentes, e observe o corte e a iluminação de cada um.

Se o conjunto existente tem quatro quadros claros e um escuro, o novo conjunto terá quatro claros e um escuro. Proporções fazem parte da aparência.

Obtendo o assunto

• Extraia cada peça de roupa da foto de look com um modelo de imagem, usando a foto de look como referência. Renderize um produto por peça, um look por render.
• Nunca use uma imagem de origem que contenha uma marca registrada ou logotipo de terceiros.
• Escolha a pose para a história. Poses da parte superior do corpo para blusas. Corpo inteiro para vestidos, jeans, saias e calças. Uma mão no quadril mostra um bolso e listras alinhadas.
• Fundos são neutros. Transmita humor através da seleção e estilo, não através de um fundo quente.

Criando prompts para cenas

Descreva a cena, nunca a peça de roupa. A peça é fornecida como entrada; descrevê-la luta contra o modelo e degrada a fidelidade.

Ordem: cenário, luz, câmera, pose e humor, paleta.

Rua vazia da cidade ao anoitecer ao lado de uma longa persiana de aço corrugado, luz ambiente azul fria com uma lâmpada de sódio quente vindo da direita, quadro ambiental de corpo inteiro em 35mm, o modelo parado à direita do quadro com um longo trecho de parede vazia à esquerda, mãos relaxadas ao lado do corpo olhando diretamente para a câmera, cinematográfico e quieto, paleta cinza concreto frio e creme.

Para web especificamente:

• Peça o assunto descentralizado e nomeie o lado vazio. Um hero precisa de espaço para texto.
• Use frases positivas em todo o prompt. Nomear o que você não quer coloca isso no quadro.
• Uma cena é um lugar real, específico, vivido, cheio das coisas que pertencem a ele. Uma sala vazia e pálida com um modelo dentro parece um estúdio fingindo ser um lugar.
• Modelos substituem prompts. Se um modelo continuar retornando um visual que você não pediu, abandone-o e conduza toda a cena a partir do prompt.

Grades de hero

Uma grade de retratos falha de três maneiras, todas visíveis no primeiro segundo:

• a mesma foto duas vezes, lado a lado
• uma cabeça cortada pela borda do hero
• mudanças que deslizam em vez de desaparecer

Regras: toda foto visível é única, nenhuma é cortada pela borda do hero, e as fotos mudam de lugar desaparecendo de uma célula e aparecendo em outra. Teste amostrando quadros por oito segundos e falhando em qualquer fonte duplicada, tile fora do retângulo do hero, sobreposição de tiles ou tile sob o texto.

QA em resolução nativa

Miniaturas e folhas de contato escondem exatamente as falhas que são notadas em um monitor de 27 polegadas. Localize mãos e pés em uma folha de localização, depois recorte essas regiões do arquivo em tamanho real e visualize-as em 2x a 4x:

• Pés e sapatos: compare os dois como um par. Espessura da sola, forma da forma, tira, salto.
• Mãos: conte os dedos. Se não conseguir determinar a contagem, isso é uma falha, não uma aprovação.
• Junções de membros: perna conectando barra a sapato, ombros, cotovelos, joelhos
• Sombras de contato: sob o pé, não deslocadas
• Fidelidade da peça: bolsos, costuras, gola, comprimento da barra e lavagem em comparação com a fonte
• Texto: qualquer sinalização ou impressão no quadro

O conserto mais barato é composicional. Um quadro que termina na metade da coxa elimina completamente a falha do sapato. Use-o sempre que a metade inferior não for o ponto. Um guarda de prompt também funciona: "o quadro termina na metade da coxa e nenhum pé, tornozelo ou sapato é visível em lugar nenhum."

Resolução

Entregue aproximadamente 2x a maior largura CSS que o slot ocupará, e sirva o arquivo 1x para telas 1x através de srcset. Audite a proporção efetiva de cada imagem em cada posição de rolagem (pixels necessários divididos pelos pixels no arquivo; acima de 1.0 é suave). Aumentar a escala de uma fonte pequena adiciona pixels, não detalhes. Diga isso e ofereça um novo render.

Campos de cor e texto em imagens

Texto sobre uma imagem ou campo de cor é medido, não julgado. Texto branco precisa de 3:1 em tamanhos grandes e 4.5:1 em tamanho de corpo, amostrado dos pixels. Um scrim dentro do campo corrige a legibilidade sem embotar a cor. UI mock colocada em um campo de cor precisa de sua própria cor de texto, ou herda o branco da cena e desaparece em um card branco.

Compondo para o slot

Gere solto, corte justo. Faça a proporção entregue corresponder à caixa CSS para que o navegador esteja escolhendo quase nada:

• Grades de cards: uma proporção para cada card, definida no wrapper, object-fit: cover na imagem
• Heroes: dentro de cerca de 10% da proporção de viewport mais larga que você suporta
• Zonas de sobreposição: quando o texto do card fica no terço inferior de uma imagem, essa zona deve ser tranquila
• Colagens provando consistência: uma célula grande mais duas pequenas, todas as três na mesma proporção

Lista de verificação

• Constantes anotadas antes de gerar
• Cada seção tem uma afirmação e uma imagem que a comprova
• Cada imagem verificada em relação às constantes; falhas regeneradas, não aceitas
• Proporção de quadros claros para escuros corresponde ao conjunto existente
• Modelos diferem em todo o conjunto; a peça ou a luz não
• Mãos, pés e detalhes da peça verificados em resolução nativa
• Nenhuma marca registrada de terceiros em nenhuma fonte
• Espaço para texto presente e no lado correto em cada quadro hero
• Proporção entregue corresponde à caixa CSS; proporção efetiva igual ou inferior a 1.0
• Texto sobre imagens medido para contraste
• Reutilizado antes de re-renderizado; qualquer lote acima de cerca de seis aprovado por uma pessoa