Spanish (Español) translation by Rosario (you can also view the original English article)
En los siguientes pasos aprenderás a crear un efecto de texto sobre una placa de circuito en Adobe Illustrator. Inicialmente, aprenderás a configurar una cuadrícula sencilla y a crear la forma principal de la placa de circuito utilizando herramientas y efectos básicos junto con algunas opciones del panel Buscatrazos. A continuación, utilizando técnicas básicas de construcción de formas vectoriales y aprovechando al máximo el efecto Transformar y la opción Ajustar a cuadrícula, aprenderás a crear los trazados de los circuitos. Por último, utilizando principalmente el panel Apariencia, aprenderás a crear un chip y algunos componentes más pequeños.
1. Crea un nuevo documento y configura una cuadrícula
Pulsa Control + N para crear un Nuevo documento. Selecciona Píxeles en el menú desplegable Unidades, introduce 600 en la casilla de anchura y 355 en la de altura y haz clic en el botón Avanzado. Selecciona RGB, Pantalla (72ppp) y asegúrate de que la casilla Alinear nuevos objetos con cuadrícula de píxeles esté desmarcada antes de hacer clic en Aceptar.
Activa la Cuadrícula (Ver > Mostrar cuadrícula) y la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula). Para empezar necesitarás una cuadrícula cada 5px, así que simplemente ve a Edición > Preferencias > Guías > Cuadrícula, introduce 5 en la casilla Línea de cuadrícula cada y 1 en la casilla Subdivisiones. También deberías abrir el panel de información (Ventana > Información) para obtener una vista previa con el tamaño y la posición de tus formas. No olvides establecer la unidad de medida en píxeles desde Edición > Preferencias > Unidades > Generales. Todas estas opciones aumentarán significativamente tu velocidad de trabajo.
2. Crea la placa
Paso 1
Escoge la herramienta Rectángulo (M) y enfócate en tu barra de herramientas. Elimina el color del trazo y luego selecciona el relleno y establece su color en R=2 G=110 B=60. Muévete a tu mesa de trabajo y crea un rectángulo de 410 x 165px, la opción Ajustar a cuadrícula debería facilitar tu trabajo.
Paso 2
Usando la herramienta Elipse (L), crea un círculo de 5px, establece el color de relleno en negro y colócalo como se muestra en la primera imagen. Asegúrate de que esta nueva forma está seleccionada y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la izquierda (en la siguiente imagen), haz clic en Aceptar y ve de nuevo a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la derecha (en la siguiente imagen), haz clic en Aceptar y ve a Objeto > Expandir apariencia.
Paso 3
Asegúrate de que la herramienta Elipse (L) sigue activa, crea un nuevo círculo de 5px, establece el color de relleno en negro y colócalo como se muestra en la siguiente imagen.
Paso 4
Usando la herramienta Rectángulo (M), crea una forma de 10 x 5px, establece el color de relleno en negro y colócala como se muestra en la primera imagen. Asegúrate de que esta nueva forma está seleccionada y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la izquierda (en la siguiente imagen), haz clic en Aceptar y ve de nuevo a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la derecha (en la siguiente imagen), haz clic en Aceptar y ve a Objeto > Expandir apariencia.
Paso 5
Asegúrate de que la herramienta Rectángulo (M) sigue activa y enfócate en la esquina superior derecha de tu rectángulo verde. Crea un cuadrado de 10px, establece el color de relleno en negro y colócalo como se muestra en la primera imagen. Enfócate en esta nueva forma, toma la herramienta Eliminar punto de ancla (-) y simplemente haz clic en el punto de anclaje inferior izquierdo para eliminarlo. Esto debería convertir tu cuadrado negro en un triángulo. Vuelve a seleccionar la herramienta Rectángulo (M) y enfócate en la esquina inferior izquierda de tu rectángulo verde. Crea un nuevo cuadrado de 10px, establece el color de relleno en negro y colócalo como se muestra en la primera imagen. Enfócate en esta nueva forma, toma la herramienta Eliminar punto de ancla (-) y simplemente elimina el punto de anclaje superior derecho. Al final todo debería verse como en la segunda imagen.
Paso 6
Selecciona una de tus formas negras y ve a Seleccionar > Mismo > Apariencia. Esto seleccionará todas tus formas negras. Asegúrate de que estas formas están seleccionadas y pulsa Control + 8 (o ve a Objeto > Trazado compuesto > Crear) para convertirlas en un simple Trazado compuesto.
Paso 7
Selecciona tu trazado compuesto negro junto con el rectángulo verde, abre el panel Buscatrazos (Ventana > Buscatrazos) y haz clic en el botón Menos frente. Asegúrate de que la forma resultante permanece seleccionada, enfócate en el panel Apariencia (Ventana > Apariencia), añade un trazo de 2 puntos, establece el color en R=50 G=130 B=90 y alinéalo al interior. Enfócate en el panel Apariencia y añade un segundo trazo para esta forma usando el botón Añadir nuevo trazo (señalado por la pequeña flecha azul en la siguiente imagen). Selecciona este nuevo trazo, establece el color en R=0 G=60 B=20 y disminuye su ancho a 1px.
Paso 8
Vuelve a seleccionar tu trazado compuesto y ve a Efecto > Estilizar > Sombra paralela. Introduce las propiedades que se muestran en la ventana superior izquierda (en la siguiente imagen), haz clic en Aceptar y luego añade los otros cuatro efectos de Sombra paralela que se muestran en la siguiente imagen. Ve al panel Capas y bloquea este trazado compuesto para asegurarte de que no lo seleccionarás/moverás accidentalmente.
3. Añade un fragmento de texto y dos rectángulos simples
Paso 1
Toma la herramienta Texto (T), haz clic en tu mesa de trabajo y añade el texto "VECTOR". Utiliza la fuente "Viafont", establece el tamaño en 80px y el color en blanco. Asegúrate de que el texto sigue seleccionado, ve al panel de Transparencia (Ventana > Transparencia) y baja la Opacidad al 30%. Ve al panel de Capas y bloquea este fragmento de texto.
Paso 2
Usando la herramienta Rectángulo (M), crea un cuadrado de 45px, establece el color de relleno en negro y colócalo como se muestra en la primera imagen. Continúa con la herramienta Rectángulo (M) aún activa, crea una forma de 10 x 35px, establece el color de relleno en negro y colócala como se muestra en la primera imagen. Asegúrate de que esta nueva forma está seleccionada y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la izquierda (en la siguiente imagen), haz clic en Aceptar y ve de nuevo a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la derecha (en la siguiente imagen) y haz clic en Aceptar.
4. Crea los circuitos verdes
Paso 1
Usando la herramienta Pluma (P), crea un trazado vertical de 35px y colócalo como se muestra en la primera imagen. Añade un 1pt para este nuevo trazado, establece su color en R=117 G=165 B=75 y asegúrate de que no tienes ningún color establecido para el relleno. Asegúrate de que tu trazado vertical sigue seleccionado y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la siguiente imagen y haz clic en Aceptar. Duplica este trazado fino (Control + C > Control + F), selecciona la copia, arrástrala hacia abajo y colócala como se muestra en la tercera imagen.
Paso 2
Selecciona el trazado vertical inferior y ve a Objeto > Expandir apariencia. Desplázate al panel Capas, selecciona el grupo recién creado y pulsa Mayúsculas + Control + G dos veces para Desagruparlo.
Paso 3
Enfócate en la fila inferior de trazados verticales. Ve a los dos primeros trazados y toma la herramienta Selección directa (A). Selecciona el punto de anclaje superior (resaltado en la primera imagen) y simplemente pulsa Control + J (o ve a Objeto > Trazado > Unir) para conectarlos. Asegúrate de que la herramienta Selección directa (A) está activa, vuelve a seleccionar los dos puntos de anclaje resaltados en la segunda imagen y arrástralos 25px hacia arriba. Al final todo debería verse como en la tercera imagen.
Paso 4
Muévete hacia el tercer trazado vertical de tu fila inferior de trazados verticales. Selecciónalo, toma la herramienta Pluma (P), haz clic en el punto de anclaje superior, muévete 35px hacia arriba y luego simplemente haz clic para añadir un tercer punto de anclaje. Asegúrate de que tu Trazado permanece seleccionado, muévete 30px hacia la izquierda y añade un cuarto punto de anclaje, luego muévete 35px hacia abajo y añade el último punto de anclaje para tu trazado. Al final todo debería verse como en la cuarta imagen.
Paso 5
Muévete al cuarto trazado vertical de tu fila inferior de trazados verticales. Toma la herramienta Selección directa (A), selecciona el punto de anclaje superior y arrástralo 50px hacia arriba.
Paso 6
Selecciona tu trazado vertical superior y ve a Objeto > Expandir apariencia. Ve al panel Capas, selecciona el grupo de formas resultante y pulsa Mayúsculas + Control + G dos veces para Desagruparlo. Ahora, utilizando la herramienta Selección directa (A) y la herramienta Pluma (P) junto con las sencillas técnicas mencionadas en los tres últimos pasos, edita el resto de los trazados verticales más o menos como se muestra en la segunda imagen. No tienen que ser exactamente como en la imagen, pero asegúrate de que estás colocando los trazados alrededor del texto.
Paso 7
Ahora, un pequeño ajuste para la "C". Enfócate en esta letra, escoge la herramienta Elipse (L), crea un círculo de 25px y colócalo como se muestra en la primera imagen. Añade un trazo de 1px para este trazado y establece su color en R=117 G=165 B=75. Enfócate en este círculo, cambia a la herramienta Selección directa (A), selecciona el punto de anclaje de la derecha y simplemente pulsa la tecla Borrar del teclado para eliminarlo. Asegúrate de que la herramienta Selección directa (A) permanece activa, selecciona los dos puntos de anclaje resaltados en la segunda imagen y pulsa Control + J para conectarlos. Sube, selecciona los dos puntos de anclaje resaltados en la cuarta imagen y pulsa Control + J. Al final todo debería quedar como en la sexta imagen.
Paso 8
Selecciona uno de tus trazados finos y ve a Seleccionar > Mismo > Apariencia para seleccionar todos esos trazados finos. Una vez que tengas todos estos trazados seleccionados pulsa Control + G para Agruparlos. Activa la Previsualización de píxeles (Alt + Control + Y o Ver > Previsualización de píxeles). Observa detenidamente uno de esos trazados finos y notarás que está un poco pixelado. Todo se debe a que tus trazados no están perfectamente alineados con la cuadrícula de píxeles. Nos ocuparemos de este problema en el siguiente paso.
Paso 9
Asegúrate de que tu grupo de trazados finos sigue seleccionado y ve a Efecto > Distorsionar y transformar > Transformar. Enfócate en la sección Mover, arrastra ambos deslizadores a 0,5px y haz clic en Aceptar. Echa un nuevo vistazo a tu grupo y verás que los trazados ya no están pixelados. Puedes desactivar la Previsualización de píxeles (Alt + Control + Y).
Paso 10
Para el siguiente paso necesitarás una cuadrícula cada 1px, así que ve a Edición > Preferencias > Guías y cuadrícula e introduce 1 en la casilla Línea de cuadrícula cada. Elige la herramienta Elipse (L) y crea un círculo de 3px. Añade un trazo de 1px para esta pequeña forma, establece el color en R=117 G=165 B=75 y alinéalo al exterior. Multiplica (Control + C > Control + F) este pequeño círculo y distribuye las copias como se muestra en la segunda imagen.
Paso 11
Usando la herramienta Elipse (L), crea un nuevo círculo de 3px, establece el color de relleno en R=117 G=165 B=75 y colócalo como se muestra en la primera imagen. Asegúrate de que esta nueva forma permanece seleccionada y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la izquierda (en la siguiente imagen), haz clic en Aceptar y ve de nuevo a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la derecha (en la siguiente imagen) y haz clic en Aceptar.
Paso 12
Usando la herramienta Elipse (L), crea un nuevo círculo de 3px, establece el color de relleno en R=117 G=165 B=75 y colócalo como se muestra en la primera imagen. Asegúrate de que esta nueva forma permanece seleccionada y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la izquierda (en la siguiente imagen), haz clic en Aceptar y ve de nuevo a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la derecha (en la siguiente imagen) y haz clic en Aceptar.
Paso 13
Selecciona todos esos círculos de 3px junto con el grupo de trazados finos y Agrúpalos (Control + G). Asegúrate de que este nuevo grupo está seleccionado y ve a Efecto > Estilizar > Sombra paralela. Introduce las propiedades que se muestran en la siguiente imagen y haz clic en Aceptar.
5. Crea los circuitos amarillos
Paso 1
Vuelve a "Línea de cuadrícula cada 5px", para ello ve a Edición > Preferencias > Guías y cuadrícula e introduce 5 en la casilla Línea de cuadrícula cada. Usando la herramienta Pluma (P), crea un trazado vertical de 25px y colócalo como se muestra en la primera imagen. Añade un 1pt para este nuevo trazado, establece su color en R=165 G=155 B=55 y asegúrate de que no tienes ningún color establecido para el relleno. Asegúrate de que tu trazado vertical sigue seleccionado y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la siguiente imagen y haz clic en Aceptar. Duplica este trazado fino (Control + C > Control + F), selecciona la copia, arrástrala hacia abajo y colócala como se muestra en la tercera imagen.
Paso 2
Asegúrate de que los dos trazados verticales realizados en el paso anterior están seleccionados y ve a Objeto > Expandir apariencia. Ve al panel Capas y Desagrupa (Mayúsculas + Control + G dos veces) los dos grupos resultantes. Usando la herramienta Selección directa (A) y la herramienta Pluma (P), edita estos nuevos trazados aproximadamente como se muestra en la siguiente imagen.
Paso 3
Selecciona todos los trazados que tengan el color de trazo establecido en R=165 G=155 B=55 (Seleccionar > Mismo > Apariencia) y Agrúpalos (Control + G). De nuevo, si activas la Previsualización de píxeles notarás que estos trazados finos están un poco pixelados. Asegúrate de que el grupo hecho en este paso está seleccionado y ve a Efecto > Distorsionar y transformar > Transformar. Enfócate en la sección Mover, arrastra ambos deslizadores a 0,5px y haz clic en Aceptar.
Paso 4
Cambia a "línea de cuadrícula cada 1px", para ello ve a Edición > Preferencias > Guías y cuadrícula e introduce 1 en la casilla Línea de cuadrícula cada. Elige la herramienta Rectángulo (M) y crea un cuadrado de 3px. Añade un trazo de 1px para esta pequeña forma, establece el color en R=165 G=155 B=55 y alinéalo al interior. Multiplica este pequeño cuadrado (Control + C > Control + F) y distribuye las copias como se muestra en la segunda imagen.
Paso 5
Usando la herramienta Elipse (L), crea un círculo de 3px, establece el color de relleno en R=65 G=155 B=55 y colócalo como se muestra en la primera imagen. Asegúrate de que esta nueva forma permanece seleccionada y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la izquierda (en la siguiente imagen), haz clic en Aceptar y ve de nuevo a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la derecha (en la siguiente imagen) y haz clic en Aceptar.
Paso 6
Selecciona todos esos cuadrados de 3px junto con el círculo de 3px y el grupo de trazados finos y Agrúpalos (Control + G). Asegúrate de que este nuevo grupo está seleccionado y ve a Efecto > Estilizar > Sombra paralela. Introduce las propiedades que se muestran en la siguiente imagen y haz clic en Aceptar.
10. Crea el chip y las piezas de acero
Paso 1
Enfócate en el panel de Capas, selecciona el cuadrado negro de 45px y tráelo al frente (Mayús + Control + ] ). Enfócate en el extremo superior izquierdo de esta forma oscura, toma la herramienta Rectángulo (M) y crea una forma de 7 x 1px. Colócala como se muestra en la segunda imagen, elige un color aleatorio para el relleno y asegúrate de que no tienes ningún color establecido para el trazo. Enfócate en este pequeño rectángulo, reemplaza el color plano usado para el relleno con el degradado lineal que se muestra abajo y luego ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 0,5px y haz clic en Aceptar.
Paso 2
Vuelve a seleccionar ese rectángulo de 7 x 1px, envíalo detrás del rectángulo negro (Control + [ ) y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la izquierda (en la siguiente imagen), haz clic en Aceptar y ve de nuevo a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la ventana de la derecha (en la siguiente imagen), haz clic en Aceptar y ve a Efecto > Estilizar > Sombra paralela. Introduce los atributos que se muestran a continuación y haz clic en Aceptar.
Paso 3
Vuelve a seleccionar tu cuadrado negro y enfócate en el panel Apariencia. Primero, selecciona el relleno y reemplaza el color existente con R=30 G=30 B=30. A continuación, añade un trazo de 2 puntos, establece el color en R=40 G=40 B=40 y alinéalo al interior. Enfócate en el panel Apariencia y añade un segundo trazo para este cuadrado usando el mismo botón de Añadir nuevo trazo. Selecciona este nuevo trazo, hazlo de 1px de ancho, establece el color en negro y alinéalo al interior. Asegúrate de que todo el trazado está seleccionado (simplemente haz clic en el fragmento de texto "Trazado" de la parte superior del panel Apariencia) y ve a Efecto > Estilizar > Redondear vértices. Introduce un Radio de 3px y haz clic en OK.
Paso 4
Asegúrate de que tu cuadrado de 45px permanece seleccionado, enfócate en el panel Apariencia y añade un segundo relleno usando el botón Añadir nuevo relleno (señalado por la pequeña flecha azul en la siguiente imagen). Selecciona este nuevo relleno, arrástralo a la parte inferior del panel Apariencia, establece el color en negro, baja su Opacidad al 10% y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de 1px y haz clic en Aceptar. Vuelve al panel Apariencia y añade un tercer relleno para este cuadrado. Arrástralo a la parte inferior del panel Apariencia, establece el color en negro, baja su Opacidad al 5% y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de 2px, haz clic en Aceptar y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la siguiente imagen y haz clic en Aceptar.
Vuelve al panel Apariencia y añade un cuarto relleno para tu cuadrado. Arrástralo a la parte inferior del panel Apariencia, establece el color en negro, baja su Opacidad al 15% y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de 2px, haz clic en Aceptar y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y ve a Efecto > Desenfocar > Desenfoque gaussiano. Introduce un Radio de 5px y haz clic en Aceptar.
Paso 5
Usando la herramienta Elipse (L), crea un cuadrado de 25px y colócalo como se muestra en la primera imagen. Añade un trazo de 7px para esta nueva forma, utiliza cualquier color, alinéalo al interior, asegúrate de que no tienes un color establecido para el relleno y ve a Objeto > Trazado > Contornear trazado. Selecciona la forma resultante, establece el color de relleno en R=30 G=30 B=30 y ve a Efecto > Estilizar > Resplandor interior. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y ve a Efecto > Estilizar > Sombra paralela. Introduce los atributos que se muestran en la siguiente imagen y haz clic en Aceptar. Vuelve a seleccionar la forma hecha en este paso junto con el cuadrado de 45px y ese pequeño rectángulo de 7 x 1px y Agrúpalos (Control + G).
Paso 6
Vuelve a seleccionar tu rectángulo negro de 10 x 35px y tráelo al frente (Mayúsculas + Control + ] ). A continuación, tienes que reemplazar ese negro con un degradado lineal incorporado. Abre el menú desplegable del panel Muestras (Ventana > Muestras), ve a Abrir biblioteca de muestras > Degradados > Metal y se abrirá una nueva ventana con un montón de degradados. Asegúrate de que tu rectángulo negro está seleccionado, enfócate en el panel Apariencia y simplemente reemplaza ese negro con el degradado lineal "Acero".
Paso 7
Asegúrate de que tu rectángulo de 10 x 35px permanece seleccionado, enfócate en el panel Apariencia y añade un segundo relleno. Arrástralo debajo del relleno existente, establece el color en negro, baja su Opacidad al 10% y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de 1px, haz clic en Aceptar, vuelve al panel Apariencia y añade un nuevo relleno para tus formas. Selecciónalo, establece el color en negro, arrástralo a la parte inferior del panel Apariencia, baja su Opacidad al 5% y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de 2px, haz clic en Aceptar y ve a Efecto > Distorsionar y transformar > Transformar. Introduce las propiedades que se muestran en la siguiente imagen, haz clic en Aceptar y vuelve al panel Apariencia. Añade un trazo negro de 1pt para tu rectángulo, alinéalo hacia el interior y cambia su Modo de fusión a Superponer. Sigue enfócandote en el panel Apariencia, selecciona todo tu trazado y ve a Efecto > Estilizar > Redondear vértices. Introduce un Radio de 2px, haz clic en Aceptar y ve a Efecto > Estilizar > Sombra paralela. Introduce los atributos que se muestran en la siguiente imagen y haz clic en Aceptar.
Paso 8
Por último, ve al panel Capas y simplemente elimina ese fragmento de texto blanco. Al final todo debería verse como en la segunda imagen.
¡Felicidades! ¡Ya terminaste!
Así es como debería verse. Espero que hayas disfrutado de este tutorial y puedas aplicar estas técnicas en tus futuros proyectos.
By
