Comment créer un arrière-plan Twitter unique dans Photoshop

Si vous êtes sur Twitter et que vous lisez ce blog, il est probable que vous ayez déjà personnalisé votre profil avec un fond Twitter très cool. Dans ce didacticiel, nous allons créer l'un des nôtres autour d'une mascotte centrale: un oiseau twitter très détaillé, que vous devrez dessiner vous-même! Préparez-vous à faire beaucoup plus que cliquer sur ce tutoriel artistique!

introduction

Lorsque vous créez un arrière-plan Twitter, vous devez prendre en compte plusieurs éléments. Le plus gros problème est le fait que vous ne pouvez pas centrer une image dans votre profil twitter. Abandonnez donc toutes vos idées sur l’enveloppement de graphiques autour du corps. Vous pouvez créer une conception pouvant être insérée en mosaïque ou aligner à gauche l'image. Étant donné que la taille du corps ne change pas en fonction de la résolution à laquelle elle est visualisée, vous devez également vous soucier de garder votre contenu principal visible sur plusieurs tailles d'écran et d'effacer en fondu votre illustration..

Si votre texte va trop à droite, beaucoup de personnes pourraient ne pas être en mesure de le lire. Si votre illustration est très détaillée et se termine après seulement 250 pixels, elle aura l’air bizarre sur les grands écrans, car elle ne disparaît pas en fondu. Enfin, vous travaillez au format Web, alors pensez à la taille de votre fichier lors de sa conception..

Pour faire face à toutes ces exigences, nous allons créer un arrière-plan relativement petit qui s'alignera du côté gauche et disparaîtra progressivement vers le bas et vers la droite. Et par atténuation progressive, je ne veux pas dire effacer la moitié de l'image, mais utiliser progressivement de moins en moins d'éléments. C'est une pratique courante pour les arrière-plans de Twitter d'inclure une courte biographie et des liens permettant de trouver la personne en ligne..

Je n'ai pas ces antécédents, car j'estime que le profil bio est visible de toute façon sur la droite et que vous devez également choisir un lien que les gens peuvent utiliser. Je fais un lien vers mon portefeuille, où se trouvent plusieurs liens de ma présence en ligne, au cas où quelqu'un serait intéressé. Quoi qu'il en soit, pour que cela soit plus pratique, il y a une courte biographie (dans ce cas, c'est une erreur totale due à un manque d'inspiration) et quelques liens..

Aperçu de l'image finale

Regardez l'image que nous allons créer. Vous pouvez afficher l'aperçu final de l'image ci-dessous ou l'image en taille réelle ici.

Étape 1

La première chose à faire ici est de dessiner la mascotte, un oiseau twitter. Il y a beaucoup d'oiseaux twitter mignons, brillants et brillants, alors je voulais un oiseau qui était non seulement différent, mais qui représentait mon style. Après tout, un profil Twitter est tout au sujet du propriétaire.

Le processus ci-dessous est très étendu, mais peut être raccourci. Je ne veux pas que vous pensiez que c’est la seule façon de le faire, mais au cas où vous n’auriez pas beaucoup d’expérience avec les dessins au trait, il est bon de prendre son temps et de réussir chaque étape. Avec le temps, après avoir acquis plus d'expérience, un simple griffonnage peut suffire à vous lancer dans Photoshop..

Pour le moment, commencez par vous procurer une feuille de papier ordinaire et dessinez quelques croquis de base de l’oiseau. Concentrez-vous sur la posture correcte et ne vous préoccupez pas des détails. ceux qui seront couverts plus tard.

Étape 2

Comme vous pouvez le constater, la position des jambes dans la capture d'écran ci-dessous n'est pas identique au résultat final. En fait, je les ai changés à chaque étape car il est un peu difficile de leur donner un aspect à la fois naturel et esthétique. Tracez simplement une image approximative de votre oiseau dans cette première étape.

Étape 3

Maintenant, vous aurez besoin de papier calque. Il s’agit d’un papier semi-transparent qui vous permet de dessiner quelque chose au-dessus d’une image de référence, dans ce cas-ci notre croquis approximatif. J'ai utilisé deux crayons: un 2B et un 8B. Plus le nombre est élevé, plus la pointe est douce. J'ai utilisé le 2B pour tracer les contours et 8B pour dessiner des ombres. La gomme est coupée en deux afin que vous puissiez utiliser le tranchant pour effacer de petites zones. C'est utile pour ajouter des faits saillants.

J'ai également glissé une feuille de calque supplémentaire entre les deux pour rendre l'esquisse moins visible. Si votre image a trop de contraste, c'est une bonne idée de la faire disparaître davantage afin d'éviter toute confusion..

Étape 4

Utilisez le crayon pour tracer le contour de l'oiseau. Vous pouvez maintenant commencer à vous soucier des détails.

Étape 5

Vous devriez maintenant avoir terminé le contour général de chaque partie de l'oiseau.

Étape 6

Commencez à ajouter de l'ombrage pour que l'oiseau ait un aspect 3D. Notez que les ombres sont très basiques et n'ont pas besoin d'être très réalistes. Il ne s'agit que d'une partie du processus et non d'une image finale, alors ne vous inquiétez pas. Tout ce que vous avez à faire est de définir clairement les formes et l'éclairage.

Cette partie est importante car toutes les ombres deviendront des lignes continues dans les prochaines étapes. Les espaces vides sont les hautes lumières et les lignes parallèles sont les ombres. Rendez les lignes plus distantes et plus courtes et l’œil humain les percevra comme un dégradé. Il s’agit essentiellement d’un écran tramé dessiné à la main..

Étape 7

Prenez un autre morceau de papier calque et placez-le sur le croquis au crayon que vous avez fait. Cette fois, nous utiliserons celui-ci comme référence pour le dernier oiseau au trait.

Étape 8

Il ne vous reste plus qu'à tracer des lignes parallèles sur les ombres. Pour les faire disparaître, tracez les lignes de plus en plus courtes.

Étape 9

Rappelez-vous que vous pouvez aussi faire disparaître les contours, pas seulement les lignes d'ombre.

Étape 10

Cette fois, soyez très prudent sur tous les détails. Faites en sorte que ces formes ressemblent à de vraies plumes et non à de simples courbes.

Étape 11

Continuez ce processus à travers la tête et le corps. Assurez-vous de laisser suffisamment de points forts.

Étape 12

Comme je l'ai dit, les pieds ont subi une dernière modification. Je voulais quelque chose entre une position d'attaque et un vol à basse altitude.

Étape 13

J'ai rendu la deuxième aile généralement plus sombre que la première. Cela rend le dessin plus dynamique et réaliste. Lancer une lumière égale sur tout l'oiseau peut le rendre moins intéressant. Même si la posture est trop symétrique, vous pouvez toujours compter sur un éclairage pour le pimenter un peu..

Étape 14

Et voilà, tout est fait. Peut-être un peu trop grand et allongé, mais cela n'a pas d'importance, car on ne peut pas tout voir de toute façon sur Twitter.

Étape 15

Numérisez-le ou prenez-le en photo et insérez-le dans Photoshop. Allez à Image> Réglages> Niveaux et augmentez considérablement le contraste. Assombrir les lignes, mais évoquer aussi certains des points forts.

Étape 16

Allez à Sélection> Gamme de couleurs. Dans la fenêtre, cliquez sur une zone noire de la photo pour avoir une sélection des lignes noires. Appuyez sur OK et copiez la sélection (Commande + C)..

Étape 17

Créez un nouveau document Photoshop d’une largeur de 750 px, d’une hauteur de 700 px et de 72 dpi. Collez l'oiseau (Commande + V), double-cliquez sur son calque et ajoutez un effet Superposition de couleurs. Choisissez un bleu foncé (# 387ebc) et appuyez sur OK. Créez un nouveau calque vide (Commande + Maj + N), cliquez sur les deux calques dans le menu Calques et fusionnez-les (Command + E). Cela va aplatir le style de calque.

Étape 18

Maintenant, dans un nouveau calque vierge sous le dessin au trait, utilisez l'outil Plume (P) pour donner à l'oiseau une couleur de fond (# 33ccff)..

Étape 19

Pour cette partie, il serait préférable d'avoir une tablette à stylet, mais ce n'est pas complètement nécessaire. Vous pouvez utiliser un pinceau régulier ou l’outil crayon pour créer les surbrillances et les ombres. Je l'ai fait avec une tablette. Dans cette étape, tracez les premiers points saillants en blanc et faites-en un masque d'écrêtage pour qu'il n'apparaisse que dans l'oiseau..

Étape 20

Maintenant, dessinez des traits plus grands d'un cyan brillant (# 7ff4fe). Faire un calque séparé pour chacun de ces.

Étape 21

Sous la précédente, peignez des rehauts encore plus grands avec un cyan légèrement plus foncé (# 4de2ff).

Étape 22

Une dernière couleur de surbrillance sera constituée de quelques accents de gris (# ddded9).

Étape 23

Maintenant, utilisez un jaune vif (# f5e456) pour colorer le bec et ajoutez également des ombres, avec un jaune plus foncé (# bcb833).

Étape 24

Pour finir l'oiseau, remplissez le bec avec le même bleu foncé et dessinez l'oeil. Utilisez le blanc et le même jaune foncé.

Étape 25

Il faut maintenant retourner à la planche à dessin pour peindre quelques nuages. J'ai utilisé plusieurs types de boîtes de commentaires pour cela. Comme il s’agit d’un réseau social, les annonces de style bande dessinée sont au rendez-vous. Tracer le contour avec une nuance de gris (# d0cdbe).

Étape 26

Donne à son arrière-plan une teinte plus claire (#edeedb).

Étape 27

Maintenant, tracez quelques lignes fines pour les ombres (# dfe0d0) et les hautes lumières (#ffffff)..

Étape 28

Répétez cette procédure pour créer quelques autres types de zones de commentaire. Combinés, ceux-ci expriment des déclarations simples, des pensées et des exclamations. J'essaie de ne pas trop crier sur mon profil, alors ne vous inquiétez pas, ils sont purement décoratifs. Je ne crie pas à mes disciples :)

Étape 29

Il est temps d'ajouter une bio et des liens. Le petit texte simple est Calibri régulier et les gros titres sont en Rockwell Std Bold. L'esperluette est Mme Eaves Medium Italic. Utilisez les mêmes couleurs que l'oiseau.

Astuces rapides

N'oubliez jamais d'essayer différentes méthodes d'anticrénelage lorsque vous travaillez avec du type, en particulier à basse résolution. Dans le premier exemple, le mot est en mode Sharp. Notez que les lettres du milieu semblent se déformer et tomber en dessous de la ligne du bas. C'est peut-être subtil, mais c'est une erreur.

Non seulement cela, mais les lettres ne sont même pas parallèles. Chacun semble avoir sa propre orientation. Pour résoudre ce problème, essayez une autre méthode d'antialiasing, dans ce cas, Strong. Maintenant, les lettres ont une orientation commune et une ligne de base nivelée.

Alors que la précédente peut être une solution subtile, la suivante est une erreur très commune. Un suivi inégal peut entraîner le chevauchement de certaines lettres et l’éloignement des autres. Bien que vous ne puissiez généralement pas remarquer ces bogues sur de petites lignes de texte régulières, le texte les plus affichés révélera ces incohérences..

Pour résoudre ce problème, vous devez modifier manuellement l'espace entre chaque lettre. Choisissez l'outil Texte (T), cliquez à l'intérieur d'une ligne de texte et faites glisser une sélection des deux premières lettres. Entrez un nombre approprié dans le champ de suivi. Lorsque vous avez trouvé le bon espace, sélectionnez les deuxième et troisième lettres et faites de même. Parcourez chaque espace de lettres deux à deux jusqu'à ce que le suivi soit correct. Vous pouvez voir la différence entre le suivi personnalisé et standard dans les instances ci-dessus et ci-dessous du mot.

Étape 30

Trouvez le calque de forme vectorielle où vous avez tracé l'oiseau. Cliquez sur la vignette Masque vectoriel du calque pour afficher le chemin. Utilisez l'outil de sélection de chemin (flèche noire) pour sélectionner le chemin et le copier (Commande + C). Ouvrez Illustrator, collez le chemin (Commande + V) et appuyez sur Entrée dans la fenêtre qui s’ouvre dans Illustrator (Forme composée). Sélectionnez la couleur du trait et choisissez le blanc (c'est le noir ici pour que vous puissiez le voir). Réglez le poids de trait sur 2 pt.

Étape 31

Affichez le panneau Traits (Fenêtre> Trait) et utilisez les paramètres suivants. Ne fais pas attention au fond gris.

Étape 32

Copiez-le (Commande + C) et collez-le (Commande + V) dans le fichier Photoshop en tant qu'objet intelligent. Répétez le processus avec les zones de commentaire aussi.

Étape 33

En utilisant la même police de titre, créez quelques accents typographiques autour du commentaire. Nous allons également utiliser une variété d’oiseaux du pack Birds 2 Vector de l’Arsenal de Go Media. Il suffit de les coller en tant qu’objets intelligents et de leur donner une superposition de couleurs avec la couleur de votre choix..

Étape 34

Utilisez différents oiseaux avec des couleurs différentes. Essayez de ne pas en faire trop, ou les chevaucher.

Étape 35

Je voulais aussi donner l’idée que les oiseaux portent des messages, alors j’ai placé des lettres autour, à proximité ou retenues par les oiseaux. Ils sont tous avec l'une des trois polices que nous avons utilisées plus tôt.

Étape 36

Répétez également le motif dans le coin supérieur. Ne le faites pas scientifique. Gardez l'orientation au hasard, et pas nécessairement dans la même direction.

Étape 37

Et ensuite, répartissez les oiseaux sur la toile. N'oubliez pas de les effacer à droite et en bas en plaçant de moins en moins.

Image finale

C'est tout! Notre fond twitter est complet. Vous pouvez afficher l'aperçu final de l'image ci-dessous ou l'image en taille réelle ici.

Ceci est la version que j'ai sur mon profil twitter.