Utilisation des images web

Rechercher
  1. Guide de l’utilisateur de Photoshop
  2. Présentation de Photoshop
    1. L’imaginer. Le créer.
    2. Nouveautés de Photoshop
    3. Modification de votre première photo
    4. Création de documents
    5. Photoshop | Questions courantes
    6. Configuration requise pour Photoshop
    7. Migration des paramètres prédéfinis, scripts et paramètres
    8. Découverte de Photoshop
  3. Services Photoshop et Adobe
    1. Photoshop et Adobe Stock
    2. Bibliothèques Creative Cloud
    3. Bibliothèques Creative Cloud dans Photoshop
    4. Grille et repères
    5. Création d’actions
    6. Commandes Annuler et Historique
    7. Raccourcis clavier par défaut
    8. Fonctionnalités tactiles et espaces de travail personnalisables
    9. Utilisation de la Touch Bar avec Photoshop
    10. Utilisation de l’extension Capture dans l’application sur Photoshop
  4. Photoshop sur iPad
    1. Photoshop sur iPad | Questions courantes
    2. Découverte de l’espace de travail
    3. Configuration requise | Photoshop sur iPad
    4. Création, ouverture et exportation de documents en ligne
    5. Ajout de photos
    6. Utilisation des calques
    7. Dessin et peinture à l’aide de pinceaux
    8. Réalisation de sélections et ajout de masques
    9. Retouche de vos compositions
    10. Utilisation des calques de réglage
    11. Réglage de la tonalité de votre composition à l’aide des courbes
    12. Exécution des opérations de transformation
    13. Recadrage et rotation des compositions
    14. Rotation, panoramique, zoom et réinitialisation des zones de travail
    15. Utilisation des calques de texte
    16. Utilisation de Photoshop et de Lightroom
    17. Obtention des polices manquantes dans Photoshop sur iPad
    18. Texte japonais dans Photoshop sur iPad
    19. Gestion des paramètres de l’application
    20. Raccourcis et mouvements tactiles
    21. Raccourcis clavier
    22. Configuration requise 1.x | Photoshop sur iPad
    23. Configuration requise 2.x | Photoshop sur iPad
    24. Modification de la taille de votre image
    25. Diffusion en direct de vos créations dans Photoshop sur iPad
    26. Correction des imperfections avec l’outil Correcteur
    27. Création de pinceaux dans Capture et utilisation dans Photoshop
  5. Photoshop sur le web
    1. Photoshop sur le web | Questions courantes
    2. Présentation de l’espace de travail
    3. Configuration requise | Photoshop sur le web
    4. Raccourcis clavier | Photoshop sur le web
    5. Types de fichiers pris en charge | Photoshop sur le web
    6. Ouverture et utilisation de documents en ligne
    7. Collaboration avec les parties prenantes
    8. Application de modifications limitées à vos documents en ligne
  6. Documents en ligne
    1. Documents en ligne de Photoshop | Questions courantes
    2. Documents en ligne de Photoshop | Questions relatives au workflow
    3. Gestion et utilisation de documents en ligne dans Photoshop
    4. Mise à niveau de l’espace de stockage en ligne pour Photoshop
    5. Impossible de créer ou d’enregistrer un document en ligne
    6. Résolution des erreurs de documents en ligne Photoshop
    7. Collecte des journaux de synchronisation de documents en ligne
    8. Partage d’accès et modification de vos documents en ligne
  7. Espace de travail
    1. Concepts de base sur l’espace de travail
    2. Création de documents
    3. Utilisation de la Touch Bar avec Photoshop
    4. Prise en charge de Microsoft Dial dans Photoshop
    5. Galeries d’outils
    6. Préférences de performances
    7. Utilisation des outils
    8. Mouvements tactiles
    9. Fonctionnalités tactiles et espaces de travail personnalisables
    10. Aperçus de technologie
    11. Métadonnées et annotations
    12. Partage rapide de vos créations
    13. Importation d’images Photoshop dans d’autres applications
    14. Préférences
    15. Raccourcis clavier par défaut
    16. Règles
    17. Affichage ou masquage des extras non imprimables
    18. Spécification des colonnes pour une image
    19. Commandes Annuler et Historique
    20. Panneaux et menus
    21. Importation de fichiers
    22. Positionnement des éléments avec le magnétisme
    23. Positionnement avec l’outil Règle
    24. Paramètres prédéfinis
    25. Personnalisation des raccourcis clavier
    26. Grille et repères
  8. Web, écran et conception d’application
    1. Photoshop pour la création
    2. Plans de travail
    3. Exportation de fichiers dans Photoshop
    4. Aperçu sur l’appareil
    5. Copie des propriétés CSS à partir de calques
    6. Découpage en tranches des pages web
    7. Options HTML pour les tranches
    8. Modification de la mise en page de la tranche
    9. Utilisation des images web
    10. Création de galeries de photos web
  9. Principes de base sur les images et les couleurs
    1. Redimensionnement des images
    2. Utilisation d’images pixellisées et vectorielles
    3. Taille et résolution de l’image
    4. Acquisition d’images à partir d’un appareil photo ou d’un scanner
    5. Création, ouverture et importation d’images
    6. Affichage des images
    7. Erreur de marqueur JPEG incorrect | Ouverture d’images
    8. Affichage de plusieurs images
    9. Personnalisation des sélecteurs et nuanciers
    10. Images HDR (High Dynamic Range)
    11. Correspondance des couleurs de votre image
    12. Conversion entre modes colorimétriques
    13. Modes colorimétriques
    14. Effacement de certaines parties d’une image
    15. Modes de fusion
    16. Sélection des couleurs
    17. Personnalisation des tables de couleurs indexées
    18. Informations sur l’image
    19. Les filtres de distorsion sont indisponibles
    20. À propos de la couleur
    21. Réglages de la couleur et du monochrome à l’aide des couches
    22. Sélection des couleurs dans les panneaux Couleur et Nuancier
    23. Exemple
    24. Mode colorimétrique ou mode Image
    25. Dominante de couleur
    26. Ajout d’un changement de mode conditionnel à une action
    27. Ajout de nuances à partir de fichiers HTML, CSS et SVG
    28. Profondeur et préférences
  10. Calques
    1. Concepts de base sur les calques
    2. Modification non destructrice
    3. Création et gestion de calques et de groupes
    4. Sélection, association et liaison de calques
    5. Importation d’images dans des blocs d’image
    6. Opacité et fusion de calque
    7. Masquage des calques
    8. Application de filtres dynamiques
    9. Compositions de calques
    10. Déplacement, superposition et verrouillage des calques
    11. Masquage de calques à l’aide de masques vectoriels
    12. Gestion des calques et des groupes
    13. Effets et styles de calque
    14. Modification des masques de calque
    15. Extraction de ressources
    16. Démasquer des calques grâce à des masques d’écrêtage
    17. Génération de fichiers d’image à partir de calques
    18. Utilisation des objets dynamiques
    19. Modes de fusion
    20. Combinaison de plusieurs images dans un seul portrait de groupe
    21. Association d’images avec des calques automatiquement fusionnés
    22. Alignement et répartition de calques
    23. Copie des propriétés CSS à partir de calques
    24. Chargement de sélections à partir des limites d’un masque de fusion ou d’un calque
    25. Masquage pour afficher le contenu des autres calques
    26. Calque
    27. Aplatissement
    28. Composite
    29. Arrière-plan
  11. Sélections
    1. Espace de travail Sélectionner et masquer
    2. Création de sélections rapides
    3. Prise en main des sélections
    4. Sélection à l’aide des outils de sélection
    5. Sélection à l’aide des outils Lasso
    6. Sélection d’une plage de couleurs dans une image
    7. Ajustement des sélections de pixels
    8. Conversion des tracés en cadres de sélection et inversement
    9. Concepts de base sur les couches
    10. Déplacement, copie et suppression de pixels sélectionnés
    11. Création d’un masque temporaire
    12. Enregistrement de sélections et de masques de couche alpha
    13. Sélection des zones actives de l’image
    14. Duplication, fractionnement et fusion de couches
    15. Opérations sur les couches
    16. Sélection
    17. Cadre de sélection
  12. Réglages d’images
    1. Déformation de perspective
    2. Réduction du flou dû aux tremblements de l’appareil photo
    3. Exemples de Correcteur
    4. Exportation des tables de correspondance de couleur
    5. Réglage de la netteté et du flou des images
    6. Réglage des couleurs
    7. Application du réglage Luminosité/Contraste
    8. Réglage des détails des tons foncés et des tons clairs
    9. Réglage Niveaux
    10. Réglage de la teinte et de la saturation
    11. Réglage de la vibrance
    12. Réglage de la saturation des couleurs dans des zones d’image
    13. Appliquer des réglages rapides de tons
    14. Application d’effets de couleur spéciaux aux images
    15. Amélioration de votre image grâce aux réglages de la balance des couleurs
    16. Images HDR (High Dynamic Range)
    17. Affichage des histogrammes et des valeurs des pixels
    18. Correspondance des couleurs de votre image
    19. Recadrage et redressement des photos
    20. Conversion d’une image couleur en photo noir et blanc
    21. Calques de réglage et de remplissage
    22. Réglage Courbes
    23. Modes de fusion
    24. Optimisation des images pour l’impression
    25. Réglage des tons et des couleurs à l’aide des pipettes Niveaux et Courbes
    26. Réglage de l’exposition et des tonalités HDR
    27. Filtre
    28. Flou
    29. Éclaircissement ou obscurcissement de zones de l’image
    30. Réglages de la correction sélective
    31. Remplacement des couleurs d’objets
  13. Adobe Camera Raw
    1. Configuration requise pour Camera Raw
    2. Nouveautés de Camera Raw
    3. Présentation de Camera Raw
    4. Création de panoramas
    5. Objectifs compatibles
    6. Effets de vignettage, de grain et de correction du voile dans Camera Raw
    7. Raccourcis clavier par défaut
    8. Correction automatique de perspective dans Camera Raw
    9. Comment effectuer des modifications non destructrices dans Camera Raw
    10. Filtre radial dans Camera Raw
    11. Gestion des paramètres Camera Raw
    12. Ouverture, traitement et enregistrement d’images dans Camera Raw
    13. Correction des images grâce à l’outil Suppression des défauts amélioré de Camera Raw
    14. Rotation, recadrage et retouche d’images
    15. Réglage du rendu des couleurs dans Camera Raw
    16. Récapitulatif des fonctionnalités | Adobe Camera Raw | Versions 2018
    17. Récapitulatif des nouvelles fonctionnalités
    18. Versions de processus dans Camera Raw
    19. Réglages locaux dans Camera Raw
  14. Réparation et restauration d’image
    1. Suppression d’objets dans les photos depuis l’espace Remplissage d’après le contenu
    2. Correctif et déplacement basés sur le contenu
    3. Retouche et correction des photos
    4. Correction de la distorsion et du bruit d’une image
    5. Procédures de dépannage simples pour résoudre la majorité des problèmes
  15. Transformations d’images
    1. Transformation d’objets
    2. Réglage du recadrage, de la rotation et de la dimension de la zone de travail
    3. Recadrage et redressement des photos
    4. Création et modification d’images panoramiques
    5. Déformation d’images, de formes et de tracés
    6. Point de fuite
    7. Utilisation du filtre Fluidité
    8. Mise à l’échelle sensible au contenu
    9. Transformation d’images, de formes et de tracés
    10. Déformation
    11. Transformation
    12. Panorama
  16. Dessin et peinture
    1. Peinture de motifs symétriques
    2. Traçage de rectangles et modification des options de contour
    3. À propos du dessin
    4. Dessin et modification de formes
    5. Outils de peinture
    6. Création et modification de pinceaux
    7. Modes de fusion
    8. Ajout de couleurs aux tracés
    9. Modification des tracés
    10. Utilisation de l’outil Pinceau mélangeur pour peindre
    11. Pinceaux prédéfinis
    12. Dégradés
    13. Fond et contour des sélections, des calques et des tracés
    14. Dessin avec les outils Plume
    15. Création de motifs
    16. Création d’un motif avec le filtre Placage de motif
    17. Gestion des tracés
    18. Gestion des motifs prédéfinis et des bibliothèques de motifs
    19. Dessin ou peinture réalisé avec une tablette graphique
    20. Création de pinceaux texturés
    21. Ajout d’éléments dynamiques à des pinceaux
    22. Dégradé
    23. Peinture de contours stylisés avec le pinceau d’historique artistique
    24. Peinture avec motifs
    25. Synchronisation des paramètres prédéfinis sur plusieurs appareils
  17. Texte
    1. Utilisation des polices OpenType SVG
    2. Mise en forme des caractères
    3. Mise en forme des paragraphes
    4. Création d’effets de texte
    5. Modification du texte
    6. Espacement des lignes et des caractères
    7. Texte en arabe et en hébreu
    8. Polices
    9. Dépannage des polices
    10. Texte asiatique
    11. Création de texte
    12. Erreur du moteur de texte lors de l’utilisation de l’outil Texte dans Photoshop | Windows 8
    13. Compositeur universel de scripts asiatiques
    14. Comment ajouter et modifier du texte dans Photoshop
  18. Vidéo et animation
    1. Montage vidéo dans Photoshop
    2. Édition des calques vidéo et d’animation
    3. Présentation de vidéos et d’animations
    4. Aperçu des vidéos et des animations
    5. Retouche d’images dans les calques vidéo
    6. Importation de fichiers vidéo et de séquences d’images
    7. Création d’animations d’images
    8. Animation 3D Creative Cloud (aperçu)
    9. Création d’animations de montage
    10. Création d’images pour la vidéo
  19. Filtres et effets
    1. Utilisation du filtre Fluidité
    2. Utilisation de la galerie des effets de flou
    3. Concepts de base sur les filtres
    4. Référence des effets de filtre
    5. Ajout d’effets d’éclairage
    6. Utilisation du filtre grand-angle adaptatif
    7. Utilisation du filtre Peinture à l’huile
    8. Effets et styles de calque
    9. Application de filtres spécifiques
    10. Étalement de la couleur dans des zones de l’image
  20. Enregistrement et exportation
    1. Enregistrement de fichiers dans des formats graphiques
    2. Enregistrement de fichiers dans Photoshop
    3. Formats de fichier
    4. Enregistrement et exportation de vidéos et d’animations
    5. Enregistrement des fichiers PDF
    6. Protection de copyright Digimarc
  21. Impression
    1. Impression d’objets 3D
    2. Impression à partir de Photoshop
    3. Impression avec gestion des couleurs
    4. Planches contact et présentations PDF
    5. Impression de photos dans une disposition de collection d’images
    6. Impression de tons directs
    7. Images bichromes
    8. Impression d’images sur une presse commerciale
    9. Amélioration des impressions couleur depuis Photoshop
    10. Dépannage des problèmes d’impression | Photoshop
  22. Automatisation
    1. Création d’actions
    2. Création de graphiques dynamiquement adaptés aux données
    3. Script
    4. Traitement des fichiers par lots
    5. Lecture et gestion des actions
    6. Ajout d’actions conditionnelles
    7. À propos des actions et du panneau Actions
    8. Enregistrement d’outils dans des actions
    9. Ajout d’un changement de mode conditionnel à une action
    10. Boîte à outils de l’interface utilisateur de Photoshop pour les modules externes et les scripts
  23. Traitement d’image 3D et technique
    1. Animation 3D Creative Cloud (aperçu)
    2. Impression d’objets 3D
    3. Peinture 3D
    4. Améliorations du panneau 3D | Photoshop
    5. Outils et concepts 3D essentiels
    6. Rendu et enregistrement 3D
    7. Création d’objets et d’animations 3D
    8. Piles d’images
    9. Workflow 3D
    10. Mesure
    11. Fichiers DICOM
    12. Photoshop et MATLAB
    13. Comptage d’objets dans une image
    14. Combinaison et conversion d’objets 3D
    15. Modification des textures 3D
    16. Réglage de l’exposition et des tonalités HDR
    17. Paramètres du panneau 3D
  24. Gestion des couleurs
    1. Compréhension de la gestion des couleurs
    2. Homogénéité des couleurs
    3. Paramètres de couleurs
    4. Utilisation des profils colorimétriques
    5. Gestion des couleurs de documents pour un affichage en ligne
    6. Gestion des couleurs de documents pour l’impression
    7. Gestion des couleurs des images importées
    8. Épreuvage des couleurs

Les outils web de Photoshop facilitent la création d’éléments pour vos pages web ou la sortie de pages web complètes dans des formats prédéfinis ou personnalisés.

  • Utilisez des calques et des tranches pour créer des pages web et des éléments d’interface de pages web. (Voir les sections Calques et Découpage de pages web.)

  • Utilisez des compositions de calques pour tester différentes compositions de pages ou exporter des variantes d’une page. (Voir la section Compositions de calques.)

  • Créez de images survolées de texte ou de bouton, appelées transformations par souris, pour les importer dans Dreamweaver ou Flash.

  • Créez des animations web avec le panneau Animation, puis exportez-les en tant que fichiers QuickTime ou qu’images GIF animées. (Voir la section Création d’animations d’images.)

  • Utilisez Adobe Bridge pour créer une galerie web photo afin de transformer rapidement une série d’images en un site web interactif à l’aide d’un large éventail de modèles de sites à l’aspect très professionnel.

Pour visionner une vidéo sur la conception de sites web avec Photoshop et Dreamweaver, rendez-vous à l’adresse Accès à Photoshop depuis Dreamweaver pour améliorer l’image web.

Création d’images de transformations par souris

Une transformation par souris est un bouton ou une image d’une page web qui change d’apparence au passage du curseur de la souris. Pour créer une transformation par souris, vous devez disposer d’au moins deux images : une image principale pour l’état normal et une image secondaire pour l’état transformé.

Photoshop compte de nombreux outils permettant de créer des images de transformations par souris :

  • Utilisez des calques pour créer les images principales et secondaires. Créez du contenu sur un calque, puis dupliquez le calque et modifiez-le pour créer un contenu similaire tout en conservant l’alignement entre les calques. Lorsque vous créez un effet de transformation par souris, vous pouvez changer le style, la visibilité ou la position du calque, régler les couleurs et la tonalité ou appliquer des effets de filtre (voir la section Duplication de calques).

  • Vous pouvez également utiliser des styles de calques pour appliquer des effets, tels qu’un cache de couleur, une ombre portée, une lueur ou un estampage, au calque principal. Pour créer les deux images d’une transformation par souris, activez le style de calque, désactivez-le, puis enregistrez l’image dans chacun des états (voir la section Effets et styles de calque).

  • Utilisez les styles prédéfinis de boutons du panneau Styles pour créer rapidement des boutons à transformation par souris dans trois états possibles : normal, survolé et enfoncé. Dessinez une forme de base avec l’outil Rectangle, puis appliquez un style, tel que Biseau normal, pour transformer automatiquement le rectangle en bouton. Copiez ensuite le calque, puis appliquez d’autres styles prédéfinis, par exemple Biseau souris survolée, pour créer des états de bouton supplémentaires. Enregistrez chacun des calques comme une image distincte pour terminer la création d’un ensemble de transformations par souris.

  • Utilisez la boîte de dialogue Enregistrer pour le Web et les périphériques pour enregistrer les images de transformations par souris dans un format Web et dans une taille de fichier optimisée. 

Remarque :

Lorsque vous enregistrez des images de transformations par souris, utilisez une convention de dénomination permettant de distinguer l’image principale (état normal) de l’image secondaire (état transformé).

Une fois que vous avez créé un ensemble d’images de transformations par souris dans Photoshop, utilisez Dreamweaver pour placer les images sur une page web et ajouter automatiquement le code JavaScript pour l’opération de transformation.

Exportation dans Zoomify

Vous pouvez poster sur le web des images haute résolution avec lesquelles les utilisateurs pourront effectuer un panoramique ou agrandir les vues pour afficher plus de détails. Le téléchargement d’une image de taille standard prend autant de temps que celui d’un fichier JPEG de même taille. Photoshop exporte les fichiers JPEG et le fichier HTML que vous pouvez charger vers votre serveur web.

  1. Choisissez Fichier > Exportation > Zoomify, puis définissez les options d’exportation.

    Modèle

    Définit l’arrière-plan et la navigation de l’image affichée dans le navigateur.

    Emplacement de sortie

    Définit l’emplacement et le nom du fichier.

    Options de mosaïque d’image

    Définit la qualité de l’image.

    Options du navigateur

    Définit la largeur et la hauteur en pixels de l’image de base dans le navigateur des utilisateurs.

  2. Chargez les fichiers HTML et image vers votre serveur web.

Utilisation des valeurs hexadécimales des couleurs

Photoshop peut afficher les valeurs hexadécimales des couleurs d’une image ou copier la valeur hexadécimale d’une couleur en vue de son utilisation dans un fichier HTML.

Affichage des valeurs hexadécimales de couleurs dans le panneau Informations

  1. Choisissez la commande Fenêtre > Informations ou cliquez sur l’onglet du panneau Informations pour afficher le panneau.
  2. Choisissez la commande Options de panneau dans le menu du panneau. Dans les zones Infos couleur 1re lecture ou Infos couleur 2e lecture, choisissez Couleurs web dans le menu Mode, puis cliquez sur OK.
  3. Placez le curseur sur la couleur dont vous voulez afficher les valeurs hexadécimales.

Copie d’une couleur sous forme de valeur hexadécimale

Photoshop copie couleurs soit comme un attribut HTMLCOLOR contenant la valeur hexadécimale (color=#xxyyzz) ou comme la valeur hexadécimale seule.

  1. Utilisez l’une des méthodes suivantes :

    • Avec l’outil Pipette, placez le pointeur sur la couleur à copier. Cliquez sur le bouton droit de la souris (Windows) ou cliquez en maintenant la touche Contrôle enfoncée (Mac OS), puis choisissez Copier la couleur en HTML ou Copier le code hexadécimal de la couleur.

    • Définissez la couleur de premier plan à l’aide du panneau Couleur, du panneau Nuancier ou du sélecteur de couleurs Adobe. Dans le menu du panneau Couleur, choisissez la commande Copier la couleur en HTML ou Copier le code hexadécimal de la couleur.

    • Dans la boîte de dialogue Enregistrer pour le web, cliquez sur l’échantillon de couleur ou sélectionnez Cache > Autre. Dans le sélecteur de couleurs Adobe, cliquez avec le bouton droit sur la valeur hexadécimale, puis sélectionnez Copier.

  2. Ouvrez le fichier souhaité dans un éditeur HTML, puis sélectionnez Édition > Coller.

Articles connexes

Logo Adobe

Accéder à votre compte

Liens rapides

Voir toutes vos formules Gérer vos formules

Mentions légales    |    Politique de confidentialité en ligne