10 consejos fáciles para crear tus propios iconos geniales con Photoshop

Hay un gran número de conjuntos de iconos gratuitos en línea, pero si desea desplazarse más allá del uso particular, también hay una gran cantidad de problemas relacionados con ellos. La licencia y la falta de marca son solo dos de ellos..

Incluso si no eres un desarrollador de software, aprender a crear tus propios íconos es una habilidad tremendamente útil. Puede darle a su computadora una apariencia única o brindar sus servicios a la comunidad y al mundo corporativo.

Esto no es de ninguna manera un tutorial completo de diseño de iconos. Acabamos de comenzar con los conceptos básicos rudimentarios: tecnicismos, una lista de verificación de diseño y un conjunto de herramientas de diseño de iconos.

Íconos técnicos

A continuación, encontrará algunas especificaciones que debe conocer sobre el formato del icono, y, lo que es más importante, las resoluciones de imagen y los formatos de archivo.

tamaño

La importancia del tamaño se discute a continuación. Por ahora, nos atendremos a los aspectos técnicos..

Los iconos son siempre cuadrados. Esto significa que un ícono rectangular se extenderá o se reducirá para llenar el lienzo completo o encajar en él respectivamente. De cualquier manera, los iconos altamente rectangulares se destacan de una manera mala. Los siguientes tamaños de iconos son los más comunes en uso:

• • • 16 x 16 px * **
    • 24 x 24 px
    • 32 x 32 px * **
    • 48 x 48 px * **
    • 64 x 64 px
    • 96 x 96 px
    • 128 x 128 px **
    • 256 x 256 px **
    • 512 x 512 px **

Windows XP recomienda el uso de resoluciones 16 x 16, 32 x 32 o 48 x 48 *. Si no hay ninguno disponible, cambiará el tamaño del ícono que tenga la resolución más cercana, hasta 256 x 256. Con las resoluciones de escritorio cada vez más altas, se recomienda incluir siempre resoluciones más grandes. El formato Apple ICNS admite tamaños 16 x 16, 32 x 32, 48 x 48, 128 x 128, 256 x 256 e incluso 512 x 512 **.

Formato de archivo

Para Windows, el formato de archivo más utilizado para la distribución de iconos es ICO. La contraparte de Mac es ICNS (Formato de imagen de icono de Apple).

La lista de verificación de diseño de iconos

No hay un tutorial para diseñar el icono perfecto, una y otra vez. Los diferentes temas y diseños requieren diferentes enfoques, y la "tendencia actual" se encuentra en un estado de flujo constante. A continuación se presentan tres pilares principales de la creación de iconos que han demostrado ser verdad una y otra vez. Si eres nuevo en el diseño de íconos, asegúrate de tener en mente la lista de verificación de íconos en todo momento..

Inequívoco

Por encima de todo, los iconos deben ser inconfundibles. La relación con su aplicación debe ser obvia para todos, a lo largo del tiempo, la cultura y las diferencias de edad. Combata la tentación de crear íconos llamativos que no tienen relevancia, y apégate a un diseño simple, sólido y obvio..

No veas esto como un obstáculo para tu creatividad; Los íconos pueden ser hermosos y sugerentes, pero no deberían estar abiertos para interpretación (lea: conjeturas al final del usuario).

Uniformidad

Si está diseñando un conjunto de iconos, mantenga el diseño uniforme..

Asegúrese de tener un hilo común que interconecte estos iconos y muestre la sinergia con los usuarios; todo tiene que ser más grande que la suma de las partes.

tamaño

Los iconos siempre se crean en varios tamaños. Esto afecta al diseño en más de una forma..

Para empezar, los íconos deben verse bien y ser reconocibles sin importar el tamaño. Baje el contraste alrededor de los lados para evitar bordes irregulares y haga que los detalles importantes se destaquen lo suficiente como para mantener el enfoque en la implementación más pequeña del icono.

En un nivel técnico, los iconos se diseñan mejor utilizando vectores, imágenes compuestas de formas escalables sin fin, en lugar de una composición de píxeles establecida. Sin embargo, si su resolución es lo suficientemente alta, los mapas de bits funcionarán igual de bien..

El Icon Design Toolset

Photoshop es una gran aplicación para diseñar iconos. Tiene (casi) todas las herramientas que necesita para crear gráficos vectoriales o manipular mapas de bits, y aplicar efectos complejos y sombreados. Lo más importante serán las siguientes herramientas:

Lapicera

La herramienta Pluma le permite crear gráficos vectoriales escalables. Puede dibujar una forma creando nodos y arrastrando para ajustar la curva de la línea. Es más difícil de usar de lo que parece, pero probablemente sea la mejor herramienta de elección. En el pasado escribimos sobre la herramienta de la pluma, leíamos Photoshop Pathing: Cómo usar la herramienta de la pluma de Photoshop Cómo usar la herramienta de la pluma de Photoshop Cómo usar la herramienta de la pluma de Photoshop Leer más .

Complemento de formato de archivo ICO

Este complemento de Photoshop agrega el formato de archivo ICO a sus ajustes de exportación. El método de instalación depende de su sistema operativo y la versión de Photoshop, así que asegúrese de revisar el sitio web.

Apple Icon Composer

Lamentablemente, no existe tal herramienta para el formato de archivo ICNS de Apple. Esta herramienta gratuita se encarga del problema en su lugar. Viene con el paquete Apple Xcode, que puede descargar después de un proceso de registro (tedioso). O puedes Google para la descarga.

Hongkiat: 40+ Tutoriales de Photoshop de diseño de iconos seleccionados a mano

El blog de diseño Hongkiat.com ha compilado una lista de más de 40 tutoriales de diseño de íconos de Photoshop diferentes. Esta lista abarca todo tipo de iconos, y varios grados de dificultad. Navegue por la lista en busca de inspiración y extrapole las técnicas utilizadas para realizar sus propios diseños..

Estilos de capa

Los estilos de capa incorporados de Photoshop son una excelente manera de darle un toque final a sus iconos. Abra el panel de estilo de capa haciendo doble clic en una capa o haciendo clic con el botón derecho en la vista general de la capa. Use un trazo gris de 1px con una opacidad de 40-50% para los bordes de su icono, y coloque sus sombras a 110 ° para obtener los mejores resultados. Trata de no usar sombras alrededor El icono, sin embargo, como la mayoría de los sistemas operativos ya lo hacen.

¿Tienes algún otro consejo rudimentario sobre el diseño de iconos? Háganos saber lo que piensa en la sección de comentarios a continuación.!

Explorar más sobre: ​​Adobe Photoshop.