Facebook Twitter RSS Reset

Crear un diseño web para vos lince (PS)

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

Creamos un documento nuevo en photoshop con unas medidas de 960×800 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.



Crear un diseño web para vos lince (PS)

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í:

Crear un diseño web para vos lince (PS)

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í:

Crear un diseño web para vos lince (PS)

Crear un diseño web para vos lince (PS)

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í:

Crear un diseño web para vos lince (PS)

Crear un diseño web para vos lince (PS)

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.

Crear un diseño web para vos lince (PS)

Este sería el resultado final:

Crear un diseño web para vos lince (PS)

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…

Crear un diseño web para vos lince (PS)

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

Crear un diseño web para vos lince (PS)

Crear un diseño web para vos lince (PS)

Crear un diseño web para vos lince (PS)

Crear un diseño web para vos lince (PS)

Una vez aplicados deberíamos tener algo así:

Crear un diseño web para vos lince (PS)


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:

Crear un diseño web para vos lince (PS)

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

Crear un diseño web para vos lince (PS)

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

Crear un diseño web para vos lince (PS)

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

Crear un diseño web para vos lince (PS)

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.

Crear un diseño web para vos lince (PS)

Ahora aplicaremos los distintos estilos de capa:

Crear un diseño web para vos lince (PS)

Crear un diseño web para vos lince (PS)

Crear un diseño web para vos lince (PS)

Nos quedaría algo así:



Crear un diseño web para vos lince (PS)

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.

Crear un diseño web para vos lince (PS)

Crear un diseño web para vos lince (PS)

Crear un diseño web para vos lince (PS)

Crear un diseño web para vos lince (PS)

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

Crear un diseño web para vos lince (PS)

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:

Crear un diseño web para vos lince (PS)

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:

Crear un diseño web para vos lince (PS)

Crear un diseño web para vos lince (PS)

Crear un diseño web para vos lince (PS)

El resultado sería este:

Crear un diseño web para vos lince (PS)

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:

Crear un diseño web para vos lince (PS)

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

Crear un diseño web para vos lince (PS)

Fin del post!

No comments yet.

Leave a Comment