Comment enregistrer des images pour le Web dans Photoshop

L'une des fonctions les plus critiques que Photoshop offre est la fonction Save for Web / Devices .

Pourquoi l'utiliser? Bien que vous puissiez simplement enregistrer votre fichier dans une méthode standard, telle que Fichier / Enregistrer sous , la fonction Enregistrer pour le Web / Périphériques a trois fonctions cruciales.

Cet outil fonctionne très bien pour la production d'icônes Twitter, de photos de profils Facebook, de fichiers de produits, d'images de blogs et de fichiers sources pour les favicons.

  • 01 - Ouvrez votre fichier source

    Fichier / Ouvrir Photoshop. Capture d'écran par Bryan Haines

    Pour commencer, vous devez aller dans Fichier / Ouvrir pour ouvrir votre fichier. Il peut être dans n'importe quel format - jpg, gif, psd, png ou autres. Tant que Photoshop peut l'ouvrir, vous pouvez le sortir pour le web.

  • 02 - Sauvegarde de votre fichier pour le Web

    Fichier Enregistrer Photoshop CS5. Capture d'écran par Bryan Haines

    Nous allons passer à l'enregistrement sur le Web, en supposant que vous ayez effectué les ajustements nécessaires. Évidemment, si vous avez besoin de modifier l'image, faites-le d'abord et continuez avec cette étape plus tard.

    Allez dans Fichier / Enregistrer pour le Web / Périphériques et cliquez sur. Il est à peu près à mi-chemin dans le menu déroulant.

    Ce processus ne change pas du tout le fichier d'origine. Vous créez un nouveau fichier. Une fois que vous avez terminé ce didacticiel et que vous revenez à votre image d'origine dans Photoshop, vous devez enregistrer ce fichier si vous y avez apporté des modifications. Il est important de nommer votre nouvelle image différente de celle d'origine. Souvent ajouter simplement _web au nom du fichier fonctionnera bien. (exemple: nom_fichier_web.jpg)

  • 03 - Ajuster la vue de comparaison à 2-Up

    Comparaison côte à côte Photoshop CS5. Capture d'écran par Bryan Haines

    Selon vos paramètres, vous devrez peut-être ajuster la vue ici. Ce que vous voulez, c'est une comparaison gauche et droite de votre image. Le côté gauche montrera l'original, le droit montrera la qualité de l'image aux réglages actuels.

    Si vous regardez en haut de la fenêtre, vous verrez les options suivantes: Original, Optimisé, 2-Up, 4-Up. Dans la plupart des cas, 2-Up est ce que vous voulez.

  • 04 - Réglez la taille de votre visionnage sur 100%

    Ajustement de la vue à 100% dans Photoshop CS5. Capture d'écran par Bryan Haines

    Pour vous assurer que vous regardez à 100%, cochez l'option dans le coin inférieur gauche de l'écran.

    Il est important de se rappeler que si vous regardez votre image à plus de 100%, elle aura l'air granuleuse ou peut-être même indéchiffrable. Travaillez toujours avec l'image à 100%.

  • 05 - Choisir les dimensions du fichier

    Choisir les dimensions de fichier dans Photoshop CS5. Capture d'écran par Bryan Haines

    Les dimensions pour le web sont presque toujours en pixels (px). Il est important de garder les proportions correctes. À côté de la boîte d'image est une petite image d'un lien en chaîne. Qu'est-ce que cela fait est l'échelle de la largeur lorsque vous ajustez la hauteur. Par exemple, une image de 600 px par 400 px. Si vous réduisez la largeur à 300 px, le fichier sera automatiquement mis à l'échelle à une taille de 200 px. Si cette case n'est pas cochée, l'image sera déformée.

    Vous avez également la possibilité de redimensionner l'image en pourcentage.

  • 06 - Choisissez le type de fichier à exporter

    Choisir le type de fichier pour l'exportation dans Photoshop CS5. Capture d'écran par Bryan Haines

    Dans cette option, le type de fichier d'origine n'a pas d'importance. Vous pouvez choisir le fichier dont vous avez besoin.

    Remarque: pour commencer le processus, vous devrez cliquer sur l'image sur la droite. L'image doit être sélectionnée pour être traitée.

    Le plus courant est jpg pour le web - c'est le plus petit format de fichier ce qui signifie qu'il télécharge plus rapidement pour les visiteurs de votre site. Si vous avez de la transparence, choisissez png-24. Si vous ne savez pas ce que signifie la transparence, vous devriez choisir jpg.

  • 07 - Choisir la qualité de l'image

    Choisissez Qualité d'image dans Photoshop CS5. Capture d'écran par Bryan Haines

    Chacune des trois options jpg (High, Medium, Low) a des paramètres de qualité prédéfinis - qui peuvent tous être ajustés manuellement. Si vous visualisez à 100%, vous pouvez décider de la qualité dont vous avez besoin. Pour ajuster le niveau de zoom, voir l'étape 5. L'image sera la même en ligne que dans la fenêtre d'aperçu.

    Si vous avez choisi autre chose que jpg, vous pouvez passer cette étape.

  • 08 - Sauvegardez votre fichier

    Enregistrez votre fichier dans Photoshop CS5. Capture d'écran par Bryan Haines

    Une fois que vous avez fait les ajustements nécessaires, vous êtes prêt à enregistrer le fichier. Cliquez sur "Enregistrer" et choisissez le dossier et le nom de fichier que vous voulez pour cette nouvelle image.

    Toutes nos félicitations! Votre nouveau fichier est prêt à être utilisé en ligne.