Editor de Imagem

Este documento descreve como trabalhar com o editor de imagem de Visual Studio para exibir e modificar recursos de textura e da imagem.

Você pode usar o editor de imagem para trabalhar com tipos de textura rica e formatos de imagem usados no desenvolvimento do app DirectX - isso inclui suporte para formatos de arquivo de imagem e codificações de cores, recursos como os canais alfa e o mapeamento MIP e os vários formatos de alta compactação, textura de hardware acelerado que o DirectX suporta.

Formatos suportados

O editor de imagem suporta esses formatos de imagem:

Nome de formato	Extensão de nome de arquivo
Formato PNG	.png
JPEG	.jpg, .jpeg, .jpe, .jfif
Superfície de Desenho Direta	.dds
Formato de troca de gráficos	.gif
Bitmap	.bmp, .dib
Formato de arquivo de imagem marcado	.tif, .tiff
TGA (Targa)	.tga

Guia de Introdução

Esta seção descreve como adicionar uma imagem ao seu projeto de Visual Studio e configurá-lo para seus requisitos.

Para adicionar uma imagem ao seu projeto

1. Em Gerenciador de Soluções, abra o menu de atalho do projeto ao qual você deseja adicionar a imagem, e escolha Adicionar, Novo Item.

2. Na caixa de diálogo de Adicionar novo item , em Instalado, Gráficos, selecione e selecione um formato de arquivo apropriado para a imagem. Para obter informações sobre como escolher um formato de arquivo com base em seus requisitos, consulte a seção a seguir.

3. Especifique Nome do arquivo de imagem, e Local onde você desejar a ser criado.

4. Escolha o botão Adicionar.

Escolhendo o formato imagem

Dependendo de como você pretende usar a imagem, certos formatos de arquivo podem ser mais apropriadas do que outros. Por exemplo, alguns formatos não podem dar suporte a um recurso que você necessidade- como a transparência ou uma cor específica formato ou não possa fornecer a compactação apropriado para o tipo de conteúdo que você planejou da imagem.

As informações a seguir podem ajudá-lo a escolher um formato imagem que atende as necessidades.

• Imagem bitmap (.bmp)
  O formato de imagem de bitmap. Um formato de imagem descompactado que suporta cores de 24 bits. O formato de bitmap não oferece suporte à transparência.

• Imagem GIF (.gif)
  O formato de imagem GIF. Um formato de imagem sem perda compactado por LZW que suporta até 256 cores. Inadequados para as fotografias e imagens que têm uma quantidade significativa de detalhes de cores, mas fornece boas taxas de compactação para as imagens de cores em baixa que têm um alto grau de coerência de cor.

• Imagem JPG (.jpg)
  O formato de imagem JPEG. Um formato de imagem com perdas de alta compactação que suporta cores de 24 bits e é apropriado para compactação de uso geral das imagens com um alto grau de coerência de cor.

• Imagem PNG (.png)
  O formato de imagem PNG. Um formato de imagem sem perdas, moderadamente compactado que suporta cores de 24 bits e transparência de alfa. É adequado tanto para imagens naturais e artificiais, mas não fornece taxas de compactação tão boas quanto formatos com perdas, como JPG ou GIF.

• Imagens Tiff (.tif)
  O formato de imagem TIFF ou TIF. Um formato de imagem flexível que suporta vários esquemas de compactação.

• Textura DDS (.dds)
  O formato de textura DirectDraw Surface (DDS). Um formato de textura com perda altamente compactado que suporta cores de 24 bits e transparência de alfa. Suas taxas de compactação podem ser tão elevadas quanto 8:1. Tem com base a compactação de textura S3, que pode ser descompactada no hardware dos gráficos.

• Imagem TGA (.tga)
  O formato de imagem TGA (também conhecido como Targa). Um formato de imagem sem perda compactado por RLE que suporta imagens de cor direta ou mapeadas com cor (paleta de cores) de até cores de 24 bits e transparência de alfa. Inadequados para as fotografias e imagens que têm uma quantidade significativa de detalhes de cores, mas fornece boas taxas de compactação para as imagens que têm longos alcances de cores idênticas.

Configurando a imagem

Antes de começar a trabalhar com a imagem que você acabou de criar, você pode alterar sua configuração padrão. Por exemplo, você pode alterar suas dimensões ou o formato de cor que usa. Para obter informações sobre como configurar esses e outras propriedades da imagem, consulte Propriedades da imagem.

Dica

Antes de salvar seu trabalho, defina a propriedade de Formato da Cor se você quiser usar um formato específico de cor.Se o formato de arquivo da suporte à compactação, você pode ajustar as configurações de compactação quando você salvar o arquivo pela primeira vez ou quando você escolhe Salvar como.

Trabalho com o Editor de Imagem

Esta seção descreve como usar o editor de imagem para alterar texturas e imagens.

Barras de ferramentas do Editor de Imagem

As barras de ferramentas Editor de Imagem contêm comandos que o ajudam a trabalhar com imagens.

Os comandos que afetam o estado do editor de imagem estão localizados na barra de ferramentas de Modo do editor de imagem junto com comandos avançadas. A barra de ferramentas está localizada na borda do nível mais alto da superfície de design do editor de imagem. As ferramentas de desenho são localizadas na barra de ferramentas de Editor de Imagem na borda mais à esquerda da superfície de design do editor de imagem.

Aqui está a barra de ferramentas Modo Editor de Imagem:

Essa tabela descreve os itens na barra de ferramentas Modo do editor de imagem, listados na ordem em que aparecem da esquerda para a direita.

Item da barra de ferramentas	Descrição
Select	Habilita a seleção de uma região retangular de uma imagem. Depois de selecionar uma região, é possível recortar, copiar, mover, redimensionar, girar, inverter ou excluir. Quando há uma seleção ativa, as ferramentas de desenho afetam somente a região selecionada.
Seleção Irregular	Habilita a seleção de uma região irregular de uma imagem. Depois de selecionar uma região, é possível recortar, copiar, mover, redimensionar, girar, inverter ou excluir. Quando há uma seleção ativa, as ferramentas de desenho afetam somente a região selecionada.
Seleção de varinha	Habilita a seleção de uma região de cor semelhante de uma imagem. A tolerância — ou seja, a diferença máxima entre as cores adjacentes às quais elas são consideradas similares — pode ser configurada para incluir um intervalo maior ou menor de cores semelhantes. Depois de selecionar uma região, é possível recortar, copiar, mover, redimensionar, girar, inverter ou excluir. Quando há uma seleção ativa, as ferramentas de desenho afetam somente a região selecionada.
Bandeja	Habilita o movimento da imagem em relação ao quadro da janela. No modo de Panorâmico, selecionar um ponto na imagem e move-lo ao redor dele. Você pode temporariamente ativar o modo Panorâmica pressionando e retendo a tecla CTRL.
Zoom	Habilita a exibição de mais ou menos detalhes da imagem em relação ao quadro da janela. No modo Zoom, selecionar um ponto na imagem e movê-lo para a direita ou para baixo para ampliar ou para a esquerda ou para cima ou para diminuir o zoom. Você pode ampliar ou diminuir mantendo pressionado o CTRL enquanto usa a roda do mouse ou pressiona o sinal de somar (+) ou sinal de subtrair (-).
Ampliar para o tamanho real	Exibe a imagem usando uma relação de 1:1 entre os pixels da imagem e os pixels da tela.
Ampliar para Caber	Exibe a imagem completa de moldura da janela.
Ampliar para ajustar largura	Exibe a largura total da imagem no quadro da janela.
Grid	Habilita ou desabilita a grade que mostra limites de pixel. A grade pode não aparecer até que você aplicar um zoom na imagem.
Exibir próximo nível de MIP	Ativa o próximo maior nível de MIP em uma cadeia de mapa de MIP. O nível de MIP ativo é exibido na superfície de design. Este item está disponível somente para as texturas que têm níveis de MIP.
Exibir nível anterior de MIP	Ativa o próximo menor nível de MIP em uma cadeia de mapa de MIP. O nível de MIP ativo é exibido na superfície de design. Este item está disponível somente para as texturas que têm níveis de MIP.
Canal Vermelho Canal verde Canal Blue Canal alfa	Habilita ou desabilita o canal de cor específico. Dica Ativando ou desativando sistematicamente os canais de cores, você pode isolar os problemas relacionados a uma ou mais deles.Por exemplo, você pode identificar a transparência alfa incorreta.
Plano de fundo	Habilita ou desabilita a exibição do plano de fundo através de partes transparentes da imagem. Você pode configurar como o plano de fundo é exibido escolhendo dessas opções: Tabuleiro Usa uma cor verde juntamente com a cor do plano de fundo especificada para exibir o plano de fundo como um padrão quadriculado. Você pode usar esta opção para ajudar a tornar as partes transparentes da imagem mais aparentes. Plano de fundo branco Usa a cora branca para exibir o plano de fundo. Plano de fundo preto Usa a cor preta para exibir o plano de fundo. Plano de fundo animado Move o padrão quadriculado lentamente. Você pode usar esta opção para ajudar a tornar as partes transparentes da imagem mais aparentes.
Propriedades	Como alternativa, abre ou fecha a janela Propriedades.
Avançado	Contém comandos e opções adicionais. Filtros Fornece vários filtros de imagem comuns: Preto e Branco, Desfoque, Iluminar, Escurecer, Detecção de Borda, Alto Relevo, Inverter Cores, Ondular, Tom de Sépia e Nitidez. Mecanismos gráficos Processar com D3D11 Usa o Direct3D 11 para processar a superfície de design do Editor de Imagem. Processar com D3D11WARP Usa o Direct3D 11 Windows Advanced Rasterization Platform (WARP) para processar a superfície de design do Editor de Imagem . Ferramentas Inverter Horizontal Transpõe a imagem em torno do seu eixo horizontal ou x. Inverter Vertical Transpõe a imagem em torno do eixo vertical ou y. Gerar Mips Gerar níveis de MIP para uma imagem. Se os níveis de MIP já existirem, eles são recriados a partir do nível maior de MIP. Quaisquer alterações feitas aos níveis menores do MIP são perdidas. Para salvar os níveis de MIP que são gerados, você deve usar o formato de .dds para salvar a imagem. View Taxa de quadros Quando ativado, exibe a taxa de quadros no canto superior direito da superfície de design. A taxa de quadros é o número de quadros desenhados por segundo. Dica Você pode escolher o botão Avançado para executar novamente o último comando.

Aqui está a barra de ferramentas Editor de Imagem.

A tabela a seguir descreve os itens da barra de ferramentas Editor de Imagens , que estão listados na ordem em que aparecem de cima para baixo.

Item da barra de ferramentas	Descrição
Lápis	Usa a seleção de cores ativa para desenhar um traço com abreviação. Você pode definir a cor e a espessura de curso na janela de Propriedades .
Pincel	Usa a seleção de cores ativa para desenhar um traço anti-abreviação. Você pode definir a cor e a espessura de curso na janela de Propriedades .
Aerógrafo	Usa a seleção de cores ativa para desenhar um traço anti-abreviação que mistura juntamente com a imagem e se torna mais saturada como uma função do tempo. Você pode definir a cor e a espessura de curso na janela de Propriedades .
Eyedropper	Define a seleção de cor ativa como a cor de pixel selecionado.
Preenchimento	Usa a seleção de cores ativa para preencher uma região da imagem. A região afetada é definida como o pixel onde o preenchimento é aplicado, juntamente com cada pixel que está conectado a ele por pixels da mesma cor e que é a mesma cor. Se o preenchimento é aplicado dentro de uma seleção ativa, então a região afetada é restrita pela seleção. Por padrão, a seleção de cor ativa é misturada juntamente com a região afetada da imagem de acordo com seu componente alfa. Para usar a seleção de cores ativa para substituir a região afetada, pressione e segure a tecla SHIFT ao usar a ferramenta de preenchimento.
Borracha	Define pixels para a cor totalmente transparente se a imagem oferecer suporte a um canal alfa. Caso contrário, define os pixels como a cor ativa do plano de fundo.
Linha, Retângulo, Retângulo Arredondado, Elipse	Desenha uma forma na imagem. Você pode definir a cor e a espessura de estrutura de tópicos na janela de Propriedades . Para desenhar uma primitiva que possui a largura e altura iguais, pressione e segure a tecla SHIFT enquanto você desenhar.
Texto	Usa a seleção de cores de primeiro plano para desenhar o texto. A cor do plano de fundo é determinada pela seleção de cor do plano de fundo. Para um plano de fundo transparente, o valor alfa da seleção de cor do plano de fundo deve ser 0. Quando a região de texto estiver ativa, você pode definir se o texto foi desenhado com um anti - alias atual, e você pode definir o texto Valor, Fonte, Tamanho, e estiloNegrito, Itálico, ou Sublinhado— na janela de Propriedades . O conteúdo e a aparência do texto é finalizado quando a região de texto não está mais ativa.
Girar	Gira a imagem 90 graus no sentido horário.
Trim	Apara a imagem na seleção ativa.

Trabalho com níveis de MIP

Alguns formatos de imagem — por exemplo, DirectDraw Surface (.dds) — aceitam níveis de MIP para o Nível de Detalhe (LOD) de textura-espaço. Para obter informações sobre como gerar e trabalhar com níveis MIP, consulte Como criar e modificar níveis MIP

Trabalhando com transparência

Alguns formatos de imagem — por exemplo, DirectDraw Surface (.dds) — aceitam transparência. Há várias maneiras de usar a transparência, dependendo da ferramenta que você está usando. Para especificar o nível de transparência para uma seleção de cor, na janela de Propriedades , defina o componente A (alfa) da seleção de cor. Aqui está como os diferentes tipos de ferramentas controlam como a transparência é aplicada:

Ferramenta	Descrição
Lápis, Pincel, Spray, Linha, Retângulo, Retângulo de Cantos Arredondados, Elipse, Texto	Para combinar a seleção de cores ativas com a imagem, na janela Propriedades , expanda o grupo de propriedades de Canais e defina a caixa de seleção de Desenhar no canal Alfa , e depois desenhe normalmente. Para desenhar usando a seleção de cores ativa e deixar o valor alfa da imagem no lugar, desmarque a caixa de seleção Desenhar do canal Alfa, e depois desenha normalmente.
Preenchimento	Para combinar a seleção de cores ativas com a imagem, escolha apenas a área a preencher. Para usar a seleção de cor ativa––que inclui o valor de canal alfa––para substituir a imagem, pressione e retenha a tecla SHIFT e em seguida escolha a área para preencher.

Propriedades de imagem

Você pode usar a janela de Propriedades para especificar várias propriedades da imagem. Por exemplo, você pode definir as propriedades de largura e altura para redimensionar a imagem.

A tabela a seguir descreve as propriedades da imagem.

Propriedade	Descrição
Width	A largura da imagem.
Height	A altura da imagem.
Bits por pixel	O número de bits que representam cada pixel. O valor dessa propriedade depende do Formato da cor da imagem.
Seleção transparente	Verdadeiro para combinar a camada de seleção juntamente com a imagem principal, com base no valor alfa da camada de seleção; caso contrário, Falso. Esse item está disponível somente para as imagens que suportam alfa.
Formato	O formato de cor da imagem. Uma variedade de formatos de cor pode ser especificada, dependendo do formato da imagem. O formato de cor define o número e o tipo de canais de cor incluídos na imagem e também o tamanho e a codificação de vários canais.
Nível Mip	O nível de MIP ativo. Este item está disponível somente para as texturas que têm níveis de MIP.
Contagem de nível Mip	O número total de níveis de MIP na imagem. Este item está disponível somente para as texturas que têm níveis de MIP.
Contagem de quadro	O número total de quadros na imagem. Esse item está disponível somente para as imagens que suportam matrizes de textura.
Frame	O quadro atual. Somente o primeiro quadro pode ser exibido; todos os outros quadros são perdidos quando a imagem é salva.
Contagem da fatia de profundidade	O número total de cortes em profundidade na imagem. Esse item está disponível somente para as imagens que suportam texturas em massa.
Fatia de profundidade	O atual corte em profundidade. Somente a primeira fatia pode ser exibida; todas as outras fatias são perdidas quando a imagem é salva.

Dica

Como a propriedade de Girar por se aplica a todas as ferramentas e regiões selecionadas, sempre aparece na parte inferior da janela de Propriedades junto com outras propriedades de ferramenta.Girar por está sempre exibido como a imagem inteira é selecionada implicitamente quando não houver outra seleção ou a ferramenta ativa.Para obter mais informações sobre a propriedade de Girar por , consulte Use ferramentas propriedades.

Redimensionamento de imagens

Aqui estão duas maneiras para redimensionar uma imagem. Em ambos os casos, o Editor de Imagem usa interpolação bilinear para reamostrar a imagem.

• Na janela Propriedades, especificar novos valores para as propriedades de Largura e Altura.

• Selecione a imagem inteira e use os marcadores de borda para redimensioná-la.

Trabalho com ferramentas

Regiões selecionadas

As seleções no Editor de Imagem definem áreas da imagem que são ativas, isto é, que serão afetadas por ferramentas e transformações. Quando há uma seleção ativa, as áreas fora da região selecionada não são afetadas pela maioria das ferramentas e de transformações. Se não existir uma seleção ativa, toda a imagem está ativa.

A maioria de ferramentasLápis, Pincel, Aerógrafo, Preenchimento, Borracha, e 2d primitivo- e transformaçõesGirar, Cortar, Inverter cores, Inverter Horizontalmente, e Inverter verticalmente— são restritas ou definidas pela seleção ativa. No entanto, algumas ferramentas -Conta-gotas e Texto- e as transformações -Gerar Mips ***- não são afetadas por nenhuma seleção ativa; estas ferramentas sempre se comportam como se toda a imagem é a seleção ativa.

Ao selecionar uma região, você pode pressionar a tecla SHIFT e reter para fazer uma seleção (quadrada) proporcional. caso contrário, a seleção não será restrita.

Redimensionando seleções

Depois de selecionar uma região, é possível redimensionar ou seus conteúdos de imagem alterando o tamanho do marcador de seleção. Quando você redimensione a região selecionada, você pode usar as seguintes chaves de modificador para alterar o comportamento da região selecionada como redimensionar (pressione e mantém a chave ao modo de redimensionamento).

• Ctrl
  Copia o conteúdo da região selecionada antes que redimensione. Isso deixa de imagem original intacta quando a cópia é redimensionada.

• Shift
  Redimensionar a região selecionada em proporção a seu tamanho original.

• Alt
  Altera o tamanho da região de seleção. Isso deixa de imagem inalterado.

Aqui estão as combinações de teclas válidos de modificador:

Ctrl	Shift	Alt	Descrição
			Redimensiona o conteúdo da região selecionada.
	Shift		Redimensiona proporcionalmente o conteúdo da região selecionada.
		Alt	Redimensiona a região selecionada. Isso define uma nova região de seleção.
	Shift	Alt	Redimensiona proporcionalmente a região selecionada. Isso define uma nova região de seleção.
Ctrl			Copia e redimensiona no conteúdo da região selecionada.
Ctrl	Shift		Copia e redimensiona proporcionalmente o conteúdo da região selecionada.

Propriedades da Ferramenta

Quando uma ferramenta é marcada, você pode usar a janela de Propriedades para especificar os detalhes sobre como ela afeta a imagem. Por exemplo, você pode definir a espessura da ferramenta Lápis ou a cor da ferramenta Pincel.

Você pode definir a cor de primeiro plano e a cor do plano de fundo. Ambos oferecem suporte a um canal alfa para fornecer a opacidade definida pelo usuário. As configurações se aplicam a todas as ferramentas. Se você usar um mouse, o botão esquerdo do mouse corresponde à cor de primeiro plano, e o botão direito do mouse corresponde à cor do plano de fundo.

A tabela a seguir descreve as propriedades da ferramenta.

Ferramenta	Propriedades
Todas as ferramentas e seleções	Girar por Define a quantidade, em graus, da qual a seleção ou o efeito da ferramenta são dinamizados na direção sentido horário.
Lápis, Pincel, Spray, Borracha	Espessura Defina o tamanho da área afetada pela ferramenta.
Texto	Anti-alias Desenha texto que possui bordas anti-abreviação. Isso proporciona ao texto a uma aparência mais suave. Valor O texto a ser extraído. Fonte A fonte usada para desenhar o texto. Size (Tamanho) O tamanho do texto. Negrito Tornar a fonte em negrito. Itálico Tornar a fonte itálica. Sublinhado Tornar a fonte sublinhada.
2-D Primitivo	Anti-alias Desenha primitivos que têm bordas anti-abreviação. Isso confere a eles uma aparência mais suave. Espessura Defina a espessura da linha que forma o limite da primitiva. Raio X (Somente retângulo arredondado) Define o raio arredondado para a parte superior e inferior das bordas primitivas. Raio Y (Somente retângulo arredondado) Define o raio arredondado para as bordas esquerda e direita da primitiva.
Lápis, Pincel, Spray, 2D Primitivo	Canais Habilita ou desabilita canais de cor específicos para exibir e desenhar. Se Modo de Visualização é definido para um canal específico de cor, o canal é visível na imagem; caso contrário, não é visível. Se Desenhar é definido para um canal de cor específico, este canal é afetado pelas operações de desenho, caso contrário, não é.
Seleção de varinha, Preenchimento	Tolerância Defina a diferença máxima entre cores adjacentes nas quais elas são consideradas semelhantes, de modo menos cores ou mais semelhantes são realizadas como parte da região afetada ou selecionada. Por padrão, o valor é 32, que significa que os pixels adjacentes dentro de máscaras 32 (mais claras ou escuras) da cor original são considerados parte da região.

Atalhos de teclado

Comando	Atalhos de teclado
Alterne para o modo Selecionar	S
Alternar para o modo Zoom	Z
Alternar para o modo Panorâmico	K
Selecione tudo	Ctrl+A
Excluir a seleção atual	Excluir
Cancelar a seleção atual	Escape
Ampliar	Ctrl+Roda do mouse para frente Ctrl+PageUp Sinal de Adição (+)
Reduzir	Ctrl-Roda do mouse para trás Ctrl-PageDown Sinal de subtração (-)
Mover a imagem para cima	Roda do mouse para trás PageDown
Mover a imagem para baixo	Roda do mouse para frente PageUp
Mover a imagem para a esquerda	Shift+Roda do mouse para trás Roda do mouse para a esquerda Shift+PageDown
Mover a imagem para a direita	Shift+Roda do mouse para frente Roda do mouse para a direita Shift+PageUp
Zoom para o tamanho real	Ctrl+0 (zero)
Ajusta a imagem na janela	Ctrl+G, Ctrl+F
Ajusta a imagem à largura da janela	Ctrl+G, Ctrl+I
Ativar/desativar a grade	Ctrl+G, Ctrl+G
Recortar imagem para a seleção atual	Ctrl+G, Ctrl+C
Exibir próximo nível (mais detalhes) de MIP	Ctrl+G, Ctrl+6
Exibir o nível inferior (menos detalhes) de MIP	Ctrl+G, Ctrl+7
Ativar/desativar o canal de cor vermelha	Ctrl+G, Ctrl+1
Ativar/desativar o canal de cor verde	Ctrl+G, Ctrl+2
Ativar/desativar o canal de cor azul	Ctrl+G, Ctrl+3
Ativar/desativar o canal alfa (transparência)	Ctrl+G, Ctrl+4
Ativar/desativar o padrão quadriculado alpha	Ctrl+G, Ctrl+B
Alterne para a ferramenta de seleção irregular	L
Alterne para a ferramenta de seleção de varinha	M
Alterne para a ferramenta lápis	P
Alterne para a ferramenta escova	B
Alterne para a ferramenta preencher	F
Alterne para a ferramenta borracha	E
Alterne para a ferramenta de texto	T
Trocar para a ferramenta selecionar cor (eyedropper)	I
Mova a seleção ativa e seu conteúdo.	Teclas de direção.
Redimensione a seleção ativa e seu conteúdo.	Ctrl+Teclas de direção
Mova a seleção ativa, mas não seu conteúdo.	Shift+teclas de direção
Redimensione a seleção ativa, mas não seu conteúdo.	Shift+Ctrl+Teclas de direção
Confirme a camada atual	Return
Diminuir a espessura da ferramenta	[
Aumentar a espessura de ferramenta	]

Tópicos relacionados

Nome	Descrição
Trabalhando com ativos 3D para jogos e aplicativos	Fornece uma visão geral das ferramentas do Visual Studio que você pode usar para trabalhar recursos gráficos, como texturas e imagens, modelos 3D e efeitos de sombreamento.
Editor de modelo	Descreve como usar o Editor Modelo Visual Studio para trabalhar com modelos 3-D.
Designer de Sombreador	Descreve como usar o Shader Designer Visual Studio para trabalhar com sombreamentos.