Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

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:

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

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

    emardis2002

    2007-05-10 15:18

    mi pregunta es si esta bien escrito : "Generar código CSS con Adobe Photoshop CS2", ya que el titulo marca "CSS con Adobe Photoshop CS3". Esperemos que sea con CS2, ya que es el que tengo.

    Saludos. emanuel
  • nplanet

    nplanet

    2007-05-17 01:13

    NO SE ME ACTIVA EL GUARDAR COMO WEB ME SALE INACTIVO A PESAR Q LO CORTO EDXACTO COMO DICE EL TUTORIALN NOSE Q PASA Q NO SE ACTIVA
  • disenator

    disenator

    2007-06-14 10:38

    me gustaria que hagas un tutorial photoshop y Dreamweaver pero maquetando con capas anidadas no con tablas y aplicarle estilo css las capas anidadas es una excelente opcion de hacer web tienes mas libertad de diseñar y si le aplicas estilo css es mucho mejor y si el codigo lo exportas pesa menos tu pagina me gustaria que hagas un tutorial sobre esta tendencia gracias disenator@hotmail.com
  • elquique

    elquique

    2007-07-07 15:14

    Lo de capa lo vemos en la proxima entrega, yo hace mucho lo hago con CSS, pero mucha gente aun maqueta con tablas y quiero ir paso a paso para que vean que desde Photoshop con pocos click se logra lo mismo pero con CSS. Y es innumerable la cantidad de ventajas de olvidarnos de las tablas.
  • turkotati

    turkotati

    2007-08-27 19:43

    Muy buen tutorial, me ayudo mucho, muchas gracias