Diseño y Maquetado Web xHTML y CSS con Adobe Photoshop CS3
Convertir Photoshop a HTML con Dreamweaver
Tutorial por Jorge Oyhenard (elQuique)
Actualizamos nuestro popular tutorial de Diseño y Maquetado Web a las ultimas técnicas y tecnología, utilizando Photoshop CS3, Dreamweaver y código xHTML y CSS.
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 :)
Comentarios de Diseño y Maquetado Web xHTML y CSS con Adobe Photoshop CS3
↑ Tutorial
emardis2002
2007-05-10 15:18
Saludos. emanuel
nplanet
2007-05-17 01:13
disenator
2007-06-14 10:38
elquique
2007-07-07 15:14
turkotati
2007-08-27 19:43