Éditeur d'images
Ce document décrit comment utiliser l'éditeur d'images Visual Studio pour afficher et modifier des ressources d'images et de texture.
Vous pouvez utiliser l'Éditeur d'images pour utiliser les genres de formats d'image et de texture riches utilisés dans le développement de l'application DirectX. Cela inclut la prise en charge des formats de fichiers d'image et des encodages de couleur populaires, des fonctionnalités telles que les canaux alpha et le mappage MIP, et plusieurs formats de texture hautement compressés et à accélération matérielle que DirectX prend en charge.
Formats pris en charge
L'éditeur d'images prend en charge ces formats d'image :
Nom de format |
Extension de nom de fichier |
---|---|
PNG (Portable Network Graphics) |
png |
JPEG |
.jpg, .jpeg, .jpe, .jfif |
Direct Draw Surface |
.dds |
GIF (Graphics Interchange Format) |
.gif |
Bitmap |
.bmp, .dib |
TIFF (Tagged Image File Format) |
.tif, .tiff |
TGA (Targa) |
.tga |
Mise en route
Cette section décrit comment ajouter une image à votre projet Visual Studio et comment le configurer selon vos besoins.
Pour ajouter une image à votre projet
Dans l'Explorateur de solutions, ouvrez le menu contextuel du projet dans lequel vous voulez ajouter l'image, et ensuite choisissez Ajouter, Nouvel item.
Dans la boîte de dialogue Ajouter un nouvel élément, sous Installé, sélectionnez Graphiques, puis sélectionnez un format de fichier approprié pour l'image. Pour plus d'informations sur le choix d'un format de fichier selon vos besoins, consultez la section suivante.
Spécifiez leNom du fichier image et l'Emplacement où vous souhaitez le créer.
Choisissez le bouton Ajouter.
Choisir le format d'image
Selon la façon dont vous envisagez d'utiliser l'image, certains formats de fichiers peuvent être plus pertinents que d'autres. Par exemple, certains formats peuvent ne pas prendre en charge une fonctionnalité_comme la transparence ou un format de couleur spécifique- ou ne peut pas fournir la compression appropriée pour le type de contenu image que vous aviez planifiée.
Les informations suivantes peuvent vous aider à choisir un format image qui répond à vos besoins.
Image bitmap (.bmp)
Format d'image bitmap. Format d'image non compressé qui prend en charge les couleurs 24 bits. Le format bitmap ne prend pas en charge la transparence.Image GIF (.gif)
Format d'image GIF (Graphics Interchange Format). Un format d'image LZW compressé sans perte d'image qui prend en charge jusqu'à 256 couleurs. Inapproprié pour les photographies et les images qui ont une quantité importante de détails de couleur, mais fournit de bons taux de compression pour les images de couleur faible dont le niveau de cohérence de couleur est élevé.Image JPG (.jpg)
Format d'image JPEG (Joint Photographic Experts Group). Format d'image hautement compressé avec perte qui prend en charge la couleur 24 bits et qui convient pour la compression à usage général d'images dont le niveau de cohérence de couleur est élevé.Image PNG (.png)
Format d'image PNG (Portable Network Graphics). Format d'image modérément compressé sans perte qui prend en charge la couleur 24 bits et la transparence alpha. Il est adapté aussi bien aux images naturelles qu'aux images artificielles mais ne fournit pas des taux de compression aussi bons que les formats avec perte tels que les formats JPG ou GIF.Image TIFF (.tif)
Format d'image TIFF ou TIF (Tagged Image File Format). Format d'image flexible qui prend en charge plusieurs schémas de compression.Texture DDS (.dds)
Format de texture de surface de DirectDraw (DDS). Format de texture hautement compressé avec perte qui prend en charge la couleur 24 bits et la transparence alpha. Ses taux de compression peuvent aller jusqu'à 8:1. Il est basé sur le compactage de la texture S3, qui peut être décompressée sur le matériel graphique.Image TGA (.tga)
Format d'image TGA (carte graphique Truevision, également appelée Targa). Format RLE compressé sans perte d'image qui prend en charge des images mappées en couleurs (palette de couleurs) ou de couleurs directes jusqu'à une transparence colorimétrique ou alpha de 24 bits. Inapproprié pour les photographies et les images qui ont une quantité importante de détails de couleur, mais fournit de bons taux de compression pour les images qui disposent de longues étendues de couleurs identiques.
Configurer l'image
Avant de commencer à travailler sur l'image que vous venez de créer, vous pouvez modifier la configuration par défaut. Par exemple, vous pouvez modifier ses dimensions ou le format de couleurs qu'elle utilise. Pour plus d'informations sur la configuration de ces propriétés de l'image ou d'autres propriétés, consultez Propriétés de l'image.
Notes
Avant d'enregistrer votre travail, veillez à définir la propriété Format de couleur si vous souhaitez utiliser un format de couleur spécifique.Si un format de fichier prend en charge la compression, vous pouvez régler les paramètres de compression lorsque vous enregistrez le fichier pour la première fois ou lorsque vous choisissez Enregistrer sous.
Utilisation de l'Éditeur d'images
Cette section décrit comment utiliser l'Éditeur d'images pour créer et modifier des textures et des images.
Barres d'outils Éditeur d'images
Les barres d'outils Éditeur d'images contiennent des commandes qui vous aident à utiliser des images.
Les commandes qui affectent l'état de l'Éditeur d'images se trouvent dans la barre d'outils du Mode Éditeur d'imagesen meme temps que des commandes avancées. La barre d'outils est située le long du bord le plus élevé de l'aire de conception de l'Éditeur d'image. Les outils de dessin se trouvent dans la barre d'outils de l'Éditeur d'images le long du bord à l'extrême gauche de la zone de conception de l'Éditeur d'image.
Voici la barre d'outils du mode de l'Éditeur d'images:
Ce tableau décrit les éléments dans la barre d'outils Mode de l'Éditeur d'images, répertoriés dans l'ordre dans lequel ils s'affichent de gauche à droite.
Élément de barre d'outils |
Description |
---|---|
Sélectionner |
Active la sélection d'une zone rectangulaire d'une image. Après avoir sélectionné une zone, vous pouvez la couper, la copier, la déplacer, la mettre à l'échelle, la faire pivoter, la retourner ou la supprimer. Lorsqu'une sélection est active, les outils de dessin affectent uniquement la zone sélectionnée. |
Sélection irrégulière |
Active la sélection d'une zone irrégulière d'une image. Après avoir sélectionné une zone, vous pouvez la couper, la copier, la déplacer, la mettre à l'échelle, la faire pivoter, la retourner ou la supprimer. Lorsqu'une sélection est active, les outils de dessin affectent uniquement la zone sélectionnée. |
Sélection Wand |
Active la sélection d'une zone de type colorée d'une image. La tolérance, autrement dit, la différence maximale entre les couleurs adjacentes considérées comme semblables, peut être configurée de façon à inclure un gamme plus ou moins étendue de couleurs similaires. Après avoir sélectionné une zone, vous pouvez la couper, la copier, la déplacer, la mettre à l'échelle, la faire pivoter, la retourner ou la supprimer. Lorsqu'une sélection est active, les outils de dessin affectent uniquement la zone sélectionnée. |
Panoramique |
Active le déplacement de l'image par rapport au frame de fenêtre. En mode Panoramique, sélectionnez un point sur l'image, puis déplacez-le tout autour. Vous pouvez temporairement activer le mode Panoramique en appuyant sur et la touche Ctrl et en la maintenant enfoncée. |
Zoom |
Active l'affichage de quelques détails d'image par rapport au frame de fenêtre. En mode Zoom, sélectionnez un point sur l'image puis déplacez-le vers la droite ou vers le bas pour effectuer un zoom avant ou vers la gauche ou vers le haut pour effectuer un zoom arrière. Vous pouvez effectuer un zoom avant ou arrière en appuyant et en maintenant la touche Ctrl pendant que vous utilisez la molette de la souris ou appuyez sur le signe plus (+) ou le signe moins (-). |
Zoom à la taille réelle |
Affiche l'image en utilisant une relation 1:1 entre les pixels de l'image et les pixels de l'écran. |
Zoom pour ajuster |
Affiche l'image complète dans le frame de fenêtre. |
Zoom sur la largeur |
Affiche la largeur de l'image dans le frame de fenêtre. |
Grille |
Active ou désactive la grille affichant des limites en pixels. Il est possible que la grille n'apparaisse pas jusqu'à ce que vous zoomiez dans l'image. |
Afficher le niveau MIP suivant |
Active le niveau MPI supérieur suivant dans une chaîne de mappage MIP. Le niveau de MIP en cours est affiché sur l'aire de conception. Cet élément est uniquement disponible pour les textures qui ont des niveaux MIP. |
Afficher le niveau MIP précédent |
Active le niveau MIP inférieur suivant dans une chaîne de mappage MIP. Le niveau de MIP en cours est affiché sur l'aire de conception. Cet élément est uniquement disponible pour les textures qui ont des niveaux MIP. |
Canal rouge Canal vert Canal bleu Canal alpha |
Active ou désactive le canal de couleur spécifique. Notes En activant ou désactivant systématiquement des canaux de couleurs, vous pouvez isoler les problèmes liés à un ou plusieurs d'entre-eux.Par exemple, vous pouvez identifier la transparence alpha non valide. |
Background |
Active ou désactive l'affichage de l'arrière-plan à travers les parties transparentes de l'image. Vous pouvez configurer la manière dont l'arrière-plan est affiché en choisissant l'une de ces options :
|
Propriétés |
Ouvre ou ferme la fenêtre Propriétés. |
Avancé |
Contient des commandes et des options supplémentaires. Filtres Fournit plusieurs filtres courants d'image : Noir et blanc, Flou, Éclaircir, Assombrir, Détection des bords, Relief, Inverser les couleurs, Ondulation, Ton sépia, et Accentuer. Moteurs Graphics
Outils
Vue
Conseil Vous pouvez choisir le bouton Avancé pour exécuter à nouveau la dernière commande. |
Voici la barre d'outils Éditeur d'images.
Le tableau suivant décrit les éléments de la barre d'outils Éditeur d'images, répertoriés dans l'ordre dans lequel ils s'affichent de haut en bas.
Élément de barre d'outils |
Description |
---|---|
Plume |
Utilise la sélection de couleurs active pour dessiner un trait crénelé. Vous pouvez définir la couleur et l'épaisseur du trait dans la fenêtre Propriétés . |
Pinceau |
Utilise la sélection de couleurs active pour dessiner un trait anticrénelé. Vous pouvez définir la couleur et l'épaisseur du trait dans la fenêtre Propriétés . |
Aérographe |
Utilise la sélection de couleurs active pour dessiner un trait anticrénelé qui fusionne avec l'image et devient plus saturé en fonction du temps. Vous pouvez définir la couleur et l'épaisseur du trait dans la fenêtre Propriétés . |
Pipette |
Définit la sélection de couleurs active sur la couleur du pixel sélectionné. |
Fill |
Utilise la sélection de couleurs active pour remplir une zone de l'image. La région affectée est définie comme le pixel où le remplissage est appliqué, avec chaque pixel relié par des pixels de la même couleur et qui est la même couleur elle-même. Si le remplissage est appliqué dans une sélection active, la zone affectée est contrainte par la sélection. Par défaut, la sélection de couleurs active est fusionnée avec la zone affectée de l'image en fonction de son composant alpha. Pour utiliser la sélection de couleurs active afin de remplacer la zone affectée, appuyez sur la touche MAJ et maintenez-la enfoncée lorsque vous utilisez l'outil de remplissage. |
Gomme |
Définit des pixels sur une couleur entièrement transparente si l'image prend en charge un canal alpha. Sinon, définit les pixels selon la couleur d'arrière-plan active. |
Ligne, Rectangle, Rectangle à coins arrondis, Ellipse |
Dessine une forme sur l'image. Vous pouvez définir la couleur et l'épaisseur du contour dans la fenêtre Propriétés . Pour dessiner une primitive avec une largeur et une hauteur identiques, appuyez sur la touche MAJ et maintenez-la enfoncée pendant que vous dessinez. |
Texte |
Utilise la sélection de couleurs de premier plan pour dessiner le texte. La couleur d'arrière-plan est déterminée par la sélection de couleur d'arrière-plan. Pour un arrière-plan transparent, la valeur alpha de la sélection de couleur d'arrière-plan doit avoir la valeur 0. Lorsque la zone de texte est active, vous pouvez définir si le texte est dessiné avec un trait anticrénelé, et vous pouvez définir la Valeur, laPolice, laTaille, et le style du texte_Gras, Italique, ou Souligné dans la fenêtre Propriétés . Le contenu et l'apparence du texte sont finalisés lorsque la zone de texte n'est plus active. |
Faire pivoter |
Fait pivoter une image de 90 degrés dans le sens des aiguilles d'une montre. |
Trim |
Rogne l'image à la sélection active. |
Utilisation des niveaux MIP
Certains formats d'image (par exemple, DirectDraw Surface (.dds) prennent en charge les niveaux de MIP pour le niveau de détail d'espace de texture. Pour plus d’informations sur la génération et l'utilisation des niveaux MIP, consultez Comment : créer et modifier les niveaux MIP.
Utilisation de la transparence
Certains formats d'image (par exemple, DirectDraw Surface (.dds) prennent en charge la transparence. La transparence peut être utilisée de différentes façons, selon l'outil que vous utilisez. Pour spécifier le niveau de transparence d'une sélection de couleurs, dans la fenêtre Propriétés, définissez le composant A (alpha) de la sélection de couleurs. Voici comment les différents genres d'outils contrôlent l'application de la transparence :
Outil |
Description |
---|---|
Crayon, Pinceau, Aérographe, Ligne, Rectangle, Rectangle à coins arrondis, Ellipse, Texte |
Pour fusionner la sélection de couleurs active avec l'image, dans la fenêtre Propriétés, développez le groupe de propriétés Canaux et définissez la case à cocher Dessin sur le canal Alpha, puis dessinez normalement. Pour dessiner en utilisant la sélection de couleurs active et laisser la valeur alpha de l'image en place, désactivez la case à cocher Dessin du canal Alpha, puis dessinez normalement. |
Fill |
Pour fusionner la sélection de couleurs active avec l'image, il vous suffit de choisir la zone à remplir. Pour utiliser la sélection de couleurs active, notamment la valeur du canal alpha, pour remplacer l'image, appuyez sur la touche MAJ et maintenez-la enfoncée pendant que vous sélectionnez la zone à remplir. |
Propriétés de l'image
Vous pouvez utiliser la fenêtre Propriétés pour spécifier différentes propriétés de l'image. Par exemple, vous pouvez définir les propriétés Largeur et Hauteur pour redimensionner une image.
Le tableau suivant décrit les propriétés de l'image.
Propriété |
Description |
---|---|
Largeur |
Largeur de l'image. |
Hauteur |
Hauteur de l'image. |
Bits par pixel |
Nombre de bits représentant chaque pixel. La valeur de cette propriété dépend de la valeur Format de couleur de l'image. |
Sélection transparente |
True pour fusionner la couche de sélection avec l'image principale, selon la valeur alpha de la couche de sélection ; sinon, False. Cet élément est uniquement disponible pour les images qui prennent en charge l'alpha. |
Format |
Format de couleur de l'image. Divers formats de couleur peuvent être spécifiés, selon le format de l'image. Le format de couleur définit le nombre et le type des canaux de couleur inclus dans l'image, et également la taille et l'encodage des différents canaux. |
Niveau MIP |
Niveau en cours de MIP. Cet élément est uniquement disponible pour les textures qui ont des niveaux MIP. |
Nombre de niveaux MIP |
Nombre total de niveaux MIP dans l'image. Cet élément est uniquement disponible pour les textures qui ont des niveaux MIP. |
Nombre de frames |
Nombre total de frames dans l'image. Cet élément est uniquement disponible pour les images qui prennent en charge les tableaux de texture. |
Frame |
Frame actuel. Seul le premier frame peut être affiché ; tous les autres frames sont détruits lorsque l'image est enregistrée. |
Nombre de secteurs de profondeur |
Nombre total de secteurs de profondeur dans l'image. Cet élément est uniquement disponible pour les images qui prennent en charge les textures de volume. |
Secteur de profondeur |
Secteur de profondeur actuel. Seul le premier secteur peut être affiché ; tous les autres secteurs sont détruits lorsque l'image est enregistrée. |
Notes
Étant donné que la propriété Faire pivoter de s'applique à tous les outils et régions sélectionnées, il continue d'apparaître en bas de la fenêtre Propriétés avec d'autres propriétés d'outils.Faire pivoter de est toujours rendu car l'image entière est selectionnée implicitement lorsqu'il n'y a pas d'autres sélections ou outil actif.Pour plus d'informations sur la propriété Faire pivoter de, consultez l'Propriétés de l'outil.
Redimensionnement d'images
Voici deux façons de redimensionner une image. Dans les deux cas, l'Éditeur d'images utilise l'interpolation bilinéaire pour rééchantillonner l'image.
Dans la fenêtre Propriétés, spécifiez les nouvelles valeurs des propriétés Largeur et Hauteur.
Sélectionnez l'intégralité de l'image et utiliser des marqueurs de bordure pour redimensionner l'image.
Utilisation des outils
Régions sélectionnées
Les sélections de l'Éditeur d'images définissent les régions de l'image qui sont actives, c'est-à-dire la zone qui sera affectée par les outils et les transformations. Lorsqu'une sélection est active, les zones en dehors de la zone sélectionnée ne sont pas affectées par la plupart des outils et transformations. S'il n'y a pas de sélection active, l'intégralité de l'image est active.
La plupart des outils : Crayon, Pinceau, Pinceau aérien, Remplissage, Gomme, les primitives 2D et les transformations : Faire pivoter, Rogner, Inverser les couleurs, Retourner horizontalement, et Retourner verticalement sont contraints ou définis par la sélection active. Toutefois, certains outilsPipette et Texte (et transformations) Générer des mips - ne sont pas affectés par une sélection active ; ces outils se comportent toujours comme si l'intégralité de l'image est la sélection active.
Lorsque vous sélectionnez une zone, vous pouvez appuyer sur la touche Maj et la maintenir enfoncée pour faire une sélection proportionnelle (carrée) ; sinon, la sélection n'est pas limitée.
Redimensionnement de sélections
Après avoir sélectionné une zone, vous pouvez la redimensionner ou redimensionner son contenu d'image en modifiant la taille du marqueur de sélection. Pendant que vous redimensionnez la zone sélectionnée, vous pouvez utiliser les touches d'édition suivante pour modifier le comportement de la zone sélectionnée lorsque vous la redimensionner (appuyez sur la touche et maintenez la lorsque vous redimensionnez).
Ctrl
Copie le contenu de la zone sélectionnée avant qu'elle soit redimensionnée. Cela permet de laisser l'image d'origine intacte lorsque sa copie est redimensionnée.Shift
Redimensionne la zone sélectionnée proportionnellement à sa taille d'origine.Alt
Modifie la taille de la région de sélection. Cela laisse l'image inchangée.
Voici les combinaisons de touches d'édition valides :
Ctrl |
Shift |
Alt |
Description |
---|---|---|---|
Redimensionne le contenu de la zone sélectionnée. |
|||
Shift |
Redimensionne proportionnellement le contenu de la zone sélectionnée. |
||
Alt |
Redimensionne la zone sélectionnée. Cela définit une nouvelle zone de sélection. |
||
Shift |
Alt |
Redimensionne proportionnellement la zone sélectionnée. Cela définit une nouvelle zone de sélection. |
|
Ctrl |
Copie puis redimensionne le contenu de la zone sélectionnée. |
||
Ctrl |
Shift |
Copie puis redimensionne proportionnellement le contenu de la zone sélectionnée. |
Propriétés de l'outil
Lorsqu'un outil est sélectionné, vous pouvez utiliser la fenêtre Propriétés pour spécifier des détails sur la façon dont il affecte l'image. Par exemple, vous pouvez définir l'épaisseur de l'outil Crayon ou la couleur de l'outil Pinceau.
Vous pouvez définir une couleur de premier plan et une couleur d'arrière-plan. Ils prennent en charge un canal alpha pour fournir une opacité définie par l'utilisateur. Les paramètres s'appliquent à tous les outils. Si vous utilisez une souris, le bouton gauche de la souris correspond à la couleur de premier plan, et le bouton droit de la souris correspond à la couleur d'arrière-plan.
Le tableau suivant décrit les propriétés d'outil.
Outil |
Propriétés |
---|---|
Tous les outils et sélections |
|
Crayon, Pinceau, Aérographe, Gomme |
|
Texte |
|
Primitive 2D |
|
Crayon, Pinceau, Aérographe, Primitive 2D |
|
Sélection Wand, Remplir |
|
Raccourcis clavier
Commande |
Raccourcis clavier |
---|---|
Passer en mode de sélection |
S |
Basculer en mode Zoom |
Z |
Basculer en mode Panoramique |
K |
Sélectionner tout |
Ctrl+A |
Supprimer la sélection actuelle |
Supprimer |
Annuler la sélection actuelle |
Échappement |
Zoom avant |
Ctrl+roulette de la souris vers l'avant Ctrl+Pg. préc. Signe plus (+) |
Zoom arrière |
Ctrl-roulette de la souris vers l'arrière Ctrl-Pg. suiv. Signe moins (-) |
Mouvement panoramique vers le haut de l'image |
Roulette de la souris vers l'arrière Pg. suiv. |
Mouvement panoramique vers le bas de l'image |
Roulette de la souris vers l'avant Pg. préc. |
Mouvement panoramique vers la gauche de l'image |
Maj+Roulette de la souris vers l'arrière Roulette de la souris vers la gauche Maj+Pg. suiv. |
Mouvement panoramique vers la droite de l'image |
Maj+Roulette de la souris vers l'avant Roulette de la souris vers la droite Maj+Pg. préc. |
Zoom à la taille réelle |
Ctrl + 0 (zéro) |
Adaptez l'image à la fenêtre |
Ctrl+G, Ctrl+F |
Ajuster l'image à la largeur de la fenêtre |
Ctrl+G, Ctrl+I |
Activer/désactiver la grille |
Ctrl+G, Ctrl+G |
Rogner l'image selon la sélection en cours |
Ctrl+G, Ctrl+C |
Affichez le niveau MIP suivant (plus détaillé) |
Ctrl+G, Ctrl+6 |
Affichez le niveau MIP précédent (moins détaillé) |
Ctrl+G, Ctrl+7 |
Activer/désactiver le canal de couleur rouge |
Ctrl+G, Ctrl+1 |
Activer/désactiver le canal de couleur verte |
Ctrl+G, Ctrl+2 |
Activer/désactiver le canal de couleur bleue |
Ctrl+G, Ctrl+3 |
Activer/Désactiver le canal alpha (transparence) |
Ctrl+G, Ctrl+4 |
Activer/Désactiver le modèle de damier alpha |
Ctrl+G, Ctrl+B |
Basculer vers l'outil de sélection irrégulière |
L |
Basculer vers l'outil de sélection de la baguette magique |
M |
Basculer vers l'outil crayon |
P |
Basculer vers le pinceau |
B |
Basculer vers l'outil de remplissage |
F |
Basculer vers l'outil effaceur |
E |
Basculer vers l'outil texte |
T |
Basculer vers l'outil de sélection de couleur (pipette) |
I |
Déplace la sélection active et son contenu. |
Touches fléchées. |
Redimensionnez la sélection active, et son contenu. |
Touches Ctrl+Flèche |
Déplace la sélection active sans son contenu. |
Maj+Touches de direction |
Redimensionnez la sélection active, mais pas son contenu. |
Touches Maj+Ctrl+Flèche |
Validez la couche active |
Return |
Réduisez l'épaisseur de l'outil |
[ |
Augmenter l'épaisseur de l'outil |
] |
Rubriques connexes
Titre |
Description |
---|---|
Utilisation de ressources 3D pour les jeux et les applications |
Fournit une vue d'ensemble des outils que vous pouvez utiliser dans Visual Studio pour travailler avec des ressources graphiques, telles que des textures et des images, des modèles 3D, et des effets de shader. |
Décrit comment utiliser l'Éditeur de modèle Visual Studio pour utiliser les modèles 3D. |
|
Décrit comment utiliser le concepteur Shader Visual Studio pour utiliser les nuanceurs. |