Comment créer des personnages de dessins animés à partir d'objets du quotidien

Bonjour, je m'appelle Jesse Hora Dot Com. Ce tutoriel vous guidera à travers le processus que j’utilise lors de la création d’une illustration, plus précisément de la technique permettant de créer ce que j’aime appeler illustration d'objet.

Vous pouvez trouver les fichiers source dans le répertoire "source" inclus dans les fichiers que vous avez téléchargés. Vous voudrez peut-être les parcourir brièvement avant de commencer..


Étape 1 - Concept

Comme il s’agit d’un tutoriel sur le processus technique de création d’œuvres vectorielles (art), des choses sérieuses, Je pensais que ce serait un bon contraste de choisir un contenu / une image simple et ludique. Il n'y a rien de plus simple qu'un bon vieux crayon et papier. Classique. Alors j'ai commencé à réfléchir et ai eu l'idée de faire une illustration "Crayon contre Gomme", inspirée par des affiches de boxe vintage, mais avec ma touche originale. Le concept est terminé, il est temps de se rendre au travail.



Étape 2a - Croquis

Lorsque je propose des idées, j’aime toujours les esquisser rapidement, au départ simplement pour les obtenir sur papier afin de ne pas les obtenir, mais aussi pour commencer à réfléchir à la façon dont elles fonctionneront visuellement. Voici l'esquisse initiale super rapide.



Étape 2b - Affiner l'esquisse

Comme la plupart des illustrateurs, j'aime bien dessiner une illustration plusieurs fois. Je commence donc à comprendre comment fonctionnent les formes / formes / lignes (c'est difficile à expliquer, mais ça aide vraiment).



Étape 3 - Affiner le croquis

Maintenant, je dois changer de vitesse et préparer les images que je vais illustrer. J'ai pris quelques petites photos rapides des objets. Vous pouvez trouver les fichiers source originaux dans le répertoire intitulé "source" qui se trouvait dans les fichiers que vous avez téléchargés. J'ai calé la gomme un peu avec un pense-bête plié pour obtenir le bon angle. Tu n'avais pas besoin de savoir ça, mais je veux juste être complètement transparent.



Étape 4 - Photographie

Je ne suis en aucun cas un photographe professionnel et je dois donc nettoyer les photos de la gomme et du crayon. Je ne vais pas montrer chaque petite étape ici, car c’est un tutoriel vectoriel, mais c’est un processus assez simple.

Pour la photo de la gomme, sélectionnez l'outil Recadrage et recadrez-le à une taille raisonnable. Allez à Image> Faire pivoter le Canvas 90 CCW. Maintenant, allez dans Edition> Transformation> Retourner horizontalement, puis ajustez les niveaux (Commande + L). Découpez la gomme (comme vous préférez), j'ai utilisé le lasso magnétique et nettoyé dans un masque rapide.

Pour la photo au crayon, accédez à Image> Faire pivoter la toile 90 CW. Ajustez les niveaux (Commande + L). Découpez la gomme (comme vous préférez), j'ai utilisé le lasso polygonal et l'ai nettoyée dans un masque rapide.

Enregistrer les deux fichiers au format TIFF ou PSD.



Étape 5a - Description de l'objet

Enfin, passons au vecteur. Ouvrez les deux fichiers dans Adobe Illustrator et, à l’aide de l’outil Plume, créez le contour des objets. L'image de la gomme est un peu plus facile, donc je vais le faire en premier.



Étape 5b - Lignes intérieures (gomme)

Outre le contour (silhouette), les seuls autres traits dont j’aurai besoin sont les bords de la gomme. C'est bien d'avoir ces lignes pour deux raisons; Je sais d’abord où dessiner les bras et les jambes du personnage. Et deuxièmement, parce que plus tard, vous aurez peut-être besoin des formes intérieures pour définir l'objet..



Étape 5c - Plus de lignes

Maintenant pour le crayon. Encore une fois en utilisant l'outil Plume, je vais simplement décrire l'objet. Sur la droite se trouve un gros plan pour que vous puissiez voir que je dessine simplement la forme extérieure du crayon. Enregistrez les fichiers crayon et gomme en tant que fichiers AI.



Étape 5d - Lignes intérieures (crayon)

Parce qu'il y a tellement de petites lignes et de contours qui pourraient être décrits sur un crayon, je devrai choisir quelles lignes il me faudra et quels détails peuvent être omis. La pièce métallique est vraiment le seul problème, alors je décide de simplifier l’image. Je me concentre moins sur la description parfaite de la photo que sur la forme du crayon. J'utilise beaucoup le raccourci clavier Commande + Y pour ne regarder que les contours. Continuez à vérifier à quel point le travail en ligne devient complexe. Trop de lignes vont boue l'image.



Étape 5e - Oups!

D'accord, je n'avais pas prévu cette étape, mais je vais être complètement transparent et montrer mon erreur. L'image au crayon est beaucoup trop grande pour fonctionner dans l'illustration. J'essaie d'obtenir une quantité décente de détails dans le crayon. J'ai besoin de raccourcir la longueur du crayon pour que la largeur puisse grossir. Je vais résoudre le problème en faisant un saut dans une partie du crayon par Photoshopping et enregistrer sous une image de crayon mise à jour. J'aime toujours enregistrer plusieurs versions, mais c'est ma préférence. Vous pouvez également sauvegarder sur l'original si nécessaire.

Je vais également avoir besoin de corriger le contour dans le fichier Illustrator, ce qui est en fait assez facile. Ouvrez simplement votre fichier de crayon mis à jour dans Adobe Illustrator, copiez le contour de crayon original que vous avez créé dans le fichier AI précédent et collez-le au-dessus (commande + F) de l'image de crayon mise à jour. Puisque vous avez collé devant (ou sur) la nouvelle image, tout est aligné. Tout ce que vous avez à faire maintenant, c’est d’acquérir la Sélection directe (flèche blanche) et de sélectionner la pointe du crayon jusqu’à ce qu’elle s’aligne sur la nouvelle image, puis Enregistrer..



Étape 6 - Directives d'impression

OK, après toutes ces manigances, il est temps de passer aux choses amusantes. Ouvrez un nouveau fichier dans Illustrator dans lequel vous copiez et collez les contours vectoriels des deux objets. J'aime laisser tomber le poids des lignes à une ligne de cheveux (0,25). Imprimons maintenant (Commande + P) ceci! Ces impressions serviront de des lignes directrices pour dessiner les personnages. L'impression de quelques copies laissera beaucoup de place à l'erreur et le redémarrage lors du dessin.



Étape 7 - Dessiner

Ensuite, je vais prendre les impressions et les dessiner directement, ou parfois j'aime utiliser une boîte à lumière et utiliser une nouvelle feuille de papier. Voici quelques exemples de la première entraine toi dessins. À ce stade, je dessine plusieurs fois différentes parties de l'illustration pour affiner le caractère final. J'ajouterais peut-être des trucs amusants comme une moustache ou un oiseau assis sur l'un des personnages.



Étape 8 - Numérisation

Voici les dessins finaux que j'ai scannés. Sur la gauche, j'ai redessiné le travail en ligne que je crée dans illustrator, il sera utile plus tard. Une technique que j'utilise pour faciliter la création du personnage consiste à dessiner séparément les zones qui se chevauchent. Par exemple, je dessine les lacets séparément de la chaussure, car lorsque je compile les dessins, il est plus facile de travailler avec des éléments individuellement..



Étape 9 - Affiner

Maintenant, dans Photoshop, je vais préparer les illustrations à vectoriser dans Illustrator. Ajustez les niveaux (Image> Ajuster> Niveaux) pour obtenir une bonne balance des noirs et des blancs. En utilisant Seuil (Image> Réglages> Seuil), je fais en sorte que la ligne fonctionne uniquement en pixels noir et blanc..

Vous remarquerez que j'ai supprimé les lignes qui définissent l'extérieur des objets. Je l'ai fait parce que je vais utiliser une combinaison de formes dans le travail de ligne et les lignes tracées, de sorte que la connexion de tous les travaux de ligne causera des problèmes plus tard. En outre, comme vous pouvez le voir à côté de l'image au crayon (à gauche), j'ai dessiné une version de l'objet strictement conforme aux contours des photos, car je pourrais en avoir besoin ultérieurement pour la sauvegarde. J'ai zoomé sur le caractère de la gomme pour que vous puissiez voir un peu plus en détail, mais j'ai également dessiné les contours de la gomme.



Étape 10 - Demi-teinte

Comme je suis déjà dans Photoshop, je vais maintenant terminer le travail sur les photos d'objets (vous vous en souvenez?). Une fois que les images sont ouvertes dans Photoshop, je vais effectuer le même processus pour chaque image. Allez à Image> Mode> Niveaux de gris. Puis filtrez> Pixéliser> Couleur demi-teinte. 8 est la dimension de pixel standard et fonctionne généralement assez bien, mais en fonction de l'image que vous manipulez, cela peut prendre quelques essais et erreurs. Puisque vous êtes en niveaux de gris, l’image se transformera en motif de points noirs..



Étape 11 - Trace en direct

Maintenant, j'ai essentiellement quatre fichiers importants différents, les images photographiques en demi-teintes et des lignes tracées à la fois pour la gomme et le crayon. Je vais exécuter tous ces fichiers à travers le même processus exact. Comme chaque image est strictement en noir et blanc, utiliser Live Trace dans Illustrator est un jeu d'enfant..

Ouvrez l'image dans Illustrator, assurez-vous de la sélectionner et allez à Objet> Suivi en temps réel> Options de traçage. Dans la boîte de dialogue qui apparaît, de nombreux ajustements et paramètres peuvent être utilisés pour affiner votre image. Après avoir utilisé cette fonction un zillion de fois, j'ai enregistré les paramètres que je préfère, qui sont les suivants: Mode noir et blanc, seuil à 128, flou à 0, remplissages à la vérification, contours réglés sur Aucune vérification, ajustement du tracé à 1,5px, surface minimale à 2px et angle en coin à 1,5. Hit Trace puis Expand (haut, centre) et juste comme ça vous avez la bonté de vecteur.



Étape 12a - Compiler

J'aime faire chaque caractère dans un fichier séparé, mais c'est le même processus pour chaque caractère, donc je vais vous expliquer les étapes de base. Ouvrez un nouveau document et collez l'image en demi-teinte (rose), appuyez sur Commande + 2 (verrouiller). Accédez ensuite au fichier de travail linéaire de gomme charte et sélectionnez tout (Commande + A), revenez au nouveau fichier et collez le travail linéaire vectorisé devant (Commande + F) de l'image en demi-teinte. Ici, j'ai coloré la gomme en rose et collé le trait noir et blanc en haut. J'ai également supprimé la grande forme de fond blanc afin que vous puissiez voir ce que je veux dire.



Étape 12b - Solutions de formes

Heureusement pour toi j'en ai fait un autre erreur et n'a pas dessiné les bras de la gomme comme une forme séparée. Je copie d'abord la forme que je veux et le colle devant (Commande + F). Dans ce cas, c'est la forme qui fait les bras, mais malheureusement, la plupart des autres travaux de ligne sont liés. Ensuite, je dessine (à l'aide de l'outil Plume) une forme autour de ce que je veux conserver, à savoir les bras. Ensuite, je sélectionne la forme noire et clique sur la zone Intersection entre les zones de la palette Pathfinder. Puis cliquez sur développer (sur la même palette). Tout est corrigé maintenant. Lorsque je supprime le calque de trait noir, la gomme a encore des bras.



Étape 13a - Couleur

Comme le style de cette illustration est simple et caricatural, les couleurs sont basées sur ce qui décrit le mieux la forme et ce qui a le plus de sens. Je n'ai vraiment pas de processus pour cela. Je commence juste à sélectionner des formes et des couleurs. De plus, je trace les contours des objets (rappelez-vous que j’ai dit que j’en aurais peut-être besoin plus tard) derrière.



Étape 13b - Finisseur

La dernière chose que je fais est de cacher la forme de trait noir (cliquez sur l'icône en forme d'œil dans la palette des calques) et de coller le contour de l'objet dessiné (rappelez-vous que j'ai peut-être besoin de celles-ci plus tard) derrière la demi-teinte.



Étape 14 - Terminé

Hip Hip Hourra! J'ai suivi un processus similaire pour créer le caractère de crayon.



Image finale

Pour finir l’illustration, j’ai créé des caractères à dessiner (un tout nouveau tut par lui-même) et créé un ancien motif affiche de boxe. C'est tout le monde!

En savoir plus sur moi et mon processus à JesseHora.com. L'image finale est ci-dessous. Vous pouvez voir la grande version ici.