Sé que ya hice (algo recientemente) un tutorial sobre el diseño de una plantilla de clan/juego, pero esta se ve completamente diferente y, por supuesto, ¡me encanta diseñar plantillas de clan! Entonces, en este sencillo tutorial paso a paso, les mostraré cómo diseñar un plantilla de sitio web profesional de juegos de clanes. Puedes ver la vista previa a continuación.
(lo que estaremos diseñando – haga clic para ver más grande)
1. Nuevo documento, crear fondo
Muy bien, empecemos por creando un nuevo documento en Photoshop, en el que podemos diseñar nuestra plantilla de sitio web. He usado un tamaño de documento 960×1100 píxeles, ya que la mayoría de las personas que navegan por el sitio web de un clan no usarán realmente la resolución de 800 x 600. Después de crear su documento, rellene el fondo con un bonito color gris medio (en este caso usé #6c6c6c).
Después de llenar su fondo con un color sólido, puede darle un poco de textura aplicando un patrón de algún tipo, o simplemente aplicando Filtro > Ruido > Añadir ruido con una cantidad de aproximadamente 2.0.
Vea un pequeño artículo que escribí sobre recursos de patrones aquí.
2. Diseña el Encabezado/Banner
Muy bien, ahora tenemos que hacer un encabezado. Comience buscando una captura de pantalla o algunos renders del juego que juega su clan, o si solo está diseñando esto por el simple hecho de … diseñar, entonces, ¿qué tal si usa este fondo de pantalla de Command and Conquer 3 Tiberium Wars? Copie el fondo de pantalla en su lienzo y recórtelo a un tamaño de banner adecuado. También hice las esquinas de mi pancarta redondeadas.
En la imagen de arriba, puede notar que parece que he retocado un poco la imagen, bueno, lo hice. Usted también puede usar el Herramienta de grabación para oscurecer algunas áreas, luego el Herramienta de desenfoque para difuminar parte de la acción de fondo.
Terminé la pancarta agregando un poco de cepillado grunge para darle un buen detalle. Puedes descargar los pinceles grunge que usé de Tipo mal impreso. Cuando agregue su pincelada grunge, use colores marrones muy oscuros que pueda tomar como muestra del papel tapiz que usó para el banner.
(haga clic para ver más grande)
Terminemos con el encabezado agregando el nombre/descripción/eslogan/lo que sea de tu clan. Comience por salir del Herramienta Texto horizontal (la herramienta de texto normal, por supuesto) y luego escribe el nombre de tu clan en un tamaño aproximado 30 puntos, luego escribe cuál es tu clan o tu descripción debajo. Esto es lo que logré obtener usando la fuente. innumerables profesionales:
¿Necesitas fuentes gratis? Tratar UrbanFonts.com. Se ve bien hasta ahora, pero el texto no es muy fácil de leer. Puede solucionar este problema haciendo un poco de cepillado suave en una capa debajo de la capa de texto. Usé un par de marrones oscuros, con diferentes opacidades.
Muy bien, ya hemos terminado con el encabezado, ¿qué te parece? ¡Siéntase libre de agregar algunos extras si puede pensar en alguno!
3. Barra de navegación y botones
Comience por hacer una nueva capa. Ahora encuentra y sal del Herramienta Rectángulo redondeadoes con el Herramienta de forma personalizada algun lado.
Configure los ajustes para esta herramienta como se muestra a continuación:
Ahora, en su nueva capa, dibuje un rectángulo redondeado en su lienzo, esta será la barra de navegación principal. Si lo necesita, puede utilizar el Herramienta Rectángulo redondeado para limpiar un poco la barra, por ejemplo, si necesita hacerla más ancha o más delgada.
Ahora, necesitas bloquear los píxeles transparentes para su barra de navegación: puede hacer esto en la paleta de capas, no se preocupe, hay una captura de pantalla a continuación 🙂 Después de bloquear los píxeles transparentes, saque la herramienta de degradado y configúrela en un degradado muy oscuro (colores usados: #131212 & #3c3c42), después de preparar su degradado, puede arrastrar el degradado dentro de su barra de navegación y solo llenará los píxeles. Puedes desbloquear tu capa ahora.
Después de todo esto, es hora de aplicar algunos estilos de capa a la barra de navegación. Usé lo siguiente:
- Sombra interior
- Bisel y relieve
- Bisel y relieve: contorno
- Superposición de patrón (descargar patrón X)
Su barra de navegación ahora debería verse más o menos así:
Se ve bien, pero le vendría bien algunos buenos retoques. Comience creando una nueva capa, luego seleccione los píxeles de la barra de navegación (mantenga presionado control y haga clic en la miniatura de la capa) después de seleccionar la barra de navegación, contraiga la selección en un píxel. Después de hacer esto, dibuja un blanco a transparente degradado dentro de la selección.
Cambie el modo de capa para esta capa a cualquiera Cubrir o Luz tenuey es posible que deba reducir la opacidad, según la fuerza de su degradado.
Nuevamente, seleccione su barra de navegación principal, pero esta vez no necesita contratar la selección. En una nueva capa, dibuje un degradado de blanco a transparente desde la parte superior hasta la parte inferior de su selección. Ahora, corte su gradiente a la mitad (mi barra de navegación tenía 46 píxeles de altura, así que corté los 23 píxeles inferiores)
¡Otra vez con los modos de capa/opacidades! Cambié el modo de capa para esta capa a Luz tenue y bajamos la opacidad a 20-40%. Muy bien, la barra de navegación está completa, ahora es el momento de algunos botones.
Consigue el Herramienta Rectángulo redondeado nuevamente y haga una forma más pequeña, del tamaño de un botón (¡asegúrese de estar en una nueva capa!)
Se ve bastante bien hasta ahora, es hora de algunos estilos de capas… ¡otra vez! Aplique los siguientes estilos de capa a su nueva capa de botón:
- Sombra interior
- Brillo externo
- Brillo interior
- Bisel y relieve
- Gradiente de superposición
- Superposición de patrón (descargar patrón de cinta de advertencia)
Y ahora su botón debería parecerse mucho a este:
Bastante agradable, ¿eh? 🙂 Puede finalizar este paso simplemente agregando texto al botón, duplicando ambas capas y superponiéndolas, etc.
La fuente que he usado en la imagen de arriba es una fuente gratuita llamada «PF Ronda Seven», y puedes descargarla gratis desde DaFont. También apliqué este Resplandor exterior a cada una de las capas de texto.
Ver el diseño completo hasta ahora.
4. Categorías/Sección de la barra lateral
Antes de hacer la sección de categorías/barra lateral, agregue ‘Inicio > Noticias recientes’ debajo de la barra de navegación, usando una fuente como Tahoma o Arialy un tamaño realmente pequeño (11 puntos), esto es lo que se me ocurrió:
Después de hacer la barra, desea crear una especie de área de contenedor para los enlaces y otras cosas, así que duplique la capa de la barra principal, muévala debajo de la capa y luego rellénela con negro. Mueva su capa duplicada hacia abajo unos 160 píxeles más o menos, luego estírela hacia arriba, como se muestra en la imagen a continuación.
Esperemos que la imagen de arriba le haya explicado lo que debe hacer para que nuestras categorías sean un área contenedora. Si no es así, siento no haber podido explicarlo mejor, pero si tienes alguna pregunta, ¡no dudes en dejar un comentario!
Después de hacer el área del contenedor, baje la opacidad de la capa a aproximadamente 20%.
Ahora es el momento de llenar su contenedor de categorías con… bueno, categorías. Simplemente copié/pegué las categorías de mi sitio web aquí, pero es posible que desee hacer algo más con esta sección de la barra lateral.
Lo que querrá hacer ahora es duplicar todas estas capas, moverlas hacia abajo y simplemente cambiar las capas de texto. Algunos buenos ejemplos son: Patrocinadores; Partidos recientes; Lista de miembros.
Ver el diseño completo hasta ahora.
5. Área de actualizaciones de contenido/noticias
Para el área de noticias/contenido, puede simplemente copiar la barra de navegación o la sección de la barra lateral y cambiar algunas cosas (estirar para ajustar), lo que puede hacer si lo desea, pero creo que el área de actualizaciones necesita un poco más de distinción. del resto de la plantilla.
Terminé duplicando la sección de la barra lateral y moviéndola, luego la estiré al tamaño correcto y cambié algunos estilos de capa para que se vea un poco diferente.
- Tamaño de bisel y relieve: desde 8 para 11.
- Opacidad de Superposición de Patrón: desde 10 para 20.
Quieres llegar a algo como esto:
(haga clic para tamaño completo)
La fuente que he usado en la imagen de arriba es ArialTalla 18 puntos. Es posible que desee usar algo un poco más grande que esto, tal vez incluso una fuente diferente (pruebe con Georgia)
Complete su área de actualizaciones con un texto ficticio. Ir www.lipsum.com para el texto ficticio oficial ‘lorem ipsum’.
Acabo de pensar en esto, en realidad, también podría agregar un poco de grunge a cada una de sus barras de encabezado, sería un buen toque.
6. Terminando el Diseño
Bueno, para terminar este diseño, creo que necesitará hacer un área de pie de página y, en general, retocar el resto de la plantilla, agregar algunas características adicionales si se le ocurre algo, pero ya casi lo ha hecho. con el diseño general/básico.
¿Quizás agregar algunos anuncios de Google en su diseño? 😉 Probablemente no sea la mejor práctica para una plantilla de sitio web de clan.
Bueno, ¡gracias por leer este tutorial a todos! Espero que lo hayan disfrutado y aprendido una cosa o dos.
¿Todavía no eres usuari@ de Fiverr ?
Tenemos un post sobre Fiverr donde te contamos cono funciona.