Diseo web en photoshop paso a paso

CATEGORA: HAZLO TU MISMO PUBLICADO HACE MS DE 2 AOS En este tutorial quiero ensearos como crear un layout con photoshop limpio y elegante. El diseo 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 ensearnos a utilizar photoshop para disear nuestra propia web, asique los crditos 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 tamao 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: Aadir algunos colores de fondo

Crea una nueva capa, selecciona el Pincel (B) selecciona un pincel suave con un dimetro de 300px y aade algunos colores. En este caso usamos rojo, naranja y azul. Cambia el nombre de la capa y llmala color Paso 3: Aadiendo 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 pgalo 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 imgenes. Cambia el modo de la capa a Difference, opacidad a 30% y llmala texture. Paso 4: Creando un fondo oscuro para el contenido

Crea una nueva capa, selecciona la herramienta de rectngulo con los bordes redondos (U) y ajusta el Radio a 3px, crea un rectngulo 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 seleccin todas las capas que hemos creado y ponlas dentro del grupo backgrounds. Paso 6: Crea ms grupos.

Crea un nuevo grupo (Layer > New > Group) y llmalo home. Crea un nuevo grupo dentro y llmalo logo. Paso 7: Aade 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 imgenes. 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 diseo. Crea otro grupo llamado Sign up | Login. Entonces selecciona la Herramienta de Rectngulo (U) y crea uno ms o menos como en la imagen. Otra vez doble clic en la capa para abrir la ventana de estilo y usamos la siguiente configuracin. 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 lnea 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 seleccin con la altura de 1px y rellena la seleccin con el color #406f94 y elimina todo lo que quede fuera del rectngulo negro. Pon la opacidad de la capa en 40% y llmala Line Paso 10: Aadiendo gradientes a la barra de navegacin

Nueva capa, Rectangular Marquee Tool (M) y creamos una seleccin como la de la imagen (puedes usar guas 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 seleccin. Presiona Ctrl+D para deseleccionar. Ve a Filter > Noise > Add Noise y usa la configuracin de la imagen. Llama a la capa gradient y deja una distancia de 1px entre la lnea 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 pgina en la barra de navegacin. 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 ocasin se llama Greyscale Basic. Paso 12: Creando un separador

Ahora vamos a crear un separador. Crea una nueva capa, selecciona la Herramienta de seleccin de una columna de 1px y haz clic una vez en tu layout. Selecciona la opcin de Intersect with selection y rea una seleccin 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 configuracin de la imagen. Cambia el nombre de la capa a line 1. Paso 14:

Duplica la capa line 1 y llmala line 2. Selecciona la herramienta Move (V) y con la flecha del teclado muvelo 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 seleccin como la de la imagen y llnala 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 mscara 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

Mantn 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 botn para las pginas activas

Ahora vamos a crear un fondo para la pestaa active del men de la pagina, para diferenciarlo de otros. Selecciona la Herramienta del rectngulo (U) y crea uno como en la imagen. Pon la capa debajo de la que tenemos creada con los nombres de las pginas. Haz doble clic en la capa para modificar el estilo, selecciona Gradient Overlay y usa los valores de la imagen una vez ms. Nombra la capa como active men y pon la opacidad en 50%. Paso 21: Crea el cuadro de bsqueda

Creamos un Nuevo grupo (Layer > New > Group), y lo llamamos search y lo colocamos encima del grupo navigation. Seleccionamos la herramienta del rectngulo 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 botn de bsqueda

Selecciona la herramienta del rectngulo (U), creamos uno y lo situamos justo a la derecha de la caja de bsqueda. 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 botn

Selecciona la Type Tool (T) y escribe la palabra search usando color blanco para el texto. Cambia la opacidad de la capa a 75%. - See more at: http://www.identi.li/index.php?topic=28488#sthash.aW0DiN3Q.dpuf