{"id":54617,"date":"2019-12-30T00:00:00","date_gmt":"2019-12-29T21:00:00","guid":{"rendered":"https:\/\/prohoster.info\/blog\/blog_prohoster\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu"},"modified":"2020-02-18T14:02:39","modified_gmt":"2020-02-18T11:02:39","slug":"piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","status":"publish","type":"post","link":"https:\/\/prohoster.info\/it\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","title":{"rendered":"Pixel art per principianti: istruzioni per l'uso","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/00d172ccd0d834f54c3fa1ffe2f03481.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nSpesso gli sviluppatori indie devono assumere pi\u00f9 ruoli: game designer, programmatore, compositore, artista. E, quando si tratta di grafica, molti scelgono il pixel art, che a prima vista sembra semplice. Ma per ottenere un bel risultato servono molta esperienza e competenze specifiche. Ho trovato un tutorial per chi ha appena iniziato a conoscere le basi di questo stile: con descrizione del software specifico e delle tecniche di disegno attraverso due sprite.<noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<h2>Sfondo<\/h2>\n<p>\nIl pixel art \u00e8 una forma di arte digitale in cui si apportano modifiche a livello dei pixel. Essenzialmente \u00e8 associato alla grafica dei videogiochi degli anni '80 e '90. Allora, gli artisti dovevano considerare i limiti di memoria e la bassa risoluzione. Oggi il pixel art \u00e8 ancora popolare nei giochi e come stile artistico in generale, nonostante la possibilit\u00e0 di creare grafica 3D realistica. Perch\u00e9? Anche senza considerare la nostalgia, realizzare un lavoro eccezionale in tali rigide limitazioni \u00e8 una sfida gratificante.<\/p>\n<p>La barriera d'ingresso nel pixel art \u00e8 relativamente bassa rispetto all'arte tradizionale e alla grafica 3D, il che attrae gli sviluppatori indie. Ma ci\u00f2 non significa affatto che sia semplice <b>completare<\/b> un gioco in questo stile. Ho visto molti sviluppatori indie con metroidvania in pixel art sulle piattaforme di crowdfunding. Pensavano di poter completare tutto in un anno, ma in realt\u00e0 ci volevano ancora sei anni. <\/p>\n<p><img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/67c754a18d7483e700e801beec5f2ebc.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Metal Slug 3 (Arcade). SNK, 2000<\/i><\/p>\n<p>Il pixel art al livello in cui la maggior parte desidera crearlo richiede molto tempo, e ci sono molto pochi tutorial brevi. Lavorando con un modello 3D \u00e8 possibile ruotarlo, deformarlo, muovere parti singole, copiare animazioni da un modello all'altro, e cos\u00ec via. Il pixel art di alto livello richiede quasi sempre un enorme sforzo per posizionare con precisione i pixel su ogni fotogramma.<\/p>\n<p>In generale, vi ho avvertito.<\/p>\n<p>Ora parliamo un po' del mio stile: principalmente disegno pixel art per videogiochi e trovo ispirazione in essi. In particolare, sono un fan del Famicom\/NES, delle console a 16 bit e degli arcade degli anni '90. La pixel art dei miei giochi preferiti di quel periodo pu\u00f2 essere descritta come vivace, sicura e pulita (ma non troppo), non pu\u00f2 essere definita rigida e minimalista. In questo stile lavoro da solo, ma puoi facilmente applicare idee e tecniche di questo tutorial per creare cose completamente diverse. Esplora il lavoro di vari artisti e crea la pixel art che ti piace!<\/p>\n<h2>Software<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/5dc5fa7ebabd2a31b1375cdfc9437b66.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nStrumenti digitali di base per la pixel art: Zoom (Zoom) e Matita (Pencil) per posizionare i pixel. Avrai anche bisogno di Linea (Line), Figura (Shape), Seleziona (Select), Muovi (Move) e Secchiello (Paint Bucket). Ci sono molti software gratuiti e a pagamento con questo set di strumenti. Parler\u00f2 dei pi\u00f9 popolari e di quelli che utilizzo personalmente.<\/p>\n<h3>Paint (gratuito)<\/h3>\n<p>\nSe hai Windows, il Paint integrato \u00e8 un programma primitivo, ma ha tutti gli strumenti necessari per la pixel art.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.piskelapp.com\/\">Piskel<\/a><\/noindex> (gratuito)<\/h3>\n<p>\nUn sorprendentemente funzionale editor di pixel art che si avvia tramite browser. Puoi esportare il lavoro in PNG o GIF animati. Ottima opzione per i principianti.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/graphicsgale.com\/us\/\">GraphicsGale<\/a><\/noindex> (gratuito)<\/h3>\n<p>\nGraphicsGale \u00e8 l'unico editor tra quelli di cui ho sentito parlare, progettato precisamente per la pixel art e include strumenti di animazione. \u00c8 stato creato dalla compagnia giapponese HUMANBALANCE. Dal 2017 \u00e8 distribuito gratuitamente ed \u00e8 ancora richiesto, nonostante la crescente popolarit\u00e0 di Aseprite. Purtroppo, funziona solo su Windows.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.aseprite.org\/\">Aseprite<\/a><\/noindex> ($)<\/h3>\n<p>\nProbabilmente l'editor pi\u00f9 popolare al momento. <noindex><a rel=\"nofollow\" href=\"https:\/\/www.aseprite.org\/faq\/#if-aseprite-source-code-is-available-how-is-that-you-are-selling-it\">Codice sorgente aperto<\/a><\/noindex>, molte possibilit\u00e0, supporto attivo, versioni per Windows, Mac e Linux. Se ti stai seriamente dedicando alla pixel art e non hai ancora trovato l'editor giusto, forse questo \u00e8 quello che fa per te.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.yoyogames.com\/get\">GameMaker Studio 2<\/a><\/noindex> ($$+)<\/h3>\n<p>\nGameMaker Studio 2 \u00e8 un eccellente strumento 2D con un buon editor di sprite (Sprite Editor). Se desideri creare pixel art per i tuoi giochi, \u00e8 molto comodo fare tutto in un unico programma. Attualmente sto usando questo software per lavorare su <noindex><a rel=\"nofollow\" href=\"https:\/\/50games.fun\/\">UFO 50<\/a><\/noindex>, una collezione di 50 giochi retro: creo sprite e animazioni in GameMaker, mentre i tileset sono realizzati in Photoshop.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.photoshop.com\/\">Photoshop<\/a><\/noindex> ($$$+)<\/h3>\n<p>\nPhotoshop \u00e8 un software costoso, distribuito in abbonamento, non adatto all'arte pixel. Non lo consiglio se non ti occupi di illustrazioni ad alta risoluzione o se non hai bisogno di fare manovre complesse con le immagini, come me. Puoi creare sprite statici e opere pixelate, ma \u00e8 abbastanza complesso rispetto a software specializzati (ad esempio, GraphicsGale o Aseprite).<\/p>\n<h2>Altro<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/e810f041b931c304b6b65f9895a9f325.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Il mio set per l'arte pixel. Tutto nero, me ne sono accorto solo ora.<\/i><\/p>\n<h3>Tavoletta grafica ($$+)<\/h3>\n<p>\nConsiglio le tavolette grafiche per qualsiasi lavoro di illustrazione digitale, per evitare la sindrome del tunnel carpale. \u00c8 molto pi\u00f9 facile prevenirla che curarla. Una volta che sentirai dolore, questo aumenter\u00e0 solo: prenditi cura di te sin dall'inizio. Poich\u00e9 una volta disegnavo con il mouse, ora ho difficolt\u00e0 a giocare a giochi in cui devo premere tasti. Attualmente uso una Wacom Intuos Pro S.<\/p>\n<h3>Supporto per polso ($)<\/h3>\n<p>\nSe non puoi permetterti una tavoletta, comprati almeno un supporto per il polso. A me piace molto il Mueller Green Fitted Wrist Brace. Gli altri sono troppo stretti o forniscono un supporto insufficiente. I supporti possono essere ordinati online senza problemi.<\/p>\n<h2>96\u00d796 pixel<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/f8bfaf46d9b833c623bbe1573d40ae64.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Final Fight. Capcom, 1989<\/i><\/p>\n<p>Iniziamo! Partiamo dallo sprite di un personaggio di 96\u00d796 pixel. Per esempio, ho disegnato un orco e l'ho posizionato su uno screenshot di Final Fight (immagine sopra), per mostrare la scala. Questo <b>\u00e8 un grande<\/b> sprite per la maggior parte dei giochi retro, dimensione dello screenshot: 384\u00d7224 pixel.<\/p>\n<p>Con uno sprite cos\u00ec grande sar\u00e0 pi\u00f9 facile mostrare la tecnica di cui voglio parlarti. Inoltre, il disegno pixelato si avvicina di pi\u00f9 alle forme tradizionali d'arte (ad esempio, disegno o pittura), con cui potresti essere pi\u00f9 familiare. Una volta padroneggiate le tecniche di base, passeremo a sprite pi\u00f9 piccoli.<\/p>\n<h2>1. Scegliamo la palette<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/f99208134b3f107fcdf3f14b8c2216b8.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nIl pixel \u00e8 un concetto molto pi\u00f9 profondo nell'arte pixel rispetto ad altri ambiti digitali. L'arte pixel \u00e8 definita dalle sue limitazioni, ad esempio, i colori. \u00c8 importante scegliere bene la palette, poich\u00e9 aiuter\u00e0 a definire il tuo stile. Ma all'inizio ti consiglio di non pensare alle palette e di sceglierne una tra quelle esistenti (o semplicemente diversi colori a caso) \u2014 puoi facilmente cambiarla in qualsiasi momento.<\/p>\n<p>Per questo tutorial user\u00f2 una palette di 32 colori che abbiamo creato per <noindex><a rel=\"nofollow\" href=\"https:\/\/50games.fun\/\">UFO 50<\/a><\/noindex>. Per il pixel art, spesso si raggruppano in 32 o 16 colori. La nostra \u00e8 sviluppata per una console immaginaria che potrebbe apparire da qualche parte tra Famicom e PC Engine. Puoi prenderla o qualsiasi altra \u2014 il tutorial non dipende affatto dalla palette scelta.<\/p>\n<h2>2. Contorni grezzi<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/e8ead988dfafeae4b220ff3dc39093e6.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nIniziamo a disegnare utilizzando lo strumento Matita. Fai uno schizzo proprio come faresti con una penna e della carta. Certo, il pixel art e l'arte tradizionale si intrecciano, specialmente quando si tratta di sprite cos\u00ec grandi. Le mie osservazioni mostrano che i bravi artisti di pixel art spesso sanno disegnare bene anche a mano e viceversa. Quindi \u00e8 sempre utile sviluppare le abilit\u00e0 di disegno.<\/p>\n<h2>3. Lavorazione dei contorni<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/738dde231295a317d5461b4055e2be61.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nRielaboriamo i contorni: eliminiamo i pixel in eccesso e riduciamo lo spessore di ogni linea a un pixel. Ma cosa considerare in eccesso? Per rispondere a questa domanda, \u00e8 necessario comprendere le linee pixelate e le irregolarit\u00e0.<\/p>\n<h3>Irregolarit\u00e0<\/h3>\n<p>\nBisogna imparare a disegnare due linee base nel pixel art: linee rette e curve. Con penna e carta, il tutto si riduce al controllo muscolare, ma noi lavoriamo con piccole macchie di colore.<\/p>\n<p>La chiave per disegnare linee pixel perfette sono le irregolarit\u00e0. Sono pixel singoli o piccoli segmenti che rompono la levigatezza della linea. Come ho gi\u00e0 detto, un pixel singolo ha un'enorme importanza nel pixel art, quindi le irregolarit\u00e0 possono rovinare tutta l'estetica. Immagina di tracciare una linea retta su carta e improvvisamente qualcuno colpisce il tavolo: le irregolarit\u00e0 nel pixel art appaiono proprio come un segno casuale.<\/p>\n<p>Esempi:<\/p>\n<p><img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/8d873c547fa1fc638d524877599d1788.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Linee rette<\/i><\/p>\n<p><img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/0516dfef0ffc74335de791e16708b90f.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Curve<\/i><\/p>\n<p>Le irregolarit\u00e0 si manifestano nelle curve quando la lunghezza dei segmenti di linea aumenta o diminuisce non gradualmente.<\/p>\n<p>Evitare completamente le irregolarit\u00e0 \u00e8 impossibile: in tutti i tuoi giochi retro preferiti ci sono (se, ovviamente, il pixel art non consiste esclusivamente in forme semplici). L'obiettivo \u00e8 minimizzare le irregolarit\u00e0, mostrando comunque tutto il necessario.<\/p>\n<h2>4. Applichiamo i primi colori<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/b8b937d95667cff41f1060a77e715acb.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nColora il tuo personaggio usando un riempimento o un altro strumento appropriato. La paletta semplificher\u00e0 questa parte del lavoro. Se il software non supporta l'uso delle palette, puoi inserirla direttamente nell'immagine, come nell'esempio sopra, e scegliere i colori usando il contagocce.<\/p>\n<p>Nell'angolo in basso a sinistra ho disegnato il nostro amico, incontrate Sharl. Sar\u00e0 pi\u00f9 facile capire cosa sta succedendo ad ogni fase.<\/p>\n<h2>5. Ombreggiatura<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/2e0793f9ded395337e4da9ede215b9d8.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n\u00c8 tempo di mostrare le ombre: basta aggiungere colori pi\u00f9 scuri allo sprite. Cos\u00ec l'immagine avr\u00e0 un aspetto tridimensionale. Supponiamo di avere una fonte di luce posizionata sopra l'orco, a sinistra. Quindi, sar\u00e0 illuminato tutto ci\u00f2 che si trova sopra e davanti al nostro personaggio. Aggiungiamo ombre in basso a destra.<\/p>\n<h3>Forma e volume<\/h3>\n<p>\n<img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/1994fcb30789e1601bcae8ce1a50d5e7.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nSe questa fase ti crea difficolt\u00e0, immagina il tuo disegno come forme tridimensionali, non solo linee e colori. Le forme esistono in uno spazio tridimensionale e possono avere volume, che costruiamo con le ombre. Questo aiuter\u00e0 a visualizzare il personaggio senza dettagli e a immaginare che sia fatto di argilla, non di pixel. L'ombreggiatura non \u00e8 solo l'aggiunta di nuovi colori, \u00e8 un processo di costruzione della forma. In un personaggio ben progettato, i dettagli non nascondono le forme di base: se strizzi gli occhi, vedrai diversi grandi gruppi di luce e ombra. <\/p>\n<h3>Antialiasing<\/h3>\n<p>\nOgni volta che uso un nuovo colore, applico l'antialiasing (AA). Aiuta a smussare i pixel aggiungendo colori intermedi agli angoli, nel punto in cui due segmenti si incontrano:<\/p>\n<p><img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/9fc0ab09f076b1de252038c899ada201.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nI pixel grigi ammorbidiscono i \"salti\" nella linea. Pi\u00f9 lungo \u00e8 il segmento della linea, pi\u00f9 lungo sar\u00e0 il segmento di AA.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/262533d7923415430375d84f58a9d7fa.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Questa \u00e8 l'aspetto dell'AA sulla spalla dell'orco. Serve a smussare le linee che rappresentano la curva dei suoi muscoli.<\/i><\/p>\n<p>L'antialiasing non deve estendersi oltre lo sprite, che sar\u00e0 usato nel gioco o sullo sfondo, il cui colore \u00e8 sconosciuto. Ad esempio, se applichi l'AA su uno sfondo chiaro, su uno sfondo scuro l'ombreggiatura apparir\u00e0 brutta.<\/p>\n<h2>6. Contorno selettivo<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/32574a815ea81137a948f0a18217c8db.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nIn precedenza, i contorni erano completamente neri, il che rendeva lo sprite molto cartoonesco. L'immagine sembrava divisa in segmenti. Ad esempio, le linee nere sulle braccia evidenziano troppo la muscolatura, e il personaggio appare meno coerente.<\/p>\n<p>Se lo sprite diventa pi\u00f9 naturale e la segmentazione non \u00e8 cos\u00ec evidente, le forme di base del personaggio saranno pi\u00f9 facili da leggere. Per questo si pu\u00f2 utilizzare un contorno selettivo: sostituire parzialmente il contorno nero con uno pi\u00f9 chiaro. Nella parte illuminata dello sprite si possono usare i colori pi\u00f9 chiari oppure, dove lo sprite si incontra con lo spazio negativo, si pu\u00f2 eliminare completamente il contorno. Invece del nero, si dovrebbe utilizzare il colore scelto per l'ombra: in questo modo si conserver\u00e0 la segmentazione (per delimitare i muscoli, il pelo e cos\u00ec via).<\/p>\n<p>Inoltre, in questo stadio ho aggiunto ombre pi\u00f9 scure. Sono state create tre gradazioni di verde sulla pelle dell'orco. Il colore verde scuro pi\u00f9 intenso pu\u00f2 essere utilizzato per il contorno selettivo e l'AA.<\/p>\n<h2>7. Ritocchi finali<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/196f80b3ed3928d4c1ac7b9b99782fa1.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nAlla fine, \u00e8 utile aggiungere riflessi (i punti pi\u00f9 chiari sullo sprite), dettagli (orecchini, rivetti, cicatrici) e altre migliorie, fino a che il personaggio non \u00e8 completo o prima di passare al passo successivo.<\/p>\n<p>Ci sono alcune tecniche utili che si possono applicare in questa fase. Ruota il disegno orizzontalmente, questo spesso aiuta a individuare errori nelle proporzioni e nell'ombreggiatura. \u00c8 anche possibile rimuovere il colore: impostare la saturazione a zero per capire dove \u00e8 necessario modificare le ombre.<\/p>\n<h3>Creazione di rumori (dithering)<\/h3>\n<p>\nFinora abbiamo principalmente utilizzato aree grandi e solide di ombra. Ma esiste anche un'altra tecnica: il dithering, che permette di passare da un colore all'altro senza aggiungere un terzo colore. Guarda l'esempio qui sotto.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/85c2482ab6f83e0eb972d31d50ff0a2e.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nIl gradiente superiore dal scuro al chiaro utilizza centinaia di tonalit\u00e0 diverse di blu. <\/p>\n<p>Il gradiente medio utilizza solo nove colori, ma contiene ancora troppe sfumature di un solo colore. Si verifica cos\u00ec detto banding, in cui a causa di spesse bande omogenee l'occhio si concentra sui punti di contatto dei colori, piuttosto che sui colori stessi.<\/p>\n<p>Nel gradiente inferiore abbiamo applicato il dithering, che evita il banding e utilizza solo due colori. Creiamo un rumore di intensit\u00e0 variabile per imitare la gradazione del colore. Questa tecnica \u00e8 molto simile al halftone, utilizzato nella stampa; e anche al stippling \u2014 nelle illustrazioni e nei fumetti.<\/p>\n<p>Ho usato il dithering sull'orc per trasmettere la texture, ma solo un po'. Alcuni artisti pixel non lo usano affatto, mentre altri non esitano e lo fanno molto abilmente. Penso che il dithering si veda meglio su ampie aree riempite da un solo colore (guardate il cielo nello screenshot di Metal Slug qui sopra) o su quelle aree che devono apparire ruvide e irregolari (ad esempio, il fango). Decidete voi come usarlo.<\/p>\n<p>Se volete vedere un esempio di dithering su larga scala e di alta qualit\u00e0, esaminare i giochi di The Bitmap Brothers, uno studio britannico degli anni '80, o i giochi per PC-98. Tenete presente, per\u00f2, che sono tutti NSFW.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/25efcc37096d23b0da636b7f04b17e40.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Kakyusei (PC-98). Elf, 1996<br \/>\nIn questa immagine ci sono solo 16 colori!<\/i><\/p>\n<h2>8. Ultimo sguardo<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/e1cccd845e1bffa32b26fccc011b6560.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nUna delle insidie dell'arte pixel \u00e8 che appare facile e semplice (a causa della sua struttura e delle limitazioni stilistiche). Ma alla fine, spenderete una quantit\u00e0 enorme di tempo a perfezionare i vostri sprite. \u00c8 come un puzzle da risolvere: ecco perch\u00e9 l'arte pixel attira i perfezionisti. Ricordate, uno sprite non dovrebbe richiedere troppo tempo \u2014 \u00e8 solo un piccolo pezzo di un aggregato complesso di pezzi. \u00c8 importante non perdere di vista il quadro generale.<\/p>\n<p>Anche se la vostra arte pixel non \u00e8 per i giochi, a volte \u00e8 bene dirsi: \u00abVa gi\u00e0 bene cos\u00ec!\u00bb E andare avanti. Il miglior modo per sviluppare le proprie abilit\u00e0 \u00e8 passare attraverso l'intero processo il pi\u00f9 possibile, dall'inizio alla fine, utilizzando temi quanto pi\u00f9 diversi possibile. <\/p>\n<p>E a volte \u00e8 utile allontanarsi temporaneamente dallo sprite, per riguardarlo pi\u00f9 tardi con uno sguardo fresco. <\/p>\n<h2>32\u00d732 pixel<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/6a4441d7b2cfa580454f6d6b64b7644b.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nAbbiamo creato un grande sprite di 96\u00d796 pixel per primo, perch\u00e9 a questa dimensione assomiglia di pi\u00f9 a un dipinto o a un'opera d'arte, solo con i pixel. Pi\u00f9 piccolo \u00e8 lo sprite, meno somiglia a ci\u00f2 che deve rappresentare, e pi\u00f9 ogni pixel diventa importante.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/ac13676b156c0e357e690e90d4a9bc5d.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nIn Super Mario Bros., l'occhio di Mario \u00e8 costituito da soli due pixel, uno sopra l'altro. E anche la sua orecchia. Il creatore del personaggio, Shigeru Miyamoto, ha detto che i baffi servivano a separare il naso dal resto del volto. Cos\u00ec, una delle principali caratteristiche del volto di Mario non \u00e8 solo il design del personaggio, ma anche un trucco pragmatico. Ci\u00f2 conferma il vecchio adagio che dice: \u00abLa necessit\u00e0 \u00e8 la madre dell'invenzione\u00bb.<\/p>\n<p>I principali passaggi per creare uno sprite di 32\u00d732 pixel ci sono gi\u00e0 familiari: schizzo, colore, ombre, ulteriori ritocchi. Ma in queste circostanze, per lo schizzo iniziale scelgo forme colorate invece di disegnare contorni, a causa delle piccole dimensioni. Il colore gioca un ruolo pi\u00f9 importante nella definizione del personaggio rispetto ai contorni. Guarda di nuovo Mario, non ha affatto contorni. Gli interessano non solo i baffi. I suoi pizzetti definiscono la forma delle orecchie, le maniche mostrano le braccia e la forma generale riflette chiaramente tutto il suo corpo.<\/p>\n<p>Creare piccoli sprite richiede continui compromessi. Se aggiungi un contorno, potresti perdere spazio per le ombre. Se le mani e le gambe del tuo personaggio sono chiaramente visibili, la testa dovrebbe probabilmente essere non troppo grande. Usando il colore in modo efficace, contorni selettivi e smussature, l'oggetto disegnato apparir\u00e0 pi\u00f9 grande di quanto non sia in realt\u00e0.<\/p>\n<p>Per i piccoli sprite mi piace lo stile chibi: i personaggi sembrano molto carini, con teste e occhi grandi. Un ottimo modo per creare un eroe vivace in uno spazio limitato e, in generale, uno stile molto piacevole. Ma forse hai bisogno di mostrare la mobilit\u00e0 o la forza del personaggio, allora puoi dedicare meno spazio alla testa, in modo che il corpo appaia pi\u00f9 potente. Tutto dipende dalle tue preferenze e obiettivi.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/5c32b47afc803e698c9523e183086b9c.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>L'intera squadra \u00e8 riunita!<\/i><\/p>\n<h2>Formati file<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art per principianti: istruzioni per l&#039;uso\" src=\"\/wp-content\/uploads\/2019\/12\/c636145341db38f18a33b8c9708c36bf.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Un risultato del genere pu\u00f2 mettere in ansia qualsiasi artista pixel<\/i><\/p>\n<p>L\u2019immagine che vedi \u00e8 il risultato del salvataggio del disegno in JPG. Parte dei dati \u00e8 andata persa a causa degli algoritmi di compressione del file. L'arte pixel di qualit\u00e0 apparir\u00e0 male e ripristinare la sua palette originale sar\u00e0 complicato.<\/p>\n<p>Per salvare un'immagine statica senza perdita di qualit\u00e0 utilizza il formato PNG. Per le animazioni \u2014 GIF.<\/p>\n<h2>Come condividere correttamente l'arte pixel<\/h2>\n<p>\nCondividere l'arte pixel sui social media \u00e8 un ottimo modo per ricevere feedback e conoscere altri artisti che lavorano nello stesso stile. Non dimenticare di usare l'hashtag #pixelart. Sfortunatamente, i social media spesso convertono PNG in JPG senza chiedere, danneggiando il tuo lavoro. Inoltre non \u00e8 sempre chiaro perch\u00e9 la tua immagine sia stata convertita.<\/p>\n<p>Ci sono alcuni suggerimenti su come mantenere l'arte pixel nella qualit\u00e0 necessaria per i vari social media.<\/p>\n<h3>Twitter<\/h3>\n<p>\nAffinch\u00e9 il file PNG non venga modificato su Twitter, utilizza meno di 256 colori o <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/NolanOBrien\/status\/1199037916019716096\">assicurati<\/a><\/noindex>, che il tuo file sia inferiore a 900 pixel sul lato lungo. Ti consiglierei di aumentare la dimensione del file almeno a 512\u00d7512 pixel. In particolare, in modo che la scalabilit\u00e0 sia un multiplo di 100 (200% e non 250%) e che vengano mantenuti i bordi nitidi (Nearest Neighbor in Photoshop).<\/p>\n<p>I file GIF animati per i post su Twitter <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/cyangmou\/status\/989149918534275072?lang=en\">dovete<\/a><\/noindex> non devono superare i 15 MB. L'immagine deve avere almeno 800\u00d7800 pixel, l'animazione ciclica deve ripetersi tre volte e l'ultimo fotogramma deve durare la met\u00e0 del tempo rispetto agli altri \u2014 questa \u00e8 la teoria pi\u00f9 diffusa. Tuttavia, non \u00e8 chiaro quanto sia necessario rispettare questi requisiti, considerando che Twitter cambia continuamente i propri algoritmi di visualizzazione delle immagini.<\/p>\n<h3>Instagram<\/h3>\n<p>\nPer quanto ne so, non \u00e8 possibile pubblicare un'immagine su Instagram senza perdere qualit\u00e0. Ma apparir\u00e0 sicuramente meglio se la ingrandisci almeno a 512x512 pixel.<br \/>\n<br \/>Fonte: <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/company\/playgendary\/blog\/482536\/\">habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u043e\u043b\u0435\u0439: \u0433\u0435\u0439\u043c\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430, \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0430, \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430. \u0418, \u043a\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0430, \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u2014 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043e\u043d \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u043d\u0443\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0432\u044b\u043a\u0438. \u041d\u0430\u0448\u0435\u043b \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b \u043f\u043e\u0441\u0442\u0438\u0433\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u044b \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f: \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0444\u0442\u0430 \u0438 \u0442\u0435\u0445\u043d\u0438\u043a \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[702],"tags":[],"class_list":["post-54617","post","type-post","status-publish","format-standard","hentry","category-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.1.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/it\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.1.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"it_IT\" \/>\n\t\t<meta property=\"og:site_name\" content=\"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\ud83e\udd47\u041f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445: \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e | ProHoster\" \/>\n\t\t<meta property=\"og:description\" content=\"\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/it\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-12-29T21:00:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-02-18T11:02:39+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\ud83e\udd47Pixel art per principianti: guida all'uso | ProHoster","description":"Spesso gli sviluppatori indie devono.","canonical_url":"https:\/\/prohoster.info\/it\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"it_IT","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u041f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445: \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e | ProHoster","og:description":"\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f.","og:url":"https:\/\/prohoster.info\/it\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-12-29T21:00:00+00:00","article:modified_time":"2020-02-18T11:02:39+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"54617","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-24 12:06:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-02-28 20:01:33","updated":"2026-01-24 12:06:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/posts\/54617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/comments?post=54617"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/posts\/54617\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/media?parent=54617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/categories?post=54617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/tags?post=54617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}