Foros del Web » Creando para Internet » Diseño web »

Menu o barra de navegacion creado con photoshop

Estas en el tema de Menu o barra de navegacion creado con photoshop en el foro de Diseño web en Foros del Web. Hola y ante todo gracias por leer la consulta, he aprendido un poco d diseño d forma empirica y actualmente stoy elaborando una web. Quiero ...
  #1 (permalink)  
Antiguo 15/08/2009, 02:13
(Desactivado)
 
Fecha de Ingreso: agosto-2009
Mensajes: 9
Antigüedad: 8 años, 4 meses
Puntos: 0
Menu o barra de navegacion creado con photoshop

Hola y ante todo gracias por leer la consulta, he aprendido un poco d diseño d forma empirica y actualmente stoy elaborando una web. Quiero q el diseño del menu de navegacion y la cabecera tengan gran impacto visual con buen diseño asi q elabore un menu vertical en photoshop valiendome d muchos tutoriales, la idea q tuve al crearlo fue tener n una sola imagen todos los stados del menu (normal, rollover y activo) posicionando cada grupo al lado del otro... la mayoria d tutoriales sea n ingles o spañol me ayudaron hasta sta parte pero ahora tengo dos dudas q no he podido resolver y llevo ya todo el dia buscando:

1. Al parecer el siguiente paso es cortar la imagen, segun lo q lei sto se realizaba antes con ImageReady pero ultimas versiones d photoshop tambien lo hacen. Mi duda es como hacerlo. (el tamaño d la imagen: cada boton de un witdth:188px y height:32px; 5 botones en cada menu x 3 grupos uno al lado del otro).

2.Y segundo... el principal problema, todo lo he aprendido de diseño es en base a dreamweaver CS3 y quisiera saber como inserto el menu creado en photoshop en la web q stoy creando, se interpretar el codigo d listas desordenadas y anidadas y n un principio kize hacerlo con el spray para menus pero como ya mencione busco q tenga mejor impacto visual y por eso preferi diseñarlo en Ps, se q tendre q insertar la imagen d alguna manera y supongo q tendre q dar formato a traves d CSS pero necesitare algo mas? kizas alguna herramienta Javascript??

No s necesario q me den una respuesta specifica, podria investigar y enterarme a partir d cualkier tutorial o texto relacionado a mi duda q me puedan brindar.
  #2 (permalink)  
Antiguo 15/08/2009, 02:29
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: Menu o barra de navegacion creado con photoshop

pues mira, yo no acostubrousar lista para la creacion de menus, para eso mejor uso flas, que es mas compatible en los exploradores, pero he leido de librerias javascript qu te permiten esto

se llaman jQery y Mootols

ojala y esto te ayude

yo uso css para menus cencillos, y no es necesari recortar tus imagenes con este codigo

Cita:
<style>

.menuboton {
height: 32px;
width: 188px;
background-image: url(tuimagen.psd);
background-position: center;
}

</style>
esta clase la aplicas a cada elemento de tu menu

Cita:
<a class="menuboton">texto de tu boton</a>
ojala esto te sirva
  #3 (permalink)  
Antiguo 15/08/2009, 02:56
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Menu o barra de navegacion creado con photoshop

En www.araudi.net puedes encontrar ejemplos de menus, creados por Mikmoro, y que seguramente pueden servirte de guia. Todos son con solo CSS y nada de javascript.
__________________
- León, Guanajuato
- GV-Foto
  #4 (permalink)  
Antiguo 15/08/2009, 10:36
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 2 meses
Puntos: 12
Respuesta: Menu o barra de navegacion creado con photoshop

Exacto, para los menus siempre usa listas con CSS, retocando con algo de javascript. Jamás uses Flash.

Aquí hay algo, pero para Joomla, como HTML debes colocar un <div id="hornav"></div> y dentro una lista desordenada.

Con jQuery logras grandes efectos http://blog.xcitingart.com/diseno-web/menu-jquery/ Además, es sencillo hacer tus propios efectos con un par de líneas, y si tienes un buen diseño, tienes la combinación perfecta.
  #5 (permalink)  
Antiguo 15/08/2009, 12:54
(Desactivado)
 
Fecha de Ingreso: agosto-2009
Mensajes: 9
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Menu o barra de navegacion creado con photoshop

Hola d nuevo, y gracias por responder.. spero no ekivocarme pero tengo el siguiente concepto de los menus creados enteramente a partir d codigo y CSS, mejoran la velocidad d navegacion pero segun yo no consiguen tanto detalle en lo visual. Por eso mi pregunta iba specificamente orientada a como insertar en Dreamw diseños q haya creado en photoshop o illustrator. Los botones q cree tienen el llamado estilo 2.0 con gradiente y efectos de luminosidad.. brilo, etc.

Si me ekivoco con mi concepto del menu basado n HTML/CSS por favor corrijanme.

Mi duda se complementa con lo que escribi en el primer mensaje, me encataria que me responda alguen que haya tenido una experiencia exitosa colocando un menu realizado en photoshop a su diseño en dreamweaver para luego ser completamente funcional en el navegador.
  #6 (permalink)  
Antiguo 15/08/2009, 15:20
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 2 meses
Puntos: 12
Respuesta: Menu o barra de navegacion creado con photoshop

con css colocarás como fondo de cada item los sectores/slices que sacas con Photoshop optimizados para web.
http://www.desarrolloweb.com/articulos/1619.php
  #7 (permalink)  
Antiguo 15/08/2009, 16:38
(Desactivado)
 
Fecha de Ingreso: agosto-2009
Mensajes: 9
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Menu o barra de navegacion creado con photoshop

ok, gracias a sus respuestas tengo mucho mas claro lo que deberia hacer... como una d las ultimas consultas pregunto lo siguiente:

Si creo un unico modelo de boton para cada estado (normal, rollover, activo), ya sea en Ps Illustrator o fireworks y luego lo inserto en el diseño q desarrollo en dreamweaver y le doy formato con CSS, supongo q me recomiendan crear la imagen sin texto y añadirlo a partir del codigo HTML verdad? si stoy n lo correcto, añadire los demas estados utilizando comportamientos???? creando q la imagen se sustituya dependiendo de la accion del usuario? y ya q el texto sta incluido en el codigo, tambien tendria q utilizar comportamientos para sustituir el formato de texto para cada estado???
  #8 (permalink)  
Antiguo 15/08/2009, 19:16
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 2 meses
Puntos: 12
Respuesta: Menu o barra de navegacion creado con photoshop

exacto, todo eso se hace con pseudo selectores :active, :hover, :visited.
Echale n vistazo a los Sprites CSS también http://www.romancortes.com/blog/la-t...e-sprites-css/
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:15.