Share
Le illustrazioni a pixel sono ideali per creare icone di computer, immagini isometriche e persino scene intere. Possono essere realizzati rapidamente e facilmente con Photoshop con un paio di modifiche veloci alle impostazioni delle preferenze.
L'unico inconveniente è che la pixel art sembra migliore quando ogni pixel è stato posizionato a mano anziché utilizzare un filtro Photoshop. Esatto, posizionato a mano - so che questo suona un po 'pazzo, specialmente quando alcune scene di pixel contengono migliaia di pixel. Ma senza la posizione della mano la tua pixel art può sembrare una cattiva immagine di Lo Res, quindi fai attenzione!
Penso che una buona regola generale prima di iniziare sia che dovresti essere in grado di vedere chiaramente la tua creazione come un gruppo di diversi quadrati di mattoni colorati, ma se poi ti strabuchi gli occhi e li offuschi, puoi farlo come un'immagine. Immagina di creare un mosaico di tessere, solo che non hai bisogno di alcuna malta.
Di seguito è riportato un pezzo completo di pixel art, creeremo alcuni dei pezzi più basilari in questo lavoro.
OK, impostiamo per il disegno. Nel caso in cui tu non abbia una copia di Photoshop, ci sono alcuni programmi di disegno Pixel dedicati disponibili per il download gratuito:
Ho avuto un gioco con entrambi i programmi, ma sono tornato su Photoshop perché sono abituato ai comandi da tastiera.
Se hai usato lo strumento pennello a 9 pixel enormi anziché 1, si verificherà l'anti-aliasing e questo rovinerà l'effetto pixel hard-edge. Quindi attenersi a 1 pixel. "Mantienilo magra, continua così," come diceva mia madre.
Quando il disegno del pixel viene visualizzato al 100% (dimensioni effettive) lo strumento matita a 1 pixel di larghezza è molto piccolo, quindi potrebbe essere difficile vederlo e manipolarlo. Un'idea è di ingrandire la vista all'800% in modo da poter vedere cosa stai facendo. Spesso ho una seconda finestra aperta in Photoshop con la stessa vista dello schermo al 200% in modo da poter vedere rapidamente come il mio disegno guarda da vicino e anche da un po 'più lontano allo stesso tempo.
Possiamo salvare il nostro documento di lavoro come file PSD ed esportarlo per uso web in un secondo momento come file GIF. Possiamo anche ingrandire il file in seguito e trasformarlo in un TIF per la stampa CMYK.
Lean & Mean
OK, proviamo a disegnare qualcosa come questo libro aperto. Con lo strumento Penna disegna attorno al bordo per creare il tuo contorno nero. Quindi inserisci i colori piatti della pagina e il segno del libro.
Crea l'idea del testo sulla pagina con alcune linee di pixel singolo. Guarda come abbiamo messo un leggero nodo nella linea per dare l'impressione di una leggera curva sulla pagina.
Infine aggiungi alcuni punti salienti al centro delle pagine e del lato del segnalibro. Un piccolo tocco è un singolo evidenziatore di pixel nell'angolo in basso a destra di ogni pagina, dà solo un accenno al margine di una pagina invece di essere un blocco solido.
Una volta che hai le basi di contorni, colori, luci e ombre, puoi provare a costruire altre forme semplici.
Le icone dei pixel come quelle sopra possono essere progettate come una serie di linee che si trovano a 90º l'una dall'altra e sono molto quadrate e rettangolari. Occasionalmente però, potresti aver bisogno di una linea inclinata.
Qualcosa da tenere a mente è che le linee ad angolo sembrano migliori quando sono un modello regolare. Se sono irregolari (come quelli mostrati sotto), possono apparire grumosi e grezzi se osservati piccoli. Il secondo esempio qui sotto è molto più agevole per gli angoli isometrici, che sembrano grandi con i disegni in pixel, ma non è l'angolo "iso" di 30 ° che hai usato nella classe Disegno tecnico - in realtà è qualcosa di più vicino a 26,5 °. Purtroppo il 30º dà una linea grumosa al 100%. Se fai una linea che esegue regolarmente 2 punti in più e 1 punto in alto, otterrai 26,5º.
Cerchiamo di disegnare qualcos'altro che è un po 'più geometrico e utilizza più di quei motivi di linea?
La linea irregolare apparirà grumosa al 100%.
Linee morbide con angoli diversi.
Le linee lungo la lunghezza sono facili, ora sappiamo come fare quelle, ma che ne dici di quelle estremità arrotondate?
Questi due sono schemi regolari, ma stanno cambiando da larghe linee orizzontali fino ai quadrati e poi alle linee verticali. Sembra un po 'frastagliato ma se offuschi gli occhi sembra corretto!
La curva in alto a destra della fine del registro è anche il modello inverso della sezione in basso a sinistra. Conto spesso i pixel o ricordo certe combinazioni. Il combo di pixel sul cerchio è ...
Un po 'difficile da apprendere all'inizio come usare le curve di Bezier in Illustrator, ma presto ne avrai una "sensazione". La lunghezza del registro è semplice: utilizziamo solo il sistema 2 su 1 e rendiamo il registro più o meno lungo che vogliamo.
I cerchi concentrici più piccoli all'estremità danno una bella sequenza di squilli e alcune aree di ombreggiatura più scura nella parte inferiore del registro danno una certa profondità. Daremo al log un colore di abete piatto per iniziare, quindi per creare profondità, possiamo creare il 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. Attento però - più realistico e insidioso cerchi di ottenere l'immagine più sfocata se è destinata a riprodursi in piccole dimensioni.
Ho aggiunto alcuni pixel casuali sul log n. 3 perché volevo avere un aspetto approssimativo e contrastare un po 'con lo scoiattolo.
Per il registro finale ho lavorato in un'area di corteccia spogliata e un piccolo ramo. Ho trovato il modo migliore per completare prima un'area o uno stile e poi lavorarci più dettagliatamente. Non penso che avrei potuto disegnare il log della scorza spogliata con il pattern di dithering partendo da zero - invece, ho continuato ad aggiungere strati sopra ai livelli. Le fasi semplici funzionano meglio!
Passiamo a qualcosa di un po 'più irregolare, come uno scoiattolo che si siede sul nostro registro. 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 dimensioni giuste. Dato che stiamo usando questo particolare esempio per scopi editoriali, ho usato una fotografia come riferimento. Quindi inizio a disegnare. Presto un'attenzione particolare all'angolo su entrambe le orecchie e sui piedi perché voglio che seguano le linee isometriche.
Come puoi vedere il dettaglio è molto minimale - voglio solo ottenere la forma base e correggere gli angoli per primi. Faremo il resto del lavoro in Photoshop.
Entra nello schizzo, metti un nuovo livello e fantasma l'opacità in modo da poter vedere chiaramente i pixel che stai per creare. Non è una regola dura e veloce, ma trovo che i disegni a pixel siano migliori quando hanno contorni neri.
Eccomi qui intorno al mio scoiattolo con lo strumento matita che crea il contorno nero. Una cosa da evitare è aggrapparsi dove i contorni dei pixel si toccano su più di un lato. Se si disegna un quadrato in più, basta eliminarlo con lo strumento gomma (anch'esso mantenuto con una larghezza di 1 pixel, vedere il cerchio rosso), sembrerà più ordinato e il pubblico lo ringrazierà per questo.
Sembra ancora un po 'disordinato ma si modellerà! Le linee chiave all'interno dell'illustrazione aiutano anche a conferirle un aspetto audace, ma assicurati che siano di un colore scuro che non sia nero per fare contrasto. Chiamami un radicale ma sono andato con il marrone su questo.
Quando la forma è completa, riempire l'area interna con un bel colore medio tono (marrone morbido) e magari usare un colore chiaro per far risaltare alcuni punti salienti.
La regola del contorno nero non è difficile e veloce, ho lasciato alcune linee chiave nere sotto la mascella e la zampa anteriori, poiché stava diventando difficile vedere cosa stava succedendo.
La posizione delle mani, la rimozione, la modifica dei pixel è il punto in cui entra l'abilità. A volte. Ma una volta che inizi a prenderne il controllo, sarai in grado di disegnare qualsiasi cosa - tutto ciò di cui hai bisogno è un po 'di pazienza. Spero che questo ti aiuti e ti ispira a creare un ottimo lavoro tutto tuo!
Ecco alcune risorse per un'ulteriore lettura dei pixel:
Abbonati a Psdtuts + Feed RSS per i migliori tutorial e articoli di Photoshop sul Web.
Accentsconagua