Tutorial – Crear barra de navegación
Tutoriales No hay comentarios, deja el tuyo!
En este tutorial vamos a aprender a hacer una barra de navegación totalmente profesional en PSD y posteriormente vamos a maquetarla en XHTML y CSS para darle completa funcionalidad en una web.
Vamos a empezar diseñando la barra de navegación en Photoshop:
Abrimos un documento en blanco (705 de ancho y 139 de alto a 72ppp) y aplicamos un color gris medio de fondo:
Empezamos a dibujar nuestra barra de navegación seleccionando la “Herramienta de Forma Personalizada” (U), después hacemos clic en “Rectángulo redondeado” y aplicamos 7px de radio.
Aplicamos dicha herramienta en nuestro documento y conseguiremos algo así:
Una vez tenemos esta forma, aplicaremos los siguientes efectos y parámetros para conseguir este efecto interface profesional:
ç
Los parametros del degradado son l0s siguientes:
Los colores del mismo son:
Una vez tenemos la forma básica de nuestra interfaz ya terminada debemos añadir los textos, los cuales en este tutorial son inventados y deberéis cambiar según se adapte a vuestro diseño.
Ahora para separar entre texto y texto aplicamos un pequeño efecto de desvanecimiento que conseguimos de la siguiente forma….
Dibujamos una línea vertical y le aplicamos un desenfoque gaussiano…una vez aplicado el desenfoque solo tenemos que, con la herramienta seleccionar rectángulo, seleccionar verticalmente la mitad de la forma…borrado lo seleccionado.
Ya tendremos dicho efecto conseguido, ahora solo hay que ajustarlo y duplicarlo, hasta que quede un efecto como este:
Además le he añadido un triangulo como efecto para que aparezca cuando pasemos el ratón por encima de la barra de navegación y también un efecto espejo a los pies de la barra (que es totalmente inutil para lo que vamos a hacer pero queda mas estetico a la hora de presentarla a todos vosotros).
Ya tenemos terminado nuestra barra de navegación en PSD, ahora pasamos a maquetarla en XHTML y CSS para hacerla totalmente funcional.
Para ello usaremos códigos HTML, códigos CSS y JavaScript para darle el cambio al poner el ratón encima (aunque se podria hacer directamente desde el CSS a mi me gusta más usar un archivo .js aparte para hacerlo)
Podeis descargar el PSD terminado por si quereis saltaros este paso y continuar desde el sla maquetación.
Descargar plantilla
