Procedimiento para crear un icono u otra imagen

  • Artículo

Puede crear una nueva imagen, un mapa de bits, un icono, un cursor o una barra de herramientas y, a continuación, usar el Editor de imágenes para personalizar su apariencia. También puede crear un mapa de bits nuevo con un patrón que siga una plantilla de recursos.

Iconos y cursores: recursos de imagen para dispositivos de presentación

Los iconos y cursores son recursos gráficos que pueden contener varias imágenes de diferentes tamaños y combinaciones de colores para distintos tipos de dispositivos de pantalla. Además, un cursor tiene una zona activa, la ubicación que Windows usa para seguir su posición. Tanto los iconos como los cursores se crean y se editan en el editor de imágenes, al igual que los mapas de bits y otras imágenes.

Al crear un icono o cursor nuevo, el editor de imágenes crea primero una imagen de un tipo estándar. La imagen se rellena inicialmente con el color de la pantalla (transparente). Si la imagen es un cursor, la zona activa es inicialmente la esquina superior izquierda con coordenadas 0,0.

De forma predeterminada, el editor de imágenes admite la creación de imágenes adicionales para los dispositivos que se muestran en la tabla siguiente. Puede crear imágenes para otros dispositivos escribiendo parámetros de ancho, alto y recuento de colores en el cuadro de diálogo Imagen personalizada.

Color Ancho (píxeles) Alto (píxeles)
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

Crear una imagen de dispositivo (icono o cursor)

Al crear un nuevo recurso de icono o cursor, el editor de imágenes crea primero una imagen en un estilo específico (32 × 32, 16 colores para iconos y 32 × 32, monocromático para cursores). A continuación, puede agregar imágenes en diferentes tamaños y estilos al icono inicial o cursor y editar cada imagen adicional, según sea necesario, para los diferentes dispositivos de visualización. También puede editar una imagen mediante una operación de cortar y pegar desde un tipo de imagen existente o desde un mapa de bits creado en un programa de gráficos.

Al abrir el recurso de icono o de cursor en el editor de imágenes, la imagen que mejor coincide con el dispositivo de visualización actual se abre de forma predeterminada.

Nota:

Si el proyecto no contiene un archivo .rc, consulte Cómo crear un nuevo archivo de script de recursos.

El cuadro de diálogo Nuevo <tipo de imagen> de dispositivo permite crear una nueva imagen de dispositivo de un tipo especificado. Para abrir el cuadro de diálogo Nueva <imagen> de dispositivo, vaya al menú Imagen>Nuevo tipo de imagen. Las siguientes propiedades incluidas son Tipo de imagen de destino y Personalizado.

La propiedad Tipo de imagen de destino muestra los tipos de imagen disponibles donde se selecciona el tipo de imagen que desea abrir:

16 x 16, 16 colores
32 x 32, 16 colores
48 x 48, 16 colores
64 x 64, 16 colores
96 x 96, 16 colores

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

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

Nota:

Las imágenes existentes no se mostrarán en esta lista.

La propiedad Personalizada abre el cuadro de diálogo Imagen personalizada en el que puede crear una nueva imagen con un tamaño personalizado y una cantidad de colores.

El cuadro de diálogo Imagen personalizada permite crear una nueva imagen con un tamaño personalizado y una cantidad de colores. Las siguientes propiedades incluidas son:

Propiedad Description
Width Proporciona un espacio para especificar el ancho de la imagen personalizada en píxeles (1-512, límite de 2048).
Alto Proporciona un espacio para especificar la altura de la imagen personalizada en píxeles (1-512, límite de 2048).
Colores Proporciona un espacio para elegir la cantidad de colores de la imagen personalizada: 2, 16 o 256.

Use el cuadro de diálogo Abrir <imagen> de dispositivo para abrir imágenes de dispositivo en proyectos de C++. Muestra una lista con las imágenes de dispositivo existentes en el recurso actual (imágenes que forman parte del recurso actual). La siguiente propiedad incluida es:

Propiedad Descripción
Imágenes actuales Muestra una lista de las imágenes incluidas en el recurso. Seleccione el tipo de imagen que quiera mostrar.

Para crear un nuevo icono o cursor

  1. En Vista de recursos, haga clic con el botón derecho en el archivo .rc y seleccione Insertar recurso. Si ya tiene un recurso de imagen existente en el archivo .rc, como un cursor, puede hacer clic con el botón derecho en la carpeta Cursor y seleccionar Insertar cursor.

  2. En el cuadro de diálogo Insertar recurso, seleccione Icono o Cursor y elija Nuevo. Para los iconos, esta acción crea un recurso de icono con un icono de 32 × 32, 16 colores. En el caso de los cursores, se crea una imagen de 32 × 32, monocromática (2 colores).

    Si aparece un signo más (+) junto al tipo de recurso de imagen en el cuadro de diálogo Insertar recurso, significa que las plantillas de la barra de herramientas están disponibles. Seleccione el signo más para expandir la lista de plantillas, elija una plantilla y seleccione Nuevo.

Para agregar una imagen a otro dispositivo de visualización

  1. Vaya al menú Imagen>Nueva imagen de dispositivo o haga clic con el botón derecho en el panel editor de imágenes y elija Nueva imagen de dispositivo.

  2. Seleccione el tipo de imagen que desea agregar. También puede seleccionar Personalizado para crear un icono cuyo tamaño no esté disponible en la lista predeterminada.

Para copiar una imagen de dispositivo

  1. Vaya al menú Imagen>Imagen de dispositivo abierta y elija una imagen de la lista de imágenes actuales. Por ejemplo, elija la versión de 32 × 32, 16 colores, de un icono.

  2. Copie la imagen del icono mostrada actualmente (Ctrl+C).

  3. Abra otra imagen del icono en otra ventana del editor de imágenes. Por ejemplo, abra la versión de 16 × 16, 16 colores, del icono.

  4. Pegue la imagen de icono (Ctrl+V) de una ventana del editor de imágenes a la otra. Si pega un tamaño mayor en un tamaño menor, puede usar los manipuladores del icono para cambiar el tamaño de la imagen.

Para eliminar una imagen de dispositivo

Mientras se muestra la imagen de icono en el editor de imágenes, vaya al menúImagen>Eliminar imagen de dispositivo. Al eliminar la última imagen de icono en el recurso, también se elimina el recurso.

Nota:

Al presionar la tecla Supr, se eliminan las imágenes y los colores que ha dibujado en un icono, pero el icono permanece y ahora puede volver a diseñarlo. Si presiona Supr por error, presione Ctrl+Z para deshacer la acción.

Para crear zonas transparentes o invertidas en las imágenes de dispositivo

En el editor de imágenes, el icono inicial o la imagen del cursor tiene un atributo transparente. Aunque las imágenes de icono y cursor son rectangulares, muchas no aparecen así porque partes de la imagen son transparentes y la imagen subyacente en la pantalla se muestra a través del icono o cursor. Al arrastrar un icono, partes de la imagen pueden aparecer en un color invertido. Puede crear este efecto al establecer el color de la pantalla y el color invertido en la ventana Colores.

La pantalla y los colores invertidos que se aplican a los iconos y cursores proporcionan forma y color a la imagen derivada o asignan zonas invertidas. Los colores indican partes de la imagen que tienen esos atributos. Puede cambiar los colores que representan los atributos de color de pantalla y color invertido en la edición. Estos cambios no afectan la apariencia del icono o el cursor en su aplicación.

Nota:

Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, en función de los valores de configuración o de edición activos. Para cambiar los valores, vaya al menú Herramientas>Importar y exportar configuraciones. Para más información, vea Personalizar el IDE de Visual Studio.

Para crear regiones transparentes o invertidas

  1. En la ventana Colores, elija el selector Color de pantalla o Color invertido.

  2. Aplique el color de pantalla o el color invertido a la imagen mediante una herramienta de dibujo. Para obtener más información sobre herramientas de dibujo, consulte Uso de una herramienta de dibujo.

Para cambiar el color de pantalla o el color invertido

  1. Seleccione el selector Color de pantalla o el selector Color invertido.

  2. Elija un color de la paleta Colores en la ventana Colores.

    El color complementario se asigna automáticamente al otro selector.

    Sugerencia

    Si hace doble clic en el selector Color de pantalla o Color inverso, aparecerá el cuadro de diálogo Selector de color personalizado.

Utilice la paleta de 256 colores

Con el editor de imágenes, los iconos y cursores pueden tener un tamaño grande (64 × 64) con una paleta de 256 colores entre los cuales elegir. Después de crear el recurso, se selecciona un estilo de imagen de dispositivo.

Para crear un nuevo icono o cursor de 256 colores

  1. En Vista de recursos, haga clic con el botón derecho en el archivo .rc y seleccione Insertar recurso. Si ya tiene un recurso de imagen existente en el archivo .rc, como un cursor, puede hacer clic con el botón derecho en la carpeta Cursor y seleccionar Insertar cursor.

  2. En el cuadro de diálogo Insertar recurso, seleccione Icono o Cursor y elija Nuevo.

  3. Vaya al menú Imagen>Nueva imagen de dispositivo y seleccione el estilo de imagen de 256 colores que desee.

Para elegir un color de la paleta de 256 colores para iconos grandes

Para dibujar con una selección de la paleta de 256 colores, debe seleccionar los colores de la paleta Colores en la ventana Colores.

  1. Seleccione el icono o el cursor grandes, o cree un nuevo icono o cursor grande.

  2. Elija un color de los 256 colores mostrados en la paleta Colores de la ventana Colores.

    El color seleccionado se convertirá en el color actual en la paleta Colores de la ventana Colores.

    Nota:

    La paleta inicial usada para imágenes de 256 colores coincide con la paleta devuelta por la API de Windows CreateHalftonePalette. Todos los iconos diseñados para el shell de Windows deben usar esta paleta para evitar el parpadeo durante la realización de la paleta.

Para establecer la zona activa del cursor

La zona activa de un cursor es el punto al que Windows hace referencia en el seguimiento de la posición del cursor. De forma predeterminada, la zona activa se establece en la esquina superior izquierda del cursor con coordenadas 0,0. La propiedad Zona activa de la ventana Propiedades muestra las coordenadas de la zona activa.

  1. En la barra de herramientas del editor de imágenes, elija la herramienta Establecer zona activa.

  2. Seleccione el píxel que desea asignar como zona activa del cursor.

    La propiedad Zona activa de la ventana Propiedades muestra las nuevas coordenadas.

Para crear y guardar un mapa de bits como un archivo .gif o .jpeg

Al crear un mapa de bits, la imagen se crea en formato de mapa de bits (.bmp). Sin embargo, puede guardar la imagen como GIF o JPEG, o en otros formatos gráficos.

Nota:

Este proceso no se aplica a iconos y cursores.

  1. Vaya al menú Archivo>Abrir, y a continuación seleccione Archivo.

  2. En el cuadro de diálogo Nuevo archivo, elija la carpeta Visual C++; a continuación, seleccione Archivo de mapa de bits (.bmp) en el cuadro Plantillas y seleccione Abrir.

    El mapa de bits se abre en el editor de imágenes.

  3. Realice cambios en su nuevo mapa de bits según sea necesario.

  4. Con el mapa de bits todavía abierto en el editor de imágenes, vaya al menú Archivo>Guardar nombre de archivo.bmp como.

  5. En el cuadro de diálogo Guardar archivo como, escriba el nombre que desea asignar al archivo y la extensión que denota el formato de archivo que desea en el cuadro Nombre de archivo. Por ejemplo, miarchivo.gif.

    Nota:

    Debe crear o abrir el mapa de bits fuera del proyecto para guardarlo como otro formato de archivo. Si crea o lo abre en el proyecto, el comando Guardar como no estará disponible. Para obtener más información, consulte Visualización de recursos en un archivo de script de recursos fuera de un proyecto (independiente).

  6. Seleccione Guardar.

Para convertir una imagen de un formato en otro

Puede abrir imágenes GIF o JPEG en el Editor de imágenes y guardarlas como mapas de bits. Además, puede abrir un archivo de mapa de bits y guardarlo como GIF o JPEG. Las imágenes con las que trabaja no necesitan formar parte de un proyecto para su edición en el entorno de desarrollo (consulte Edición de imágenes independientes).

  1. Abra la imagen en el editor de imágenes.

  2. Vaya al menú Archivo>Guardar nombre de archivo como.

  3. En el cuadro de diálogo Guardar archivo como, en el cuadro Nombre de archivo, escriba el nombre de archivo y la extensión que denota el formato de archivo que desea.

  4. Seleccione Guardar.

Para agregar un nuevo recurso de imagen a un proyecto de C++ no administrado

  1. En Vista de recursos, haga clic con el botón derecho en el archivo .rc y seleccione Insertar recurso. Si ya tiene un recurso de imagen existente en el archivo .rc, como un cursor, puede hacer clic con el botón derecho en la carpeta Cursor y seleccionar Insertar cursor.

  2. En el cuadro de diálogo Insertar recurso, seleccione el tipo de recurso de imagen que desea crear (mapa de bits, por ejemplo) y, a continuación, elija Nuevo.

    Si aparece un signo más (+) junto al tipo de recurso de imagen en el cuadro de diálogo Insertar recurso, significa que las plantillas de la barra de herramientas están disponibles. Seleccione el signo más para expandir la lista de plantillas, elija una plantilla y seleccione Nuevo.

Para agregar un nuevo recurso de imagen a un proyecto en un lenguaje de programación .NET

  1. En Explorador de soluciones, haga clic con el botón derecho en la carpeta del proyecto (por ejemplo, WindowsApplication1).

  2. En el menú contextual, elija Agregar y, a continuación, elija Agregar nuevo elemento.

  3. En el panel Categorías, expanda la carpeta Elementos de proyecto local y, a continuación, elija Recursos.

  4. En el panel Plantillas, elija el tipo de recurso que le gustaría agregar a su proyecto.

    El recurso se agrega a su proyecto en el Explorador de soluciones y el recurso se abre en el editor de imágenes. Ahora puede usar todas las herramientas disponibles en el editor de imágenes para modificar su imagen. Para obtener más información sobre cómo agregar imágenes a un proyecto administrado, consulte Carga de una imagen en tiempo de diseño.

Requisitos

Ninguno

Consulte también

Editor de imágenes para iconos
Procedimiento para editar una imagen
Procedimiento para: Utilizar una herramienta de dibujo
Procedimientos para trabajar con el color
Teclas de aceleración