Fireworks - Crear imagen para dividir menu web

   
Vista:

Crear imagen para dividir menu web

Publicado por Nathan (5 intervenciones) el 26/10/2011 11:15:52
Hola gente!

Me encuentro en el intento de crear un menu para una web y quisiera saber cómo hacer una imagen semejante a esta:

http://secondpicture.com/tutorials/web_design/navi_bg_divider.png

En esa misma web se muestra cómo hacer el menu, que queda realmente bien a mi modo de ver, pero no estoy seguro de cómo hacer la imagen divisoria.

¿Es mitad color solido y mitad degradado?

Gracias de antemano y saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
información
Otras secciones de LWP con contenido de Fireworks
- Cursos de Fireworks
- Temas de Fireworks
información
Cursos y Temas de Fireworks
- Manual de Macromedia Fireworks
- Tutorial básico de diseño Web
- Manual de Fireworks MX

Crear imagen para dividir menu web

Publicado por DerangedMX (11 intervenciones) el 01/11/2011 00:45:15
Es un degradado, solo traza un rectángulo de 2 x 80 px y aplica el relleno. No tiene mayor complicación. Saludos.

pki | ssl | certificado de seguridad | certificado digital | cfdi
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Crear imagen para dividir menu web

Publicado por Nathan (5 intervenciones) el 01/11/2011 13:44:00
Hola y gracias por responder DerangedMX,

Es posible que sean dos rectángulos, uno con cada degradado? Y que estén unidos de alguna manera? Gracias y saludos. (El mensaje anterior se me cortó mientras lo escribía)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Crear imagen para dividir menu web

Publicado por DerangedMX (11 intervenciones) el 03/11/2011 17:24:09
Hola Nathan,

entré a la web de second picture para ver el menú. Por lo que veo ellos generan un sprite para el botón. Si buscas hacer un menú similar puedes lograrlo de una forma más sencilla, para estos casos suelo hacer la imagen para el menú y aplicar estilos CSS para resolver las divisiones con un efecto óptico. Dame oportunidad para hacer un ejemplo y subirlo.

Estamos en contacto.

pki | ssl | certificado de seguridad | certificado digital | cfdi
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Crear imagen para dividir menu web

Publicado por Nathan (5 intervenciones) el 03/11/2011 21:25:58
Hola DerangedMX,

Yo encantado si puedes hacer un ejemplo para poder seguirlo. Seguramente me será de ayuda a mi y quien venga detrás. Lo de usar CSS no se me ocure cómo se hace, asi que todo tuyo.

Muchas gracias por tu ayuda.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Crear imagen para dividir menu web

Publicado por DerangedMX (11 intervenciones) el 04/11/2011 19:58:09
Saludos Nathan.

subí el ejemplo en el siguiente enlace, viene un vínculo para descargar el ejemplo del menu. Espero te sea de utilidad.

pki | ssl | certificado de seguridad | certificado digital | cfdi
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Crear imagen para dividir menu web

Publicado por DerangedMX (11 intervenciones) el 04/11/2011 20:00:06
menudo asunto... no coloque el url, una disculpa.

http://wir.mx/aportes/


pki | ssl | certificado de seguridad | certificado digital | cfdi
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Crear imagen para dividir menu web

Publicado por Nathan (5 intervenciones) el 04/11/2011 20:37:40
DerangedMX,

Te ha quedado genial, muy bueno la verdad. Ahora realizaré las grandes manifestaciones de mi ignorancia:

a) Cómo has creado la imagen? Más que nada, quisiera saber qué efecto utilizas en el color azul (no es un degradado, verdad?), y cómo haces esa separación entre los rectángulos, que parece una hendidura entre medio de los dos.

b) Viendo el código CSS, puedo apreciar que al hacer el hover se muestra la "parte derecha" de la imagen, la que contiene el rectángulo más claro. Sin embargo, no logro ver cómo haces para que la imagen por defecto sea la "parte izquierda" de btn.png.

Gracias nuevamente por tu ayuda y por tu tiempo,

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Crear imagen para dividir menu web

Publicado por DerangedMX (11 intervenciones) el 10/11/2011 19:50:04
Saludos Nathan,

respondiendo a tus dudas:

a) para el caso copié la imagen desde la fuente para efecto de explicarlo. Analizándola puedo comentarte que la puedes conseguir con un degradado y un rectángulo con una transparencia, el borde es parte de la misma imagen. Anexo un archivo de ejemplo para que veas el método.

b) el hover se logra por medio de la misma imagen por medio de un sprite y la propiedad "background-position:valor-horizontal valor_vertical;". Haré una explicación detallada sobre el tema en otro post.

No hay que agradecer, si no preguntamos no aprendemos. Saludos.

certificado de seguridad | certificado digital | cfdi | timbre fiscal | ssl | ¿qué es ssl?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Crear imagen para dividir menu web

Publicado por Nathan (5 intervenciones) el 10/11/2011 20:31:24
Genial, muchas gracias DerangedMX y saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar