Spanish (Español) translation by Nadia Gonzales (you can also view the original English article)
Photoshop es a menudo la herramienta adecuada para el diseño web, especialmente si estás creando un diseño con numerosas imágenes y efectos de pincel. En este tutorial, te mostraré cómo crear un diseño completo de página de inicio grunge. Diseñaremos el encabezado, la barra lateral, el cuerpo, el pie de página y le daremos estilo a todo para que funcione en conjunto en un diseño muy texturizado y desgastado.
Paso 1
Esta vez vamos a crear un diseño web completo de estilo grunge utilizando Photoshop y un montón de imágenes de stock. Como este es un tutorial de nivel intermedio-avanzado, me saltaré la explicación de algunos pasos básicos. Primero crea un nuevo documento de 950 px por 800 px en RGB 72ppp. Muestra las reglas y arrastra cuatro guías delimitando el documento, esta será el área óptima del diseño. Pretendo mantener un diseño de ancho fijo.
Ve a Imagen > Tamaño del lienzo y aumenta el ancho y el alto mucho más, 1200 px por 1000 px está bien, de esta manera estaremos diseñando para resoluciones de pantalla más amplias. Luego agrega más guías donde piensas agregar los contenedores (encabezado, barra de navegación, barra lateral, pie de página).
Imaginemos que este diseño está destinado a una plantilla de Wordpress, por lo que necesitaremos un encabezado, una barra de navegación dentro del encabezado y una barra lateral derecha. Mira la parte inferior de la siguiente imagen. A continuación, rellena el fondo con este color #7A8173.
Paso 2
Ahora vamos a crear un motivo para el fondo del encabezado, lo cual es bastante sencillo. Crea un nuevo documento de 50 px por 300 px y dibuja algo como lo que se muestra en la imagen de abajo. Estoy usando guías para que mi forma sea lo más simétrica posible. Luego ve a Edición > Definir motivo y guarda la forma como "motivo 1".
Paso 3
En una nueva capa de nuestro archivo de diseño principal, dibujar un rectángulo de 300 px de altura utilizando la herramienta Rectángulo. Ve a Filtros, y añade una Superposición de motivo, busca tu nuevo motivo y aplícalo. Para que se vea correctamente debes hacer clic en el botón Ajustar al origen. Cambia el Relleno de la capa a 0%, crea una nueva capa en blanco encima de la capa de forma, y combina ambas, de esta forma tendrás el motivo listo para añadirle algunos efectos. Nombra esa capa como "Patrón 1".
Paso 4
Selecciona la capa "Motivo 1" y aplícale algunos estilos de capa: Sombra paralela, una Superposición de degradado y una Superposición de motivo. Intenta conseguir algo similar a la parte inferior de la imagen de abajo, utilizando los siguientes valores.
Paso 5
Ahora vamos a añadir el fondo de la barra de navegación. Dibuja un rectángulo que oculte un poco la capa "Motivo 1". Aplica a ese rectángulo una Superposición de motivo, una Superposición de degradado de negro a rojo y una Sombra paralela suave. Utiliza los valores de las imágenes de abajo como referencia. A continuación, añade una máscara de capa > Ocultar todo, y dibuja un Degradado reflejado de negro a blanco a negro en la máscara de capa, obtendrás algo similar a la imagen inferior.
Paso 6
Ahora dibuja una elipse (#691E1B) sobre la capa "Motivo 1", nómbrala "Luz" y aplícale un Desenfoque gaussiano con un radio de 50 píxeles. He creado una guía extra para dibujar la luz en el centro del encabezado. Elimina todo lo que hay debajo de la barra de navegación y cambia el modo de fusión de la capa a Sobreexponer color.
Paso 7
Para terminar la primera parte del diseño, vamos a dibujar el fondo de la barra lateral. Dibuja algunas guías para delimitar la barra lateral y también edita las guías existentes para que se ajusten al diseño actual. A continuación, dibuja un rectángulo rojo (#3D100B) y aplica los siguientes estilos: una Sombra paralela, una Superposición de color y una Superposición de motivo.
En este punto, debes tener en cuenta la forma en que vas a cortar la imagen en HTML + CSS; es por eso que estoy usando Sombras paralelas con 0px de Distancia la mayor parte del tiempo, y sólo degradados horizontales o verticales. La textura en este caso tiene muchas líneas horizontales. Tiene que ser fácil convertir esto en un fondo infinito para muchas áreas. También, este es un buen punto para tomar un descanso y organizar las capas en sus carpetas para mantener las cosas organizadas.
Paso 8
Ahora comienza con los detalles, quiero añadir el nombre del sitio en un lugar destacado, por eso voy a utilizar esta bonita imagen de etiqueta grunge. Obviamente debes extraer la etiqueta y colocarla en la esquina superior izquierda de nuestro diseño. Intenta conseguir algo como la primera imagen de abajo. A continuación, utiliza la herramienta Varita mágica para seleccionar el pequeño círculo marrón, y luego Comando + Mayúsculas + I para invertir la selección. Ajusta los Niveles y el Tono/Saturación utilizando los valores que se muestran a continuación.
Paso 9
Ahora, con la herramienta Borrador y un pincel irregular, borra algunas zonas del borde de la etiqueta. Para añadir un efecto de corte de papel, selecciona la herramienta Sobreexponer y utiliza la misma forma de pincel para aplicar la sobreexposición al borde de la etiqueta.
Paso 10
A continuación vamos a añadir una sombra a nuestra etiqueta. Para ello, duplica la capa "Etiqueta", cambia el Tono/Saturación > Luminosidad a -100, y aplica un Desenfoque gaussiano con un radio de 10 px. Luego, cambiamos el Modo de fusión de la copia de la etiqueta a Multiplicar y establecemos la Opacidad al 75%.
Paso 11
Un último retoque para la etiqueta, cambia la Saturación a -40 para hacerla más gris.
Paso 12
Ahora vamos a añadir algunas imágenes de apoyo, intenta encontrar imágenes que involucren un concepto, pero como este es un tutorial sobre las técnicas, voy a elegir una al azar. Esta es una hermosa imagen de un tren de época aquí en el altiplano de Bolivia. Extrae la forma del tren como quieras. A continuación, cambia el Modo de fusión de la capa "tren" a Oscurecer.
Paso 13
Vamos a añadir algo de texto, primero el nombre de la página. Escribe algo usando una fuente grunge; puedes encontrar algunas interesantes aquí. Para el título utiliza un tipo de letra negro y cambia el modo de fusión de la capa a Superponer, luego duplica la capa y cambia la Opacidad de la copia a 75%. Para conseguir un pequeño efecto de desenfoque, mueve la capa copiada uno o dos píxeles a la izquierda o a la derecha. Añade más texto utilizando esta técnica, como un eslogan o algo así. También es un buen momento para añadir los enlaces de navegación.
Paso 14
Ahora añade más cosas, ¡es el estilo grunge! He descargado algunos pinceles de Jenn B aquí, estos pinceles tienen restricciones. Usando esos pinceles añade algunos números, esquinas, cintas adhesivas y demás, siéntete libre de hacer lo que quieras en este paso. Sólo recuerda añadir todas las capas debajo de las capas "Etiqueta" y "Copia de la etiqueta".
Paso 15
Ahora empezaremos a añadir las secciones de la página. En primer lugar, en el encabezado necesitaremos una barra de búsqueda. Escribe una etiqueta de búsqueda. A continuación, dibuja un rectángulo rojo (#6A0400) como campo de entrada de la búsqueda, y luego aplica un efecto de capa de Trazo y Superposición de motivo.
Paso 16
Ahora empezaremos a añadir el contenido principal de nuestro diseño. Primero vamos a añadir un campo para poner un texto destacado. Dibuja un rectángulo gris oscuro (#0D0F0E) en una capa debajo de la barra lateral. Creé cuatro carpetas para mantener el diseño organizado: Una para el "Encabezado" por encima de todo, otra para la "Barra lateral" por debajo del "Encabezado", otra para el "Contenido" por debajo del "Encabezado" y la "Barra lateral", y la última para el "Pie de página".
Puedes añadir este rectángulo en la capa "Contenido", también puedes añadir tantas carpetas como sean necesarias dentro de estas cuatro carpetas. Una vez que hayas colocado el rectángulo en un lugar adecuado, aplica una Sombra paralela y un Efecto de trazo utilizando los valores que aparecen a continuación.
Paso 17
Descarga algunas esquinas y bordes grunge de aquí, y pega uno sobre el fondo gris. A continuación, aplica un efecto de Superposición a la esquina con un color de #171612. Además, añade otra esquina sobre el fondo de la barra lateral, pero esta vez baja su Opacidad por debajo del 25%.
Paso 18
Vamos a añadir algo de texto. Puedes añadir cualquier texto de muestra, imagina que es un texto controlado por javascript de la sección de publicaciones recientes, o una sección de publicaciones destacadas, algo así. Estoy usando el mismo tipo de letra grunge que se utilizó para la barra de navegación con el color #4D0D0D y Arial con un color de #3F3F3F para el cuerpo del texto.
Aplica un efecto de sombra paralela al título y añade el mismo efecto a los elementos de navegación. Cuando conviertas este PSD en un archivo HTML + CSS, tendrás que convertir estos títulos en imágenes, así que no pasa nada si quieres añadirles más estilos. Por último, utiliza algunas guías para colocar las capas de texto en un lugar adecuado.
Paso 19
Nuestra barra destacada luce un poco vacía, así que agreguemos una imagen de apoyo. En este caso, he utilizado una foto polaroid. Puedes descargar la foto polaroid desde aquí. Extrae la polaroid, pégala en una capa sobre el fondo gris y la esquina grunge en la carpeta "Contenido", luego cambia el Tono/Saturación para hacer la polaroid un poco más sepia (Selecciona la opción Colorear).
Utiliza las mismas técnicas para los bordes de la capa "Etiqueta" (Paso 9). Borra y aplica Sobreexposición a los bordes de la imagen de Polaroid. Por último, añade una sombra paralela utilizando la misma técnica que en el paso 10 de este tutorial.
Paso 20
Tenía esta foto mía en sepia, así que la añado al diseño. Añade cualquier imagen en una nueva capa por encima de la capa "Polaroid", selecciona el cuadrado negro de la polaroid, luego Comando + Mayúsculas + I para invertir la selección. Selecciona la capa de la imagen y elimina todo lo que sobre. A continuación, puedes añadir más detalles grunge, como un poco de cinta adhesiva sobre la imagen, como se muestra en las imágenes de abajo. Apliqué un efecto de Sombra paralela de 1px a la cinta añadida también.
Paso 21
Es un buen momento para añadir un icono RSS a la barra lateral. Dibuja un Rectángulo de vértices redondeados (#99917E), luego aplícale los siguientes efectos: un Resplandor interior, una Superposición de motivos y una Sombra paralela, utiliza los valores que se muestran en la imagen de abajo. A continuación, dibuja o pega en una nueva capa sobre el rectángulo la forma RSS estándar y rellénala de negro. Por último, cambia el Modo de fusión de la capa "Forma RSS" a Superponer.
Paso 22
Ahora coloca el icono de RSS en la parte superior izquierda de la barra lateral. Añade un texto como "Canal RSS". Dibuja otro trozo de cinta adhesiva y escribe el número de suscriptores sobre él. Recuerda que ahora estamos trabajando en la carpeta "Barra lateral".
Paso 23
Es el momento de añadir una publicación a nuestro diseño. Sólo tienes que escribir algún texto al azar con un Título, otra línea para la fecha, la categoría y el autor. Además, algunas palabras como el texto de la publicación. La tipografía es lo más importante en este paso. A mí me gusta usar fuentes Serif para los títulos y Sans-Serif para el cuerpo, pero es simplemente mi opinión. Decide lo que crees que es mejor para tu diseño.
Paso 24
Para dar a nuestra publicación de ejemplo un poco más de actitud, vamos a añadir una imagen de vista previa, al igual que en los sitios TUTS, pero como este es un diseño grunge tenemos que añadir un fondo grunge a nuestras imágenes. Esto es tan sencillo como añadir relleno arriba y abajo con CSS, y luego establecer una imagen de fondo que se repita.
Esta imagen será de una película de 35mm. Extrae dos pequeñas franjas de la película, y cambia su Tono/Saturación usando los valores de la imagen de abajo. A continuación, utilizando un Borrador irregular, borra algunas áreas de las franjas. Por último, añade una Sombra paralela a cada franja. Cuando hayas terminado con la película, pega cualquier imagen debajo de las capas de la película. Yo añado una foto de uno de mis viajes. Por último, aplica un Efecto de trazo (#2F261D) a esa imagen.
Paso 25
Dibuja una línea roja de 2px debajo de la publicación y algo de texto para los comentarios, es una buena idea añadir todas las capas relacionadas con la publicación en una nueva carpeta llamada "Publicación". A continuación, incrementa la altura del documento un poco, puedes hacerlo utilizando la herramienta Recortar, haz esto sólo para ver cómo se verá nuestro diseño si tiene dos o tres publicaciones en él. Duplica el grupo "Publicación", y cambia el texto y la imagen, como se muestra a continuación.
Paso 26
La verdad es que se ve bastante bien, ahora añade los títulos de los elementos de la barra lateral. También puedes crear una carpeta para cada elemento.
Paso 27
Ahora añade un icono de lista. Puedes usar cualquier forma personalizada. Añade algún texto al azar, yo estoy usando Georgia para la barra lateral. Duplica los iconos y edita uno para representar el estado "hover". Haz lo mismo para cada elemento de la barra lateral.
Paso 28
Estamos cerca de terminar. Añade algunos detalles grunge en la parte inferior de la barra lateral, añadiendo algunos pinceles grunge en una nueva capa por encima de la capa de fondo de la barra lateral. Selecciona la capa de fondo de la barra lateral y ve a Capa > Máscara de capa > Descubrir todo. A continuación, oculta algunas zonas de la parte inferior izquierda del fondo de la barra lateral utilizando un Pincel negro irregular.
Paso 29
Finalmente, selecciona la capa de fondo de la barra lateral y copia el estilo de capa de la misma. Dibuja un rectángulo en la parte inferior del diseño dentro de la carpeta "Pie de página" y pega el estilo de capa en él. A continuación, extrae y pega esta imagen sobre el fondo del pie de página.
Ajusta la saturación para que sea un poco más gris. Además, puedes aplicar a esa hoja de papel una sombra paralela repitiendo la técnica del paso 10. Añade algún texto sobre la hoja de papel, quizás un eslogan o algo así. Y también añade algún texto a pie de página, como una barra de navegación rápida, y la información de copyright.
Conclusión
El diseño web no es pan comido, pero espero que este tutorial te ayude a mejorar tus habilidades. Ahora depende de ti, crear tu propio diseño, o regístrate en PLUS para descargar la fuente PSD y jugar con ella. Me encantaría ver algunos diseños web grunge en el grupo de Flickr de Psdtuts+. Puedes ver la imagen final abajo o ver una versión más grande aquí.
Suscríbete al canal RSS de Psdtuts+ para obtener los mejores artículos y tutoriales de Photoshop de la web.
By
