Cómo crear un icono de caja de engranajes usando formas simples

Puedes dibujar muchas cosas en Illustrator sin depender de la herramienta Pluma, como lo demuestra el reciente tutorial de reloj de arena. Utilizando sólo formas simples preestablecidas, y herramientas como el Buscatrazos y transformaciones, se pueden crear ilustraciones completas desde cero. En este tutorial, crearemos un icono para botones de opciones, ajustes, preferencias, etc., similar al icono de preferencias del sistema de OS X. ¡Así que empecemos!

¿Quieres acceso a los archivos completos de Vector Source y copias descargables de cada tutorial, incluyendo este? Únete a Vector Plus por sólo 9$ al mes.

Paso 1

Comience por crear un nuevo documento de cualquier tamaño que usted desea, he utilizado 600px por 400px, ya es el tamaño utilizado para las imágenes del tutoriales.

Comenzaremos con el dibujo de la marcha. En primer lugar, dibujar un círculo y centro en relación con la mesa de trabajo (haciendo esto que podemos alinear fácilmente todas las formas que necesitaremos para dibujar). Luego dibujar tres círculos más que conseguir progresivamente más pequeños hacia el centro (y en el centro de la mesa de trabajo). También, añadir un relleno de gris claro a los círculos, que harán más fácil trabajar con la plataforma de la Pathfinder cuando cortamos pedazos de los círculos.

Paso 2

A continuación, seleccione los círculos más grande y segunda más grandes, luego abrir la paleta de Buscatrazos y pulse el botón menos frente para restar el círculo más pequeño del más grande.

Ahora selecciona los dos círculos más pequeños y hacer lo mismo.

Paso 3

A continuación, dibuje un rectángulo centro verticalmente en la mesa de trabajo y colocar por encima la mitad de los círculos.

Selecciónelo y haga clic en la herramienta Rotar en la caja de herramientas. Mantenga presionado Alt y haga clic en el centro de los círculos para colocar el punto de origen azul luz allí y un cuadro de diálogo aparecerá. Ahora podemos girar el rectángulo en relación con el centro de los círculos. Ya que queremos que seis de estos rayos en el engranaje, introduzca 60 para el ángulo en grados (360 / 6 = 60).

A continuación, haga clic en copiar para hacer una copia del rectángulo rotado.

Por último, con el nuevo rectángulo aún seleccionado, presione Comando + D repetir la transformación tres veces más, hasta que tengas cinco uniformemente espaciados rectángulos.

Paso 4

Todas las formas, seleccione en la paleta de Buscatrazos el botón de Únete para fusionarlas en una sola forma.

Por último, seleccione la nueva forma y se gira 30 grados seleccionando objeto > Transformar > Rotate en el menú.

Paso 5

Ahora tenemos la base para nuestro equipo, pero que carece del atributo crítico que hace un engranaje de un equipo - los dientes! Por lo tanto, dibujar un rectángulo pequeño como se muestra a continuación.

Seleccione el rectángulo y luego ir a efecto > deformar > arco... Introduzca -6 curva, Horizontal y distorsión Vertical de dejar en 0 y haga clic en Aceptar.

A continuación, seleccione efecto > Estilizar > esquinas redondeadas..., introduzca 6 para el radio de píxeles y haga clic en Aceptar.

Paso 6

Ahora que tenemos nuestro diente, centro verticalmente en la mesa de trabajo y coloque sobre la marcha para que el borde exterior del engranaje se reúne en las esquinas inferiores del diente comiencen a curva.

A continuación, seleccione el diente y seleccione objeto > expandir apariencia para rastrear los efectos que hemos añadido en un camino.

Paso 7

Ahora tenemos que girar el diente por el resto de la marcha, y lo haremos del mismo modo que hicimos antes con los radios. Comience seleccionando el diente y luego la herramienta de rotar de la barra de herramientas. A continuación, pulse Alt el centro del engranaje. Ya que queremos que los 18 dientes, introduzca un valor de 20 para el ángulo en grados (360 / 20 = 18).

Y haga clic en copiar para rotar una copia del diente.

Con el segundo diente todavía seleccionado, pulse Comando + D 16 veces más, para un total de 18 dientes.

Finalmente, todas las formas y seleccione nuevo, haga clic en unir en la paleta de Buscatrazos para fusionar todo en una sola forma.

Paso 8

En este punto podemos eliminar el movimiento desde el engranaje y llenarlo con un tono ligeramente más oscuro de gris (yo usé #C6C8CA).

Seleccionar la marcha y copiarlo (comando + C) y pegarlo directamente detrás de la original (comando + B). Luego, rellenar con un color gris oscuro y empujar hacia abajo de unos pocos píxeles.

Y hacer lo mismo otra vez (el engranaje original de copiar y pegar en la parte posterior), pero esta vez rellena con blanco y empujarlo hasta un número de píxeles (que puede no verlo a menos que cambie su color de fondo).

Ahora nos podemos agrupar todas las formas de tres, pero antes que nosotros, hacer una copia del engranaje gris superior, luz y mover al lado - necesitará más adelante.

Paso 9

Dibuja un círculo ligeramente más grande que el agujero más pequeño del centro del engranaje, y aplícale un trazo fino (suficiente para cubrir los lados del borde interior del agujero - Yo usé 15px).

Selecciona Objeto > Trazado > Contornear trazado para expandir el trazo.

Rellena la nueva forma con un degradado de gris oscuro a gris claro (de arriba a abajo).

Y finalmente selecciona la forma y envíela detrás (comando + tecla [, o haz clic derecho y selecciona Organizar > Enviar detrás).

Paso 10

Ahora repite el último paso, pero cubre el borde del circulo más grande como se muestra a continuación. Rellena este círculo con un degradado radial de gris oscuro a gris claro, dejando la zona oscura en el centro y la luz hacia los bordes.

Paso 11

Ahora, selecciona esta forma, cópiala (Comando + C) y Pégala delante (Comando + F). Ahora cambia el degradado de Radial a Lineal.

A continuación, cambia el modo de fusión (desde el panel  Transparencia) a Superponer y reduce su Opacidad a 50%.

Y finalmente, selecciona ambas formas y envíalas detrás(Comando + [).

Paso 12

Ya casi terminamos el engranaje. El último paso, es añadirle algo de textura metálica. Bien, aquí tenemos que usar la Herramienta Pluma, pero esta será la única vez, y es fácil - ¡prometido!. :)

Dibuja algunos triángulos irregulares (es bueno tener algo de distorsión, no los queremos perfectos), con todos sus puntos convergentes en el centro. Ahora rellénalos con diferentes tonos de gris.

Selecciona todas las formas y agrúpalas (Comando + G). Luego, selecciona Efecto > Desenfocar > Desenfoque radial...

Escribe 50 para el Cantidad y Método Giro.

Nota: el efecto de desenfoque radial consume bastante memoria de procesador, por lo que si estás trabajando en un equipo lento, puedes dejar temporalmente la Calidad en Borrador. Esto agilizará significativamente el renderizado del efecto, además puedes volver y cambiar el Efecto a Bueno u Óptimo antes de guardar el documento o imprimirlo.

Paso 13

¿Tienes aún la copia de la forma de engranaje original que hicimos anteriormente? Bien, porque es el momento de usarla. Y por si acaso, si decidiste no seguir mi consejo de hacer una copia, puedes simplemente hacer una copia de esta forma ahora. Una vez que tengas la forma, sitúala arriba de la textura metálica y céntrala con las otras formas.

Selecciona ambos objetos y activa Objeto > Máscara de recorte > Crear (Comando + 7).

Por último, centra la forma horizontal y verticalmente con la mesa de trabajo, y agrupa todas las formas del engranaje. ¡Y ya hemos terminado con esto!

Paso 14

Ahora es momento de crear la caja para nuestros engranajes (y crear la forma y los límites de nuestro icono). Comienza a dibujar un rectángulo que cubra aproximadamente 2/3 del engranaje. Rellénalo con un degradado de gris claro a gris medio.

A continuación, selecciona Efecto > Estilizar > Redondear vértices..., digita 20px para el Radio y haz clic en Ok.

Enseguida, selecciona Objeto > Expandir apariencia para convertir las esquinas redondeadas en trazado.

Paso 15

Dibuja ahora un rectángulo más pequeño arriba del primero. Este será nuestra ventana a través de la cual veremos los engranajes. Céntralo con el primer rectángulo.

Selecciona ambos rectángulos...

... y haz clic en el botón Menos Frente en la panel Buscatrazos, para recortar el rectángulo más pequeño con el rectángulo más grande.

Paso 16

Ahora vamos a repetir nuevamente el proceso que hicimos con el engranaje, para crear el bisel interior alrededor de la ventana. Comienza dibujando un rectángulo un poco más grande que la abertura de la ventana.

Aumenta el grosor del trazo, lo suficiente para que se sobreponga con el borde de la ventana (yo usé 20px).

Envíalo detrás (Comando + [).

Selecciona Objeto > Trazado > Contornear trazado, para convertir el trazado en forma.

Y rellénalo con un degradado de negro a blanco (de arriba a abajo).

Paso 17

Repetiremos el mismo proceso una última vez, para crear el bisel alrededor del borde exterior. Dibuja el rectángulo ligeramente más pequeño y aplícale un trazo grueso.

Pero esta vez, antes de que lo contornearlo, vamos a redondear las esquinas para que coincidan con la caja.

Contornea el trazo y envíalo detrás.

Finalmente, aplícale un degradado de gris a blanco (esta vez, de abajo a arriba).

Paso 18

Ahora tenemos que añadir el respaldo metálico con perforaciones a la caja. Comienza dibujando un rectángulo ligeramente más grande que la abertura de la ventana y rellénalo con un gris oscuro.

Para añadir los agujeros perforados, dibuja dos círculos pequeños, uno más pequeño que el otro, y colócalos en la esquina superior izquierda del rectángulo. Rellena el círculo más pequeño del frente con negro, y el más grande con un degradado de gris oscuro a blanco (de arriba a abajo).

Agrupa los dos círculos y selecciona Objeto > Transformar > Mover... Escribe 40px para Horizontal y 0px para Vertical y haz clic en Copiar.

Enseguida, con el segundo agujero aún seleccionado, presiona Comando + D para repetir la transformación. Repite la transformación hasta que tengas una fila aproximadamente del mismo ancho que el rectángulo. Luego, agrupa la fila de agujeros.

Paso 19

Selecciona la fila y ve nuevamente a Objeto > Transformar > Mover... . Esta vez, ingresa 0px para Horizontal y -40px para Vertical y haz clic en Copiar.

Ahora presiona Comando + D nuevamente para repetir la transformación. Una vez que hayas rellenado el rectángulo, selecciona todas las filas y agrúpalas en un solo objeto.

Paso 20

Selecciona el grupo de agujeros y selecciona nuevamente Objeto > Transformar > Mover... pero esta vez ingresa 20px para Horizontal y -20px para Vertical.

Haz clic en Copiar y selecciona todos los agujeros y agrúpalos una vez más.

Finalmente, selecciona los agujeros agrupados y el rectángulo, y céntralos entre sí.

Paso 21

Para completar la caja, agrupa los agujeros y el rectángulo, y muévelos detrás del marco que creamos anteriormente.

Selecciona el bisel interior del marco y agrégale una sombra paralela.

Agrega igualmente una sombra paralela a la forma del bisel exterior.

Paso 22

Ahora que tenemos los componentes principales hechos, todo lo que queda hacer es ¡montarlos!

Comienza haciendo dos copias del engranaje (asegúrate de agrupar todas las formas primero) y colócalas en las esquinas inferiores del engranaje principal.

Añade una sombra paralela a cada uno de los engranajes y, a continuación, agrúpalos. Puedes reorganizarlos como quieras (moví los dos engranajes del frente un poco más arriba, para hacerlos más visibles a través de la ventana).

Ahora, dibuja un rectángulo del mismo tamaño que la abertura de la ventana (o puede ser un poco más grande, simplemente no más pequeño) y colócalo arriba de los engranajes. Puedes colocarlo como desees, ya que lo que esté cubierto por el rectángulo, es lo que se verá a través de la ventana.

Una vez lo hayas ubicado a tu gusto, selecciona el grupo de engranajes y el rectángulo y activa Objeto > Máscara de recorte > Crear.

Paso 23

Arrastra los engranajes dentro de la caja y centra la caja y los engranajes entre sí. Luego, envía los engranajes detrás y tráelos hacia adelante hasta que queden encima del respaldo perforado, pero detrás del marco.

El último paso es añadir el reflejo para crear el efecto de un vidrio sobre la abertura. Dibuja un rectángulo del ancho de la abertura y 1/2 de altura aproximadamente.

A continuación, dibuja una elipse grande arriba del rectángulo. Sólo nos interesa crear un arco sobre la parte inferior del rectángulo, así que asegúrate de que cubra completamente el resto.

Selecciona la elipse y el rectángulo y, a continuación, activa Formar intersección en el panel Buscatrazos. A continuación, borra las formas sobrantes.

Paso 24

Aplica un degradado transparente a la forma (de arriba a abajo, con la parte superior más opaca, y la parte inferior más transparente). Esto se puede hacer en Illustrator CS4 con los degradados transparentes, o en versiones anteriores con una máscara de opacidad.

Para Illustrator CS4

En la panel de Degradado, agrega dos paradas de color blanco, una en cada extremo. Establece el modo en Lineal y el ángulo en -90 grados. Luego, ajusta la transparencia de la parada izquierda en 100% y la parada de la derecha al 50%.

A continuación, deja la transparencia de toda la forma en 50% (en el panel Transparencia). Envía también la forma detrás hasta que quede por encima de los engranajes y el respaldo, pero detrás del marco exterior (para que la sombra sea visible sobre ella).

Para Illustrator CS3 y versiones anteriores

Rellena el objeto con blanco sólido y, a continuación, cópialo (Comando +C) y pega la copia delante (Comando + F).

Aplica un degradado lineal, con un ángulo de -90 grados. Arrastra una parada de color a cada extremo, y deja la parada izquierda blanca, y la derecha 50% gris.

Selecciona ambas formas reflejadas y haz clic en el menú de la esquina superior derecha del panel Transparencia. En el menú que aparece, selecciona Crear máscara de opacidad.

Finalmente, reduce la transparencia total de la forma al 60%. Envía la forma hacia atrás hasta que esté por encima de los engranajes y el respaldo, pero detrás del marco exterior (para que la sombra sea visible sobre ella).

Conclusión

¡Hemos terminado! Este tutorial ha mostrado lo poderosas que pueden ser las formas simples, las transformaciones y las herramientas como el Buscatrazos, y cómo se pueden utilizar estas herramientas para crear ilustraciones y gráficos de calidad. ¡Buena suerte con tu propio trabajo!

Suscríbete a Vectortuts+ RSS Feed para estar al día con los últimos tutoriales y artículos vectoriales.