21 Tutoriales que te enseñan a convertir de PSD a HTML tus diseños web

Una técnica bastante utilizada hoy día a la hora de diseñar una web es crear un archivo PSD con todos los gráficos y la estructura de la web para luego pasarlo a HTML. Si has elegido este formato de trabajo para llevar a cabo tus diseños web entonces posiblemente te interese este set de tutoriales que hemos recopilado en los que te explican técnicas para realizar el proceso de forma sencilla.

Crea un diseño web con texturas desde Photoshop


El diseño de esta web está basada en texturas y el resultado final es bastante interesante. Comienza con Photoshop y termina con HTML/CSS.

Convierte tu página de aterrizaje PSD a HTML


En este tutorial te explican cómo crear una página de aterrizaje (o landing page) en PSD y pasarla a HTML, paso a paso, aplicando estilos CSS y JavaScript y además compatible HTML/CSS con la mayoría de versiones de navegadores.

Crea un sitio portfolio bonito desde cero


Este tutorial recrea un sitio web con un estilo realmente elegante con formas obscuras partiendo de un archivo Photoshop.

Crear una web portfolio con Photoshop y pasarla a HTML


Aquí aprendes a realizar una web tipo portfolio para mostrar tus trabajos creando un archivo PSD para luego pasarlo a HTML.

Un diseño simple y elegante en CSS3


Este tutorial también se basa en crear un diseño en PSD para pasarlo luego a HTML. El diseño con el que se trabaja es bastante sencillo pero también elegante. Ideal para webs que no requieran mucho trabajo gráfico, bases para plantillas para blogs, etc.

Una plantilla de web para negocios en PSD a HTML/CSS


Este tutorial comienza diseñando una plantilla profesional para webs de negocios en formato PSD y luego te enseña a convertirlo HTML/CSS.

Cómo codificar un diseño web desde PSD hasta HTML


Aquí aprendes a crear un archivo HTML a partir de PSD, cuando termina el diseño se le añaden efectos jQuery.

Cómo convertir una maqueta PSD a XHTML/CSS


Aquí partes de una maqueta de diseño básico de una página web bastante profesional y luego pasas el resultado a HTML.

Cómo crear un diseño al estilo cómic


El diseño que utiliza este tutorial como base está inspirado en el mundo del cómic, utiliza Photoshop para crear un PSD con el diseño base para luego convertirlo a HTML.

Cómo convertir un diseño PSD a XHTML o CSS

Un diseño minimalista y moderno


Aquí te enseñan a crear un diseño web simple pero elegante desde PSD a HTML.

Una web para un estudio de diseño desde PSD a HTML


En este tutorial el diseño básico está orientado a una empresa de diseño o a un estudio, utilizando varios elementos gráficos para darle más vistosidad y un resultado bastante agradable y profesional.

Un diseño minimalista en Photoshop a HTML


Este tutorial está divido en dos partes. En la primera te muestran cómo crear un diseño web minimalista utilizando Photoshop. Una vez que tienes el archivo PSD en la segunda parte te muestran cómo convertirlo a HTML y CSS.

Cómo crear un diseño web 2.0 usando Photoshop


Aquí aprendes a crear un diseño limpio muy al estilo web 2.0 con sombreados y degradados partiendo de Photoshop.

Convierte un archivo de Photoshop en un Sitio Web


En este tutorial puedes aprender a convertir un archivo creado con Photoshop en un Sitio Web paso a paso comenzando desde cero.

Cómo diseñar un sitio web profesional desde cero


Este tutorial te muestra cómo crear un sitio web con un diseño final muy profesional comenzando desde cero. Ideal para principiantes en el mundo del diseño web y Photoshop que quieran adentrarse comenzando con trabajos serios.

Cómo crear el diseño de un blog con Photoshop y pasar el PSD a HTML


Este tutorial se basa concretamente en el diseño de una plantilla para blogs. Una vez que has creado el diseño base utilizando Photoshop entonces te explica cómo pasarlo a HTML/CSS. Por último se valida el HTML para comprobar la compatibilidad con navegadores.

Cómo crear un diseño web con aspecto grunge


Este tutorial está orientado al diseño de un sitio web con aspecto sucio y grunge pero bastante interesante desde el punto de vista estético. Ideal para trabajos y webs informales.

Codifica en HTML una web para empresa partiendo de un diseño de Photoshop


En este caso, el diseño del que se parte es serio y sobrio basado en la imagen que debería tener el diseño web para una empresa. Quizás demasiado básico pero obviamente el diseño puede complicarse y adaptarse todo lo que haga falta según el caso.

Crea un diseño magazine para webs de revistas


Este tutorial está orientado a las webs de revistas online, periódicos y noticias en general.

Un diseño minimalista a XHTML & CSS


Un diseño realmente minimalista pero no por ello menos elegante.

Programar un diseño limpio y profesional con Photoshop


Este diseño es particularmente profesional a la vez que elegante y limpio. Comienzas con el diseño básico en Photoshop y luego pasas el resultado a HTML.

Nexus 4 vs. iPhone 5 ¿Cuál es mejor?

5 Formas de crear Covers para la cabecera de Facebook sin usar Photoshop