Diseño y Maquetado Web xHTML y CSS con Adobe Photoshop CS3

Convertir Photoshop a HTML con Dreamweaver

Tutorial por Jorge Oyhenard (elQuique) de Foro Creativo

En el año 2001, realizábamos un tutorial que en su momento fue único en la Web, mas aun en Español, en el, Paquo360 nos mostraba como diseñar una Web en Photoshop y proponía luego llevarlo a HTML con FrontPage y con Dreamweaver ya que si bien nosotros usamos siempre Dreamweaver mucha gente preguntaba por FrontPage.

Este tutorial se publico en nuestra Web www.solophotoshop.com (incluso antes cuando estaba en el galeón), en 2006 decidimos volverla a publicar ya que muchos nuevos o antiguos usuarios aun no sabían como hacer este trabajo.

Obviamente, casi 5 años mas tarde la Web, y las herramientas han cambiado mucho, y por supuesto los usuarios, que muchos de ellos cuestionaron este tutorial sobre todo por el uso de un HTML antiguo, Tablas, etc.

Si bien los comentarios se dieron en este casi año (2006 a hoy), recién ahora tengo tiempo de revisar por completo ese tutorial y si perder lo que ahí se enseña, que continua siendo muy valioso (lo aseguran miles de usuarios que lo han visto y usado en ese año).

Breve reseña del tutorial anterior (año 2001) de 10 partes:

• Diseño y Maquetado Web 1 - Preparar el Ambiente de trabajo

  Se plantean esquemáticamente los elementos de la Web, se comienza a preparar el Photoshop posicionando las líneas guías, se dibujan algunos elementos de la Web.
  http://www.tallerwebmaster.com/Tutorial-Disenio-y-Maquetado-de-Plantillas-WEB-1-c-14.html

• Diseño y Maquetado Web 2 - Dibujando nuestro Diseño

  Se dibuja el header, explicado paso a paso la técnica a usar, se aconseja el uso de Capas para organizar el diseño, y se realiza todo el dibujo plano del diseño.
  http://www.tallerwebmaster.com/Tutorial-Disenio-y-Maquetado-de-Plantillas-WEB-2-c-15.html

• Diseño y Maquetado Web 3 - Aplicando efectos al Diseño

  Se muestra como darle un aspecto tridimensional, con sombras y biseles, dándole un mejor aspecto.
  http://www.tallerwebmaster.com/Tutorial-Disenio-y-Maquetado-de-Plantillas-WEB-3-c-16.html

• Diseño y Maquetado Web 4 - Mejorando el Aspecto Visual

  Se termina con el diseño y los aspectos visuales. En esta versión 2001 del Tutorial terminaba el trabajo de Photoshop.
  http://www.tallerwebmaster.com/Tutorial-Disenio-y-Maquetado-de-Plantillas-WEB-4-c-17.html

• Diseño y Maquetado Web 5 - Cortando los elementos con ImageReady

  Se comienza con el corte (slice) de los elementos gráficos utilizando el archivo PSD de Photoshop, pero con la herramienta ImageReady. Hoy día esto se puede hacer directo desde Photoshop sin usar ImageReady.
  http://www.tallerwebmaster.com/Tutorial-Disenio-y-Maquetado-de-Plantillas-WEB-5-c-18.html

• Diseño y Maquetado Web 6 - Optimizando los cortes del Diseño Web

  Se termina con los últimos detalles del corte (slice) de los elementos gráficos, así como el ajuste del peso de las imágenes y los tipos (gif o jpg). Y se hace una exportación de los elementos, obteniendo esos gif, jpg y el html.
  http://www.tallerwebmaster.com/Tutorial-Disenio-y-Maquetado-de-Plantillas-WEB-6-c-19.html

• Diseño y Maquetado Web 7 - Maquetando con FrontPage

  El código HTML generado en Photoshop, y las imágenes son utilizadas en FrontPage para lograr un archivo HTML mejor y más óptimo (al menos para esa época)
  http://www.tallerwebmaster.com/Tutorial-Disenio-y-Maquetado-de-Plantillas-WEB-7-c-20.html

• Diseño y Maquetado Web 8 - Optimizando el HTML con FrontPage

  Se termina el ajuste necesario de ese archivo HTML, utilizando FrontPage. Estas dos partes (7 y 8) del tutorial, eran las mas buscadas y preguntadas por los diseñadores, ya que explican como transformar un archivo PSD de Photoshop en HTML usando FrontPage.
  http://www.tallerwebmaster.com/Tutorial-Disenio-y-Maquetado-de-Plantillas-WEB-8-c-21.html

• Diseño y Maquetado Web 9 - Maquetando con DreamWeaver

  Es lo mismo que la parte 7, pero utilizando Dreamweaver para optimizar ese código HTML de Photoshop ya que en ese tiempo DW no era tan conocido, hoy día considero es el mejor para este trabajo.
  http://www.tallerwebmaster.com/Tutorial-Disenio-y-Maquetado-de-Plantillas-WEB-9-c-22.html

• Diseño y Maquetado Web 10 - Optimizando el HTML con DreamWeaver

  Al igual que la parte 8, pero usando Dreamweaver en vez de FrontPage, terminamos de optimizar el código HTML que habíamos generado con Photoshop. Estas dos partes (9 y 10) del tutorial, son hoy día las mas buscadas y preguntadas por los diseñadores, ya que explican como transformar un archivo PSD de Photoshop en HTML usando Dreamweaver.
  http://www.tallerwebmaster.com/Tutorial-Disenio-y-Maquetado-de-Plantillas-WEB-10-c-23.html

Cambios necesarios para una Web moderna (año 2007)

• Veremos como realizar el trabajo usando Photoshop CS 2 ya que hoy no es necesario ImageReady
• Repasaremos la herramienta Slice (corte) en Photoshop
• Veremos como Optimizar los cortes (slices) en cuanto a peso en kbytes o bytes, y en cuanto a formato gif o jpg.
• Veremos como indicar el nombre de cada archivo
• Veremos como indicar el texto ALTerno de la imagen, necesario para lograr un sitio valido (xHTML) y mejorar el posicionamiento en buscadores
• Veremos como eliminar imágenes que no se deben exportar
• Veremos como generar un código xHTML moderno
• Y al finalizar como realizar el maquetado CSS de la Web

Nuevos capítulos del Tutorial de Diseño y Maquetado Web con Adobe Photoshop y DreamWeaver

• Cortar un diseño para pagina Web con Adobe Photoshop CS2
• Optimizar cortes de un diseño Web con Adobe Photoshop CS2
• Generar código xHTML con Adobe Photoshop CS2 y optimizar con Dreamweaver
• Generar código CSS con Adobe Photoshop CS2 y optimizar con Dreamweaver

Tutorial: Diseño Web con Adobe Photoshop CS3 y HTML

El tutorial más esperado por quienes hacemos Diseño Web, elQuique nos enseña como cortar un diseño PSD de Adobe Photoshop CS3 para convertirlo en HTML y pasarlo a Dreamweaver CS3 para los ajustes finales.

Diseño Web con Adobe Photoshop CS3 y HTML

Agradecemos sus comentarios :)