Share
Ce que vous allez créerSi vous faites une illustration de la ville de pixel art, ou même si vous voulez seulement faire une simple pièce de pixel art isométrique, un café ou un restaurant sera une bonne chose à ajouter..
Nous allons faire un petit bâtiment simple, mais en ajoutant quelques nouveaux trucs pour le faire ressembler à un café.
Assurez-vous de lire ces tutoriels avant de continuer:
Et éventuellement:
Voyons quelle taille faire de notre bâtiment.
Comme d'habitude, nous prenons le caractère comme référence de taille. Ce sera la hauteur de notre bâtiment.
Et ceci, la largeur de la façade. Nous pouvons facilement modifier ces tailles ultérieurement si nous voulons.
Et ce sera la profondeur de l'édifice. Ce sera assez petit.
Ajoutons les lignes du haut pour le toit. Ce sont les mêmes lignes en forme de L, seulement pivotées à 180 degrés. Placez-les un pixel au-dessus des autres lignes, puis ajoutez un pixel aux coins pour sceller le rectangle..
Nous utiliserons ces lignes supplémentaires pour deux raisons: l'espace situé en haut abritera l'enseigne du magasin et la ligne ci-dessous représentant les bords supérieurs des fenêtres et des portes du magasin..
Maintenant, ajoutez quelques lignes verticales pour les bords de la porte et des fenêtres. Je fais les deux fenêtres de la même largeur et je laisse un espace supplémentaire entre les fenêtres / portes et les coins. Nous ajouterons un peu de décoration plus tard dans cet espace.
Ajoutons de la profondeur à la porte et aux fenêtres. Ils sont repoussés de 2 pixels (et jusqu'à 1 px).
Sélectionnez-les et déplacez-les en appuyant sur Alt. N'oubliez pas que vous pouvez utiliser les flèches du clavier - il est généralement plus facile d'être précis avec elles..
Nous concevons ce café de manière à ce qu'il soit beau dans un coin et nous lui ajouterons une belle texture de sol, nous définirons donc cette surface..
Nous allons donc ajouter une paire de lignes. Sur le côté, il ne laissera que passer, comme un trottoir ordinaire, mais sur le devant, il y aura assez de place pour quelques tables en plein air..
Sceller le sol.
J'ai arrondi un peu le coin avant parce que les coins des trottoirs sont généralement arrondis. En fait, ils sont généralement beaucoup plus ronds, mais je pense que ce petit peu suffit pour transmettre cette idée sans avoir une grosse ligne en demi-cercle déchiquetée.
Le café que nous allons faire sera évidemment un design que j'ai défini. Mais j'espère qu'avec les informations que je partage dans ce tutoriel et dans le reste de la série, vous pourrez créer ce que vous voudrez. Dans ce cas, je vous recommande de vérifier les images de référence, de mettre en place un tableau d’ambiance et d’esquisser quelques options avant de commencer à travailler avec les pixels. Les créations qui en résultent seront généralement meilleures que si vous suiviez votre première impulsion.
Quoi qu'il en soit, nous allons faire ce dessin, et ce sera dans un style vintage, ce qui, à mon avis, était une bonne approche pour un café.
Peignons nos surfaces de construction. Comme d'habitude, le plus clair en haut, le moyen à gauche et le plus sombre à droite, les nuances diminuant de 15%.
La couleur est un peu chocolatée - elle est supposée être en bois ou du moins peinte en marron.
Continuant à ajouter de la couleur, ici le verre est rempli, et la zone de l'enseigne sera gris foncé, presque noire et s'étendra également sur le côté.
Pour casser la forme du cube et ajouter des détails, agrandissez légèrement le rectangle de toit, juste pour que les coins ressortent un peu..
Ajoutez ensuite les rehauts plus clairs à ces sommets. Ici, les points forts ne sont appliqués qu'au toit et aux angles verticaux du bâtiment..
Nettoyez les lignes sombres à côté des nouveaux points forts.
Et pour les sommets horizontaux, nous allons faire une ligne plus légère qui s'étend au-delà des cadres de fenêtre, dans le style de construction que nous allons faire. J'ai fait ces lignes un peu contrastées; ils sont 20% plus légers que la couleur du mur.
Et au-dessous d’eux, une autre ligne, avec une teinte plus sombre que le mur, donne plus de volume à la ligne lumineuse et donne l’idée que c’est une longue planche de bois qui traverse les murs..
Au-dessus des lignes plus claires, nous ajouterons également des lignes avec une nuance plus sombre que le mur..
Et supprimez le reste des lignes directrices noires; nous en avons fini avec ceux.
Ajoutez une ou plusieurs de ces lignes lumineuses juste en dessous de la zone des enseignes. Et encore une fois, ajoutez une ligne sombre sous la lumière.
Les décorations que nous ajouterons aux murs seront de simples rectangles avec un peu d’effet pour donner du volume. Pour l'instant faire les rectangles dans un nouveau calque et dans une couleur vive.
Pour obtenir l'effet de relief, vous pouvez copier les mêmes rectangles, les coller, les assombrir et les décaler un peu (1 px d'un côté et 1 px vers le haut.)
Ils seront encore mieux si vous supprimez les pixels dans les coins dans lesquels les deux couleurs différentes se chevauchent.
Puis remplissez-les avec leurs couleurs finales, que vous voudrez peut-être atténuer par contraste. Ici, la lumière est juste 10% plus de luminosité.
Copiez ces rectangles dans les autres coins et le mur. Bien sûr, la couleur doit être ajustée (plus sombre) pour ceux qui vont du côté droit.
Maintenant travaillons à la porte.
Nous allons faire des doubles portes, donc nous aurons besoin d'une ligne au milieu. Vous pouvez mesurer le cadre de la porte avec le Outil de sélection pour trouver la largeur totale, divisez-la en deux, puis vous saurez quelle est la distance entre le bord de la porte visible et la ligne centrale à ajouter..
Ensuite, autour du verre, nous aurons plus de brun pour encadrer.
Je recommande de faire les lignes avec un contraste plus faible à moins que vous ne vouliez transmettre des volumes différents. Donc, ici, les lignes au centre des portes et sur le coin de la porte sont d'un brun foncé, au lieu du presque noir de la plupart des contours.
Donnez un style aux portes qui correspond au reste du bâtiment. Alors ajoutez les rectangles en relief et un petit point culminant sous le verre.
Ajoutons des boutons de porte. Ils devraient être à peu près à la hauteur du coude du personnage.
Ici, j'ai seulement fait la plaque arrière où les boutons iront.
Et ce sont les boutons. Ils sont minces et n'ont pas beaucoup de détails à cause de leur taille, mais ils sont beaux et dorés.
L’effet que nous avons utilisé pour le verre est de suggérer un léger reflet des cadres de fenêtre (je suppose que cela peut également être vu comme si vous regardiez à l’intérieur des cadres de fenêtre, mais cela resterait positif). Je pense que cet effet est simple, suffisamment efficace et facile à conserver tout au long de vos illustrations..
En tout cas, le moment est venu de l'appliquer aux fenêtres et aux portes. C'est simplement une ligne plus sombre, à un pixel des images réelles.
Ici, j'ai également créé les lignes de coin où le bois et le verre se rencontrent plus clair que le noir et avec une teinte qui fait en moyenne la teinte du bois et du verre..
Ajoutons maintenant un "matériau" de surface différent au toit. Ce peut être du goudron ou du gravier ou autre chose, mais cela devrait ressembler à une jolie couleur de toit ordinaire.
Adoucissez les contours de ce rectangle de toit et ajoutez une petite surbrillance aux deux lignes supérieures.
Et ajoutez un peu de texture si vous voulez.
Maintenant, le bâtiment est pratiquement terminé. Agréable! Mais sans détails, ça va toujours être ennuyeux.
Ce que nous ajouterons en termes de détails sera: les auvents, l’enseigne, la texture du sol et les tables. Donc, il y a encore beaucoup à faire.
Nous aurons le store avant qui couvre la fenêtre et la porte. Mais donnez-lui un pixel ou deux de distance aux coins du bâtiment.
Créez un nouveau calque pour la ligne supérieure de l'auvent et l'un des côtés. Nous aurons des petites ailerons aux coins arrondis qui s’effondrent et qui ressemblent à de petites dents. En voici deux, et je les laisse définir la largeur de ce côté de l'auvent.
La ligne diagonale est une ligne 1: 2. Il est toujours préférable d'éviter une ligne irrégulière.
Nous étendons l'auvent en répliquant les petits volets tout au long de.
Ensuite, faites en sorte que toutes les lignes se rejoignent et qu’elles soient (ou du moins qu’elles semblent) équidistantes du bord de l’auvent au coin du bâtiment. Pour éviter de couper l'un des volets en deux, j'ai raccourci de 2 px le café dans son ensemble (les fenêtres sont maintenant un peu plus courtes).
Ajoutez de la couleur à l'auvent. Ils ont l'air bien en vert.
Ombrez comme d'habitude et réduisez le contraste pour les rabats - ils seront un détail subtil.
Copiez le store de l’autre côté et retournez-le horizontalement, redimensionnez-le et assombrissez-le légèrement car nous gardons le côté droit des choses plus sombres..
Passons maintenant au lettrage de l'enseigne.
Nous allons faire de très petites lettres. Vous pouvez les redimensionner si vous voulez, et ils seront plus lisibles, mais je pensais qu'ils fonctionnaient bien, étant minuscule. En tout cas, le bâtiment est si petit qu’il ne peut pas avoir un très grand panneau.
Ces trois lignes constitueront la base pour la rédaction de nos lettres et il sera facile de les transformer en n'importe quelle lettre que nous voulons..
Je vais nommer de façon très créative le café "café"… si vous avez un autre nom en tête, utilisez-le!
"Coffee Shop" a sept lettres uniques, je ne ferai donc que prendre la peine de les faire. Alors, voici nos lignes de base, sept fois.
Supprimez quelques pixels, ajoutez-en quelques-uns et vous aurez toutes les lettres dont vous avez besoin. Gardez à l'esprit qu'en raison de la vue isométrique, les lettres doivent paraître asymétriques. Dans le cas des lettres les plus arrondies, il est correct de ne pas essayer de les biaiser car elles perdent leur rondeur et paraissent moins naturelles..
Vous pouvez maintenant copier les lettres, les aligner et terminer le signe. N'oubliez pas de garder l'espace entre eux régulier.
Voici le signe appliqué au café. Je l'ai fait jaune et lui ai donné un peu d'ombre pour le faire apparaître un peu.
Signe fait. Sur la texture du sol.
Nous ferons en sorte que le sol ressemble à de la brique. J'ai décidé d'organiser les briques comme un L.
Voici comment j'ai fait le L basé sur un carré très minuscule.
Puis répliquez votre L plusieurs fois pour faire un motif.
Pour définir le motif, vous devez sélectionner les points dans lesquels la tuile commence à se répéter..
Ici, il est sélectionné et rempli de ce que je pensais être une belle couleur rose.
J'ai choisi de supprimer la moitié des pixels des lignes noires pour réduire le contraste du motif, puis de lui donner une couleur 5% plus sombre que le rose brique..
Vous pouvez maintenant sélectionner ce rectangle et aller à Édition> Définir un modèle… et il apparaîtra comme un motif utilisable pour l'outil de remplissage.
Vous pouvez également simplement reproduire le motif suffisamment de fois pour remplir la zone souhaitée..
Je ne l'applique pas simplement à la zone car je veux qu'elle s'aligne bien avec les bords et les lignes que j'ai déjà.
Je fais donc cela dans une autre couche sous le café. J'ai ajusté quelques éléments du café pour mieux correspondre au modèle (mais je ne peux vraiment pas vous recommander d'être perfectionniste, car cela peut être frustrant).
Ensuite, supprimez les motifs inutiles. Vous pouvez le faire en sélectionnant la zone à modeler avec le bouton Outil Baguette Magique (Contigu cochée) puis passer au calque de motif, inverser la sélection et cliquer sur Effacer.
Ensuite, vous pouvez fusionner… et donner aux bords une teinte douce.
Et pour terminer les travaux de surface, maintenant que nous avons notre sol, ajoutons une ombre aux auvents. Ce ne sont que deux rectangles, correspondant à la largeur et à la longueur des auvents, avec une couleur noire à environ 15% d'opacité..
Vous les faites sur un autre calque, puis vous pouvez les fusionner.
Enfin, il est temps de fabriquer les meubles.
Nous allons commencer avec le président. Cela peut sembler un peu petit, mais il respecte les proportions de notre personnage et c'est ce qui est important. Si nous voulons que notre personnage s'assoie, nous n'aurons pas à lui donner des membres de tailles différentes juste pour lui donner un aspect naturel..
Nous définissons donc d'abord la hauteur du siège, qui devrait correspondre à la hauteur des genoux du personnage..
Ensuite, nous faisons la place. Nous faisons aussi un carré pour le sol, qui se transformera plus tard en ombre portée.
Ajoutez les jambes et le dos et vous avez les contours de votre chaise.
Nous tournons maintenant ces lignes du bas vers l'ombre portée: noir avec transparence.
Ajoutez de la couleur à votre chaise. Ce sera une couleur de bois sombre, je ne le laisserai pas de la même couleur que le café pour des raisons de variété, mais cela ne devrait pas entrer en conflit avec le reste de notre palette (utilisez Image> Réglages> Teinte / Saturation… pour trouver facilement l'ombre que vous aimez).
Ajoutez ensuite les reflets, les nuances plus sombres et une petite touche de texture rayée.
… Et boum! chaise faite.
Pour faire la table, c'est un processus assez similaire. Sa hauteur doit être supérieure à la hauteur du siège, mais inférieure à la taille du personnage..
Puis couleur, ombre, nuances et texture.
Nous allons lui donner une seule jambe avec un rectangle comme base.
Mettons quelques tables. Pour qu’ils ne soient pas identiques, l’un d’eux n’aura qu’une chaise.
Voici les deux ensembles de tables et de chaises.
Maintenant, trouvez-leur un endroit agréable devant le café.
Et la boutique est quasiment finie!
Vous pouvez toujours ajouter quelques détails supplémentaires sur le toit, comme un climatiseur ou une cheminée; J'ai couvert ces éléments dans le tutoriel de l'immeuble.
Le café est terminé et prêt pour les affaires. N'oubliez pas que vous pouvez continuer à enrichir votre collection de pièces d'art en pixels si vous suivez cette série de didacticiels. Faire une ville sera une possibilité.
Bonne chance avec vos créations!
Accentsconagua