Creando una Plantilla Web 2.0 en Photoshop

  1. Abrir un nuevo lienzo en blanco de 800 x 900 pixeles
    plantilla01.jpg
  2. Crear una nueva capa y darle a la parte superior un degradado horizontal de color #4dbce9 a transparente y que quede de la forma siguiente
    plantilla02.jpg
  3. Crear otra nueva capa y hacer una seleccion con la herramiente selección rectangular de tamaño fijo en 750 x 30 pixeles en el centro de la parte superiorplantilla03.jpg
    y luego rellenarla de color negro de forma que quede así
    plantilla04.jpg
  4. Crear una nueva capa, seleccionar un área con la herramienta seleccionar rectángulo de tamaño fijo de 750 x 5 pixeles y ubicarla exactamente debajo del rectángulo negro anterior y rellenarla con el color #444444 para que quede así
    plantilla05.jpg
  5. Crear una nueva capa y seleccionar un área rectangular de tamaño fijo de 750 x 100 pixeles, ubicarla exactamente debajo de los ractángulos anteriores y rellenarla con el color #26ade4
    plantilla06.jpg
  6. A esta última capa aplicar el estilo superposición de degradado
    plantilla07.jpg
    con una gradiente de #26ade4 a #40c1f6
    plantilla08.jpg
  7. Poner con la herramienta de texto el nombre del sitio, esto con color blanco y el tipo de letra adecuados, luego ponerlo como indica la figura siguiente
    plantilla09.jpg
  8. Crear una nueva capa y ubicarla debajo de la capa de texto anterior
    plantilla10.jpg
    con la herramienta seleccionar elipse hacer una selección así
    plantilla11.jpg
  9. Hacer una gradiente de blanco a transparente de abajo hacia arriba como indica la figura
    plantilla12.jpg
  10. Duplicar esta capa y voltearla verticalemnte con: Ediciaón – Transformar – Voltear Horizontal.
  11. Cambiar estas dos últimas capas al modo superponer y luego cambiar su opacidad entre 40 a 60%
    plantilla13.jpg
  12. Crear una nueva y seleccionar un área rectangular fija de 750 x 3 pixeles, colocarlo exactamente debajo del rectángulo azul
    plantilla14.jpg
  13. Crear una nueva capa, seleccionar una sola fila de pixeles con la herramienta seleccionar y la ubicaremos debajo del borde superior del útlimo rectángulo negro
    plantilla15.jpg
  14. Ahora haremos el menu de pestañas y para organizarnos más crearemos una carpeta para estas capas.
    plantilla16.jpg
  15. Crear una nueva capa, seleccionar un rectángulo fijo de 60 x 25 pixeles y ubicarlo como indica la figura
    plantilla17.jpg
    luego vamos a menú Selección – Modificar – Redondear y usamos 3 pixeles de radio con lo que obtendremos un rectángulo de 4 esquinas redondeadeas,
    plantilla18.jpg
    pero necesitamos que solo las dos de abajo estén redondeadas, entonces haremos una selección rectangular fija de 60 x 12 pixeles y la ubicaremos como indica la figura pero manteniendo presionada la tecla Shift.
    plantilla20.jpg
  16. Rellena la selección con una gradiente de #202020 a #444444
    plantilla21.jpg
  17. Duplica y reubica esta capa tantas veces como sea necesario
    plantilla22.jpg
  18. Ahora agregamos texto blanco a cada una de las pestañas que hemos creado. Debemos usar una fuente segura para la web (Arial, Tahoma, Verdana, …)
    plantilla23.jpg
  19. Ahora continuamos con la parte principal, donde irá el contenido. Crearemos una nueva carpeta de capas donde irán las nuevas capas. Creamos una nueva capa en la que seleccionaremos un rectángulo de 750 x 700 pixeles ubicandola debajo exactamente de la cabecera y la rellenaremos con el color #f4f4f4
    plantilla24.jpg
  20. Crear una nueva capa y seleccionar un rectángulo fijo de 530 x 650 pixeles, ubicarlo como en la figura
    plantilla25.jpg
    y redondear lasesquinas con Selección – Modificar – Redondear con un radio de 5 pixeles. Rellenarlo con blanco.
  21. Aplicar el estilo Resplandor Interior
    plantilla26.jpg
    y luego el estilo trazo
    plantilla27.jpg

Continuar en http://www.avivadirectory.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *