Tutoriels design

Cette rubrique rassemble des tutoriels de design transversaux, utilisables quel que soit votre logiciel. Chacun répond à une question précise qui revient souvent quand on prépare les visuels ou les pages d'un site.

Vous y apprendrez à enlever le fond d'une image en quelques clics avec un outil en ligne, ou à effacer un objet gênant sur une photo, et à mettre en page de longs textes pour qu'ils restent agréables à lire à l'écran. Pour les manipulations propres à un logiciel, voyez aussi les tutoriels Photoshop.

Les tutoriels de cette rubrique portent sur deux familles de gestes qu'un éditeur de site refait sans cesse : préparer les images (détourer un produit, effacer un élément gênant, obtenir un fond transparent) et mettre en forme le texte pour qu'il soit lu jusqu'au bout. Ils ne demandent pas de logiciel particulier : un outil en ligne gratuit suffit souvent, et les mêmes principes valent dans Figma, Photoshop, Affinity ou l'éditeur de votre site.

Chaque tutoriel part d'un problème concret, donne la méthode pas à pas, puis signale les limites de l'outil et les pièges à éviter. La liste complète des tutoriels de la rubrique s'affiche en bas de cette page.

Partez de la situation que vous rencontrez :

• Poser un produit ou un portrait sur un fond de couleur : enlever le fond d'une image montre comment détourer un sujet en un clic avec un outil en ligne.

• Effacer un passant, un câble ou un texte sur une photo : la même page présente un outil d'IA qui reconstruit la zone effacée.

• Rendre transparent le fond blanc d'un logo : si vous travaillez dans Photoshop, suivez remplacer le blanc par du transparent.

• Agrandir une image trop petite ou floue : voyez upscale une image avec l'IA.

• Rendre un long article plus agréable à lire : design avec longs textes réunit les réglages de largeur, de taille et d'interlignage, avec une liste de contrôle avant publication.

• Choisir et régler les polices du site : la page typographie va plus loin sur le choix et l'association des polices.

• Alléger des images qui ralentissent le site : voyez optimiser des images dans WordPress.

Détourer, c'est séparer le sujet d'une image de son arrière-plan. Le résultat n'a d'intérêt que si le fichier garde la transparence : c'est le cas des formats PNG, WebP et AVIF, qui gèrent un canal alpha (le degré d'opacité de chaque pixel), mais pas du JPG, qui n'en a pas. Un produit détouré puis enregistré en JPG retrouve donc un fond uni, souvent blanc selon le logiciel. Le guide des formats d'images de MDN détaille ce que gère chaque format ; pour choisir selon l'usage, voyez les formats d'images sur le Web.

Un détourage automatique se vérifie toujours en zoomant : cheveux, fourrure, objets transparents (verre, voilage) et contours flous sont les zones à contrôler en priorité. Posez ensuite l'image détourée sur le fond définitif de la page, clair ou foncé, pour repérer un liseré resté autour du sujet.

Les outils d'effacement récents ne se contentent plus de flouter ou de recopier une zone voisine : l'IA reconstruit ce qui se trouvait derrière l'objet retiré. C'est rapide et souvent convaincant sur un ciel, un mur ou une pelouse, moins fiable sur des motifs réguliers, du texte ou des visages. Regardez le résultat à taille réelle avant de le publier.

Effacer un filigrane ou un logo ne donne aucun droit sur une image : une photo trouvée sur Internet reste en général protégée par le droit d'auteur, retouchée ou non. Pour des images utilisables sans risque, voyez où trouver des images gratuites.

Un texte se lit d'autant mieux que ses lignes sont courtes, son interlignage aéré et son contraste suffisant. Les règles d'accessibilité WCAG donnent des repères chiffrés, comme 80 caractères au plus par ligne ; ils sont détaillés, avec leurs sources, dans design avec longs textes. Sur téléphone, la colonne de texte et les images se réorganisent : voyez aussi la page responsive.

Gardez toujours le fichier d'origine en haute résolution et retouchez une copie. Exportez ensuite pour le Web une version dont la largeur correspond à l'emplacement où l'image sera affichée, avec un peu de marge pour les écrans haute définition : une photo de plusieurs milliers de pixels posée dans une colonne étroite alourdit la page sans rien gagner en netteté. Les pages créer et modifier des images dans Photoshop et dans Figma montrent comment exporter au bon format.

• Enregistrer en JPG une image détourée : la transparence disparaît.

• Publier une retouche par IA sans la regarder à 100% : les défauts se voient surtout sur grand écran.

• Étirer une petite image pour remplir un bandeau : elle devient floue ; mieux vaut l'agrandir avec un outil dédié ou en choisir une autre.

• Laisser un long texte s'étaler sur toute la largeur d'un grand écran.

• Modifier l'original au lieu d'une copie, et perdre la version en haute résolution.

Ces tutoriels complètent les autres rubriques Design : Images pour trouver, choisir et optimiser les visuels, Typographie pour les polices, Branding pour le logo et les couleurs, et Web Design dans WordPress pour appliquer tout cela à un site WordPress.