igal-commits/art-directing-site-imagery

Direction Artistique des Images de Site Web

Vue d'ensemble

Les images d'un site web échouent en tant qu'ensemble, pas en tant que photos individuelles. Trois bonnes photographies qui ne partagent rien ont un moins bon rendu que trois photos ordinaires qui partagent une lumière, une palette et un sujet. Et une belle image qui ne prouve pas la phrase à côté d'elle n'est qu'une décoration.

Principe fondamental : décidez les constantes de l'ensemble avant de générer une seule image, et faites en sorte que chaque image prouve l'affirmation qu'elle accompagne.

Moteur et directeur artistique

Les images d'une page proviennent d'un moteur, dirigé par un directeur artistique, jamais d'une banque d'images et jamais de recadrages de pages plus anciennes.

Dans notre stack, le moteur est Botika, notre propre moteur de rendu sur modèle, et le directeur artistique est une compétence qui se situe au-dessus : elle contient les constantes du brief, choisit le modèle, la pose, la tenue complète et l'arrière-plan pour chaque image, lance le lot de rendus et vérifie la qualité des résultats par rapport au style requis. Cette compétence pilote un pipeline privé et ne fait pas partie de ce dépôt. Le contrat qu'elle remplit est ce dont cette compétence a besoin de n'importe quel moteur :

Entrée	Sortie
les constantes du brief (palette, lumière, environnement, cadrage, continuité, variation)	un ensemble à la résolution native, nommé pour son emplacement
un actif source par vêtement ou sujet	des feuilles de comparaison source/rendu pour la fidélité
la liste des emplacements : l'affirmation de chaque section et les proportions de son cadre	un journal de QA : ce qui a été vérifié, ce qui a été relancé

Si votre moteur ne peut pas prendre les constantes en entrée, l'étape de direction artistique est une personne avec une liste de contrôle, et la liste de contrôle est cette compétence.

Règle budgétaire

Les rendus coûtent des crédits et du temps. Un rendu par job distinct. Réutilisez un actif existant avant d'en créer un nouveau. Demandez à une personne avant tout lot de plus de six environ. Pas de lots spéculatifs "au cas où on en aurait besoin". Le même rendu sert souvent deux sections : réutilisez-le.

Fixez d'abord les constantes

Notez-les. Chaque image est ensuite évaluée par rapport à elles, et toute image qui ne les respecte pas est regénérée, pas acceptée.

Constante	Décision
Palette	trois neutres, au plus un accent, en hexadécimal
Lumière	un seul langage : lumière du jour douce, directionnelle dure, ou ciel couvert
Environnement	studio, lieu réel, ou un ratio déclaré des deux
Cadrage	choisissez deux options parmi plan large / plan américain / gros plan, jamais les trois
Continuité	la seule chose qui reste identique dans tout l'ensemble
Variation	la seule chose qui change dans tout l'ensemble

Le dispositif de continuité le plus puissant pour un ensemble de produits est un seul vêtement sur différents modèles et scènes. Il démontre la variété tout en prouvant la cohérence, ce qui est généralement l'affirmation exacte que la page fait. La version faible est un seul modèle dans différents vêtements : cela ne prouve rien et ressemble à un lookbook.

Les images prouvent le texte

Avant de toucher à la mise en page, écrivez pour chaque section l'affirmation que son texte fait et l'image qui la prouve. Un gros plan de visage sous "Scène" ou une robe unie sous "Imprimés et logos" décore la carte au lieu de la démontrer.

Affirmation de la section	L'image est
Les imprimés restent alignés	des rayures alignées sur une couture
Les logos restent placés	un emblème sur la poitrine, au même endroit sur chaque modèle
S'adapte à un catalogue	de nombreux produits différents dans un même studio, avec une liste de statuts
Un vêtement, n'importe quelle scène	le même vêtement et le même modèle dans plusieurs endroits, les réglages changeant
Inclusif	un même vêtement sur plusieurs modèles différents

Si une section a une affirmation et pas d'image qui la prouve, c'est un brief de rendu.

Correspondre à un ensemble existant

Lorsque vous ajoutez à des images qui existent déjà, dérivez les constantes de ce qui est déjà là avant de générer quoi que ce soit. Mesurez plutôt que d'estimer à l'œil : échantillonnez la luminance de l'arrière-plan et les teintes dominantes des images existantes, et notez le cadrage et l'éclairage de chacune.

Si l'ensemble existant a quatre images claires et une sombre, le nouvel ensemble aura quatre images claires et une sombre. Les ratios font partie du rendu.

Obtention du sujet

• Extrayez chaque vêtement de la photo de look avec un modèle d'image, en utilisant la photo de look comme référence. Rendez un produit par vêtement, un look par rendu.
• N'utilisez jamais une image source qui porte une marque ou un logo tiers.
• Choisissez la pose pour l'histoire. Poses du haut du corps pour les hauts. Plan large pour les robes, jeans, jupes et pantalons. Une main sur la hanche montre une poche et des rayures alignées.
• Les arrière-plans sont neutres. Transmettez l'ambiance par le casting et le styling, pas par un fond chaud.

Rédaction de prompts pour les scènes

Décrivez la scène, jamais le vêtement. Le vêtement est fourni en entrée ; le décrire lutte contre le modèle et dégrade la fidélité.

Ordre : décor, lumière, caméra, pose et humeur, palette.

Rue vide au crépuscule à côté d'un long volet en acier ondulé, lumière ambiante bleue froide avec une lampe au sodium chaude qui balaie depuis la droite, 35mm cadre environnemental plan large, le modèle immobile à droite du cadre avec une longue étendue de mur vide à gauche, mains détendues sur les côtés regardant droit vers la caméra, cinématographique et calme, palette gris béton froid et crème.

Pour le web spécifiquement :

• Demandez le sujet décentré et nommez le côté vide. Un hero a besoin d'un espace pour le texte.
• Utilisez une formulation positive tout au long. Nommer ce que vous ne voulez pas le place dans le cadre.
• Une scène est un lieu réel, spécifique, habité, rempli des choses qui lui appartiennent. Une pièce vide et pâle avec un modèle dedans ressemble à un studio qui se fait passer pour un lieu.
• Les modèles priment sur les prompts. Si un modèle continue de renvoyer un look que vous n'avez pas demandé, abandonnez-le et pilotez toute la scène depuis le prompt.

Grilles hero

Une grille de portraits échoue de trois manières, toutes visibles dans la première seconde :

• la même photo deux fois, côte à côte
• une tête coupée par le bord du hero
• des changements qui glissent au lieu de fondre

Règles : chaque photo visible est unique, aucune n'est coupée par le bord du hero, et les photos changent de place en fondu d'une cellule à l'autre. Testez en échantillonnant les images pendant huit secondes et en échouant sur toute source en double, toute tuile en dehors du rectangle hero, tout chevauchement de tuile ou tuile sous le texte.

QA à la résolution native

Les vignettes et les planches-contact cachent exactement les défauts qui sont remarqués sur un écran de 27 pouces. Localisez les mains et les pieds sur une feuille de repérage, puis recadrez ces régions hors du fichier pleine taille et visualisez-les à 2x ou 4x :

• Pieds et chaussures : comparez les deux comme une paire. Épaisseur de la semelle, forme de la forme, bride, talon.
• Mains : comptez les doigts. Si vous ne pouvez pas résoudre le compte, c'est un échec, pas une réussite.
• Jonctions des membres : une jambe reliant l'ourlet à la chaussure, épaules, coudes, genoux
• Ombres de contact : sous le pied, pas décalées
• Fidélité du vêtement : poches, coutures, col, longueur de l'ourlet et lavage par rapport à la source
• Texte : toute signalétique ou impression dans le cadre

La solution la moins chère est compositionnelle. Un cadre qui se termine à mi-cuisse supprime entièrement le défaut de chaussure. Utilisez-le chaque fois que la moitié inférieure n'est pas le sujet. Une garde de prompt fonctionne aussi : "le cadre se termine à mi-cuisse et aucun pied, cheville ou chaussure n'est visible nulle part."

Résolution

Livrez environ 2x la plus grande largeur CSS que l'emplacement occupera, et servez le fichier 1x aux écrans 1x via srcset. Auditez le rapport effectif de chaque image à chaque position de défilement (pixels nécessaires divisés par les pixels du fichier ; au-dessus de 1.0 est flou). L'agrandissement d'une petite source ajoute des pixels, pas des détails. Dites-le, et proposez un nouveau rendu.

Champs de couleur et texte sur les images

Le texte sur une image ou un champ de couleur est mesuré, pas jugé. Le texte blanc nécessite 3:1 pour les grandes tailles et 4.5:1 pour la taille du corps, échantillonné à partir des pixels. Un voile à l'intérieur du champ corrige la lisibilité sans ternir la couleur. Une maquette d'interface placée sur un champ de couleur a besoin de sa propre couleur de texte, sinon elle hérite du blanc de la scène et disparaît sur une carte blanche.

Composition pour l'emplacement

Générez large, recadrez serré. Faites correspondre le format livré au cadre CSS afin que le navigateur n'ait presque rien à choisir :

• Grilles de cartes : un format pour chaque carte, défini sur le conteneur, object-fit: cover sur l'image
• Heroes : à environ 10% du ratio de la fenêtre le plus large que vous supportez
• Zones de superposition : lorsque le texte de la carte est placé sur le tiers inférieur d'une image, cette zone doit être calme
• Collages prouvant la cohérence : une grande cellule plus deux petites, toutes les trois au même format

Liste de contrôle

• Constantes écrites avant de générer
• Chaque section a une affirmation et une image qui la prouve
• Chaque image évaluée par rapport aux constantes ; les manquantes sont regénérées, pas acceptées
• Le ratio d'images claires par rapport aux images sombres correspond à l'ensemble existant
• Les modèles diffèrent dans l'ensemble ; le vêtement ou la lumière ne change pas
• Mains, pieds et détails du vêtement vérifiés à la résolution native
• Aucune marque tierce dans aucune source
• Espace pour le texte présent et du bon côté dans chaque cadre hero
• Le format livré correspond au cadre CSS ; le rapport effectif est inférieur ou égal à 1.0
• Le texte sur les images est mesuré pour le contraste
• Réutilisé avant d'être re-rendu ; tout lot de plus de six environ approuvé par une personne