2. Crear un documento nuevo en Photoshop con la 1050px x 1200px dimensiones

3. Ahora, vamos a crear el fondo. Seleccione la herramienta Degradado (G). Asegúrese de que está establecido en degradado lineal. Ajuste el color frontal a # a1e8fe y color de fondo a 59d3fa # y crear un degradado

4. En una nueva capa, crear una cuadrícula de ancho 960px - 12 barras, cada barra de 60px de ancho. Coloque cada 20px bar alejados unos de otros. Coloque la rejilla en el centro del documento. Las rejillas deben servir como guía y se recomienda que los principales elementos de su diseño no sobrepase la anchura de la cuadrícula. El Sistema 960 Grid es un esfuerzo para racionalizar el flujo de trabajo de desarrollo Web, proporcionando las dimensiones de uso común, basado en un ancho de 960 píxeles

5. Cree un rectángulo redondeado 300px de ancho. Crear un segundo rectángulo redondeado 620px de ancho, que se debe colocar en la parrilla de la siguiente manera:

6. Aplicar estos ajustes de estilo de capa a cada rectángulo redondeado:

7. Inputing el logotipo y el texto de navegación Para crear los elementos de navegación, use la herramienta Texto (T).. En este caso, he utilizado la fuente Rockwell .. Agregue los elementos de navegación para el segundo rectángulo y el logotipo de la empresa (logotipo actual que se utiliza es sólo un nombre ficticio para una agencia de diseño) a la primera

8. Hacer separadores para los elementos de navegación En una nueva capa, vamos a agregar un separador entre cada elemento de navegación

9. Crear el sitio de cabecera Ahora vamos a crear la cabecera debajo del logotipo y la navegación. Uso de la herramienta Texto (T), añada la coletilla empresa y una breve introducción por debajo de ella

10. Crear un botón redondo A continuación la breve introducción, con el uso de la herramienta Rectángulo redondeado con un radio 28px, crear un botón que dice "Más" Aprender. Esto es muy útil para que, si los usuarios quieren saber más sobre su compañía, esta información es fácilmente accesible

11. Creación de un cuadro llamado a la acción Uso de la herramienta Rectángulo redondeado una vez más con 16px radio, cree un rectángulo de 300px. Ir a Opciones de fusión y añadir una sombra paralela con los mismos valores que el paso 6

12. Elaboración de un botón de llamada a la acción Este cuadro servirá a la acción botón de llamada. Estos son útiles si desea que los usuarios a encontrar información importante en su sitio todas de un vistazo Vamos a agregar una partida, descripción de algunos, y un icono para nuestros botones. Iconos, tan pequeños que puedan parecer, ayudar a traer más atractivo a sus diseños. También ayudar a los usuarios el rápido encontrar lo que busca ya que los iconos comunicar mensajes a los usuarios sin que tengan que leer sus textos que los acompañan.

13. Por último, pero no menos importante ... el pie de página Creamos el pie de página donde podemos agregar los derechos de autor y la información de contacto de la web

14. La guinda del pastel: la creación de las líneas diagonales Crear un nuevo documento en Photoshop con el 25px 25px x dimensiones y llenar todo el documento con un negro (# 000000) de fondo

15. Ahora vamos a volver a la maqueta que acabamos de crear. Crear una nueva capa por encima del fondo degradado. Vaya a Edición> Rellenar y en el menú desplegable de contenidos, el uso de patrones. Haga clic en Motivo personalizado y buscar el modelo que acabamos de crear llamado "diagonales" y pulsa Aceptar. Usted debe ver algo como esto:

16. Establezca esta capa de mezcla a modo de superposición y su opacidad al 4%

17. De abajo a arriba y usando una pluma ordinaria goma de borrar, borrar de un 60% de las líneas diagonales para que se vea así:

18. Ahora tenemos una muy limpia, bonita, Diseño Web 2.0 estilo del sitio web. Manténgase sintonizado para el seguimiento tutorial donde Jacob le mostrará cómo convertir este diseño en un trabajo (X) HTML plantilla!

19. La Web "Limpieza 2,0 Diseño Web Estilo" de la serie Este artículo es parte de una serie de dos partes, que le muestra cómo crear un diseño en Photoshop, a continuación, cómo código en un válido (X) HTML de diseño web

20. Ricciardi Borrelli Soldevila