Dirección de Arte para Imágenes de Sitio Web
Resumen
La imaginería de un sitio web falla como conjunto, no como imágenes individuales. Tres buenas fotografías que no comparten nada se ven peor que tres ordinarias que comparten una luz, una paleta y un sujeto. Y una imagen hermosa que no respalda la frase que tiene al lado es decoración.
Principio fundamental: decide las constantes del conjunto antes de generar una sola imagen, y haz que cada imagen demuestre la afirmación que tiene al lado.
Motor y director de arte
La imaginería de una página proviene de un motor, dirigido por un director de arte, nunca de stock ni de recortes de páginas antiguas.
En nuestra pila, el motor es Botika, nuestro propio motor de renderizado sobre modelo, y el director de arte es una habilidad que se sitúa sobre él: contiene las constantes del briefing, selecciona el modelo, la pose, la finalización del atuendo y el fondo para cada imagen, ejecuta el lote de renderizado y verifica la calidad de los resultados con respecto al estilo requerido. Esa habilidad impulsa un pipeline privado y no forma parte de este repositorio. El contrato que cumple es lo que esta habilidad necesita de cualquier motor:
| Entrada | Salida |
|---|---|
| las constantes del briefing (paleta, luz, entorno, encuadre, continuidad, variación) | un conjunto a resolución nativa, nombrado para su ranura |
| un activo fuente por prenda o sujeto | hojas de comparación fuente versus render para fidelidad |
| la lista de ranuras: la afirmación de cada sección y la relación de aspecto de su caja | un registro de QA: qué se verificó, qué se rehízo |
Si tu motor no puede aceptar las constantes como entrada, el paso del director de arte es una persona con una lista de verificación, y la lista de verificación es esta habilidad.
Regla de presupuesto
Renderizar cuesta créditos y tiempo. Un render por trabajo distinto. Reutiliza un activo existente antes de crear uno nuevo. Pregunta a una persona antes de cualquier lote de más de seis aproximadamente. Sin lotes especulativos "por si acaso los necesitamos". El mismo render a menudo sirve para dos secciones: reutilízalo.
Fijar las constantes primero
Escríbelas. Luego, cada imagen se compara con ellas, y cualquier imagen que falle se regenera, no se acepta.
| Constante | Decide |
|---|---|
| Paleta | tres neutros, como máximo un acento, en hex |
| Luz | un lenguaje: luz natural suave, direccional fuerte, o nublado |
| Entorno | estudio, ubicación real, o una proporción declarada de ambos |
| Encuadre | elige dos de cuerpo entero / plano medio / primer plano, nunca tres |
| Continuidad | la única cosa que permanece igual en todo el conjunto |
| Variación | la única cosa que cambia en todo el conjunto |
El dispositivo de continuidad más fuerte para un conjunto de productos es una prenda en diferentes modelos y escenas. Demuestra variedad mientras prueba consistencia, que suele ser exactamente la afirmación que la página está haciendo. La versión débil es un modelo con diferentes prendas: no prueba nada y parece un catálogo de looks.
La imagen respalda el texto
Antes de tocar el diseño, escribe para cada sección la única afirmación que hace su texto y la imagen que la demuestra. Un primer plano de rostro bajo "Escena" o un vestido liso bajo "Estampados y logotipos" decora la tarjeta en lugar de demostrarla.
| Afirmación de la sección | La imagen es |
|---|---|
| Los estampados se mantienen alineados | rayas alineadas a lo largo de una costura |
| Los logotipos se mantienen en su lugar | un emblema en el pecho, en el mismo lugar en cada modelo |
| Escala a un catálogo | muchos productos diferentes en un estudio, con una lista de estados |
| Una prenda, cualquier escena | la misma prenda y modelo en varios lugares, cambiando los controles |
| Inclusivo | una prenda en varios modelos diferentes |
Si una sección tiene una afirmación y ninguna imagen que la demuestre, eso es un briefing de render.
Igualar un conjunto existente
Al agregar a imágenes que ya existen, deriva las constantes de lo que ya está ahí antes de generar nada. Mide en lugar de ojear: muestrea la luminancia del fondo y los tonos dominantes de los marcos existentes, y anota el encuadre y la iluminación de cada uno.
Si el conjunto existente son cuatro marcos claros y uno oscuro, el nuevo conjunto es cuatro claros y uno oscuro. Las proporciones son parte del aspecto.
Obtener el sujeto
- Extrae cada prenda de la foto de look con un modelo de imagen, usando la foto de look como referencia. Renderiza un producto por prenda, un look por render.
- Nunca uses una imagen fuente que lleve una marca de terceros o un logotipo.
- Elige la pose para la historia. Poses de medio cuerpo para la parte superior. Cuerpo entero para vestidos, jeans, faldas y pantalones. Una mano en la cadera muestra un bolsillo y rayas alineadas.
- Los fondos son neutros. Transmite el estado de ánimo a través del casting y el estilismo, no a través de un fondo cálido.
Prompting para escenas
Describe la escena, nunca la prenda. La prenda se proporciona como entrada; describirla lucha contra el modelo y degrada la fidelidad.
Orden: entorno, luz, cámara, pose y estado de ánimo, paleta.
Calle de ciudad vacía al atardecer junto a una larga persiana de acero corrugado, luz ambiental azul fría con una lámpara de sodio cálida incidiendo desde la derecha, encuadre ambiental de cuerpo entero a 35mm, el modelo de pie quieto a la derecha del encuadre con un largo tramo de pared vacía a la izquierda, manos relajadas a los lados mirando directamente a la cámara, cinemático y tranquilo, paleta de gris hormigón frío y crema.
Para la web específicamente:
- Pide el sujeto descentrado y nombra el lado vacío. Un héroe necesita espacio para el texto.
- Usa frases positivas en todo momento. Nombrar lo que no quieres lo pone en el encuadre.
- Una escena es un lugar real, específico, vivido, lleno de las cosas que pertenecen allí. Una habitación pálida y vacía con un modelo se lee como un estudio que pretende ser un lugar.
- Las plantillas anulan los prompts. Si una plantilla sigue devolviendo un aspecto que no pediste, descártala y maneja toda la escena desde el prompt.
Cuadrículas de héroe
Una cuadrícula de retratos falla de tres maneras, todas visibles en el primer segundo:
- la misma foto dos veces, lado a lado
- una cabeza cortada por el borde del héroe
- cambios que se deslizan en lugar de fundirse
Reglas: cada foto visible es única, ninguna está cortada por el borde del héroe, y las fotos cambian de lugar fundiéndose de una celda a otra. Pruébalo muestreando fotogramas durante ocho segundos y fallando si hay una fuente duplicada, un mosaico fuera del rectángulo del héroe, superposición de mosaicos o un mosaico debajo del texto.
QA a resolución nativa
Las miniaturas y las hojas de contactos ocultan exactamente los fallos que se notan en un monitor de 27 pulgadas. Localiza manos y pies en una hoja de localización, luego recorta esas regiones del archivo de tamaño completo y visualízalas a 2x a 4x:
- Pies y zapatos: compara los dos como un par. Grosor de la suela, forma de la horma, correa, tacón.
- Manos: cuenta los dedos. Si no puedes determinar el número, eso es un fallo, no un pase.
- Uniones de extremidades: una pierna conectando el dobladillo al zapato, hombros, codos, rodillas
- Sombras de contacto: debajo del pie, no desplazadas
- Fidelidad de la prenda: bolsillos, costuras, cuello, largo del dobladillo y lavado en comparación con la fuente
- Texto: cualquier letrero o impresión en el encuadre
La solución más barata es compositiva. Un encuadre que termina a media altura del muslo elimina por completo el fallo del zapato. Úsalo cada vez que la mitad inferior no sea el punto. Un guardia de prompt también funciona: "el encuadre termina a media altura del muslo y no se ven pies, tobillos ni zapatos en ninguna parte".
Resolución
Entrega aproximadamente 2 veces el ancho CSS más grande que ocupará la ranura, y sirve el archivo 1x a las pantallas 1x mediante srcset. Audita la relación efectiva de cada imagen en cada posición de desplazamiento (píxeles necesarios divididos por píxeles en el archivo; por encima de 1.0 es suave). Ampliar una fuente pequeña agrega píxeles, no detalles. Dilo, y ofrece un re-renderizado.
Campos de color y texto sobre imágenes
El texto sobre una imagen o un campo de color se mide, no se juzga. El texto blanco necesita 3:1 en tamaños grandes y 4.5:1 en tamaño de cuerpo, muestreado de los píxeles. Un velo dentro del campo soluciona la legibilidad sin apagar el color. Una UI simulada colocada sobre un campo de color necesita su propio color de texto, o hereda el blanco de la escena y desaparece en una tarjeta blanca.
Composición para la ranura
Genera suelto, recorta ajustado. Iguala la relación de aspecto entregada a la caja CSS para que el navegador apenas tenga que elegir:
- Cuadrículas de tarjetas: una relación de aspecto para cada tarjeta, establecida en el contenedor,
object-fit: coveren la imagen - Héroes: dentro de aproximadamente el 10% de la relación de viewport más ancha que soportes
- Zonas de superposición: cuando el texto de la tarjeta se asienta en el tercio inferior de una imagen, esa zona debe ser tranquila
- Collages que demuestran consistencia: una celda grande más dos pequeñas, todas con la misma relación de aspecto
Lista de verificación
- Constantes escritas antes de generar
- Cada sección tiene una afirmación y una imagen que la demuestra
- Cada imagen se compara con las constantes; los fallos se regeneran, no se aceptan
- La proporción de marcos claros a oscuros coincide con el conjunto existente
- Los modelos difieren en todo el conjunto; la prenda o la luz no
- Manos, pies y detalles de la prenda verificados a resolución nativa
- Sin marcas de terceros en ninguna fuente
- Espacio para el texto presente y en el lado correcto en cada marco héroe
- Relación de aspecto entregada coincide con la caja CSS; relación efectiva igual o inferior a 1.0
- Texto sobre imágenes medido para contraste
- Reutilizado antes de re-renderizar; cualquier lote de más de seis aprobado por una persona