Impara a fare a mano pixel art disegnare in Photoshop

Le illustrazioni pixel sono ottime per creare icone del computer, immagini isometriche e persino intere scene. Possono essere creati rapidamente e facilmente utilizzando Photoshop con alcune rapide modifiche ai preset.

L'unico aspetto negativo, tuttavia, è che il pixel art sembra migliore con ogni pixel posizionato a mano invece di utilizzare un filtro di Photoshop. Esatto, posizionato a mano - so che suona un po' folle, specialmente quando alcune scene di pixel contengono migliaia di pixel. Ma senza il posizionamento della mano, la tua può farlo pixel art sembra una brutta immagine lo res quindi fai attenzione!

Penso che una buona regola pratica prima di iniziare sia che dovresti essere in grado di vedere chiaramente la tua creazione come un gruppo di pietre quadrate di diversi colori, ma se poi strizzi gli occhi e sbava gli occhi puoi vederli come un'immagine riconosciuta. Immagina di realizzare un mosaico di piastrelle, solo che non hai bisogno di malta.

Di seguito è riportato un artwork pixel completo, creeremo alcune delle parti più basilari in questo lavoro.

Software

OK, prepariamoci a disegnare. Nel caso in cui non si disponga di una copia di Photoshop, sono disponibili per il download gratuito alcuni programmi di disegno di pixel specializzati gratuiti:

• Pixel (Mac)
• Graphic Gale (Vittoria)
• Altre applicazioni possono essere trovate qui.

Ho giocato con entrambi i programmi, ma sono tornato a Photoshop perché sono abituato alle scorciatoie da tastiera.

Ok, impostiamo una pagina

1. Innanzitutto, apri le preferenze in Photoshop e imposta l'interpolazione dell'immagine su Nearest Neighbor.
2. Crea una nuova pagina di 300 px per 300 px a 72 dpi.
3. Seleziona lo strumento Matita a 1 pixel. Gli strumenti matita e gomma sono gli unici strumenti di cui hai veramente bisogno.
4. Di tanto in tanto puoi usare la bacchetta magica per selezionare un'area da riempire, ma assicurati che Anti-Alias ​​sia disattivato.

Se hai utilizzato lo strumento pennello con ben 9 pixel invece di 1, si verifica l'anti-alias, che rovina l'effetto pixel con bordi netti. Quindi attieniti a 1 pixel. "Resta magro, resta cattivo", come diceva mia madre.

Quando il disegno in pixel viene visualizzato al 100% (dimensione effettiva), lo strumento Penna è molto piccolo e ha una larghezza di 1 pixel, quindi potrebbe essere difficile da vedere e modificare. Un'idea è di ingrandire fino all'800% in modo da poter vedere cosa stai facendo. Spesso ho una seconda finestra aperta in Photoshop con la stessa visualizzazione dello schermo al 200%, così posso vedere rapidamente come appare il mio disegno da vicino e allo stesso tempo da un po' più lontano.

Possiamo salvare il nostro documento di lavoro come file PSD e successivamente esportarlo come file GIF per l'uso web. Possiamo anche successivamente ingrandire il file e convertirlo in un TIF per la stampa CMYK.

Iniziamo a disegnare

OK, proviamo a disegnare qualcosa come questo libro aperto. Disegna attorno al bordo con lo strumento Penna per creare il tuo contorno nero. Quindi riempi i colori piatti della pagina e il segnalibro.

Crea l'idea del testo sulla pagina con alcune linee a pixel singoli. Guarda come aggiungiamo una leggera piega alla linea per dare l'impressione di una leggera curva sulla pagina.

Infine, aggiungi dei pennarelli al centro delle pagine e sul lato del segnalibro. Un bel tocco è un'evidenziazione di un singolo pixel nell'angolo inferiore esterno di ogni pagina, dà solo un accenno al bordo di una pagina piuttosto che essere un blocco solido.

Dopo aver imparato le basi di contorni, colori, luci e ombreggiature, puoi provare a creare altre forme semplici.

Linee pixel ad angolo

Le icone dei pixel come quelle sopra possono essere progettate come una serie di linee distanti solo 90º l'una dall'altra e sono molto quadrati e rettangoli. Tuttavia, a volte potresti aver bisogno di una linea ad angolo.

Qualcosa da notare è che le linee angolate hanno un aspetto migliore quando sono uno schema regolare. Quando sono irregolari (come quelli mostrati sotto), possono apparire grumosi e ruvidi se visti piccoli. Il secondo esempio qui sotto sono angoli isometrici molto più fluidi che stanno benissimo con la pixel art, ma non è l'angolo "Iso" di 30º che hai usato nella lezione di disegno tecnico - in realtà è un po' più vicino a 26,5º. Sfortunatamente, 30º dà una linea bitorzoluta al 100%. Se disegni una linea che va regolarmente 2 punti sopra e 1 punto sopra, ottieni 26,5º.

Proviamo a disegnare qualcos'altro che sia un po' più geometrico e utilizzi più di quei modelli di linee?

La linea irregolare sembra bitorzoluta al 100%.

Motivo a linee morbide con diverse angolazioni.

Disegniamo un registro dei pixel

Le linee lungo la lunghezza sono facili, ora sappiamo come farle, ma che ne dici di quelle estremità arrotondate?

Questi due sono schemi regolari ma cambiano da larghe linee orizzontali a quadrati e poi linee verticali. Sembra sfilacciato ma se scorri gli occhi sembra a posto!

La curva in alto a destra all'estremità del tronco è anche il modello inverso della sezione in basso a sinistra. Spesso conto i pixel o memorizzo determinate combinazioni. La combinazione di pixel sul cerchio è...

• 3 quadrati (attraverso)
• 2
• 111
• 222 (unto)
• 6
• 2
• Erste

All'inizio è un po 'difficile da padroneggiare, come usare le curve di Bezier in Illustrator, ma presto ne avrai la "sensazione". La lunghezza del registro è facile, utilizziamo semplicemente il sistema 2 lungo 1 su e rendiamo il registro lungo o corto come vogliamo.

Cerchi concentrici più piccoli all'estremità creano un bel motivo ad anello e alcune aree di ombreggiatura più scura nella parte inferiore del tronco d'albero gli conferiscono una certa profondità. Per prima cosa diamo al tronco d'albero un colore abete piatto, quindi per creare profondità, possiamo creare dithering posizionando pixel di colore contrastante su entrambi i lati delle nostre linee di luce alta/bassa.

Puoi costruire i modelli e renderli più complessi. Fai attenzione però: più realistico e complicato provi, più sfocata può apparire l'immagine quando è pensata per essere riprodotta a dimensioni ridotte.

Ho aggiunto alcuni pixel casuali in più nel registro n. 3 perché volevo che avesse un aspetto approssimativo e si distinguesse un po' dallo scoiattolo.

Per l'ultimo tronco ho lavorato in una zona con corteccia spogliata e un piccolo ramo. Ho trovato meglio finire prima un'area o uno stile e poi lavorarci sopra in modo più dettagliato. Non credo che avrei potuto disegnare da zero il tronco della corteccia spogliata con un motivo di dithering, invece ho continuato ad aggiungere strati e livelli. Le fasi semplici funzionano meglio!

Disegno irregolare dei pixel

Passiamo a qualcosa di più irregolare, come uno scoiattolo appollaiato sul nostro tronco. Per qualcosa di complicato come questo, è meglio iniziare con carta e matita.

Per prima cosa ho disegnato un quadrato isometrico sulla mia pagina per ottenere le giuste dimensioni. Dato che stiamo usando questo esempio per scopi editoriali, ho usato una foto come fonte di ispirazione. Poi comincio a disegnare. Presto particolare attenzione all'angolo di orecchie e piedi perché voglio che seguano le linee isometriche.

Come puoi vedere, i dettagli sono molto minimi: voglio solo elaborare prima la forma di base e gli angoli retti. Il resto lo facciamo noi con Photoshop.

Inserisci lo schizzo, inserisci un nuovo livello e attiva l'opacità in modo da poter vedere chiaramente i pixel che desideri creare. Non è una regola rigida e veloce, ma trovo che la pixel art abbia un aspetto migliore quando ha contorni neri.

Qui giro il mio scoiattolo con lo strumento penna e creo il contorno nero. Una cosa da evitare è l'accumulo, in cui i pixel del contorno toccano più di un lato. Se disegni un quadrato in più, cancellalo semplicemente con la gomma (anch'esso mantenuto a 1px di larghezza, vedi cerchio rosso), sembrerà più ordinato e il tuo pubblico ti ringrazierà.

Sembra ancora un po' disordinato, ma si formerà! Le linee chiave all'interno dell'illustrazione aiutano anche a dargli un aspetto audace. Assicurati solo che siano di un colore scuro che non sia nero per aggiungere un po' di contrasto. Chiamami radicale, ma ho scelto il marrone.

Quando la forma è completa, riempi l'area interna con un bel colore di tono medio (marrone tenue) e magari usa un colore chiaro per far risaltare alcuni punti salienti.

La regola del contorno nero non è dura e veloce, ho lasciato alcune linee nere chiave sotto la mascella anteriore e la zampa poiché stava diventando difficile vedere cosa stava succedendo.

Conclusione

Posizionare, rimuovere e manipolare manualmente i pixel è dove l'abilità entra in gioco. Una volta ogni tanto. Ma una volta presa la mano, puoi disegnare praticamente qualsiasi cosa: tutto ciò di cui hai bisogno è un po' di pazienza. Spero che questo ti aiuti e ti ispiri a creare grandi opere tue!