Share
Ce que vous allez créerSi vous voulez faire une ville de pixel art alors un parc serait une addition agréable et plutôt nécessaire. Les éléments que nous aborderons dans ce didacticiel seraient en fait utiles pour accessoiriser d'autres types de scènes, comme des jardins à l'intérieur de bâtiments ou des terrasses..
Veuillez consulter les didacticiels d’introduction de cette série et la leçon relative à l’arbre de pixel art..
Je commence habituellement par définir la taille de ce que l'on fera en fonction de la taille du personnage. Mais pour le parc lui-même, il ne serait peut-être pas utile d’avoir le personnage sur la toile.
Mais nous pouvons toujours le mettre là-bas pour des raisons d'habitude.
Nous faisons un grand rectangle. Ce pourrait être un carré parfait si vous le souhaitez. En fait, cela pourrait être idéal pour la place centrale de la ville. Mais je pensais que le faire large d'un côté et étroit de l'autre le rendrait un peu moins ennuyeux. De plus, il parvient à faire correspondre la largeur de l'hôtel de ville du dernier tutoriel, ce qui pourrait éventuellement s'avérer utile..
Arrondissez les coins, et la forme de base pour le parc est terminée.
Serait-ce la leçon la plus facile à ce jour? (indice: non)
Vérifiez toujours les images de référence lorsque vous créez vos propres créations, créez un moodboard, des options d'esquisse et essayez plusieurs alternatives. Bien sûr, pour l'instant, nous suivrons un dessin que j'ai élaboré et qui, j'espère, vous plaira. Ce sera un parc assez typique et classique: de beaux vieux lampadaires, un belvédère, une fontaine, etc..
Commençons par quelques aménagements de base. Nous aurons un chemin traversant le milieu du parc.
Il y a plusieurs façons de trouver le centre. En voici une que vous pouvez essayer: faites les deux lignes parallèles qui forment le chemin et coupez-le dans le presse-papiers, puis sélectionnez la zone centrale du parc avec le Outil Baguette Magique (mis à Contigu) puis coller; Photoshop collera automatiquement le presse-papiers au centre de votre sélection..
Un droit chemin au milieu du parc pourrait être un peu trop ennuyeux. Les références pour les conceptions de parc indiquaient toutes sortes de chemins sinueux, mais je préférerais éviter autant de courbes, car elles introduisent inévitablement des lignes plus irrégulières dans nos conceptions. Nous allons donc ajouter de la complexité en ajoutant des angles au chemin..
J'ai donc tracé une ligne droite horizontale d'un coin vers le chemin. Le cercle où ils se rencontreront sera utile pour trouver la bonne largeur du chemin, quelle que soit sa direction. Les règles pour le cercle sont les suivantes: il doit être deux fois plus large que haut et ses bords doivent correspondre aux deux lignes du chemin..
Laisser sur un Nouvelle Couche. La ligne supérieure du cercle définit la ligne supérieure de la nouvelle zone horizontale du tracé..
Voici cette zone du chemin, avec le cercle de référence et les lignes superflues supprimées.
Mirons le chemin pour le coin opposé. Vous pouvez simplement copier les lignes précédentes, les coller et les faire pivoter de 180˚ (Édition> Transformer> Rotation 180˚.)
Ajoutons un autre chemin qui traverse verticalement le parc. Le cercle redevient utile pour obtenir la largeur du chemin.
Voici les contours pour la nouvelle zone de chemin.
Nettoyez le milieu. Et ajoutons un autre changement d'angle de trajectoire.
Remarquez les coins légèrement arrondis.
Reproduisez à nouveau ce morceau de chemin et pourquoi ne pas le remplir déjà avec une couleur d’herbe, sur les zones qui ne sont pas les chemins.
Nous allons faire les formes de base du gazebo comme guide que nous redessinerons plus tard, et nous commencerons par créer un octogone; Utilisez le Outil Polygone créer une forme à huit côtés.
Puis redimensionnez-la à 50% verticalement pour l’adapter à la vue isométrique, puis redimensionnez-la (tout en maintenant les proportions) à la taille que vous préférez dans le parc..
Nous utiliserons différentes tailles d’octogones, car nous y ajouterons quelques étapes et elles deviendront plus petites de manière concentrique. Donc, à côté de l'octogone original, j'en ai une copie à 90% de la taille originale et à côté de celui-ci, un autre octogone à 80% de celui de l'original..
J'ai également gardé un autre exemplaire de l'octogone de taille moyenne pour l'utiliser comme toit, et un autre exemplaire du grand exemplaire à l'extrémité opposée du parc, pour m'aider à placer la fontaine plus tard..
Leurs couleurs sont un peu modifiées afin que nous puissions distinguer les formes.
Les trois octogones supérieurs seront les marches et le sol, ils devraient donc avoir une certaine hauteur; vous pouvez les sélectionner, les copier et les coller à la place (ou Alt tout en les poussant) et déplacez-les de 2 pixels. J'ai aussi inversé leurs couleurs pour pouvoir distinguer les formes.
Et les voici après avoir été placés concentriquement.
Placez le toit sur la base, suffisamment haut pour que le personnage puisse rester à l'intérieur.
Il semble que nous ne pourrons pas éviter les lignes irrégulières sur le toit, mais ça devrait aller. Tracez des lignes 2: 1 le long des lignes diagonales supérieures du toit et prolongez-les pour qu'elles se rejoignent au milieu. ce sera la pointe du toit du gazebo.
Les lignes droites doivent s'étendre de cette extrémité jusqu'aux coins visibles de l'octogone. Ces lignes peuvent être faites en cliquant sur la pointe avec le Outil Crayon, tenir Décalage, puis en cliquant sur un coin. Une ligne se forme automatiquement entre les deux points.
Faisons maintenant les formes de base qui guideront notre fontaine. Commencez avec un cercle et un rectangle plus large que le cercle.
Puis centrez-les et fusionnez-les. Ils devraient ressembler à une grosse Saturne.
Copiez cette forme trois fois de plus et joignez-les aux coins pour créer une sorte de carré comme celui-ci:
Supprimez les espaces intérieurs et faites pivoter la forme de 45 °. Ce sera la forme de notre fontaine.
Comme pour le belvédère, cette forme se répète de manière concentrique, mais cette fois-ci, l’astuce de redimensionnement laisse beaucoup à désirer, car le mélange du carré et des cercles permet de faire varier la largeur des formes..
Remarquez l’étroitesse des coins par rapport à l’épaisseur des demi-cercles à leur centre.
Alors, voici une solution rapide et sale. Double-cliquez sur le calque pour accéder au Styles de calque, et ajouter un Accident vasculaire cérébral avec une belle taille chunky, définissant la position sur "Centre".
Nous allons ajouter un autre coup à cela. Nous pouvons le faire en copiant fusionné (Édition> Copier fusionné) si vous avez un calque d'arrière-plan, rendre invisible la copie ne fusionne que la forme de la fontaine. Sur le nouveau calque avec les éléments fusionnés collés, ajoutez l'autre trait (encore plus épais)..
Et nous obtenons ceci:
Ces coins ne sont pas très jolis et les cercles ne sont pas parfaits, mais ce sera juste une référence pour le travail de pixel, que nous allons faire correctement.
Redimensionnez les formes que nous avons créées à 50% de la hauteur, puis à une taille similaire à l'octogone de référence que nous avions en place. Coller la forme de la fontaine sur l'octogone.
Et enlever l'octogone.
Et maintenant, nous avons ces idées de conception. Vous remarquerez qu'il y a une symétrie dans notre parc, ce qui était préférable pour ce design, mais les designs ne doivent pas toujours être symétriques.
Commençons par travailler sur les différents éléments que nous ajouterons au parc. Certains sont assez simples, certains certainement pas.
Si vous n’avez pas suivi le didacticiel relatif à l’arbre d’art pixel isométrique, le moment est venu de le faire..
Obtenez votre arbre.
Transformez-le en mini arbre.
Créez simplement une forme ovale simple et incluez une partie des ombres des bords de l’arbre pour conserver une partie de ce volume. Puis rétrécissez le tronc et l'ombre.
Transformez ce mini arbre en arbuste. Il a une forme assez simple, semblable à un œuf, sans tronc.
Et vous avez vous-même trois types d'arbres!
Nous allons trouver des endroits pour se couvrir de fleurs. Ils ont l'air bien et augmentent la variété de la végétation sans trop de travail.
Ne nous inquiétons pas des tiges ou des feuilles. Voici une sorte de fleur assez simple et isométrique comme possible: seulement quatre pétales et un contour doux (vert comme l’herbe, mais plus sombre)
Je fais un peu plus sombre au bas du contour pour qu'il agisse comme une légère ombre portée. Modifiez en plusieurs couleurs lorsque vous avez terminé.
Faisons nos lampadaires. Nous aurons un certain nombre d'entre eux classant le parc.
Ça va être plutôt mince, et certainement plus grand que le personnage.
Ce n'est pas nécessaire, mais je voulais ajouter une base de ciment.
Ajoutez des rehauts et des ombres. Je recommanderais d'éviter un aspect dégradé lors de l'ombrage en général, mais il est plus facile de se laisser tenter par des cylindres..
En outre, vous voudrez peut-être donner un peu de transparence à la partie en verre.
Où les gens pourraient-ils s'asseoir?
La surface d'assise du banc doit atteindre environ la hauteur des genoux du personnage..
Pour terminer la structure, ajoutez quelques jambes et un dos. Puis couleur et texture.
Il est facile pour un meuble aussi simple de le finir en quatre vues différentes. Une vue supplémentaire est obtenue en basculant simplement horizontalement.
Les vues arrière nécessitent un peu plus de travail, mais c'est assez simple: il suffit de revenir au bord opposé de la surface d'assise. Recolorer les contours qui pourraient en avoir besoin.
Et retourner pour la vue supplémentaire.
Commençons à travailler sur la version définitive du gazebo.
Voici le guide.
Travailler sur un Nouvelle Couche.
Vous pouvez commencer avec les lignes les plus éloignées.
Si vous pouvez obtenir plus de lignes ordonnées que celles suggérées par les guides, rendez-les plus ordonnées..
J'ajoute déjà des rehauts aux coins avant des marches et des rehauts légèrement différents du toit..
Vous pouvez déjà vous débarrasser du guide.
Ajoutons les colonnes qui maintiennent le toit et un peu de garniture blanche sous le toit..
Je donne aux marches la même couleur que la base de ciment que j'ai utilisée sur le lampadaire, pour que les choses restent plus cohérentes.
Ce doit être un gris clair, représentant du ciment ou du béton.
Ajoutez de l'ombrage approprié aux marches.
Et adoucir les lignes. Il n'y a pas besoin de noir sur la ligne de coin où deux surfaces se rencontrent. J'ai également adouci d'autres lignes sur les marches juste pour réduire le contraste sur ces parties.
Ajoutez de la couleur au toit et différentes nuances. Comment pensez-vous que la lumière se refléterait sur le toit octogonal?
Faits saillants plus doux sur le toit. Il est particulièrement préférable de réduire le contraste sur toutes les lignes de toit, car il s'agit du type de lignes de pixel art irrégulières et non idéales..
Donnons au toit des textures - pas vraiment des tuiles mais un tas de lignes parallèles.
Vous pouvez commencer avec des pointeurs sur le côté avant, sur un Nouvelle Couche.
Ensuite, ajoutez des lignes qui couvrent complètement.
Les lignes doivent avoir un angle différent du côté voisin; ils doivent être parallèles à ce côté.
Faites cela, puis retirez les morceaux de lignes en excès.
Et répéter pour le prochain côté voisin.
Nous n'avons besoin que de travailler sur l'un des côtés, car nous obtiendrons l'autre en retournant.
Ajoutez un autre jeu de lignes, juste à côté des points forts du coin du toit. Et supprimez les pixels qui vont directement sur les points culminants.
Et maintenant, vous pouvez retourner horizontalement pour couvrir tous les côtés.
Réduisez l'opacité du calque à 10% (ou essayez 5% et plus pour voir ce que vous préférez). Et puis vous pouvez fusionner.
Ici, j'ai ajouté des améliorations supplémentaires. Tout d'abord, un peu de garniture blanche supplémentaire sous le toit.
Et puis j'ai abaissé un peu le toit pour couvrir ce vilain bord noir formé par la partie arrière des marches.
Et pour réduire davantage la grisaille dominante, ajoutons quelques bancs. J'aurais pu aller avec quatre, mais j'ai aimé l'apparence avec deux.
Réorganisez les couches, si vous en conservez beaucoup. Sinon, effacez simplement les parties des bancs qui seraient recouvertes par le toit et les colonnes.
Le gazebo est complet!
Nous arrivons maintenant à la fontaine. Cela pourrait finir par être le point central de la pièce.
Voici notre guide, et sur un Nouvelle Couche nous pouvons corriger immédiatement ces coins adoucis. Nous n'avons besoin que de travailler sur un quadrant du guide; le reste peut être obtenu en basculant horizontalement et verticalement.
J'ai ajouté ces lignes pour aider à maintenir les mêmes distances sur ces parallèles. Et je vais aussi garder beaucoup de ces pixels dans les courbes.
Vous pouvez "dessiner" à main levée les courbes, puis éditer et déplacer quelques pixels.
Voici les courbes après un peu de nettoyage.
Voici à quoi ressemblent les lignes après avoir basculé horizontalement et verticalement pour compléter la forme de la fontaine. Vous n’avez peut-être plus besoin des guides de forme de fontaine.
J'ai fait une dernière retouche sur les courbes d'un quadrant (puis, j'ai remplacé les trois autres par le nouveau)
Ajoutons maintenant un peu de couleur: la couleur de ciment précédente pour le sol autour de la fontaine et une nuance plus claire pour ce qui sera le sommet des murs de la fontaine..
Levons ces murs un peu.
J'aurais peut-être aimé en parler un peu plus, mais je n'aimais pas l'apparence des lignes, heurtant les lignes autour du sol en ciment..
Mais cette hauteur ira bien. Le personnage peut s'asseoir confortablement sur ce rebord.
Ajoutez des coins verticaux, fermez ces volumes et ajoutez de l'ombrage sous l'eau.
Ajoutez un peu d'ombre et de reflets selon votre perception de la lumière sur les murs.
Et certains faits saillants à tous ces sommets qui font face à nous.
Adoucissons ces lignes sur les côtés des murs, juste en dessous du sommet. Ils pourraient également être supprimés, mais je pense qu'ils donnent un bel effet.
Elles devraient ressembler aux couleurs des murs mais être environ 20% plus sombres.
Ajoutez également et / ou adoucissez les lignes intérieures et les lignes où les surfaces se rencontrent.
Nous aurons des bols débordants au-dessus de la piscine. Ajoutons une base pour eux, en commençant par un cercle au centre de la piscine. Le cercle doit être deux fois plus large que haut.
Vous pouvez faire ces cercles avec le Outil de chapiteau elliptique. Remplissez la sélection elliptique avec la couleur de contour et contractez la sélection (Sélectionnez> Modifier> Contracter…) par un pixel pour remplir l'intérieur avec la couleur que vous voulez donner au cercle.
Transforme le cercle en cylindre.
Et lui donner les mêmes finitions que les murs de la piscine.
Maintenant, dans un Nouvelle Couche, nous ajoutons un cercle au dessus de cette base de cylindre. Ce sera le bol le plus bas et le plus grand de notre fontaine..
Ajouter un autre cylindre plus petit sur un Nouvelle Couche, au dessus du précédent.
Et puis encore une fois.
Ce sont tous les bols dont nous aurons besoin.
Appliquez de la couleur sur le premier bol; couleurs sous-marines au centre mais plus claires sur les bords.
Répétez l'opération pour les deux autres bols.
Et maintenant, connectons les bols pour qu'ils ne flottent pas comme par magie au-dessus de la fontaine.
Les bases et les piédestaux de ces fontaines peuvent être très joliment décorés, mais grâce à notre vue de dessus, nous ne pouvons en avoir qu'un petit aperçu. Un simple cercle / sphère peut donc suffire à faire l'affaire..
Ombrez-le bien et adoucissez les lignes intérieures.
Et puis rallonger le piédestal pour connecter le second bol.
Et le troisième bol aussi.
Pour finir de transmettre ces volumes, vous pouvez ajouter un peu d’ombrage à l’intérieur des bols. Ce sont des formes concaves, et je pense qu'il est probable que la lumière agisse de la sorte.
Appliquer sur les deux autres bols, même si cela se remarque moins.
Et tu as les formes faites.
Mais qu'en est-il de l'eau? Prenons-en soin en ajoutant non pas un, pas deux, mais trois effets sur l'eau!
Tout d'abord, un effet de réflexion. L'eau en mouvement peut ressembler un peu aux dunes, nous allons donc créer un motif simple qui ressemble un peu à un groupe de petites dunes. Nous allons commencer avec un motif à damier gondolé.
Et puis donner à ces carrés plus d'une forme de delta.
Ici, sur un autre calque, j'ai fait ces formes pour définir les surfaces d’eau, les zones où je vais appliquer mon motif.
Voici le motif répété partout dans l'eau, appliqué uniquement sur le masque violet et sur un nouveau calque. Il est de couleur similaire à l'intérieur de la piscine, mais plus lumineux.
Vous pouvez modifier le mode de fusion du calque de motif à superposer ou tout autre paramètre de votre choix et réduire son opacité. Et puis, si vous voulez, fusionnez.
L'eau débordera de chaque bol sous forme de gouttes allant naturellement vers le bas. Cela signifie qu'ils vont frapper la surface de l'eau où ce cercle indique.
Ici, en rouge, pour la visibilité, sont les gouttes que j'utilise. Au sommet, ils sont un peu plus rapprochés, mais à mesure qu'ils tombent, la distance entre chaque goutte augmente (d'un gigantesque 1 px).
J'utilise deux versions de ces lignes en pointillé - l'une est simplement 1 px plus élevée sur la toile que l'autre.
Donnons aux gouttes une légère couleur d'eau. Et placez-les en faisant le tour du cercle, en les alternant et sans trop se toucher entre les lignes.
Rendre les gouttes précédentes invisibles. Maintenant, nous allons ajouter de petites éclaboussures sur la surface, qui sera l'endroit où ces gouttes frappent.
Donc, nous prenons simplement le cercle où ces gouttes sont destinées à frapper, mais leur donnons un look de modèle inégale.
Et une fois que nous avons mélangé ces deux choses (en réduisant l'opacité des gouttes qui tombent), vous devriez obtenir un effet de douche assez convaincant..
Appliquez les éclaboussures de surface aux bols.
Et appliquez-leur aussi les gouttes qui tombent (j'ai aussi légèrement diminué les opacités de la partie supérieure du bol).
Et vous avez votre fontaine de parc convaincante, aqueuse et belle! Simple!
Avec la quantité d'éléments et d'espace pour les placer, les possibilités pourraient être presque infinies. Essayez différentes alternatives. J'aime garder les éléments un peu clairsemés, juste assez pour communiquer l'abondance, mais garder les choses propres. Mais vous voudrez peut-être une approche plus saturée.
Les deux choses que nous savons déjà où ils vont sont le gazebo et la fontaine, bien sûr. Placez-les directement sur les guides.
Et se débarrasser des guides.
Ajoutons les lampadaires. Trois par côté me semblait suffisant. J'ai aussi aimé cet espacement et les aligner avec des coins.
Les trois points situés de l’autre côté de la pelouse servent de guide pour la mise en place des lampadaires de ce côté. Vous pouvez obtenir ces marqueurs directement du lampadaire nouvellement placé; copiez-les simplement, faites-les pivoter de 180 ° et placez-les de l'autre côté de la pelouse. Les lampadaires seront à l'envers, mais ce n'est pas grave, car vous ne les utiliserez que pour marquer les spots..
Placez les lampadaires sur les spots correspondants de l'autre côté de la pelouse.
Maintenant, plaçons des bancs pour regarder la fontaine, ou qui sait, pigeonneaux?
Je mets les plus petits arbres contre le bord de la fontaine du parc: quatre d’entre eux, régulièrement espacés.
Ils se heurtent un peu à l'espace de la fontaine, alors je l'ai déplacé un peu. Et j'ai aussi déplacé le gazebo pour qu'il corresponde symétriquement et qu'il y ait assez d'espace de ce côté pour quatre autres petits arbres.
Et maintenant déployons nos plus gros arbres!
Comme je l'ai dit, j'aime garder mes articles un peu rares. Quoi qu'il en soit, il y a plus d'éléments ajoutés à l'environnement, donc il n'y aura pas de zones ternes, à l'exception de deux petits espaces ouverts, dont les parcs ont besoin de toute façon..
Maintenant, ajoutez des fleurs ici et là. Voyez où vous les aimez. Je les ai placés le long d'une ligne, reliant les lampadaires d'une manière. Leur placement devrait être un peu aléatoire, je pensais.
Et les petits arbustes? Trouvons-les un bon endroit. Il y a un certain manque d'excitation pour le gazebo et ses environs. J'ai trouvé que les petits arbustes ont aidé à résoudre ce problème.
Et avec cela, nous avons trouvé des taches pour tous nos éléments.
Il reste encore un peu de travail avant de terminer notre environnement.
Ajoutons de la couleur au chemin.
Accentsconagua