Créer un panneau d'affichage graphique isométrique dans Adobe Photoshop

Ce que vous allez créer

La publicité est omniprésente et il est possible qu’elle ait besoin de surgir dans votre monde du pixel art. Nous allons donc découvrir comment transformer une image normale en son équivalent en pixel isométrique en créant une annonce grand format..

Veuillez vous reporter au tutoriel sur les personnages de pixel art avant de faire celui-ci..

1. Dimensions

Faisons d'abord le panneau d'affichage; ce sera notre toile-dans-une-toile pour la plupart du travail réel.

Nous allons utiliser le caractère pour définir la hauteur de notre poteau publicitaire.

Étape 1

Quatre fois la taille du personnage semble assez grande, et de toute façon cela serait facile à ajuster plus tard.

Étape 2

La largeur du message que nous pouvons définir à peu près aussi large que le caractère.

Étape 3

Terminez en soulignant le post. La ligne inférieure est légèrement courbée pour indiquer que le poteau est cylindrique..

Étape 4

Et puis nous ajoutons des lignes pour le panneau d'affichage lui-même.

Étape 5

Remplir de couleur.

Étape 6

Et ajoutez un peu d'ombrage, notamment pour donner du volume au cylindre.

Notre toile est prête.

2. Adapter l'image

Le pixel art isométrique n'est pas réaliste, alors pour incorporer correctement une photo dans une scène de pixel art, l'image doit subir une sorte de transformation afin que le style corresponde au reste de l'illustration..

D'abord, nous aurons besoin d'une photo.

Étape 1

Je mets ce burger ensemble, mais vous pouvez faire une annonce pour une voiture ou tout ce que vous voulez. Aussi, vous pouvez utiliser cette image si vous voulez.

J'ai ajouté le nom du hamburger parce que cela fera partie de la publicité et parce que je le voulais dans une grande police stylisée. Il y aura plus de lettrage, mais ce sera mieux de faire le reste directement en pixels.

Étape 2

Pour adapter l’image à la vue isométrique, vous devez transformer (Édition> Transformation libre… ) la photo et régler le Inclinaison verticale à 26,5˚.

Et ensuite redimensionner pour correspondre au panneau d'affichage. C'est une bonne idée de faire cela dans un calque au-dessus du panneau et avec un peu de transparence sur le calque pour voir les bords du panneau derrière le panneau..

Étape 3

Vous pouvez continuer à rogner et à ajuster l'image. Ici, je me suis assuré que le hamburger et le mot étaient bien placés dans la toile d'affichage.

Étape 4

Comme j'utilise une couleur d'arrière-plan unie, je l'ai appliquée au canevas: rouge partout avec une ligne de surbrillance dans la bordure supérieure..

Passons maintenant à…

3. lettrage

Pour la plupart des petits caractères, il est préférable de travailler directement pixel par pixel. Nous ferons cela, mais nous allons d'abord obtenir le nom du hamburger qui a été fait en grosses lettres.

Étape 1

Ici, j’ai tracé le "C", le "l" et le "o" juste au-dessus de la lettre de référence (mais sur un calque différent), et au lieu de suivre toutes les lettres, j’ai copié le "o" car le reste de la les lettres sont assez similaires.

Étape 2

Le reste des lettres ne devrait pas prendre beaucoup de travail à clouer.

Étape 3

Nous ajouterons plus de détails à l'annonce. Disons que le Clogger est un nouveau hamburger que les gens doivent essayer. Nous allons donc ajouter le mot "NEW" juste à côté de Clogger en petites lettres obliques.

Nous pouvons extraire facilement le "N", le "E" et le "W" (et la plupart des lettres de l'alphabet) de ces "8" formes.

Étape 4

Effacer quelques pixels et vous aurez le mot que vous voulez.

Étape 5

Normalement, il est préférable d'éviter l'anti-aliasing, mais ces "règles" sont plus souples dans une image 2D au sein du pixel art isométrique. Ici, Clogger reçoit un traitement plus lisse et un peu d'ombre.

Étape 6

Nous ajouterons un dernier lettrage pour diriger les clients vers le restaurant. Nous aurons "SEULEMENT AU [restaurant logo]"

Nous avons donc besoin de trois petites lignes par lettre, qui ne feront dans ce cas que trois pixels de large. Encore une fois, nous pouvons obtenir les lettres dont nous avons besoin d'une structure de base.

J'ai décidé de faire un logo très simple. Juste quelque chose qui ressemble assez à un logo de restauration rapide reconnaissable.

Étape 7

Ensuite, placez le dernier lettrage sur le panneau d'affichage.

Et si vous le souhaitez, vous pouvez fusionner tout le lettrage avec la couche Billboard..

4. Traçage et pixellisation

Pour commencer à tracer le hamburger, laissez le panneau d'affichage dans un calque et la référence dans un autre calque ci-dessus, et commencez votre travail dans un nouveau calque au-dessus de tous les précédents..

Étape 1

Ici, j'ai tracé les lignes noires des pains, en utilisant autant que possible des lignes plus nettes, plus dentelées..

Étape 2

Vous pouvez ensuite remplir les petits pains de noir pour obtenir une forme solide, puis la couleur que vous utiliserez pour le pain, que vous pouvez extraire de l’image de référence si vous le souhaitez..

Étape 3

Ajoutons maintenant des détails au chignon. Nous apercevons les faces internes du pain, généralement plus légères..

Étape 4

Ajoutez ensuite un peu d'ombrage: pour le bas du pain, c'est principalement pour donner du volume, tandis que pour le dessus du pain, les zones cuites légèrement plus sombres du four sont cuites..

Étape 5

L'idée est de réduire la complexité des formes ainsi que le nombre de couleurs. Ainsi, une nuance plus foncée et une surbrillance suffiront pour compléter la coloration des petits pains..

Étape 6

Ajoutez un dernier détail au pain: les graines de sésame. Ce sont des pixels légers avec un peu d'ombre en dessous. Vous pouvez créer des ombres sur un calque différent en noir, puis réduire l'opacité du calque. Si vous le souhaitez, essayez différents modes de fusion pour le calque..

Étape 7

Maintenant que les petits pains sont cuits, passons aux pâtés. Nous allons les rendre identiques afin que nous n'ayons qu'à en faire un. Cela ne pose pas de problème si nous commençons à nous éloigner légèrement de la référence. En fait, il est préférable de le faire, sauf si vous créez une version pixélisée d'un portrait. Dans ce cas, vous aimeriez vraiment obtenir la ressemblance..

Maintenant que nous nous écartons un peu de la référence et pour éviter toute confusion avec le fouillis de pixels qu'il contient, nous allons passer à autre chose et jeter un coup d'œil sur lui pour référence sans avoir besoin de la tracer directement..

Étape 8

Voici nos deux gros galettes de couleur patty déjà et la référence n'étant plus une distraction.

Étape 9

Donnons du volume à l'une des galettes: plus légère en haut et aussi au centre.

Contrairement à la plupart des autres éléments de notre pixel art, nous n'utiliserons pas de contours sombres pour ces éléments, car nous produisons une image 2D et non un élément 3D dans le monde du pixel art..

Étape 10

Terminez l'ombrage et copiez-le pour les deux galettes. Ensuite, sur un nouveau calque, vous devez ajouter une texture au bœuf. Il n'a pas besoin d'être complexe du tout.

Étape 11

Mais il devrait être subtile, alors ajustez l'opacité, puis fusionnez.

Étape 12

Galettes de boeuf faites. Allons les fromage.

Une seule ligne de pixels jaunes à travers les galettes sera un bon point de départ.

Étape 13

Faisons maintenant tomber les coins de fromage sur les galettes. Cela commence à devenir délicieux.

Ils devraient être compensés un peu. Vous remarquerez que le plus gros coin de fromage est fondamentalement le même pour les deux pâtés, mais dans des positions différentes, et puis il y a un autre coin qui se contente de regarder (des positions différentes).

Étape 14

Ajoutez de l'ombrage au fromage. Les bords devraient être plus clairs et le côté droit un peu plus foncé. De plus, un peu d’ombre portée sur les galettes les aide à leur donner du volume et du contraste..

Fromage fait.

Étape 15

Maintenant nous arrivons aux légumes. Nous aurons une grosse tranche de tomate et au-dessus une couche de cornichons / légumes verts et par-dessus un peu d'oignons / mayonnaise / légumes blancs. Un peu comme dans notre référence.

Étape 16

Et ici, nous donnons à ces éléments un peu de volume avec l'ombrage: plus clair au centre, et dans le cas de la tranche de tomate, également au sommet.

Il existe différentes zones claires pour le green-stuff, ce qui devrait permettre de transporter trois pickles différents. Même chose avec la substance blanche.

Étape 17

Pour finir ces légumes, j'ajoute un hybride ombre / contour qui les sépare et les fait ressortir un peu plus. C'est simplement une ligne plus sombre le long du bord supérieur de chaque élément.

Étape 18

Continuons à farcir notre burger de garnitures plus savoureuses.

Au milieu, nous aurons des rondelles d'oignon. Sur un nouveau calque, vous pouvez créer des formes de base. Il devrait se sentir assez libre-forme alors allez-y et griffonnez-le, en faisant des formes légèrement ondulées.

Étape 19

Les formes ondulées seraient des cernes, elles seront donc plus épaisses au centre et plus fines sur les bords à mesure qu'elles disparaissent dans le hamburger. Remplissez le reste de l'espace avec une couleur plus sombre et plus rouge.

Étape 20

Ajoutez une nuance plus sombre aux anneaux et une touche de pixels plus clairs, comme une étincelle grasse sur les anneaux.

Si les rondelles d'oignon vous plaisent, vous pouvez fusionner la couche.

Étape 21

Et finalement, nous faisons quelque chose de très similaire aux fourrages de fond, qui seront du porc tiré.

Les formes utilisées sont irrégulières mais plus carrées. Juste un tas de petits morceaux, qui peuvent aussi être griffonnés. Ils devraient être faits dans une nouvelle couche.

Étape 22

Et puis de couleur rouge ou marron avec une teinte plus sombre sur les côtés et encore plus sombre entre et autour des formes.

Étape 23

Faire de l'ombrage. Les lignes les plus sombres aident à distinguer les volumes, mais elles n'ont pas besoin de fonctionner de la même manière que les contours, nous pouvons donc nous en débarrasser..

Étape 24

Comme pour les anneaux, nous ajoutons quelques pixels clairs, tels que des particules grasses et brillantes.

J'ai déplacé le pixel inférieur d'un pixel parce que je pensais que ça avait l'air mieux.

Maintenant je suis content de mon burger. J'ai fusionné tous les éléments en un seul calque.

Étape 25

Et pour finir, j'ai ajouté une ombre portée au hamburger.

Et c'est tout. Le panneau est terminé!

félicitations!

L'annonce publicitaire est terminée. Le nouveau Clogger a l'air délicieux. artères obstruées sonnent comme un petit prix à payer.

Vous savez maintenant comment transformer une image en pixel art isométrique. J'espère que c'est utile!