Advertisement
  1. Design & Illustration
  2. Web Design

Consejo rápido: Cómo crear un menú de navegación fluido en Adobe Illustrator

by
Difficulty:BeginnerLength:ShortLanguages:

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

En el siguiente tutorial aprenderás a crear un elegante menú de navegación. Esto es particularmente útil para personas que quieren hacer rollovers perfectamente alineados para sitios web y aplicaciones.


Paso 1

Crea un documento de 630 por 190px . En primer lugar, activa la Cuadrícula (Ver > Mostrar Cuadrícula) y Ajusta a Cuadrícula (Ver > Ajustar a Cuadrícula). A continuación, necesitarás una cuadrícula cada 10px. Ve a Edición > Preferencias > Guías y Cuadrícula, escribe 10 en el cuadro de Línea de Cuadrícula Cada y 1 en el cuadro de Subdivisiones. También puedes abrir el panel Información (Ventana > Información) para previsualizar el tamaño y la posición de tus formas. No te olvides de cambiar la unidad de medida a píxeles desde Edición > Preferencias > Unidades > Generales. Todas estas opciones aumentarán significativamente tu velocidad de trabajo.


Paso 2

Comienza con la herramienta Rectángulo (M). Crea una forma de 610 por 50px. Por el momento rellénala con cualquier color y quita el filete. Selecciona esta forma nueva y ve a Efecto > Estilizar > Redondear Vértices. Ingresa un radio de 4,5px, haz clic en OK y luego ve a Objeto > Expandir Apariencia. Rellena la forma resultante con el degradado lineal que se muestra a continuación.

Si echas un vistazo a la imagen con gradiente observarás un texto blanco. Representa la ubicación de los deslizadores. Primero, selecciona el deslizador del medio y define su ubicación en 25%, luego selecciona el ícono de diamante izquierdo y fija su ubicación en 25% también. Por último, ve a Efecto > Estilizar > Sombra Paralela. Ingresa los datos que se muestran en la imagen final a continuación, haz clic en OK.


Paso 3

Para los siguientes pasos necesitarás una cuadrícula cada 1px. Ve a Edición > Preferencias > Guías y Cuadrícula, y escribe 1 en el cuadro Línea de Cuadrícula Cada. Elige la herramienta Pluma (P) y dibuja un trazo vertical de 56px. Añade un filete negro a este trazo para poder distinguirlo fácilmente. Por último, colócalo 101px a la derecha del lado izquierdo del rectángulo redondeado.


Paso 4

A continuación, necesitas crear dos rectángulos finos y altos. Crea el primero (1 por 50px) y colócalo a la izquierda del trazo vertical. Haz una copia de esta forma y muévela 1px a la derecha. Vuelve a la forma de la izquierda, selecciónala y rellénala con el primer degradado lineal. Una vez más, echa un vistazo a las imágenes con gradiente y notarás un texto amarillo. Representa la opacidad. Selecciona la forma de la derecha y rellénala con el segundo degradado lineal. Vuelve a seleccionar ambas formas creadas en este paso y agrúpalas (Control + G). Por el momento, haz invisible este grupo.


Paso 5

Vuelve al trazo vertical. Selecciónalo y ve a Efecto > Distorsionar y Transformar > Transformar. Escribe 4 en el cuadro Copias y 102 en el cuadro Mover > Horizontal. Haz clic en OK y luego ve a Objeto > Expandir Apariencia. Obtendrás un grupo de cinco trazos verticales.

Duplica el rectángulo redondeado. Selecciona esta copia junto con el grupo de trazos verticales y haz clic en el botón Dividir desde el panel Buscatrazos. Esto dividirá el rectángulo en cinco formas diferentes. Selecciona cada forma y elimina el efecto de sombra paralela del panel Apariencia.


Paso 6

Ahora, centrémonos en una de las formas hechas en el paso anterior. Elegí la de más a la izquierda. Debe estar ya rellenada con el degradado lineal mencionado en el segundo paso. Selecciona este relleno y reemplaza el color del degradado existente con los colores que se muestran en el primer degradado. A continuación, ve al panel de Apariencia, abre su menú desplegable y haz clic en Añadir Relleno Nuevo. Esto añadirá un segundo relleno para la forma seleccionada.

Selecciona este nuevo relleno (desde el panel de Apariencia), usa el degradado radial que se muestra abajo de la segunda imagen y cambia su modo de fusión a Superponer. Agrega un tercer relleno y hazlo negro. Baja su opacidad al 5%, cambia su modo de fusión a Multiplicar y luego ve a Efecto > Artístico > Película Granulada. Ingresa los datos que se muestran a continuación y haz clic en OK.


Paso 7

Selecciona la forma editada en el paso anterior y ve a Efecto > Trazado > Desplazamiento. Pon un desplazamiento de -2 px y haz clic en OK. Selecciona la forma resultante, elimina todo relleno, añade un filete blanco de 0,5px alineado al interior y cambia su modo de fusión a Superponer.


Paso 8

Agrega el mismo efecto para el resto de las formas y no te olvides del filete. Te conviene crear una capa independiente para cada forma azul. De esa manera te será más fácil administrar la apariencia del menú.


Paso 9

Activa la visibilidad para el grupo creado en el cuarto paso. Muévelo a la parte superior del panel Capas. Baja su opacidad al 80% y luego ve a Efecto > Distorsionar y Transformar > Transformar. Ingresa los datos que se muestran a continuación y haz clic en OK.


Paso 10

Por último, el texto. Primero necesitas la fuente Quigley Wiggly. Ahora escoge la herramienta Texto (T) y añade el texto como se muestra. Expande el texto, luego selecciona las formas resultantes y haz clic en el botón Unificar del panel Buscatrazos. Si obtienes más de una forma después de la opción Unificar ve a Objeto > Trazado Compuesto > Crear.


Paso 11

Ahora necesitas alinear este texto. Comienza con "home". Elige la herramienta Selección (V). Selecciona la forma de texto junto con la forma azul, haz clic en el borde de la segunda (se verá resaltado), luego haz clic en los botones Centrar y Centrar Verticalmente. Repite la misma técnica para el resto de tu texto.


Paso 12

Ahora vamos a añadir algún efecto para el texto. En primer lugar, la versión azul. Selecciona la forma de texto y rellénala con el degradado lineal que se muestra a continuación. Selecciona el relleno (desde el panel de Apariencia) y ve a Efecto > Estilizar > Resplandor Interior. Ingresa los datos que se muestran a continuación y haz clic en OK. Luego agrega un segundo relleno y ponlo debajo del existente. Selecciónalo, rellénalo con R=52 G=160  B=230 y ve a Efecto > Distorsionar y Transformar > Transformar. Ingresa los datos que se muestran a continuación y haz clic en OK. Ahora, el texto debería verse como en la imagen de abajo.


Paso 13

Ahora la versión gris. No necesitas quitar ni agregar ningún efecto. Todo lo que necesitas hacer es editar los rellenos existentes. Selecciona el relleno superior y reemplaza el gradiente existente con el que se muestra a continuación, luego selecciona el relleno de la parte inferior y cambia el color de relleno con el que se muestra a continuación. Al final el texto debería verse como en la imagen de abajo.


Paso 14

Por último, haz una versión azul y gris para cada forma de texto y listo.


Conclusión

Ahí lo tienes, una manera simple de hacer un menú de navegación con estados rollover. Otro consejo es guardar tus estilos para que los puedas aplicar a otros elementos que necesites, tales como íconos y formas. Espero que hayas disfrutado este tutorial.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.