Tutorial Header sin recursos
Actualmente he perdido casi todas mis texturas y recursos, pero eso no quiere decir que no pueda hacer gráficos, por lo que hoy les tengo un pequeño tutorial para hacer gráficos sin texturas y cosas fancys (?)
Este tutorial esta dedicado a @witchalwayslies
Materiales
Photoshop (yo utilizo cc)
Un Render
Un par de imagenes de stock, del mismo tema
Paso 1: Ajuste y búsqueda de materiales
Para este tipo de creaciones es necesario planear un poco, ya que los recrusos estan mas limitados. Por ejemplo yo me he señido a un tipo de estetica espedicifa para trabajar, de esa forma mis elementos se complementan entre ellos. Ademas como la imagen que creare es un Header, es importante saber que parte de mi creación podia quedar tapada por información, para dejarla despejada. No nos vaya a quedar un texto a medias por esto, idealmente poner una captura en una capara superior para ir chequeando cada tanto
En la captura he señalado con verde cada zona en la que evitare poner información importante, ya que quedara tapado
En mi caso el tema va de brujas, escogí un render un stock con estilos “similares” y un tercer stock grande para utilizar de fondo.
Paso 2: Posicionando elementos
Lo primero es ubicar el render principal en el centro de la composicion ya que por la disposicion de los elementos que tapan, este es el mejor lugar. Si tu disposicion tapa la izquierda, posiciona el render principal a la derecha. luego para desequilibrar un poco use las calabazas de mi stock. cortandoles el contorno con la herramienta lazo poligonal, ahora parece que el render esta cortado, pero a causa de que esa parte sera cortada por el navbar del theme, da igual.
Paso 3: Corregir el fondo
Ahora mismo el fondo no combina para nada con el resto, lo primero que hare sera quitar la bruja de la imagen original. Para esto haremos lo siguiente:
Duplicaremos la imagen de fondo
Iremos a Edición > Transformar > Voltear horizontal
Jugaremos un poco con los tamaños para que no quede simetrico
Utilizaremos la herramienta mascara de capa: Capa > Marcara de capa > Descubrir todo
Haremos click en la nueva capa que esta en blanco y usaremos un pincel en negro con baja opacidad para seleccionar lo que queremos que quede en la imagen
En mi caso lo hice dos veces, ya que no solo quería la ciudad si no que también quería esas nubes al costado. Tambien aplicare un mapa de degradado en un tono rojizo, ya que el color del theme es rojo, esto es para que se integre mejor una vez terminado.
Vamos a los efectos (circulo partido por la mitad en blanco y negro que esta bajo las capas)
Selecionamos Mapa de degradado
Escogemos o creamos un degradado con tonos parecidos al theme o foro donde estará nuestro header
Ponemos la Capa en modo Tono
Paso 4: Comenzamos a añadir “Texturas”
Cuando no tienes texturas un truco muy simple es utilizar la herramienta dedo de Photoshop. Vuelve a poner el render, y ponlo recostado para que ocupe mas espacio. Selecciona la herramienta dedo, y muévelo. Parecerá que arruinas todo pero no es así. Cuando estes conforme pon la capa en modo de fusión: Luz focal y baja la opacidad hasta estar conforme, en mi caso lo deje al 60%
Para este punto decidi que me faltaban mas adornos para la composición, las hice del mismo modo que las calabazas, tome las estrellas del render y las repartí por diferentes lugares, y la calabaza de su vestido para ponerla a un lado. Siempre chequeando que nada quedase tapado por los elementos del theme
Paso 5: Efectos de luz
Primero volvi a tomar la capa que hiciemos anteriormente la duplique (control+J / cmd+ J) y la puse esta vez arriba del render y el modo de fusión lo cambie a luz suave. Usando una mascara de capa, borre las partes que no se veian bien.
Luego tome un tono claro de la imagen (un tono rosado #f1bbba), pero esto dependerá de su header, y utilizando un pincel hice algunas lineas al azar en una nueva capa. Este pincel lo saque de la sección de pinceles artisticos (incluidos en photoshop) y es el pastel seco.
Si sienten que esta muy duro se puede aplicar un Desenfoque, yo sugiero el desenfoque Gaussiano que esta en: Filtro > Desenfocar >Desenfoque Gaussiano > pueden ponerel valor que gusten pero yo sugieronun valor bajo como 4px. Luego pasen la capa a modo aclarar, yo le baje la opacidad a la capa al 20%
Paso 6: Fuente
En mi caso mi header no necesita font, ya que hay un elemento con el nombre del foro, pero para propósitos del tutorial añadiré una. Lo mejor para composiciones así es alternan entre una font display divertida y una font sans-serif. Hay multiples combinaciones que son infinitas. Agreguen la font en un lugar donde llame la atención pero que no quite el protagonismo del render.
En mi caso puse un efecto a la fuente principal, esto se hace haciendo doble click a la capa. primero active la sombra paralela pero no altere los valores, luego aplique el Relleno de degradado, tome un color claro del render como el brillo del pelo y un tono oscuro como la sombra del listón. Luego cambie el ángulo del degradado para que el text se viera mejor. Agregue una segunda frase, en blanco y sin efectos.
Paso 7: Efectos finales
Para esta parte pueden usar Colorings o Actions que tengan, yo hare unas correcciones muy simples para resaltar mi diseño, las cuales les dire a continuación. Todos los agrego desde las capas de ajustes (boton circular abajo de las capas, parece un circulo partido). Comenzamos con exposición
Utilice este efecto, principalmente para resaltar los oscuros de la imagen, a que estaba muy clarita. Luego utilice equilibrio de color, para quitar un poco la gran cantidad de tonos magenta, ya que el theme que utilizara este header no los tiene. Use los siguientes ajustes
Finalmente una Capa de curvas para añadir un poco de oscuridad. Recuerden que todos estos ajustes son sugeridos, ustedes deben jugar con sus valores hasta encontrar su solución optima.
Resultado final:
Recuerde chequear que ningún elemento vaya a interferir o quedar cortado, esto pueden hacerlo activando la capa captura y bajándole la opacidad para ver como quedaría, la que he hecho yo se ve así instalada
Espero que este tutorial les sirva y les guste, cualquier duda no duden en decirla, intente hacerlo lo mas básico posible pero puede que este saltandome algo. Hasta la proxima
Con amor, Nymph <3