Manual de diseño web I parte
A continuacion vamos a hacer el diseño de una plantilla para nuestra web con photoshop cs2.
La finalidad de este manual es de orientaros pero el diseño es cosa de cada uno hacerlo a su gusto o necesidad segun como querais que se vea vuestra web.
Antes de empezar hos voy a dar unos consejos.
Procurar no usar muchos graficos y colores para la plantilla para conseguir que no tenga mucho peso y en consecuencia tarde mas en cargar nuestra pagina.
Podemos dedicarle un mayor peso a la cabecera ya que es la primera imagen que un visitante que entre por primera vez a nuestra web va a
ver por la tanto es la imagen que queremos dar.Y en el resto de imagenes es donde intentaremos hacer un diseño bonito pero no usando
muchos adornos para que sea una pagina bien presentada y no muy pesada.
Dicho esto nos ponemos manos a la obra abriendo nuestro Ps cs2 y abriendo un documento nuevo con las siguientes caracteristicas:
Una vez abierto nuestro documento vamos a poner las guias que nos ayuden a dar forma a nuestra cabecera. Las guias se sacan por si alguien no lo sabe pinchando en las reglas, superior y arrastrando hacia el centro del documento para las guias horizontales y de la misma manera en la regla lateral para las guias verticales.
Una vez colocadas las guias seleccionamos de la barra de herramientas la herramienta lazo poligonal y marcamos la forma de nuestra cabecera de la siguiente forma:
Una vez hecha nuestra seleccion pulsamos en el menu de capas crear capa nueva y aplicamos el color o el degradado que queramos para el borde de la cabecera asegurandonos estar situados dentro de la capa nueva.
Una vez hecho esto nos vamos al menu seleccion-modificar-contraer y le damos el valor del tamaño en pixeles de nuestro borde yo he usado un valor de 10. Pinchamos ok y en nuestro teclado pinchamos suprimir seguidamente creamos una capa nueva y le damos el color o el degradado que queramos para el fondo de nuestra cabecera y nos quedara algo asi:
Hecho esto vamos a combinar las capas 1 y 2 para que se quede una sola. Para esto dejamos visibles solo esas dos capas y en el menu de capas pulsamos la opcion de combinar capas visibles, de esta forma se quedara solo una que llamaremos header.
Una vez hecho esto ya podemos quitar la seleccion que tenemos hecha y vamos a poner el nombre de la web, el logotipo o ambas cosas segun vuestro gusto.
Por internet hay muchos tutoriales de efectos y formas para nuestros textos. yo hos recomiendo esta lista de http://www.photoshop-designs.com que bienen muchos tutoriales clasificados por temas muy interesantes.
Una vez puesto el nombre de la web y el logo vamos a pasar a los cuadros de menus y contenidos.
Aqui es donde vamos a intentar no sobrecargar mucho de imagenes y colores para que luego no tarde mucho en cargar nuestra pagina.
Esta parte va un poco tambien en las necesidades y los gustos de cada uno para el diseño de nuestra web y los diferentes menus que necesitemos.
Nosotros en esta muestra vamos a hacer una plantilla con 3 cuadros de menus, la parte del contenido y el pie de pagina.Cualquier duda o consulta que tengais la podeis hacer en el foro, alli estamos para ayudaros en lo que hos haga falta.