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:

 

Charitable

Organization

Make a donation today and help 2000 children

 

 

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:

 

 

Welcome to our organization

Don’t forget to check free website templates every day, because we add a new free website template almost daily.

You can remove any link to our websites from this template you’re free to use the template without linking back to us.

This is just a place holder so you can see how the site would look like.

This is a template designed by free website templates for you for free you can replace all the text by your own text.

 

 

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

 

Photos

 

 

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

newest oldest most voted
Notify of
Andres Hurtado
Guest
Andres Hurtado

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