Realmente me encanta este tipo de estilo, así que pensé en compartir otro tutorial con ustedes (y chicas, por supuesto) sobre cómo diseñar algo como lo que muestro a continuación, una especie de conjunto de navegación de fibra de carbono brillante. 😉
1. Creación de fondo sucio
Sé que este conjunto de navegación probablemente estará en el diseño de un sitio web del clan o algo así, pero de todos modos me encanta diseñar fondos geniales y sucios para mis tutoriales, así que si quieres aprender a diseñar el fondo he que se muestra en la imagen a continuación, continúe con este paso, si no, puede pasar al siguiente paso.
Comience creando un nuevo documento en Photoshop: utilicé un tamaño de documento pequeño de 400×400 píxeles (como de costumbre), pero es posible que desee usar algo un poco más grande, ya que siempre es bueno tener mucho espacio para trabajar. Después de crear su nuevo documento, busque y saque el Herramienta gradienteestablezca el tipo de degradado en Radial y arrastre un degradado en el fondo.
Si desea que su fondo salga igual que el mío que se muestra arriba, entonces querrá cambiar los colores de primer plano y de fondo a los que he mostrado arriba.
Después de hacer que se aplique tu degradado Filtro > Ruido > Añadir ruido con una cantidad bastante baja.
Pruebe otros efectos de filtro para darle al fondo un aspecto agradable. Los filtros debajo de la Artístico y Pinceladas Las categorías suelen ser bastante interesantes. Bueno, hemos terminado con el fondo principal, ahora es el momento de agregar algunos detalles más: ¡texturas y pinceladas grunge!
Entonces, ¿está más interesado en agregar textura a su fondo, o simplemente cepillar grunge colgando de las esquinas? Lo más rápido probablemente sea simplemente poner una textura sobre la parte superior y cambiar los modos/opacidades de la capa, así que intentémoslo. Comience descargando esta textura de musgo sobre rocas y luego cópiela en su documento.
Después de pegar la textura en su lienzo, cambie el modo de capa a algo como Multiplicar, Cubrir o Luz tenue, personalmente usé Multiply. Después de cambiar el modo de capa, reduzca la opacidad a lo que le parezca adecuado. (Solía 20%)
Personalmente, prefiero el cepillado aleatorio, así que simplemente oculté la capa de textura y le di un poco de cepillado. Tengo una pequeña página dedicada a recursos gratuitos de pinceles de Photoshop, o puedes usar uno de los siguientes:
Descargue algunos pinceles gratuitos e instálelos, luego aplique un poco de pincel en las esquinas, recuerde jugar con diferentes modos de capa y opacidades.
Los principales cepillos que se utilizaban allí eran:
- Cepillos Retro Grandes (antecedentes)
- Pinceles grunge aleatorios (del tipo mal impreso)
Para obtener un buen resultado, querrá usar diferentes colores para su pincelada (los colores usados en el degradado de fondo, así como en blanco y negro) y también jugar con los modos de capa, esto es muy importante para un buen resultado. Y recuerde, el enlace de descarga para el archivo PSD está disponible al final de este tutorial, ¡así que no se angustie porque no estoy dando detalles específicos!
Después de terminar con el cepillado, hay algunas otras cosas que puede agregar al fondo, por ejemplo, un renderizado recortado del juego para el que es este diseño, en este caso usé un renderizado recortado del MasterChief de Halo Después de pegar el renderizado en su fondo, cambie el modo de capa a algo como Color Dodge y baje la opacidad si cree que lo necesita.
Se ve muy bien ahora, ¿no crees?
Puede terminar el fondo aplanando la imagen, duplicando la capa restante, aplicando algunos estilos de capa y luego jugando con los modos de capa, esto le da a todo el fondo un contraste un poco más agradable, creo 😉
¡Me parece que la creación del fondo fue lo más destacado de este tutorial! De todos modos, continúa con el tutorial, si quieres de todos modos.
2. Creando los Botones
Como ya he dicho una vez, hay dos formas de hacer botones redondos… bueno, tres. La primera forma (y la peor, pero la más fácil) es hacer una selección cuadrada y luego usar la función suavizar para suavizar la selección (Seleccione > Modificar > Suavizar) esto hará las esquinas de tu botón muy aunque agudo…
La segunda forma, y la más común, de crear botones redondeados es usar la herramienta Rectángulo redondeado, en la que simplemente configura los ajustes y luego arrastra un botón al lienzo, que es lo que debe hacer, pero asegúrese de obtener el tamaño que desea. ya que tendrás que cortarlo y moverlo si quieres cambiar su tamaño más adelante.
La tercera forma (y la que suelo usar) es usar canales de Photoshop y Gaussian Blur para hacer bordes redondeados. Puede ver algunos tutoriales sobre cómo usar este método a continuación:
- Tutorial básico de la interfaz de diseño de ética
- Suaviza los jaggies de Heatherowe
Entonces, básicamente, solo haga un botón redondeado en su lienzo (en una nueva capa) usando cualquier método que conozca. Esto es lo que se me ocurrió:
Haga clic con el botón derecho en la capa de su botón en la paleta de capas y vaya a las Opciones de fusión, haga clic y aplique los siguientes estilos/configuraciones de capa:
- Sombra interior
- Gradiente de superposición
- Superposición de patrones (para la superposición de patrones, debe crear una textura de fibra de carbono simple, puede encontrar dos buenos tutoriales sobre cómo hacer fibra de carbono aquíy aquío descargar mi patrón desde aquí.)
Y ahora tengo esto después de aplicar los estilos de capa:
Se ve muy bien, aunque si no puedes verlo muy bien, sube la opacidad para la Superposición de patrón.
Ahora es el momento de duplicar los botones. Haga clic con el botón derecho en la capa y haga clic en ‘Duplicar capa…’, luego mueva el botón hacia abajo hasta que haya un espacio de aproximadamente 2 píxeles entre ellos, repita esto tantas veces como desee hasta que tenga suficientes botones. Terminé con 5 botones:
Prácticamente hecho para esta parte, excepto que agregué un área contenedora para los botones, usando el color #3f5c7a y modo de capa Multiplicar y opacidad 50%.
3. Detalles del botón: brillo brillante
Comience seleccionando todos sus botones, hágalo manteniendo presionado control luego haciendo clic en la primera capa del botón, luego tendrás que mantener presionado control y cambio y haga clic en todas las demás capas de botones.
Después de seleccionar sus botones, contraiga la selección unos 2 píxeles, puede hacerlo yendo a Seleccione > Modificar > Contrato en los menús de Photoshop. Bien, ahora crea una nueva capa y dibuja un degradado de blanco a transparente desde la izquierda de la selección hasta el área central, como el que se muestra a continuación:
Yendo bien hasta ahora, ahora, haga un bonito camino curvo usando la herramienta Pluma en la parte superior del área de degradado, como el mío que se muestra a continuación:
Después de completar su ruta, conviértala en una selección haciendo clic derecho en la ruta y yendo a Haz una seleccionahora presiona eliminar para que elimine el degradado en el área de tu selección.
Para terminar este lado, agregue una máscara de capa y arrastre un degradado negro desde la parte superior de los botones hasta la parte inferior, para obtener un resultado como este:
Luciendo bien. Ahora necesita hacer el otro lado de los botones, nuevamente, seleccione todos los botones y contraiga la selección, luego haga un degradado blanco de derecha a izquierda en una nueva capa.
Nuevamente, crea un camino sobre el degradado blanco a la derecha usando la herramienta Pluma, solo copia la forma mía si quieres:
Nuevamente, convierta su ruta en una selección y presione eliminar para eliminar el área seleccionada. Terminar borrando la parte inferior del brillo.
Termine agregando texto. Como se trata de un sitio web de un clan, es probable que desee utilizar una fuente erosionada de estilo sucio o una fuente de píxeles/mapa de bits. Terminé usando la fuente de píxeles/mapa de bits llamada ‘PF Ronda Seven’, que puede descargar gratis desde DaFont. Escribe tu texto en blanco, 8 px.
También apliqué esto (Sombra paralela) a cada una de mis capas de texto de navegación.
Bueno, ¡creo que ya casi terminamos! ¡Gracias por leer, y espero que hayas disfrutado el tutorial!
¿Todavía no eres usuari@ de Fiverr ?
Tenemos un artículo sobre Fiverr donde te contamos cono funciona.