Tutorial de ilustración: Cómo crear un conector de dispositivo iOS en Photoshop

Si tienes algún dispositivo iOS, estarás muy familiarizado con el conector Dock. Está ahí, en tu escritorio, y solo los productos Apple pueden usarlo. Pero, ¿alguna vez te detuviste a observar su belleza? A pesar de ser un simple cable, Apple le agregó algunas curvas agradables y un diseño que lo hace ideal para una pequeña ilustración de Photoshop. Sigue leyendo para ver cómo hacer este diseño perfecto en píxeles desde cero (y con un poco de ayuda de algunos recursos ).

Avance

Paso 1

Crea el archivo para tu trabajo principal. El tamaño del documento no importa, ya que el fondo que crearemos es completamente modular. Para este tutorial, utilizaré un tamaño de 558 x 300 px. Establece el color de fondo en #3c5c99.

Paso 2

A continuación, crearemos el fondo basado en una cuadrícula de estilo plano. Para ello, dejaremos nuestro documento actual para crear un patrón. Crea un documento de 8 x 8 píxeles con un fondo transparente. Con la herramienta de lápiz, dibuja una línea blanca de 1 píxeles verticalmente en el extremo derecho y horizontalmente en la parte inferior. Pulsa Ctrl+A para seleccionar todo el contenido y selecciona EditarDefinir patrón para generar un patrón a partir del área seleccionada. Ponle el nombre que quieras.

Paso 3

Abre otro documento, esta vez de 64x64px, y una vez más, con un fondo transparente. Al igual que el patrón anterior, dibuja una línea blanca de 1px verticalmente en el extremo derecho y horizontalmente a lo largo de la parte inferior. Establece la opacidad de esta capa al 30%. Crea una nueva capa. Abre la ventana Relleno (Shift-Retroceso). En "Usar", selecciona patrón y busca el patrón que acabamos de crear. Pulsa "Aceptar" y verás una cuadrícula más pequeña junto con la cuadrícula más grande que acabas de crear. Establece la opacidad de esta capa al 10%. Utilizando el mismo método del Paso 2, define este documento como un patrón.

Paso 4

Regresa a nuestro documento principal y, en una nueva capa, rellénala con nuestro nuevo patrón. Verás que comienza a surgir un bonito patrón de plano. A continuación, toma un pincel redondo suave de unos 600 px en blanco y, en una nueva capa, haz clic una vez para agregar un brillo circular. Configura el modo de fusión de esto en Luz suave.

Paso 5

Agreguemos algunos detalles grunge a nuestro fondo. Estoy usando el conjunto Grunge Paper Patterns para esto. Simplemente toma algunos de los patrones y rellénalos en una nueva capa. Luego, experimenta con los modos de fusión y la opacidad hasta que obtengas algo que te guste. Para algunas de las texturas, es posible que desees convertirlas a blanco y negro (ImagenAjustesBlanco y negro). Personalmente, estoy usando las Texturas 4 y 6, ambas con una opacidad del 50%, con el n.° 6 configurado en Restar y el n.° 4 configurado en Trama. Sin embargo, no hay una forma correcta de hacerlo, así que experimenta todo lo que quieras, hay innumerables posibilidades.

Paso 6

Ahora, comencemos con nuestro conector de base. Para comenzar, construya un rectángulo redondeado deeste añox 24 con un radio de 3 px. Puede establecer el tamaño del rectángulo presionando el triángulo en las opciones de la herramienta y eligiendo "Tamaño fijo". Colóquelo como se muestra en la imagen y aplique los siguientes estilos.

Paso 7

A continuación, con la herramienta Rectángulo, crea un rectángulo deeste añox 70 píxeles y colócalo alrededor del centro del lienzo. Aplica los siguientes estilos.

Paso 8

Para producir el icono del conector de base, crearemos un rectángulo redondeado de 34 x 15 px, con un radio de 1 px. Rasterizaremos la capa. Pulsaremos Ctrl+clic en la miniatura de la capa para seleccionar el contenido de esa capa. Ve a SeleccionarModificarContraer y contrae la selección en 1 px. Elimina la selección, dejando un borde de 1 px. Toma la herramienta de lápiz y dibuja una línea horizontal de 1 px en el medio del rectángulo. Aplica una Superposición de color a esta capa de #7c7c7c.

Paso 9

Crea otro rectángulo, esta vez de 162 x 44, y colócalo como se muestra. Rasterízalo. Aplica estos estilos de capa.

En una nueva capa, construye un pequeño triángulo con la herramienta que elijas (herramienta pluma, herramienta polígono, herramienta lazo poligonal) y colócalo en el borde superior del rectángulo, un poco hacia adentro desde un lado. Duplica el triángulo y colócalo en el otro lado. Combina estas dos capas (selecciona las capas y presiona Ctrl+E). Con nuestra nueva capa de rectángulo seleccionada, presiona Ctrl+Clic en la miniatura de esta capa de triángulo. Presiona Eliminar para borrar esa forma de nuestra capa de rectángulo. Elimina también la capa de triángulo.

Paso 10

Ahora, crea dos triángulos pequeños a cada lado del rectángulo. El triángulo izquierdo será #e0e5e9 y el derecho #90959d. Agrega la siguiente sombra paralela a ambos.

Paso 11

Haz un rectángulo de 138 x 40 píxeles y colócalo como se muestra. Aplica los siguientes estilos.

Paso 12

Con la herramienta de lápiz, dibuja una línea vertical de 2 px como se muestra en #353c3f. Aplica estos estilos.

Luego duplica la capa para que haya 4 y colócalas como se muestra.

Paso 13

Crea un pequeño cuadrado blanco con el ancho entre las líneas que acabamos de crear. Añádele un efecto de desenfoque de movimiento (FiltroDesenfocarDesenfoque de movimiento) a 90 grados y 8 píxeles.

A continuación, crea otro rectángulo pequeño (¡no parece que estemos creando nada más!) y agrégale los siguientes estilos de capa.

Paso 14

Para añadir un poco de sombra a nuestra sección de metal, haremos un rectángulo del mismo ancho que la sección de metal y una altura de 2/3 px. Colóquelo justo debajo del metal. Añádale estos estilos.

Paso 15

Una vez que hayamos completado el conector de la base, podemos empezar con el cable. Esto, como casi todo el tutorial, implica hacer pequeños rectángulos, pero la magia surge una vez que comenzamos a agregarle estilos. Para comenzar, haremos un rectángulo de 22 píxeles de ancho, que se extienda desde la parte inferior del conector hasta la parte inferior del lienzo. Agregue esta superposición de degradado a la capa.

Paso 16

Crearemos una sombra para la capa. Crea un rectángulo de 22 x 5 píxeles con el color #727272 y aplica un desenfoque de movimiento de 90 grados y 5 píxeles. No sabremos dónde colocarlo hasta que hayamos completado el siguiente paso, así que hagámoslo.

Paso 17

Haz un cuadrado de 32 x 32 píxeles y colócalo en el borde inferior del conector. Aplica el mismo estilo que el cable.

Ahora puedes mover la sombra que creamos en el paso 16 para que encaje debajo del cuadrado, proyectando un poco de sombra.

Paso 18

Este es el último paso, y te sorprenderá saber que también implicó crear un rectángulo, esta vez de 32 x 5 px, en el n.° 727272. Aplica un desenfoque de movimiento a 90 grados y 5 px, y colócalo en la parte inferior del conector de la base. Cualquier parte de esta capa que se extienda hacia el conector se puede cortar con la herramienta de marco.

Conclusión

Felicitaciones, has llegado al final y probablemente ya estés harto de dibujar pequeños rectángulos. Sin embargo, con suerte habrás obtenido un gran resultado y habrás aprendido un poco en el camino. Si algo no salió como debería o tienes alguna pregunta, no dudes en preguntar en los comentarios.