Conector en Interfaces con Photoshop

Tutorial Photoshop de Interfaces y Diseño Web

Tutorial por Korolok de PhotoshopCastellano

Korolok, de Photoshopcastellano.com.ar nos trae su teécnica para dibujar un conector en interfaces.

1 - Empezamos Creando un nuevo documento RGB con el fondo negro de 200 x 200 pixeles, o el tamaño adecuado a nuestro trabajo. Colocamos el color del primer plano en blanco y colocamos un color de fondo.

2- Hacemos una selección rectangular, vamos a rellenar esta selección con un degrade lineal de negro--blanco--negro. Cuando eso está completo, guardamos esta selección rectangular como canal alfa 1, para esto vamos al menú Selección / Guardar selección. Deseleccionamos la imagen (Ctrl-D) .

3 - Duplicamos la capa llendo al menú Capa / Duplicar Capa.

Vamos a trabajar en la capa duplicada, vamos al menú Edición / Tranformar / Perspectiva. Apretando la tecla CTRL hacemos un click sobre los puntos de tracción de la esquina izquierdas mientras arrastramos verticalmente hacia el centro de la imagen. Cuando estamos satisfechos con la forma del cono, pulsamos el botón Aprobar Transformación localizado en la barra de Opciones de la Herramienta

4 - Seleccionamos la capa donde tenemos el cono y con la herramienta Mover la posicionamos junto al degrade rectangular. Debemos terminar con tres capas: Un fondo blanco, un degrade rectangular, y un degrade del cono.

5 - Vamos a crear las trenzas para el connector. Creamos una nueva capa, vamos al menú Capa / Nuevo. Usando la técnica de Lineas televisibas creamos una selección rectangular y la rellenamos con la herramienta Bote de pintura usando las Lineas televisibas como un pattern. Deseleccionamos apretando Ctrl-D.

6 - Para conseguir el efecto que queremos, rotamos la capa de las Lineas televisibas a la izquierda por aproximadamente 15 grados.

7 - Cargamos la selección rectangular guardada, invertimos la selección para esto vamos al menú Seleccióm / Invertir, y entonces apretamos la tecla SUPR para eliminar la selección.

8 - Precionamos la tecla Ctrl y hacemos un click en la capa del cono en la paleta de Capas. Guardamos esta selección como canal alfa 2, para esto vamos al menú Selección / Guardar selección.

9 - Nuestro conector esta casi completo. Creamos una nueva capa, vamos al menú Capa / Nuevo. Con la herramienta Arografo, precionamos alrededor de los bordes para agregar algunas sombras.
Tamaño= 21 Dureza= 0 Presión= 100

Deseleccionamos apretando Ctrl-D.

10 - Vamos a crear una sombra para la sección trenzada del connector. Para esto cargamos la selección que tenemos guardada Alfa 1. Invertimos la selección para esto vamos al menú Seleccióm / Invertir. Con la herramienta Arografo, precionamos alrededor de los bordes para agregar algunas sombras.
Tamaño= 45
Dureza= 0
Presión= 16

Deseleccionamos apretando Ctrl-D

11 - Y por último, creamos una sombra para el conector.

Podemos variar esta técnica coloreando la trenza a un color diferente, o cualquier otra parte del connector. Ahora vamos a unir las diferentes capas del conector para hacer una imagen. Asegurese que no una el fondo. Esto hará más fácil copiar y pegar el conector en cualquier otra imagen.