[Maquetación] Técnica a la hora de exportar header PSD a HTML, gran incógnita

LordFede · #1 (**permalink**) 09/03/2012, 19:11

Como ya deben saber los que maquetan plantillas desde photoshop, existe una gran duda a la hora de cortar los Headers, y es eso lo que me quiero aclarar de una vez por todas xD
Hay diseñadores que a la hora de maquetar un header, ellos prefieren exportar desde PS una imagen entera en la cual se encuentra la imagen del fondo (del header), login, search bar (en algunos templates) y el mismisimo nav-menu horizontal, todo en uno, para luego ponerlo como background-image y a eso agregarle el html como puede ser:

Código HTML:

<div style="background:url(/images/header.png) top left no-repeat;">
<div id="logo"><img src="/images/logo.png" /></div>
<div id="login"><form>...</form></div>
<div id="nav-menu"><ul><li>...</li></ul></div>
</div>

Quiza la mayoria no toma todos esos items, lo hace solo con el header y el nav-menu... o el header y las imagenes del login. Pero quiero hacerme entender

Aca una imagen de un sitio web que usa un header (en este caso es todo el bg) "entero" en el cual incluye también las imagenes del nav-menu y search bar:

http://us.battle.net/d3/es/

Y aca una imagen de un sitio web usando un simple background para el nav-menu sin incluir ninguna imagen del background de <body>, login, o algun otro modulo que vaya en esta parte:

http://www.molten-wow.com

Mi duda se resume en cual es el mejor ejemplo???? Maquetar el menu junto con la imagen de fondo o Exportar la imagen de fondo, y la del modulo (menu, login, blablabla...) a parte?

Espero q me entiendan y sepan aconcejarme. Muchas gracias

Rafael · #2 (**permalink**) 09/03/2012, 22:02

Haz tocado un tema muy interesante. Felicidades por ello.

Creo que un gran error de muchos usuarios de Photomágico para "maquetar" es que no piensan en términos de capas-objetos-función. Por eso se tiene que recurrir a los primitivos slices. Slices por aquí y por allá.

En mi humilde opinión debe ser una imagen por módulo, no una imagensota y ponerle cosas transparentes arriba. Esto lo prepara para tener otras funciones adicionales como efectos de movimiento o fades.

LordFede · #3 (**permalink**) 10/03/2012, 05:08

Muchas gracias Rafael!

Por un lado pienso exactamente igual que tu, a parte que la pagina, de tener imagenes distintas para cada módulo, seria capaz de tener un dinamismo mejor y ni que hablar de poder agregar un módulo nuevo en esa sección sin tener que editar ese background.

Pero... lo que mas me intriga es la velocidad del navegador en cargar por completo todas esas imágenes, ya que no sería un solo request como con el primer ejemplo que puse, sinó que para cada imágen, un request sería necesario y eso le agregaría un par de segundos a la carga de de la página..

Como no ví por ningun lado un foro que hable del tema decidí abrirlo aca de modo de aclarar este dolor de cabeza, y que también les sirva a los demas, ya que de por si, todo el mundo tiene miedo de hablar sobre maquetación me parece :) Muy pocos tutoriales decentes en internet.
Y Tips' para ello... ni hablamos :)

Bueno espero que muchos opinen, asi llegamos a una conclusión y yo ya me puedo poner en campaña para maquetar mi primer template :D