Cómo Pasar de PSD a HTML5

Como pasar un diseño de Photoshop a HTML5

Objetivo:

En este tutorial veremos el proceso completo de como pasar un diseño hecho en Photoshop a código HTML5, primero empezaremos con los cortes y la optimización de las imágenes del psd del diseño, después veremos todo el esqueleto en html5 y por ultimo le daremos estilos con css.

Descarga:

Para seguir el tutorial sin problemas puedes descargar los archivos base y resultado final en este enlace.

Requerimientos:

  • Un editor de código
  • Conocimientos básicos de html y css
  • Un editor de imágenes que soporte archivos psd

Paso 1 – Cortes de las imágenes del diseño

1

Aquí vamos a usar la herramienta de sector para seleccionar cada uno de los elementos que vamos a recortar para después pasar al paso #2 que es la optimización de las imágenes así que comencemos:

 

  1. Seleccionar la herramienta sector

2

  1. Seleccionar los elementos necesarios que se van a exportar

3

  1. Ir al menú Archivo/guardar para web y dispositivos

 

Paso 2 – Optimización de las imágenes

En el proceso de la optimización tenemos que deliberar el formato y la calidad de las imágenes recortadas, en este ejemplo vamos a dejar todas las imágenes en un formato JPG a una calidad de un 80%, con esto obtenemos imágenes de muy poco peso pero con una buena calidad, así que los pasos son los siguientes:

4

  1. Seleccionar todas las imágenes que seleccionamos con la herramienta “sector” con la tecla shift.
  2. En la seccion de calidad lo dejamos en un 80%

5

  1. Le damos en el botón guardar
  2. Buscamos la carpeta destino en donde vamos a guardar estas imágenes
  3. Y le damos en el botón guardar con los parámetros que se muestran para que solo se exporten las imágenes que seleccionamos con la tecla shift

6

Nota: si queremos que las imágenes se guarden con un nombre indicado lo hacemos seleccionando el sector con la herramienta “seleccionar sector”, seleccionamos el sector con doble clic y se nos habré la ventana para asignarle un nombre, así cuando exportemos esta imagen se guardara con el nombre indicado por el sector.

6

7

Paso 3 – Estructura HTML5

Empezamos con una estructura básica de html5

Ahora vamos a crear el contenedor general y dentro de este contenedor crearemos el “header” y dentro del header ira el logo, el eslogan, la información para la donación y las imágenes del encabezado:

Abajo del header crearemos el menú de navegación:

 

Debajo de la navegación crearemos un div donde va a encerrar el contenido completo, este será como el contenedor padre:

 

Dentro de este div meteremos en 2 bloques que es la parte del contenido y la barra lateral que estará encerrado con un aside:

Abajo pero aun estando dentro del div con id contenidogeneral haremos la galería de imágenes

 

Por ultimo terminamos haciendo el footer:

 

Paso 4 – Estilos CSS

 

¿Te gustaría profundizar estas técnicas con varios otros ejemplos?

Si está te invitamos al curso completo de PSD a HTML5, donde a través de 8 módulos quedarás un verdadero ninja del Frontend.

PSD a HTML5

Accede al curso completo!

Publicado por

Klinsmann Fabian

Desarrollador web y ninja Front-end. Klinsmann es licenciado en Marketing y Neuro Marketing Digitales, apasionado por las ultimas tecnologías, lleva mas de 3 años trabajando con HTML5, CSS3, jQuery, Responsive design y todo lo que tiene que ver en la web.

Share this article

Leave a Reply

1 Comment on "Como pasar un diseño de Photoshop a HTML5"

Notify of
avatar
Sort by:   newest | oldest | most voted
Andres Hurtado
Guest

hola estoy super en balado hoy tengo que que entregar una pagina maqueta da a través photoshop y pásala ahtml y css y no tengo ni idea

wpDiscuz