El primer secreto para pasar de Psd a Html: Visualización mental

Hola a todos.
Nuevamente aquí tratando de dar un poco de luz  a este tema que ya parece un tabú!!

El titulo de este post no se refiere a nada mágico ni esotérico, sino a uno de los primeros secretos de la maquetación web y que yo creo es el problema con el que todos nos encontramos al empezar en este “arte” de pasar de un Psd a Html.
Un secreto que por lo general, NADIE lo enseña.

Este secreto es: Tener una correcta Visualización Mental de las partes que componen una página web. Aquí es donde la mayoría de las personas que intentan convertir un Psd a Html, falla.

Quizás parezca rídiculo lo que les digo, pero si lo intentan, luego el trabajo de maquetación web es 50% más fácil, y no solo eso, sino que si uno realiza una correcta visualización mental de las partes, luego podrá pasar cualquier tipo de Psd a Html sin ningún problema y sin importar la complejidad que este tenga.

Voy a explicar este secreto, dando algunos ejemplos simples para que les quede más claro.

Cuando pensamos en una página web, debemos pensar en “cajas” o “recuadros” que contienen unos a otros, o que contienen algún tipo de contenido, por ejemplo, texto.
Esto es porque los navegadores web, así exactamente interpretan las páginas, como cajas contenedoras.

En una página web standard, existen “imaginariamente” 3 cajas contenedoras principales:
Cabezal (header), donde suele estar el logo y slogan.
Cuerpo (body), donde está el contenido propiamente dicho.
Pie (footer), donde se suelen colocar datos legales o links.

Aquí una imagen para que se comprenda mejor:

Estas cajas imaginarias son las que contendrán todos los contenidos de la página.
Si bien estas representan la estructura básica para maquetacion web, por lo general, todos los sitios de hoy en día, manejan una estructura un poco mas compleja.

Una estructura un poco más compleja es donde estas cajas principales, contienen a otras cajas. Esto es sumamente útil para estructurar correctamente la infomación.
Aquí te dejo una imagen de ejemplo de esta estructura:

Como ven, a la estructura original se le agregan:

– Una barra de navegacion (navbar), donde irán los links a las secciones del sitio.
– Unas sidebar (barras laterales), donde se podrá poner un resumen de los contenidos interiores, links,  e inclusive una secunda barra de navegación.

CONCLUSION:
Antes de comenzar una maquetacion web para pasar de un Psd a Html, debemos realizar una correcta visualizacion mental de las partes de la página. Esto es SUMAMENTE importante porque te simplificará las cosas.

Manos a la Obra (ejercicio)
Como soy una persona práctica, me gusta ver resultados concretos y rápidos.
Entonces te propongo un ejercicio:
Ingresa a diferentes sitios web e intenta visualizar mentalmente las partes de la página que te mensionado.  Quizás al principio te cueste un poco, pero verás que luego de intentarlo con varios sitios, este proceso se hace automático !!!

Te recomiendo que hagas una captura del sitio web con la tecla “Print Screen” ó “Impr Pantalla” de tu teclado, luego vayas a Photoshop, crees un documento nuevo y pegues la captura del sitio. Luego sobre eso, en otra capa, intenta dibujar las partes del sitio tal cual lo hice yo en las imágenes de arriba.
Luego comentame AQUI mismo como te ha ido con esto.

En el siguiente artículo que publicaré en 2 o 3 días, crearé un video para que veas como lo hago yo mismo, y verás los resultados.

IMPORTANTE: Recuerda que esto es de VITAL importancia para que luego puedas pasar de psd a html correctamente y de forma mucho mas fácil.

—————————————————————————————-
Me gustaría que me dejaras un comentario sobre este artículo que acabas de leer y también que me contaras un poco cual es tu principal complicación, a la hora de tratar de pasar un psd a html.
YO personalmente estaré contestando tus preguntas y comentarios.

Gracias.
Cristian

Anuncios

18 pensamientos en “El primer secreto para pasar de Psd a Html: Visualización mental

  1. Pingback: Ejercicio para la visualización mental al pasar de Psd a Html. | Psd a Html: hazlo rápido y profesionalmente

  2. Alberto

    Soy diseñador gráfico desde hace mas de 10 años y para aumentar mis perspectivas de trabajo estoy empezando en esto de pasar los psd a html. Hasta ahora este trabajo lo hacían programadores a partir de mis diseños pero no quiero depender de ellos, ya que me gusta aprender constantemente. Me parece muy buena tu iniciativa de dar a conocer estos pequeños secretos que parecen ser tabú, como bien dijiste. He visto el tutorial en Youtube y aunque es sencillo aclara un poco algunos conceptos previos, pero sobre todo nos hace peder el miedo o respeto hacia este traspaso psd-HTML. Enhorabuena por tu trabajo y espero que estemos en contacto para compartir experiencias y conocimientos. Un gran saludo desde España

    Responder
    1. Psd a Html Autor de la entrada

      Hola Alberto
      Gracias por tus comentarios, me alegra mucho que les esté sirviendo.
      Como bien dices, lo que he posteado hasta ahora de psd a html, es bastante basico, pero justamente esa era mi idea: que los interesados comiencen a comprender esto desde lo mas basico, porque considero que es la piedra fundamental para luego resolver todo tipo de trabajo.
      Y estas cosas basicas son varias aunque nadie lo diga.
      Es un trabajo que si bien no es dificil, pero hay que tener varios conceptos aprendido antes de hechar mano al codigo html.

      En estos dias estaré posteando mucho mas material.
      Muchas gracias por tus comentarios.

      Saludos y continuemos en contacto !
      Cristian

      Responder
  3. Pingback: De Psd a Html, paso 1: Creando la estructura de tu página. | Psd a Html: hazlo rápido y profesionalmente

  4. Pingback: La conversión de Psd a Html: el “karma” de los diseñadores. | Psd a Html: hazlo rápido y profesionalmente

  5. jonathan

    Excelente, apenas hoy encontré esta pagina y la seguiré al pie de la letra, quiero convertirme en un buen maquetador web, ya que el photoshop lo domino muy bien, SALUDOS

    Responder
  6. Ramiro

    Genial! la verdad que estoy siguendo esto porque lo necesito para trabajar, me encanta como funciona todo y con la realizad y sabiduria que escribis y decis las cosas, tus explicaciones son excelentes y me encanta leerlo e imaginar todo tal cual lo decis. Te felicito, exitos!

    Responder
  7. beel

    Hola a empezar con la primera clase con mucha motivacion XD ya me puse a ver varias paginas y a identificar su estructura tal como lo mencionaste

    Responder
  8. anibal

    Donde puedo conseguir platnillas en psd,,, porque yo no se photoshop,,, me gusta el html y css,,,, y quiero aprender a pasar los psd a html,,, pero no se photoshop,, por eso me interesa conseguir plantillas ya hechas en psd..

    saludos

    exelente tu blog… gracias!!

    saludos

    anibalrmz

    Responder
    1. Psd a Html Autor de la entrada

      Hola Anibal
      Gracias por escribirme.

      Por lo de las plantillas en PSD, puedes buscar en Google como “free Psd templates” y van a aparecer muchos sitios para descargar plantillas.

      Espero haberte ayudado.
      Saludos!
      Cristian

      Responder
  9. Samu

    Hola Cristian.
    Es justo lo que buscaba. Tengo conocimientos de Css y html.
    He creado varias páginas desde cero pero pasar de psd a html no lo he realizado nunca.
    Voy a seguir tu blog paso a paso. Incluso tengo una web sencilla para hacer de psd a html que la utilizaré para ir aprendiendo.

    Cualquier cosa te veo por aquí 😉

    Saludos, Samu

    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