Reporte

Gracias por descargar este reporte gratuito.
Espero sea de gran ayuda para ti.

Atte.
Cristian

- | psdahtmlpasoapaso.com – Aprende a convertir un Psd a Html sin secretos

1

Índice de contenidos:

Paso 1: La visualización Mental

pág. 3

Paso 2 - Separar los contenidos del diseño

pág. 6

Paso 3 - Crear la estructura html

pág. 7

Paso 4 - Aplicar los estilos con CSSpág. 11

Paso 5 - Volcar los textos y aplicarle estilos

pág. 14

- | psdahtmlpasoapaso.com – Aprende a convertir un Psd a Html sin secretos

2

5 Poderosos pasos para Convertir un PSD en HTML
Paso 1: La visualización Mental
Este paso 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 nosencontramos 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 fracasan
cuanto intentan convertir un Psd a Html.
Si pones en práctica este paso, el trabajo de maquetación web es 50% más
fácil, y no soloeso, sino que si realizas una correcta visualización mental de las
partes, luego podrás pasar cualquier tipo de Psd a Html sin ningún problema y
sin importar la complejidad que este tenga.
Voy a explicarte este secreto, dando algunos ejemplos simples para que te
quede más claro.
Cuando pensamos en una página web, debemos pensar en “cajas” o
“recuadros” que contienen unos a otros, o quecontienen algún tipo de
contenido, por ejemplo, texto.
Esto es así ya que 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 el slogan.
- Cuerpo (body), donde está el contenido propiamente dicho.
- Pie (footer), donde sesuelen colocar datos legales o links.
Aquí una imagen para que comprendas mejor:

- | psdahtmlpasoapaso.com – Aprende a convertir un Psd a Html sin secretos

3

Estas cajas imaginarias son las que contendrán todos los contenidos de la
página.

CONCLUSION:
Antes de comenzar una maquetación web para pasar de un Psd a Html, debes
realizar una correcta visualización mental de las partes de lapágina. Esto es
SUMAMENTE importante porque te simplificará muchísimo 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 he mencionado. Quizás al principio te cueste un poco, pero
verás que luegode 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.
IMPORTANTE:Recuerda que esto es de VITAL importancia para que luego
puedas pasar de psd a html correctamente y de forma mucho mas simple y
efectiva.

- | psdahtmlpasoapaso.com – Aprende a convertir un Psd a Html sin secretos

4

Paso 2 - Separar los contenidos del diseño
Los elementos para convertir un Psd en Html de forma profesional, y 100%
compatible con todos los navegadores, son:
- El lenguajeHTML o XHTML
- Las hojas estilo cascada, o más conocidas como CSS.
Pero…..que se usa para cada tarea de maquetación web?
Aquí es donde se comete uno de los ERRORES más graves a la hora de la
maquetación web, y que la mayoría de las personas no comprende.
Yo te lo voy a explicar y cuando lo comprendas y lo apliques, verás qué fácil es.
Presta mucha atención, es muy simple.
Siempre recuerda...