Il y a beaucoup de choses que vous pouvez faire lorsque vous créez un menu ou une des nombreuses interfaces présentes dans un jeu vidéo. Dans le cas de ce tutoriel, nous allons prendre le temps de jouer à nouveau avec le pixel art pour créer quelque chose d'inspiré par les RPG qui vous ramène à des écrans de menu 16 bits..
1. Configurez votre document et votre arrière-plan
Étape 1
Le pixel art est petit. Dans le cas de cette conception, nous ne sommes pas trop inquiets de son contenu ni de son affichage (dans le cas où vous travaillez sur une conception de jeu spécifique, vous respecteriez bien entendu ces contraintes)..
S'ouvrir Adobe Photoshop et créer un Nouveau document qui mesure 254 px par 117 px à 72 ppi. Ce sera le fichier de travail principal que nous utiliserons tout au long du tutoriel..
Étape 2
J'ai choisi d'aider à donner le ton à cette conception en commençant par le motif de fond.
Créer un Nouveau document c'est 10px par 10px à 72 ppi. J'ai choisi des teintes de vert à la menthe et à la sauge (# daf5d2, # 8ca784, et # 748f6c du plus clair au plus sombre).
En utilisant le Outil Crayon (B) avec le pinceau par défaut à 1px commencez au centre de la conception avec le vert le plus clair. Dessine une petite boîte de quatre pixels avec deux pixels de chaque côté (garder les coins ouverts). Trois pixels up commence les lignes diagonales qui s'étendent 5 pixels, en diagonale de chaque côté du petit document. Pour terminer le vert menthe, placez trois pixels dans chaque coin du document. Pour les deux nuances de sauge, remplissez l’espace autour de chacune avec des rayures diagonales de couleur.
Pour faire de ce motif un motif simple, allez à Édition> Définir un motif et donnez un nouveau nom à votre motif. Revenir au document créé dans Étape 1 et utiliser le Outil seau de peinture (G) pour remplir la couche de fond de votre interface utilisateur avec modèle sélectionné au lieu de premier plan dans les options de l'outil. Vous pouvez sauvegarder ou supprimer le document de modèle original créé à cette étape..
2. Créer la sangle en cuir
Étape 1
Créer un Nouvelle couche (Control-N) et saisir le Outil Crayon et tracez une ligne diagonale de 20 pixels simples et une ligne perpendiculaire de 11pixels en marron (# 6c0e04).
de chaque côté de la ligne perpendiculaire courte, tracez 3 Additionnel pixels (voir ci-dessous pour l'angle).
Passer deux lignes de pixels diagonaux et dessiner une autre ligne de 9pixels.
Ignorez une autre ligne de pixels diagonaux et fermez le petit rectangle diagonal (voir ci-dessous). Dessinez l’autre côté du bracelet en cuir avec 20 Additionnel pixels diagonaux (sans doute, vous pourriez dessiner cela après la première partie de cette section).
Étape 2
Complétez le bas de la sangle avec 7pixels (va de gauche à droite, en diagonale).
En haut de la dragonne, sautez un pixel de chaque côté du fermoir et dessinez 3 pixels vers le coin droit du document et 1 pixel de chaque côté allant de gauche à droite.
La diagonale en haut du fermoir est 11 pixels à travers.
Pour terminer le fermoir, dessinez 1 pixel de chaque côté et ajouter un autre 11 pixels en travers d'une ligne perpendiculaire.
Étape 3
Terminez la sangle avec deux lignes diagonales de pixel.
Soit remplissez les sections de la sangle avec brun clair (# bb5f15) avec le Outil Crayon ou le faire avec le Outil Pot De Peinture.
N'oubliez pas de remplir le centre de la sangle.
Pour le fermoir, j'ai utilisé jaune d'or (# fbc423).
Étape 4
À ce stade, j'ai décidé de créer un Nouvelle Couche pour travailler sur le rendu du bracelet en cuir. Commencez par des rehauts utilisant un brun plus clair que la couleur de base (# d67b1b) avec des lignes diagonales composées de 2 ou 3 pixels épais.
Pour les ombres, alignez les côtés de la dragonne avec du brun foncé (# 9b3f0e) ainsi que de fines lignes à côté du fermoir et tout au long de la sangle (voir ci-dessous) en diagonale, sur toute la largeur de la sangle.
Répétez de l'autre côté de la sangle.
Utilisez du brun foncé au centre de la dragonne, en alignant les bords supérieur et inférieur de cette section de pixels. Pour le fermoir en or, tracez des lignes diagonales d’ocre jaune (# c27b17) sur le bord supérieur et inférieur et la crème (# f8dd92) Décalés dans la partie centrale du fermoir. Fusionner (Contrôle-E) la sangle se couche (en la séparant de la couche de fond).
3. Chaîne et papier
Étape 1
Commençons par le dessin au trait pour la chaîne. Il connectera le bracelet en cuir au menu navigable.
Commencez par le haut du premier lien: 2 pixels en ligne avec 2 pixels descendre en diagonale sur deux rangées.
Connectez la première rangée de pixels diagonaux en 2 pixels et dessiner 3 pixels en quatre colonnes, en sautant une ou deux lignes d’espace (voir ci-dessous). Complétez la forme (avant de travailler sur le lien suivant) avec 2 pixels diagonaux de chaque côté allant vers le centre de la forme.
Le premier lien est essentiellement un petit rectangle qui est 3 pixels par 5 pixels avec le pixel de coin en haut à droite enlevé et ajouté au coin en bas à gauche.
A partir de là, nous répétons la forme de base du maillon de chaîne créé dans les deux premières sections de cette étape avec 4 pixels de large, une pixel diagonal unique de chaque côté, 3 pixels vers le bas, et 2 pixels diagonalement vers le bas qui mènent au prochain maillon de la chaîne.
Répéter les sections 3-4 de cette étape donc il y a 8 maillons de chaîne au total (voir ci-dessous).
Étape 2
En commençant par la couleur de l'ombre (# c27b17), concentrez la couleur sur le coin inférieur gauche de chacun des maillons de chaîne circulaires.
Ensuite, remplissez la partie centrale du dessin en jaune doré (# fbc423).
Enfin, tracez quelques pixels dans le coin supérieur droit de chaque chaîne en jaune crème (# f8dd92).
Pour le papier auquel la chaîne est connectée, vous allez dessiner un rectangle qui manque les pixels du coin supérieur. La taille totale que j'ai utilisée est 53 pixels par 36 pixels. J'ai trouvé le plus facile de dessiner le rectangle sur un Nouvelle Couche, déplacer la chaîne vers le centre supérieur du rectangle. Le trou dans le papier est 4 pixels par 5 pixels.
Le "pli" dans le papier est 6 pixels vers le haut et vers l'intérieur à droite. Supprimer les pixels de coin ou les pixels inutiles avec le Outil Gomme (E) mettre soit à Crayon (brosse par défaut à 1px) ou Bloc (Zoom (Z) afin d’effacer un ou plusieurs pixels à la fois).
Étape 3
Fusionner la couche de la chaîne sur la couche de papier. Utilisez le Outil seau de peinture (G) remplir le papier avec de la crème légère (# fff).
Pour les lignes d’ombre sur le papier, utilisez le Outil Crayon encore et une couleur crème plus foncée (# f8de93).
Placez la chaîne sous le bracelet en cuir dans le Couches panneau. La chaîne est destinée à pendre du fermoir de la sangle.
4. Eléments du menu
Étape 1
Le curseur du gant cartoony apparaît deux fois dans le dessin. Créer un Nouvelle Couche et dessinons une main.
Commencez avec le Outil Crayon, marron (# 6c0e04) comme couleur de premier plan, et 7 pixels vers le bas.
La ligne du haut est 13 pixels sur, la ligne du bas est 11 pixels sur, et la ligne verticale indiquant la manchette du gant est 7 pixels vers le bas.
Pour le doigt pointé, ajoutez 2 pixels à partir de la fin de la ligne du haut et 4 pixels à gauche. Au centre de la forme de doigt que vous venez de créer, dessinez 3 pixels supplémentaires vers le bas fermer la forme.
Ajouter 3 pixels définir deux autres doigts dans le gant (voir ci-dessous).
Pour le pouce, dessinez un petit rectangle 5 pixels de la gauche c'est 2 pixels par 5 pixels avec les pixels de coin supprimés.
Enfin, l’ombre sous la main est de la même couleur brune réduite à 50% d'opacité. Remplissez la main et menottez en blanc avec le Outil Pot De Peinture.
Étape 2
Placez la main sur votre sélection de menu. Quels que soient vos points de gant sur ce menu seront en corrélation directe avec le deuxième menu. Gardez la main séparée plus tard pour le moment, car nous en aurons besoin plus tard..
Utilisez le Outil de type (T) pour écrire le texte en utilisant Small Fonts Regular, ou une autre police minuscule adaptée aux pixels, à 10 pt Taille. Chaque mot était un calque de texte séparé. Découvrez leur alignement ci-dessous.
Étape 3
Copier (Control-C) et Coller (Contrôle-V) le papier et une moitié de la chaîne en utilisant le Outil de chapiteau rectangulaire (M). Allongez le centre du papier en le redessinant ou Copier et Collage des portions du papier déjà dessiné afin de remplir l'espace. Le deuxième menu est essentiellement le double de la taille du premier menu.
5. Dessine le coeur rouge
Étape 1
Pour le coeur, créer un Nouvelle Couche et commencez du côté du coeur avec 4 pixelsà travers, en marron.
Dessine une petite forme en V composée de 3 pixels au centre et 4 pixels à nouveau pour compléter le sommet du cœur.
Vient ensuite 2 pixels en diagonale de chaque côté, sortir et descendre.
Ajouter 5 pixels de chaque côté en descendant pour les côtés du coeur.
Dessiner 6 pixels diagonaux incliné vers le centre du coeur.
Complétez le coeur avec 3 pixels à travers sur le bas de la forme.
Commencez à remplir le cœur de rouge foncé (# bb0708) dans les coins intérieurs du sommet de la forme.
Continuez à aligner le cœur le long des côtés droit et inférieur.
Étape 2
Remplissez le coeur de rouge vif (# fa0000) et tapisser le cœur d’une deuxième couche de rouge moyen (# e10507) (Entre le rouge vif et le rouge foncé de l'étape précédente).
Commencez les points forts en rouge clair (# fa6964) sur le côté gauche du coeur.
Tracez de petits cercles en rouge clair en vous déplaçant vers la gauche.
En utilisant du blanc, ajoutez quelques pixels de points réactifs au centre (ou à proximité) des formes en surbrillance (voir ci-dessous)..
6. Dessinez le coffre au trésor
Étape 1
Le coffre au trésor est un rectangle modifié (son sommet est arrondi). Encore une fois, créez un Nouvelle Couche.
Pour le côté gauche de la poitrine, tracez une ligne verticale avec le Outil Crayon consistant en 17 pixels. Le sommet commence par 2 pixels sur, suivi par 3 pixels sur la prochaine ligne, 19 pixels sur la prochaine ligne, 3 pixels sur la ligne suivante, et 2 pixels sur la ligne suivante.
Complétez le côté droit avec 17 pixels dans une ligne verticale, allant vers le bas. Passer les pixels de coin et se connecter à deux côtés avec 30 pixels à travers. Pour la division centrale, dessinez 30 pixels sur la rangée qui est 8 pixels du haut des lignes latérales.
Au centre de la fente de la poitrine, tracez le haut de la serrure avec 4 pixelsà travers et 4 pixels vers le bas, réunis à leurs diagonales. Pour le début du centre de la serrure, Effacer1 pixel de chaque côté du centre deux.
Commencez à ajouter de la couleur, remplissez le cadenas avec du jaune doré (# 953608). Pendant que vous y êtes, dessinez 3 colonnes de jaune de chaque côté de la poitrine 3 pixels à partir de la gauche et à droite respectivement. Utilisez le marron (# bb5f15) pour couvrir le bas de la fente dans la poitrine, en sautant les pixels jaunes le long du chemin.
Stagger jaune (# fbf348) Pixels au centre des bandes dorées sur la moitié inférieure de la poitrine.
Tapisser le bas de la poitrine avec le même marron que précédemment. Complète la serrure du coffre avec 4pixels jaune doré sur le bas de la forme de la serrure et 6 pixels marron en dessous de ceux.
Étape 2
Remplissez le centre et le haut de la poitrine avec du brun clair (# fbc423) en utilisant le Outil Pot De Peinture.
Remplissez les côtés de la poitrine avec le même brun clair.
Tracez une autre ligne de pixels marron sous la fente dans la poitrine ainsi que dans les coins du bord supérieur.
Dessine brun moyen (# a84913) des lignes verticales allant du haut au centre de la poitrine. Tapisser le centre du bas de la poitrine avec des lignes de pixels brun moyen (notez les deux flèches et les pixels sur lesquels elles pointent pour le placement).
En utilisant un brun beaucoup plus clair qu’avant (# fdaa74), Tracez une ligne horizontale le long du haut de la poitrine en sautant les pixels marron moyen. Décalez les pixels marron clair sur la ligne suivante (voir ci-dessous).
Ajoutez quelques pixels jaunes à la serrure du coffre en guise de touche finale.
7. Dessine la hache
Étape 1
Créer un Nouvelle Couche et allons tirer la hache.
Dessiner 3 pixels sur en gris moyen (# 5c5c5c).
La courbe du côté gauche de la hache est 5 pixels vers le bas, suivi par 2 pixels vers le bas, puis 2 pixels sur, et 5 pixels sur. Beaucoup de lignes et de formes dans cette icône sont en miroir, donc c'est plein de répétition.
En utilisant gris (#afafaf), dessinez une forme en L renversée composée de 3 pixels sur et 5 pixels vers le bas en partant du centre de la ligne du haut. Avec gris foncé (# 333333), nous avons un peu de fantaisie dans la forme, mais c'est 1 pixel en diagonale et à droite de la ligne du bas, 2 pixels au la gauche, 2 pixels de plusen haut, et 1 pixel à droite en diagonale.
En partant du coin de la forme en L grise, tracez une ligne diagonale de 4 pixels. Connectez les pixels gris foncé à la forme grise avec 3 pixels sur et 1 pixel en diagonale.
À l'aide de gris moyen, placez 1 pixel sur la diagonale des deux pixels les plus hauts et les plus à droite (voir ci-dessous pour le placement exact). Continuer en ajoutant du gris clair 1 pixel à droite du gris et 2 bas en diagonale.
Complétez le reste du motif avec un gris encore plus clair (# d7d7d7).
Pour le début du manche de la hache, tracez deux lignes diagonales de 7 pixels en marron (# 6c0e04). Utilisez du blanc pour ajouter des reflets sur le côté gauche de la lame de la hache.
Continuez la poignée diagonale en brun clair (# 93360b) et terminer avec un 90 ° angle.
Étape 2
Remplissez le centre de la poignée avec du brun moyen (# 993511).
Remplissez le reste de la poignée avec un marron encore plus clair (# bb5f16). Travaillons du côté droit de la hache. Directement en face du côté gauche, dessinez 3 pixels plus haut, 5 pixels sur, 2 pixels sur (au niveau inférieur au dernier), 2 pixels vers le bas, et 5 pixels vers le bas tout en gris. En gris foncé, fermez la forme avec 1 pixel sur la diagonale du dernier privilège tiré, deux pixels en haut, et ajouter 2 pixels de plusà travers à gauche. Mettez en miroir les deux pixels gris foncé qui se rencontrent à la poignée centrale (voir ci-dessous pour le placement exact).
En gris clair, commencez par le pixel gris foncé en haut 3 pixels plus haut, 5 pixels sur, 1 pixel en diagonale, et 3 pixels vers le bas. ensuite, tracer une ligne diagonale de 4 pixels au centre de la hache suivie par la mise en place 3 pixels gris clair sur le côté du manche (voir ci-dessous).
Remplissez le reste de la hache avec du gris plus clair (code hexadécimal à l'étape précédente) et utilisez du blanc pour les reflets.
Pour le dessus de la hache, utilisez un assortiment de pixels dorés, bruns et jaunes (mêmes couleurs que celles utilisées pour le coffre au trésor)..
Répétez l'opération sur le bas (en plus d'une forme fermée que ce qui est en haut) avec des gris assortis utilisés dans la lame de hache.
8. Dessine la pièce d'or
Étape 1
Notre dernière icône pour le deuxième menu est la pièce d’or. Encore une fois, créez un Nouvelle Couche et obtenez votre Outil Crayon prêt.
Dessiner 7 pixels sur pour le bord supérieur de la pièce.
De chaque côté de la ligne du haut, vous irez 2 pixels sur, 1 pixel en diagonale (extérieur), et 2 pixels vers le bas.
Les côtés sont 6 pixels vers le bas dans cette conception et le bas est une répétition de la moitié supérieure des pixels (je trouvais plus facile de simplement Copie, Coller, et Retourner verticalement, puis Fusionner couches linéaires de la pièce).
Dans les coins de la courbe du cercle, placez les pixels en ocre jaune (# bb6403).
Continuez à utiliser l'ocre jaune pour créer un cercle plus petit au centre de la pièce. Chaque côté est composé de 5 pixels au centre et 2 pixels de chaque côté. Répéter pour fermer le petit cercle.
Dans la moitié inférieure du petit cercle, placez l’ocre foncé (# 974000) Pixels dans les coins de chaque ligne (voir ci-dessous pour le placement exact).
Commencez à remplir la pièce en utilisant de l’or (# ffaa1b) dans la moitié inférieure et une petite ligne de 3 pixels en bas au centre du dessin.
Étape 2
Au centre de la pièce se trouve une lettre majuscule G. En partant de la 3 pixels dessiné à l'étape précédente, continuer avec l'ocre jaune, l'ocre foncé et le brun. Voir ci-dessous pour le placement exact de chaque couleur. La forme consiste en 4 pixels verticaux, 2 pixels de chaque côté, 5 pixels sur formant le bord inférieur, et 2 pixels en haut.
Pour le bord supérieur du G, dessinez 4 pixels sur et 1 pixel sur la diagonale.
Complétez le G avec 3 pixels sur le bras de la lettre. Remplissez la deuxième ligne entre le G avec des pixels jaune doré.
Remplissez le centre de la pièce en recouvrant le reste du G avec un jaune or plus clair (# f9c325).
En utilisant le même jaune d’or plus pâle et un jaune vif (# ffef51), travailler pour remplir le haut de la pièce.
Utiliser de la crème (# fff7b6) Pour les détails dans le coin supérieur droit du dessin de la pièce pour le compléter.
Étape 3
Placez vos icônes terminées dans une ligne au centre du deuxième menu.. Copie et Coller l'icône de la main et assurez-vous qu'elle pointe vers l'icône correspondant au premier menu (dans ce cas, "élément" correspond au coffre au trésor).
8. Jauges de niveau d'inventaire
Étape 1
Chaque jauge commence par le même design de cadre. Créer un Nouvelle Couche et complétez ce qui suit:
Tracez un long rectangle avec le Outil Crayon dans le même marron utilisé pour les autres éléments lineart et couvrant la majeure partie du reste de l'espace de l'interface utilisateur. Gardez-le arrondi en supprimant les pixels de coin.
Dessinez de petites boîtes de pixels de 2 par 2 pixels jaunes dorés dans chaque coin du grand rectangle.
Placez un seul pixel jaune dans chaque coin. Utilisez le marron pour dessiner un petit rectangle en laissant une ligne 1 pixel large de tous les côtés.
Remplissez le centre du petit rectangle avec de la crème légère (# fffcd3) en utilisant le Outil Pot De Peinture.
Remplissez le cadre avec du marron clair (# c45d12).
Utilisez un brun moyen (# 9e3e14) ajouter 2 pixels de chaque côté de chaque coin de la conception du cadre. Alignez le bas de l’intérieur du cadre avec une couleur beige (# cfa984).
En utilisant le même brun moyen, ajoutez un pixel ou deux tous les 5-8 pixels autour du cadre.
Étape 2
Copie et Coller la conception du cadre 3 fois. Choisissez un niveau arbitraire pour chaque jauge et complétez avec la couleur correspondante de chaque élément:
Rouge (# fe0211) pour le coeur.
Marron (# d47d1e) pour le coffre au trésor.
Gris (# b1b1b1) pour la hache.
Or (# ffc643) Pour la pièce.
Étape 3
Chaque jauge de niveau obtient une ligne ou deux de pixels dans une couleur de surbrillance et une couleur d'ombre. Utilisez les éléments suivants pour chacun:
Point culminant rouge: # ff6563; Ombre Rouge: # bd0704
Brown Highlight: # f4912c; Brown Shadow: # f4912c
Point culminant gris: # dee4e0; Gris ombre: # 5c5a5d
Point d'or: # ffe33a; Gold Shadow: # d87e06
Bien fait, vous!
C'est fini! Afficher la couche de fond dans le Couches panneau et aligner les jauges de niveau de la manière indiquée ci-dessous. Poussez plus loin votre conception de pixel art en créant une maquette du jeu de cette interface utilisateur, en modifiant la quantité d'informations affichées ou en choisissant votre propre jeu de couleurs pour l'ensemble de la pièce. Montrez-nous votre version, fidèle à la conception de ce tutoriel ou à votre propre interprétation du concept, dans la section commentaires ci-dessous.!
Pour plus de tutoriels de pixel art, consultez ce qui suit:
Créer un personnage pixel art isométrique dans Adobe Photoshop
Quel est le problème avec Pixel Art?
Kandi Runner: Créez un sprite Pixel Art à partir de zéro
Share
Ce que vous allez créer
Accentsconagua
