Diseñe una plantilla de sitio web de banda impresionante

En este tutorial intermedio de Photoshop, te enseñaré cómo hacer una plantilla de sitio web de banda de estilo realmente perverso y sucio. Personalmente, este es uno de mis diseños / tutoriales favoritos, así que espero que lo disfruten.

(haga clic en la imagen de arriba para verla en tamaño completo)

1. Diseño de una plantilla de sitio web de banda impresionante

Evidentemente, lo primero que debemos hacer es crear un nuevo documento. Para este tutorial estoy usando un tamaño bastante pequeño de 760 x 760 píxeles, es posible que desee usar algo más grande. Lo siguiente que hay que hacer es rellenar el fondo con un color bastante oscuro, utilicé un marrón grisáceo. (# 47433a)

2. Agregue textura al fondo

Para agregar algo de textura al fondo, puedes Apple algunos filtros o golpear una foto de stock sucia en la parte superior y cambiar los modos de capa. Comencé aplicando el filtro de ruido con un ajuste bajo. (Filtro> Ruido> Ruido, Monto: 0,9)

Ahora necesitamos agregar algunos detalles agradables y sutiles al fondo. En primer lugar, agregue un poco de cepillado grunge al fondo. Puedes encontrar algunos pinceles grunge realmente impresionantes en DeviantART, cortesía de ~KeReN-R. Ahora que tienes tus pinceles instalados, elige uno al azar y úsalo varias veces en segundo plano. Cambie el modo de capa de su capa de cepillado grunge a Luz tenue o Cubrir y tal vez bajar la opacidad (algo así como 20-50%).

Comience con un cepillado suave grunge:

Haz un poco más (recuerda usar diferentes pinceles):

Cepille en diferentes lugares del fondo:

Recuerde usar opacidades bajas o cambiar los modos de capa a Cubrir o Luz tenue para obtener un buen efecto combinado:

Deberías quedarte con un bonito fondo sucio, algo como esto:

3. Finalización del fondo: agregue algunos detalles más

Ahora, para el fondo, agregué un pincel de sello que hice muy rápido. De hecho, he escrito un tutorial sobre un efecto similar antes, puedes encontrarlo aquí: Tutorial de Branding Iron Effect.

Después de hacer el sello, bajé la opacidad a aproximadamente 30% y cambió el modo de capa a Luz tenue (esto lo mezcla con el fondo).

Por último, para el fondo, fusioné todas las capas (Capa> Aplanar imagen) luego apliqué el filtro de efectos de iluminación. (Filtro> Renderizar> Efectos de iluminación)

Y ahora deberías tener un fondo bastante bueno como este:

4. Diseño de la sección de contenido (¡imprescindible!)

Cada sitio web necesita una sección de contenido, así que hagamos la nuestra. Simplemente comience creando un cuadro rectangular en el medio del documento. Llene su rectángulo o selección con un color marrón más claro que el que utilizó en el fondo. El color que usé aquí fue # 716a5d. Luego bajé el relleno de la capa de mi sección de contenido a 40% y aplicó los siguientes estilos de capa:

1. Brillo externo
2. Brillo interior

Deberías tener algo como esto:

Agrega una máscara de capa a tu sección de contenido (Capa> Máscara de capa> Mostrar todo) y usando un pincel grunge aleatorio del paquete de pinceles, cepille un poco en la máscara de capa usando negro como tu color. Esto eliminará partes de su capa, pero no es como usar el borrador, podrá editarlo más adelante si lo desea.

5. Diseño de un logotipo de texto básico

Ahora es el momento de darle vida a la plantilla, agreguemos texto! Comience agregando el texto de su logotipo principal ‘Nombre de la banda’ en la parte superior izquierda. Para la fuente, he usado una fuente genial y grungy llamada 4990810, y para el tamaño de fuente usé 48pt. Esta es una fuente gratuita, así que no dude en descargarla desde aquí: descargar 4990810 de DaFont. El color que usé para el texto de mi logo fue # c9c4b8, y para terminar agregué estos dos efectos de estilo de capa:

1. Sombra paralela
2. Gradiente de superposición

Y ahora tengo esto:

No se ve tan mal, ¿verdad? 🙂

Ahora puede agregar el texto de copyright innecesario pero probable debajo del área de contenido. Simplemente usé Tahoma, 11 puntos, # 5c584e. Sin embargo, no se preocupe, ¡Tahoma viene con Windows! Otro buen candidato para este texto es Arial, que también viene con Windows.

Ahora bien, ¿qué más es imprescindible para un sitio web? ¡Navegación por supuesto! Es hora de agregar nuestro texto / botones de navegación.

La fuente que he usado aquí se llama Cucurucho, pero como no estoy seguro de que sea una fuente comercial o no, es posible que desee ir a un sitio web de fuentes gratuito y buscar una fuente estilo caligrafía. Después de escribir mi texto de navegación (Noticias, Tours, Discografía, Biografía, Galería), apliqué los siguientes estilos de capa a las capas de texto:

1. Sombra paralela
2. Gradiente de superposición

Hice que la opacidad de relleno para cada capa de texto varíe para que agregue más detalles, solo un buen toque. ¡Lo que! 😛

Por último, agregué un subrayado aleatorio a cada uno de los elementos de navegación usando el herramienta de línea. (está en el mismo ícono que las herramientas de forma en alguna parte) Solo recuerde, estas líneas pueden ser lejos de perfecto! Terminé con los subrayados copiando los estilos de capa de las capas de texto a las capas de subrayado. Intenta ser creativo de todas las formas posibles.

6. Agregue algo de contenido

Lo estamos haciendo bastante bien hasta ahora, sigan con el buen trabajo. Puedes ver lo que tengo hasta ahora aquí: Diseño de sitios web de bandas.

Entonces, agreguemos algo de contenido ficticio. Dirigirse a YotoPhoto y busque ‘banda’ o algo así y obtenga algunas fotos geniales y aleatorias. Arrástrelos a su lienzo y cambie su tamaño.

En la imagen de arriba, cambié el tamaño de mis imágenes y luego las recorté para 140 x 100 píxeles, luego agregué dos bordes, un borde claro de 4px en el interior y un borde oscuro de 2px en el exterior. Terminé agregando un poco de texto de relleno a la derecha de las imágenes. Todo lo que usé aquí fue lo básico Tahoma, 11pt / 12pty colores marrón claro / oscuro.

Además, para darle un pequeño toque agradable, agregué algunos botones ligeros y sucios debajo del texto de relleno. Todo lo que tienes que hacer para hacer esto es hacer un rectángulo blanco, cambiar la opacidad de la capa a algo muy bajo y luego borrar los bordes.

7. ¡Hemos terminado! Felicidades.

Entonces, ahora hemos terminado. Un buen toque final, en mi opinión, sería agregar algunas fotos en la parte superior izquierda y luego mezclarlas un poco. (mézclelos, por ejemplo, usando la herramienta de borrador, luego cambiando los modos de capa / opacidades)

Muchas gracias por leer chicos (¡y chicas, por supuesto!). ¡Espero que hayan disfrutado este tutorial! (uno de mis favoritos hasta la fecha)