La conversión de Psd a Html: la “cruz” de los diseñadores.

¿Porqué el paso de un diseño Psd a Html es el mayor problema de un diseñador a la hora de ver funcionando su sitio web?
Si eres diseñador o te dedicas al diseño web, seguramente te habrás preguntado: ¿Porque debo derivar a otro la maquetación web de mi sitio y peder ese dinero o no ganarlo?
En este artículo responderé a estas preguntas y mostraré los pasos que debes seguir para que puedas solucionarlo con éxito.

La mayoría de los diseñadores se enfrantan a un mundo de insertidumbres a la hora de pasar su diseño de Psd a Html de forma correcta: los colores cambian, los elementos se corren, los textos en tipografía HTML no quedan igual al diseño, los diferentes navegadores no muestran lo mismo, y muchisimos problemas mas.
Y esto lo digo desde la experiencia ya que ademas de programador web desde hace más de 10 años, soy diseñador y me he encontrado exactamente con estos mismos problemas.

Pues bien, todo esto NO se debe a la falta de información, o de recursos (software), sino que se debe a un solo problema: no se tiene claro el proceso correcto y completo, de maquetacion web.
Dicho proceso no es para nada dificil, e incluso, te aseguro que puedes maquetar profesionalmente una pagina con HTML y CSS, en solo 15 minutos. (ya lo verás mas adelante)

Por todo esto, y a forma de resumen de lo visto hasta aqui, voy a darte una pequeña lista de pasos generales que debes llevar a cabo para lograr una perfecta maquetacion web o conversión de Psd a Html.

Pasos para la CORRECTA conversion de Psd a Html

  1. Visualizacion Mental de las secciones (bloques) del documento (ver artículo 1 , ver artículo 2)
    Con el diseño frente a tí, debes lograr identificar visualente los bloques que componen el documento. Los mismos son: #cabezal, #cuerpo, #pie.
    Luego puedes identificar bloques secundario o anidados dentro de los principales. Estos puede ser los #sidebars, #menus, u otros dependiendo del diseño.
    Luego que los identifiques, agrega en Photoshop lineas de guia que los dividan, y en una nueva capa pinta dichos bloques con colores diferentes y transparencia al 50% para poder visualizarlos fácilmente.
  2. Creando un nuevo documento HTML (ver artículo)
    En el programa de maquetacion (por ej: Dreamweaver) o en Notepad (texto plano), crea un archivo HTML nuevo y asegurate que contenga las etiquetas de partes principales de un documento html estándard.
    Las mismas son: <html>, <head>, <body>. (no confundir con los bloques de la Visualización Mental de tu diseño)
  3. Generando la estructura de bloques (ver articulo)
    Una vez creado el documento HTML, comienza a generar la estructura de bloques (aquí SI son los bloques de tu diseño) con las etiquetas <div>.
    Luego asignale a cada uno un identificador “id” con el nombre elegido para el bloques.Por ej: <div id=”cabezal”> 

    Respeta la anidación que estos bloques tienen en el diseño. (algunos contenidos dentro de otros)
    Guarda el archivo HTML.

  4. Aplicando estilos a los bloques (ver articulo)
    Aplicale estilo a cada bloque, generando un archivo CSS y colocando dentro de él, la propiedades para cada bloque, utilizando el mismo “id” que le colocaste en el HTML.
    Recuerda que para definir las propiedades de un bloque, debes hacerlo asi: 

    #id_del_bloque {
    propiedad: valor;
    }

    Comienza aplicandole el tamaño (width, height) , posicion (float) y color de fondo (background-color) a cada bloque.
    El tamaño lo mides directamente en Photoshop ayudandote con las lineas de guía y la herramienta de seleccion “marco”.

  5. Enlazando el CSS al HTML (ver articulo)
    Enlaza el archivo CSS a tu Html, incluyendo dentro del bloque principal <head> del Html, la siguiente linea:  

    <link href=”nombre_de_tu_archivo_css.css” rel=”stylesheet” type=”text/css”>

    Reemplaza el nombre de archivo CSS por el tuyo y asegurate que está en la misma carpeta que el Html.
    Puedes colocarlo dentro de otra carpeta, pero tendras q corregir el Path a tu archivo en la linea anterior, por ej:

    <link href=”nombre_carpeta/nombre_de_tu_archivo_css.css” rel=”stylesheet” type=”text/css”>

  6. Volcando los contenidos al documento
    Coloca los contenidos de texto o imagenes dentro de las etiquetas <div> de tu Html.
  7. Aplicando estilos a los contenidos (ver artículo de uso de Clases)
    Utiliza los estilos CSS, como las “clases”, para darle formato a los contenidos volcados.
    Para los textos intenta utilizar las etiquetas <p> y <h1> al <h6>.Finalmente guarda los archivos y visualiza el archivo HTML en tu navegador.

Estos son los 7 pasos principales para una maquetacion web correcta y 100% compatible con cualquier navegador web.
De esta forma se pasa de un Psd a Html de forma sencilla y sin complicaciones.
Por supuesto que dependiendo del diseño, habrá que hacer algunos ajustes menores.

En los próximos artículos estaré enseñandote detalladamente, cada uno de estos pasos.
Algunos ya los hemos visto, pero seguiré ampliándolos para que veas que no es tan complicado como parece, y que TU también puedes realizar una maquetación web 100% profesional.
😉
ATENCION:
Si tu eres diseñador y tienes problemas con la conversion de Psd a Html, déjame aquí un comentario e intentaré ayudarte.

*** Si quieres aprender de forma seria y profesional,
el arte de la maquetación web, te recomiendo el siguiente recurso:

Anuncios

5 pensamientos en “La conversión de Psd a Html: la “cruz” de los diseñadores.

  1. Enrique

    A modo de sugerencia, podrías crear un glosario o algo asi, para explicar todos los codigos. Por ejemplo, al principio explicaste que significaba esto:

    que se refiere a linkear un estilo al archivo html, pero por ejemplo yo no se que es “rel=” y por ende a q se refiere con “stylesheet”, “type=” y “text/css”

    Gracias 🙂

    Responder
    1. Psd a Html Autor de la entrada

      Enrique
      Es buena tu idea, voy a ver se hacer algun glosario.

      Igualmente en el caso del codigo de linkeo de CSS a HTML que tu nombras, no hay mucho para explicar porque esa linea de codigo se utiliza siempre asi para definir un linkeo de pagina de estilos CSS.
      stylesheet= hojas de esilo
      text/css= se refiere a que se linkeará una pagina de texto en formato CSS.

      Saludos!
      Cristian

      Responder
  2. Rob

    Hola, resulta que soy diseñador, pero, no se absolutamente nada de html, distingo perfectamente cada parte de la estructura, el header, el body, el footer, se exactamente que quiero que haga parte de mi diseño… He buscado tutoriales hasta por las piedras, y de momento nada, que me sugieres?

    Responder
    1. Psd a Html Autor de la entrada

      Hola Rob
      Para maquetar o pasar un PSD a HTML, debes tener conocimientos de HTML.
      Si no los tienen, te recomiendo que leas los siguientes articulos para comenzar con HTML:

      El primer paso en la conversión de Psd a Html: La Estructuración HTML.
      https://psdahtml.wordpress.com/2010/12/28/el-primer-paso-en-la-conversion-de-psd-a-html-la-estructuracion-html/

      Hojas de estilo CSS: el “santo grial” de la maquetación web (control total)
      https://psdahtml.wordpress.com/2011/01/02/hojas-de-estilo-css-el-santo-grial-de-la-maquetacion-web-control-total/

      Estilos CSS: ejemplo práctico de maquetación con CSS.
      https://psdahtml.wordpress.com/2011/01/13/estilos-css-ejemplo-practico-de-maquetacion-con-css/

      En essos articulos, explico los conceptos basicos de HTML y CSS, y como comenzar a maquetar tu diseño.
      Releelos varias veces (incluso hay videos), y me cuentas si has podido avanzar.

      Saludos!
      Cristian

      Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s