Bien Empecemos, Este tutorial va orientado a personas que tengan unos conocimientos básicos al menos sobre el uso de las herramientas de Photoshop ya que no puedo explicar todo con tanto detalle.
Aquí vemos el diseño de nuestro template:
Materiales para descargar:
- Fuente Utilizada:Bauhaus-93
- Degradados y Formas Utilizados
Crear el Documento de trabajo en Photoshop
Para empezar debemos crear un documento (Ctrl + N) con unas medidas de 1200px x 1200px, 72 píxeles/pulgadas, color de fondo blanco(#ffffff), una vez creado el documento colocaremos las guías verticales para definir una anchura de 800px que será el ancho de la web. Para crear las guías tenemos que ir a vista > Guía Nueva, en el cuadro que aparece seleccionar la opción vertical y colocar 200px para la primera guía.
Para agregar la segunda Guía, repetimos el mismo proceso, vista > guía Nueva, y en el cuadro que aparece seleccionar la opción vertical y colocar 1000px para la segunda guía.
Ahora debería tener dos guías a 200px del borde del documento y con un área central de 800px entre las guías que será el área de trabajo que utilizaremos, todo lo que se creará desde ahora estará en ese espacio.
Crear el fondo de la Web
Para empezar con nuestro fondo crearemos una capa de color uniforme desde el panel de capas, con un color de relleno verde (#6d9110).
Re-nombramos la capa a fondo y conviértela en objeto inteligente (Clic derecho > Convertir a Objeto Inteligente), este paso es opcional, lo hago de esta forma por que le aplicaremos filtros a esta capa y el objeto inteligente me da la opción de poder editar esos filtros posteriormente.
Aplicamos ruido a la capa fondo, para ello vamos a Filtros > Ruido > Añadir ruido, con cantidad: 1%, Distribución: Gaussiano, Monocromático: si y pulsamos Ok.
Ahora crearemos unos rayos de luz para el fondo, para ello seleccionamos la herramienta forma personalizada y seleccionamos la forma que a continuación muestro en la imagen.
Si no tienes la forma la dejaré para descargar entre los materiales del tutorial, para aplicar la forma haces click y con la tecla Shift pulsada para crear un círculo perfecto, cuando lo tengas colócalo en el centro horizontal del documento y el centro vertical del círculo en el borde superior del documento, (tal cual está en la imagen).
Para eliminar los bordes selecciona la capa de la forma personalizada y agrégale una máscara de capa, con la máscara de capa seleccionada configura el blanco como color frontal y el negro color de fondo, selecciona la herramienta degradado radial y debes aplicarlo desde la parte superior del documento hasta el borde final de la forma personalizada.
Cambiamos el color de la forma personalizada a un verde oscuro (#437201). Creamos una nueva capa por encima de la forma personalizada renombrada a Brillo, le aplicaremos un degradado radial con el color blanco como frontal y el degradado que vaya de blanco a transparente y por último reducimos la opacidad de la capa al 40%, aplicarlo desde arriba hacia abajo y quedará un resultado como en la siguiente imagen.
Con esto ya tenemos el fondo terminado, para tener todo organizado puedes agrupar esas tres capas en una carpeta y llamarla fondo o como quieras, de esta forma iremos agrupando cada parte de la web que creemos.
Menú de navegación principal
Antes de empezar con el menú crearemos un borde de 5px en la parte superior del documento, para ello seleccione el color verde(#264602) como color frontal, selecciones la herramienta Rectángulo cree una línea de 5px de alto y a todo el ancho del documento, como en la imagen siguiente:
Agregamos una nueva guía horizontal a 100px del borde superior del documento, seleccionamos la herramienta Rectángulo redondeado con un radio de 10px, realizamos el rectángulo entre las dos líneas verticales de 800px y la que acabamos de crear de 100px, el rectángulo debe sobre salir del documento por la parte de arriba para que no se visualicen las esquinas superiores y la capa debe estar por debajo del borde superior que creamos anteriormente.
A esta barra de navegación agregaremos los siguiente estilos de capa, recuerde que en los materiales que he dejado para descargar están los degradados ya listo, si quiere puedes cargarlos.
Seleccione la herramienta texto, configure el tipo de letra en Bauhaus 93, con un color verde(#658b15), si no la tienes instalada puedes descargarla es gratuita y escribe las secciones que quieras agregar en tu web, nosotros utilizamos :
