Tutorial para diseñar una plantilla web sencilla en photoshop

shutdownDiseño Web, Tutoriales 5 Comentarios

En este tutorial aprenderemos a realizar el diseño de la plantilla Web en PSD que os compartimos días atrás. Se trataba de una plantilla sencilla y con un diseño muy actual.

El tutorial es corto y aproximadamente de 30 / 40 minutos de duración y se ha realizado en photoshop CS3.

Parte 1 – Preparar el documento en photoshop:

Como siempre lo primero y esencial es preparar el documento para empezar a trabajar sobre él. Para ello creamos un documento nuevo con las medidas 860×1024 píxeles y colocamos las guías en los bordes superiores y laterales:

A continuación vamos identificando las partes del diseño.

Parte 2 – Identificar las partes de las que constará el diseño Web:

Una vez tenemos el documento completamente preparado para diseñas nuestra plantilla Web en photohop, necesitamos identificar las distintas partes de nuestro diseño usando las guías.

Una vez tenemos claro las medidas de todas las partes pasamos a trabajar detalladamente en cada una de ellas.

Parte 3 – Cabecera o header:

La cabecera o header de nuestro diseño Web en photoshop es muy sencillo ya que solo colocaremos el logotipo de la página con algunos detalles más.

Como veis vamos a crear una barra superior en nuestra cabecera de color azul y otro mucho más pequeño sobre esta de color negro:

Tras colocar el logotipo y nuestra barra sobre el fondo blanco pasaremos a diseñar la barra de navegación de nuestro diseño Web en photoshop.

Parte 4 – Barra de navegación:

Para colocar la barra de navegación de nuestro diseño Web nos ayudaremos de las guías en photoshop:

Como veis lo unico que pondremos serán los textos de los distintos apartados en los que estarán dividida nuestra plantilla Web en photoshop:

Una vez colocados todos, pasamos a diseñar la parte más llamativa de la Web:

Parte 5 – Banner o galería de fotos:

Lo primero para diseñar la galería de fotos de la Web es crearle un fondo negro que abarque casi toda la forma:

Una vez creado el fondo pasamos a la estructura básica de la galería de fotos pero haciendo que esta quede un poco más abajo del fondo negro, haciendo que sobresalga:

Para crear el cuerpo principal nos ayudamos de la herramienta de forma personalizada y elegimos la forma de rectángulo redondeado aplicándole 15px de radio y los siguientes efectos de capa (#004caa):

A continuación solo tenemos que crear las formas para pasar a la siguiente diapositiva (lo mejor son unas flechas) y aplicarle los efectos de capa siguientes:

El último paso es buscar una fotografía o diapositiva que queramos poner a dicha Web cuando la maquetemos y colocarla de tal forma que simule que ya está finalizada para poder ver el resultado final del banner en nuestra plantilla Web en photoshop:

Ahora pasamos al diseño y relleno del cuerpo de la plantilla Web en photoshop.

Parte 6 – Cuerpo de la Web:

El cuerpo de la Web estará formado por 3 banner medianos y los textos debajo de ellos, además de ampliar la información sobre nuestra entidad más abajo:

Lo primero será colocar los banner y encuadrarlos mediante las guías de photoshop:

Ahora le aplicamos estos estilos de capa a los banner:

Una vez aplicados quedarían así:

A continuación colocaremos los textos (en este caso usaremos Lorem Ipsum) para rellenar:

Tras todo esto crearemos un separador para el cuerpo:

Tras el separador rellenamos con más texto el cuerpo quedando el diseño del mismo y de la plantilla Web en photoshop casi terminado

Despues insertamos unas fotografías ficticias para ver el resultado final:

Ahora pasamos al footer:

Parte 7 – Footer:

En el footer pondremos un color más llamativo ya que es algo que está demostrado ve todo el visitante de una web. Usaremos el azul que usamos en la cabecera:

Una vez más debemos tener claro lo que queremos añadir a este apartado del diseño web en photoshop. En nuestro caso vamos a poner un formulario de contacto y las últimas actualizaciones de nuestro blog. Eso si, siempre en photoshop:

Para crear el formulario usaremos la herramienta de forma rectangular y aplicaremos los siguientes estilos de capa:

Tras todo esto pasamos al apartado donde colocaremos las distintas redes sociales donde nos podrán seguir aquellos usuarios interesados:

Mediante la herramienta de rectángulo redondeado y ajustando la forma con un sesgado conseguimos:

Ahora colocaremos el texto y los distintos iconos y nos quedaría:

Ya tendríamos nuestra plantilla totalmente diseñada:

Parte 9 – Reflexiones finales:

Como último paso y para que se presente el diseño de mejor forma ajustaremos el tamaño del lienzo a unas medidas mas grandes lo cual nos creará unos bordes a todos los lados:

Ya sabéis que si alguno de vosotros estáis interesados en maquetar esta plantilla, enviarme un email con más información y se os realizará dicho trabajo.

Descargar : Plantilla web sencilla en photoshop CS3

Un saludo a todo!!

Enlaces Relacionados: