Red de conocimiento de recetas - Artículos de cocina - Cómo convertir imágenes originales en iconos

Cómo convertir imágenes originales en iconos

Blog|Comunidad|Noticias

Los miembros contribuyen al sitio de colección.

Página de inicioSeguir el condado de Si Noticias integrales Cuidado de la salud Canal de moda Academia en línea Foro de Sizhou Cine del condado de Dasi

Ubicación actual: Condado de Daxi> Academia en línea>Procesamiento de imágenes>: Enseñarle a crear Windows XP iconos.

Fecha de publicación

2004-03-30

Página de inicio Cerrar

Te enseñamos cómo crear un icono de Windows XP.

Fuente: Editor: Lectura: 4

Te enseñaré a crear un icono de Windows XP.

Introducción

¿Microsoft? ¿Windows? XP introdujo un nuevo estilo de diseño de iconos. En la guía siguiente, analizaremos los pasos específicos para diseñar y crear iconos de estilo de Windows XP.

Los íconos de Windows XP son divertidos, coloridos y vibrantes; eso se debe a que son íconos de 32 bits con bordes suaves. Después de dibujar cada ícono en un programa vectorial, procesarlo en Adobe Photoshop hará que la imagen sea más perfecta.

Esta guía está escrita específicamente para diseñadores. A la hora de crear imágenes, se recomienda trabajar con un diseñador gráfico de alto nivel, especialmente uno con amplia experiencia en programación vectorial y 3D.

Figura 1: Ejemplo de ícono

Descripción general del diseño de íconos

El propósito de esta sección es familiarizarlo con los nuevos estilos de Windows XP y prepararlo para crear iconos.

Características de estilo de iconos

Los colores intensos complementan la apariencia de Windows XP.

Los diferentes ángulos y características de perspectiva añaden energía dinámica a la imagen.

Las esquinas del elemento son muy suaves y ligeramente lisas.

La fuente de luz está ubicada en la esquina superior izquierda del ícono y la luz ambiental ilumina otras partes del ícono.

El efecto de degradado hace que el ícono sea tridimensional, lo que hace que parezca más completo.

La sombra paralela hace que el icono tenga más contraste y sea más tridimensional.

Agregar un contorno puede hacer que la imagen sea más clara.

Los artículos cotidianos, como ordenadores y dispositivos, tienen un aspecto más moderno y personal.

Tamaño de los iconos

Los iconos de Windows vienen en cuatro tamaños: 48×48, 32×32, 24×24 y 16×16 píxeles.

Se recomiendan los siguientes tres tamaños:

48 × 48 píxeles

32 × 32 píxeles

16 × 16 píxeles

Figura 2: Tamaño de icono normal

Los iconos en el lado derecho del menú Inicio se muestran en 24 × 24 píxeles. No es necesario que el usuario proporcione este tamaño.

Figura 3: Tamaño de 24x24 píxeles en el menú Inicio

Para los iconos de la barra de herramientas que se crean, los tamaños estándar de Windows son 24 × 24 y 16 × 16 píxeles.

Figura 4: Tamaño de icono de la barra de herramientas estándar

Compatibilidad con la profundidad de color de los iconos

Windows XP admite iconos de 32 bits. Un icono de 32 bits es una imagen de 24 bits más un canal alfa de 8 bits. Haga que los bordes del ícono sean muy suaves y se mezclen con el fondo.

Cada ícono de Windows XP debe contener las siguientes tres profundidades de color para admitir diferentes configuraciones de visualización:

Imagen de 24 bits más canal alfa de 8 bits (32 bits)

Imagen de 8 bits (256 colores), más 1 bit de transparencia

Imagen de 4 bits (16 colores), más 1 bit de transparencia.

Figura 5: Iconos de colección de imágenes de 32, 8 y 4 bits

Paleta

Los siguientes colores son los colores principales utilizados en los iconos :

Figura 6: Paleta de iconos de Windows XP

Ángulo y agrupación de objetos

Aquí está la cuadrícula de perspectiva utilizada para los iconos de estilo de Windows XP :

Figura 7: Vista en perspectiva del icono de Windows XP

Con imágenes complejas de 16 × 16, no todos los objetos funcionan bien. Los siguientes objetos suelen aparecer en imágenes visuales:

Iconos de documentos

Iconos de símbolos (como iconos de advertencia o información)

Iconos de objetos individuales (como una lupa )

Figura 8: Ejemplo de icono visual. Iconos de documento Jpg, búsqueda y favoritos)

A menos que la creación de objetos auxiliares superpuestos pueda expresar más claramente el significado del icono, se deben utilizar imágenes intuitivas en aras de la legibilidad y la integridad. También debes considerar cómo ves los íconos en grupos para determinar cómo agrupar los objetos.

Figura 9: Ejemplo de superposición (agregar o quitar programas, imprimir imágenes y documentos recientes)

Proyectos

Después de usar la sombra, el icono de Windows XP aparecerá cambio Más claro y más tridimensional. Puede lograr este efecto en Photoshop, que se trata más adelante en esta guía.

Para agregar una sombra paralela a una imagen, haga doble clic en la capa de la imagen en Photoshop y seleccione Sombra paralela. Luego cambia el ángulo a 135, la distancia a 2 y el tamaño a 2. En este punto, la sombra paralela es de 75 negro opaco.

Figura 10: Antes y después de agregar una sombra paralela al ícono.

Descripción general

Al dibujar íconos de estilo XP, agregar un contorno a la imagen puede hacerla más clara y garantizar que la imagen tenga buenos efectos bajo diferentes colores de fondo.

Paso 1: Concepto

A la hora de diseñar un nuevo icono, se recomienda dibujar primero la idea básica con papel y bolígrafo.

El siguiente es un ejemplo de un primer borrador del icono de la Colección de imágenes de Windows XP:

Figura 11: Primer borrador del icono de la Colección de imágenes

Al diseñar un ícono, considere los siguientes factores:

Utilice conceptos existentes para garantizar que las ideas de los usuarios se expresen verdaderamente.

Considere cómo aparecen los iconos en el contexto de una interfaz de usuario y cómo se utilizan como parte de un conjunto de iconos.

Considere el contexto cultural del gráfico. Evite el uso de letras, palabras, manos o caras en sus íconos. Cuando las personas o los usuarios deban estar representados por íconos, haga que los íconos sean lo más populares posible.

Si la imagen del icono consta de varios objetos, entonces debes considerar cómo hacerla más pequeña. Se recomienda no utilizar más de tres objetos en el icono. Para el tamaño 16 × 16, también podríamos considerar eliminar algunos objetos o simplificar la imagen para que sea más fácil de reconocer.

Nota: cuando use el logotipo de Windows en un ícono, cumpla con las siguientes reglas:

Para cumplir con las reglas de marcas comerciales y de marca de Windows, no use Windows en un ícono que no sea el logotipo del icono de Windows Update.

¿El logo de Windows sólo se puede utilizar en Microsoft? ¿Windows? Utilice los iconos proporcionados por el sistema operativo.

El Microsoft Brand Group debería revisar el uso del logotipo de Windows en los iconos.

Iconos de uso común

Figura 12: Iconos de uso común en Windows XP

Iconos de barra de herramientas comunes

Figura 13: Herramientas comunes en Windows Iconos de la barra de XP

Paso 2: dibujar una imagen

Para dibujar iconos de estilo de Microsoft Windows XP, se recomienda utilizar una herramienta vectorial como Macromedia FreeHand o Adobe Illustrator.

Utilice la paleta de colores y las funciones de estilo especificadas en la descripción general del diseño de iconos.

Dibuja la imagen usando dibujo a mano o Illustrator.

Crea imágenes en tres tamaños por separado. Debido a que la sombra paralela se agregará a la imagen más adelante, las tres dimensiones creadas deben ser 46 × 46, 30 × 30 y 14 × 14 píxeles.

Copia la imagen vectorial y pégala en Photoshop.

Figura 14: Cuadro de diálogo Pegar

Nota: Se recomienda Photoshop como herramienta de creación de imágenes porque se utiliza Gif Movie Gear para crearlo. Los archivos ico se pueden importar directamente a archivos de Photoshop. Las imágenes creadas en modo "RGB" en Photoshop tienen un canal alfa. Si la imagen o capa es transparente, tiene sentido que el icono utilice canales.

Paso 3: Crea la imagen de 24 bits

Después de pegar el archivo vectorial en Photoshop, el siguiente paso es completar la imagen de 24 bits.

Después de pegar los tres tamaños de imágenes en Photoshop, verifique la legibilidad y resolución de la imagen, especialmente el tamaño 16 × 16. Es posible que sea necesario realizar un cambio de píxeles. Si una imagen de 16 × 16 no se puede mostrar claramente, entonces una imagen de este tamaño debe simplificarse a mano alzada.

Para agregar una sombra paralela a una imagen, haga doble clic en la capa de la imagen y seleccione Sombra paralela. Luego cambia el ángulo a 135, la distancia a 2 y el tamaño a 2. En este punto, la sombra paralela es de 75 negro opaco.

Figura 15: Configuración de la sombra paralela

Para fusionar la sombra paralela con la imagen de 24 bits, cree una nueva capa vacía. En el menú Capas, seleccione Fusionar visibles para fusionar las tres capas.

Figura 16: La fusión de capas conserva la proyección.

Crea tres nuevos archivos de Photoshop con tamaños de 48 × 48, 32 × 32 y 16 × 16 píxeles respectivamente. Copie y pegue la imagen apropiada. Si la proyección de la imagen se trunca, deberá reducir el tamaño de la imagen en FreeHand y realizar estos pasos nuevamente.

Guarde cada archivo como un archivo .psd. No combine la capa de imagen con la capa de fondo. Es una buena idea incluir el tamaño y la profundidad del color en el nombre del archivo.

Paso 4: Crea imágenes de 8 y 4 bits

Crea una imagen de 8 bits

Ahora has creado una imagen de 24 bits (por componiendo un icono de 32 bits), el siguiente paso es crear una imagen de 8 bits. Los iconos de 8 bits se mostrarán en cualquier modo de color inferior a 32 bits.

Los iconos de 8 bits no tienen un canal alfa de 8 bits. Por lo tanto, los bordes de los iconos de 8 bits deben limpiarse; de lo contrario, quedarán irregulares.

En Photoshop, duplique la capa de imagen de 24 bits y cambie el nombre de la capa a imagen de 8 bits.

Crea una nueva capa vacía y rellénala con un color oscuro (como azul).

Fusiona la capa de imagen de 8 bits con la nueva capa.

Limpiar los bordes con colores sólidos y eliminar píxeles suavizados. Trate siempre los bordes de alguna manera para suavizar el efecto de borde irregular.

Compruebe cómo se ve la imagen sobre un fondo claro, como el blanco.

Figura 17: Imagen clara con profundidad de color de 8 bits.

Crea tres nuevos archivos de Photoshop con tamaños de 48 × 48, 32 × 32 y 16 × 16 píxeles respectivamente. Copie y pegue la imagen apropiada.

A continuación, debe cambiar el color del índice de la imagen a 256 colores. Los iconos de 8 bits pueden tener una paleta de colores personalizada.

En la imagen de 48 × 48, el fondo se rellena con un color único, un color que nunca se ha utilizado en una imagen. Normalmente se utiliza magenta (R255 G0 B255).

Vaya a Imagen -> Modo -> Color indexado y seleccione Aplanar capa.

En el menú desplegable Paleta de colores, seleccione Personalizar. En el cuadro de diálogo Personalizar, haga clic en Aceptar. En el cuadro de diálogo Color de índice, haga clic en Aceptar.

Guarde el archivo como un archivo .psd.

Guarde otros dos tamaños de archivo con el mismo color de fondo y paleta personalizada.

Guarde cada archivo como un archivo .psd.

Crea una imagen de 4 bits

Para que el ícono se vea mejor en entornos de pantalla inferiores, usa un ícono de 16 colores.

Cambia los colores indexados de imágenes de 8 bits a la paleta de Windows 16.

Limpia imágenes usando solo colores de la paleta de 16 colores.

Utiliza un contorno negro en la parte inferior y derecha de la imagen.

Utiliza gris oscuro u otro color oscuro en los bordes izquierdo y superior de la imagen.

Guarda tres tamaños con el mismo color de fondo. Asegúrese de que no se utilice ningún color de fondo en la imagen, ya que el color de fondo se utilizará como color transparente.

Figura 18: Ejemplo de ícono de 4 bits

Paso 5: Crea uno. archivos ico

Una vez que todas las imágenes estén listas, puedes compilarlas en archivos .ico. archivo ico. Para crear iconos de 32 bits, debe utilizar la herramienta Gif Movie Gear (GMG). Esta herramienta se puede encontrar en el sitio web de Gamani (inglés).

En los siguientes pasos, analizaremos la creación de un típico. Archivos ico en tres tamaños y tres profundidades de color.

Debe haber 9 archivos en total * * * - tres tamaños para cada profundidad de color:

48 × 48, 24 bits

32 × 32, 24 Bits

16 × 16, 24 bits

48 × 48, 8 bits

32 × 32, 8 bits

16 × 16 , 8 dígitos

48 × 48, 4 dígitos

32 × 32, 4 dígitos

16 × 16, 4 dígitos

Abrir Gif Movie Gear (GMG) y arrastre cada archivo de imagen a la ventana (o use Archivo->Insertar marco). Cada imagen se convertirá en un marco.

Cuando arrastras una imagen de 24 bits (o un archivo .psd con capas) a GMG, aparecerá un cuadro de diálogo:

Figura 19: Configuración en un archivo de película Gif de 24 bits imagen

Confirme la configuración de la siguiente manera:

La capa es una animación de varios cuadros.

Sin mezclar: Un fotograma por capa.

Mantener el fondo transparente

La capa de fondo de cada imagen de 24 bits aparecerá como un fotograma. Seleccione los marcos y presione la tecla Eliminar para eliminar estos marcos en blanco.

Ahora debería haber 9 fotogramas en total. Los iconos deben ordenarse en orden ascendente de resolución de color: los primeros tres bits son de 4 bits (16 colores), los últimos tres bits son de 8 bits (256 colores) y los últimos tres bits son de color de 24 bits más 8 Canal alfa de bits (*** 32 bits).

Figura 20: Secuencia de cuadros en GIF Movie Gear

Nota: Para verificar las propiedades de una imagen, mueva el mouse sobre la imagen. Un cuadro de información sobre herramientas mostrará información de resolución para cada imagen. La configuración predeterminada incluye tamaño, transparencia y número de bits. Puede agregar o eliminar elementos mostrados usando el mensaje Editar->Preferencias->Marco.

Para imágenes de 8 y 4 bits, el fondo debe ser transparente. GMG utiliza amarillo verdoso oscuro para representar colores "transparentes". Puede configurar su propio color (o seguir usando el color de fondo predeterminado) usando el elemento de menú Ver->"Transparente como". El color seleccionado es sólo para ver el efecto de la imagen y no afecta la imagen en sí.

Para hacer que las imágenes de 8 y 4 bits sean transparentes:

Seleccione un marco y haga clic en el icono de la barra de herramientas Seleccionar color de transparencia (cuentagotas).

Figura 21: Uso de la herramienta Transparencia

Se abrirá un cuadro de diálogo que muestra su icono. Utilice la herramienta Cuentagotas para hacer clic en el color de fondo del icono. Este color cambiará a un amarillo verdoso oscuro (o cualquier color seleccionado como color de fondo transparente en GMG).

Repita para todos los fotogramas de 4 y 8 bits.

Para guardar el icono, elija Archivo -> Guardar icono como....

Creación de barras de herramientas

Los íconos de las barras de herramientas de Windows usan el mismo estilo que otros íconos, excepto que no usan sombra paralela. Debido a que los íconos de la barra de herramientas son muy pequeños, se recomienda utilizar imágenes simples. Si la imagen se puede mostrar de forma intuitiva y el significado del icono se puede expresar claramente, no es necesario utilizar otros métodos complicados.

La barra de herramientas de Windows muestra dos tamaños de iconos: 24 × 24 y 16 × 16 píxeles. Los íconos tienen dos estados: predeterminado y activo (pase el mouse sobre el ícono). Para el estado activo, necesitamos aumentar ligeramente la saturación de la imagen.

El proceso de creación de un ícono en la barra de herramientas es muy similar a la creación de un ícono que no pertenece a la barra de herramientas, excepto que la imagen está ahí. formato bmp: básicamente una fila de iconos dispuestos en orden.

Después de dibujar iconos a mano alzada de varios tamaños, cópielos y péguelos en Photoshop. Coloque las imágenes de 24 × 24 en una capa y las imágenes de 16 × 16 en otra capa.

En cada capa, dibuja una fila de cuadros para cada tamaño. Una fila de cajas de 16 x 16, una fila de cajas de 24 x 24.

Figura 22: Ejemplo de cuadro de icono de la barra de herramientas

Coloque cada imagen en el cuadro en el orden deseado. Asegúrese de que no haya superposiciones entre las imágenes.

Figura 23: Colocación de iconos en el marco de la barra de herramientas

Guarde el archivo de Photoshop.

A continuación, crearás una imagen en movimiento en Photoshop.

Duplica las capas de 24×24 y 16×16. Cambie el nombre de la capa y márquela como la versión activa.

Para cada versión activa, seleccione la capa y vaya a Imagen->Ajustes->Niveles y mueva la flecha del medio a 0,75. Haga clic en Aceptar.

Figura 24: Cambiar los niveles de color para crear una imagen "en vivo"

Después de crear una imagen en vivo, cada boceto debe tener una capa: 24 × 24 por defecto, 24 × 24 por en vivo, predeterminado 16 × 16, activo 16.

A continuación, crea un archivo independiente para cada boceto.

Una forma es utilizar la herramienta de recorte para cortar el archivo a un tamaño que se ajuste al boceto y luego guardar el archivo. El boceto debe medirse desde el inicio del primer cuadro hasta el final del último cuadro.

Guarda cada boceto en 24 bits. archivo psd.

Figura 25: Boceto de la barra de herramientas de 24 bits en Photoshop

Si desea guardar el boceto como una imagen de 32 bits, arrástrelo a GMG. Elimine los marcos vacíos. Vaya a Archivo > Exportar como > Película Película. En el cuadro de diálogo Exportar película, asegúrese de que esté seleccionado "BMP/DIB y 24 bits con Alpha".

Creación de AVI

Microsoft Windows XP utiliza AVI de 8 bits. El proceso de creación. Los archivos avi son lo mismo que crear íconos: prepare una imagen en Photoshop y arrástrela a GMG. Siga las instrucciones a continuación para crear un ícono de 8 bits.

Para guardar un AVI usando GMG, vaya a Archivo -> Exportar como -> ¿Archivo AVI? .

Cuando se crea. avi, considere los siguientes factores:

Utilice magenta (R255 G0 B255) como color transparente de fondo.

En Photoshop, es importante no tener píxeles perdidos. Establezca la capacidad de relleno en 0 y asegúrese de que no esté seleccionado el suavizado.

Cierre superior de la estufa

Artículo anterior: Copa de vino dorada renderizada FR 3DSMAXArtículo siguiente: Método de modelado de la mandíbula en MAYA

Últimos comentarios

Nombre de usuario: (nuevo registro) Contraseña: Comentario anónimo [todos los comentarios]

Comentarios: no pueden exceder las 250 palabras y se publicarán después de la revisión. Cumpla conscientemente con las políticas y regulaciones de Internet pertinentes.

Cómo convertir imágenes originales en iconos

Artículos populares