Cómo crear un fondo de Twitter único en Photoshop

Si estás en Twitter y estás leyendo este blog, es probable que ya hayas personalizado tu perfil con un excelente fondo de Twitter. En este tutorial, crearemos uno propio alrededor de una mascota central: un pájaro de twitter altamente detallado, ¡que tendrás que dibujar tú mismo! Prepárate para hacer mucho más que hacer clic en este tutorial artístico.!

Introducción

Al crear un fondo de twitter, hay varias cosas a tener en cuenta. El mayor problema es el hecho de que no puede alinear una imagen en su perfil de Twitter. Así que renuncie a cualquier idea que pueda tener sobre envolver gráficos alrededor del cuerpo. Puede crear un diseño de mosaico o alinear la imagen a la izquierda. Dado que el tamaño del cuerpo no cambia según la resolución a la que se está viendo, también debe preocuparse por mantener su contenido principal visible en múltiples tamaños de pantalla y desvanecer su ilustración sin problemas..

Si su texto va demasiado hacia la derecha, es posible que muchas personas no puedan leerlo. Si su ilustración es muy detallada y finaliza después de solo 250 píxeles, tendrá un aspecto extraño en las pantallas grandes, ya que no se desvanece hacia la derecha y hacia abajo. Y, por último, estás trabajando en formato web, así que piensa en el tamaño de tu archivo cuando lo diseñes..

Para hacer frente a todos estos requisitos, crearemos un fondo relativamente pequeño que se alineará hacia el lado izquierdo y se desvanecerá hacia la parte inferior y hacia la derecha. Y al desaparecer, no me refiero a borrar la mitad de la imagen, sino usar gradualmente cada vez menos elementos. Es una práctica común que los fondos de Twitter incluyan una breve biografía y enlaces a donde se puede encontrar a la persona en línea.

Mi propia experiencia no los tiene, porque creo que la biografía del perfil es visible de todos modos a la derecha y también puedes elegir un enlace que la gente pueda usar. Me vinculo a mi cartera, donde hay varios enlaces de mi presencia en línea, en caso de que alguien esté interesado. De todos modos, para hacer esto más práctico, hay una breve biografía (en este caso un total falso debido a la falta de inspiración) y un par de enlaces..

Vista previa de la imagen final

Echa un vistazo a la imagen que vamos a crear. Puede ver la vista previa de la imagen final a continuación o la imagen a tamaño completo aquí.

Paso 1

Lo primero que debes hacer aquí es dibujar a la mascota, un pájaro de twitter. Hay muchos pájaros de Twitter lindos, brillantes y brillantes, así que quería uno que no solo fuera diferente, sino que representara mi estilo. Después de todo, un perfil de twitter tiene que ver con el propietario.

El proceso que se ve a continuación es muy extendido, pero puede acortarse. No quiero que pienses que esta es la única forma en que deberías hacerlo, pero en caso de que no tengas mucha experiencia con el arte lineal, es bueno tomarse tu tiempo y acertar en cada etapa. Con el tiempo, después de adquirir más experiencia, un simple garabato puede ser suficiente para comenzar en Photoshop..

Sin embargo, por ahora, comience por obtener un trozo de papel regular y dibuje algunos bocetos básicos del ave. Concéntrese en lograr la postura correcta y no se preocupe por los detalles. esos serán cubiertos más tarde.

Paso 2

Como puede observar, la posición de las piernas en la captura de pantalla a continuación no es idéntica al resultado final. De hecho, los cambié en cada etapa porque es un poco difícil hacer que se vean naturales y estéticos al mismo tiempo. Solo traza una imagen aproximada de tu ave en esta primera etapa.

Paso 3

Ahora necesitarás un papel de calco. Es básicamente un papel semitransparente que le permite dibujar algo sobre una imagen de referencia, en este caso nuestro boceto en bruto. Usé dos lápices: un 2B y un 8B. Cuanto mayor sea el número, más suave será la punta. Usé el 2B para trazar los contornos y el 8B para dibujar sombras. El borrador se corta a la mitad, de modo que puede usar el borde afilado para borrar áreas pequeñas. Eso es útil para agregar destacados.

También coloqué una hoja extra de papel de calco en el medio para hacer que el boceto en bruto fuera menos visible. Si su imagen tiene demasiado contraste, es una buena idea desvanecerla más para no confundirse..

Etapa 4

Usa el lápiz para trazar el contorno del ave. Ahora puedes empezar a preocuparte por los detalles..

Paso 5

Ahora debería haber completado el esquema general de cada parte del ave.

Paso 6

Comienza a añadir sombreado, para que el ave se vea en 3D. Tenga en cuenta que las sombras son muy básicas y no necesitan verse muy realistas. Esto es solo una parte de todo el proceso, y no una imagen final, así que no se preocupe por hacer que se vea bien. Todo lo que necesitas hacer es definir claramente las formas y la iluminación..

Esta parte es importante porque todas las sombras se convertirán en líneas continuas en los pasos futuros. Los espacios en blanco son destacados y las líneas paralelas son sombras. Haga las líneas más distantes y más cortas, y el ojo humano lo percibirá como un degradado. Esto es básicamente una pantalla de medios tonos dibujados a mano.

Paso 7

Toma otra hoja de papel y colócala sobre el dibujo a lápiz que hiciste. Esta vez usaremos este como referencia para el ave final, del arte lineal..

Paso 8

Ahora todo lo que tienes que hacer es dibujar líneas paralelas a través de las sombras. Para desvanecerlos, dibuja las líneas cada vez más cortas..

Paso 9

Recuerde que también puede atenuar el contorno, no solo las líneas de sombra.

Paso 10

Esta vez, ten mucho cuidado con todos los detalles. Haz que esas formas se vean como plumas reales, no simples curvas.

Paso 11

Continuar este proceso a través de la cabeza y el cuerpo. Asegúrate de dejar de lado lo suficiente.

Paso 12

Como dije, los pies fueron sometidos a una modificación final. Quería algo entre una posición de ataque y un nivel bajo de vuelo..

Paso 13

Hice la segunda ala generalmente más oscura que la primera. Eso hace que el dibujo se vea más dinámico y realista. Proyectar una luz igual sobre todo el ave puede hacer que se vea menos interesante. Incluso si la postura es demasiado simétrica, siempre puedes confiar en la iluminación para condimentarla un poco..

Paso 14

Y ahí está, todo hecho. Quizás un poco demasiado alto y estirado, pero no importa, ya que de todos modos no puedes verlo todo en el fondo de Twitter.

Paso 15

Escántelo o tome una foto y póngala en Photoshop. Vaya a Imagen> Ajustes> Niveles y aumente el contraste considerablemente. Oscurece las líneas, pero trae algunos de los aspectos más destacados también.

Paso 16

Vaya a Seleccionar> Gama de colores. Dentro de la ventana, haga clic en un área negra de la foto para que tenga una selección de las líneas negras. Presiona OK y copia la selección (Comando + C).

Paso 17

Cree un nuevo documento de Photoshop de 750 px de ancho y 700 px de alto, y de 72 ppp. Pegue el ave (Comando + V), haga doble clic en su capa y agregue un efecto de Superposición de color. Elija un azul oscuro (# 387ebc) y presione OK. Cree una nueva capa en blanco (Comando + Shift + N), haga clic en ambas capas en el menú de capas y combínelas (Comando + E). Eso aplanará el estilo de la capa..

Paso 18

Ahora, en una nueva capa en blanco debajo de la línea, use la herramienta Pluma (P) para darle un color de fondo al ave (# 33ccff).

Paso 19

Para esta parte, lo mejor sería tener una tableta, pero no es completamente necesario. Puede utilizar un pincel normal o la herramienta de lápiz para crear los resaltes y las sombras. Lo hice con una tableta. En este paso, trace los primeros puntos destacados con blanco y conviértalo en una máscara de recorte para que solo aparezca dentro del ave..

Paso 20

Ahora dibuja trazos más grandes de un cian brillante (# 7ff4fe). Haz una capa separada para cada uno de estos.

Paso 21

Debajo de la anterior, pinta luces más grandes con un cian ligeramente más oscuro (# 4de2ff).

Paso 22

Un color de resaltado final será unos pocos acentos grises (# ddded9).

Paso 23

Ahora use un amarillo brillante (# f5e456) para colorear el pico y agregar algunas sombras también, con un amarillo más oscuro (# bcb833).

Paso 24

Para terminar el ave, rellene el pico con el mismo color azul oscuro y dibuje el ojo. Usa blanco, y el mismo amarillo oscuro..

Paso 25

Tendrás que volver al tablero de dibujo ahora para pintar algunas nubes. Usé varios tipos de cajas de comentarios para esto. Al tratarse de una red social, los gritos de estilo cómico están en el momento justo. Traza el contorno con un tono de gris (# d0cdbe).

Paso 26

Da a su fondo un tono más claro (#edeedb).

Paso 27

Ahora solo dibuja algunas líneas finas para las sombras (# dfe0d0) y los resaltes (#ffffff).

Paso 28

Repita este proceso para crear algunos otros tipos de cuadros de comentarios. Combinados, estos expresan declaraciones simples, pensamientos y exclamaciones. Intento no gritar demasiado en mi perfil, así que no te preocupes, son puramente decorativos. No le grito a mis seguidores :)

Paso 29

Es hora de añadir una biografía y enlaces. El pequeño texto simple es Calibri Regular y los titulares estan en Rockwell Std Bold. El signo es Mrs. Eaves Medium Italic. Usa los mismos colores que el pájaro..

Consejos rápidos

Siempre recuerde probar diferentes métodos antialiasing cuando trabaje con tipos, especialmente a bajas resoluciones. En el primer ejemplo, la palabra está en modo Sharp. Observe que las letras del medio parecen doblarse y caer debajo de la línea inferior. Puede ser sutil, pero es un error..

No solo eso, sino que las letras ni siquiera son paralelas. Cada uno parece tener su propia orientación. Para solucionar esto, intente un método alternativo de antialiasing, en este caso Strong. Ahora las letras tienen una orientación común y una línea de base nivelada..

Si bien lo anterior puede ser una solución sutil, el siguiente es un error muy común. El seguimiento desigual puede hacer que algunas letras se superpongan y que otras estén demasiado alejadas unas de otras. Si bien normalmente no puede notar estos errores en pequeñas líneas de texto regulares, el texto en pantalla grande revelará estas inconsistencias.

Para solucionar esto, tienes que cambiar manualmente el espacio entre cada letra. Elija la herramienta de tipo (T), haga clic dentro de una línea de texto y arrastre una selección de las dos primeras letras. Introduzca un número apropiado en el campo de seguimiento. Cuando haya encontrado el espacio correcto, seleccione la segunda y tercera letra y haga lo mismo. Recorra cada espacio de dos por dos letras hasta que todo el seguimiento sea correcto. Puede ver la diferencia entre el seguimiento personalizado y el estándar en la instancia de la palabra de arriba y abajo..

Paso 30

Encuentra la capa de forma vectorial donde trazaste el ave. Haga clic en la miniatura de la máscara de vector de la capa para abrir el camino. Use la Herramienta de selección de ruta (flecha negra) para seleccionar la ruta y copiarla (Comando + C). Abra Illustrator, pegue la ruta (Comando + V) y presione Intro en la ventana que se abre en Illustrator (Forma compuesta). Seleccione el color del trazo y elija blanco (aquí es negro solo para que pueda verlo). Establecer el peso del trazo a 2 pt.

Paso 31

Abra el Panel de trazo (Ventana> Trazo) y use la siguiente configuración. No me importa el fondo gris..

Paso 32

Cópielo (Comando + C) y péguelo (Comando + V) en el archivo de Photoshop como un objeto inteligente. Repite el proceso con las casillas de comentarios también..

Paso 33

Utilizando la misma fuente de titular, cree unos pocos acentos tipográficos alrededor del comentario. También usaremos una variedad de aves del Arsenal de Go Media Vector de Birds 2. Solo pégalos como objetos inteligentes y dales una superposición de color con el color que quieras..

Paso 34

Utiliza diferentes pájaros con diferentes colores. Intenta no exagerar, o superponerlos.

Paso 35

También quería darles la idea de que las aves llevaran mensajes, así que coloqué cartas alrededor, cerca o en manos de las aves reales. Todos están con una de las tres fuentes que usamos anteriormente.

Paso 36

Repita también el motivo en la esquina superior. No lo hagas científico. Mantenga la orientación aleatoria, y no necesariamente todo en una dirección.

Paso 37

Y luego simplemente esparce los pájaros por todo el lienzo. Recuerda desvanecerlos a la derecha e inferior colocando cada vez menos..

Imagen final

¡Eso es! Nuestro fondo de Twitter está completo. Puede ver la vista previa de la imagen final a continuación o la imagen a tamaño completo aquí.

Esta es la versión que tengo en mi perfil de twitter..