Tutorial de Adobe Illustrator: Crear un menú desplegable simple

En el siguiente tutorial de adobe illustrator aprenderá a crear un elemento web detallado, un menú desplegable sencillo. Comenzaremos con un montón de rectángulos y caminos simples, algunas técnicas básicas de construcción de formas vectoriales y el efecto de esquinas redondeadas. Una vez que tengamos nuestras formas iniciales, continuaremos con los colores. Usaremos múltiples rellenos y trazos junto con el efecto Sombra paralela y algunas técnicas simples de fusión. Finalmente, añadiremos el texto. Empecemos. Como siempre, esta es la imagen final que crearemos.

Paso 1

Presiona Control + N para crear un nuevo documento. Ingrese 600 en los cuadros de ancho y alto y luego haga clic en el botón Avanzado. Seleccione RGB, Pantalla (72ppi) y asegúrese de que la casilla «Alinear nuevos objetos a la cuadrícula de píxeles» no esté marcada antes de hacer clic en Aceptar. Ahora, encienda la cuadrícula (Ver> Cuadrícula) y Ajustar a la cuadrícula (Ver> Ajustar a la cuadrícula). A continuación, necesitará una cuadrícula cada 5px. Vaya a Edición > Preferencias > Guías y cuadrícula, ingrese 5 en el cuadro Línea de cuadrícula cada y 1 en el cuadro Subdivisiones. También puede abrir el panel Información (Ventana > Información) para obtener una vista previa en vivo con el tamaño y la posición de sus formas. No olvide configurar la unidad de medida en píxeles desde Edición > Preferencias > Unidad > General. Todas estas opciones aumentarán significativamente su velocidad de trabajo.

Paso 2

Comience con la herramienta Rectángulo (M), cree una forma de 200 por 50 px, rellénela con R = 96 G = 96 B = 96 y vaya a Efecto> Estilizar> Esquinas redondeadas. Ingrese un radio de 3px, haga clic en Aceptar y vaya a Objeto> Expandir apariencia. Seleccione la forma resultante y haga una copia al frente (Control + C > Control + F). Lo necesitará para el siguiente paso.

Paso 3

Tome la herramienta Pluma (P), dibuje una ruta vertical de 60 px y colóquela como se muestra en la primera imagen. Snap to Grid facilitará su trabajo. Selecciónelo junto con la copia del rectángulo redondeado creado en el paso anterior, abra el panel Buscatrazos y haga clic en el botón Dividir. Vaya al panel Capas, seleccione el grupo de formas resultante y desagrupe (Shift + Control + G).

Etapa 4

Concéntrese en la forma correcta creada en el paso anterior. Selecciónelo y reemplace el color plano utilizado para el relleno con el degradado lineal que se muestra en la siguiente imagen. Asegúrese de que esta forma permanezca seleccionada, concéntrese en el panel Apariencia y agregue un trazo de 2 puntos. Selecciónalo, establece su color en R=143 G=248 B=168, alinéalo con el interior, baja la opacidad al 60% y cambia el modo de fusión a Trama. Siga enfocándose en el panel Apariencia y agregue un segundo trazo para su forma usando el botón Agregar nuevo trazo. Seleccione este nuevo trazo, hágalo de 1 punto de ancho, establezca su color en R = 0 G = 128 B = 60 y asegúrese de que esté alineado hacia adentro.

Paso 5

A continuación, debe copiar las propiedades utilizadas para la forma editada en el paso anterior y pegarlas en la otra forma creada en el tercer paso. Así es como puedes hacerlo fácilmente. Vaya al panel Capas, concéntrese en el lado derecho y notará que cada forma viene con un pequeño círculo gris. Se llama icono de objetivo. Mantenga presionada la tecla Alt, haga clic en el icono de destino que representa la forma editada en el paso anterior y arrástrelo al círculo que representa la segunda forma creada en el tercer paso.

Paso 6

Elija la herramienta Rectángulo (M), cree un cuadrado de 10 px, rellénelo con el degradado lineal que se muestra a continuación y colóquelo como se muestra en la primera imagen. Concéntrese en esta nueva forma y tome la Herramienta de selección directa (A). Seleccione los puntos de anclaje inferiores y vaya a Objeto> Ruta> Ruta compensada (Alt + Control + J). Marque el botón Ambos y haga clic en Aceptar. Esto debería convertir tu pequeño cuadrado en un triángulo.

Paso 7

Vuelva a seleccionar el triángulo creado en el paso anterior y vaya a Efecto > Estilizar > Esquinas redondeadas. Ingrese un radio de 1px y haga clic en Aceptar. Concéntrese en el panel Apariencia y agregue un trazo de 1 punto para esta forma. Hazlo de 1 pt de ancho, alinéalo con el exterior y establece su color en R=0 G=128 B=60. Siga enfocándose en el panel Apariencia y agregue un segundo relleno para este triángulo usando el botón Agregar nuevo relleno. Selecciónelo, arrástrelo debajo del relleno existente, agregue el degradado lineal que se muestra en la siguiente imagen y vaya a Efecto> Ruta> Ruta compensada. Ingrese un desplazamiento de 2px y haga clic en Aceptar. El cero amarillo de la imagen degradada representa el porcentaje de opacidad. Asegúrese de que este nuevo relleno aún esté seleccionado, luego baje su opacidad al 50% y cambie el modo de fusión a Pantalla.

Paso 8

Deshabilite Ajustar a la cuadrícula (Ver > Ajustar a la cuadrícula). Elija la herramienta Tipo (T) y agregue su texto blanco de «Menú». Use la fuente MoolBoran con el tamaño establecido en 23pt. Seleccione este texto, céntrese en el panel Apariencia y agregue dos rellenos y un trazo con los botones Agregar nuevo relleno y Agregar nuevo trazo. Seleccione el relleno inferior, reduzca su opacidad al 40%, cambie el modo de fusión a Pantalla y agregue el degradado lineal inferior que se muestra en la siguiente imagen, luego vaya a Efecto> Ruta> Ruta compensada. Ingrese un Desplazamiento de 2px y haga clic en Aceptar. Regrese al panel Apariencia, seleccione el segundo relleno y use el degradado lineal superior que se muestra a continuación. Muévete hacia arriba en el panel Apariencia, selecciona el trazo, hazlo de 1 punto de ancho, establece su color en R=0 G=128 B=60 y ve a Efecto > Trazado > Desplazamiento. Ingrese un Desplazamiento de 0.5px y haga clic en Aceptar.

Paso 9

Vuelva a seleccionar el rectángulo redondeado gris creado en el segundo paso y vaya a Efecto > Estilizar > Sombra paralela. Ingrese las propiedades que se muestran en la ventana superior (en la imagen), haga clic en Aceptar y vaya nuevamente a Efecto> Estilizar> Sombra paralela. Ingrese las propiedades que se muestran en la ventana central, haga clic en Aceptar y vaya una vez más a Efecto> Estilizar> Sombra paralela. Introduzca las propiedades que se muestran en la ventana inferior y haga clic en Aceptar.

Paso 10

Vuelva a seleccionar todas las formas creadas hasta ahora y agrúpelas (Control + G). Este será su menú desplegable cerrado. Haga una copia de este grupo (Control + C > Control + F), luego muévase al panel Capas y desactive la visibilidad del grupo original haciendo clic en el ícono del ojo pequeño.

Paso 11

Concéntrese en el grupo visible restante creado en el paso anterior. Primero, seleccione la forma verde de la izquierda y elimínela. A continuación, concéntrese en el texto «Menú». Selecciónelo y muévase al panel Apariencia. Elimine el relleno inferior y el trazo, luego seleccione el relleno restante y reemplace el degradado lineal existente con el que se muestra en la siguiente imagen. Además, con este texto aún seleccionado, vaya a Efecto> Stylize> Drop Shadow. Ingrese los datos que se muestran en la siguiente imagen y haga clic en Aceptar.

Paso 12

Vuelva a seleccionar el rectángulo redondeado gris y reemplace el color plano utilizado para el relleno con el degradado lineal que se muestra en la siguiente imagen. Agregue un trazo de 2 puntos para esta forma, establezca su color en R = 165 G = 165 B = 165 y alinéelo hacia el interior. Concéntrese en el panel Apariencia, agregue un segundo trazo para esta forma, hágalo de 1 punto de ancho, establezca su color en R = 20 G = 20 B = 20 y alinéelo hacia adentro.

Paso 13

Vuelva a seleccionar la forma editada en el paso anterior y céntrese en el panel Apariencia. Agregue tres nuevos trazos y arrástrelos debajo de los existentes. Seleccione el inferior, hágalo de 11 puntos de ancho, establezca su color en R = 35 G = 31 B = 32 y baje su opacidad al 10%. Seleccione el medio, hágalo de 8 puntos de ancho, establezca su color en R = 35 G = 31 B = 32 y baje su opacidad al 10%. Seleccione el superior, hágalo de 8 puntos de ancho, establezca su color en R = 35 G = 31 B = 32 y baje su opacidad al 10%.

Paso 14

Vaya a la pequeña forma de flecha, selecciónela y concéntrese en el panel Apariencia. Primero, reemplace el degradado lineal utilizado para el relleno superior con el que se muestra en la siguiente imagen. A continuación, agregue un nuevo trazo y arrástrelo debajo del existente. Selecciónelo, hágalo de 1 punto de ancho, alinéelo con el interior, establezca su color en R = 20 G = 20 B = 20 y baje su opacidad al 50%.

Paso 15

Habilite Ajustar a la cuadrícula (Ver > Ajustar a la cuadrícula). Toma la herramienta Rectángulo (M), crea una forma de 200 por 270 px, rellénala con R=96 G=96 B=96 y ve a Efecto > Estilizar > Esquinas redondeadas. Ingrese un radio de 3px, haga clic en Aceptar y vaya a Objeto > Expandir apariencia. Seleccione la forma resultante y haga una copia al frente (Control + C > Control + F).

Paso 16

Elija la herramienta Pluma (P), dibuje una ruta horizontal de 210 px y colóquela como se muestra en la siguiente imagen.

Paso 17

Vuelva a seleccionar la ruta creada en el paso anterior y vaya a Efecto > Distorsionar y transformar > Transformar. Ingrese las propiedades que se muestran en la siguiente imagen, haga clic en Aceptar y vaya a Objeto > Expandir apariencia.

Más en la página dos

A la mitad del tutorial, pero no te detengas aquí. Hay más en la página dos.