Share
Ce que vous allez créerDans ce tutoriel, vous allez apprendre à fabriquer une voiture pixel art isométrique. Ayez votre personnage prêt; ça va faire un tour.
Nous allons créer une berline relativement générique. Ce ne sera pas trop flashy, ce qui est idéal pour recycler plusieurs fois sur la même illustration (utile si vous faites une scène de ville!). Mais même si ce sera générique, voir des images de référence ne ferait pas de mal. peut-être y a-t-il des éléments de conception simples à partir de modèles de voitures que vous pouvez intégrer à votre graphique de voiture.
Assurez-vous que vous avez déjà suivi le didacticiel de personnage de pixel art isométrique; il couvre les bases nécessaires pour le style d'illustration, et nous utiliserons le personnage créé dans cette leçon comme une sorte d'étalon pour la voiture.
Commençons par les formes principales de la voiture, principalement des rectangles puis des formes plus intéressantes..
Nous allons faire une voiture assez taille moyenne. Il devrait donc être plus large que deux de nos personnages, car au moins deux devraient pouvoir s’asseoir côte à côte et la longueur doit être environ deux fois la largeur. Faisons donc un rectangle pour représenter l'empreinte.
Les coins ne seront pas droits et pointus, alors arrondissons-les un peu.
Sélectionnez et copiez le rectangle arrondi puis remplissez-le de noir.
Baisser l'opacité sur ce calque à 20%.
Conseil: vous pouvez modifier le pourcentage d'opacité en appuyant sur les chiffres de votre clavier lorsque l'outil de déplacement est actif. Appuyer sur 2 équivaut à 20% d'opacité.
Une fois que vous avez réduit l'opacité du rectangle plein, collez le rectangle d'origine juste au-dessus de lui, laissez-le dans un nouveau calque et déplacez-le de 4 px. Nous avons déjà fait l'ombre de la voiture; rappelez-vous de le mettre à jour si, à un moment quelconque, vous modifiez les dimensions de la voiture.
Maintenant, dupliquez la ligne de fond de la voiture et placez la copie 10 px plus haut (rappelez-vous que vous pouvez le faire en le sélectionnant Alt-Maj-Flèche Haut) ou ajustez cette hauteur comme bon vous semble; gardez votre personnage sur un autre niveau pour pouvoir vérifier la taille quand vous le souhaitez.
Joignons ces deux rectangles et supprimons les lignes de fond jusqu’à ce que nous obtenions cette sorte de brique volante.!
Nous allons donner à la voiture un pare-choc arrière qui dépasse légèrement en sélectionnant les deux coins supérieurs et en les déplaçant d'un pixel (et en deux).
Maintenant, ajoutez un rectangle à l'endroit où vous souhaitez que les fenêtres et les pare-brise commencent à se projeter.
Tracez une ligne diagonale (1: 1) à partir du coin le plus à gauche de ce nouveau rectangle et dupliquez-le de sorte que deux diagonales parallèles dépassent de la forme de la brique. Ces lignes se rencontreront au sommet avec une nouvelle ligne 2: 1, qui sera le toit de la voiture.
Le toit ne devrait pas être beaucoup plus haut que la ligne du haut précédente (et devrait de préférence être un nombre pair de pixels plus haut, si vous aimez être obsédé par les détails).
Maintenant, dans le coin le plus en avant du nouveau rectangle, nous aurons besoin d’une autre paire de lignes pour définir le pare-brise. Cependant, elles ne seront pas des diagonales comme les premières lignes, car les pare-brise deviennent presque toujours plus étroites au fur et à mesure que vous montez, elles seront donc de 1: 2 lignes..
Joignons ces lignes de pare-brise pour obtenir les contours complets du pare-brise avant. Supprimer les pixels restants à l'intérieur de ces contours.
Nous avons maintenant besoin d’une autre ligne 2: 1 pour les contours supérieurs des fenêtres..
Débarrassons-nous de ces pixels encombrants:
Et créez une belle ligne pour rejoindre les contours de la fenêtre supérieure et inférieure à l'arrière de la voiture; J'ai choisi de les faire avec des coins arrondis:
Terminez le haut de la voiture en ajoutant un contour arrière (avec un coin arrondi) et une ligne verticale sur la vitre pour séparer l'avant et l'arrière.
Nous arrivons maintenant à un joli nouvel élément: un cercle.
Il est relativement facile de transformer un élément plat de vue de face en vue isométrique en définissant un inclinaison verticale sur 26,5 °.
Faire cela aboutirait à ceci:
D'abord, vous avez le cercle de la vue de face; alors vous l'avez avec l'inclinaison de 26,5˚; et enfin vous polissez les bits déchiquetés.
Mais nous ferons nos pneus d'une manière différente pour avoir plus de contrôle sur l'esthétique et moins de dentelure, et pour finir avec des pneus très ronds.
Utilisons le personnage pour définir quelques hauteurs. La ligne du bas est le niveau du sol, la ligne du milieu est la ligne du bas de la carrosserie de la voiture et la ligne du haut est le sommet du pneu. À côté des gens, les pneus montent généralement à mi-cuisse, ils seront donc un peu gros, mais ils fonctionneront bien..
Ajoutons maintenant deux lignes verticales pour avoir un carré. Supprimez le reste des pixels (c'est bien de garder les bits de la ligne du milieu pour faciliter le placement plus tard).
Ce carré sera les limites de notre cercle. Ce n'est pas grave s'il a l'air un peu plus grand que large. Les deux lignes verticales ici sont séparées de 7 px.
Ici en rouge est le cercle que je vais utiliser; il maintient la plupart du temps des lignes droites, donc il aura l'air assez propre mais assez rond.
En noir est le cercle fini, avec les pixels du carré guide déjà effacé.
Il est temps d'ajouter les pneus à notre voiture. Voici ma suggestion de placement.
Mais n'hésitez pas à essayer des endroits légèrement différents.
Il est utile de déplacer ces éléments avec les touches fléchées lorsque vous vous trouvez sur un autre calque, afin de déterminer où vous pensez qu'ils seront mieux. Une fois qu'ils sont sur le bon pied, vous pouvez fusionner.
La plupart des lignes principales sont déjà terminées. Il est donc temps de commencer à remplir toutes les zones vides avec des détails et des couleurs.!
Finissons les pneus. Le caoutchouc du pneu doit être plus épais, ajoutez donc une rangée supplémentaire de pixels tout autour du cercle, comme ceci:
Pas besoin de le faire sur les deux pneus; nous allons travailler sur un jusqu'à ce que fait puis copiez-le.
Remplissez le cercle vide intérieur avec du gris ou la couleur que vous souhaitez pour les jantes.
Ici, il y a déjà un peu de travail de détail en gris plus foncé ajouté à la jante. Nous travaillons sur de si petits détails qu'il est important de vérifier à quoi ça ressemble quand on fait un zoom arrière; si elle ne "lit" pas proprement, vous devriez simplifier.
L'anticrénelage doit généralement être évité dans le pixel art isométrique, mais je pense qu'à une si petite échelle, des exceptions peuvent être faites. Dans ce cas, l'antialiasing aide considérablement à faire en sorte que les pixels au milieu de la jante ressemblent à un cercle concentrique. C'est à peu près autant de détails que nous pouvons ajouter à un si petit élément.
Pour finir le pneu, j'ai ajouté un pixel supplémentaire d'antialiasing pour que la jante paraisse moins irrégulière, et j'ai ajouté quelques pixels pour souligner le caoutchouc du pneu:
Le pneu est fini, alors maintenant, il peut être appliqué à l'autre cercle:
Pour faire les fenêtres, vous pouvez essayer d’ajouter des points forts et des reflets ou d’afficher plus de détails sur l’intérieur. Il peut y avoir plusieurs façons de les aborder. Je pense que le style que j'utilise parvient à obtenir l'effet de fenêtre sans trop de travail.
Remplissez les zones de la fenêtre avec une couleur bleu marine ou bleu foncé.
Devrait être plus clair que la couleur du contour mais pas beaucoup.
Ajoutez maintenant quelques détails plus clairs avec une nuance plus claire de l'aigue-marine / bleu, comme si la lumière n'arrivait qu'à frapper tout ce qui se trouvait près du verre (le tableau de bord, la roue et les bords des portes), laissant le reste dans l'obscurité. Pas besoin de vous soucier de tant de détails ici.
C'est fait pour ressembler à des vitres teintées.
Ajoutons la couleur de la voiture!
Voici un choix assez audacieux:
Ajouter une nuance plus sombre dans la zone inférieure. 15% moins de luminosité devrait bien fonctionner.
Nous n'utiliserons que la partie avant de la ligne qui passe au milieu de la voiture. Sélectionnez-le et copiez-le plusieurs fois en dessous; nous allons faire les phares, la grille et d'autres détails avec ces pixels.
Mais la ligne sur le côté nous n’aurons pas vraiment besoin, alors supprimez-la.
Remplissez les pixels entre ces nouvelles lignes avec du blanc ou une couleur claire qui correspondra aux phares.
Maintenant, nous ajoutons la grille, coupant au milieu de la grande zone blanche que nous venons de créer. Le gril sera gris foncé, juste un peu plus clair que la couleur de contour.
Le phare le plus à gauche n’a qu’une largeur de pixel car il implique qu’il fait le tour du coin de la voiture, ce qui est assez correct, géométriquement..
Maintenant, la ligne de fond va faire les feux de brouillard et la plaque d'immatriculation. Allez-y et supprimez les pixels inutiles en noir et blanc.
Pour finir ces détails, nous allons réduire le contraste sur les lignes autour des pixels blancs, ce qui leur donne une teinte sombre de la couleur de la voiture, mais un peu plus clair que la couleur de contour habituelle..
Maintenant que la majeure partie du "visage" de la voiture est terminée, c'est une bonne occasion de lisser certains virages, au fur et à mesure que nous nous rapprochons du look final.
Ici, j'ai adouci le coin sur le phare le plus à gauche et le coin le plus à droite sur le coffre, ainsi que le coin inférieur du pare-chocs arrière. Je pense que ces changements rendent la voiture plus sportive.
Ajoutez des surlignages là où vous le jugez nécessaire (des images de référence peuvent aider).
Je pense que les surlignages juste à côté des bords aident à donner un aspect métallique, je les ai donc appliqués à la plupart des bords.
Et ici, j'ajoute une nouvelle teinte plus claire sur certaines zones que je veux faire ressortir un peu plus.
N'oubliez pas que vous pouvez éclaircir une nuance en réduisant sa saturation. Utile si vous êtes déjà à 100% de luminosité mais que l'ombre n'est pas encore assez claire.
Je pense qu’une grande zone au-dessus du capot permet de faire ressortir le volume de la voiture et de lui donner un aspect métallique..
Les derniers temps forts nécessaires iraient sur le bord du toit et autour des fenêtres
Ajoutons maintenant quelques petites poignées de portières. Ils seront simplement deux pixels plus clairs juste au-dessus de deux pixels plus sombres.
De même, vous pouvez ajouter des pare-chocs de porte:
Détail mineur facultatif: réduisez le contraste pour la ligne de toit arrière:
Ajoutons des rétroviseurs!
Ils seront comme ça:
Avec l’un large et l’autre aussi mince qu’on le voit sur le bord.
Trouvez-les et placez-les.
Supprimez les pixels inutiles et nettoyez les contrastes inutiles.
Et c'est à peu près tout pour votre voiture!
Comment cela se passe-t-il à côté de votre personnage? Préféreriez-vous le rendre plus large, plus long ou plus petit? Ces changements ne sont pas difficiles à faire. Mais je pense que cette taille va bien.
Il est très facile de créer différentes versions de couleurs de votre voiture! Tu peux aller à Image> Réglages> Teinte / Saturation… pour trouver facilement d'autres couleurs que vous pourriez aimer. Appliquez les modifications uniquement aux zones de voiture appropriées et modifiez les couleurs individuellement si nécessaire.
Bientôt, vous aurez une flotte prête à peupler les rues d'une ville de pixel art.
J'espère que vous êtes satisfait de votre voiture!
Il ne serait pas trop difficile de transformer cette berline en VUS ou en voiture compacte. Ajoutez des bandes de course ou d'autres accessoires, et votre inventaire pourrait continuer à grossir!
Consultez le tutoriel maison si vous voulez toujours plus de pixel art.
J'espère que cela a été utile et pas trop lourd en minuties!
Accentsconagua