Créer et modifier des images dans Photoshop

Photoshop reste l'outil de référence pour préparer les images d'un site : visuels d'en-tête, photos de produits, illustrations d'articles. Cette page suit l'ordre dans lequel le travail se fait réellement : créer ou ouvrir l'image, la recadrer et la redimensionner, la retoucher sans détruire l'original, puis l'exporter dans un format adapté au Web. Les raccourcis indiqués sont ceux de Windows (remplacez Ctrl par Cmd et Alt par Option sur Mac).

Photoshop s'utilise sur abonnement Adobe Creative Cloud. Depuis 2025, Adobe propose aussi une application Photoshop pour mobile avec des fonctions de base gratuites, pratique pour une retouche rapide mais pas pour un travail précis.

Si vous ne retouchez des images qu'occasionnellement, des alternatives gratuites font l'essentiel du travail décrit ici : Affinity, gratuit pour les particuliers depuis son rachat par Canva, ou Photopea, qui reprend l'interface de Photoshop dans le navigateur. La liste des logiciels de design en présente d'autres.

Avec Fichier > Nouveau (Ctrl+N), réglez :

• l'unité en pixels : sur un écran, seules les dimensions en pixels comptent ; la résolution en « pixels par pouce » n'a d'effet qu'à l'impression ;

• la largeur et la hauteur prévues à l'affichage, en tenant compte des écrans haute densité : une image affichée sur 800 pixels de large sera plus nette si elle en fait 1 600 ;

• le mode colorimétrique RVB, 8 bits : c'est ce qu'attendent les navigateurs (le mode CMJN sert à l'impression).

Pour un visuel qui doit respecter une charte graphique, préparez un document modèle avec vos couleurs et vos polices, et partez toujours de lui.

L'outil Recadrage (touche C) coupe les bords inutiles et impose un format : saisissez un ratio (16:9 pour un bandeau, 1:1 pour une vignette carrée) dans la barre d'options, puis placez le cadre.

La commande Image > Taille de l'image (Alt+Ctrl+I) change ensuite le nombre de pixels. Gardez le lien entre largeur et hauteur activé pour ne pas déformer l'image et laissez l'option Rééchantillonnage cochée. Deux règles :

• réduisez, n'agrandissez pas : agrandir une petite image avec cette commande la rend floue. Pour cela, il existe des outils dédiés, présentés dans Upscale une image avec l'IA ;

• redimensionnez avant d'envoyer l'image sur votre site : une photo d'appareil de 6 000 pixels de large n'a rien à faire sur une page Web.

À ne pas confondre avec Image > Taille de la zone de travail, qui agrandit ou réduit la toile sans toucher aux pixels de l'image (utile pour ajouter une marge autour d'un logo).

La force de Photoshop est de permettre des retouches réversibles. Trois réflexes :

• Dupliquez le calque (Ctrl+J) avant toute retouche directe : l'original reste intact en dessous.

• Utilisez des calques de réglage (Calque > Nouveau calque de réglage) pour la luminosité, les niveaux, les courbes ou la saturation : le réglage se modifie ou se supprime à tout moment.

• Masquez au lieu d'effacer : un masque de fusion cache une partie du calque sans la supprimer. Peindre en noir masque, peindre en blanc fait réapparaître.

Convertir un calque en objet dynamique (clic droit sur le calque) protège aussi la qualité : vous pouvez le réduire puis l'agrandir à nouveau sans perte, jusqu'à sa taille d'origine.

• Corriger la lumière : un calque de réglage Niveaux ou Courbes suffit souvent à rendre une photo de smartphone plus claire et plus contrastée.

• Supprimer un élément gênant : sélectionnez-le, puis Maj+F5 et « Contenu pris en compte » pour le remplacer par le décor environnant. Le remplissage génératif, basé sur l'IA d'Adobe, va plus loin (voir la page Photoshop).

• Détourer un sujet : la commande Sélection > Sujet sélectionne automatiquement la personne ou l'objet principal, que vous isolez ensuite avec un masque. D'autres méthodes, y compris en ligne, sont présentées dans Enlever le fond d'une image.

• Rendre un fond blanc transparent (un logo scanné, par exemple) : voir le tutoriel remplacer le blanc par du transparent.

Enregistrez toujours une version de travail au format PSD, qui conserve les calques : c'est elle que vous modifierez plus tard, pas le fichier exporté.

Photoshop propose plusieurs chemins, selon le format visé :

• Fichier > Exporter > Exportation rapide au format PNG : un clic, avec les réglages par défaut (le format proposé se change dans les préférences d'exportation).

• Fichier > Exporter > Exporter sous (Alt+Maj+Ctrl+W) : choix du format (PNG, JPG ou GIF), de la qualité et de la taille finale, avec un aperçu du poids du fichier. C'est l'option la plus utile au quotidien.

• Fichier > Enregistrer une copie : permet d'enregistrer en WebP, que Photoshop gère nativement depuis la version 23.2 (2022), en compression avec ou sans perte.

• Fichier > Exporter > Enregistrer pour le Web (hérité) (Alt+Maj+Ctrl+S) : l'ancienne fenêtre, toujours présente, appréciée pour comparer plusieurs réglages côte à côte.

Quel format choisir ? En résumé : JPG ou WebP pour les photos, PNG pour les images qui ont besoin de transparence ou de netteté parfaite (captures d'écran, logos en pixels). Le détail est expliqué dans Les formats d'images sur le Web.

Avant l'envoi, donnez au fichier un nom descriptif, en minuscules et sans accents (par exemple atelier-poterie-lyon.jpg) : dans WordPress, il est difficile de le changer ensuite, comme l'explique la page sur les images dans WordPress.

Même bien exportée, une image peut encore être allégée. Les étapes suivantes (compression automatique, conversion en WebP, chargement différé) sont décrites dans Optimiser des images dans WordPress.