Solo Photoshop

Tutoriales y recursos Photoshop

Bienvenido a SoloPhotoshop, donde encontrarás la mejor información sobre tutoriales, recursos y artículos de Adobe Photoshop!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Anunciar en SoloPhotoshop

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

Cortar Diseño Web con Adobe Photoshop CS3 y crear HTML

 

Tutorial por elQuique

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.

En nuestro Tutorial del año 2002 sobre este tema, y tal como comentamos en el Resumen del Tutorial de Diseño y Maquetado Web, decíamos que en las Parte 1, Parte 2, Parte 3 y Parte 4 nos ocupábamos del Dibujo del Diseño Web, y en la Parte 5, utilizábamos ImageReady para cortar el diseño y ser utilizado en la Web.

En las últimas versiones de Adobe Photoshop, no es necesario usar ImageReady ya que el mismo Photoshop incluye la Herramienta de Corte (Slice Tool). Este tutorial contiene las capturas de Adobe Photoshop CS3, pero con leves cambios se puede realizar lo mismo en Photoshop CS y CS2.

Para dibujar este diseño, pueden usar nuestro tutorial en la Parte 1, Parte 2, Parte 3 y Parte 4, o pueden descargar el archivo acá: Dibujo sin Cortes

Luego de abrir el archivo, vamos seleccionar la Herramienta de Corte (Slice Tool), para poder seleccionar cada uno de los elementos gráficos del diseño.

Herramienta de Corte - Slice Tool

De esta forma es que le indicamos a Photoshop CS3 como dividir el diseño para obtener pequeñas imágenes que se insertaran en el HTML de nuestra Web.

La forma de trabajo es sencilla, vamos a marcar los elementos como el logo, la zona de banners, el menú, etc. de cada parte y realizar el Corte arrastrando el ratón con la herramienta Corte (Slice Tool), como muestra la imágen.

Marcar Cortes

Con paciencia y de la misma forma, vamos a ir cortando todos los elementos hasta que quede como se muestra en la siguiente imágen.

Cortes Marcados

Les dejo el archivo terminado, con los cortes ya realizados, para descargar acá: Dibujo con Cortes.

Con esto que hemos hecho ya podemos llevar nuestro diseño a Dreamweaver CS3 (o una versión anterior u otro editor si lo prefieren), para Guardar el HTML debemos hacer lo siguiente:

Archivo, Guardar para Webs y Dispositivos

Guardar para Web - Save for Web

Luego debemos seleccionar la solapa de Optimización (Optimized), donde veremos nuestro diseño con los cortes, y presionamos en el botón Guardar (Save)

Guardar para Web Opciones

En esa nueva pantalla vamos a asegurarnos y controlar estos 5 puntos:

  1. El nombre del archivo HTML, en este caso le di: index.html
  2. Tipo de archivos que guardaremos: HTML y las Imágenes
  3. Seteos Personalizados (Custom)
  4. Cortes Todos (All Slices)
  5. Presionamos Guardar (Save)

Listo !!, con esto tenemos nuestra pagina Web cortada y lista para trabajarla en Dreamweaver CS3 (u otra versión u otro editor HTML).

Pueden ver el resultado funcionando acá: http://www.artecreativo.net/sp/410/sitioweb1

Pueden descargar el archivo comprimido con HTML e imágenes acá: Diseño Web HTML e Imágenes

En la próxima entrega veremos como optimizar las imágenes para que sean menos pesadas.


Comentarios de Diseño y Maquetado Web xHTML y CSS con Adobe Photoshop CS3 | Solo Photoshop

↑ Tutorial

  • Bhiqm

    Bhiqm

    2007-06-10 16:31

    oie buen tutorial gracias por subirlo :D
  • wilkingo

    wilkingo

    2007-08-04 23:09

    de pana q esta super bueno... siempre es bien aprender cosas nuevas... aunke en opinion muy personal a los cortes yo los llamo diagramacion (si me ekivoco corriganme por favor...) la haria en fireworks... digo yo jejeje
  • edomachado

    edomachado

    2007-09-21 23:37

    excelente tutorial. me ha aclarado mucho el panorama
  • nazcar

    nazcar

    2007-10-26 13:08

    Los pasos están bien pero no se me parece q queda un tanto (MAL) no? lo digo porq esa página es bastante sencilla pero q pasaría con una q tenga un diseño abstracto? me refiero a no cuadrado.. sino como un dibujo!! no se probaré así a ver q tal me sale ;) pero gracias por la ayuda

    Salus
  • Dsalomon

    Dsalomon

    2007-12-24 00:19

    Excelente men...
  • sandok

    sandok

    2008-05-29 22:57

    tengo un problema, cuando lo paso a dreamweaver y le doy los link a los sectores como que la pagina se me separa...
  • moises aldana

    moises aldana

    2008-05-30 10:24

    buenas buenas.. quisiera que me dijeras una vez que la tengo en dreamweaver lista con todos los link.. ¿Cómo la hago publica? para que ya todos la puedan ver..?? gracias..!
  • ermanunu

    ermanunu

    2008-07-30 04:09

    wenas me encanta, me gustaria saber donde puedo descargar el dreamweavercs3 para poder crear mi pagina web.
  • JNeo

    JNeo

    2008-08-28 18:56

    Me ha servido bastante el tutorial, esta excelente...