4. pasar de PSD a HTML y CSS | maquetar un menú

Ahora que tenemos la estructura básica de la página definida, el siguiente paso es maquetar la cabecera, donde encontramos dos menús. Uno a cada lado del logotipo. Podemos ir trabajando sobre el archivo index.html desde donde hemos empezado para ir viendo evolucionar la página, aunque te aconsejo que cada vez que vayas a dar un … Leer más

3. pasar de PSD a HTML y CSS | maquetando una web desde cero

Para maquetar una página web necesitamos dos herramientas fundamentales:
Un editor de texto. Yo uso SublimeText.
Un navegador web.

Antes de empezar es el momento de echar un rápido vistazo de nuevo al wireframe que realizamos previamente:

wireframe

En este boceto están definidas claramente tres partes en nuestro sitio:
Cabecera
Contenido
Pie

Leer más

1. Pasar de PSD a HTML y CSS | Definiendo los pasos

[et_pb_section][et_pb_row][et_pb_column type=»4_4″][et_pb_text]

Convertir un archivo de Photoshop en código HTML y CSS es una de las tareas más comunes para un maquetador web. En ocasiones el diseño y la maquetación de la página los asume la misma persona, pero en otras, ambas tareas son desarrolladas por un diseñador y un maquetador, por lo que debería existir una relación cercana entre ambos para tener claro el tratamiento del proyecto web.

Con esta entrada quiero explicar la metodología que sigo desde el momento en que recibo el diseño de la página en un archivo psd y como hago uso del mismo para comenzar a maquetar y dar vida al proyecto. Como ejemplo para hacer la conversión he usado este diseño que tiene una estructura sencilla de explicar.

Leer más