Como criar um ícone ou outra imagem

  • Artigo

É possível criar uma imagem, um bitmap, um ícone, um cursor ou uma barra de ferramentas e usar o Editor de imagens para personalizar a aparência. Também é possível criar um bitmap padronizado com base em um modelo de recurso.

Ícones e cursores: recursos de imagem para exibir dispositivos

Ícones e cursores são recursos gráficos que podem conter diversas imagens em diferentes tamanhos e esquemas de cores para diferentes tipos de dispositivos de exibição. Um cursor também tem um ponto de acesso, o local que o Windows usa para rastrear sua posição. Tanto os ícones quanto os cursores são criados e editados usando o Editor de imagens, assim como bitmaps e outras imagens.

Ao criar um ícone ou cursor, o Editor de imagens primeiro cria uma imagem de um tipo padrão. A imagem é inicialmente preenchida com a cor da tela (transparente). Se a imagem for um cursor, o ponto de acesso será inicialmente o canto superior esquerdo com as coordenadas 0,0.

Por padrão, o Editor de imagens dá suporte à criação de imagens adicionais para os dispositivos mostrados na tabela a seguir. É possível criar imagens para outros dispositivos digitando parâmetros de largura, altura e contagem de cores na caixa de diálogo Imagem personalizada.

Color Largura (pixels) Altura (pixels)
Monocromático 16 16
Monocromático 32 32
Monocromático 48 48
Monocromático 64 64
Monocromático 96 96
16 16 16
16 32 32
16 64 64
16 48 48
16 96 96
256 16 16
256 32 32
256 48 48
256 64 64
256 96 96

Criar uma imagem de dispositivo (ícone ou cursor)

Quando você cria um recurso de ícone ou cursor, o Editor de imagens primeiro cria uma imagem em um estilo específico (32 × 32 e 16 cores para ícones e 32 × 32 e monocromático para cursores). É possível adicionar imagens de diferentes tamanhos e estilos ao ícone ou cursor inicial e editar cada imagem adicional, conforme necessário, para os diferentes dispositivos de exibição. Também é possível editar uma imagem usando uma operação de cortar e colar de um tipo de imagem existente ou de um bitmap criado em um programa gráfico.

Ao abrir o recurso de ícone ou cursor no Editor de imagens, a imagem que mais se aproxima do dispositivo de exibição atual é aberta por padrão.

Observação

Se o projeto ainda não contiver um arquivo .rc, confira Criar um arquivo de script de recurso.

A caixa de diálogo Novo tipo de imagem de <dispositivo> permite criar uma imagem de dispositivo de um tipo especificado. Para abrir a caixa de diálogo Nova imagem de <dispositivo>, acesse o menu Imagem>Novo tipo de imagem. As propriedades incluídas a seguir são Tipo de imagem de destino e Personalizado.

A propriedade Tipo de imagem de destino lista os tipos de imagem disponíveis para a seleção do tipo de imagem a ser aberta:

16 x 16, 16 cores
32 x 32, 16 cores
48 x 48, 16 cores
64 x 64, 16 cores
96 x 96, 16 cores

16 x 16, 256 cores
32 x 32, 256 cores
48 x 48, 256 cores
64 x 64, 256 cores
96 x 96, 256 cores

16 x 16, Monocromático
32 x 32, Monocromático
48 x 48, Monocromático
64 x 64, Monocromático
96 x 96, Monocromático

Observação

Quaisquer imagens existentes não serão exibidas nessa lista.

A propriedade Personalizado abre a caixa de diálogo Imagem personalizada para permitir a criação de uma imagem com um tamanho personalizado e um número de cores.

A caixa de diálogo Imagem personalizada permite criar uma imagem com tamanho e número de cores personalizados. As seguintes propriedades incluídas são:

Propriedade Descrição
Width Fornece um espaço para inserir a largura da imagem personalizada em pixels (1 - 512, limite de 2048).
Height Fornece um espaço para inserir a altura da imagem personalizada em pixels (1 - 512, limite de 2048).
Cores Fornece um espaço para escolher o número de cores da imagem personalizada: duas, 16 ou 256.

Use a caixa de diálogo Abrir imagem do <dispositivo> para abrir imagens de dispositivo em projetos C++. Ela lista imagens de dispositivos existentes no recurso atual (imagens que fazem parte do recurso atual). A seguinte propriedade incluída é:

Propriedade Descrição
Imagens atuais Lista as imagens incluídas no recurso. Selecione o tipo de imagem que você deseja abrir.

Para criar um ícone ou cursor

  1. No Modo de Exibição de Recursos, clique com o botão direito do mouse no arquivo .rc e escolha Inserir recurso. Se você já tiver um recurso de imagem existente no arquivo .rc, como um cursor, clique com o botão direito do mouse na pasta Cursor e selecione Inserir cursor.

  2. Na caixa de diálogo Inserir recurso, selecione Ícone ou Cursor e clique em Novo. Para ícones, esta ação cria um recurso de ícone com um ícone de 32 × 32 e 16 cores. Para cursores, é criada uma imagem monocromática (duas cores) de 32 × 32.

    Quando um sinal de adição (+) aparece ao lado do tipo de recurso de imagem na caixa de diálogo Inserir recurso, isso significa que os modelos da barra de ferramentas estão disponíveis. Selecione o sinal de adição para expandir a lista de modelos, escolha um modelo e clique em Novo.

Para adicionar uma imagem para um dispositivo de exibição diferente

  1. Acesse o menu Imagem>Nova imagem de dispositivo ou clique com o botão direito do mouse no painel Editor de imagens e escolha Nova imagem de dispositivo.

  2. Selecione o tipo de imagem que você deseja adicionar. Também é possível selecionar Personalizado para criar um ícone cujo tamanho não está disponível na lista padrão.

Para copiar uma imagem de dispositivo

  1. Acesse o menu Imagem>Abrir imagem de dispositivo e escolha uma imagem na lista atual. Por exemplo, escolha a versão de um ícone com 32 × 32 e 16 cores.

  2. Copie a imagem do ícone exibida no momento (Ctrl+C).

  3. Abra uma imagem diferente do ícone em outra janela do Editor de imagens. Por exemplo, abra a versão do ícone de 16 × 16 e 16 cores.

  4. Cole a imagem do ícone (Ctrl+V) de uma janela do Editor de imagens para a outra. Ao colar um tamanho maior em um tamanho menor, é possível usar as alças do ícone para redimensionar a imagem.

Para excluir uma imagem de dispositivo

Enquanto a imagem do ícone é exibida no Editor de imagens, acesse o menu Imagem>Excluir imagem de dispositivo. Quando você exclui a última imagem de ícone no recurso, o recurso também é excluído.

Observação

Ao pressionar a tecla Del, as imagens e as cores desenhadas em um ícone são excluídas, mas ele é mantido e agora é possível criar outro design. Se você pressionar Del por engano, pressione Ctrl+Z para desfazer a ação.

Para criar regiões transparentes ou inversas em imagens de dispositivo

No Editor de imagens, a imagem do ícone ou cursor inicial possui um atributo transparente. Embora as imagens de ícone e cursor sejam retangulares, muitas não aparecem dessa forma porque partes da imagem são transparentes e a imagem subjacente na tela é exibida através do ícone ou cursor. Ao arrastar um ícone, partes da imagem podem aparecer em cores invertidas. Este efeito é criado definindo a cor da tela e a cor inversa na janela Cores.

A tela e as cores inversas aplicadas aos ícones e cursores moldam e colorem a imagem derivada ou atribuem regiões inversas. As cores indicam partes da imagem que possuem esses atributos. É possível alterar as cores que representam os atributos de cor da tela e cor inversa na edição. Essas alterações não afetam a aparência do ícone ou cursor no aplicativo.

Observação

As caixas de diálogo e os comandos de menu vistos podem ser diferentes daqueles descritos na Ajuda, dependendo da edição ou das configurações ativas. Para alterar as configurações, acesse o menu Ferramentas>Importar e exportar configurações. Para obter mais informações, confira Personalizar o IDE do Visual Studio.

Para criar regiões transparentes ou inversas

  1. Na janela Cores, escolha o seletor Cor da tela ou Cor inversa.

  2. Aplique a cor inversa ou da tela à imagem usando uma ferramenta de desenho. Para saber mais sobre ferramentas de desenho, veja Uso de uma ferramenta de desenho.

Para alterar a cor inversa ou da tela

  1. Selecione o seletor Cor da tela ou o seletor Cor inversa.

  2. Escolha um cor na paleta de Cores na janela Cores.

    A cor complementar é atribuída automaticamente ao outro seletor.

    Dica

    Depois de clicar duas vezes no seletor Cor da tela ouCor inversa, a caixa de diálogo Seletor de cor personalizada é exibida.

Use a paleta de 256 cores

Com o Editor de imagens, ícones e cursores podem ser dimensionados para tamanhos maiores (64 × 64) com uma paleta de 256 cores disponível. Depois de criar o recurso, um estilo de imagem de dispositivo é selecionado.

Para criar um ícone ou cursor de 256 cores

  1. No Modo de Exibição de Recursos, clique com o botão direito do mouse no arquivo .rc e escolha Inserir recurso. Se você já tiver um recurso de imagem existente no arquivo .rc, como um cursor, clique com o botão direito do mouse na pasta Cursor e selecione Inserir cursor.

  2. Na caixa de diálogo Inserir recurso, selecione Ícone ou Cursor e clique em Novo.

  3. Acesse o menu Imagem>Nova imagem de dispositivo e selecione o estilo de imagem de 256 cores desejado.

Para escolher uma cor da paleta de 256 cores para ícones grandes

Para desenhar com uma seleção da paleta de 256 cores, é necessário selecionar as cores da paleta Cores na janela Cores.

  1. Selecione ou crie um ícone ou cursor grande.

  2. Escolha uma das 256 cores exibidas na paleta de Cores na janela Cores.

    A cor selecionada se tornará a atual na paleta de Cores na janela Cores.

    Observação

    A paleta inicial usada para imagens de 256 cores corresponde à paleta retornada pela API do Windows CreateHalftonePalette. Todos os ícones destinados ao shell do Windows devem usar essa paleta para evitar oscilações durante a realização da paleta.

Para definir o ponto de acesso de um cursor

O ponto de acesso de um cursor é o ponto ao qual o Windows se refere ao rastrear a posição do cursor. Por padrão, ele é definido no canto superior esquerdo do cursor com as coordenadas 0,0. A propriedade Ponto de acesso na janela Propriedades mostra as coordenadas do ponto de acesso.

  1. Na barra de ferramentas Editor de imagens, escolha a ferramenta Configurar ponto de acesso.

  2. Selecione o pixel que deseja atribuir como ponto de acesso do cursor.

    A propriedade Ponto de acesso na janela Propriedades exibe as novas coordenadas.

Para criar e salvar um bitmap como .gif ou .jpeg

Ao criar um bitmap, a imagem é criada no formato bitmap (.bmp). No entanto, é possível salvar a imagem como um GIF ou JPEG ou em outros formatos gráficos.

Observação

Esse processo não se aplica a ícones e cursores.

  1. Acesse o menu Arquivo>Abrir e selecione Arquivo.

  2. Na caixa de diálogo Novo arquivo, escolha a pasta Visual C++, selecione Arquivo bitmap (.bmp) na caixa Modelos e clique em Abrir.

    O bitmap é aberto no Editor de imagens.

  3. Faça alterações ao novo bitmap, conforme necessário.

  4. Com o bitmap ainda aberto no Editor de imagens, acesse o menu Arquivo>Salvar filename.bmp como.

  5. Na caixa de diálogo Salvar arquivo como, digite o nome do arquivo e a extensão que denota o formato dele na caixa Nome do arquivo. Por exemplo, myfile.gif.

    Observação

    É necessário criar ou abrir o bitmap fora do projeto para salvá-lo com outro formato de arquivo. Se você criá-lo ou abri-lo no projeto, o comando Salvar como ficará indisponível. Para saber mais, veja Como exibir recursos em um arquivo de script de recurso fora de um projeto (autônomo).

  6. Selecione Salvar.

Para converter uma imagem de um formato em outro

É possível abrir imagens GIF ou JPEG no Editor de imagens e salvá-las como bitmaps. Além disso, é possível abrir um arquivo bitmap e salvá-lo como GIF ou JPEG. As imagens com as quais você trabalha não precisam fazer parte de um projeto para edição no ambiente de desenvolvimento (veja edição de imagens independente).

  1. Abra a imagem no Editor de imagens.

  2. Acesse o menu Arquivo>Salvar filename como.

  3. Na caixa de diálogo Salvar arquivo como, na caixa Nome do arquivo, digite o nome do arquivo e a extensão que denota o formato desejado.

  4. Selecione Salvar.

Para adicionar um recurso de imagem a um projeto C++ não gerenciado

  1. No Modo de Exibição de Recursos, clique com o botão direito do mouse no arquivo .rc e escolha Inserir recurso. Se você já tiver um recurso de imagem existente em seu arquivo .rc, como um cursor, basta clicar com o botão direito do mouse na pasta Cursor e selecionar Inserir cursor.

  2. Na caixa de diálogo Inserir recurso, selecione o tipo do recurso de imagem que você deseja criar (Bitmap, por exemplo) e clique em Novo.

    Quando um sinal de adição (+) aparece ao lado do tipo de recurso de imagem na caixa de diálogo Inserir recurso, isso significa que os modelos da barra de ferramentas estão disponíveis. Selecione o sinal de adição para expandir a lista de modelos, escolha um modelo e clique em Novo.

Para adicionar um recurso de imagem a um projeto em uma linguagem de programação .NET

  1. Em Gerenciador de Soluções, clique com o botão direito do mouse na pasta do projeto (por exemplo, WindowsApplication1).

  2. No menu de atalho, selecione Adicionar e escolha Adicionar item.

  3. No painel Categorias, expanda a pasta Itens do projeto local e selecione Recursos.

  4. No painel Modelos, escolha o tipo de recurso que você deseja adicionar ao projeto.

    O recurso é adicionado ao projeto no Gerenciador de Soluções e o recurso é aberto no Editor de imagens. Agora é possível usar todas as ferramentas disponíveis no Editor de imagens para modificar a imagem. Para saber como adicionar imagens a um projeto gerenciado, confira Carregar uma imagem no tempo de design.

Requisitos

Nenhum

Confira também

Editor de imagens para ícones
Como: editar uma imagem
Como usar uma ferramenta de desenho
Como: trabalhar com cores
Teclas de aceleração