Share
En el siguiente tutorial, aprenderá cómo crear una barra de navegación estilizada. Aprenderá cómo usar el Panel de Apariencia para diseñar una barra de navegación y cómo usar la Herramienta de corte para cortar y exportar las imágenes para que puedan usarse como parte de un sitio web. Vamos a empezar!
Presione Comando + N para crear un nuevo documento. Ingrese 1025 en el cuadro de ancho y 53 en el cuadro de altura, luego haga clic en el botón Avanzado. Seleccione RGB, Pantalla (72ppi) y asegúrese de que la casilla "Alinear nuevos objetos con la cuadrícula de píxeles" no esté marcada antes de hacer clic en Aceptar. Habilitar la cuadrícula (Ver> Mostrar cuadrícula) y la función 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 la cuadrícula cada casilla y 1 en la casilla 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 reemplazar la unidad de medida por píxeles en Editar> Preferencias> Unidad> General. Todas estas opciones aumentarán significativamente tu velocidad de trabajo..
Elija la herramienta Rectángulo (M), cree una forma de 1025 por 50 px, rellénela con el degradado lineal que se muestra a continuación y vaya a Efecto> Estilizar> Esquinas redondeadas. Ingrese un radio de 3px, haga clic en Aceptar y vaya a Objeto> Expandir apariencia.
Para el siguiente paso necesitará una cuadrícula cada 1px. Entonces, vaya a Editar> Preferencias> Guías y cuadrícula e ingrese 1 en la casilla de cuadrícula de cada cuadro. Concéntrese en el lado izquierdo de la forma creada en el paso anterior. Elija la herramienta Pluma (P), dibuje una trayectoria vertical de 50 px y colóquela como se muestra en la siguiente imagen. Agregue un trazo negro de 1 punto a este camino para que sea más fácil de notar.
Vuelva a seleccionar el camino vertical creado en el paso anterior y arrástrelo 128px a la derecha. Puede hacerlo manualmente o dirigiéndose a Objeto> Transformar> Mover opciones. Simplemente ingrese 128 en el cuadro Horizontal y luego presione enter.
Vuelva a seleccionar ese camino vertical y vaya a Efecto> Distorsionar y transformar> Transformar. Ingrese los datos que se muestran en la siguiente imagen, haga clic en Aceptar y vaya a Objeto> Expandir apariencia.
Seleccione el grupo de rutas verticales creadas en el paso anterior junto con el rectángulo redondeado creado en el segundo paso, abra el panel de Pathfinder y haga clic en el botón Dividir. Vaya al panel Capas, seleccione el grupo resultante y desagrupe (Shift + Control + G). Manténgase enfocado en el panel Capas y nombre sus formas del "1" al "8" (comience con la forma de la izquierda).
Desactive la función Ajustar a la cuadrícula (Ver> Ajustar a la cuadrícula), luego vaya a Edición> Preferencias> General y asegúrese de que el Incremento del teclado esté configurado en 1px. Seleccione la forma "1" y haga dos copias al frente (Control + C> Control + F> Control + F). Seleccione la copia superior y muévala 1px a la izquierda usando la flecha izquierda de su teclado. Vuelva a seleccionar ambas copias y haga clic en el botón Frontal Frontal del panel de Pathfinder. Coloca la forma resultante al frente (Shift + Control + Right Square Bracket), rellénalo con negro y cambia su modo de fusión a Overlay.
Seleccione la forma "1" y haga dos copias nuevas al frente (Control + C> Control + F> Control + F). Concéntrese en el panel Capas, seleccione la copia inferior y muévala 1px a la derecha con la flecha derecha de su teclado. Vuelva a seleccionar ambas copias y haga clic en el botón Frontal Frontal del panel de Pathfinder. Coloca la forma resultante al frente (Shift + Control + Derecha Cuadrado), rellénalo con blanco y cambia su modo de fusión a Superposición.
Vuelva a seleccionar las dos formas creadas en los dos últimos pasos y agrúpelas (Control + G). Haga una copia de este grupo (Control + C> Control + F), selecciónelo y haga clic en el botón Unite del panel de Pathfinder. Rellene la forma resultante con el degradado lineal que se muestra en la segunda imagen.
Abre el panel de Transparencia. Vuelva a seleccionar la forma y el grupo creado en el paso anterior, abra el menú desplegable del panel Transparencia y haga clic en Crear máscara de opacidad. Al final, tu grupo enmascarado debería verse como en la segunda imagen..
Vuelva a seleccionar el grupo enmascarado creado en el paso anterior y vaya a Objeto> Transformar> Mover. Ingrese 128 en el cuadro Horizontal y haga clic en el botón Copiar. Obviamente, esto agregará una copia de su grupo 128px a la derecha. Seleccione esta copia y repita el comando Mover. Sigue repitiendo esta técnica hasta que tengas siete grupos enmascarados..
Habilitar el ajuste a la cuadrícula (Ver> Ajustar a la cuadrícula). Elija la herramienta Rectángulo (M), cree cuatro cuadrados de 3px y colóquelos como se muestra en la siguiente imagen. Además, rellénelos con blanco y negro como se muestra a continuación. Seleccione las cuatro formas y simplemente arrástrelas dentro del panel Muestras para convertirlas en un patrón. Una vez que tienes tu patrón, puedes eliminar los cuatro cuadrados del panel Capas.
Deshabilite la cuadrícula (Ver> Mostrar cuadrícula) y la función Ajustar a la cuadrícula (Ver> Ajustar a la cuadrícula). Volver a la forma "1". Selecciónelo, céntrese en el panel Apariencia y agregue un segundo relleno con el botón Agregar nuevo relleno. Selecciónelo, establezca el color en R = 28 G = 117 B = 188 y cambie su modo de fusión a Color Burn.
Vuelva a seleccionar la forma "1", céntrese en el panel Apariencia y agregue un tercer relleno. Selecciónelo, baje la opacidad al 15%, cambie su modo de fusión a Luz suave y agregue el patrón realizado en el doceavo paso..
Vuelva a seleccionar la forma "1", enfóquese en el panel Apariencia, asegúrese de que no esté seleccionado ningún relleno o trazo y vaya a Efecto> Estilizar> Sombra. Ingrese los datos que se muestran en la ventana superior, haga clic en Aceptar y vaya nuevamente a Efecto> Estilizar> Sombra. Ingrese los datos que se muestran en la ventana central, haga clic en Aceptar y vaya una vez más a Efecto> Estilizar> Eliminar sombra. Ingrese los datos que se muestran en la ventana inferior y haga clic en Aceptar.
Ahora necesita copiar las propiedades utilizadas para la forma "1" y pegarlas en el resto de las formas. Aquí es cómo puedes hacerlo fácilmente. Ve al panel Capas, enfócate en el lado derecho y notarás que cada forma viene con un pequeño círculo gris. Se llama un icono de destino. Mantenga presionada la tecla Alt, haga clic en el icono de destino que representa la forma "1" y arrástrela al círculo que representa la forma "2". Usa esta técnica para agregar las mismas propiedades para las otras seis formas.
Seleccione la forma "2", céntrese en el panel Apariencia y agregue el cuarto relleno. Selecciónelo, conviértalo en blanco, baje la opacidad al 50% y cambie su modo de fusión a Luz suave. Este será el modo de desplazamiento de su barra de navegación..
Tome la Herramienta de Tipo (T) y su texto como se muestra en la siguiente imagen. Utilice la fuente Calibri con un tamaño de 15 puntos, establezca el estilo en negrita y el color en R = 0 G = 86 B = 140. Asegúrese de que todo el texto esté seleccionado y vaya a Efecto> Estilizar> Sombra. Ingrese los datos que se muestran a continuación y haga clic en Aceptar.
Ahora, vamos a cortar este menú. Enfoque en el grupo enmascarado izquierdo y seleccione la herramienta Cortar (Mayús + K). Primero, dibuje un corte de 6 por 53 px a lo largo de la forma "1" como se muestra en la siguiente imagen. Continúe con la herramienta Cortar (Shift + K) y dibuje un segundo corte de 6 por 53px a lo largo de la forma "2" como se muestra a continuación.
Ahora que tiene sus primeros cortes, vaya a Archivos> Guardar para Web y Dispositivos (Alt + Control + Shift + S). Seleccione la herramienta de selección de sectores (K) y haga doble clic a la izquierda, sector de 6 por 53px. Ingrese nav en el cuadro de nombre y luego presione OK.
Concéntrese en la segunda porción de 6 por 53px. Haga doble clic en él, ingrese "nav.hoover" en la sección Nombre y presione OK. Seleccione PNG-24 en el menú desplegable Predefinido y haga clic en Guardar. Elija una ubicación para las imágenes que está a punto de guardar y luego haga clic en Guardar. Vaya a esa ubicación y encontrará una nueva carpeta con un montón de nuevas imágenes. Arrastra "nav.png" y "nav.hoover.png" fuera de la carpeta y luego borra la carpeta.
Vuelva a su archivo Ai, seleccione la Herramienta de corte (Shift + K) y dibuje un corte de 2 por 53px a lo largo del grupo enmascarado de la izquierda. Vaya al panel Capas y desactive la visibilidad para todas las formas excepto el grupo enmascarado de la izquierda.
Vaya de nuevo a Archivos> Guardar para Web y dispositivos (Alt + Control + Shift + S). Tome la Herramienta de selección de sectores (K) y haga doble clic en el nuevo sector creado en el paso anterior. Nómbrelo como "divisor" y haga clic en Aceptar. Asegúrese de que PNG-24 aún esté seleccionado en el menú desplegable Predefinido y haga clic en Guardar. De nuevo, elija una ubicación para las imágenes que está a punto de guardar y luego haga clic en Aceptar. Vaya a esa ubicación, abra la nueva carpeta, arrastre "divider.png" fuera de la carpeta y luego elimine su carpeta. Al final debes tener tres imágenes simples: "nav", "nav.hoover" y "divider.png".
Finalmente, puede cambiar fácilmente los colores utilizados para su barra de navegación. Simplemente reemplace el color utilizado para el texto y el segundo relleno con algunos de los colores que se muestran en las siguientes imágenes.
Ahora tu trabajo está hecho, así es como debería verse.
Accentsconagua