Share
En este tutorial, creará un ícono semi-realista de ciencia ficción que podría usarse como un ícono de batería o base. Empecemos!
Cree un documento de 256 x 256 a 72 DPI. Este es un tamaño de imagen muy común para un icono de base. El color de fondo se puede establecer en blanco o transparente.
Vamos a configurar el lienzo mediante la creación de una capa de fondo blanco si aún no lo ha hecho. Encontrará esto útil más adelante cuando necesite ver el contraste de fondo invirtiendo la capa de fondo Cmd / Ctrl + I. Muestre sus Reglas y arrastre una nueva Guía al centro.
Con la herramienta Elipse (U), dibuje un óvalo en la parte superior central del lienzo con este color # e1e1e1. Puede centrarlo seleccionando todo el documento Cmd / Ctrl + A, usar la herramienta Mover (V) y hacer clic en el icono en la barra superior como se muestra en el diagrama. Llama a esto "Circle Top". Duplique esta capa catorce veces manteniendo presionada la tecla Alt + Abajo con la herramienta Mover (V). Combinar las catorce capas duplicadas puede llamarlo "Cuerpo de círculo". Coloque esta capa debajo de "Parte superior del círculo".
Aplica el siguiente estilo a "Circle Top" para darle un aspecto metálico. El Resplandor interno tiende a darle el efecto frensel mientras que la Superposición de degradado le da dimensión.
Aplica el siguiente estilo a "Circle Body".
Deberías tener algo como este.
Crea una nueva capa sobre "Circle Top" y llámala "Edge". Cmd / Ctrl-clic en la miniatura de "Circle Top" para su selección. Rellénelo con blanco utilizando la herramienta Cubo de pintura (G). Empuje la selección hacia arriba por 1px y presione Eliminar. Con el Toll de borrador (E) de aproximadamente 60 px de diámetro y 0% de dureza, haga clic una vez en el lado izquierdo y derecho del círculo. Cree una nueva capa en la parte superior y utilice el mismo método para obtener la selección de "Parte superior del círculo". Llama a esta capa "Brillar". Con un cepillo suave blanco y de 60 px de diámetro, haga clic una vez en el centro inferior del círculo. Reduce la opacidad al 80%. Esto le dará un aspecto crujiente y brillante..
Crea otra capa y llámala "Reflexión". Use la herramienta de marquesina rectangular (M) y dibuje un rectángulo en el lado del "Cuerpo del círculo" y rellénelo (G) con blanco. Invertí el color de fondo para que puedas verlo más claramente. Obtenga la selección de "Cuerpo del círculo" e Invertir Cmd / Ctrl + Shift + I. Ahora presione eliminar y establezca la opacidad al 10%. Esto podría no parecer ninguna diferencia, pero todo este paso tiene un gran impacto en el diseño..
Crea una nueva capa y llama a esto "Bulb". Obtenga la selección de "Circle Top" y rellene (G) con # 80fa96. Puede usar el color que desee, pero para este tutorial, buscaremos un verde ligeramente amarillento. Ingrese Free Transform Cmd / Ctrl + T y mientras presiona Shift + Alt, arrastre una de las esquinas hacia adentro hasta que encuentre que es el tamaño de la bombilla que desea.
Ahora aplica el siguiente estilo para un efecto de brillo..
Puede agrupar todas las capas en las que estábamos trabajando ahora, a excepción del fondo, y darle un nombre. Llamé a la mía "Cabeza". Crea una nueva llamada grupal "Cuerpo superior". Crea una nueva capa dentro de este grupo y llámala "Arriba". Use la herramienta Pluma (P) y dibuje lo que ve en el diagrama. Recuerde tener en cuenta la perspectiva al dibujar iconos 3D. Ahora llene (G) la forma con # d7d7d7 haciendo clic derecho> Rellenar ruta.
Una vez que hayas terminado, aplica el siguiente estilo.
Es hora de que añada brillo y reflexión. Ahora es un buen momento para hacer uso de un fondo negro. Seleccione la capa de fondo e Invertir Cmd / Ctrl + I. Comenzaremos con los bordes. Crea una nueva capa y llámala "Borde izquierdo". Obtenga la selección de la capa "Superior" y rellénela (G) con blanco. Empuje la selección hacia arriba y hacia la derecha por 1px y presione Eliminar. Obtenga la herramienta Borrador (E) de 70 px de diámetro, 0% de dureza y haga clic una vez que esté ligeramente alejado de la esquina izquierda. Mira el diagrama para ver lo que quiero decir..
Usando la misma técnica, dibuje un borde de 1px en la parte inferior derecha en una nueva capa llamada "Borde derecho". Borre ambos extremos de la línea con la herramienta Borrador (E).
Usaremos la herramienta Pluma (P) para dibujar el reflejo. Siga el diagrama, luego llénelo (G) con blanco y ajuste la opacidad al 20%.
Teniendo en cuenta el realismo, añadiremos un reflejo de sí mismo. Obtenga la selección de "Cuerpo de círculo" y rellénelo (G) con negro. Empuje hacia abajo justo debajo del cuerpo. Establece su opacidad al 20%. Sé que por derecho deberíamos estar tomando la imagen original en lugar de usar una negra. Pero a veces es bueno romper las reglas para obtener lo que quieres.
Crea un grupo llamado "Body Face", y una nueva capa dentro llamada "Face". Use la herramienta Pluma (P) y dibuje lo siguiente. Recuerde alinear los puntos con la placa metálica superior y mantener la curva tan simétrica como sea posible. Para dibujar una línea recta, presione Mayús al crear un nuevo punto.
Aplicar el siguiente estilo de capa..
Es hora de agregar reflexión y brillo a esta área como hicimos con los demás. Usando el método de selección que te enseñé anteriormente, crea un borde blanco de 1px a la derecha de "Cara". Use un borrador suave (E) de aproximadamente 100 px y cepille los dos extremos de la línea. Establece la opacidad al 70%. Crea una nueva capa y llama a esto "Oscuro". Obtenga la selección de "Cara" y use un degradado lineal negro (G) y arrástrelo de arriba a abajo como se muestra. Luego borre (E) la parte inferior con 0% de dureza y aproximadamente 100px. Solo recorra el borde al cepillar, manteniendo el borde alejado de la selección para que se vea así. A continuación, ajuste la opacidad al 10%.
Crea una nueva capa llamada "Brush Shine". Obtén la selección de "Cara" y Cepilla (B) la parte superior e inferior con blanco para que el área se vea algo así. A continuación, ajuste la opacidad al 20%.
Después de eso, crea una nueva capa llamada "Reflexión oscura". Use la herramienta Pluma (P), dibuje la forma que se muestra y rellene (G) con negro. Eliminar el área fuera de la selección de "Cara" como he enseñado anteriormente. Establece la opacidad al 4%. Repitiendo el proceso, cree una capa blanca de "Reflexión" con una opacidad del 10% en la parte superior. Deberías tener algo como abajo.
En la siguiente sección, crea un nuevo Grupo llamado "Dentro", luego una nueva capa llamada "Marco". Puede usar una Herramienta de lazo poligonal (L) o Herramienta de lápiz (P) para dibujar el marco del interior. Utilice # 777777 como el color. Trate de mantener un ancho constante en todo.
Aplica el estilo a esta capa..
Ahora crea una nueva capa llamada "Dark Edge" y crea un borde negro de 1px en el lado izquierdo de "Frame". Establece la opacidad al 20%. Luego crea una nueva capa llamada "Corner". Le daremos a este ícono un recuadro para que no se vea tan plano. Nuevamente, puede usar la Herramienta de lazo poligonal (L) o la Herramienta de pluma (P) para dibujar esto. Use # 5c5c5c como el color.
Aplicar el siguiente estilo de capa a "Esquina".
Vamos a añadirle sombra. Crea una nueva capa llamada "Darkness". Use una herramienta de degradado lineal (G) negra con transparencia para pintar en la selección de "Esquina". A continuación, ajuste la opacidad al 10%.
Ahora crea una nueva capa llamada "Cuerpo Interno". Dibuja un área rectangular para el interior con # 161616. Un consejo rápido es usar las Guías como un punto estratégico para dibujar objetos y usar la selección de otras capas para eliminar áreas no deseadas. He invertido el color de fondo para que lo veas claramente..
¡Aplica este estilo de capa y estamos a mitad de camino! La Sombra Interior Oscura y la Superposición de degradado ayudan a dar una gran profundidad.
Es hora de preparar un cambio en la iluminación del lado derecho del icono sin tener que volver a hacer toda la parte. Crea un nuevo grupo llamado "Para cambios en el lado derecho". Crea una nueva capa en el interior y llámala como quieras, la llamé "Oscurecer para el lado derecho". Utilice las capas anteriores y rellene (G) con negro, luego ajuste la opacidad al 20%.
Estos son los de cada capa junto con la Opacidad..
Así es como debe verse después de configurar la opacidad.
Necesitamos duplicar una copia de esta capa y usarla para el lado derecho. Primero, oculte la capa de fondo y el grupo "Cabeza" haciendo clic en el icono del ojo que se encuentra junto a ellos. Cree una nueva capa y Combine Cmd visible / Ctrl + Shift + E. Ingrese Cmd / Ctrl + T de transformación libre y Gírelo horizontalmente a la derecha Ubicación del punto de referencia haciendo clic con el botón derecho> Voltear horizontalmente y arrastrando el pivote central hacia la derecha. Oculte el grupo "Para cambios en el lado derecho" y muestre los grupos y capas anteriores.
Cree un nuevo grupo llamado "Derecho" y coloque la capa duplicada dentro de él. Tenemos algo de iluminación para agregar. Invertir Cmd / Ctrl + I en el fondo y crear una nueva capa llamada "Sombra de piso". Dibuja la sombra asi.
Ingrese al modo de máscara rápida (Q) y use la herramienta de degradado lineal (G) para completar algo así. Intenta alinear el gradiente con la sombra. Luego salga del modo de máscara rápida (Q) y aplique 3px Gaussian Blur debajo de Filter> Blur> Gaussian Blur.
Borre las áreas que están tocando el ícono y establezca la Opacidad en 30%. Agregue una máscara vectorial haciendo clic en el ícono a la derecha en la parte inferior del panel de capa Parece un rectángulo con un círculo en él. Use en algún lugar alrededor de una herramienta de degradado lineal gris medio (G) para rellenar el otro lado de la sombra para que se desvanezca.
Cree una nueva capa llamada "Lado" y dibuje un rectángulo negro como se muestra con la herramienta Rectangular Marquee (M) o la herramienta Rectangle (U). Aplica un Desenfoque Gaussiano de 5px, variándolo si quieres. Configure la opacidad al 30% y elimine las áreas que no están tocando el lado derecho del icono.
Crea una nueva capa llamada "Trazo de borde". Dibuje una línea blanca a lo largo del borde interior del metal ("Esquina") usando la herramienta de línea 1px (U). Luego use un borrador suave (E) de aproximadamente 40 px de diámetro para borrar ambos extremos de la línea. Ahora crea una nueva capa llamada "Edge Blur". Con una herramienta de marco rectangular (M) o una herramienta de línea (U), dibuje una línea blanca de 1px en el centro de la pantalla con la ayuda de una guía si es necesario. Luego aplique el Desenfoque Gaussiano de 1px y ajuste la Opacidad al 20%..
Cree un nuevo grupo llamado "Anillos", otro grupo dentro llamado "Vidrio" y una capa dentro llamada "Vidrio". Primero necesitamos hacer algunos bocetos para tener una idea de cómo se verá nuestro tubo circular 3D. Aquí te mostraré cómo obtengo el contorno de la forma usando círculos, luego una herramienta de lápiz (P) para trazar la mitad izquierda del tubo.
Rellene la forma con blanco y luego corte la mitad no deseada de la forma. Duplícalo y voltéalo hacia la derecha, luego combínalo con el otro lado.
Establece Relleno al 3% y aplica estos estilos..
Es hora de agregar reflejo y brillo, y esta suele ser la parte difícil, así que recomiendo buscar gafas y tubos alrededor y ver cómo funciona el reflejo y la opacidad. Primero crea una nueva capa llamada "Top Half Shine". Obtén la selección de "Vidrio" y rellénalo con blanco. Empuje la selección hacia abajo aproximadamente 10px o hasta la mitad del tubo. Agregue una máscara vectorial y pincele (B) los bordes del brillo para que se vea algo así. Use en algún lugar alrededor de 25px de diámetro. Establece la opacidad al 30%. Sugerencia, usar Vector Mask te ayuda a experimentar sin destruir tu imagen.
Crea una nueva capa llamada "Upper Top Shine". Repetiremos el proceso, pero con un brillo más fino. Para esto, borre (E) los bordes para que se mezclen bien y ajuste la opacidad al 30%.
Crea una nueva capa llamada "Línea gruesa". use una herramienta Pluma y dibuje una curva corta similar a la curva del tubo. Fije su pincel a 3px de diámetro, 100% de dureza y blanco. Recorrer la ruta con la herramienta Pluma (P) Haga clic con el botón derecho> Trazar ruta, elija Pincel y seleccione Simular presión, luego haga clic en Aceptar. Establece la opacidad al 30%. Puede usar la herramienta Mover (V) para mover su línea si no la dibujó con precisión anteriormente.
Crea una nueva capa llamada "Thin Line". Otra vez use la misma técnica, pero esta vez con un Pincel de 1px (B) y sin Simular Presión. Luego borre (E) o enmascare los dos extremos de la línea y establezca la opacidad al 90%. Aplique un brillo externo blanco de 4px con una opacidad del 40% para el estilo de capa.
Estamos a mitad de camino a través de la reflexión. Crea una nueva capa llamada "Side Shine". Utilice la herramienta Pluma (P) para dibujar una forma de curva, siguiendo la forma del tubo. Luego haga clic derecho> Rellenar ruta con blanco. Agregue la máscara vectorial y comience a cepillar (B) con un cepillo suave alrededor de los lados del brillo de manera que se difumine hacia la parte inferior y hacia la derecha. Establece la opacidad al 40%. Obtenga la selección de "Cristal" e Invertir selección Cmd / Ctrl + Shift + I y luego presione eliminar.
Ahora crearemos los bordes / bordes del tubo para que no se vea tan plano. Cree una nueva capa y cree un borde blanco de 2 píxeles en el lado izquierdo de "Vidrio". Luego haga lo mismo para el lado derecho y combine las dos capas juntas. Establece la opacidad al 40%. Aplique bisel y relieve de tamaño 0px y 100% de opacidad para resaltar y sombrear.
Necesitamos preparar otro detalle importante para el tubo. Crea una nueva capa llamada "Reflexión Verde". Use la selección de "Vidrio" y rellene (G) la mitad inferior del área con # 3bf75f. Luego agregue la máscara vectorial y el pincel (B) en la parte superior y los lados del área para que se difumine ligeramente. Establezca el Modo de fusión en Lineal Dodge (Agregar) y Opacidad en 25%. Esto agregará realsim a medida que los anillos verdes brillantes debajo de él crearán un reflejo en el anillo que está por encima.
Ahora es el momento de preparar estas imágenes para la duplicación. Necesitamos un vaso con el reflejo verde, así que cree una nueva capa en este grupo y, a continuación, pulse Alt y haga clic en el icono de ojo del grupo. Combinar Visible Cmd / Ctrl + Shift + E. Presione Alt nuevamente y oculte el reflejo verde y luego repita el proceso de duplicación. Ahora haz lo mismo sin el "Cristal", también. Así que ahora deberías tener 3 tipos de duplicados, vidrio con reflejo verde, vidrio sin reflejo verde, solo el reflejo pero no el verde.
Cree una nueva capa llamada "One Ring", obtenga la selección de "Vidrio" y rellénela (G) con # 3cf760. Empuje hacia abajo por 80px por Shift + abajo. Puedes colocar esto en un nuevo grupo y llamarlo como quieras. Llamé al mío "1" ya que será el nivel 1. Aplique estos estilos para el brillo y la dimensión.
¿Recuerdas la capa de reflexión que creamos anteriormente? Duplícalo y colócalo justo sobre el anillo verde. Luego duplica el uno con reflejo verde y colócalo en el centro. Duplica el cristal blanco y deberías tener este.
Haz lo mismo para cada nivel, poniéndolos en grupos o fusionándolos si quieres.
Crea una nueva capa llamada "Sombra" en la parte inferior del grupo "Anillos". Utilice la selección de "Vidrio" para rellenar (G) con negro. Empuje (V) hacia abajo aproximadamente 15px. Seleccione una mitad de la sombra y inclínela hacia arriba para que toque el lado del tubo. En el modo Transformación libre Cmd / Ctrl + T, haga clic con el botón derecho> Desviar. Puede aislar mejor la selección empujándola fuera de lugar y luego hacia atrás, después de seleccionarla con la herramienta Rectangular Marquee (M). Haz lo mismo para la otra mitad. Duplíquelo por tres tubos y luego ajuste la Opacidad al 20%. Use la herramienta Lazo poligonal (L) para eliminar las áreas que no están tocando el icono.
Casi terminamos. Añadiremos algunos detalles finales. Primero, muestre la capa de fondo y la capa "Sombra de piso" en el grupo "Derecho". Luego cree una nueva capa y Combine Visible Cmd / Ctrl + Shift + E. Mostrar las capas que acaba de ocultar. Cree una nueva capa en la parte superior y llámela "Ruido". Obtenga la selección de la capa fusionada y rellénela (G) con un 50% de gris. Aplique 10% de ruido gaussiano, monocromático en Filtro> Ruido> Agregar ruido. Establezca Modo de fusión en Superposición y Opacidad en 10%. Ahora puede eliminar la capa fusionada. No notarías mucha diferencia, pero ayuda a crear esa apariencia imperfecta.
Crea una nueva capa justo encima de la capa de fondo y llámala "Sombra". Usa la Herramienta Lazo Poligonal (L) para dibujar algo así, delineando la base del ícono aproximadamente. Aplica un Desenfoque Gaussiano de 6px y establece la Opacidad al 60%. Por fin has terminado!
Ahora que ha terminado su icono, simplemente exporte los iconos cada uno con un nivel diferente ocultando y mostrando los anillos necesarios.
Accentsconagua