El sistema de red que estoy usando en este tutorial se llama GuideGuide y se puede encontrar en http://guideguide.me – I’ts una extensión Photoshop que es le da la posibilidad de construir su propia red.
Ahora entremos Photoshop:
Crear un nuevo documento en Adobe Photoshop con este tamaño:
1150px será la anchura de su contenido.
Ahora abre tu GuideGuide en Ventanas / extensiones y seleccione el número de columnas que desea … En esta web voy a trabajar con 4 columnas y canalones 30px.
No te olvides de hacer clic en el botón GG para generar el rejilla …
Ahora cambiar el tamaño del lienzo al ancho 1920px porque queremos diseñar un encabezado ancho y slider. Ahora usted debe tener algo como esto:
Para mantener las capas organizadas vamos a crear un nuevo grupo (encabezado) y una nueva capa (encabezado Bg) dentro.Coloque una regla para dibujar un rectángulo con una altura de 100px, el 100% de ancho y rellenar con el color # 353535:
Y esto dropshadow en ella:
Coloque su logotipo y elementos de menú en la cabecera.
Coloque una regla a 700px de alto y colocar una imagen para rellenar esa altura.
Ahora vamos a crear el texto de la diapositiva y el fondo correspondiente.
El fondo será de # 000000 con 35% de opacidad y el texto en # FFFFFF
La última cosa en slider es el diseño de las flechas:
Dibujar una herramienta Rectángulo redondeado con un radio de 3px y el color del encabezado.
Elija una flecha con la herramienta de forma personalizada con el color # FFF
Ahora dibuja un rectángulo completo con insertar algunos servicios destacados allí. Rellenar con # ebeaea
Mostrando su trabajo en la página web que realmente puede ayudar a sus visitantes a permanecer enfocado.
Como se puede ver nuestro lienzo necesita tener cierta altura extra para hacer clic en la imagen / tamaño del lienzo y dar estas instrucciones:
Vamos a insertar Newsletter Inscríbete en la página principal, dibuje un rectángulo y darle un borde de 1 píxel con este color:
Construir los campos e inserte un botón como éste:
Ok, el contenido está listo, el siguiente paso es el pie de página. Dibuja dos rectángulos para el fondo de pie de página:
Vamos a poner algunos enlaces útiles sobre cuatro columnas:
Casi hemos terminado aquí.
En el fondo, vamos a colocar el material de derechos de autor y los iconos sociales:
Este es nuestro resultado final:
El resultado es un diseño estructurado y limpio que puede utilizar para su próximo proyecto.
¿Te ha gustado este tutorial? Por favor, compartir en redes sociales.
Manténgase en contacto durante los próximos tutoriales de diseño.
Adesign Perú 