Vai al tutorial
lil cactus

Come fare pixel art

Principiante10 minutiAggiornato il

Risposta rapida

In Lil Cactus parti da un quadro di 16 × 16 px e scegli Matita dal gruppo del Pennello nella barra degli strumenti. Imposta Dimensione su 1 px e Opacità su 100%, poi disegna con uno zoom elevato. Per una griglia da un pixel, scegli Altro poi Preferenze…, apri Guide e griglia, imposta la spaziatura su 2 px e le suddivisioni su 2, poi attiva Visualizza poi Mostra poi Griglia. Ingrandisci con Immagine poi Dimensioni immagine… e il metodo Vicina più prossima, usando un multiplo intero, per esempio da 16 a 512 px.

Un cactus in pixel a tre colori ingrandito da 16 per 16 a 512 per 512 pixel, che confronta i bordi morbidi di Bilineare con i bordi netti di Vicina più prossima
Lo stesso disegno ingrandito a 512 × 512: Bilineare (Prima) sfuma i bordi; Vicina più prossima (Dopo) mantiene distinti i blocchi di pixel. Trascina la maniglia per confrontare.
Tempo
10 minuti
Livello
Principiante
Ti serve
Un quadro piccolo e un mouse per posizionare i pixel
Funziona con
Nuove immagini RGB e sprite PNG
Apri l’esempio in Lil CactusUsa una tua foto

Gratis, senza registrazione. La tua foto resta sul tuo computer.

La pixel art si disegna una cella alla volta su un’immagine piccola. Il cactus di questo tutorial usa tre colori di pittura e uno sfondo bianco. Matita crea segni dai bordi netti; l’ingrandimento con Vicina più prossima copia quei pixel senza aggiungere colori intermedi tra l’uno e l’altro.

Disegna e ingrandisci un cactus in pixel in sette passaggi

  1. Apri un quadro di 16 × 16 e aggiungi un livello per disegnare

    Apri il file vuoto di esempio di questa pagina. Se invece vuoi creare un quadro tuo, scegli File poi Nuovo…, imposta Larghezza e Altezza su 16 e lascia Unità di misura su Pixel. Sfondo resta su Bianco. Fai clic su Crea.

    Scegli Livello poi Nuovo poi Nuovo livello. Nel pannello Livelli fai doppio clic sul nome del livello, digita Cactus e premi Enter. Lascia selezionato Cactus, sopra Sfondo.

    Le impostazioni di Nuovo documento con Larghezza 16, Altezza 16, Pixel e sfondo Bianco
    Usa un quadro minuscolo: queste dimensioni sono pixel dell’immagine, non della vista ingrandita.
    La parte inferiore della finestra Nuovo documento con il pulsante Crea cerchiato
    Crea il quadro dopo averne impostato le dimensioni.
    Il pannello Livelli con Cactus selezionato sopra un livello Sfondo bianco
    Disegna su Cactus; Sfondo fornisce il foglio bianco.
  2. Scegli un verde, poi la Matita a 1 px

    Scegli Finestra poi Colore. Nel campo #, sulla riga contrassegnata Primo piano, sostituisci il valore con 4A8654.

    Fai clic con il pulsante destro sul pulsante della barra degli strumenti sotto il Contagocce, oppure tienilo premuto, poi scegli Matita. Imposta Dimensione su 1 px. Metodo, cioè il modo in cui un tratto si mescola con i pixel esistenti, resta su Normale. Opacità regola quanto è pieno il segno; lasciala al 100%.

    Smussamento stabilizza il tratto; lascialo a 0 per posizionare queste celle. Lascia disattivate entrambe le caselle della pressione, per avere dimensione e opacità uniformi. Lascia disattivata Cancellazione automatica, così dipingendo sopra un pixel continui a usare il colore di primo piano.

    Il pannello Colore con il verde 4A8654 nel campo # cerchiato, sulla riga Primo piano
    Inserisci il verde nel campo #.
    Il gruppo del Pennello nella barra degli strumenti con il pulsante del gruppo e la voce Matita cerchiati, accanto agli strumenti vicini
    Matita condivide il pulsante della barra degli strumenti con Pennello; vista ingrandita.
    Le opzioni di Matita con il controllo Dimensione cerchiato e impostato su 1 px
    I segni della Matita da un pixel riempiono singole celle dell’immagine.
    Le opzioni di Matita con Metodo Normale, Opacità 100 per cento e Smussamento 0 per cento
    Lascia Normale, Opacità al 100% e Smussamento allo 0%.
    Le caselle Dimensione con pressione, Opacità con pressione e Cancellazione automatica della Matita, tutte senza spunta
    Per questo disegno lascia disattivate queste tre caselle.
  3. Mostra una griglia da un pixel

    Scegli Altro poi Preferenze…, poi Guide e griglia. Spaziatura della griglia (px del documento) imposta la distanza tra le linee principali; impostala su 2. Suddivisioni per cella principale divide quella distanza; impostala su 2. Fai clic su Chiudi.

    Scegli Visualizza poi Mostra poi Griglia, poi Visualizza poi Adatta allo schermo. Ora le linee sottili separano i singoli pixel, con linee più marcate ogni due pixel. La cella bianca in alto a sinistra è la colonna 1, riga 1. Conta le colonne da sinistra e le righe dall’alto.

    Il menu Altro con Preferenze cerchiato
    Apri Preferenze dal menu Altro.
    Le sezioni delle Preferenze con Guide e griglia cerchiato
    Nelle Preferenze scegli Guide e griglia.
    Le impostazioni di Guide e griglia con Spaziatura della griglia 2 e Suddivisioni 2 cerchiate, più il pulsante Chiudi
    Una spaziatura di 2 px divisa in 2 crea una griglia da un pixel.
    Il menu Visualizza e il suo sottomenu Mostra, con Griglia cerchiato
    Attiva Visualizza › Mostra › Griglia.
    Il quadro bianco vuoto di 16 per 16 con zoom al 3200 per cento e le celle della griglia da un pixel
    L’esempio con zoom al 3200%. Ogni cella piccola è un pixel dell’immagine.
  4. Disegna il fusto e i bracci

    Lascia selezionato Cactus e il verde come colore di primo piano. Trascina passando per il centro delle celle. Fai un tratto separato per ciascuna linea qui sotto:

    • Fusto: tre tratti verticali nelle colonne 8, 9 e 10, ognuno dalla riga 3 alla riga 10.
    • Braccio sinistro: tratti orizzontali sulle colonne 5–7 nelle righe 6 e 7. Aggiungi la punta verticale nella colonna 5, righe 4–5.
    • Braccio destro: tratti orizzontali sulle colonne 11–13 nelle righe 7 e 8. Aggiungi la punta verticale nella colonna 13, righe 5–6.
    La griglia da un pixel con il fusto verde del cactus e i due bracci alzati, prima del vaso e delle luci
    La sagoma verde, con ogni cella dipinta ancora visibile nella griglia.
  5. Aggiungi il vaso e i pixel più chiari

    Nel campo # del pannello Colore inserisci B66B4B per il vaso. Dipingi la riga 11 sulle colonne 6–12, le righe 12 e 13 sulle colonne 7–11, poi la riga 14 sulle colonne 8–10.

    Cambia il valore di # in A0C78D. Aggiungi una striscia chiara nella colonna 8, righe 4–9. Aggiungi due celle più chiare nella colonna 5, righe 5–6, e una nella colonna 11, riga 7. Usa la griglia completa del passaggio 3 per contare le posizioni.

    Nascondi Cactus con il suo pulsante a forma di occhio per confrontarlo con lo Sfondo vuoto, poi mostralo di nuovo.

    Una vista della griglia più ravvicinata del cactus in pixel finito, con bracci verdi, segni verde chiaro e un vaso color terracotta
    La pianta finita, ritagliata più da vicino per leggerne le singole celle.
    Il pannello Livelli con Cactus sopra Sfondo ed entrambi i pulsanti a forma di occhio cerchiati
    Cactus contiene il disegno. Sfondo controlla il bianco dietro.
  6. Salva l’originale piccolo, poi ingrandisci

    Scegli File poi Salva con nome poi Progetto Lil Cactus… mentre il quadro è ancora di 16 × 16. Così conservi i due livelli modificabili alle dimensioni originali del disegno.

    Scegli Immagine poi Dimensioni immagine… Lascia Unità di misura su Pixel, il pulsante a catena collegato e Ricampiona attivo. Ricampiona cambia il numero di pixel. Imposta Larghezza su 512; Altezza passa a 512 di conseguenza. Scegli Vicina più prossima nel menu del ricampionamento e fai clic su Ridimensiona.

    È un ingrandimento di 32×: ogni pixel originale diventa un blocco di 32 × 32.

    Dimensioni immagine che cambia 16 per 16 in 512 per 512 con le dimensioni collegate, Ricampiona attivo e Vicina più prossima selezionato
    Scegli Vicina più prossima prima di fare clic su Ridimensiona.
  7. Esporta il PNG, poi torna alle dimensioni di disegno

    Scegli File poi Esporta poi PNG…, poi fai clic su Esporta. Il nuovo file è di 512 × 512 px. Scegli Modifica poi Annulla per tornare al disegno di 16 × 16 per la prossima modifica.

    Ora File poi Salva aggiorna il progetto.

Perché Vicina più prossima conserva la tavolozza

Dimensioni immagine si apre con Bilineare selezionato. Con questo ingrandimento mescola i colori lungo i bordi. Vicina più prossima conserva i tre colori di pittura del disegno e lo sfondo bianco.

Un dettaglio ingrandito del bordo del cactus con blocchi quadrati di colore uniforme ottenuti con Vicina più prossima
Vicina più prossima: blocchi di pixel pieni, mostrati ingranditi.
Lo stesso bordo del cactus ingrandito con Bilineare, con colori intermedi che sfumano tra i blocchi
Bilineare: i colori sfumano ai bordi dello stesso disegno.

Cosa creare dopo

Pixel art: domande e risposte

Disegnare pixel art è come pixelare una foto?

No. In Lil Cactus, con questo metodo posizioni singole celle colorate per disegnare uno sprite. “Filtro › Effetto pixel › Effetto pixel…” invece raggruppa i pixel di un’immagine esistente in blocchi più grandi.

La pixel art può avere lo sfondo trasparente?

Sì. In Lil Cactus nascondi Sfondo con il suo pulsante a forma di occhio, come nel passaggio 5, poi scegli “File › Esporta › PNG…”. Il livello Cactus resta visibile senza il foglio bianco.

Conviene salvare la pixel art in PNG o in JPEG?

In Lil Cactus usa il PNG per conservare la tavolozza e la trasparenza. Il JPEG può introdurre colori in più intorno ai bordi netti e non conserva la trasparenza.

Perché non vedo la griglia da un pixel?

In Lil Cactus le linee secondarie della griglia di questo procedimento compaiono con zoom all’800% o superiore. Oltre a “Visualizza › Mostra › Griglia” deve essere attivo anche “Visualizza › Extra”. La spaziatura della griglia segue le preferenze di questo browser, quindi un altro browser può mostrare una griglia diversa. La griglia è una sovrapposizione dell’editor e non compare nel PNG esportato.

Posso annullare un solo tratto della Matita?

Sì. In Lil Cactus “Modifica › Annulla” rimuove l’ultimo trascinamento o clic della Matita come un unico passaggio della cronologia. “Modifica › Ripristina” lo ripristina.

Posso ingrandire la pixel art con un fattore non intero?

Sì, ma in Lil Cactus i multipli interi danno blocchi uniformi. Un ingrandimento non intero può rendere alcuni pixel originali più larghi di altri, anche con “Vicina più prossima”.