Dans ce didacticiel, vous allez créer une citrouille fantasmagorique effrayante à partir de rien, entièrement en pixels (éléments constitutifs de l'art numérique). Apprenez à utiliser le panneau Montage de Adobe Photoshop pour animer un visage souriant, clignotant, qui émet un baiser et illumine le spectateur..
1. Dessin de la citrouille
Étape 1
Tout au long de ce tutoriel, je travaillerai dans Adobe Photoshop CC 2014. Ouvrez votre programme et créer un Nouveau document. Mes œuvres finales mesurées 36 px par 30 px, alors j'ai fait mon document 50 px par 40 px à 72 dpi avec un Transparent Contexte.
Étape 2
Commençons par construire la forme de base de la citrouille. Zoom (Z) dans votre document 1600% ou alors.
En utilisant le Outil Crayon (B) avec un 1 px brosse dure, dessiner 7 pixels dans une ligne verticale.
Dessiner 2 pixels de part et d'autre de la première ligne.
Jusqu'à présent, dessinez une ligne verticale supplémentaire de 2 pixels suivi par 1 pixel à la diagonale droite des deux précédentes. Sur le bas du dessin, dessinez 2 pixels diagonaux successivement (voir ci-dessous).
Complétez cette section avec 1 pixel diagonal en haut et deux autres pixels à droite en haut et en bas.
Étape 3
Continuant avec le Outil Crayon et notre forme de base de citrouille:
Avec ce qui a été créé en Étape 2, Ajouter 3 pixels horizontalement vers le haut et le bas du dessin. Dessiner 1 pixel diagonal au-dessus de la ligne des trois tracés précédemment.
Continuez à construire la forme de la citrouille sur le dessus du dessin avec 3 pixels horizontaux. En bas, dessinez 1 pixel diagonal en dessous de l'autre et 2 pixels à droite.
La ligne du haut est 8 pixels à travers. La ligne de fond est 10 pixels à travers.
L'autre moitié est une image en miroir de tout ce qui se trouve à gauche des deux lignes horizontales droites. Utilisez le Outil de chapiteau rectangulaire à Sélectionner, Copier (Control-C), Coller (Contrôle-V), et miroir (Édition> Transformer> Retourner horizontalement) la moitié gauche afin de compléter la forme de base de la citrouille.
Étape 4
Notre citrouille a besoin d'un visage. Créer un Nouvelle Couche dans le Couches panneau et en utilisant le Outil Crayon, Commençons:
L'oeil commence par 3 pixels en ligne et 1 pixel au-dessus d'eux et au centre.
Complétez l’œil avec la troisième ligne de pixels composée de 3 pixels et la quatrième ligne composée de 5 pixels.
Trois pixels à droite de la ligne inférieure de l'œil commencent par le nez. Il est composé de trois rangées: 1 pixel, 3 pixels, et 3 pixels.
Répétez la forme de l'oeil pour l'oeil droit.
Assurez-vous que les yeux et le nez ont 3 pixels les espaces qui les séparent. La bouche commence deux rangées plus bas avec 3 pixels à travers.
Étape 5
Toute cette étape consiste à compléter la bouche:
Le début de la bouche, en partant de la dernière étape, est 9 pixels disposé dans un 3 x 3 boîte.
Dessiner 3 pixels dans une ligne verticale de chaque côté de la boîte dessinée précédemment.
Suivant sont deux colonnes de 2 pixels chacun de chaque côté de la bouche.
Dessinez deux formes en L de chaque côté composées de 3 pixels chaque.
Ajouter 1 pixel de part et d'autre, en diagonale et allant vers l'extérieur. Les bords supérieurs de la bouche se composent de 4 pixels dans une rangée horizontale.
Pour compléter la bouche, placez 1 pixel en diagonale et vers le bas, vers le centre de la bouche, et remplissez les côtés gauche et droit (voir ci-dessous pour la forme exacte). À ce stade, la bouche ressemble un peu à une chauve-souris volante.
Étant donné que ma citrouille sera composée de divers oranges et jaunes, j'ai décidé de changer la couleur de mon dessin au trait en brun (# 6b0f02).
2. Coloration de la citrouille
Étape 1
Les couleurs utilisées dans mon travail final diffèrent de celles avec lesquelles j'ai commencé ci-dessous (elles sont plus saturées et ont été modifiées ultérieurement). Considérez ceci comme une petite leçon pour créer facilement une palette de couleurs harmonieuse. Pour créer les vôtres (ou le faire avec d’autres couleurs), réduisez le Opacité de la couleur au pourcentage indiqué, placez-le sur le 100% orange couleur et sélectionnez la nouvelle couleur avec le Outil Pipette (I). Enregistrer de nouvelles couleurs dans le Échantillons panneau et assurez-vous que le Opacité est remis à 100% pour le reste du tutoriel.
marron 100%: # 760b03
marron 75%: # 902b0d
marron 50%: # ae4a18
marron 25%: # d1692a
Orange 100%: # f2842b Utilisé comme couleur de base.
Orange 40%: # faa912
Orange 20%: # ffcc01
Jaune 100%: # fff25d
Fusionner la couche de visage et le dessin au trait de citrouille et de remplir la citrouille en utilisant le Outil Pot De Peinture et Orange (# f2842b).
Étape 2
Notre citrouille a besoin d'une tige.
En utilisant marron (# 760b03), et le Outil Crayon, dessiner deux lignes verticales de 3 pixels chacun à deux rangs.
Remplissez les deux colonnes avec marron 75% (# 902b0d) et fermez la forme avec 2 pixels de marron.
Utilisation marron50% (# ae4a18) comme couleur de surbrillance sur le dessus de la tige.
Étape 3
Comme il s'agit d'une citrouille, nous devons ouvrir le haut de la citrouille.
J'ai commencé avec le même marron utilisé sur la tige. Du haut de la tige, le milieu du couvercle de la citrouille est 9 pixels vers le bas. Dessiner 8 pixels sur dans ce point central avec 3 pixels sur la rangée suivante de part et d'autre de la ligne médiane.
Connectez le 3 pixels sur de chaque côté avec 1 pixel plus haut.
Couvrir le pixel de coin avec Orange et ombrez le couvercle et en dessous avec marron25% (# d1692a) de Étape 1 dans cette section.
Placez ces pixels orange foncé dans les coins du dessin au trait et sous la tige (voir ci-dessous)..
Étape 4
Concentrez-vous sur ce qui est fait avec l'ombrage dans la citrouille ci-dessous:
Tracez soigneusement les lignes courbes de Brun 25% (# d1692a) en commençant aux empreintes du bas de la citrouille. Les courbes doivent imiter le contour de la citrouille elle-même.
Tapisser le bas de la citrouille et commencer à décaler les pixels orange foncé et orange dans la moitié inférieure de la citrouille.
Décrivez le bas de la bouche, du nez et des yeux aussi.
En option, vous pouvez maintenant choisir d’utiliser un jaune-orange de Section 2, Étape 1 afin d'ajouter des reflets au couvercle, aux yeux, au nez et à la bouche de citrouille.
Les couleurs de cette partie du didacticiel sont plus subtiles que celles que j'ai choisies d'utiliser à l'étape suivante. Si vous aimez mieux ce ton, utilisez simplement l'étape suivante pour obtenir des conseils sur l'ombrage et la mise en évidence, et conservez la palette de couleurs créée. Section 2, étape 1.
Étape 5
Si vous souhaitez une citrouille plus brillante et plus saturée, suivez les étapes ci-dessous:
Remplacer toutes les instances de Brun 25% (# d1692a) sur la surface de la citrouille avec Rouge vif (# ff1300).
Changez la couleur orange de base en # ff7700.
Assurez-vous que la tige supérieure contient des nuances de brun et de brun clair plutôt que de rouge (nous changeons la citrouille plutôt que la couleur du bois de la tige).
Pour la ligne indiquant le couvercle du potiron, utilisez les marrons clairs de Section 2, étape 1. Pour les faits saillants, utilisez Jaunes (# ffcc00) et (# fba912) pour dessiner des petites cases et des lignes décalées de pixels dans le coin supérieur gauche du dessin.
Portez le plus foncé des deux jaunes sur les sommets de chaque section de citrouille. Mettez en surbrillance le bas de la bouche. Ramollir les pixels de l'ombre rouge vif avec Rouge orange (# ff4500).
Utiliser un Marron foncé (# 3e0702) sur le contour du bas et du côté droit de la citrouille. Allégez le côté supérieur gauche du dessin au trait de la citrouille avec des bruns assortis (voir ci-dessous)..
3. Créer les images d'animation
Étape 1
Chaque étape de l'icône animée que nous réalisons nécessitera un calque distinct contenant les modifications dans l'icône. Cela inclut tous les yeux brillants, des changements dans la forme de la bouche, ou une lueur autour de la citrouille.
Assurez-vous que vos composants de citrouille sont tous sur la même couche. Utilisez le Outil Baguette Magique (W) pour sélectionner en dehors de la citrouille et aller à Sélectionnez> Inverse (Shift-Control-I) et alors Sélectionnez> Modifier> Développer et Développer par 1 pixel.
Créer un Nouvelle Couche sous l'icône citrouille dans le Couches panneau. Remplissez la sélection en jaune vif à l’aide des touches Outil Pot De Peinture. J'ai également rempli en noir un autre calque en dessous des deux autres afin que l'icône de la citrouille disparaisse de l'écran plus.
Étape 2
Créer un Nouvelle Couche et couvrez les deux premières rangées de l'œil gauche avec des pixels orange. Couvrir le dernier rang avec 5 pixels de rouge (et la ligne rouge précédente avec des pixels orange). L'œil devrait maintenant être 4 pixels à travers, 1 pixel diagonal sur le côté gauche et deux pixels jaunes au centre de la forme d’œil clignotant.
Étape 3
Il y a trois nouvelles couches de bouche que nous devons dessiner afin de créer l'animation finale.
Faire un Nouvelle Couche au-dessus des autres et utiliser le Outil Crayon dessiner trois colonnes de pixels composées de 1 pixel, 3 pixels, et 2 pixels. C'est le coin gauche de la bouche.
Pour le centre de la bouche, dessinez 2 pixels à droite du coin de la bouche dessinée précédemment. Ajouter 1 pixel par rapport aux deux précédents tirés. Enfin, dessinez un carré de 3 pixels par 3 pixels pour le centre de la bouche.
Miroir le coin de la bouche gauche pour le côté droit.
Utilisez l'orange foncé pour dessiner les coins de la bouche. Voir l'image ci-dessous pour le placement exact des pixels.
Utilisez la couleur orange de base pour combler la majeure partie de l'espace négatif autour de la bouche.
Le rouge vif qui a été placé dans cette partie sera assis directement sous le nez de la citrouille.
Enfin, remplissez les espaces vides avec des rehauts jaunes.
Placez la nouvelle bouche sur la bouche d'origine. La bouche précédente doit être complètement recouverte. Masquer ce nouveau calque pour l'instant.
Étape 4
La bouche devient plus petite et passe d'un sourire ouvert à de jolies lèvres pincées (moins les lèvres puisqu'il s'agit d'une citrouille).
Encore une fois, nous allons commencer par le coin gauche de la bouche, qui se compose de 5 pixels en trois rangées.
Dessine un carré de 3 pixels par 3 pixels pour le centre de la bouche.
Miroir le côté gauche de la bouche pour le côté droit.
En utilisant un orange foncé, tracez deux lignes de 4 pixels et placez des pixels supplémentaires dans les coins de la forme de la bouche.
Encore une fois, utilisez du rouge vif pour le bas du nez de la citrouille (cela vous aidera à l'aligner) et le bas de la bouche.
Remplissez l'espace négatif avec l'orange.
Placez cette couche sur la bouche de la citrouille, en veillant à ne pas laisser apparaître la bouche d'origine. Masquer ce nouveau calque pour l'instant.
Étape 5
La bouche est maintenant en mode baiser complet. Encore une fois, créez un Nouvelle Couche et allons-y.
La bouche entière est deux rangées de 3 pixels et un seul pixel au centre de la dernière ligne.
5 pixels sont dessinés sur le côté gauche: 2 pixels vers le bas, 2 pixels en diagonale, sauter un espace, et 1 pixel au coin de la bouche. Faites-le en miroir sur le côté droit et dessinez 5 pixels sur sur le dessus de la bouche.
En utilisant le rouge, dessinez 3 pixels à travers qui sera encore une fois le fond du nez de la citrouille. Dessiner 5 pixels dans le bas de la bouche et disperser quelques pixels dans les coins de la conception.
Remplissez la zone avec de l'orange.
Placez la nouvelle bouche sur l'ancienne bouche en vous assurant que la bouche d'origine de la citrouille est entièrement recouverte. Encore une fois, cachez cette couche dans le Couches panneau pour le moment.
Étape 6
Pour les yeux et la bouche éclairés, une couche sera nécessaire.
Zoom dans le visage de la citrouille à 1600%, ou alors.
Créer un Nouvelle Couche et remplissez les yeux et le nez de jaune. Alignez le côté gauche d’eux avec le rouge pour voir facilement le bord intérieur des traits du visage..
Utilisez du brun clair sur le bord gauche des yeux et de la bouche. Utilisez un marron clair sur le bord inférieur.
Remplissez la bouche avec du jaune vif, en répétant les étapes précédentes pour quelles couleurs sont utilisées dans le dessin.
Un coup de la citrouille quand "complètement allumé".
4. Animation de la citrouille
Étape 1
Ouvrez le Chronologie panneau et choisissez Créer une animation de cadre du menu déroulant en son centre.
Pour changer ce qui se passe dans chaque image, vous devez appuyer sur Nouveau cadre dans les options du panneau et ajuster la conception dans le Couches panneau à chaque fois. Notez le changement ci-dessous avec la deuxième couche de bouche visible dans le deuxième cadre et masquée dans le premier..
Étape 2
Voir l'image ci-dessous pour une ventilation visuelle des images utilisées dans l'animation. Chaque étape correspond à une couche. J'ai également décomposé ce qui se passe dans chaque image ci-dessous:
La citrouille de base avec toutes les couches supplémentaires cachées. L'heure est fixée à 1 seconde.
La couche de contour jaune (de Section 3, étape 1) Est visible dans ce cadre, mais il est à 25% d'opacité. L'heure est fixée à 0,1 seconde.
La troisième image a la couche de contour jaune à 50%Opacité et la couche de bouche de Section 3, étape 3 est maintenant visible. L'heure est fixée à 0,1 seconde.
La couche de contour jaune est à 100% d'opacité. La bouche de Section 3, étape 4 est visible. L'heure est fixée à 0,1 seconde.
La bouche de Section 3, étape 5 est visible. L'heure est fixée à 0,1 seconde.
La couche d'oeil clignotant de Section 3, étape 2 est maintenant visible. L'heure est fixée à 0,1 seconde.
Ce cadre est identique à Cadre 5. L'heure est fixée à 0,1 seconde.
Ce cadre est identique à Cadre 4. L'heure est fixée à 0,1 seconde.
Ce cadre est identique à Cadre 3 sauf pour la couche de contour jaune dont Opacité est réglé sur 100%. L'heure est fixée à 0,1 seconde.
Toutes les couches supplémentaires des yeux et de la bouche sont cachées dans cette couche. L'heure est fixée à 0,1 seconde.
La couche des yeux et de la bouche éclairés est maintenant visible dans ce cadre. L'heure est fixée à 1 seconde.
Toutes les couches supplémentaires des yeux et de la bouche sont cachées. La couche de contour jaune est définie sur 50%. L'heure est fixée à 0,1 seconde.
La couche de contour jaune est définie sur 25%. L'heure est fixée à 0,1 seconde.
Étape 3
Lorsque vous définissez le délai sur vos images, vous pouvez sélectionner plusieurs images et les modifier en même temps. Assurez-vous également que votre Options de boucle sont mis à Pour toujours.
Étape 4
Lorsque vous exportez votre fichier animé, allez à Fichier> Enregistrer sous et sélectionnez .gif. Comme il n’ya pas beaucoup de couleurs dans ce fichier et que la taille du fichier ne nous préoccupe pas trop, gardez les couleurs au même endroit. 256 et les autres paramètres à leur valeur par défaut.
Si vous agrandissez votre fichier (au cas où vous le voudriez aussi grand que mon image finale), assurez-vous que Qualité est réglé sur Voisin le plus proche il n'y a donc aucune perte de qualité de pixel aux contours nets. Encore, Options en boucle devrait être réglé sur Pour toujours (sauf si vous voulez votre .gif mettre en boucle un montant déterminé pour une raison quelconque).
Travail fantastique, vous êtes à travers!
Excellent travail pour créer une citrouille amusante et animée. J'ai les deux versions agrandies originales ci-dessous afin que vous puissiez voir la différence entre les tailles et les détails dans l'icône de pixel.
Pour plus de tutoriels pixel art ici Tuts+, consultez cette petite liste:
Créer une série d'icônes Pixel Art de petit-déjeuner dans Adobe Photoshop
Créer un pixel art avec une palette limitée en 10 étapes avec Photoshop
Comment créer un sprite Pixel Art animé dans Adobe Photoshop
Kandi Runner: Créez un sprite Pixel Art à partir de zéro
Share
Ce que vous allez créer
Accentsconagua
