comparte el articulo 

Videotutorial para pasar de PSD a HTML y CSS

Actualizado el 05/11/2009 < > 11 Cometarios

Recientemente he encontrado este videotutorial que te enseña paso a paso como convertir un archivo PSD de Photoshop a HTML+CSS.

Es una guía completísima, y el hecho de que te la expliquen en video ayuda mucho, para mí es el mejor howto (cómo hacer) que existe.

En este caso concreto, te enseña a separar por capas el diseño, a construir el CSS y el HTML, y hasta a añadirle los “arreglos” para que se vea igual en Internet Explorer que en el resto de navegadores. Eso sí, tiene un gran inconveniente, como muchos de los mejores recursos sobre diseño web, está en inglés.

También hay algunos tutoriales en español, aunque mucho más escasos, como este breve tutorial de PSD a HTML que es bastante sencillo de leer. El resultado no será un código perfecto, pero si te estás iniciando es una gran ayuda.

Videotutorial PSD en HTML en español

Uno muy muy bueno en español es este de cristalab, que recomiendo sin duda, ya aunque solo sea porque está en español. Pero a parte de eso es completísimo también y de gran calidad. Os dejo los enlaces a los videos:

  1. Convertir PSD en HTML, parte 1
  2. Convertir PSD en HTML, parte 2
  3. Convertir PSD en HTML, parte 3
  4. Convertir PSD en HTML, parte 4
  5. Convertir PSD en HTML, parte 5
  6. Convertir PSD en HTML, parte 6

Ahora bien, si no tienes tiempo y/o ganas de aprender como se hace, para variar tienes algunos recursos disponibles en Internet, eso sí, seguramente tendrás que gastarte algo de dinero para obtener un código decente:

  • PSD to HTML: es la página web por excelencia para contratar este tipo de servicios. Está en inglés, pero ofrece unos precios muy competitivos y sus diseños son de grandísima calidad, con muchas opciones para elegir y un cómodo formulario de compra.
  • PSD to WordPress: lo mismo, una empresa de maquetación web, en este caso especializada en la plataforma WordPress, también en inglés.

¡A maquetar!

Publicado el 05/11/2009, última actualización 05/11/2009.

Licencia: Eres libre de distribuir este artículo siempre que mantengas los enlaces dentro del mismo intactos y des los créditos al autor.

Autor: Verónica Milán

URL: Notas de diseño web

Añadir Comentario (Subir al texto)

11 Cometarios

  1. Programador web

    Muy buen recurso! esta chica explica realmente bien, lo seguiré, gracias

    Jueves, 5 de noviembre 2009

  2. diseño web valencia

    Pues si que son de agradecer este tipo de recursos. Por otro lado, es una pena, pero tienes razon.
    La mayoría de los buenos recursos están en inglés.

    Jueves, 12 de noviembre 2009

  3. Verónica Milán

    Cierto Angel, hay información casi interminable en inglés, y muchas veces encuentro que se queda corta la disponible en español. En nuestra mano está el ir equilibrando la balanza poco a poco.
    Por otro lado el mercado anglosajón está hiper saturado, el nuestro aún tiene posibilidades de negocio, nichos menos explotados… ventajas e inconvenientes…

    Saludos.

    Viernes, 13 de noviembre 2009

  4. Herramientas para diseñadores web: Editores HTML

    […] Editores de texto especializados en HTML y CSS […]

    Lunes, 1 de marzo 2010

  5. Speed CSS – Maquetación de una web a cámara rápida

    […] un video de 10 minutos a cámara rápida en donde básicamente se ve como pasar de psd a html, a modo […]

    Miércoles, 5 de mayo 2010

  6. Diseño Web México

    La información casi siempre está en ingles porque la gente que desarrolla la mayor parte de las aplicaciones habla ese idioma, y también es como un lenguaje estandard para muchos desarrollos

    Martes, 11 de mayo 2010

  7. diseño web chile

    Lo estoy siguiendo, podríamos tener un mejor gusto por el tamaño de la fuente al grabar un video–

    Viernes, 4 de junio 2010

  8. Actualización de la librería PhpdocX para generar archivos Word

    […] motor de conversión de HTML y CSS a documento de Word: podrás convertir páginas web u otra documentación en HTML a documentos de […]

    Miércoles, 14 de julio 2010

  9. Lionel Ferrer

    Muy buen post, exelente blog en lineas generales.
    saludos

    Viernes, 6 de agosto 2010

  10. omar

    hola.. sobre el video muy pero muy bueno desearia bajarlo como podria descargar este video por favor no tengo internet en mi casa y desearia bajar estos videos para verlo en mi casa con mas calma porfavor lo intente descargar con filsh pero no esta asociado.
    gracias y que dios los bendiga

    Lunes, 29 de noviembre 2010

  11. Calendarios Laborales España

    Hola, aquí les dejo otros dos enlaces de webs de pago para pasar psd a xhtml, que funcionan bien y son más económicas que las aportadas en el post:

    http://www.xhtmlchop.com/
    http://psdtohtmlexperts.com/

    Un saludo desde España!

    Jueves, 24 de marzo 2011

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras