Crea una serie di icone Pixel Art per la prima colazione in Adobe Photoshop

Cosa starai creando

Inizia la giornata alla grande con alcuni pixel art a tema colazione! Disegnate in Adobe Photoshop, queste dolci creazioni fungono da icone del desktop, avatar o icone di giochi. Scopri le basi della creazione di forme, l'anti-aliasing e la scelta dei colori.

1. Toast It!

Passo 1

Iniziamo semplice e lento, con il contorno di base della forma del toast. Creare un Nuovo documento nel Adobe Photoshop. Tendo a elaborare progetti di pixel art in a 200 x 200 spazio, con lo sfondo impostato su Trasparente. Utilizzare il Pencil Tool (B) fissati a 1 pixel e inizia a disegnare il seguente:

  1. Sette pixel attraverso.
  2. Uno su entrambi i lati, in diagonale.
  3. 11 pixel, su entrambi i lati, formano il resto del bordo superiore. Completa gli angoli con Due pixel diagonali su ciascun lato. Dieci giù da ogni lato prima di entrare nella base della forma del pane.
  4. Due in basso, una in diagonale, e 20 giù su entrambi i lati.
  5. Due giù e Due attraverso al fine di arrotondare il fondo. 
  6. Riempi il resto dello spazio con 23 attraverso.

Passo 2

Ci sono quattro colori usati nella progettazione di base del pane:

  • Marrone scuro per i contorni: R: 108 G: 013 B: 003.
  • Marrone medio per l'esterno della crosta: R: 182 G: 090 B: 020.
  • Marrone per il resto della crosta: R: 214 G: 123 B: 027.
  • abbronzatura per l'interno del pane: R: 250 G: 211 B: 127.

Posiziona il Marrone medio intorno ai bordi del toast. Marrone riempirà ulteriormente i confini della crosta. A questo punto, usa il Paint Bucket Tool (G) per riempire il pezzo di pane con abbronzatura.

Passaggio 3

  1. Questo pane non sarà completo senza una pappa di burro sciolto. Fare un Nuovo strato, nel Livelli pannello, prima di estrarre il burro.
  2. Usa un brillante, ranuncolo giallo disegnare la forma del burro fuso con il Strumento di matita
  3. A differenza del pane tostato, i suoi bordi devono essere definiti con i marroni utilizzati nell'ultimo passaggio. 
  4. Nota come vengono aggiunti i colori più scuri attorno agli angoli e ai bordi verticali. 
  5. Mettere il burro al centro del toast.
  6. Il bianco e la crema leggera sono usati per evidenziare il burro e il pane.
  7. Selezionare Marrone scuro per il colore della tua matita e riduci l'opacità a 30-50%. Delineare il brindisi, con i colori più scuri posizionati negli angoli della forma dei pixel, in modo da ammorbidire il bordo nudo.

2. Sono Makin 'Waffles!

Passo 1

La forma della cialda è abbastanza semplice: un quadrato arrotondato. Inizialmente, ho scelto di mantenere gli angoli due pixel diagonali così la cialda ha mantenuto una forma molto quadrata. Più tardi, l'ho cambiato due orizzontali, una diagonale, e due pixel verticali per gli angoli. 

Passo 2

Per il colore di riempimento della cialda, ho scelto R: 241 G: 180 B: 99. I colori dell'ombra sono MarroneMarrone medio a partire dal Sezione 1, Passaggio 2. Nel Livelli pannello, fai un Nuovo strato e disegna piccolo sei per sei quadrati, con il pixel dell'angolo cancellato, per formare il modello di waffle.

Passaggio 3

Trovo più facile, in un progetto come questo, quello di Copia (Control-C)Incolla (Control-V) le forme quadrate in una griglia attorno alla base della cialda. Uso abbronzatura per evidenziare attorno al modello, e Marrone medio per indicare la profondità. 

Passaggio 4

Il metodo di disegno del burro e l'anti-aliasing del bordo esterno della cialda sono gli stessi di quelli fatti sul pane tostato Sezione 1, Passaggio 3.

3. Tostare questa pasticceria

Il design della pasticceria tostapane è abbastanza semplice: un rettangolo arrotondato (notare il due in basso, due in tutto angoli) con l'angolo in alto a destra composto da sei diagonale pixel che formeranno un "morso" fuori dalla pasticceria.

Passo 2

Proprio come il design del toast, questo tostapane inizierà con i bordi esterni dentro Marroneabbronzatura. Ho iniziato a delineare il "morso" di Marrone anche per assicurarsi che l'area sia definita così come creare un'area d'ombra per il riempimento a "gelatina" che presto cola.

Passaggio 3

La glassa è bianca, quindi le ombre sulla glassa sono di un blu molto chiaro. Nota come alcune delle linee sono "retinate". Il dithering, in pixel art, è una tecnica per creare un pattern (simile al rumore) per ombreggiare o evidenziare un'area senza aumentare il conteggio dei colori.

Le spruzzatine sono giuste quattro per quattro scatole di colore o singoli pixel sparsi in giro. Non dimenticare di riempire l'area di glassatura con il bianco nel caso in cui si salvi l'immagine come file trasparente in un secondo momento.

Il ripieno di "gelatina" è di un rosa brillante, con accenti rosa scuro e rosa acceso. Non dimenticate di delineare la vostra pasticceria in marrone scuro a 30-50% Opacità al fine di consentire agli angoli si fondono più facilmente.

4. Uova, Sunnyside Up!

Passo 1

La forma dell'icona dell'uovo è un compromesso tra un buon uovo fritto (che sarebbe dappertutto) e un cerchio perfetto (che sembra troppo artificiale, anche per questi piccoli disegni di pixel). Il numero di pixel è il seguente:

  • Dieci pixel.
  • Salta un pixel e posiziona tre su ciascun lato nella riga successiva.
  • Due pixel in diagonale rispetto agli ultimi tre e uno in diagonale. 
  • A questo punto, ripeterai ciò che è già stato fatto. Innanzitutto, posiziona quattro pixel in 50% di opacità negli angoli mancanti (vedi sotto). Completa il cerchio.

Passo 2

Cominciamo facilmente con il tuorlo, poiché c'è molto da fare nel rendering dell'uovo rispetto alle altre icone disegnate finora. Tre colori costituiscono il design del tuorlo.

  • Marrone medio nella metà inferiore: R: 182 G: 090 B: 020.
  • Ocra gialla ai lati: R: 255 G: 150 B: 57.
  • Giallo per il resto: R: 251 G: 208 B: 59.

Passaggio 3

Le immagini qui sotto possono sembrare più complicate di quanto non siano in realtà. Ho usato la stessa luce blu della pasticceria tostapane in Sezione 3, ma variava la sua opacità mentre ombreggiava e dithering. Lo stesso vale per Marrone scuro, che varia in Opacità a partire dal 20% -50% ed è stratificato su Bianco o Blu (sul fondo dell'uovo). Ho continuato a alleggerire l'uovo con Giallo, crema e bianco.

L'anti-aliasing attorno ai bordi esterni dell'uovo avviene in tre fasi: gli angoli lo sono 50% di opacità, c'è un paio di pixel vicino ad ogni angolo 30% di opacità, e il resto lo è 10-20% Opacità.

5. Friggete un po 'di pancetta

Passo 1

Ho optato per una spessa, piccola scorciatoia di pancetta, piuttosto che qualcosa di più realistico. Mentre questa icona è più sottile e più alta delle altre icone così com'è, non volevo rendere questa disparità più estrema quando sono riuniti.

Utilizzare il Strumento di matita disegnare quattro pixel, poi tre giù e al destra sul diagonale, e quattro pixel ancora. 

L'angolo sinistro è brusco a sei pixel giù, quattro diagonale al sinistrasette pixel in bassotre giù, e infine, quattro giù.

Il lato destro è tre al destrauno sul diagonale,sei giù, due sul diagonale al sinistra, quattro giù, e otto in giù al destra.

copiaIncolla questa sezione superiore, vai a Modifica> Trasforma> Rifletti verticale per capovolgerlo e collegarlo alla metà superiore. Unisci giù (Control-E) il livello copiato nel livello originale e arriviamo al rendering dell'icona bacon.

Passo 2

Utilizzare il Strumento di riempimento per riempire il bacon con Rosso mattone (R: 204 G: 0 B: 0). Disegna le strisce wiggley con bianco a 50% di opacità. Ombreggia i bordi della pancetta con Marrone scuro50% di opacità.

Passaggio 3

Aggiungi punti salienti alle strisce con bianca30%, 20% e 100% Opacità. Per piccoli pezzetti brillanti sulla pancetta, aggiungi qualche pixel attorno ai bordi 80% di opacità.

Passaggio 4

Per un modo più semplice per aggiungere una struttura, utilizzare il Strumento bacchetta magica (W) selezionare all'esterno dell'icona bacon. Vai a Seleziona> Modifica> Contratto ed entra 1 pixelInvertire il Selezione (Shift-Control-I). Creare un Nuovo strato sotto lo strato di pancetta, nel Livelli pannello e riempire la selezione con Marrone scuro30% Opacità. Impila i pixel marroni traslucidi negli angoli per ammorbidire i bordi dell'icona del bacon. Quando soddisfatto, Unisci (Control-E) strati di pancetta selezionati, nel Livelli pannello.

Buon giorno, hai finito!

Espandi le icone della tua colazione con frutta, caffè, succo e altro. Questo set è orientato verso i cibi americani per la colazione, quindi se sei fuori dagli Stati Uniti, o la tua vita è stata influenzata da altre culture (siano esse tue o di altri), ti sfido a creare piccole icone di quei deliziosi piatti. Fai un ulteriore passo avanti e crea le icone di ogni cibo nella tua cucina. Felice pixellismo, lettori!