Share
En este Consejo rápido, aprenderá cómo crear un botón web escalable con el Panel de apariencia y el Escalado de 9 segmentos de Adobe Illustrator. Esta técnica es especialmente útil para los diseñadores web que necesitan usar el mismo botón de estilo con varias longitudes de texto. Empecemos!
Este tutorial le mostrará cómo crear un botón de vector escalable usando la escala de 9-Slice en Adobe Illustrator CS5. En el ejemplo a continuación, verá cómo el botón se escala con y sin la escala de 9 segmentos, observará que la escala normal mueve todo dentro de la imagen del botón. Con 9-Slice puede especificar cómo se escala la imagen para crear elementos web reutilizables.
Realiza un nuevo documento RGB de cualquier tamaño. Opción + Clic en la mesa de trabajo con la herramienta Rectángulo (M) e ingrese las dimensiones del botón. Debido a que el botón será escalable horizontalmente, el ancho no es importante. He puesto mi rectángulo a 200px por 60px.
Abra el Panel de apariencia y seleccione Fx> Estilizar> Esquinas redondeadas, establezca el radio de la esquina en 8px, haga clic en Aceptar.
Agregue un relleno degradado al botón con los siguientes colores. Si desea elegir el suyo propio, siga la guía a continuación para obtener una indicación de la posición y el tono de los colores. Notará que los colores 2 y 3 están muy cerca, esto es clave para la apariencia súper brillante del degradado..
Si su botón tiene una línea, elimínelo. Agregue otro relleno en el Panel de apariencia y colóquelo debajo de la capa de degradado. Con la Configuración de apariencia, vaya a Fx> Ruta> Ruta de compensación y establezca la compensación en 1px.
Rellene la segunda capa de relleno con un degradado en los siguientes colores. Una vez más, puede hacer que los colores sean de su elección, solo recuerde mantener los tonos claros cerca de la parte superior y el oscuro en la parte inferior..
Agregue una Sombra debajo de los dos rellenos en el Panel de apariencia yendo a Fx> Estilizar> Sombra y establezca la opacidad al 60%, el desplazamiento X a 0px y el desplazamiento Y a 2px. Haz el Blur 3px
Zoom en el botón para que pueda ver las líneas que necesita hacer en este paso. Parte del camino hacia el lado derecho del botón, dibuje dos líneas de 1px una al lado de la otra. Haga que el primero tenga el mismo color que la parte superior del contorno del degradado y la segunda línea del mismo color que la parte inferior del degradado del contorno. He escrito los números de color en la siguiente imagen para referencia.
Esta parte es para Adobe Illustrator CS5: seleccione el botón y las líneas y arrástrelo a la paleta de símbolos. Haga clic en Habilitar escala de 9 cortes (Esto habilitará la escala horizontal) y Alinear a la cuadrícula de píxeles (Esto evitará que el botón se vuelva borroso en los sitios web). Estos dos ajustes harán que el botón sea perfecto para el uso web..
Cuando crees el Símbolo, verás una pantalla como la imagen de abajo. Mueva las líneas de puntos para marcar las áreas que no se deben escalar. He colocado las líneas de puntos al lado del área en la que quiero colocar un símbolo, esto asegurará que no cambie si modifico la longitud del botón. Haga doble clic en el área de la mesa de trabajo para volver a la imagen principal.
Escale los botones para probar las áreas que marcó. Si necesita realizar alguna edición, haga doble clic en el símbolo para volver a la configuración.
Agregue texto y símbolos a los botones y elija uno para aplicar la apariencia. Luego, puede aplicar la apariencia al resto de los elementos cuando haya terminado la configuración. Comience con un relleno degradado. Este es un simple degradado de oscuro a claro. He anotado los colores que he usado en la imagen de abajo..
Agregue un relleno blanco debajo de la capa de degradado en el Panel de apariencia y configúrelo para mover 2px Vertical. Haga clic en Aceptar.
Agrega un brillo externo yendo a Fx> Estilizar> Resplandor externo. Ajústelo a un tono brillante de los colores en el botón y el desenfoque a 1px. Esto agregará una bruma sutil al efecto de capa y hará que el botón se vea como si estuviera brillando..
Agregue un trazo a la parte superior de la Configuración de apariencia en un tono oscuro y sin saturación del color del botón. Establecer el trazo a 0.5px.
Pruebe el estilo en una variedad de símbolos y botones, guarde los dos estilos en la paleta de estilos gráficos. seleccionando el objeto con el estilo y haciendo clic en el botón Agregar estilo en la parte inferior de los Estilos gráficos.
Ahí tienes. Un botón web escalable que es fácil de usar y reutilizar. Si desea modificar las esquinas redondeadas, puede volver a hacer clic en el símbolo y cambiar la apariencia cambiando las esquinas redondeadas a invisible. Si desea crear un nuevo botón, arrastre el símbolo del botón desde la Paleta de símbolos. en la mesa de trabajo y Control Haga clic para navegar a las opciones para romper el enlace con el Símbolo. A partir de ahí, el botón no cambiará los otros símbolos y puede editarlo para que sea un nuevo estilo. Espero que hayas disfrutado este tut.
Accentsconagua