Inicio > Maquetación desde imagen, con Photoshop

Para maquetar una web mediante una TABLA DE IMÁGENES, el primer paso será obtener la imagen que nos va a servir como diseño (plantilla). Esta imagen la podemos hacer con Photoshop o descargarla de sitios webs especializados, como los siguientes:

• gratis
  • Notas:
    • Podeís buscar vosotros en google poniendo free psd templates o free photoshop templates (psd es la extensión de los ficheros photoshop)
    • Algunas son gratis pero estan protegidas por la licencia Creative Commons que basicamente implica que debemos poner en nuestra web una referencia a quien la creó.
  • http://www.free-psd.com/
  • http://www.e-webtemplates.com/
• de pago
  • http://www.templateworld.com/all_photoshop_templates_1.html
  • http://www.templatehelp.com
    • Hay un manual interesante en http://info.template-help.com/es/general-tutorials/work-with-photoshop/
  • http://www.4templates.com/
  • http://templates.sarkis-design.com
  • La que yo gastaba anteriormente, cuando tenía que hacer diseños a empresas
    • http://www.designload.net/

El siguiente paso será dividir esa plantilla en sectores, es decir, convertirla en una tabla, con colspan=0 y cellspacing=0, en que las celdas contendrán imágenes. Estas imágenes, en gif, png o jpg, serán las responsables de que la tabla tenga la misma apariencia que la imagen PSD (formato de Photoshop).

NOTA: acordaros de configurar Photoshop para que automaticamente seleccione la capa

PASO 1) Para manejarnos con Photoshop vamos a seguir el siguiente curso online Photoshop-cs4 de AULACLICK que al final de cada capítulo tiene prácticas y autoevaluaciones

• Página del curso   
• Imágenes necesarias para el curso
• Página del login            Usuario: dai2010       Contraseña: dai2010      

PASO 2) Completaremos con más teoría y prácticas que considero interesantes

Ajustes de imagen

Reemplazar colores (pej, para cambiar el color de un botón cuando esté seleccionado)

Formatos gráficos, girar, recortar, tratar de brillo y contraste y guardar en jpg, gif, png

• Comparativa texto

  gif	jpg	png
  2kb	2kb	2kb

• Comparativa imágenes reales

  gif	jpg	png	bmp
  1190kB	344kB	2870KB	5973kB

Crear fondo degradado para la web con Photoshop

• Degradado horizontal
  • Creas una imagen de 1100 de ancho por 1 pixel de alto, y la rellenas con un degradado . Lo guardas como JPG porque soporta color verdadero. Luego en el Dreamweaver le dices que se repita solo por la Y
• Degradado vertical
  • Creas una imagen de 1100 de alto por 1 pixel de ancho, y la rellenas con un degradado . Lo guardas como JPG porque soporta color verdadero. Luego en el Dreamweaver le dices que se repita solo por la X

Hacer un gif animado con PhotoShop

PASO 3) Aprender a sectorizar a base de ejercicios para

PASO 4) Adaptar una plantilla PSD a vuestro proyecto

--- Dudas que podéis tener ---

  Si todas las celdas de la tabla son imágenes,

1. ¿como pongo los enlaces?
   1. Solución: convierte la imagen en enlace, deberás ponerle el borde de la imagen a 0
2. ¿como pongo los texto fijos, es decir, los que no van a cambiar de página en página?
   • Como quieras, pueden ser una de estas dos cosas:
     1. Una celda que contiene una imagen cono ese texto
     2. Una celda que contiene texto con el color de fondo deseado, (si el fondo es un color sólido), o una imagen de fondo (si es que el fondo no es un color sólido)
        • Problema que puedes tener: si las celdas de arriba o abajo de esta, no contienen una imagen, entonces al quitar la imagen que llenaba, ocupaba esta celda, es posible que la celda no ocupe lo que deba y se descuadre la tabla, y el resultado final no se parezca en nada al esperado
3. ¿como pongo los texto que cambian?
   • Bueno, se trata de poner el color de fondo deseado (o imagen de fondo deseada), en la celda donde deseamos cambiar el texto cuando queramos.
4. ¿como puedo hacer que una celda que ha de contener texto, crezca cuando hay mucho texto en esta celda?
   1. Para las celdas que ves que te crecen al crecer el texto (esa y sus vecinas)
      1. si tienen texto --> Tendrás que quitar la imagen que contenían y ponerla de fondo de la celda,
      2. si no tienen --> Tendrás que dejar la imagen que contenían y además ponerla de fondo de la celda (esta es la que se repite)
   2. Trucos
      1. Haz el menor número de sectores con el objetivo de que la tabla resultante sea lo más sencilla posible, y que horizontalmente hayan líneas que cruzan todas las columna

-- Tareas --

1. Personalizar y sectorizar la siguiente plantilla de imagen, hacer el arriba.inc y abajo.inc y hacer varias páginas web que gasten esta plantilla
2. Hacer que esa plantilla se adapte al contenido, es decir, que pueda crecer hacia abajo cuando hay bastante texto a mostrar
3. Elegir de la web una plantilla de imagen gratuita, sectorizarla, hacer el arriba.inc y abajo.inc y hacer varias páginas web que gasten esta plantilla

-- Documentación - Manuales --

Maquetar o sectorizar una página web con sectores
Ayuda de Photoshop sobre sectores