Crea un cartellone pubblicitario isometrico su pixel in Adobe Photoshop

Cosa starai creando

La pubblicità è ovunque, ed è possibile che abbia bisogno di apparire nel tuo mondo di pixel art. Così oggi scopriremo come trasformare un'immagine normale nel suo equivalente in pixel art isometrico creando un annuncio pubblicitario.

Si prega di fare riferimento al tutorial sui caratteri pixel art prima di fare questo.

1. Dimensioni

Facciamo prima il cartellone; questa sarà la nostra tela all'interno di una tela per la maggior parte del lavoro reale.

Useremo il personaggio per definire l'altezza del nostro tabellone per le affissioni.

Passo 1

Quattro volte l'altezza del personaggio sembra abbastanza alta, e comunque sarebbe facile regolarla in seguito.

Passo 2

La larghezza del post che possiamo impostare su circa il personaggio.

Passaggio 3

Termina delineando il post. La linea di fondo si curva leggermente per mostrare che il palo è cilindrico.

Passaggio 4

E poi aggiungiamo le linee per il tabellone pubblicitario stesso.

Passaggio 5

Riempi con il colore.

Passaggio 6

E aggiungi qualche sfumatura, soprattutto per dare volume al cilindro.

La nostra tela è pronta.

2. Adattare l'immagine

L'arte isometrica dei pixel non è pensata per essere realistica, quindi per incorporare correttamente una fotografia in una scena di pixel art, l'immagine dovrebbe subire una sorta di trasformazione per far coincidere lo stile con il resto dell'illustrazione.

Per prima cosa, avremo bisogno di un'immagine.

Passo 1

Ho messo insieme questo hamburger, ma potevi fare una pubblicità per una macchina o qualsiasi altra cosa tu potessi sentire. Inoltre, puoi usare questa immagine se vuoi.

Ho aggiunto il nome del burger perché farà parte dell'annuncio e perché lo volevo in un grande carattere stilizzato. Ci saranno più lettere, ma sarà meglio fare il resto direttamente in pixel.

Passo 2

Per adattare l'immagine alla vista isometrica, è necessario trasformare (Modifica> Trasformazione libera ... ) la foto e impostare il Inclinazione verticale a 26.5˚.

E poi ridimensionare per abbinare il tabellone. È una buona idea farlo in un livello sopra il tabellone e con un po 'di trasparenza impostato sul livello per vedere i bordi del tabellone dietro di esso.

Passaggio 3

È possibile continuare a tagliare e regolare l'immagine. Qui mi sono assicurato che l'hamburger e la parola fossero ben posizionati all'interno della tela del tabellone.

Passaggio 4

Mentre sto usando un colore di sfondo a tinta unita, l'ho applicato alla tela del tabellone: ​​tutto rosso con una linea di luci sul bordo superiore.

Ora passiamo a ...

3. Lettering

Per la maggior parte dei caratteri piccoli, è meglio lavorare direttamente pixel per pixel. Lo faremo, ma prima avremo il nome dell'hamburger, che è stato scritto a caratteri cubitali.

Passo 1

Qui ho tracciato la "C", la "l" e la "o" proprio sopra la scritta di riferimento (ma su un altro livello), e invece di tracciare tutte le lettere, ho copiato la "o" perché il resto della le lettere sono abbastanza simili a questo.

Passo 2

Il resto delle lettere non dovrebbe richiedere molto lavoro da inchiodare.

Passaggio 3

Aggiungeremo ulteriori dettagli all'annuncio. Diciamo che il Clogger è un nuovo hamburger che le persone devono provare. Quindi aggiungeremo la parola "NUOVO" proprio accanto a Clogger in piccole lettere oblique.

Possiamo ottenere facilmente "N", "E" e "W" (e la maggior parte delle lettere dell'alfabeto) da queste forme "8" dall'aspetto.

Passaggio 4

Cancellare alcuni pixel e avrai la parola che vuoi.

Passaggio 5

Normalmente è meglio evitare l'anti-aliasing, ma queste "regole" sono più flessibili in un'immagine 2D all'interno della pixel art isometrica. Qui, Clogger ottiene un trattamento più fluido e anche un po 'di ombra.

Passaggio 6

Aggiungeremo un ultimo pezzetto di lettering per indirizzare i clienti al ristorante. Avremo "SOLO SU [logo ristorante]"

Quindi abbiamo bisogno di tre piccole righe per lettera e in questo caso saranno solo tre pixel di larghezza. Ancora una volta, possiamo ottenere le lettere di cui abbiamo bisogno da una struttura di base.

Ho deciso di creare un logo molto semplice. Solo qualcosa che assomiglia abbastanza a un logo fast food riconoscibile.

Passaggio 7

Quindi posiziona l'ultimo bit di caratteri sul tabellone.

E se vuoi, puoi andare avanti e unire tutti i caratteri con il livello del tabellone.

4. Tracing e Pixelating

Per iniziare a tracciare l'hamburger, lascia il cartellone in un livello e il riferimento in un altro livello sopra, e inizia il tuo lavoro in un nuovo livello sopra tutti i precedenti.

Passo 1

Qui ho rintracciato i buns con linee nere, usando il più possibile linee pulite, meno frastagliate.

Passo 2

È quindi possibile riempire i panini con il nero per formare una forma solida e quindi riempire con il colore che si utilizzerà per il pane, che può essere ritagliato dagli occhi direttamente dall'immagine di riferimento, se si desidera.

Passaggio 3

Adesso aggiungiamo i dettagli al panino. Diamo una sbirciatina ai lati interni del pane, che di solito sono più leggeri.

Passaggio 4

Quindi aggiungi un po 'di ombreggiatura - per la parte inferiore della crocchia è soprattutto per trasmettere il volume, mentre per la parte superiore del panino mostrerà le aree leggermente scure del panino.

Passaggio 5

L'idea è di ridurre la complessità delle forme e il numero di colori, quindi sarà sufficiente una tonalità più scura e un punto culminante per completare la colorazione per i panini.

Passaggio 6

Aggiungi un ultimo dettaglio al panino: semi di sesamo. Sono pixel chiari con un po 'di ombra al di sotto. Puoi eseguire le ombre su un livello diverso con il nero e ridurre l'opacità del livello. Se vuoi, prova diverse modalità di fusione per il livello.

Passaggio 7

Ora che i panini sono finiti, passiamo alle polpette. Li faremo entrambi identici in modo che abbiamo solo bisogno di fare uno. Va bene se iniziamo ad allontanarci leggermente dal riferimento, anzi, è meglio farlo a meno che non si stia facendo una versione pixelata di un ritratto, nel qual caso ti piacerebbe davvero ottenere la somiglianza attraverso.

Ora che ci stiamo allontanando un po 'dal riferimento e per evitare confusione con l'intero pasticcio di pixel che ha, ci sposteremo di lato e lo guarderemo per riferimento senza bisogno di rintracciarlo sopra.

Passaggio 8

Qui ci sono i nostri due grandi tortini con un colore patty già e il riferimento non è più una distrazione.

Passaggio 9

Diamo volume a uno dei tortini: più leggero in alto e anche al centro.

A differenza della maggior parte del resto della nostra pixel art, non useremo i contorni scuri per questi elementi poiché stiamo facendo un'immagine 2D e non un elemento 3D nel mondo dei pixel art.

Passaggio 10

Finisci l'ombreggiatura e copialo per entrambi i tortini. Quindi su un nuovo livello dovresti aggiungere un po 'di consistenza al manzo. Non ha bisogno di essere affatto complesso.

Passaggio 11

Ma dovrebbe essere sottile, quindi regola l'opacità e poi unisci.

Passaggio 12

Polpette di manzo fatto. Facciamoli al formaggio.

Una singola riga di pixel gialli attraverso le polpette sarà un buon punto di partenza.

Passaggio 13

Ora facciamo cadere gli angoli del formaggio sui tortini. Sta iniziando a diventare delizioso.

Dovrebbero essere compensati un po '. Noterai che il più grande angolo di formaggio è praticamente lo stesso per entrambe le polpette, ma in posizioni diverse, e poi c'è un po 'di un altro angolo che fa semplicemente capolino (posizioni diverse).

Passaggio 14

Aggiungi un po 'di ombreggiatura al formaggio. I bordi dovrebbero essere più chiari, e il lato destro è un po 'più scuro. Inoltre, un po 'di ombra proiettata sui tortini aiuta a dare loro volume e contrasto.

Formaggio fatto.

Passaggio 15

Ora arriviamo alle verdure. Avremo una grossa fetta di pomodoro e sopra di essa uno strato di sottaceti / roba verde e sopra quella di cipolla / maionese / roba bianca. Molto simile al nostro riferimento.

Passaggio 16

E qui stiamo dando a questi elementi un po 'di volume con l'ombreggiatura: più chiara al centro, e nel caso della fetta di pomodoro, anche in cima.

Ci sono diverse aree di luce per il verde, che dovrebbero aiutare a trasportare tre diversi sottaceti. La stessa cosa con le cose bianche.

Passaggio 17

Per finire queste verdure sto aggiungendo un ibrido ombra / contorno che aiuta a separarli e farli schioccare un po 'di più. È semplicemente una linea più scura lungo il bordo superiore di ogni elemento.

Passaggio 18

Continuiamo a riempire il nostro hamburger con otturazioni più gustose.

Nel mezzo avremo alcuni anelli di cipolla. Su un nuovo livello puoi fare alcune forme base per questo. Dovrebbe sembrare abbastanza libero, quindi andare avanti e scarabocchiarlo, facendo alcune forme leggermente ondulate.

Passaggio 19

Le forme ondulate sarebbero anelli, quindi saranno più spesse al centro e più sottili sui bordi mentre scompaiono nell'hamburger. Riempi il resto dello spazio con un colore più scuro e più rosso.

Passaggio 20

Aggiungi un po 'di sfumature più scure agli anelli e un tocco di pixel più chiari, come una scintilla grassa sugli anelli.

Se sei soddisfatto degli anelli di cipolla puoi unire lo strato in basso.

Passaggio 21

E infine facciamo qualcosa di molto simile ai riempimenti inferiori, che saranno stirati di maiale.

Le forme per questo sono irregolari ma più squadrate. Solo un mucchio di piccoli pezzi, che possono essere scarabocchiati pure. Dovrebbero essere fatti in un nuovo livello.

Passaggio 22

E poi colorato di rosso o marrone con una tonalità più scura sui lati e ancora più scuro tra le forme e intorno.

Passaggio 23

Fai un po 'di ombreggiatura. Le linee più scure aiutano a distinguere i volumi, ma non hanno bisogno di lavorare come i contorni, quindi possiamo sbarazzarci di alcuni di questi.

Passaggio 24

Come per gli anelli, aggiungiamo alcuni pixel chiari, come pezzi unti e lucidi.

Ho spostato il bunker inferiore di un pixel perché pensavo che fosse migliore.

Ora sono felice con il mio hamburger. Ho unito tutti gli elementi in un unico livello.

Passaggio 25

E per finire ho aggiunto un'ombra al burger.

E questo è tutto. Il cartellone è fatto!

congratulazioni!

L'annuncio cartellone è completo. Il nuovo Clogger sembra piuttosto delizioso; le arterie intasate sembrano un piccolo prezzo da pagare.

Ora sai come trasformare una foto in pixel art isometrici. Spero sia utile!