Obiettivo
In questo articolo vedremo come sia possibile disegnare degli oggetti grazie alla pixel grafica.

Articolo
Chi non avesse mai visto un disegno fatto tramite questa tecnica deve sapere che questo modo di disegnare presuppone l'utilizzo dei pixel (singoli punti) come ingrediente del disegno.

Software
I software che possiamo utilizzare sono tantissimi, diciamo che qualsiasi software di grafica che riesca a disegnare un singolo pixel e' buono.
Solo per citarne qualcuno:

Photoshop
Fireworks
Ms paint

Prime tecniche
Vediamo come disegnare una semplice linea

In questo caso abbiamo disegnato una linea che ha inclinazione di 30° e come si puo' vedere e' costituita da tanti piccoli segmenti da 2 pixel. Il fatto che sia costituita da segmenti uguali e' molto importante per un ottima resa grafica. Un errore molto comune:

Linee
Abbiamo visto come realizzare una semplice linea con angolazione di 30°, adesso vediamo le altre angolazioni.

Esempio Della Camera

Qui segue il serio delle fasi che ho preso nella generazione delle queste mattonelle della casa per un gioco isometrico con un tatto del fumetto esso.

E una costruzione animata sia a 200% che al formato normale:

Esempio di Cottage

Ciò fa un passo via dallo sguardo cartoony e mostra i punti che ho usato generare una delle costruzioni per il mio progetto 'del villager '.

In primo luogo, utilizzando una delle mattonelle isometriche normali del terreno come base, ho disegnato il profilo di base ed ostruito in un certo colore.

Allora, ho rimosso tutto il profilo scambiandolo per un punto culminante o una tonalità un po'più scura.

Dopo, ho aggiunto alcune caratteristiche di base al cottage ed ho generato la figura del portico.

Per mezzo di un pennello, ho aggiunto alcuni colpi più scuri alla zona del tetto per cominciare a generare un'apparenza 'thatched '.

Allora ho aggiunto alcuni colpi più chiari al tetto e la I poca variazione dello schermo nelle pareti per irruvidire la loro apparenza.

Dopo quella e su uno strato dello spearate fra la casa e le mattonelle del terreno, ho aggiunto un'ombra nera.

Questa ombra fa uno strato di l'opacità è thn ridotto a 30%

Alcune piccole linee verdi sono aggiunte alle mattonelle del terreno per generare un'erba strutturata e per generare alcuni gambi del fiore:

I pixel dispari di colore allora sono stati aggiunti per fare alcuni piccoli fiori selvaggi fra l'erba e un suggerimento di un percorso del giardino è stato aggiunto per mezzo di un airbrush.

E, al formato reale:

Altri esempi

La seguente immagine, presa da www.eboy.com mostra alcuno che evidenzia e proteggere. Noti che il lato destro del furgone è in ombra, tuttavia esso è il lato della mano sinistra della pulizia della persona esso quale è in schermo. Tuttavia, il resto del camion mostra l'uso minimo dei colori e dell'uso intelligente delle stesse tonalità per la messa in evidenza di altre zone.

Below, shows a sample screen from the Habbo Hotel site
(www.habbohotel.com)

Zooming in on a few sections from this, will show some closer
detail.

The above shows the use of the thin highligh line for inner
edges

This shows the use of a black outline on the various objects to
add emphasis to them. Notice that for the most part, the black is
only used along the outer edges.

In this example, also borrowed from www.eboy.com, you can see the
use of other angled lines to create an irregular shape.

Version 2.0 (Last Update: Nov 19, 2002)
Copyright © 2002 Zoggles wizard@pixel-zone.net
Permission is granted to copy and distribute this document for non-commercial use, free of charge, as long as it's not altered in anyway without permission and that credit is given to the author.

Cambiare una immagine 2D in isometrica

È importante si rende conto che non potete dare appena ad una 2D immagine una direzione obliqua per renderla isometrica, poichè una 2D immagine non mostra profondità e semplicemente sporgersi l'immagine indietro dopo avere datle una direzione obliqua non potrebbe fornire risultati richiesti.

Entrambe le suddette immagini hanno potuto essere rappresentazioni di più piccola 2D vista vicino esso.

È inoltre degno notare quello che dà semplicemente ad un'immagine una direzione obliqua da 26.565° non fornirà vero risultato isometrico. Sembrerà allungata.

Poichè la suddetta immagine mostra, semplicemente dare ad un'immagine una direzione obliqua farà l'oggetto comparire streched. Le basi dello schema centrale indicano che x1 > x2. L'esempio a destra mostra la versione matematicamente corretta. In effetti, l'immagine in primo luogo è stata schiacciata orizzontalmente, prima di essere dato, comunque è spesso più facile da generare qualche guida di riferimento e da ricreare loro appena l'immagine. Dare inoltre contribuirà a generare il antialiasing indesiderabile.

Se desideraste ancora usare un metodo dante, in primo luogo dovreste conoscere quanto per schiacciare orizzontalmente la 2D immagine vicino per calcolare l'importo, la distanza 'x 'sotto nello sketh dovete essere calcolati.

Ora, calcolare la percentuale che dovreste schiacciare orizzontalmente vicino, dividere questo valore per la x dalla larghezza originale (2) e moltiplicare per 100.

1,7889 ÷ 2 x 100 = 89,443%

Sculpting

Un metodo, che può a volte risultare essere un metodo più facile, deve usare le più grandi figure e 'sculpt 'verso l'esterno le zone indesiderabili da loro. per esempio: la tabella qui sotto.

In primo luogo fuori, i piedini della tabella sono contrassegnati fuori.

Le zone indesiderabili allora sono cancellate semplicemente.

Il risultato finora tuttavia è piuttosto piano. I piedini non hanno profondità e compaiono sottile di carta. Ciò è perché vedreste gli altri lati di ogni piedino. Questi allora devono re-essere aggiunti.

Per concludere, quella linea rossa dell'indicatore è sostituita dal outine e dal punto culminante in armonia con il resto della tabella.

Coloritura e tetto

Finora, ho indicato soltanto i per la matematica e la costruzione di base senza riferimento al colouring o alla tonalità usata. Tuttavia tutti gli suddetti esempi avranno dato una buona indicazione di come gli oggetti sono protetti. Specialmente l'esempio della tabella qui sopra.

Per lo stile isometrico 'comic 'tipico un profilo scuro o nero è messo intorno al bordo othermost dell'oggetto (non sui angoli interni di esso)

Per un oggetto colorato solido, ci è quattro tonalità principali usate (e un colore del profilo è richiesto). Il più chiaro di quale è usato come il colore di punto culminante del bordo superiore. Il secondo più chiaro è usato come la superficie superiore, gli altri due è usato dai lati differenti dei rivestimenti. Sulla tabella qui sopra, inoltre ho usato la seconda tonalità (superficie superiore) per una messa in evidenza lungo i bordi d'angolo dei piedini. La tonalità più chiara avrebbe osservato troppo luminosa per una faccia 'ombreggiata '.

Come breve esempio, ho generato appena il profilo di struttura stranamente a forma di.

Allora, ho semplicemente blocco gli ho riempito le zone.

Dopo, ho rimosso le linee nere interne e le ho sostituite con i punti culminanti ed occasionalmente una tonalità più scura. Noti che ho messo soltanto i angoli convessi della linea di punto culminante giù. Per quei concavi ho usato appena lo più scuro delle due tonalità da qualsiasi lato.

Allora ho aggiunto alcune finestre come il colore del blocco, usando ancora una tonalità più scura per i rivestimenti di destra parteggia.

La messa in evidenza allora è stata aggiunta ai bordi delle finestre per dare loro una poca profondità.

Per concludere, ho aggiunto una certa erba intorno esso per effetto ed ho aggiunto un'ombra sull'erba.

E, al formato reale:

Version 2.0 (Last Update: Nov 19, 2002)
Copyright © 2002 Zoggles wizard@pixel-zone.net
Permission is granted to copy and distribute this document for non-commercial use, free of charge, as long as it's not altered in anyway without permission and that credit is given to the author.

Isometrics matematicamente

La vista isometrica è basata su una vista ruotata di vista di griglia ad un'altezza. Ciò dà una griglia a forma di diamante come indicato sotto. Fornisce una rappresentazione tridimensionale e perspectiveless di un oggetto o gli oggetti e specialmente è favorita per i modelli di ingegneria

Tradizionalmente, la vista isometrica è basata su un angolo 30°, tuttavia, su uno schermo del calcolatore questo angolo darà una linea diagonale sembrante irregolare e sudicia può essere visto nello schema qui sotto. Per questo motivo, un angolo approssimativamente equivalente a 26.565° è usato mentre genera una linea accurata e pulita

Naturalmente questa figura magica di 26.565° è ragionevolmente inutile quando pixelling realmente. Tutto che abbiate bisogno del concentrato sopra è quello in su, due attraverso il principio delle linee di disegno. Se tuttavia, state provando ad usare una struttura o qualcosa come sovvrapposizione senza realmente pixelling isometrico, quindi questa figura è importante quando date alla vostra immagine una direzione obliqua per ottenerli allo stesso angolo.

I due tipi di costruzioni

Ci sono due metodi principali per tracciare i grafici isometrici come illustrato sotto. Scriva ad usi (rossi) di A una linea a macchina dei tre pixel ai angoli di andata ed il tipo la B (verde) non.

Ora, se state progettando soltanto disegnare un singolo oggetto, quindi il uno o il altro metodo è benissimo e probabilmente favorirei il tipo A mentre dà più tagliente e pulitore che osserva i punti culminanti e mantengo le sfaccettature lo stesso formato e la figura. Tuttavia, se progettate sugli oggetti del tiling o progettate sulla disposizione loro su una griglia delle specie, quindi voi dovrebbe definately andare con tipo B poichè vi concluderete al contrario in su con le linee osservanti dentellate ugly come illustrato sotto.

Le tre frecce indicano ad alcuni degli impulsi errati piccoli in che cosa comparirebbe al contrario come linea retta. Con tipo B tuttavia, non ci è tale problema ed ottenete un bordo pulito piacevole. Inoltre, una griglia consisterà delle linee pulite.

Ci sono naturalmente varie opzioni per proteggere, la messa in evidenza e descrivere. L'immagine animata sotto mostra alcune combinazioni di base. La decisione di cui usare dipende dallo stile dei grafici state provando a generare.

Costruzione della griglia

Come precedentemente spiegato, il tipo B è il metodo migliore per la griglia basata o ha coperto di tegoli i grafici isometrici. Ora i relativi ragionevolmente straightforwards per disegnare alcune linee criss-crossed diagonali agli angoli retti, ma meno evidente come questo allora mattonelle.

Per ottenere correttamente lle mattonelle a tessalate, le linee nere sarebbero usate soltanto da due lati di ogni quadrato (o di figura del diamante). La animazione sopra eventualmente mostra come le figure reali delle mattonelle sono prodotte per quella griglia. La animazione sotto le esposizioni come questa figura viene insieme una volta coperta di tegoli. È importante notare che i lati destri e sinistri delle mattonelle sono due pixel alti.

Questa immagine altamente zumata dovrebbe mostrare i punti reali del contatto e della sezione di doppia altezza sui bordi destri e sinistri delle mattonelle che ho accennato.

Sotto è una coppia delle immagini che potreste trovare utili. Uno è una griglia isometrica di base, l'altro è un modello rettangolare che può essere usato come materiale di riempimento del modello per generare una griglia isometrica.

Costruzione di base di figura

Il seguenti sono tutti gli esempi di varie figure ed ostruiscono le costruzioni:

I cerchi sono la parte più ingannevole delle immagini isometriche. Mentre un orizzontale o cerchio piano è isometrico relativamente semplice, quei rotelle e cerchi dritti sono mólto più ingannevoli.

Il cerchio superiore è stato disegnato semplicemente usando il cerchio che può essere usato come guida al pixel intorno. Il lato circonda tuttavia, necessità di essere tirato ed allora obliquo a per misura la faccia mentre la animazione mostra.

Version 2.0 (Last Update: Nov 19, 2002)
Copyright © 2002 Zoggles wizard@pixel-zone.net
Permission is granted to copy and distribute this document for non-commercial use, free of charge, as long as it's not altered in anyway without permission and that credit is given to the author.

Obiettivo
In questo articolo vedremo come sia possibile disegnare alcune semplici figure tridimensionali grazie alla pixel grafica.

Piano
Vediamo come realizzare un semplice piano. Creiamo il lato a destra e il lato in alto

Selezioniamo tutto e lo copiamo negli appunti

Incolliamo dagli appunti e facciamo capovolgere orizzontalemnte e verticalmente cio' che abbiamo incollato. Uniamo al precedente.

Parallelepipedo
Uniamo, copiamo e incolliamo cio' che abbiamo visto sopra

Piramide
Uniamo, copiamo e incolliamo cio' che abbiamo visto sopra

Cilindro
Uniamo, copiamo e incolliamo cio' che abbiamo visto sopra

Obiettivo
In questo articolo vedremo come sia possibile colorare le figure grazie alla pixel grafica.

Coloriamo
Il modo piu semplice

Il modo che da piu' effetto, mettendo un colore bianco nei lati interni e modificando i colori interni mettendo colori scuri
e chiari.

Introduzione
Questo documento descrive le varie tecniche per la scelta dei colori per l'arte del pixel.
Saranno trattate soltanto le tecniche di scelta dei colori.
Tutte le informazioni sono state raccolte usando (PSP) 7,04.

Iniettore Di Colore

La maggior parte dei campi di uso sei di programmi della vernice per i colori di scelta, questi campi tutti usano i numeri 0 - 255 come valori. I sei campi sono:

R - Colore rosso
G - Verde
B - Azzurro
H - Tonalità
S - Saturazione
L - Luce

I primi tre campi sono colore rosso, verde ed azzurro. I video del calcolatore mostrano i colori mescolando questi tre colori di luce negli importi differenti. I valori di RBG a volte sono visualizzati come appena numeri. Per esempio, un colore rosso di 255.0.0 mezzi = 255, verde = 0 ed azzurro = 0. Il RGB che di rotazione tutto il basso fino ad un massimo di 0.0.0 produce il nero, 255.255.255 produce il bianco.

La tonalità è il nome del colore in se. Nei programmi della vernice, il nome è realmente un numero. Qui è una tabella dei sei primari e le tonalità secondarie e là stima:

Le tonalità secondarie sono rese ai miei due colori primari di miscelazione insieme:

R + G = Y
G + B = C
B + R = M.

La saturazione è la quantità di colore in una tonalità. La saturazione bassa produce una tonalità grayish, su produce i colori più intensi. La seguente tabella mostra il colore rosso a sei punti di saturazione:

La luce è la quantità di nero o di bianco in un colore. Un valore basso produce un colore scuro, un alto valore produce chiaro. La seguente tabella mostra il colore rosso in sei fasi di leggerezza:

Un valore di 0 produrrà sempre il nero, 255 sempre produrrà il bianco.

Eyeballing

Eyeballing sta scegliendo semplicemente i colori sul mosca che il colore può all'essere selezionato in tutto l'ordine,
ma è solitamente meglio funzionare in un senso, per esempio da luce scuro o oscurità a luce.

1) Inizi con un colore basso, esso è molto più facile da funzionare da luce ad oscurità.

2) Dopo, scelga un secondo colore, solitamente una tonalità più scura del primo colore.

3) La ripetizione per tuttavia molte tonalità è voluta.

4) Qui è un esempio di uno sprite protetto con i colori da suddetto:

width=60 border=0/>

Nel scegliere i colori, tenga presente come cambiare i valori di RGBHSL interesserà i colori. Le tonalità più scure di un colore hanno solitamente saturazione più bassa che quelle sopra esso e quasi sempre hanno una leggerezza più bassa. La tonalità d'altra parte, non cambia solitamente molto durante le tonalità.

Grigio

La tecnica grigia in primo luogo usa un'immagine di gradazione di grigio ed aggiunge il colore più successivamente. Lo sprite in primo luogo è protetto senza alcuna tonalità, o saturazione, luce giusta. Allora un nuovo strato è fatto in cima all'immagine ed è usato per aggiungere la tonalità e la saturazione al valore.

Inizi con uno sprite protetto di gradazione di grigio, esso è il più facile da funzionare nel modo di gradazione di grigio in modo da il colore non è aggiunto casualmente.

Se l'immagine è nella gradazione di grigio, aumenti la intensità del colore a 24 bit. Generi un nuovo strato e che assicurisi che è in cima a quello primo. Cambi il modo di miscela dello strato per moltiplicarsi. Ora scelga un colore e disegni sopra lo sprite laddove che il colore dovrebbe andare.

Grigio

La tecnica grigia in primo luogo usa un'immagine di gradazione di grigio ed aggiunge il colore più successivamente. Lo sprite in primo luogo è protetto senza alcuna tonalità, o saturazione, luce giusta. Allora un nuovo strato è fatto in cima all'immagine ed è usato per aggiungere la tonalità e la saturazione al valore.

Inizi con uno sprite protetto di gradazione di grigio, esso è il più facile da funzionare nel modo di gradazione di grigio in modo da il colore non è aggiunto casualmente.

Se l'immagine è nella gradazione di grigio, aumenti la intensità del colore a 24 bit. Generi un nuovo strato e che assicurisi che è in cima a quello primo. Cambi il modo di miscela dello strato per moltiplicarsi. Ora scelga un colore e disegni sopra lo sprite laddove che il colore dovrebbe andare.

Una parola dell'attenzione; nel selezionare le tonalità di gray, non selezioni nero puro (0.0.0) o il bianco (255.255.255). Nero ed il bianco non cambierà quando eccedenza tirata sul nuovo strato.

Questo metodo ha un problema grande, tutti quei grays può ottenere confusionario, particolarmente quando due zone che sono supposte per essere colori differenti coincidono. La soluzione per questa è nella sezione seguente.

Grigio Modificato

Invece di usando gli strati mentre lavora allo sprite in se, una piccola immagine è usata in primo luogo a prescelto le tonalità usando la tecnica grigia. Dopo che le tonalità siano selezionate, lo sprite è protetto come se i colori dove selezionato eyeballing.

1. In primo luogo, cominci con una piccola immagine in bianco. Disegni alcuni pixel grigi di leggerezza di variazione

2. Generi un nuovo strato e regolilo è modo di miscela da moltiplicarsi e disegnano sopra i grays con il colore della scelta.

3. Fonda gli strati e conservi l'immagine per riferimento futuro. Ora usi i colori per proteggere lo sprite.

Entrambe le tecniche funzionano nello stesso senso, ma la versione modificata è migliore per l'arte del pixel, che richiede un livello elevato di precisione. La tecnica normale è migliore per le grandi illustrazioni come CG's o ambiti di provenienza.

Moltiplichisi

La tecnica di moltiplic usa parecchi strati regolati per moltiplicarsi per proteggere uno sprite ai punti multipli.
Inizi scegliendo un colore basso ed ostruisca nelle forme principali dello sprite. Il colore basso dovrebbe essere la tonalità più chiara voluta.

Generi il nuovo insieme di strato per moltiplicare più basso l'opacità dello strato ad intorno 30%. Usando lo stesso colore ha usato ostruire nelle forme principali, disegna sopra lo sprite in cui l'ombra dovrebbe andare.

Generi un altro insieme di strato per moltiplicarsi. Per generare le tonalità più scure usi un'più alta opacità. Ripeti questo processo per tuttavia molte tonalità sono voluti.

Come con la tecnica grigia, questo può ottenere confusionario. Lo sprite ha potuto concludersi su avere 4 o 5 strati. La cancellazione o aggiungere del pixel in uno strato può interessare tutti gli altri strati con i risultati indesiderabili. La soluzione per questa è simile alla tecnica grigia modificata.

Modificato Moltiplichisi

Invece di usando fa uno strato di mentre lavora allo sprite in se, una piccola immagine è usata in primo luogo a prescelto le tonalità usando la tecnica di moltiplic. Dopo che le tonalità siano selezionate, lo sprite è protetto come se i colori dove selezionato eyeballing.

In primo luogo, cominci con una piccola immagine in bianco. Disegni i pixel della linea una n largamente. Se 4 tonalità sono volute, disegni i pixel della linea 4 largamente.

Generi 4 nuovi strati regolati per moltiplicarsi con i opacities di variazione e per disegnare sopra la linea fino a 4 tonalità un presente. Fonda gli strati e conservi l'immagine per riferimento futuro.

Protegga lo sprite. Ora tutti i colori sono su 1 strato, che è molto più facile da controllare.

Entrambe le tecniche funzionano nello stesso senso, ma la versione modificata è migliore per l'arte del pixel, che richiede un livello elevato di precisione. La tecnica normale è migliore per le grandi illustrazioni come CG's o ambiti di provenienza

Opacità

La tecnica di opacità è grande per la generazione delle pendenze regolari e complesse dei colori. Non è precisa quanto gli altri metodi, ma per la maggior parte dovrebbe bastare per la maggior parte dei lavori.

Inizi con una linea dei pixel.

Scelga un colore per mescolarsi. Regoli l'opacità della spazzola ad un valore più basso, intorno 30 - 50%. Disegni sopra la linea nei colpi multipli. Ogni colpo si mescola nel colore attuale di più ed in più.

Qui è la stessa linea con colore rosso aggiunto a 30%.

Usando l'opacità può generare milioni di gradazioni di colore regolari. È semplice da capire, ma introiti un istante da acquistare padronanza di. Questa tecnica è più adatta per gli alti ambiti di provenienza di colore. Le tecniche precedenti, per la maggior parte, daranno i risultati soddisfacenti.

Note

Colori Primari

L'arte tradizionale usa rosso, giallo e l'azzurro mentre i colori primari, calcolatori usano rosso, verde e l'azzurro. Ci sono inoltre tre colori secondari generati mescolando due colori primari insieme; arancione, verde e viola in arte tradizionale e colore giallo, ciano (azzurro del cielo) e fucsina (colore rosa) in calcolatori. Rossi, gialli ed azzurro sono i colori primari del pigmento , il colore rosso, verde e l'azzurro è i colori primari di luce .

Un mnemonic per i sei primari ed i colori secondari del pigmento è ROYGBV [ roy-gee-biv ], che corrisponde a rosso, arancione, giallo, verde, blu e viola. L'equivalente del calcolatore sarebbe RYGCBM [ ryh-ryh-gic-bim-bim ], che corrisponde a rosso, giallo, verde, ciano, blu e fucsina.

Photoshop

PSP usa il metodo più comune di usando i valori 0 - 255 per tutti i sei campi, HSLRGB. Results possono variare quando usando Photoshop. Lo PS usa HSB (tonalità, saturazione e luminoso) anziché HSL per i colori di scelta. Il valore di una tonalità varia 0 - 360 anziché da 0 - 255. La tabella per le tonalità è un po'differente pure:

La saturazione e la luminosità sono registrate con i cursori di percento anziché i valori numerici. Le tabelle sono differenti pure:

Fortunatamente, il RGB ancora usa 0 - 255 come loro valori.

Tecnica Preferita

Personalmente, preferisco la tecnica grigia modificata. È il più veloce ed il più semplice e rende a buoni risultati la maggior parte del tempo. Occorre un istante per ottenere usata a scegliere il colore corretto per usare sullo strato superiore, ma i risultati sono grandi a evitare i colori che sono troppo scuri o al neon, che può accadere mólto quando appena eyeballing. Naturalmente, non potrete sempre ottenere il giusto il giusto colore con soltanto una tecnica sola. Mi concludo solitamente sullo scompigliare con l'opacità e sul eyeballing le tecniche come punto finale prima di liberare uno sprite per fabbricazione in serie.

Ciò è lo sprite completato ed è gamma di colori di colore. La gamma di colori è stata generata in primo luogo usando la tecnica grigia modificata e lo sprite è stato disegnato tutti su uno strato.

Version 0.5 (Last Update: 4-14-02)
Copyright © 2002 Preston Kyle Mays pkmays@lycos.com
Permission is granted to copy and distribute this document for non-commercial use, free of charge, as long as it's not altered in anyway without permission and that credit is given to the author.

Disegnare una persona umana

Disegnare personaggi isometrici e' la cosa piu' difficile da fare con la pixel art.
Richiede un sacco di tempo.

Prima cosa comincio generando un piccolo rettangolo isometrico verticale, circa
il formato che desidero la mia persona essere. Allora taglio una piccola parte fuori
della parte superiore di esso fino a che non raggiunga la linea del collo.

Dopo, gene