Editor de imagem

Este documento descreve como trabalhar com o editor de imagem de Visual Studio para exibir e alterar os 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 suas necessidades.

Para adicionar uma imagem ao seu projeto

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

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

3. Especificar Nome de arquivo de imagem, e Local onde você deseja seja criado.

4. Escolha o botão Adicionar.

Escolhendo o formato de imagem

Dependendo de como você pretende usar a imagem, determinados formatos de arquivo podem ser mais apropriados do que outros.Por exemplo, alguns formatos não podem suportar um recurso que você necessidade - como transparência ou uma cor específica formato - ou não pode fornecer a compactação apropriado para o tipo de conteúdo que você planejasse de imagem.

As seguintes informações podem ajudá-lo a escolher um formato de imagem que localize as suas 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ê criou, você pode alterar a configuração padrão.Por exemplo, você pode alterar as dimensões ou formato de cores usando.Para obter informações sobre como configurar essas e outras propriedades de imagem, consulte Propriedades de imagem.

Observação
Antes de salvar seu trabalho, certifique-se de definir a propriedade de Formato da Cor se você desejar usar um formato específico de cor.Se o formato de arquivo oferece suporte a 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 Modo do editor de imagem juntamente com comandos avançados.A barra de ferramentas está localizada na borda mais alto de superfície de design do editor de imagem.Ferramentas de desenho estã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. Observação 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 traço 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 traço 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 traço 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 do texto 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 ativo, você pode definir se o texto é desenhado com um anti - com traço, 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: gerar níveis MIP

Trabalhar 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 de imagem.Por exemplo, você pode definir as propriedades de largura e altura para redimensionar a imagem.

A tabela a seguir descreve as propriedades de 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.
Camadas de combinação	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 de cores	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.

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 das ferramentas—Lápis, Pincel, Aerógrafo, Preenchimento, Borracha, e primitivas 2-D — e transformações —Girar, SuprEspaço, Inverter cores, Inverter Horizontal e Inverter Vertical— 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ê redimensionar a região selecionada, você pode usar as seguintes teclas modificadoras para alterar o comportamento da região selecionada como você redimensiona a (pressione e segura a tecla enquanto você redimensiona).

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

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

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

Aqui estão as combinações de teclas modificadoras válidas:

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 está marcada, você pode usar a janela de Propriedades para especificar detalhes sobre como 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
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 é.
Todas as ferramentas e seleções	Girar por Defina a quantidade, em graus, que a seleção é girada na direção horária.
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 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.