Cómo diseñar un detallado icono de brújula en Photoshop

Otro tutorial de dibujo para los amantes de los iconos en el que ilustraremos una brújula metálica. Controlaremos las sombras y los reflejos para añadir realismo a la ilustración. Como con cualquier diseño de iconos, es una combinación del diseño general y los detalles sutiles lo que da resultados de calidad.

Vista previa de la imagen final

Antes de empezar, echemos un vistazo a la imagen que vamos a crear. Como siempre, el archivo de Photoshop en capas está disponible a través de nuestra membresía Psdtuts+ Plus.

Paso 1

Crea un nuevo documento utilizando los ajustes que se muestran a continuación.

Paso 2

Arrastra una guía horizontal y otra vertical al centro del lienzo. Crea una nueva capa y nómbrala "Side". Agarra la Herramienta Marco Elíptico, establece el Estilo a Tamaño fijo y establece el Ancho y el Alto ambos a 440 px. Haz una selección en el centro del lienzo. Puedes hacerlo pulsando la tecla Alt-clic donde se unen las guías. Rellena la selección con un 40% de gris.

Paso 3

Deselecciona pulsando Command + D. Ve a Edición > Transformación libre (Command + T). Ajusta la Escala vertical al 75% y aplícala. Duplica la capa y nómbrala "Top". Mueve la capa 100 píxeles hacia arriba. Puedes hacerlo usando las teclas de flecha del teclado cuando la Herramienta Mover está seleccionada. Mientras mantienes pulsada la tecla Shift, pulsa diez veces la tecla de flecha hacia arriba. Arrastra otra guía desde la regla superior y ajústala al centro de la capa. Luego, arrastra dos guías más desde la regla izquierda, una para el borde izquierdo y la otra para el derecho.

Paso 4

Coge la herramienta Marco Rectangular y haz una selección, como en la imagen de abajo. Ve a la capa "Side" en la Paleta de Capas y rellena la selección con un 40% de gris. Deselecciona pulsando Command + D.

Paso 5

Añade un estilo de capa de superposición de degradado a la capa "Side" con los siguientes ajustes: Modo de fusión en Multiplicar, Opacidad al 50%, Degradado de negro a blanco, con un estilo Lineal, Ángulo de 180 grados y Escala al 35%. Crea una nueva capa encima de la capa "Side" y nómbrala "Side Reflection".

Coge la herramienta Marco Rectangular y haz tres selecciones rectangulares, como en la imagen de abajo. Selecciona la primera, luego mantén presionada la tecla Shift para seleccionar las otras dos. Rellena la selección con blanco. Deselecciona pulsando Command + D. Ve a Filtro > Desenfocar > Desenfoque gaussiano y aplícalo con un radio de 10 píxeles. Ahora tenemos que borrar los píxeles sobrantes. Haz clic en la capa "Side" para cargar la selección y ve a Selección > Invertir, luego pulsa Suprimir para borrar. Pulsa Command + D para deseleccionar.

Paso 6

Crea otra capa por encima de la capa " Side Reflection" y nómbrala "Side Reflection 2". Haz dos selecciones rectangulares, como en la imagen de abajo y rellena con blanco. Pulsa Command + D para Deseleccionar. Ve a Filtro > Desenfocar > Desenfoque gaussiano y aplícalo con un radio de 15 píxeles. Haz clic en la miniatura de la capa "Side" para cargar la selección y ve a Selección > Invertir para invertir la selección. Pulsa Suprimir para borrar. Pulsa Command + D para deseleccionar.

Paso 7

Crea una nueva capa en la parte superior de la Pila de Capas y nómbrala "Interior". Pulsa Command y haz clic en la miniatura de la capa "Top" para cargar la selección y rellenarla con el color #e1edfb. Pulsa Command + D para deseleccionar. Pulsa Command + T para entrar en el modo de Transformación libre y establece las escalas horizontal y vertical al 92%, luego aplica.

Paso 8

Crea otra capa por encima de la capa "Inside" y nómbrala "Dial". Haz clic en la miniatura de la capa "Inside" y mueve la selección 80 píxeles hacia abajo. Puedes mover las selecciones utilizando las teclas de flecha mientras la Herramienta Marco está seleccionada. Mientras mantienes presionada la tecla Shift, presiona la tecla de flecha hacia abajo ocho veces. Rellena la selección con blanco. Deseleccionar pulsando Command + D. Definiremos la capa "Inside" como una máscara de recorte a la capa "Dial". Haz clic con la tecla Alt en la línea que separa las capas "Dial" e "Inside" en la paleta Capas.

Paso 9

Haz clic en la capa "Inside" para cargar la selección, luego Alt + Comando-clic en la capa "Dial" para restar la selección. Ahora tenemos la pared interior seleccionada. Crea una nueva capa sobre la capa "Dial" y nómbrala " Inside Reflection". Coge la herramienta de degradado y elige el ajuste preestablecido plateado, que se encuentra en el conjunto de metales. Rellena la selección con un degradado, como se muestra en la imagen de abajo. Establece el Modo de Fusión de la capa en Multiplicar y la Opacidad en 25%.

Crea una nueva capa en la parte superior y nómbrala " Inside Shade". Utilizaremos de nuevo la herramienta Degradado. Esta vez escoge el ajuste preestablecido Primer Plano a Transparente y establece el negro como tu Color de Primer Plano. Rellena la selección con el degradado que se muestra en la imagen de abajo. Pulsa Command + D para deseleccionar.

Paso 10

Crea una nueva capa en la parte superior y nómbrala "Outer Edge". Pulsa Command y haz clic en la capa "superior" para cargar la selección y rellenarla de blanco. Asegúrate de que la herramienta Marco está seleccionada y mueve la selección 1 píxel hacia la derecha y 1 píxel hacia arriba utilizando las teclas de flecha. Ahora pulsa Suprimir para borrar. Pulsa Command + D.

Crea una nueva capa encima de la capa "Outer Edge" y nómbrala "Inner Edge". Pulsa Command + clic en la capa "Inside" y rellena la selección con blanco. Mueve la selección 1 píxel a la izquierda y 1 píxel hacia abajo. Pulsa Suprimir para borrar y luego Deseleccionar.

Paso 11

Ahora necesitamos una esfera para nuestra brújula. Puedes dibujarla en un programa vectorial o en Photoshop. Yo hice una y la puedes descargar aquí. Mira la imagen de abajo. El área blanca es nuestra esfera real. He reflejado algunos elementos de la esfera en la zona borrosa. Pensé que sería bueno si podemos ver el reflejo en la superficie interior de la brújula porque nuestra brújula es reflectante, y esta área va a ser el reflejo.

Abre la brújula Dial.png. Coge la Herramienta Marco elíptico, pon el Estilo en Normal y haz una selección circular, como en la siguiente imagen. Ve a Selección > Invertir. Ahora ve a Filtro > Desenfocar > Desenfoque gaussiano y aplícalo con un radio de 2 píxeles.

Paso 12

Organiza tu espacio de trabajo de manera que puedas ver ambos documentos al mismo tiempo. Mantén presionada la tecla Shift y arrastra el dial hacia tu documento Brújula. Si mantienes pulsada la tecla Shift centrarás el dial en el lienzo. Renombra esta nueva capa como "Compass Dial" y mueve esta nueva capa por encima de la capa "Dial" en la Paleta Capas.

Pulsa Command + T, gira el dial de la brújula 30 grados y aplícalo. Haz clic en la capa "Compass Dial" para cargar la selección y ve a Selección > Invertir. Ve a Selección > Modificar > Desvanecer (en CS2 ve a Selección > Desvanecer). Establece el radio de desvanecimiento en 50 píxeles y pulsa Suprimir dos veces. Deselecciona pulsando Command + D.

Paso 13

Pulsa Command + T y esta vez establece la Escala Vertical al 75%. Ahora debemos poner el dial en el lugar correcto. Reducir la Opacidad de la capa al 50% nos ayudaría a ver el dial y la brújula al mismo tiempo. El área no borrosa del dial debería superponerse con la capa "Dial". Ahora vuelva a poner la Opacidad de la capa al 100%.

Paso 14

Haz clic en la capa "Dial" para cargar la selección y ve a Selección > Invertir. Vaya a Capa > Nueva > Capa vía cortar. Esto moverá la selección a una nueva capa y ahora nuestro dial y el reflejo están en capas separadas. Renombra la nueva capa como "Dial Reflection". Establece la Opacidad de la capa "Dial Reflection" al 65%.

Vuelve a la capa "Compass Dial" en la Paleta Capas y aplica un Estilo de capa Sombra Interior utilizando estos ajustes: Modo de fusión de Multiplicar, Color establecido en negro, Opacidad al 30%, Ángulo establecido en -125 grados, Distancia establecida en 100 píxeles y Tamaño establecido en 5 píxeles.

Ahora aplica una superposición de degradado con estos ajustes: Modo de fusión establecido en Normal, Opacidad al 20%, El degradado establecido en negro a blanco, con un Estilo de Lineal, y Ángulo establecido en 55 grados. Ahora, como puedes ver en la imagen de abajo, haz Alt-click entre las capas "Dial" y "Compass Dial", luego haz lo mismo para las capas "Compass Dial" y "Dial Reflection".

Paso 15

Crea una nueva capa en la parte superior y nómbrala "Aguja". Toma la Herramienta Marco rectangular y haz una selección como se muestra en la imagen de abajo. Arrastra tres guías desde la regla superior y ajústalas a la parte superior, al centro y a la parte inferior de la selección. Pulsa Command + D para deseleccionar.

Coge la Herramienta Lazo Poligonal y haz una selección como se muestra en la imagen de abajo, rellena la selección con el color #dd0000. Coge la Herramienta Marco Rectangular y selecciona la mitad izquierda de la aguja como se muestra. Ve a Imagen > Ajustes > Tono/Saturación (Command + U) y ajusta la Saturación a -100 y la Luminosidad a +80. Deselecciona pulsando Command + D.

Paso 16

Mueve la aguja hacia abajo como en la imagen de abajo y pulsa Command + T. Establece las Escalas Vertical y Horizontal ambas a 70%, Rotación a -30 grados, y luego aplica. Vuelve a presionar Command + T y esta vez establece la Escala Vertical al 75%.

Paso 17

Aplica una superposición de degradado a la capa "Needle" utilizando esta configuración: Modo de fusión establecido en Superponer, Opacidad al 100%, Degradado establecido en Plata (que está en el conjunto de Metales), con un Estilo de Lineal, Ángulo establecido en 0 grados, y Escala establecida en 90%.

Crea una nueva capa debajo de la "Needle" y nómbrala "Needle Shadow". Haz clic en la capa "Needle" y rellena la selección con negro. Pulsa Command + D para deseleccionar. Mueve la capa 20 píxeles hacia abajo. Ve a Filtro > Desenfocar > Desenfoque gaussiano y aplícalo con un Radio de 7 píxeles. Establece la Opacidad de la capa al 70%.

Paso 18

Toma la Herramienta Marco Elíptico. Establece el Estilo a Normal y haz una selección circular, como en la imagen de abajo. Crea una nueva capa en la parte superior de la pila de capas y nómbrala "Pin". Rellena la selección con un 40% de gris. Pulsa Command + T y ajusta la Escala Vertical al 75%. Deselecciona pulsando Command + D. Duplica la capa "Pin" y muévela hacia arriba 1 píxel.

Duplica la capa "Pin copy" y moviéndola 1 píxel hacia arriba y repite la duplicación y el movimiento hacia arriba hasta llegar a "Pin copy 4" y muévela 1 píxel hacia arriba. Renombra la capa "Pin copy 4" como "Pin Top". Selecciona todas las capas de alfileres excepto la capa "Pin Top", como se muestra en la imagen de abajo, y combínalas. Nombra la capa fusionada como "Pin Side".

Paso 19

Aplica una superposición de degradado a la capa "Pin Side" utilizando estos ajustes: Modo de fusión establecido en Superponer, Opacidad al 90%, Degradado establecido en Plata, con un Estilo de Lineal, y Ángulo establecido en 0 grados.

Paso 20

Crea una nueva capa encima de la capa "Needle" y nómbrala "Pin Shadow". Pulsa Command y haz clic en la capa "Pin Top" y rellena la selección con negro. Pulsa Command + D para deseleccionar. Mueve la capa 4 píxeles hacia abajo y ve a Filtro > Desenfocar > Desenfoque gaussiano, y aplícalo con un Radio de 2 píxeles. Ajusta la opacidad de la capa al 70%.

Paso 21

Ahora haremos el vaso. Crea una nueva capa en la parte superior y nómbrala "Glass". Haz clic en la miniatura de la capa "Inside". Rellena la selección con blanco. Deselecciona pulsando Command + D. Mueve la capa 15 píxeles hacia abajo y aplica un Estilo de capa Resplandor interior utilizando estos ajustes: Modo de fusión de Multiplicar, Opacidad al 60% y Color en negro. Establece el modo de fusión de la capa "Glass" en Multiplicar y la opacidad en 30%. Haz clic en la miniatura de la capa "Inside" para cargar la selección. Ve a Selección > Invertir y pulsa Suprimir para borrar, luego sigue adelante y Deselecciona.

Paso 22

Crea una nueva capa por encima de la capa " Glass" y nómbrala "Glass Ref 1". Pulsa Command y haz clic en la capa "Inside" para cargar la selección. Toma la herramienta Degradado. Escoge el ajuste preestablecido "Foreground to Transparent", ajústalo a "Degradado radial" y escoge el blanco como tu "Foreground Color". Rellena la selección con un degradado, como se muestra a continuación. Pulsa Command + D para deseleccionar, luego mueve la capa 30 píxeles hacia abajo.

Paso 23

Haz clic en la capa "Glass" para cargar la selección. Crea una nueva capa y nómbrala "Glass Ref 2". Rellena la selección con el degradado, como se muestra a continuación, y utiliza la configuración del paso anterior. Después pulsa Comando + D para deseleccionar.

Paso 24

Ve a la capa "Compass Dial" en la Paleta Capas y pulsa Command + U para que aparezca el diálogo Tono/Saturación. Marca la opción Colorear, establece el Tono en 200, la Saturación en 50, la Luminosidad en -8, y pulsa OK. Ahora ve a la capa "Dial Reflection" y pulsa Command + U una vez más. Establece el Tono a 200, la Saturación a 50, la Luminosidad a -3, y marca Colorear.

Paso 25

Crea una nueva capa en la parte superior y nómbrala "Bottom". Haz clic en la capa "Top" para cargar la selección. Toma la Herramienta Degradado, escoge el ajuste preestablecido Plata, ajústalo a Lineal, y rellena la capa con el degradado, como se muestra a continuación. Pulsa Command + D para deseleccionar.

Ahora selecciona todas las capas excepto la de "Background" y la de "Bottom" y ve a Capa > Combinar capas (Command + E). Renombra la capa fusionada como "Compass". Duplica la capa "Compass " y luego duplica la capa "Bottom". Selecciona las capas "Compass copy" y "Bottom" en la Paleta Capas y combínalas. Nombra la capa fusionada como "Reflection". Cambia el nombre de la capa "Bottom copy" por el de "Shadow". Ordena las capas como se muestra en la siguiente imagen.

Paso 26

Mueve las capas "Shadow" y "Reflection" hacia abajo y colócalas como se muestra. Selecciona la capa "Shadow" en la paleta de capas y ve a Imagen > Ajustes > Tono/Saturación (Comando + U). Ajusta la luminosidad a -100.  Ve a Filtro > Desenfocar > Desenfoque gaussiano y aplícalo con un radio de 45 píxeles. Establece la opacidad de la capa al 70%. Ve a la capa "Reflection" y aplica un filtro de Desenfoque Gaussiano con un Radio de 4 píxeles, luego establece la Opacidad de la capa al 30%.

Conclusión

Ahora nuestro icono de la brújula está listo. Nuevamente apliqué ese fondo de degradado azulado a mi imagen. Este es el final de otro tutorial de iconos. ¡Espero que te haya gustado y te hayas divertido!

Suscríbete al Feed RSS de Psdtuts+ para acceder a los mejores tutoriales y artículos de Photoshop en la web.