Diseño de una Página Web con Photoshop

Con este tutorial aprenderemos el diseño de un sitio web en Photoshop.

A continuación podemos ver una demostración de como vendría nuestro sitio web. Comencemos:

como crear un sitio web en photoshop

1º Paso

Crear un nuevo documento con las siguientes dimensiones: 1200x1800px. Abrir el archivo bg , ir a Edición> Definir patrón y hacer clic en Aceptar.  Regresar al nuevo documento, ir a Edición> Rellenar, elegir ‘patrón’ y seleccionar nuestro patrón.

2º Paso

Importar este archivo y colocarlo en la parte superior. Usar la herramienta Rectángulo Redondeado con un radio de 10ps y dibujar un rectángulo. Ajustar el estilo de la capa según la imagen:

como crear un sitio web en photoshop

como crear un sitio web en photoshop

como crear un sitio web en photoshop

Los colores del degradado son #4e0101 y #ad1414. Debería quedar algo como esta imagen:

como crear un sitio web en photoshop

3º Paso

Apretando sin solar la tecla Ctrl hacer clic en la miniatura de la capa. Después hacer clic derecho sobre la selección y elegir “transformar selección”. Transformarla como se muestra acá:

como crear un sitio web en photoshop

En la nueva capa llenar la selección nueva con blanco. Agregar filtro Gaussian Blur con un radio de 25-50. Depende de la luz como se va a ver el menú pero se puede tratar de experimentar con la opacidad y duplicar la capa pocas veces

4º Paso

Con la herramienta de tipografía Horizontal insertar un texto usando la fuente Lucida Fax. Para la capa de texto agregar el estilo siguiente:

Usando la herramienta rectángulo redondeado crear el submenú. Luego añadir el siguiente estilo a la capa:

como crear un sitio web en photoshop

como crear un sitio web en photoshop

Se obtiene algo así:

como crear un sitio web en photoshop

5º Paso

Con la finalidad de hacer el submenú más interesante se va a añadir algunos gradientes oblicuas. Apretar Ctrl y hacer clic en la miniatura de la capa, usando la herramienta degradado se hacen algunas pendientes.

como crear un sitio web en photoshop

como crear un sitio web en photoshop

Pueden borrar los gradientes en los bordes y establecer la opacidad de la capa al 17%

6º Paso

Buscar algunos íconos en la web para añadirlos en algunas posiciones del submenú. Como pueden ver, el título submenú no es visible, así que hay que usar la herramienta de tipo horizontal. En el tutorial hacen un cuadro de búsqueda en la parte derecha del menú, simplemente porque no querían dejar tanto espacio, pero si ustedes tienen un menú muy grande no es necesario.

7º Paso

Con la herramienta rectángulo redondeado hacer la caja y colocarle el siguiente estilo:

(colores del degradado: #0a324c y #0088b5)

como crear un sitio web en photoshop

como crear un sitio web en photoshop

Repetir el paso 5. Las gradientes pueden ser más gruesas

8º Paso

Buscar una imagen, recordarla y colocarla sobre la base del slider. Añadir este estilo:

(color de trazo #072231)

como crear un sitio web en photoshop

Ahora CTRL + Clic en la miniatura de la capa y el usar la herramienta Rectangular Marquee Tool y seleccionar como muestra la imagen.

como crear un sitio web en photoshop

Crear una nueva capa, rellenar la selección con negro y la opacidad cambiarla a un 80-90%; Agregar texto

9º Paso

Con la herramienta lápiz hacer algunos puntos. Añadir este estilo ( color # 072638)

como crear un sitio web en photoshop

como crear un sitio web en photoshop

El punto seleccionado tiene el color #73a7bf y estos estilos adisionales:

como crear un sitio web en photoshop

10º Paso

Con la herramienta rectángulo redondeado crear la caja.

Añadir este estilo (Colores de degradado: #da690e y #e3b410)

como crear un sitio web en photoshop

como crear un sitio web en photoshop

Repetir lo que se hizo en el paso 5 con pendientes. Añadir título (Lucida Fax, 14pt), capa de estilo de texto:

como crear un sitio web en photoshop

Buscar algunas imágenes en la web y agregarlas al igual que en el paso 8.

Loading Facebook Comments ...

Un comentario “Diseño de una Página Web con Photoshop

Deja un comentario

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