7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Designing

Consejo rápido: Crea botones web brillantes con las opciones 3D de Illustrator

Scroll to top
Read Time: 8 mins
This post is part of a series called Web and Interface Design With Vector.
Quick Tip: How to Make a Glossy Web Style Rounded Button
Use Adobe Illustrator to Create a Clean Website Layout

Spanish (Español) translation by Rosario (you can also view the original English article)

En este consejo rápido crearemos un conjunto de botones web con la ayuda de los efectos 3D en Adobe Illustrator. ¿Por qué? Porque de esta manera podemos olvidarnos de utilizar diferentes pinceles y efectos para añadir luces y sombras de manera que podamos lograrlo en un solo paso, aprovechando los ajustes de iluminación y las formas de Bisel disponibles. ¡Empecemos!


Paso 1. La forma del botón

Comencemos con la forma básica de este botón web, así que toma la herramienta Rectángulo redondeado y haz clic en cualquier lugar de tu mesa de trabajo para abrir la ventana de Rectángulo redondeado. Allí, introduce los números que se muestran y obtendrás la forma que necesitamos. Selecciona gris claro como color de relleno.


Paso 2. Configuración 3D

Teniendo este rectángulo seleccionado, ve al menú Efecto > 3D > Extrusión y biselado. En la parte derecha de la imagen de abajo puedes ver la configuración por defecto, sólo se cambian las coordenadas de rotación. Me gustaría utilizar las formas de Bisel más a menudo, pero a veces no generan los resultados que quiero. En este caso, si eliges Alto-Redondeado como forma de Bisel el cambio es más que evidente. Conseguirás el borde redondeado y además no tendrás que preocuparte por las luces y sombras posteriormente.

Si aumentas el valor de la Altura, el borde redondeado se vuelve más grueso.

En la ventana de Opciones de extrusión y biselado pulsa el botón Más opciones para abrir todo el diálogo y céntrate en la parte inferior. Si quieres resaltar la esquina superior izquierda mueve la iluminación hacia la izquierda como se indica a continuación o hacia la parte inferior si quieres resaltar la esquina inferior derecha.


Paso 3. El botón 3D

Por último, aquí están los ajustes que utilicé. Cambia las coordenadas, elige Alto-Redondeado como forma de Bisel, aumenta la Altura de 4 pt a 6 pt y mueve la iluminación ligeramente hacia la izquierda.


Paso 4. Colorea el botón

Mientras el botón 3D está seleccionado, ve al menú Objeto y elige Expandir apariencia. Ahora, utiliza la herramienta Selección directa (A) para seleccionar el rectángulo redondeado interior y rellénalo con el degradado lineal mostrado. Establece el ángulo en 90 grados. Con este rectángulo seleccionado, haz doble clic en Contenido (porque esta forma está en un grupo) en el Panel de apariencia y así verás los atributos existentes. A continuación, ve al menú Efecto > Estilizar y aplica el efecto Resplandor interior utilizando los ajustes mostrados.


Paso 5. Añade brillo

Teniendo el relleno existente seleccionado en el Panel apariencia, haz clic en el icono Duplicar elemento seleccionado en la parte inferior y obtendrás un segundo relleno. Cambia el degradado al que se muestra, usando blanco y negro, y establece el ángulo en 50 grados. Cambia el Modo de fusión a Trama (el negro se vuelve transparente) y reduce la Opacidad al 75%.

Duplica este segundo relleno como lo hiciste antes y mantén el mismo degradado. Ajusta el ángulo a 140 grados y aumenta el valor de Opacidad de 75% a 90%.


Paso 6. Utiliza un pincel artístico

Ahora, selecciona con la herramienta Selección directa (A) el rectángulo interior y en el menú Objeto elige Copiar y Pegar delante. En el panel Capas arrastra el nuevo rectángulo fuera del grupo del botón porque no lo queremos ahí. Elimina los atributos existentes y dale un trazo negro. Mientras este rectángulo está seleccionado, ve a Objeto > Trazado > Añadir puntos de ancla dos veces para añadir algunos puntos extra. A continuación, toma la herramienta Tijeras (C) y haz clic en los dos puntos indicados para cortar la forma y luego eliminar el trazado de la parte inferior.

Ahora, necesitas un Pincel artístico. He explicado cómo hacerlo en este consejo rápido en el Paso 9. La única diferencia es que, esta vez, partí de una elipse de 100 x 3 px en lugar de 200 x 5 px. Después de arrastrarla al panel Pinceles para guardarla como un nuevo pincel artístico, utilízalo para trazar el trazado de la parte superior. Ajusta el grosor a 2 pt.


Paso 7. Añade sombra

Copia y Pega delante de nuevo el rectángulo interior y arrástralo fuera del grupo del botón, delante de él. Elimina las apariencias existentes y dale un relleno negro (1). Ahora, Copia y Pega delante el rectángulo negro y cambia el color de relleno para poder diferenciarlos. Mueve el rectángulo rojo un poco hacia arriba pulsando la tecla de la flecha hacia arriba de tu teclado dos veces (2). Incrementos de teclado debe estar ajustado a 1 px (menú Edición > Preferencias > Generales).

Selecciona ambas formas y elige Restar de área de forma > Expandir en el panel Buscatrazos. La forma delgada resultante debe tener un relleno negro (3). Cambia el modo de fusión a Multiplicar y reduce la Opacidad al 20% (4).


Paso 8 Brillo

A continuación, con la herramienta Pluma (P) dibuja un trazado sobre el botón como en la imagen de abajo. Copia y Pega delante de nuevo el rectángulo interior, elimina las apariencias existentes y solo dale un trazo negro. Selecciona este rectángulo y también el trazado azul y haz clic en Dividir en el panel Buscatrazos. En el menú Objeto selecciona Desagrupar y luego elimina la forma de la parte inferior.

Rellena la forma obtenida con un degradado lineal de blanco a negro y ajusta el ángulo a -90 grados. Cambia el Modo de fusión a Trama (el negro se vuelve transparente) y reduce la Opacidad al 30%.


Paso 9. El texto

Continuemos con el texto. Con la herramienta Texto (T) escribe "TRY NOW" usando una fuente llamada Anja Eliane, tamaño de 35 pt. Puedes encontrar la fuente aquí. En el menú Objeto elige Expandir y luego rellena el texto con el degradado lineal mostrado. Ajusta el ángulo a -45 grados. A continuación, ve al menú Efecto > Estilizar y aplica el efecto Sombra paralela utilizando los ajustes de abajo.

Ahora, escribe "30 DAY TRIAL" usando Arial Bold, tamaño de 15 pt y luego selecciona Expandir en el menú Objeto. Rellena el texto con blanco y luego aplica de nuevo el efecto de Sombra paralela utilizando la configuración mostrada.


Paso 10. Flechas

Desde el panel Símbolos (menú Ventana > Símbolos) abre el menú Biblioteca de símbolos y en la categoría Flechas encuentra la Flecha 24. Arrástrala a tu área de trabajo y pulsa el icono Romper enlace a símbolo en la parte inferior del panel. Desagrupa dos veces y luego ve al menú Efecto > Estilizar > Redondear vértices y aplica un Radio de 3 px (1). Rellena la flecha con el degradado lineal mostrado y luego dale un Trazo de 0.5 pt usando el color indicado (2).

Mueve la flecha sobre el botón y luego ve al menú Efecto > Estilizar y aplica el efecto Sombra paralela.

Teniendo esta flecha seleccionada, elige Expandir apariencia en el menú Objeto para expandir los dos efectos aplicados, luego ve al menú Objeto > Transformar > Escala, elige 80% y dale a Copiar. Obtendrás la flecha más pequeña. Colócalas como se muestra en la imagen y asegúrate de que están alineadas horizontalmente. Selecciona ambas y luego ve al menú Objeto > Transformar > Reflejar. Elige Vertical y luego pulsa Copiar. Coloca las dos nuevas flechas en el lado derecho y el botón estará listo.


Paso 11. Sombra

Lo único que falta es una sombra debajo del botón. Toma la herramienta Elipse (L) y dibuja una elipse plana en la parte inferior, luego selecciona negro como color de relleno (1). Envía esta elipse detrás del botón y luego ve al menú Objeto > Trazado > Desplazamiento y aplica un Desplazamiento -7 px. Obtendrás una elipse más pequeña en el centro (2). Ajusta la Opacidad de la elipse más grande a 0%, luego selecciona ambas y ve al menú Objeto > Fusión > Opciones de fusión. Allí, selecciona 25 Pasos especificados y vuelve al menú Objeto > Fusión > Crear (3). Reduce la Opacidad del grupo de fusión resultante al 75% y si pones el botón sobre un fondo particular, cambia también el Modo de fusión a Multiplicar.

Aquí está el botón web final:


Paso 12. Otros colores

A partir de este botón puedes obtener muchas otras variaciones de color. Todo lo que tienes que hacer es hacer una copia del botón y cambiar algunas cosas. En las imágenes de abajo puedes ver tres ejemplos: azul, verde y morado. Todas las formas que se ven en la imagen de abajo no han sido modificadas. Déjalas como están. Las que están ocultas indican que serán modificadas y las tomaremos individualmente.

Empecemos con el rectángulo redondeado. Selecciónalo con la herramienta Selección directa (A) y echa un vistazo al Panel apariencia. Cambia el primer relleno degradado por el nuevo degradado mostrado, y mantén todos los demás atributos como están. Haz lo mismo con los botones web verdes y morados.

Para el texto, simplemente cambia la detención central del degradado de naranja claro a azul claro, respectivamente, verde claro y morado claro. "30 DAY TRIAL" permanece igual.

Ahora, selecciona la flecha y cambia el relleno degradado y luego el color del trazo como se indica. Los efectos siguen siendo los mismos.

Finalmente, como hiciste en el paso 10, selecciona Expandir apariencia y luego escala la flecha para obtener la más pequeña. Refleja las dos y ya está.


Imagen final

Esta es la imagen final y aquí están los cuatro botones web listos para ser usados. Si quieres guardarlos para la web, echa un vistazo a otro tutorial mío donde explico en detalle cómo hacerlo.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.