Cómo crear un diseño web en Photoshop

Crearemos el diseño web de una plantilla subida anteriormente sobre un portafolio de fotografía en Adobe Photoshop CS3. Haciendo un resumen de los distintos pasos para llevar a cabo el diseño.

Paso 1 – Creación y configuración del documento en photoshop

Creamos un documento nuevo en photoshop con unas medidas de 960x800 píxeles. Una vez creado añadimos a los bordes del documento unas guías para delimitar el borde del diseño de la plantilla y ampliamos las medidas del documento mediante Ajustes > Tamaño del lienzo.

Paso 2 – Creación del fondo de la plantilla web

Algo fundamental para que el diseño de un sitio sea atractivo es crear un fondo llamativo y para ello existen varias técnicas como la que vamos a usar ahora.

Primero rellenamos una capa del documento con franjas de color gris claro con un fondo gris oscuro, quedándonos al terminar algo así:


Tras esto en una capa superior usaremos la herramienta degradado con varios colores llamativos y ajustaremos dicha capa superior (en ajustes de capa) como “multiplicar”, quedándonos algo así:


A continuación usaremos una textura de calidad y la misma técnica para conseguir un fondo espectacular para una web. Ya sabéis, aplicamos la textura en una capa superior y ajustamos la capa como “multiplicar”. Nos debería quedar algo así:


Ahora para darle más detalle con la herramienta pincel iremos sombreando los bordes de la plantilla web en photoshop. Ajustamos el valor del pincel y lo vamos aplicando por los bordes hasta conseguir algo así… también en útil ajustar la opacidad del pincel o de la capa donde lo estamos aplicando.


Este sería el resultado final:

Paso 3 – Creación del menú principal

Esta web es de fotografía así que necesitaremos un menú principal para mostrar los mejores trabajos, etc.

Para empezar crearemos con la herramienta de forma > rectángulo un rectángulo de color negro sobre la parte media de la plantilla como podéis ver…


Tras esto nos vamos a los ajustes de capa y aplicamos estos valores:


Una vez aplicados deberíamos tener algo así:


Tras todo esto debemos crear las formas donde irán las distintas fotografías y para conseguir un poco más de realismo hemos aplicado un poco de sombreado justo debajo de donde irán dichas formas:


Ahora con la herramienta rectángulo vamos añadiendo las distintas formas de color blanco sobre las cuales irán las distintas fotografías:


Cuando las tengamos todas nos quedaría algo así:


Ahora añadimos las fotografías para que veáis el resultado final del menú principal:

Paso 4 – Barra de navegación

Para crear la barra de navegación de la plantilla web utilizaremos la herramienta de rectángulo redondeado con una configuración de radio de unos 6 píxeles y en un tono gris medio.


Ahora aplicaremos los distintos estilos de capa:


Nos quedaría algo así:


Tras esto añadimos las distintas secciones del sitio web en un tono rosa medio y a los cuales le aplicaremos estos estilos de capa.


Tras añadirlos todos y aplicarle a todas las capas los estilos, el resultado será este:

Paso 5 – Interfaz baja con la información

Ya tenemos el menú principal y la barra de navegación, así que nos queda únicamente diseñar una interfaz con más información sobre el trabajo que realizamos, como lo hacemos, etc…

Para colocar esa información hemos elegido una interfaz básica debajo del menú principal que haremos de la siguiente forma:


Con la herramienta de rectángulo redondeado diseñamos una interfaz en color negro a la que aplicamos estos valores en los estilos de capa:


El resultado sería este:

Paso 6 – Finalización con los detalles de la plantilla

Ya tenemos lo más importante así que solamente nos quedan los pequeños detalles como el logotipo que queráis ponerle al sitio o rellenar con información los apartados correspondientes.

Como veréis este es el logotipo que he diseñado para la plantilla:


Y aquí podéis ver la información correspondiente (generada claro):

Conclusiones:

Con esta plantilla quiero que aprendáis que aunque tengamos un planteamiento de una plantilla sencilla, currándonos un buen diseño de fondo podemos conseguir un diseño bastante atractivo y llamativo para el usuario…así que ya sabéis, nunca subestiméis el fondo de vuestra web.

En mi blog suelo publicar tutoriales de este estilo, así como multitud de plantillas para que os las descarguéis gratis: www.recursospsd.com.

Espero toooodos vuestros comentarios, además de consejos u opiniones sobre el tutorial o si necesitais alguna plantilla personalizada para vuestro sitio y os puedo ayudar, también estaría dispuesto!!!

Un saludo a todos los lectores de Cristalab!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.