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.

En este momento es donde comienza la tarea del maquetador. Aquí es donde me quito el reloj, anillos si tuviera y todos los elementos que me puedan molestar alrededor de mi teclado y ratón 🙂 Es hora de trabajar.

Para maquetar una página, procuro dar pasos muy automatizados para que el proceso sea continuo y con las menores interrupciones posibles. En esto y en la organización de los ficheros correspondientes al proyecto soy muy estricta ya que de esta precisión depende en gran parte el resultado final, limpieza y validez en el código. Pues bien, estos pasos de los que hablo son los siguientes:


1 ¡Cojo lápiz y papel!

Antes de empezar a teclear, estas dos herramientas son indispensables en mi sistema de trabajo. Hago un wireframe de la página donde anoto medidas, colores, tamaños… todo de manera muy genérica que me permita estructurar y definir la página brevemente antes de comenzar a maquetar. (Si no sabes lo que es un wireframe, una imagen vale más que mil palabras).

wireframe de página web

Básicamente viene a ser un boceto de la organización y jerarquización muy simple de los elementos que conforman la página web sin ningún tipo de aditivo gráfico.

Este esquema va a asumir un papel importante al comienzo de la integración del código, pues es el que nos va a ayudar a estructurar la página y organizar los elementos antes de empezar a maquetar. Por este motivo, aunque sea un bosquejo sencillo y desenfadado no debe dejar de ser coherente y aclaratorio para ayudarte en la fase final.

 


2Recorto las imágenes

En mi caso, recibo un archivo en psd de parte del diseñador y con este comienzo el trabajo. Para ello doy uso a Adobe Photoshop y un sistema de recorte de imágenes bastante automático y rápido que explicaré en el siguiente post. Una vez obtenidas y guardadas todas las imágenes (no pasa nada si alguna se escapa y tienes que volver al archivo en una próxima) y tenemos clara la organización de la página (wireframe), estamos listos para pasar al siguiente paso.

¡No cierres tu archivo de Photoshop con el diseño de la página! Lo vas a seguir necesitando durante todo el proceso.

 


3 Organizo mis carpetas

organización de carpetas

Para comenzar, creo una carpeta con el nombre del proyecto (la he llamado “mi_pagina”). Esta alojará el resto de carpetas y archivos que componen la página. En principio basta con los archivos que se muestran en la imagen.

index.html es el archivo HTML que corresponde al Home o Página de inicio de cualquier página web. Siempre se llamará index.html (siempre que estemos trabajando con código HTML).

La carpeta estilos alojará los archivos CSS, que corresponden a los estilos gráficos que le daremos a la página.

La carpeta imagenes contiene todas las imágenes que previamente hemos recortado con Photoshop.

Y por último la carpeta js, donde se encuentran los archivos de código javascript.

 


4 Comienzo a maquetar en HTML y doy estilos en CSS

Ya tengo las imágenes guardadas y organizas todas mis carpetas. Es el momento de crear el archivo index.html.

Pra ello abre Adobe Dreamweaver (si lo tienes) o cualquier editor de texto para programadores. Si no dispones de ninguno, te aconsejo NetBeans, que es open-source y muy eficiente, aunque buscando en Internet puedes encontrar muchos más.

Con nuestro archivo index.html abierto y nuestro wireframe por delante, es el momento de empezar a maquetar.


  1. pasar de PSD a HTML y CSS | definiendo los pasos
  2. pasar de PSD a HTML y CSS | recorte y optimización de imágenes para web
  3. pasar de PSD a HTML y CSS | maquetando una web desde cero
  4. pasar de PSD a HTML y CSS | maquetar un menu
  5. pasar de PSD a HTML y CSS | introducir un vídeo de vimeo o youtube
  6. pasar de PSD a HTML y CSS | crear varias columnas en html y css
  7. pasar de PSD a HTML y CSS | maquetar el pie de página

 

12 Respuestas

  1. banjote

    netbeans es para html? es que leyendo los compatibles no me aparece, yo he empezado a usar editra, lo conoces? me lo recomiendas?

    Responder
    • goana

      ¡Hola banjote!
      Pues yo uso Netbeans y no tengo ningún problema con HTML. Editra no lo conozco, pero lo importante es que te sientas cómodo con la aplicación con la que trabajes.
      Acabo de ver una conferencia de mejorando la web en la que han hablado de Adobe Edge Code y la verdad es que tiene muy buena pinta. Es un editor gratuito y seguro que vale la pena al menos probarlo 🙂 ¡Suerte!

      Responder
      • winktv.co.kr

        , “Let go and let God”. It’s such a relief if you can really do it!! Loved your latest post on letting go, too. I seem to need to let go every day. Some days more than others. Sigh.. Thanks your great comment![]

      • ruru-jinro.net

        This was SO good. They went off with Al when he left for work yesterday and not a single one came home! Apparently, he only even got half of one because someone stole the rest of his when he wasn’t looking. That’s pretty telling.

      • buergschaft bankkredit

        Today, while I was at work, my cousin stole my iphone and tested to see if it can survive a forty foot drop, just so she can be a youtube sensation. My apple ipad is now broken and she has 83 views. I know this is entirely off topic but I had to share it with someone!

      • kreditvermittlung oesterreich reise

        North Dakota adds value to the country through production and taxes:States with Lowest Unemployment Rate – March 2012 1 NORTH DAKOTA 3.0 2 NEBRASKA 4.0 3 SOUTH DAKOTA 4.3 4 VERMONT 4.8 5 IOWA 5.2 5 NEW HAMPSHIRE 5.2 7 WYOMING 5.3 8 OKLAHOMA 5.4 9 VIRGINIA 5.6 10 MINNESOTA 5.8 10 UTAH 5.8 12 KANSAS 6.2 12 MONTANA 6.2

      • http://www./

        Dear Sarah: Thanks for writing. We are so glad to hear from you. It is exciting to begin to pull together a community of people sharing our interest in uncovering the food of our previous generations. Can you tell us the name of the Jewish Housewive’s recipe book? Are there other favorite dishes of your father’s that you have recipes for or that we can try to post for you? Shalom, Sonya and Gaby

      • http://www./

        JEMIE TELLISMike, Wow! So much that we take for granted here on a daily basis. Thanks for the update and I look forward to reading more about the experiences. Please tell Ann hello and I will check back soon.

  2. Juan

    Hola ! Enhorabuena y grácias por las publicaciones. En primer lugar debo decir que no tengo ni idea, con lo que la pregunta que voy hacer, seguramente es muy tonta..sorry.

    He realizado un diseño en photoshop de 1024×1000, el contenido está en un recuadro y luego está la cabecera y el pié, estos tres elementos ocupan el ancho de la página en psd ( similar a lo que se ve en el boceto del paso 3 ).
    Me surge la siguiente duda, si los 3 elementos mencionados me ocupan todo el ancho del psd y yo quiero que el pie y la página sean más largos que el cuerpo, ¿ debo hacer más ancho el psd y estenderlos ? ¿ en pantallas más grandes que el formato de psd se verá el diseño hasta los extremos?

    Lo siento pero me estoy haciendo un lío.

    Responder
    • admin

      ¡Hola Juan!
      Muchas gracias por tus palabras. Me alegro que de alguna manera te estén sirviendo estos tutoriales.
      Respecto a lo que me planteas, entiendo que la cabecera y el pie son más anchos que el contenido de la página.
      En este caso (si no he entendido mal) los anchos de cada una de las secciones debe ser el 100% (en caso de que le quieras poner un background por ejemplo) y el contenido de cada uno debe tener los 1024px de ancho de los que hablas.
      Espero haberme explicado. ¿Es eso a lo que te referías?
      🙂

      Responder
      • Juan

        Grácias por contestar,
        Entonces entiendo que aunque el contenido, el pie y cabecera ocupen lo mismo de ancho en el psd ( 1024 en este caso ), es en la hoja de estilos que puedo decidir el cuerpo se quede con ese ancho y el pie y cabecera rellenen el resto de pantalla hasta llegar a los extremos indicando que estos se repitan.

Hacer Comentario

Su dirección de correo electrónico no será publicada.