Share
Ce que vous allez créerBienvenue dans mon tutoriel sur la création d'actifs d'animation dans Adobe Photoshop. Ce tutoriel ne vous apprendra pas spécifiquement comment dessiner des éléments. Il s’agit plus de penser aux éléments d’animation. De quoi mon animateur a-t-il besoin et pourquoi? Nous allons expliquer ce qu'est Title Safe et l'importance d'un étiquetage correct.
Pour ce tutoriel, je vais utiliser Little Miss Muffet comme histoire.
Petite Mlle Muffet
Assis sur un tuffet,
Manger de caillé et lactosérum;
Survint une araignée,
Qui s'est assis à côté d'elle
Et effrayé Miss Muffet loin.
Pour faciliter la création d’actifs, nous allons dresser une liste de ce que nous devons créer. Cela nous aidera également à configurer notre document Photoshop à l'avance..
Pour notre scénarimage, vous pouvez vraiment configurer le document à la taille de votre choix. Cependant, juste pour garder les choses en proportion, j’ai opté pour 1920 x 1200 px à 72 dpi, avec le Mode de couleur mis à RVB (couleur du moniteur)
Voici comment j'ai configuré le storyboard. Chaque ligne de la comptine a été dotée de son propre panneau. Pour cela, nous n’avons pas besoin que ce soit vraiment détaillé - pensez-y comme une vignette. Nous avons juste besoin d'une idée de base de l'action, qui peut être montrée avec des flèches et des commentaires si nécessaire. C'est utile pour l'animateur afin qu'il sache ce qui doit se passer. Ces cadres peuvent également être utilisés pour déterminer la durée pendant laquelle chaque action doit être affichée à l'écran et pour s'assurer qu'elle correspond lors de la définition du paramètre audio..
Voici mon scénarimage approximatif, et l'animateur, Dave Bode, est satisfait de son apparence. Je peux donc commencer à créer les actifs..
Parce que pour cela la scène ne change pas, nous allons créer tous les fichiers .psds dans le même document. After Effects ressemble à un Photoshop basé sur le temps et utilise donc des calques et des groupes de la même manière. Pour des animations plus complexes, il est conseillé de créer des personnages, des actifs et / ou des environnements dans des documents séparés..
Pour cette animation, Dave souhaite que la taille du document soit de 3840 x 2160 px à 72 dpi, ce qui correspond à une résolution 4K. C’est pour qu’il puisse disposer d’une petite salle de jeux pour les zooms et les panoramiques au besoin. Je crée un Nouveau document en allant à Fichier> Nouveau.
dans le Couches panneau que j'ai créé Groupes placer nos actifs dans. Groupes peut être créé en cliquant sur l’icône du dossier au bas de la fenêtre. Couches panneau. En cela, vous pouvez faire glisser ou créer Nouvelles couches. Cela garde tout en ordre.
En prime, vous pouvez attribuer une couleur au groupe en cliquant dessus avec le bouton droit de la souris et en sélectionnant une couleur. Cela changera automatiquement tous les noms de calques à l'intérieur de ce groupe avec cette couleur. Vous pouvez changer la couleur des couches dans les groupes en cliquant dessus avec le bouton droit de la souris..
Être organisé avec Layers vous fait gagner beaucoup de temps et est particulièrement important lorsque les délais sont serrés, qu'il est tard dans la nuit et que vous venez de boire le dernier café..
L'élément le plus complexe de l'histoire de Miss Muffet est l'araignée, principalement en raison de son nombre de membres. Voici comment j’ai organisé les couches en vue de la création d’actifs. C’est notre point de départ, mais il se peut que nous ajoutions plus de couches à l’avenir pour des expressions, des accessoires, etc. supplémentaires..
Il y a de très bonnes chances que certaines des couches puissent être modifiées, déplacées, mises à jour, dupliquées et supprimées. Ne prenez donc pas ce modèle pour mot pour mot. C'est juste pour donner une idée de la façon dont les choses peuvent être mises en place. Lors de la création d'actifs, il est facile de passer à côté de choses apparemment simples, que ce soit par votre propre planification ou par votre client ou directeur (artistique), alors attendez-vous à des changements.!
Quel est le titre en sécurité? Partout dans le monde, les utilisateurs utilisent des appareils de formats et résolutions différents, et nous devons tenir compte du plus petit dénominateur commun. La plupart des gens visionnent cette animation sur un écran 16: 9, mais quelqu'un peut toujours disposer d'un moniteur 4: 3. Nous devons donc nous assurer qu'aucune information essentielle n'est coupée sur les bords. Vous trouverez ci-dessous un exemple de limite de sécurité du titre..
Dans cet exemple, la zone bleue sera visible sur tous les périphériques et la zone violette est à peu près la limite du lieu où une action doit avoir lieu. Nous devons garder cela à l'esprit lors de la création de notre actif. Ainsi, lorsque vous travaillez sur une animation, veillez à ce que le titre de votre animateur soit protégé de manière appropriée..
La croix sur le carré bleu indique le centre de la scène et les lignes perpendiculaires sur le pourtour indiquent les points intermédiaires de la scène..
Ce que je ferai ensuite est de sélectionner cette image et de la placer dans mon psd. Cela varie en fonction de la manière dont votre titre est fourni. Un moyen rapide d’obtenir cette image est d’avoir un écran d’impression d’après After Effects d’une scène 4K avec sécurité du titre appliquée. Cela peut ne pas être aussi clair et net que l'exemple ci-dessus, donc si vous sentez que vous allez faire beaucoup de travail d'animation dans Photoshop, il peut être intéressant de nettoyer les lignes..
Nous commençons par des croquis approximatifs de tous les éléments. Pourquoi faisons-nous cela? Ceci afin que nous puissions obtenir les tailles relatives correctes. Des choses comme: "Le tuffet est-il assez grand pour que deux personnes puissent s'asseoir?" "Quelle doit être la taille du soleil dans le ciel?" "Y a-t-il assez de place pour que l'action se produise?"
Pour chaque ensemble d'éléments, je vais vous montrer le processus depuis l'étape de l'esquisse jusqu'à l'étape de l'actif complet. Commençons par la mise en scène: le fond.
Tout d’abord, j’ai brouillé l’arrière-plan avec le tuffet, la petite mademoiselle Muffet et l’araignée en position assise pour que tout soit à la bonne taille. Chaque élément de l'esquisse est sur un calque séparé pour plus de commodité.
Ensuite, je désactive les calques de personnage et de tuffet et ne traite que les éléments d’arrière-plan..
Maintenant que notre scène de base est ébauchée, nous devons déterminer ce dont nous avons besoin. Le nuage va bouger, mais il n'y aura pas de changement de formulaire. Cependant, je pense qu’il serait intéressant d’animer les rayons du soleil, donc je pense que nous aurons deux séries de rayons que Dave pourra atténuer ou couper entre.
Avec certains projets d’animation, il y aurait probablement des choses comme des feuilles de modèle et des couleurs pré-arrangées avec le client, mais dans ce cas, c’est pour le plaisir que je dessine à la volée.!
Ici, j'ai désactivé tous les calques inutiles et réduit l'opacité de l'esquisse. Définissez le dossier d'esquisse sur Multiplier dans le Couche styles, il est donc plus facile de voir.
J'ai décidé de réduire le soleil parce qu'il est trop grand. Je le fais en sélectionnant le soleil ainsi que les deux couches de rayons et en appuyant sur Contrôle-t à Transformer. Nous devons nous assurer que les éléments de la scène ne dominent pas l'action.
Voici comment les couches d'environnement ont été organisées.
Le tuffet est un élément assez simple à ajouter à la scène, mais il est également très important, car Little Miss Muffet et Spider doivent pouvoir s’asseoir dessus. Un tuffet est comme un tabouret ou un grand coussin.
Ci-dessous, la scène avec le tuffet est esquissée au centre, car c'est là que la majorité de l'action doit avoir lieu..
Lors de la création de scènes, planifiez-les toujours. Les caractères doivent être dimensionnés par rapport à leur environnement et les uns aux autres. Comme vous pouvez le constater, j’ai également inclus un brouillon du bol pour le caillé et une cuillère comme référence unique pour nous. Un peu de planification peut économiser beaucoup de travail plus tard. Ici, nous avons rédigé le tuffet et en utilisant un croquis approximatif des personnages, nous pouvons vérifier qu’ils s’agenceront bien. Cela peut être une image utile à envoyer à votre animateur.
Voici comment les actifs seront fournis à notre animateur. J'ai dessiné des herbes qui se chevauchent pour relier le tuffet au sol, mais je l'ai conservé sur un calque séparé au cas où l'animateur souhaite appliquer certains effets à ce dernier dans After Effects..
.
Quand il s'agit de choses comme les araignées, vous allez avoir des éléments répétitifs, alors pourquoi dessinez-les chacun à la main? Voici un moyen facile d’obtenir de multiples fonctionnalités en un clin d’œil!
Maintenant, les araignées peuvent avoir un nombre variable d'yeux, et nous ne voulons pas dessiner chacun d'eux individuellement. Sur un Nouvelle Couche peindre un oeil.
En tenant Alt et ayant le Outil de déplacement (V) sélectionné, faites glisser l'œil sept fois de plus et positionnez tous les yeux sur le visage.
Sur un Nouvelle Couche, peignez une paupière fermée sur l'un des yeux. Répétez le processus de copier coller sur les sept autres yeux.
Disposez les couches de manière à ce que les paupières correspondantes reposent au-dessus des globes oculaires. Cachez les couches de couvercles fermés et sélectionnez chaque ensemble d'yeux et de couvercles. Presse suivante Contrôle-t pour les redimensionner et répéter le processus avec les autres jeux d'yeux et de paupières.
Vous devriez vous retrouver avec un ensemble comme celui-ci. Si vous allumez et éteignez la couche de couvercles, vous aurez l’impression de vous faire un clin d’œil.!
À moins que vous n'animiez un mille-pattes, M. Spider sera probablement un exemple du plus grand nombre d'actifs pour les jambes que vous devrez créer. Heureusement, les pattes d'araignée sont assez uniformes, ce qui nous permet de gagner du temps..
Vous trouverez ci-dessous nos brutes d'araignées: à l'avant et de côté. En raison de la conception simple, nous pouvons utiliser les formes des jambes pour les vues de face et de côté. Ayez votre brouillon de feuille de modèle sous la main pour cette section.
Dessinez les trois parties de la jambe: la cuisse, le mollet et le pied. Je vais faire chacun sur un Nouvelle Couche afin que Dave puisse animer ces sections indépendamment. Lorsque je dessinerai les trois sections, je veillerai à ce qu'elles se chevauchent légèrement. Il peut choisir d'utiliser l'outil Marionnettes dans After Effects pour pouvoir joindre les trois sections de jambe. D'après mon expérience, il vaut mieux donner à l'animateur des options!
Une fois que vous avez peint vos trois sections de jambe, sélectionnez la cuisse, le mollet et le pied, puis copiez-les trois autres fois. Vous pouvez le faire en sélectionnant les trois couches en maintenant Décalage et en les faisant glisser vers le Nouvelle Couche icône au bas de la Couches panneau, qui est un carré avec un coin plié.
Sélectionnez deux jambes et en utilisant Transformer, lequel est Contrôle-t, Retournez-les horizontalement en allant à Édition> Transformer> Retourner horizontalement. Regroupez chaque jambe individuellement et attribuez-leur un nom utile, comme Copie 2..
Nous allons répéter le processus de création de trois sections pour les bras: le bras supérieur, le bras inférieur et la main. Rappelez-vous lorsque vous peignez les sections pour permettre un petit chevauchement.
Voici les actifs de Spider front-on terminés. Il est dans cette pseudo-pose pour plus de commodité et je suis sûr que Dave trouvera plus facile de commencer à animer avec lui.
Copiez ensuite toutes les couches de jambes et de bras, collez-les dans le groupe latéral et réorganisez-les selon vos besoins..
Voici la section organisationnelle non créative qui, bien que peu amusante, est très nécessaire. Vous vous remercierez plus tard pour vérifier que tout est en ordre. Voici une ventilation des actifs de Spider sur le front.
La canne est l’un de ces atouts formidables. Nous pouvons simplement la copier et la coller pour les vues de face et de côté. Cela pourrait ne constituer qu'un atout, mais comme les araignées frontales et latérales font partie de leurs propres groupes, cela signifie que votre animateur n'aura pas à rechercher les sections individuelles..
Organisez toutes les sections de bras dans des dossiers clairement définis. Il peut être utile de les coder par couleur. Assurez-vous que les mains et les bras inférieurs et supérieurs de chaque groupe sont étiquetés.
Comme auparavant, il s’agit d’une tâche d’étiquetage et voici comment j’ai exposé cela à Dave.
Les yeux! Pour cela, assurez-vous que le bon œil fermé correspond au bon œil ouvert qui doit être directement en dessous.
Heureusement, c'est plus simple à organiser! Nous avons ici la tête de base et les mandibules de l'araignée (si vous n'êtes pas familier avec l'anatomie des arachnides, ce sont les morceaux autour de la bouche de l'araignée). Je les ai séparément pour que Dave puisse les animer s’il le souhaite..
Une autre section simple! Nous avons ici l'abdomen (le cul de l'araignée) et le haut du corps. Les deux sont sur des calques séparés à des fins d'animation potentielles. Gardez les pièces étiquetées!
Comme la plupart des actifs sont des copies les uns des autres, les seules différences entre l’araignée de profil et le front-on sont les suivantes:
J'ai inclus des captures d'écran de la configuration de la couche pour votre commodité. N'oubliez pas de tout clairement étiqueté!
C’est le seul changement important pour l’araignée, où l’élève a toujours été déplacé au centre de l’œil et où, au lieu de huit yeux, il n’ya plus que cinq yeux..
Ici, nous avons clairement défini les atouts de notre araignée pour Dave!
RAPPELLES TOI: Un étiquetage correct esttrèsimportant.
Whey-hey! La section des araignées est terminée et nous venons de préparer le déjeuner de Mlle Muffet. Cela a été décomposé en un bol, du lait caillé, une cuillère et du lait caillé à la cuillère.
"Pourquoi?" tu demandes. Parce que je pensais que ça pourrait être cool si, quand Miss Muffet a peur, le contenu de son bol s'envole!
Regroupez-les, puis étiquetez comme avant.
Maintenant que les éléments simples ont été créés, nous avons la tâche plus délicate de créer des actifs pour les choses qui bougent. Pour Little Miss Muffet, nous aurons besoin de deux éléments: le profil et le devant. Le front est pour elle en train de manger, et le côté est pour elle en courant devant la caméra.
Mlle M est un peu plus délicate que l’araignée en ce sens qu’elle a besoin d’anatomies et de vêtements différents et qu’elle aura donc un profil différent de celui d’être droite. Voici une liste de toutes les parties que j'ai créées.
Voici comment la belle petite Mlle Muffet a tout peint. Ils grandissent si vite! *renifler*
Voici les pièces principales de ses vêtements, à l'exception de ses chaussures et de ses manches. Pour plus de commodité, j'ai gardé les manches avec les bras et les chaussures avec les jambes..
Voici ses expressions secondaires, qui ne sont que terreur.
Assez simple ici. J'ai peint le bras droit pour représenter la peur pure.
La jupe cache la plus grande partie de la jambe, mais j’en ai donné à Dave un peu plus au cas où.
J'ai gardé ses cheveux séparés pour que, quand elle court, Dave puisse les animer en traînant derrière elle.!
Pour que cela reste vraiment expressif, j'ai créé une variété de formes pour la bouche et les lèvres afin que Dave puisse l'animer en mangeant et en état de choc. Les cheveux sont dedans, comme les parties de la bouche sont en haut de la Couches pile et les cheveux doivent être sur tout.
Tout comme l’araignée, Mlle Muffet a les yeux ouverts et fermés, mais avec l’ajout de sourcils pour exprimer son expression..
J'ai regroupé son corps et ses vêtements ici car ils ne bougeront pas beaucoup pendant qu'elle est assise. Si vous remarquez la couche assise de la jupe, il y a un masque que j'ai inclus pour permettre aux jambes de transparaître, et si Dave a besoin de toute la jupe, elle est là pour lui..
Les bras sont comme avant, même si je sentais que nous avions besoin de nos mains quand elle tient le bol et la cuillère.
J'ai ajouté les bras sans les mains dans un dossier séparé pour l'animation avec les mains.
Jambes droites pouvant être utilisées assises ou debout.
Comme avec le profil, j'ai mis ses nattes comme leurs propres pièces à utiliser comme un autre outil émotionnel.
Cela résume nos éléments de base. Ensuite, modifiez les actifs pour qu'ils soient aussi beaux que possible.!
Nous devons également ancrer Little Miss Muffet et l’Araignée. Je vais donc créer une couche d’herbe sur laquelle les pieds des personnages se déplaceront derrière..
Sur un Nouvelle Couche, tracez une ligne approximative où vous souhaitez que l'herbe aille. Faites-en une couleur contrastante évidente.
Commencez à peindre les brins d’herbe le long de la ligne à l’aide d’une brosse de votre choix.
Une fois que vous avez peint tout au long de la ligne, Copie la couche en appuyant sur Control-C et alors Coller (Contrôle-V). ensuite Transformer (Contrôle-t) puis retournez manuellement l’herbe et faites-la pivoter pour la rendre un peu plus luxuriante.
Ensuite, verrouillez la transparence du calque en appuyant sur la petite icône d'échiquier située à côté de Fermer à clé sur le Couches panneau. Ajoutez une variété de légumes pour donner de la variété. Déverrouillez la transparence et prenez une gomme douce (E) et ramollir le bord de la base d'herbe.
Je duplique les couches d'herbe, puis les retourne, les transforme et les gondole pour les rendre légèrement différentes. Sur l’herbe la plus proche de la caméra, je brouille l’herbe en utilisant Flou gaussien donner l'illusion de profondeur. Flou gaussien peut être trouvé en allant à Filtre> Flou> Flou Gaussien. J'ai brouillé l'horizon de l'herbe dans le Environnement dossier légèrement juste pour donner un peu de profondeur, en utilisant le même Flou gaussien méthode.
Ici, j'ai changé en Petite Mlle Muffet pour m'assurer que ça a l'air bien avec les deux personnages.
Je suis vraiment ravi de l'apparence de l'herbe. J'ai donc divisé les huit couches d'herbe en quatre couches simples et les ai nommées en conséquence..
Dave va s'occuper des crédits, j'ai donc simplement placé du texte dans le psd pour lui faire gagner du temps. La police que j'utilise est Futura Handwritten.
Pour cela, j'ai créé un écran de titre, le crédit de Dave et mon propre crédit. Vous pouvez le faire en sélectionnant simplement le Outil de type horizontal (T), en sélectionnant la police de votre choix et en tapant ce dont vous avez besoin sur chaque couche. Alignez le texte au milieu de l'écran en appuyant sur Contrôle-t à Transformer et en alignant les réticules du texte sur ceux du titre 4K en toute sécurité.
Notre dernière étape consiste à vérifier que toutes les couches sont nommées et qu’il n’y en a pas, par exemple. roughs, couches vides, palettes de couleurs.
Enregistrez le fichier .PSD dans un dossier tel que "Dave Animation Assets". Dans ce dossier, placez tout ce dont votre animateur aura besoin, tels que le scénarimage, le script, une voix off (si vous le fournissez) et toutes les polices (que vous pouvez distribuer et détenir les droits correspondants). Sinon, pixellisez tous les calques de texte. Livrez ensuite ce dossier à votre animateur via FTP, clé USB ou réseau, puis masquez-le.!
J'espère que vous avez apprécié apprendre à créer des éléments d'animation dans Adobe Photoshop. Une fois que vous avez cloué le côté organisation de cette activité, vous pouvez laisser libre cours à votre créativité! J'ai hâte de voir ce que Dave Bode crée avec mes éléments!
Accentsconagua