Crear un diseño web moderno en Photoshop 11

En esta serie de tutoriales vamos a diseñar un sitio web completo en Photoshop.  Lo primero que necesitamos es un sistema de red que nos ayudará aún más cuando tenemos que codificar este diseño. 

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:

Crear un diseño web moderno en Photoshop 1

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 …

Crear un diseño web moderno en Photoshop 2

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:

Crear un diseño web moderno en Photoshop 3

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:

Crear un diseño web moderno en Photoshop 4

Y esto dropshadow en ella:

Crear un diseño web moderno en Photoshop 5

Coloque su logotipo y elementos de menú en la cabecera.

Crear un diseño web moderno en Photoshop 6

Coloque una regla a 700px de alto y colocar una imagen para rellenar esa altura.

Crear un diseño web moderno en Photoshop 7

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

Crear un diseño web moderno en Photoshop 8

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

Crear un diseño web moderno en Photoshop 9

Ahora dibuja un rectángulo completo con insertar algunos servicios destacados allí. Rellenar con # ebeaea

Crear un diseño web moderno en Photoshop 11

Mostrando su trabajo en la página web que realmente puede ayudar a sus visitantes a permanecer enfocado.

Crear un diseño web moderno en Photoshop 12

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:

Crear un diseño web moderno en Photoshop 13

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:

Crear un diseño web moderno en Photoshop 14

Construir los campos e inserte un botón como éste:

Crear un diseño web moderno en Photoshop 15

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:

Crear un diseño web moderno en Photoshop 16

Vamos a poner algunos enlaces útiles sobre cuatro columnas:

Crear un diseño web moderno en Photoshop 17

Casi hemos terminado aquí. 
En el fondo, vamos a colocar el material de derechos de autor y los iconos sociales:

Crear un diseño web moderno en Photoshop 18

Este es nuestro resultado final:

Crear un diseño web moderno en Photoshop 19

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.

Anuncios