Maquetar una web a partir de una imagen con Photoshop

  • Por
Vemos como utilizar los sectores de Photoshop para maquetar de una manera sencilla el diseño de una página web que teníamos en una imagen.
A la hora de diseñar una página web, resulta muy cómodo hacer las pruebas de creatividad utilizando un programa de diseño gráfico, en lugar de realizar la maquetación directamente en HTML.

Uno de los programas más útiles para realizar el diseño de la página es Adobe Photoshop, que ofrece muchas utilidades para el retoque fotográfico, pero también para el diseño gráfico en general. Las últimas versiones del programa además disponen de ayudas muy interesantes para diseñar las páginas web, como los sectores o la opción Guardar para web.

Nota: En este artículo crearemos apenas la cabecera de una página web, partiendo una única imagen en varios trozos y generando automáticamente el código HTML para utilizar en una web. Si queremos ver la maquetación de una web completa, también a partir de una imagen -de la que se extraen diversos pedazos con Photoshop-, pero creando cada una de sus partes con HTML y maquetando con CSS, os recomendamos la serie de artículos que comienza por Maquetación CSS a partir de una imagen.

Vamos a ver en este taller una muestra sobre cómo se pueden utilizar los sectores para maquetar una página web en HTML.

Por ejemplo, en Photoshop podríamos haber diseñado la siguiente imagen que vamos a utilizar para la cabecera de la página:


Esta imagen la podemos partir en sectores. Los sectores son áreas de la imagen que luego vamos a guardar en un archivo independiente, optimizado para visualizarse en Internet. Los sectores los realizamos a nuestro gusto. Posiblemente nos interese que el logotipo o el banner principal se encuentren en una imagen separada, o posiblemente hayamos pensado colocar una barra de navegación que deseamos que esté en un mismo sector, que luego vamos a llenar con el texto de la barra.

Referencia: Para entender bien lo que vamos a hacer sería importante leer el artículo Sectores de Photoshop, si es que no los conoces ya.

Los sectores nos pueden haber quedado de manera similar a como aparece en esta imagen:


Una vez realizados los sectores, seleccionamos la opción "Guardar para web" del menú de archivo. Esto nos permite acceder a una ventana donde se pueden elegir las opciones de optimización de las imágenes, seleccionando las características de todos los sectores o bien, definiendo unas propiedades específicas para cada sector.

Una vez hemos seleccionado todas las opciones necesarias, guardamos el trabajo, con lo que obtendremos un archivo HTML con una tabla, que contiene a su vez las distintas imágenes generadas a partir de cada sector y guardadas con las opciones de optimización seleccionadas previamente.


Eliminar una imagen de un sector y sustituirla por un texto

Posiblemente alguna de las partes o sectores generados, donde tenemos una imagen, queramos que disponga un texto, para poder escribir lo que se desee, en lugar de visualizar una imagen, que siempre es mucho más estática.

Por ejemplo, puede haber un espacio para el título de la página y, ya que el título puede cambiar en cada página del web, puede que nos resulte interesante que ese título sea un texto, que se puede editar, en lugar de una imagen. O bien, puede que tengamos un espacio para situar la dirección de la empresa dueña del sitio web, tal como hemos hecho en el diseño que estamos trabajando, y deseamos que la dirección aparezca como un texto en lugar de una imagen, ya que los textos son indexados por los buscadores y queremos que puedan indexarse las palabras de la dirección de la empresa como palabras clave de la página.

Entonces, necesitamos sustituir la etiqueta de la imagen por un texto. Para ello, simplemente hay que localizar la etiqueta que corresponde a la imagen que deseamos sustituir y borrarla, cambiándola por el texto que tiene que ir en lugar de la imagen. Pero atención, porque esto nos puede cambiar el diseño de la tabla y descolocar las imágenes que van dentro. Para evitarlo, simplemente ajustamos los valores width y height de la celda donde estaba la imagen, a los que tenía la propia imagen que deseamos sustituir.

Por ejemplo, este es el código HTML generado por Photoshop para la composición anterior. Cada sector está en una imagen independiente.

<TABLE WIDTH=697 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="imágenes/espacio.gif" WIDTH=214 HEIGHT=1></TD>
<TD>
<IMG SRC="imágenes/espacio.gif" WIDTH=233 HEIGHT=1></TD>
<TD>
<IMG SRC="imágenes/espacio.gif" WIDTH=34 HEIGHT=1></TD>
<TD>
<IMG SRC="imágenes/espacio.gif" WIDTH=1 HEIGHT=1></TD>
<TD>
<IMG SRC="imágenes/espacio.gif" WIDTH=215 HEIGHT=1></TD>
<TD></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="imágenes/cabecera-original_01.gif" WIDTH=214 HEIGHT=85></TD>
<TD ROWSPAN=2>
<IMG SRC="imágenes/cabecera-original_02.gif" WIDTH=233 HEIGHT=25></TD>
<TD COLSPAN=2>
<IMG SRC="imágenes/cabecera-original_03.gif" WIDTH=35 HEIGHT=16></TD>
<TD>
<IMG SRC="imágenes/cabecera-original_04.gif" WIDTH=215 HEIGHT=16></TD>
<TD>

<IMG SRC="imágenes/espacio.gif" WIDTH=1 HEIGHT=16></TD>
</TR>
<TR>
<TD>
<IMG SRC="imágenes/cabecera-original_05.gif" WIDTH=34 HEIGHT=9></TD>
<TD COLSPAN=2>
<IMG SRC="imágenes/cabecera-original_06.gif" WIDTH=216 HEIGHT=9></TD> <TD>
<IMG SRC="imágenes/espacio.gif" WIDTH=1 HEIGHT=9></TD>
</TR>
<TR>
<TD COLSPAN=4 ROWSPAN=2>
<IMG SRC="imágenes/cabecera-original_07.gif" WIDTH=483 HEIGHT=87></TD>
<TD>
<IMG SRC="imágenes/espacio.gif" WIDTH=1 HEIGHT=60></TD>
</TR>
<TR>
<TD>
<IMG SRC="imágenes/cabecera-original_08.gif" WIDTH=214 HEIGHT=27></TD> <TD>
<IMG SRC="imágenes/espacio.gif" WIDTH=1 HEIGHT=27></TD>
</TR>
</TABLE>

Fijémonos que está en negrilla la celda y la imagen donde aparece la dirección de la supuesta empresa que ha encargado el proyecto. Esta imagen es la que vamos a sustituir por el texto de la dirección:

<TD width=215 height=16>
<font size=1 face=verdana>C/ Mayor nº 23, 3B - 28230 Madrid</font></TD>
<TD>


Cabe remarcar que hemos aplicado a la celda el mismo ancho y alto de la imagen que iba dentro. Además, el texto lo hemos puesto en una fuente de tamaño pequeño porque si el texto supera el espacio reservado para la tabla se descuadrará el diseño.

Podemos ver el resultado obtenido en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

tupolev

18/10/2004
Me surge una duda: Al hacer eso, ¿el código que crea photoshop es validable con los validadores de la w3c?

RESPUESTA

Yo creo que el código que genera Photoshop es bastante sencillo y limpio. No se si sería validado correctamente por el W3C, pero los navegadores lo interpretan muy bien. Sería cuestión de hacer la prueba con algún validador.

neo

19/10/2004
depende bastante de como sea la web. Si contiene muchos sectores le pone alguna basura, pero eso se puede limpiar, pues al fin y al cabo lo unico k genera es una tabla en html con imagenes en las celdas.

katio

20/10/2004
Aunque Photoshop es una excelente herramienta, considero que Fireworks permite ir màs allà a la hora de trabajar con divisiones, es muchos màs sencilla de usar, permite más efectos (javas) y la compresión de las imágenes es inigualable.

Angel III

21/10/2004
el codigo es super sencillo y solo son tablas las que se crean y se ven en todos los navegadores

Edgar

22/10/2004
Como puedo guardar un solo sector, para una sola img ??
Osea, tengo una img dividida en 4 sectores, pero 1 de esos sectores quiero que cambie de color cuando pase el mouse, entonces debo tener dos imgs para ese sector, si gusrdo todo como HTML se guardan las 4 imgs, y despues como puedo hacer para que se guarde solo 1 y poderla guardar como img5.jpg.. por ejemplo .... fuí claro ???
hay alguna forma de hacer esto ???
Saludos !!!

cIELoK

24/10/2004
Tengo experiencia en el Photoshop y en el Fireworks. A la hora de cortar imagenes me quedo con fireworks. Tiene mas herramientas para este trabajo. Pruebenlo.

Ricardo

03/1/2005
Indudablemente, fireworks, es el mejor en estos casos.

patricia

09/3/2005
Hola, Estoy totalmente de acuerdo con todo lo comentado, pero al crear el html en dreamweaver, cuando lo publico en el servidor, la descarga de las imagenes es por sectores y queda muy mal.Hay alguna forma para que te descargue cada página de golpe y no por sectores? muchas gracias

montse

19/4/2005
tanto photoshop cono fireworks estan muy bien, el porblema me viene a la hora de pasarlo a dreamweaver, es un coñazo se mueve todo a la mas minima

Benti

25/9/2005
Respondo a montse, Dreamweaver es un buen programa para hacer webs, pero si quieres maquetar de forma visual tienes Adobe Golive, es mas intuitivo y en sus ultimas funciones para diseñadores es más rapdio que Dreamwaver, llevo años usandolo y el flujo de trabajo siempre ha sido más rapido que cuando he usado dreamweaver para maquetar.

Por otro lado recortar las imagenes con sectores hacen una carga en aspectos como partes comunes de la web, elemnetos repetidos, hay que combinar varias cosas para tener una obtimizacion con gran calidad visual, CSS, valorar elementos comunes gráficos, y que tipo de formato darle a cada imagen, dependiendo el resultado si gif o jpg.

El caso es ir experimentando a partir de este tutorial, un saludo

David

17/10/2005
Hola,
Sigo los comentarios de arriba, el photoshop a la hora de cortar y exportar como pagina web crea tablas aqui en ningun sitio ya se trabaja con tablas eso pasa a la historia, entonces ya no te sirve de mucho el exportar en phoshop si sirve a la hora de hacer una web pero si vas atrabajar para una empresa o asi eso paso a la historia ahora te piden xhtml y css o sea que las imagenes las puedes cortar pero a la hora de maquetar la web hay que usar css por la sencilla razon que te evitas todo ese rollo de tablas y codigo fuente basura que se crea tanto con photoshop como el dreanweaver yo lo usaba, tb puedes freir un huevo con aceite de coche que lo haras pero con esos nunca sabras realmente programar una web lo hacen todo ellos y demas...

Gustavo

28/10/2005
Soy progrmador, estoy mejorando con las estructuras de la web, queria saber si hay una forma ya sea con photoshop o con image ready para que los textos ya melos tome como textos en html, y no como una imagen.
Les agredeceria que me respondieran, gustavo - Soporte-Soluciones ID
soporte@solucionesid.com.ar

axion

25/11/2005
Hola, alguien puede explica en un paso a paso como modificar el diseño basado en photoshop a dreamweaver marcando los sectores paso a paso,por que estoy desesperado para intentarlo.

Abria alguien que por favor me lo explicara,o me dijera de alguna web que realmente explicara eso? Tambien acepto css y xhtml donde lo expliquen con claridad. Responderme tambien al correo porfi plis.

Muchas gracias.

Saludos

www.elclubdeaxion.tk

Jaume Estrada

01/6/2007
Lo que no logro entender, como inserto el htlm resultante en una celda del front Page 2003, en la que ya tengo parte de una web construida.
Me funcionaria como pag web entera en front page, pero no como parte de una pagina,
En una celda de front page no puedo insertar htlm aunque vaya acompañado de su propia carpeta de imagenes.
Tampoco puedo ir haciendo con tablas un rompecabezas de los slices producidos con Photoshop. Las tablas de front page es imposible hacerlas cuadrar.
No se si me explico lo suficiente.
Quiero usar este método como parte de construccion de una web. La cabecera y la barra de menu ya la tengo hecha (barra de menu con Xara webstyle), y lo que me interesa por este metodo de Photoshop es hacer el resto de la web, pero no se como encajarlo en Front Page 2003.
Muchas gracias si me podeis ayudar

MARK

15/6/2007
Hola buenas, tengo un problema y es que cuando voy a guardar el trabajo para web esta opción se me encuentra deshabilitada y no se que hacer para que se me habilite y poder guardarlo como tal, agradeceria una respuesta lo antes posible.
De antemano gracias y un saludo.

tatozapo

16/11/2007
yo pongo la imagen como fondo dentro de una celda en Dreamwaver y los vinculos se complica hacerlos a menos que sea una galeria de imagenes por ejemplo a las que facilmente le podemos dar vinculo. lo que quiero saber es si puedo crea vinculos con photoshop, pido mucho? jaja estaria soñado eso.

Paulo

14/4/2009
Buen tutorial
Este es un ecxelente tutorial para quienes quien hacer una web mal.

Las tablas ya no se usan, y el código generado por photoshop es pura basura.

Para lo único que sirve photoshop es para dejar fluir la imaginación a la hora de hacer el diseño, después nosotros nos tenemos que encargar de cortar las imágenes para hacer la maquetación a mano en dreamweaver.

Saludos

eugim

15/4/2009
Sobre maquetación con capas
Hola Paulo y los demás que han comentado...

Quería decir que lo que dice Paulo es cierto, este artículo se ha quedado un poco anticuado, porque ahora no se hacen las páginas con tablas, sino con capas y estilos CSS. En la sección de CSS de DesarrolloWeb.com http://www.desarrolloweb.com/css/ tenemos varios artículos interesantes para aprender la maquetación con CSS.

No obstante, espero que sí sea una buena práctica para quien quiere aprender Photoshop y cómo utilizarlo para diseñar páginas web.

Leonardo

05/5/2009
Consulta
Buenas, soy diseñador grafico y estoy empezando a meterme en el desarrollo web. Comence diseñando toda el site en photoshop y luego utilice el metodo que explicas para generar el codigo, luego lo trate con el DW y el resultado fue excelente, el unico problema que tengo es que la mayoria de los navegadores, al interpretar como imagen a todos los componentes de la pagina, me ponen esa barra con 4 botones para guardar/copiar/imprimir la imagen, y la verdad es bastante molesto ya que el sitio esta basado en ellas, asique aparece por todos lados, como puedo evitarlo? saludos y gracias

ayala

09/5/2009
Porque photoshop genera espacio.gif?
siempre cuando trato de generar una pagina web en photoshop, me aparece unas imagenes que se llama espacio.gif. si los elimino se deforma totalmente la estructura de la tabla.

como puedo hacer para que no me genere esas imagenes....?

luisiana

05/9/2009
Diseño de Página Web (Photoshop + Dreamweaver)
Estimados:
Quiero realizarles una consulta que vengo buscando respuesta desde hace mucho tiempo, y nadie me las supo dar.
Yo realizo diseños de páginas web en photoshop y luego los exporto como HTML a dreamweaver (igual como se muestra en este tuto) pero a la hora de previsualizar la web en cualquier navegador, la página se va cargando por partes.....con esto quiero decir, que se van cargando de a una las imagenes que recortamos con la herramienta sector en photoshop, como se puede solucionar para que la página cargue entera, como una web común y corriente, y no estar esperando a que se terminen de cargar todas las imagenes que forman el sitio web?

Espero que me puedan ayudar....

Gracias y saludos!

eugim

03/6/2010
sobre que se cargue en pedazos
Hola Luisiana,
La historia que comentas, que tu página aparece por partes, es porque esta manera de maquetar por pedazos de una imagen una web no es la normal.

Normalmente las páginas se componen de otra manera y se maquetan a mano, con textos e imágenes, y no sólo con imágenes como te lo hace automáticamente Photoshop.

Dependiendo de tu nivel, en Desarrolloweb tenemos muchos materiales para que aprendas a maquetar una web por los procedimientos normales. Busca por ejemplo por "maquetación CSS" en el buscador interno de desarrolloweb. Si te apetece, también te recomiendo la sección de vídeo, para aprender más rápidamente los procesos habituales de creación de webs con HTML o CSS.

joshi

29/6/2010
Hay una manera mas facil!
Es mas facil usar el modo mapa de Dreamweaver en Youtube hay un video que enseña a hacerlo sin nada de codigo...!

Link: http://www.youtube.com/watch?v=3Wm_b_vlU_w

Pablo

08/11/2010
Diferencia entre maquetacion y plantillas
Alguien sabe cual es la diferencia entre las dos cosas? Estoy queriendo hacer un sitio, y me cotizan por las dos cosas, cuando parece fuera lo mismo.
Gracias

cristian

02/4/2011
maquetacion web
claro, tiene razon eugim
las paginas por lo general, ya no se maquetan mas troquelando las imagenes en trozos pequeños, sino que debes realizarlo manualmente con html y css.
hay varios tutoriales por ahi q te pueden ayudar.

yo conozco un blog donde hay muchos articulos sobre maquetacion web, quizas te sirva.
el blog es:
http://www.psdahtmlpasoapaso.com/blog

byebye

Compartir