1. Design & Illustration
  2. Tools & Tips

Consejo rápido: Cómo crear un conjunto simple de botones web utilizando el panel de apariencia

by
Read Time:5 minsLanguages:
This post is part of a series called Web and Interface Design With Vector.
SVG Files: From Illustrator to the Web
Quick Tip: How to Create a Simple Register Form Design

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

En el siguiente tutorial aprenderás a crear tu propio conjunto de botones web. En primer lugar, utilizando la herramienta Rectángulo junto con algunas opciones del Buscatrazos y Desplazamiento, además de un efecto de Redondear vértices, crearás las tres formas iniciales. Luego, un degradado lineal más algunos efectos de Grano de película y Sombra paralela completarán el botón en general. Por último, un poco de texto y un nuevo efecto de Sombra paralela te ayudarán a terminar el trabajo. ¡Empecemos!


Paso 1

Elige la herramienta Rectángulo (M) y haz clic en tu mesa de trabajo. Ingresa 93 en el cuadro de ancho y 32 en el cuadro de alto y luego haz clic en OK. Esto creará una forma de 93 por 32px. Rellénala con R=0 G=182 B=241 y luego ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 17px y haz clic en OK.

Ahora, tu forma debería lucir como la siguiente imagen. Selecciónala y pulsa Control + C y luego pulsa Control + F. Esto añadirá una copia delante. Échale un vistazo a tu panel de capas (Ventana > Capas) y asegúrate de que tienes las dos formas creadas hasta ahora.


Paso 2

Selecciona la copia realizada en el paso anterior y ve a Objeto > Expandir apariencia. Selecciona la forma resultante y ve a Objeto > Trazado > Desplazamiento. Introduce un Desplazamiento de -1px y haz clic en Aceptar. Rellena la forma resultante con blanco y luego vuelve a seleccionar la forma azul expandida y elimínala.


Paso 3

Ve a Edición > Preferencias > Generales e introduce 0,5 en la casilla Incrementos de teclado. Vuelve a seleccionar la forma blanca y haz una copia delante (Control + C > Control + F). Selecciona esta nueva copia y pulsa la flecha hacia abajo una vez (para moverla 0,5px hacia abajo). Vuelve a seleccionar las dos formas y haz clic en el botón Menos frente del panel Buscatrazos. La forma resultante debe parecerse a la tercera imagen de abajo.


Paso 4

Vuelve a la forma azul. Primero, reemplaza el azul plano con el degradado lineal que se muestra a continuación y luego añade un trazo de 1pt. Alinéalo al interior, establece su color en R=0 G=149 B=218 y luego asegúrate de que el efecto Redondear vértices esté en la parte superior del panel Apariencia como se muestra en la siguiente imagen.


Paso 5

Vuelve a seleccionar el rectángulo redondeado y ve al panel Apariencia. Abre el menú desplegable y haz clic en Añadir nuevo relleno. Obviamente, esto añadirá un segundo relleno para tu forma. Selecciónalo en el panel Apariencia y hazlo negro, luego baja su opacidad al 2% y ve a Efecto > Artístico > Grano de película. Introduce los datos que se muestran a continuación y haz clic en OK.


Paso 6

Añade un tercer relleno para tu rectángulo redondeado. Selecciónalo en el panel Apariencia, baja su opacidad al 10% y luego usa el degradado lineal que se muestra en la siguiente imagen. Los números amarillos de la imagen del degradado representan el porcentaje de opacidad, mientras que los números blancos representan el porcentaje de ubicación. Esto significa que debes seleccionar cada deslizador de degradado y establecer el porcentaje de ubicación/opacidad como se muestra a continuación. Presta especial atención a la sección central del degradado. Deberías tener dos deslizadores superpuestos. Uno de ellos tiene la opacidad al 0% y la ubicación al 50%, mientras que el otro tiene la opacidad al 100% y la ubicación al 50%.


Paso 7

Vuelve a seleccionar el rectángulo redondeado y ve al panel Apariencia. Selecciona el relleno inferior (el que tiene el degradado lineal) y ve a Efecto > Estilizar > Sombra paralela. Introduce los datos que se muestran a continuación y haz clic en Aceptar.


Paso 8

Por último, añade un texto blanco. Usa la fuente Calibri con un tamaño de 15px y luego ve a Efecto > Estilizar > Sombra paralela.  Introduce los datos que se muestran a continuación y haz clic en Aceptar. Para la versión presionada del botón puedes establecer el estilo en Negrita y el "tracking" en 50. Debería lucir como la segunda imagen de abajo.


Paso 9

Es posible que a algunos de ustedes no les guste el aspecto pixelado del efecto de sombra paralela. Así es como puedes mejorarlo. Ve a Efecto > Ajustes de efectos de rasterizado de documento. Por defecto, tus resoluciones deberían estar configuradas a 72 ppi. Establece un valor más alto y haz clic en OK. Elige 300ppi y tu botón se verá suave como la siguiente imagen.


Paso 10

Aquí hay otros colores que puedes usar para tu botón. En la siguiente imagen puedes encontrar las propiedades del color que debes reemplazar. El degradado lineal es para el rectángulo redondeado, mientras que el color plano es para el trazo y el efecto de sombra paralela aplicada al texto. Naturalmente, puedes añadir tu propio conjunto de colores. Las posibilidades son innumerables.


Paso 11

Por último, así es como puedes crear ese fondo estampado de la imagen final. Elige la herramienta Rectángulo (M), crea una forma del tamaño de tu mesa de trabajo y rellénala con R=241 G=242 B=242. Asegúrate de que esta nueva forma está seleccionada, ve al panel Apariencia y añade un segundo relleno. Necesitarás un motivo incorporado para este nuevo relleno. Puedes encontrarlo a través del menú desplegable del Panel de Muestras. Simplemente ve a Abrir biblioteca de muestras > Motivos > Gráficos básicos > Gráficos básicos_Texturas y se abrirá una nueva ventana con un montón de bonitos motivos.

Busca el motivo "Diamante" (primera fila, columna diez). Vuelve a seleccionar ese segundo relleno, añade el motivo Diamante, baja su opacidad al 7% y ve a Efecto > Artístico > Grano de película. Introduce los datos que aparecen en la imagen final y haz clic en Aceptar.


Paso 12

Vuelve a seleccionar la forma creada en el paso anterior y añade un tercer relleno. Selecciónalo en el panel Apariencia, cambia su modo de fusión a Multiplicar y utiliza el degradado radial que se muestra a continuación.


Conclusión

Ya tienes tu juego de botones terminado. Así es como debería verse. Espero que hayas disfrutado de este tutorial.

One subscription.
Unlimited Downloads.
Get unlimited downloads