Crear un diseño de icono de bloqueo brillante

Un icono popular que puede encontrar en Internet es el icono de candado. Es ampliamente utilizado para identificar páginas web seguras. A menudo indica campos de contraseña para archivos seguros. Donde quiera que desee colocar un ícono de candado, este tutorial le mostrará cómo crear uno atractivo para su uso.!

Nota del editor: este tutorial se publicó originalmente en el idioma checo en Grafika Online. Grafika ha dado amablemente el permiso para que Vaclav vuelva a publicar aquí en Psdtuts + para aquellos de nosotros que no hemos dominado el checo ...

Vista previa de la imagen final

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

Paso 1

Comencemos con un nuevo documento, lleno de un color gris claro (# D5D5D5). Elija la herramienta Rectángulo redondeado. Luego dibuja la forma básica de una cerradura. Establezca el radio como se siente bien. Luego rellénalo con un color gris claro (#DDDDDD).

Paso 2

Vamos a añadir la parte superior. Usa la herramienta Elipse para dibujar un círculo. Elíjalo con la Herramienta de selección de ruta, luego cópielo, péguelo y hágalo un poco más pequeño usando (Ctrl + T). Luego resta el círculo más pequeño del más grande haciendo un agujero en él.

Paso 3

Cambie su herramienta a la herramienta Rectángulo y, con la tecla Alt presionada (restando), dibuje un rectángulo como se muestra a continuación. Luego, con la misma herramienta, pero con la tecla Mayús presionada (agregando), finalice el lado izquierdo y derecho.

Redondea el extremo izquierdo dibujando una elipse con la herramienta Elipse, nuevamente con la tecla Shift presionada. Si desea que sea preciso en píxeles, deberá activar la cuadrícula.

Etapa 4

Comencemos agregando algunos efectos para hacer que el candado se vea realista. Comenzaremos con la parte inferior y utilizaremos algunos efectos de capa. Crea un poco de oscurecimiento alrededor de los bordes con el efecto Sombra interior.

Paso 5

Algunos efectos deben hacerse manualmente. Agreguemos una sombra fuerte copiando la capa (Ctrl + J). Elija la herramienta Seleccionar ruta (A). Luego seleccione copiar (Ctrl + C) e inserte (Ctrl + V). Luego, mueve unos pocos píxeles hacia arriba y establece el estilo de resta. Rellene la forma que acabamos de crear con un color gris oscuro (# 505050). La sombra (contorno inferior) está hecha..

Ahora puede que se pregunte por qué usamos esta técnica y no simplemente aplicamos un efecto de sombra interior. Bueno, eso es porque no queremos que la sombra se aplique a todo el bloqueo. Es por eso que añadimos la máscara de capa. Levante una herramienta de pincel (pincel suave negro) y dibuje en el medio de una forma. Eso hará que la sombra sea menos visible y agregará un poco más de plasticidad a nuestra imagen final. Como puede ver en la última imagen de abajo, la sombra desaparece a medida que avanzamos hacia la mitad.

Paso 6

Ok, vamos a oscurecer más nuestra cerradura. Sobre la capa de forma (de una parte inferior), cree una nueva capa (Ctrl + Alt + Shift + N). Configure la capa como máscara de corte de la capa anterior presionando (Ctrl + Alt + G). Recoge la herramienta de pincel (negro suave grande). Establece la opacidad para decir 30%. Luego dibuja en los lados izquierdo y derecho. Eso creará sombras suaves..

Puedes dibujar partes más claras como dibujaste las sombras. Use un pincel de color claro con una opacidad similar. Dibújalos en la nueva o la misma capa. Siga las imágenes a continuación para orientación.

Paso 7

Vamos a crear reflexiones en el borde superior siguiente. Seleccione toda la capa inferior (Ctrl + clic en la capa). Vaya a Seleccionar> Modificar> Contrato. Luego llene la selección (en una nueva capa) con un color blanco (Alt + retroceso). Mueva la selección dos píxeles hacia abajo (solo presione la flecha hacia abajo dos veces). Luego presione la tecla Eliminar para eliminar esta parte de la capa. No te olvides de deseleccionar con Ctrl + D!

Paso 8

Después de eso, comienza a definir la plasticidad de una cerradura usando reflejos más grandes. Use la herramienta de selección de rectángulo para crear un rectángulo en una nueva capa. Dibuje un degradado lineal (Herramienta de degradado) de blanco a transparente.

Paso 9

Seleccione una línea de 2 píxeles en la parte superior con la herramienta de selección de rectángulo, como se muestra a continuación. Luego sesga, como en la segunda imagen de abajo. Así es como la reflexión copia la forma de la cerradura..

Paso 10

Así, crea reflejos en el otro lado, pero mucho más grandes..

Paso 11

Lo hacemos más grande para que no se vea demasiado similar. Ya casi hemos terminado con la parte inferior. A continuación es cómo debe verse nuestro bloqueo hasta ahora.

Paso 12

A continuación añadimos una tira! Nuevamente crea selección una selección. Luego dibuje un gradiente en esta selección de amarillo (# F5E02F) a naranja (# F3BB2A).

Paso 13

Después de eso, elija la herramienta Marquesina de una sola fila. Luego, seleccione la primera y la última línea de la selección anterior (seleccione ambas líneas con la tecla Mayús presionada).

Utilice una herramienta de pincel y un color oscuro para satisfacer sus necesidades. Así es como se hace la diferencia entre el fondo y la tira..

Paso 14

Haga una selección presionando Ctrl-clic en una nueva capa. Luego, desde el menú Capas, agregue un nuevo Relleno de patrón. Use este patrón, solo cambie la Escala al 50% para que coincida con el tamaño del icono. A continuación, establezca el estilo de capa a Multiplicar. Entonces solo serán visibles las rayas negras.

Paso 15

Para hacer el patrón más pequeño cerca de los bordes, haga que la máscara sea más grande a la derecha y al lado izquierdo. Luego rasterice la capa (Capa> Rasterizar> Rellenar contenido).

Paso 16

A continuación, reduzca los lados izquierdo y derecho. Cortar las porciones y cambiar el tamaño según sea necesario. Esto hará que los lados parezcan cónicos y cortados en ángulo. Esto se puede hacer varias veces para maximizar el efecto..

Paso 17

Añadir otra capa. Dibuja algunos para oscurecer los lados de la tira. Nuevamente, use la herramienta de pincel con un color negro, opacidad suave y reducida.

Paso 18

La parte inferior de la cerradura está hecha, ¡genial! Trabajemos en la parte superior. Comience con una nueva capa de la parte superior y comience a colorear y definir los bordes. Use un color gris (# D5D5D5). Luego, dale un efecto de brillo interior con tamaño de 1px, color gris # 848484. Eso debería hacerlo bien. Establecer el modo de fusión para multiplicar.

Paso 19

Como aprendimos antes, una parte importante de una superficie metálica es el reflejo. Así que vamos a crear un reflejo que solo se aplicará a la mitad de la parte superior. Otra forma podría ayudarnos. Copie el que tenemos presionando Ctrl + J y coloréelo en negro para que veamos exactamente dónde están los bordes. A continuación, tome la Herramienta de selección de ruta y úsela para seleccionar el círculo interior. Entonces hazlo más grande con Ctrl + T.

Paso 20

Sobre el lado izquierdo y derecho, dibuje dos rectángulos con la tecla Alt presionada (resta).

Paso 21

Baje la opacidad de esta forma hasta el 30%. Crea una nueva capa entre esta y la forma original. Luego dibuja un degradado lineal de blanco a transparente. Presione Ctrl + Alt + G (cortando la máscara de la capa anterior) para que el reflejo sea visible solo en nuestro icono.

Paso 22

Como en la parte inferior, agregaremos dos reflexiones más grandes aquí. Solo tienen que formarse como la forma en que están, por lo que no serán rectángulos, sino elipses. Dibuja una elipse usando la herramienta Elipse, como en la imagen de abajo.

Paso 23

Gíralo con Ctrl + T unos 45 grados.

Paso 24

Finalmente, use la Herramienta de selección directa (A) para seleccionar dos puntos en el medio de la elipse. Luego muévalos hasta que la elipse emule la curva de la parte superior de la cerradura.

Paso 25

Duplicar esta capa (Ctrl + J). Luego voltéelo horizontalmente y muévalo hacia el lado derecho.

Paso 26

La cerradura está casi terminada. Solo queremos oscurecer los bordes en algunos lugares, por lo que el icono está completamente separado del fondo.

Primero, haga una selección de capa de la parte inferior del ícono de bloqueo (Ctrl + Clic en una capa). Crea una nueva capa. Luego dibuja en esa nueva capa. Usa nuestro pincel suave y oscuro para dibujar lugares donde quieras oscurecer el candado. Cuando termine, haga la selección 1 píxel más pequeña yendo a Seleccionar> Modificar> Contrato. A continuación, pulse la tecla Eliminar. La siguiente imagen muestra el escenario justo antes de borrar.

Paso 27

A continuación se muestra el 100% de la vista después de eliminar. Ya casi hemos terminado.

Paso 28

Se puede utilizar exactamente la misma técnica para lograr un alto nivel de detalle en la parte superior de una cerradura. Las flechas te muestran dónde oscurecer..

Paso 29

Cuando decida poner el icono en su diseño, no olvide agregar al color gris un poco del estilo de color del fondo en el que se colocará. En la siguiente imagen, se agregó más púrpura para adaptarse al diseño de la aplicación.

Conclusión

Y eso es todo. Espero que hayas aprendido algo nuevo. La imagen final está abajo..