Crear un botón de Twiter en Illustrator

En este tutorial mostraremos como crear un botón de Twitter el cual puede ser usado en un sitio web. La mayoría de las herramientas y comandos usados en eneste tutorial no son nuevos así que deberías poder realizar el botón con versiones anteriores de Illustrator.

Paso 1: En Illustrator, creamos un documento nuevo de 640 x 480. Usaremos pixeles como unidad de medida.

Paso 2: Creamos un círculo de 200 x 200 px y un rectángulo de 365 px x 115 px lo cuales ubicamos tal como se ve en la imagen.

Paso 3: Seleccionamos el rectángulo, vamos al menú Effect>Stylize>Rounded Corners… y en la casilla Radius aplicamos un valor de 20 px, posteriormente vamos al menu Object y seleccionamos el comando Expand Appearance.

Paso 4: Seleccionamos tanto el círculo como el rectángulo, vamos al menú Window y seleccionamos Pathfinder y hacemos click en el primer botón de este panel (Unite). El resultado es una sola figura a la cual le aplicaremos 5% de gris como relleno, 20% de gris al contorno y un espesor de contorno de 2 pt. Posteriormente

Paso 5: Aplicamos una sombra a la figura con el comando Effect>Stylize>Drop Shadow… y aplico los valores que se ven en la imagen.

Paso 6: Creamos un círculo de 160 px x 160 px al cual le aplicamos un relleno 30R 115G 170B y contorno ninguno, posteriormente centramos este círculo en la parte circular de la figura creada en las etapas anteriores tal como se ve en la figura.

Paso 7: Ahora crearemos dos círculos que serviran de brillos. El primero será de 115 px x 90 px y el segundo de 80 px x 45 px. Alinearemos estos círculos tal como se muestra en la figura.

Paso 8: Seleccionamos el círculo que corresponde al brillo superior aplicamos un esfumado de dos pasos (blanco a blanco), cambiamos el desplazamiento del esfumado seleccionando el rombo de la parte superior de la barra del esfumado en el panel Gradient e ingresando el valor de 70% en la casilla Location. Cambiamos la orientación del esfumado a 90 grados y finalmente hacemos doble click en el stop color izquierdo (el ícono que parece una casa debajo de la barra del esfumado) y en la casilla Opacity digitamos 0. La opacidad en los esfumados es una característica nueva de Illustrator CS4, si estás trabajando con la versión CS3 o anterior podrás simular el efecto con un Opacity Mask (Máscara de opacidad). Puedes ver el resultado en la figura.

Paso 9: Seleccionamos el círculo que corresponde al reflejo inferior y le aplicamos un relleno 255G 255B (Cyan), contorno ninguno. Para desenfocar el círculo vamos al menú Effect>Blur>Gaussian Blur y aplicamos un radio de 15 px.

Paso 10: Dibujamos la letra T del logo de Twitter (eso si te lo dejo como tarea) la cual rellenamos de blanco y le aplicamos un contorno de 2 pt y 20% gris y finalmente el texto de la parte derecha que puede ser algo así como “Sígueme en Twitter” lo rellenamos con 160B 220G.

Tienes dudas sobre este tutorial? Puedes publicar tu preguntas en los foros Xpert.