Tutorial para crear una plantilla web de fotografía en photoshop
Diseño Web, Tutoriales No hay comentarios, deja el tuyo!
En este tutorial repasaremos la creación del diseño de la plantilla subida anteriormente sobre un portafolio de fotografía, haciendo un resumen de los distintos pasos para llevar a cabo el diseño.
Programa: Adobe PhotoShop Cs3.
Duración: 1 hora.
Dificultad:Media.
Características: Portafolio de fotografía.
Descargas: Plantilla PSD, texturas utilizadas y tipografías.
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.
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.
Descargar gratis || Plantilla web de fotografía.
