Dise?o web en photoshop paso a paso

En este tutorial quiero enseñaros como crear un layout con photoshop limpio y elegante.

El diseño original fue creado por kuntiz de ThemeForest y el tutorial por Tutorial9. Yo solo lo he traducido ya que me parecia muy interesante para inspirarnos y enseñarnos a utilizar photoshop para diseñar nuestra propia web, asique los créditos son todo suyos.

Materiales que Necesitamos:

 * hojas
 * pixelated blue rectangle

Paso 1: Crear un nuevo documento


Creamos un nuevo documento (Ctrl+N) en Photoshop, el tamaño que escogeremos será 1200px por 750px. Entonces seleccionamos la herramienta de Gradiente (G) y la utilizamos, desde la parte de arriba del documento hasta abajo, los colores en este caso son desde #792700 hasta #000000.

Paso 2: Añadir algunos colores de fondo


Crea una nueva capa, selecciona el Pincel (B) selecciona un pincel suave con un diámetro de 300px y añade algunos colores. En este caso usamos rojo, naranja y azul. Cambia el nombre de la capa y llámala ?color

Paso 3: Añadiendo una textura al fondo.


Ahora vamos a crear una textura para nuestro fondo. Abre en Photoshop la imagen de las hojas que descargaste al principio del tutorial y pégalo dentro de nuestro documento. Clic derecho en la capa, y seleccionamos Convert to Smart Objet (Objeto inteligente).

Vamos Filter>Pixelate>Mosaic, y usa los settings de las siguientes imágenes. Cambia el modo de la capa a Difference, opacidad a 30% y llámala ?texture?.

Paso 4: Creando un fondo oscuro para el contenido



Crea una nueva capa, selecciona la herramienta de rectángulo con los bordes redondos (U) y ajusta el Radio a 3px, crea un rectángulo negro. Haz doble clic en la capa y abre la ventana de estilo y usa Drop Shadow con la opacidad en 70%. Cambia el nombre de capa a ?black shape?.
Paso 5: Usa grupos para organizar tus capas


Presiona la tecla Ctrl y selección todas las capas que hemos creado y ponlas dentro del grupo ?backgrounds?.
Paso 6: Crea más grupos.


Crea un nuevo grupo (Layer > New > Group) y llámalo ?home.? Crea un nuevo grupo dentro y llámalo ?logo.?
Paso 7: Añade un grupo y Tag line


Crea una nueva capa dentro del grupo ?logo?. El siguiente paso es seleccionar la herramienta de Escritura (Type (T)) y escribe el nombre de tu pagina usando el color #f4f4f4.

Haz doble clic en la capa y abre la ventana de estilos y usa las settings de las siguientes imágenes. Crea una nueva capa y escribe un tagline con el color #eeeeee

Paso 8: Botones de ?Sign up? y ?login?


Ahora vamos a crear dos bonotes en la esquina superior derecha del diseño. Crea otro grupo llamado ?Sign up | Login.? Entonces selecciona la Herramienta de Rectángulo (U) y crea uno más o menos como en la imagen. Otra vez doble clic en la capa para abrir la ventana de estilo y usamos la siguiente configuración. Selecciona la Herramienta de Escritura (T) con el color blanco, y escribe las palabras ?Sign up | Login?. Ajusta la opacidad de la capa a 75%.

Paso 9: Crea una línea azul de 1px de alto


Crea un nuevo grupo llamado ?Navigation?. Crea una capa, selecciona Single Row Marquee Tool y haz un clic en el documento para crear una selección con la altura de 1px y rellena la selección con el color #406f94 y elimina todo lo que quede fuera del rectángulo negro. Pon la opacidad de la capa en 40% y llámala ?Line?

Paso 10: Añadiendo gradientes a la barra de navegación


Nueva capa, Rectangular Marquee Tool (M) y creamos una selección como la de la imagen (puedes usar guías para ayudarte). Selecciona la herramienta de gradiente (G) y dibuja uno desde el color #35423e hasta el transparente, desde la parte de abajo hasta la de arriba de la selección. Presiona Ctrl+D para deseleccionar. Ve a Filter > Noise > Add Noise y usa la configuración de la imagen. Llama a la capa ?gradient? y deja una distancia de 1px entre la línea y el gradiente.

Paso 11: Escribe los nombres de las secciones de tu theme


Selecciona la Type Tool (T) y escribe los nombres de las secciones de tu página en la barra de navegación. Haz doble clic en la capa de texto y en la ventana de estilos usa las opciones de la imagen. La fuente usada en esta ocasión se llama Greyscale Basic.

Paso 12: Creando un separador


Ahora vamos a crear un separador. Crea una nueva capa, selecciona la Herramienta de selección de una columna de 1px y haz clic una vez en tu layout. Selecciona la opción de ?Intersect with selection? y rea una selección como la de la imagen. Rellena la seleccion con blanco y presiona Ctrl+D para deseleccionar.

Paso 13


Doble clic en la capa en la capa anterior, y usa la configuración de la imagen. Cambia el nombre de la capa a ?line 1?.

Paso 14:


Duplica la capa ?line 1? y llámala ?line 2?. Selecciona la herramienta Move (V) y con la flecha del teclado muévelo a la derecha 1 pixel. Abre la ventana de estilo y cambiamos las settings como se muestra en la imagen.

Paso 15: Convierte las capas ?line 1? y ?line 2? en objetos inteligentes



Presiona la tecla Ctrl y selecciona las capas ?line 1? y ?line 2?. Haz clic derecho en una y selecciona Convert to Smart Object. Nombra la capa como ?separator?.

Paso 16: Crea un highlight azul


Crea una nueva capa debajo de ?separator?. Selecciona Rectangular Marquee Tool (M), crea una selección como la de la imagen y llénala con el color #35423e. Clic derecho en la capa y convertimos en objeto inteligente. Ve a Filter > Blur > Gaussian Blur y pon los valores de la imagen. Entonces vamos a to Filter > Noise > Add Noise y otra vez mas ponemos los mismos valores de la imagen. Ajustamos la opacidad de la capa a 60% y le cambiamos el nombre a ?highlight?.

Paso 17: Crea una máscara para la capa ?separator?


Selecciona la capa ?separator? y usa Layer > Layer Mask > Reveal All. Selecciona la herramienta de Gradiente (G) y dibuja uno desde el color negro hasta el transparente desde arriba hacia abajo del separador.

Paso 18: Duplicando el separador


Mantén presionado Ctrl y haz clic en las capas ?separator? y ?highlight? para seleccionarlas. Cambia a la herramienta Move (V), presiona Alt+Shift, clickea sobre el documento y arrastra para duplicar las capas de los separadores, tantas veces como necesites.

Paso 19: Mete los separadores en un grupo.


Selecciona todas las capas ?separator? y ?highlight? y presiona Ctrl+G para agruparlos todos. Llama al grupo como ?separators.?`

Paso 20: Crea un botón para las páginas activas


Ahora vamos a crear un fondo para la pestaña active del menú de la pagina, para diferenciarlo de otros. Selecciona la Herramienta del rectángulo (U) y crea uno como en la imagen. Pon la capa debajo de la que tenemos creada con los nombres de las páginas. Haz doble clic en la capa para modificar el estilo, selecciona Gradient Overlay y usa los valores de la imagen una vez más. Nombra la capa como ?active menú? y pon la opacidad en 50%.

Paso 21: Crea el cuadro de búsqueda


Creamos un Nuevo grupo (Layer > New > Group), y lo llamamos ?search? y lo colocamos encima del grupo ?navigation?. Seleccionamos la herramienta del rectángulo con bordes redondos (U) ponemos el radio en 3px y creamos uno con el color #104f59. Cambiamos el nombre de la tabla a ?text field? y en opacidad cambiamos a 80%

Paso 22: Crea un botón de búsqueda



Selecciona la herramienta del rectángulo (U), creamos uno y lo situamos justo a la derecha de la caja de búsqueda. Abrimos Gradient Overlay haciendo doble clic en la capa y lo dejamos como en la imagen. Hacemos clic derecho en la capa y seleccionamos Create Clipping Mask.

Paso 23: Escribe la palabra ?search? en el botón



Selecciona la Type Tool (T) y escribe la palabra ?search? usando color blanco para el texto. Cambia la opacidad de la capa a 75%.
Dise?o web en photoshop paso a paso
13 Puntos Score: 4.3/10
Visitas: 2066 Favoritos: 9
Ver los usuarios que votaron...
1 Comentarios Dise?o web en photoshop paso a paso
muchas gracias por el tutorial
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!