Share
Comprender el proceso fundamental de crear un ícono en Photoshop puede convertirse en una habilidad valiosa para aprender. Hoy vamos a crear un icono de pizarra inspirado en el sitio web de Icon Resource por Sebastiaan de With, quien ha dado permiso para hacer un tutorial inspirado en su trabajo. En este tutorial, aprenderá algunos conceptos importantes y cómo trabajar con algunas aplicaciones de terceros..
Cree un nuevo documento con la configuración que se muestra a continuación. Puedes rellenar tu fondo con cualquier color, pero prefiero trabajar con un lienzo transparente. Tu decides.
Crea una nueva carpeta de capas y llámala "Frame". Dentro, crea una nueva capa y llámala "Madera". Seleccione la herramienta Rectángulo (U) y dibuje una forma de rectángulo como se muestra a continuación.
Abra las Opciones de fusión de la capa "Madera" y aplique los siguientes estilos: Sombra interior, Resplandor interior y Superposición de degradado con la configuración que se muestra a continuación. Cuando termines, obtendrás un rectángulo amarillo-naranja como el que se muestra en la última imagen..
Crea una nueva capa y llámala "Textura de madera". Rellene esta capa con negro y vaya a filtro> ruido> agregar ruido y configure las opciones que se muestran a continuación. Con la misma capa seleccionada, vaya a filtro> desenfoque> Desenfoque gaussiano y escriba la configuración que se muestra a continuación en la segunda imagen. Luego, con la misma capa seleccionada, vaya a imagen> ajustes> niveles (o presione cmd + L para Mac o ctrl + L para ventanas), y escriba la configuración de la tercera imagen. Finalmente, con la misma capa seleccionada, presione cmd y haga clic en la capa "Madera" para hacer una selección, vaya a seleccionar> Invertir, y presione la tecla de retroceso, para eliminar la capa adicional y hacer coincidir la forma rectangular de la capa "Madera". Cambie el Modo de fusión a "Luz suave" y reduzca la opacidad al 30%. La imagen hasta ahora debe verse como la de abajo..
Duplique la "Capa de textura de madera" dos veces y cambie su nombre a "Textura de madera 1" y "Textura de madera 2". En "Wood Texture 1", cambie el modo de fusión a Overlay y reduzca la opacidad al 10%, y en "Wood Texture 2", establezca el modo de fusión a "Soft Light" y reduzca la opacidad al 15%. En este punto deberías ver algo como esto:
Crea una nueva capa y llámala "tablero". Con la nueva capa seleccionada, mantenga presionada la tecla Mayús y haga clic sobre la capa "Madera", esto hará una selección. Vaya a seleccionar> modificar> contrato, y cuando aparezca el cuadro de diálogo, ingrese 60px y haga clic en Aceptar. Rellena la selección con negro. En este momento debe tener la Capa "Madera" con el rectángulo naranja y la Capa "Verde" con un rectángulo negro más pequeño. Abra las Opciones de fusión de la capa "Verde" y aplique los siguientes estilos:
Crea una nueva capa y llámala "Tablero Grunge", necesitas un pincel de grunge de esquina. Utilicé el paquete de pinceles de esquina de grunge antes de la medianoche. Establezca el color de primer plano en negro y seleccione un pincel de esquina y haga algunos efectos de grunge. Establezca el Modo de fusión en Normal y reduzca la opacidad al 10%. Con suerte, se te ocurrió algo como la imagen de abajo:
Crea una nueva capa y llámala "Efecto antiguo". Asegúrese de que el color de fondo sea negro y seleccione un pincel de tiza (estos pinceles se incluyen de forma predeterminada en Photoshop). Ajústelo a 100px, dibuje algunas líneas para crear un efecto antiguo y reduzca la capa de opacidad al 10%. En este punto deberías tener algo como:
Crea una nueva capa y llámala "Sombras". Con la capa de Sombra seleccionada, presione cmd y haga clic en la capa de la tabla para hacer una selección de ese tamaño, llene la nueva selección con negro. Ahora vaya a la paleta de capas y cree una nueva máscara de capa, seleccione un pincel suave grande (aproximadamente 600px) y con negro como color de primer plano y la opacidad del pincel del 50% comience a dibujar un círculo en el centro de la capa. Verás que el color negro comienza a desvanecerse; cuando estés satisfecho con el resultado, reduce la opacidad de la capa al 50%. Tu creación debe parecerse a:
Aquí, debes encender tu creatividad. Crea una nueva capa y llámala "Contenido". Dibuja lo que quieras aquí; para los fines de este tutorial ya tengo lista una ilustración de rodamientos. Asegúrate de que todo lo que dibujas o escribas en esta capa sea blanco. Cuando hayas terminado, reduce la opacidad de la capa al 70%. Aquí hay algunos ejemplos de lo que podrías hacer en esta parte:
Ahora vamos a grunge el dibujo del contenido. A su capa de contenido, agregue una máscara de capa como hicimos en el Paso 8 con las sombras. Seleccione un pincel de grunge. Usé el Conjunto de pinceles de funciones: 33 Texturas y efectos sutiles de grunge, también podría usar los pinceles predeterminados de tiza. Establezca el color de primer plano en negro y agregue algunos efectos de grunge a su capa de Contenido, hasta que sienta que se ve bien. En este punto, espero que su imagen se parezca a:
Ahora vamos a hacer las juntas de madera. Con la herramienta Rectángulo (U). Dibuja un rectángulo vertical de 2px; Asegúrese de que su altura es la misma de su marco de madera. Aplica el siguiente estilo de capa a tu forma. Luego coloca cada línea en cada una de las esquinas del marco. Seleccione las 4 capas y fusionelas (cmd + E). Llame a esta capa "Líneas" y muévala debajo de la capa "Textura de madera".
Seleccione todas sus capas y cópielas haciendo clic derecho y seleccionando capas duplicadas. Combine sus nuevas capas duplicadas y presione cmd + J o ctrl + J tres veces para duplicar su nueva capa combinada. Puede colocar las capas originales en una carpeta ya que necesitamos ocultarlas y trabajar con las nuevas. No le hagas nada a la capa superior, ya que vamos a trabajar con las otras dos copias para crear las sombras. Agregue un desenfoque gaussiano (filtro> desenfoque> desenfoque gaussiano) de 5.0px a ambas capas. Mueve una de las capas borrosas 3px hacia abajo. Esto es una especie de cómo se ve su icono en este punto:
En este paso, debe combinar sus tres capas y hacer clic en cmd + t o ctrl + t para abrir la herramienta de transformación libre y girar 9 grados en sentido contrario a las agujas del reloj. Finalmente, redimensiona tu imagen para que se ajuste a tu lienzo..
Hemos terminado nuestro icono, y ahora vamos a aprender cómo prepararlo y exportarlo. Tiene dos opciones, podemos usar IconBuilder desde Iconfactory, que es un complemento de Photoshop que lo ayuda a crear y guardar sus propios iconos en diferentes tamaños. Cuesta $ 79, con una prueba gratuita, así que si realmente quieres aprender cómo hacerlo, puedes descargar y trabajar con la versión de prueba. La otra opción es con una aplicación llamada IMG2ICNS de Shiny Frog. Al igual que IconBuilder, IMG2ICNS tiene una versión gratuita que puede usar mientras decide comprarla o no. ¡Esta cuesta solo $ 12.90 para la versión Pro, que es realmente barata! Así que si está interesado en diseñar íconos, puede considerar comprar esta aplicación, ya que es realmente una buena oferta..
Descargue el IconBuilder de la página web de Iconfactory que se proporcionó en el último paso. Necesitas instalarlo, es muy fácil solo sigue las instrucciones. Abra la carpeta "IconBuilder Essentials" y verá varias carpetas y algunos tutoriales y guías; vamos a buscar en la carpeta "Archivos de Grid de IconBuilder" y voy a abrir el archivo "Expanded.psd".
Vaya a su archivo de iconos y copie su imagen de icono presionando cmd + A (ctrl + A) y cmd + C (ctrl + C). Ahora vaya al archivo "Expanded.psd" y presione cmd + V o ctrl + V para pegar la selección. Oculte la capa de iconos azules y con la Herramienta de transformación libre (cmd + T o ctrl + T) cambie el tamaño de su icono para que encaje en el cuadrado grande (512x512)
Repita el último paso con las cajas 256, 128, 48, 32, 16.
Combine todas las capas y vaya a Filtro> Fábrica de iconos> Constructor de iconos. Una nueva ventana se abrirá. Asegúrese de que la configuración inicial esté "Expandida" como en la imagen a continuación:
Haga clic en la flecha izquierda y los iconos se ajustarán a los cuadros de la izquierda. Haga clic en "Guardar" y establezca los siguientes parámetros. Verifique la carpeta donde guardó su ícono anteriormente, verá una nueva carpeta llamada "Tablero" y están sus íconos nuevos, listos para usar en Mac y Windows, también tiene una copia PNG de cada tamaño.
Ahora que hemos terminado con IconBuilder, si desea una forma más fácil de crear sus iconos, siga estos pasos. Vamos a utilizar IMG2ICNS.
Vaya al archivo de iconos principal y copie la imagen. Abra un nuevo documento en Photoshop de 512x512 y pegue su ícono, cambie el tamaño de la imagen usando la Herramienta de transformación gratuita (cmd + T o ctrl + T) para que quepa en su lienzo. Guarda tu icono en formato PNG. Abre IMG2ICNS y arrastra tu archivo. Ahora, seleccione la opción "ICNS" y guarde el nuevo icono en la carpeta que desee.
Así se verá tu icono en el buscador..
Eso es todo, ahora tienes un nuevo icono. Si eres usuario de Mac, te recomiendo que compres Candybar by Panic para administrar todos tus íconos..
Quiero agradecer especialmente a Sebastiaan de With por permitirme escribir este tutorial inspirado en uno de sus íconos..
Accentsconagua