Barra de Navegación para web

greisy · #1 (**permalink**) 19/05/2009, 13:42

hola, quisiera realizar en photoshop la siguiente barra de navegación:

http://74.208.97.55/barra/menu.jpg

Se me dificulta el momento en realizar la líneas divisoras de las secciones, si alguien me podría orientar en ello gracias!!!

#2 (**permalink**) 19/05/2009, 15:09

hola, la verdad es que es un efecto y no es sencillo, aunque lo parezca, si buscas por webs de plantillas gratuitas puedes encontrar ese mismo efecto y comprobar cómo se hizo... ahora mismo no sé concretarte alguna...

Ramirogf · #3 (**permalink**) 19/05/2009, 15:46

Hola greisy, mira, el diseño en si es bien sencillo, pero si esa parte blanca que esta en "About us" es un efecto que va cambiando de acuerdo a la ubicacion del cursor del mouse, pues yo creo que eso es un "script", y para que tenga ese efecto debes realizar dos imagenes de cada boton, si no es asi que alguien me corrija, pero por ejemplo en Trafico Total yo lo hice de esa manera.
Saludos!!

creativo · #4 (**permalink**) 19/05/2009, 19:01

Color sólido de fondo con capa encima en degradado suave o con opacidad baja.

greisy · #5 (**permalink**) 19/05/2009, 21:09

Gracias chicos por responder, realmente me refiero a la línea divisora, no me queda tan perfecto como está allí, se que se le aplica varios efectos al dibujar una línea, pero que va no lo logro hacer.

paolamurias · #6 (**permalink**) 20/05/2009, 06:14

la linea divisoria es:
una capa de 1 px en negro con fusión multiplicar y transparencia + otra capa con una linea de 1 px de blanco con fusion trama y transparencia (pegadita al lado de la linea negra)
Acoplas ambas capas y las vas repitiendo. Y listo.

otto1303 · #7 (**permalink**) 22/05/2009, 18:22

Te dejo un archivo donde he probado ha hacerlo, puede que se pueda hacer de una forma más sencilla, pero traté de dejarlo lo más parecido posible. Incluso en la primera capa del archivo está la imagen que me servió de base, pero está no visible. Lo hice un poco más grande para que se viera mejor el diseño.

Descargar Archivo

Lo que hice con el separador solo fue hacer la capa del separador de 2px, similar a lo que dice Paola, le di el color que tiene y luego le dí el efecto de Sombra (Drop Shadow), pero a la sombra con el color correspondiente. El efecto tiene modo Multiply, angulo 0 grados, distancia 2 y tamaño 4.