Share
Ce que vous allez créerVous avez créé un personnage pixel art isométrique, mais où ce personnage pourrait-il vivre? Il est temps de faire une maison pour cela!
Tout comme avec les décors Lego, les bâtiments sont presque le but de l'art pixel isométrique. Leur création peut prendre un certain temps, mais devrait être agréable!
Si vous n'êtes pas passé par le Isométrique Pixel Art Character tutoriel alors vous feriez mieux de vérifier cela en premier; nous allons utiliser le personnage de cette leçon et ignorer les astuces Photoshop déjà abordées.
Nous devrons déterminer comment dimensionner les éléments de notre bâtiment. Nul besoin d’être trop technique (notre personnage n’a pas cette proportion réaliste). Nous allons simplement utiliser le personnage comme une sorte de critère et décider nous-mêmes à quelle hauteur nous voulons que les portes, les fenêtres et les toits soient, afin de garder des dimensions d'environnement cohérentes.
Alors voici où nous en sommes restés:
Maintenant, prenons notre personnage et définissons certaines des hauteurs.
Dans un nouveau calque, faisons un "mur" de 2: 1 lignes, chaque ligne 4px au-dessus de la précédente (également sous forme de trois pixels vides entre chaque ligne). Si nous ne choisissons que des hauteurs qui correspondent à ces lignes, l'ajout de textures, telles que la brique ou le bois, sera plus esthétique ultérieurement..
Voici les hauteurs que j'ai choisies pour la porte, ainsi que pour le plafond et le deuxième étage. Même si nous ne verrons ni plafond ni deuxième étage, il est généralement utile de définir ces lignes..
Continuons à développer notre structure, mais pas beaucoup! À moins que vous ne souhaitiez créer une vue en coupe de l'intérieur du bâtiment, il est préférable de le rendre suffisamment grand pour indiquer qu'il s'agit d'une maison ordinaire. De cette manière, nous pouvons adapter davantage d'éléments dans moins d'espace, ce qui est utile dans une scène de ville plus complexe. De toute façon, il est préférable de laisser de côté tout élément inutile ou redondant. Dans la vie et dans le pixel art.
Nous allons donner au plan d'étage une forme en L pour lui ajouter de la complexité; la maison sera plus jolie et nous explorerons plus de géométrie.
Il ne nous reste donc plus qu'à développer la structure dans un sens. La voici avec longueur ajoutée à droite de la porte: 40px du bord de la porte au nouveau coin.
Il y a de la place pour une ou peut-être deux fenêtres. Nous y reviendrons plus tard.
Maintenant, sélectionnons une section de ces lignes, Alt-Nudge (ou Copier coller) et Retourner horizontalement puis placez-le comme mur de droite, puis prolongez ces lignes jusqu'à ce qu'elles soient 50px large:
Maintenant, sélectionnez tout le mur face à la gauche plus 10px du mur faisant face à droite (la sélection doit totaliser 60px large), Alt-Nudge et Retourner horizontalement, puis placez-le sur l'autre bord pour faire notre L:
Il ne manque que les lignes arrières pour compléter le L, mais il suffit de faire celles avec les lignes de niveau supérieur:
Fermez maintenant les formes et remplissez-les de couleurs de la même manière que nous avons utilisé le cube dans la leçon précédente. Laissez les marqueurs pour la porte et supprimez le marqueur pour le plafond.
Tu peux aller à Image> Réglages> Teinte / Saturation pour vérifier facilement plusieurs options de couleur et trouver celle que vous aimez. Choisissez des tons de terre si vous voulez construire une maison en brique ou n'importe quelle couleur si vous préférez une texture de bois ou de murs pleins et non texturés..
J'ai marqué en rouge quelque chose que nous n'avions pas rencontré auparavant: un coin "vallée". Tous les coins du cube étaient des "sommets" et des couleurs plus claires conviennent bien à ceux-ci. Mais pour les coins "vallée", les couleurs claires ne sont pas pertinentes et le noir peut être trop sévère. La meilleure façon de les utiliser est donc d'utiliser une teinte 10% ou 15% plus foncée de la couleur de mur la plus foncée:
On dirait que nous avons obtenu certaines des formes principales, mais il nous manque encore quelque chose d'assez important et un peu plus compliqué.
Notre personnage n'a pas encore de toit. Il est temps de couvrir cela.
Créer un nouveau calque et formez-y une forme de L plat, juste au-dessus de la surface supérieure L. Mais elle devrait être plus large, car les toits sont généralement plus larges que l'empreinte de la maison. Ces nouvelles lignes doivent donc laisser une ligne de pixels vierges entre les lignes noires et deux lignes de pixels vierges entre les coins plus clairs:
Les nouvelles lignes seront la partie inférieure du toit.
Créer un nouveau calque et tracez des lignes verticales à partir de ces deux coins du L:
(La ligne la plus à droite ne semble pas être exactement au coin, mais c'est parce que je préfère me débarrasser de ce pixel lors de la finition des formes… comme nous l'avons fait avec le cube et le L.)
Maintenant, trouvez un endroit juste entre ces deux lignes pour ajouter une troisième ligne. Vous pouvez mesurer avec l’outil de sélection ou vous pouvez déplacer une sélection et compter la distance à mesure que vous la déplacez à l’aide des touches Touches directionnelles (rappelez-vous: coup de coude tout en maintenant Décalage déplace la sélection de 10 pixels à la fois)
Nous savons maintenant où les lignes devront se rencontrer pour former le coin supérieur du toit. Nous devons juste faire les lignes. Vous pouvez essayer autant d'angles que vous le souhaitez, mais je recommanderais les deux seuls qui évitent les lignes déchiquetées:
L'un d'eux est une ligne diagonale 1: 1 avec une ligne droite horizontale, et l'autre est un 1: 2 avec un 1: 1.
Nous allons aller avec les lignes les plus hautes. Débarrassons-nous de nos directives, ne gardons que les lignes bleues, puis faisons-les en noir. Pas besoin de fusionner la couche pour le moment.
Copiez la longue ligne qui forme l’arrière du toit L et collez-la sur le point du toit pour que les trois lignes se rejoignent au même point..
Ça devrait ressembler à ça:
Et cette ligne serait totalement bien là. Vous pouvez choisir d’ignorer le conseil suivant (c’est difficile et je le sais bien), mais j’aime bien que mes lignes 2: 1 les plus sombres restent dans une certaine grille presque imaginaire, où la distance entre les pixels est toujours un nombre pair. Je le fais pour maintenir la cohérence et parce que cela me permet de conserver l'esthétique idéale même après avoir réajusté ou déplacé des éléments.
Donc, dans ce cas, il est préférable que cette nouvelle ligne soit inférieure ou supérieure d'un pixel, comme indiqué ici:
La ligne de toit 1: 1 en diagonale doit être légèrement déplacée si cette modification est appliquée.
Maintenant fusionnons ces lignes de toit (mais pas encore avec la couche toit-L) puis Alt-Nudge, Retourner horizontalement et placez-le sur le côté gauche du L pour obtenir ceci:
Nous n'avons pas besoin de ces lignes en haut, alors effacez-les et ajoutez une ligne verticale pour former le coin "vallée" du toit. Sur la couche L du toit, effacez les deux lignes situées à l'arrière (les deux lignes les plus hautes sur l'écran), puis fusionnez les lignes du toit avec le L:
Bien que nous en supprimions certaines parties, ajoutons de la couleur à la forme du toit. Essayez d'appliquer ce que nous avons fait au cube ici même si les formes sont assez différentes.
Dans cette forme, un point culminant sur le bord supérieur, je pense le fait paraître mieux.
Maintenant, faites ces deux triangles presque blancs (celui de droite devrait être un peu plus foncé) et séparez le blanc de la couleur du toit avec un ton plus foncé, comme celui du coin de la vallée:
Ajoutons maintenant une touche légèrement décorative en faisant quelques lignes parallèles aux diagonales du toit. En laissant un pixel entre les deux, ajoutez une ligne avec une nuance de blanc légèrement plus sombre, puis (avec un autre pixel entre les deux) une ligne noire pour obtenir ceci:
Maintenant, nous devons supprimer les zones blanches au milieu et les lignes noires en dessous et retoucher si nécessaire:
Ce n'est pas nécessaire, mais nous pouvons maintenant fusionner avec la maison L. Il serait peut-être plus facile de remplir ces zones de triangle vierges avec les couleurs du mur avant de les fusionner. le Lasso l'outil est votre ami; Rappelez-vous juste de l'utiliser sans anti-aliasing.
Agréable! nous avons presque terminé le travail géométrique!
Ce n'est pas encore une maison sans porte et quelques fenêtres. Heureusement, nous savons déjà où faire notre porte, ajoutons donc quelques lignes verticales et une ligne supplémentaire 2: 1 sous notre marqueur de hauteur pour créer le cadre de notre porte. Nous allons faire sortir le personnage pendant un moment.
Maintenant, sur cet espace vide ennuyeux qui nous regarde devrait passer par une fenêtre. Il peut être presque identique au cadre de la porte, gardez donc la bordure supérieure à ce même niveau et centrez-la entre le bord du cadre de la porte et le coin de la maison. Si vous voulez, rendez-le plus étroit ou plus large. Nous y ajouterons un autre rectangle concentrique afin que le cadre ait un peu plus de détail et de largeur.
Si vous déplacez d’un cran ou deux la ligne inférieure de la porte, elle paraît un peu moins plate:
La ligne du bas du cadre de la fenêtre devrait idéalement être au-dessus du sol par un multiple de quatre, comme dans le "mur" initial de lignes 2: 1.
Nous avons toujours deux murs nus, nous allons donc simplement copier la même fenêtre sur ces murs, la placer aussi centrée que possible et bien sûr au même niveau en ce qui concerne la ligne du bas (cela aide de sélectionner la fenêtre avec le bas ligne pour rendre cela plus facile).
Ces deux nouvelles fenêtres ont plus d’espace autour et peuvent donc être plus larges ou plus ornées. Nous les garderons, mais n'hésitez pas à essayer une alternative. Nous allons ajouter quelques fenêtres plus petites ci-dessus. Elles ressembleront à de petites fenêtres de grenier, elles contribueront à combler les murs nus et à rendre la maison plus jolie et plus détaillée..
(Ne vous inquiétez pas des petites fenêtres qui ne semblent pas centrées par rapport au toit, car le toit n'est pas au même niveau vertical que le mur et les fenêtres.)
Nous allons arrêter d’ajouter des détails ici, mais nous pourrions ajouter beaucoup de possibilités. recherchez des références d'images et essayez de créer ce que vous aimez dans votre pixel house.
Maintenant, nous devrions colorer et finir tous ces éléments. Faisons en sorte que tous les cadres soient blancs et que toutes les lignes noires entre les cadres et les murs aient la même couleur que le coin de la vallée de la maison. Et les lignes noires dans les encadrements de fenêtre doivent être d'une nuance plus foncée de la couleur de la fenêtre, comme nous l'avons fait pour les parties blanches du toit:
Vous pouvez bien sûr faire la coloration sur une seule des fenêtres et ensuite la copier pour les autres. Rappelez-vous simplement que les éléments du côté sombre du bâtiment doivent être plus sombres en conséquence.
Maintenant, trouvez les couleurs que vous aimez pour la porte et les fenêtres. Le blanc a du sens pour la porte, mais j'aime bien l'aspect de ce rouge, car il sort de ma palette entièrement bleue. Pour les fenêtres, j'aime généralement les aigue-marine à faible saturation, mais essayez des alternatives. Il doit y avoir des dizaines de façons d'illustrer les vitres afin que vous puissiez trouver une meilleure façon que ce que nous faisons maintenant..
Notez que je me suis débarrassé de la plupart des lignes noires sur ces détails. Je pense que cela a du sens lorsque les éléments sont en contact direct et que le noir est un peu trop dur entre les différentes couleurs.
Ici, j'ai ajouté deux lignes plus claires aux fenêtres, suivies d'une ligne légèrement plus sombre. Je pense qu'ils ressemblent un peu au reflet du cadre, alors cela devrait aider à faire ressembler les fenêtres à du verre.
J'ai également ramené le personnage pour nous aider à placer la poignée de porte, qui devrait aller à peu près à la hauteur du coude.
Ajout d'une poignée de porte ronde en or.
Pour les derniers détails, nous pouvons ajouter des décorations sur la porte; ce ne sont que quelques rectangles dans une teinte plus foncée, plus quelques reflets en dessous et sur un côté. Aussi, pourquoi ne pas ajouter de minces tableaux blancs dans les angles, comme dans beaucoup de maisons en bois:
Créons et appliquons nos textures. Les zones qui en ont besoin sont, bien sûr, le toit et les murs.
Nous allons commencer avec le toit. Créer un nouveau calque.
Nous allons faire des carreaux légèrement ronds qui se déplacent à travers la ligne supérieure, et une fois que nous avons quelques-uns de ceux que nous Alt-Nudge et commencez à les ajouter.
La deuxième rangée de carreaux atterrit dans cette position car ils se déplacent d’abord sur 2 px (le long de la ligne supérieure) pour être posés en superposition, comme des briques, puis se déplacent vers le bas (suivant la diagonale latérale) de quelques pixels. Si cela semble compliqué, il suffit de suivre le guide visuel ci-dessus et ça devrait aller. Une fois que vous avez un gros patch, multipliez-le encore plus pour qu'il recouvre le toit:
Sur le côté gauche du toit, la texture doit s’écouler dans le sens opposé. Retournez donc cette zone horizontalement. Ensuite, allez à la couche maison et utilisez le Baguette magique pour sélectionner toutes les couleurs du toit (sauf les lignes noires). Si vous maintenez Décalage vous pouvez continuer à ajouter des zones à votre sélection. Lorsque vous avez terminé cette sélection, retournez au calque de texture, inversez la sélection (Sélectionnez> Inverse) et supprimez pour obtenir ceci:
Avant de fusionner, nous devrions réduire l'opacité de ce calque à environ 20%. Mais ce que je recommanderais, pour garder notre palette de couleurs en échec, serait de remplacer les couleurs de texture par les nuances plus sombres que nous avons déjà utilisées sur le toit:
J'ai également supprimé les textures des lignes de surbrillance des bords pour rendre le toit un peu plus propre..
Maintenant, pour la texture du bois, nous devons simplement faire des lignes qui suivent l'empreinte de la maison, puis Alt-Nudge et déplacez de quatre pixels vers le haut, et répétez encore et encore jusqu'à ce qu'il couvre toutes les zones du mur:
Ensuite, répétez le processus que nous avons utilisé sur les tuiles de toit à l'étape 4:
Vous avez donné à votre personnage une maison, mais son monde pourrait continuer à se développer. Si vous avez apprécié la leçon, vérifiez plus!
Accentsconagua