Videotutorial como diseñar paginas web con Photoshop

Este es el primer video tutorial que grabo y publico en mi pagina web.

No olvides votar por el video en youtube

La idea era mostrar como se hace el diseño (layout) del sitio antes de proceder a maquetarlo, en un futuro tutorial publicaré el
proceso de convertir este diseño en XHTML y CSS.

Primero voy a resumir el video:

El primer paso es crear un nuevo archivo en Photoshop, el ancho depende de nuestro diseño, vamos a ver algunas pautas para ello

Lineas Guia

Para hacer nuestro diseño es necesario definir un ancho que sea compatible con la mayoría de monitores, lo cual suele ser 1024 x 768px sin embargo hay varios pixeles que ya son ocupados por el propio navegador asi que como tamaño máximo no debemos usar mas de 1000px de ancho, si además desea poner un fondo visible lo mejor sería no exceder del 960px. Con Photoshop procedemos a poner estas primeras guias que fijaran el ancho del sitio.

Estructura de las Capas

Es imporatnte ser ordenados al momento de diseñar, eso ayudará mucho al programador o a nosotros mismos nos ayudará a hacer cambios posteriores por lo que sugiero crear una carpeta por cada sector: encabezado, menu, contenido,… y dentro de estas otras carpetas por ejemplo dentro de encabezado iria logo, slogan…..

Videotutorial Photoshop

Descarga el layout photoshop

Puedes bajar el archivo photoshop creado en el video desde AQUI