Comment enregistrer des images pour le Web dans Photoshop

click fraud protection

L'une des fonctions les plus critiques offertes par Photoshop est la Enregistrer pour le Web/Appareils fonctionnalité.

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/les appareils fait trois choses cruciales.

  • Il optimise les dimensions du fichier (par exemple: 150 px X 150 px) lui permettant de s'intégrer dans des pages Web plus propres et d'avoir une meilleure apparence et moins déformées.
  • Il optimise la taille du fichier (par exemple: 23 ko) lui permettant de se télécharger plus rapidement.
  • Il enregistre au format RVB (ou moniteur) par opposition au format CMJN (impression).

Cet outil fonctionne très bien pour produire des icônes Twitter, des photos de profil Facebook, des fichiers de produits, des images de blog et des fichiers source pour les favicons.

Ouvrez votre fichier source

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

Pour commencer, vous devrez vous rendre sur

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.

Enregistrement de votre fichier pour le Web

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

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

Aller à Fichier/Enregistrer pour le Web/Appareils et cliquez. Il se trouve à peu près à mi-chemin dans le menu déroulant.

Ce processus ne modifie en rien votre fichier d'origine. Vous créez un nouveau fichier. Une fois que vous avez terminé ce didacticiel et que vous êtes revenu à votre image d'origine dans Photoshop, vous devrez enregistrer ce fichier si vous y avez apporté des modifications. Il est important de nommer votre nouvelle image différemment de celle d'origine. Il suffit souvent d'ajouter _la toile au nom du fichier fonctionnera bien. (exemple: nom_fichier_web.jpg)

Ajuster la vue de comparaison à 2-Up

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

En fonction de 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 affichera l'original, le droit affichera la qualité d'image avec les paramètres 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 voudrez.

Réglez votre taille de visualisation sur 100 %

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

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

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

Choisissez les dimensions du fichier

Choix des dimensions du fichier dans Photoshop CS5
Choix des dimensions du fichier dans Photoshop CS5.Capture d'écran de 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 zone d'image se trouve une petite image d'un maillon de chaîne. Ce que cela fait, c'est mettre à l'échelle la largeur lorsque vous ajustez la hauteur. Par exemple, une image de 600 pixels sur 400 pixels. Si vous réduisez la largeur à 300 pixels, le fichier sera automatiquement mis à l'échelle à une hauteur de 200 pixels. Si elle n'est pas cochée, l'image sera déformée.

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

Choisissez le type de fichier pour l'exportation

Choix du type de fichier à exporter dans Photoshop CS5
Choix du type de fichier à exporter dans Photoshop CS5.Capture d'écran de 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.

Note: pour commencer le processus, vous devrez cliquer sur l'image à 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 se 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.

Choisissez la qualité d'image

Choisissez la qualité d'image dans Photoshop CS5
Choisissez la qualité d'image dans Photoshop CS5.Capture d'écran de Bryan Haines

Chacune des trois options jpg (élevé, moyen, faible) a des paramètres de qualité prédéfinis - qui peuvent tous être ajustés manuellement. Si vous visionnez à 100 %, vous pouvez décider de la qualité dont vous avez besoin. Pour régler le niveau de zoom, reportez-vous à l'étape 5. L'image aura le même aspect en ligne que dans la fenêtre d'aperçu.

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

Enregistrez votre fichier

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

Une fois que vous avez effectué 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 souhaitez pour cette nouvelle image.

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

Compétences importantes pour les emplois de designer d'intérieur

Si vous aimez le design, la décoration et la création de combinaisons de couleurs cohérentes, design d'intérieur pourrait être un excellent choix de carrière pour vous. Les designers sont embauchés par des particuliers, des entreprises et des ag...

Lire la suite

Devenez un professionnel Google AdWords avec une formation gratuite

Un cadeau n'est pas souvent offert sur un plateau d'argent, mais c'est exactement ce que fait la formation Google Ads sur Skillshop. Pour ceux qui ne le connaissent pas encore, AdWords est le programme de publicité en ligne de Google. Les annonc...

Lire la suite

Descriptions de poste d'officier de l'armée de l'air

Pour devenir officier commissionné dans l'armée de l'air américaine, il faut avoir au minimum un baccalauréat. Dans certains domaines, comme le génie médical et civil, des diplômes spécialisés sont requis. On peut obtenir une commission dans l'U...

Lire la suite