{"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\/sv\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","title":{"rendered":"Pixelkonst f\u00f6r nyb\u00f6rjare: en bruksanvisning","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Pixelkonst
\n
\nIndieutvecklare m\u00e5ste ofta kombinera flera roller: speldesigner, programmerare, komposit\u00f6r, konstn\u00e4r. Och n\u00e4r det kommer till det visuella v\u00e4ljer m\u00e5nga pixelkonst \u2014 det verkar enkelt vid f\u00f6rsta anblicken. Men f\u00f6r att g\u00f6ra n\u00e5got vackert kr\u00e4vs mycket erfarenhet och specifika f\u00e4rdigheter. Jag har hittat en tutorial f\u00f6r dem som just har b\u00f6rjat l\u00e4ra sig grunderna i denna stil: med beskrivning av specialprogramvara och ritningstekniker genom tv\u00e5 sprites.<\/a><\/noindex><\/p>\n

Bakgrund<\/h2>\n

\nPixelkonst \u00e4r en form av digitalt konstverk d\u00e4r f\u00f6r\u00e4ndringar g\u00f6rs p\u00e5 pixelniv\u00e5. Den \u00e4r fr\u00e4mst f\u00f6rknippad med grafik fr\u00e5n videospel p\u00e5 80- och 90-talet. D\u00e5 var konstn\u00e4rer tvungna att ta h\u00e4nsyn till minnesbegr\u00e4nsningar och l\u00e5g uppl\u00f6sning. Idag \u00e4r pixelkonst fortfarande popul\u00e4rt i spel och som konststil \u00f6verlag, trots m\u00f6jligheten att skapa realistisk 3D-grafik. Varf\u00f6r? \u00c4ven om man inte tar h\u00e4nsyn till nostalgi \u00e4r det en trevlig och v\u00e4rdefull utmaning att skapa ett bra verk inom s\u00e5 h\u00e5rda ramar.<\/p>\n

Intr\u00e4destr\u00f6skeln f\u00f6r pixelkonst \u00e4r relativt l\u00e5g j\u00e4mf\u00f6rt med traditionell konst och 3D-grafik, vilket lockar indieutvecklare. Men det betyder inte att det \u00e4r enkelt att f\u00e4rdigst\u00e4lla<\/b> ett spel i denna stil. Jag har sett m\u00e5nga indieutvecklare med pixelkonst metroidvanias p\u00e5 crowdfunding-plattformar. De trodde att de skulle bli klara p\u00e5 ett \u00e5r, men i sj\u00e4lva verket skulle de beh\u00f6va ytterligare sex \u00e5r. <\/p>\n

\"Pixelkonst
\nMetal Slug 3 (Arcade). SNK, \u00e5r 2000<\/i><\/p>\n

Pixelkonst p\u00e5 den niv\u00e5 som de flesta vill skapa tar mycket tid, och det finns f\u00e5 korta tutorials. N\u00e4r man arbetar med en 3D-modell kan man rotera den, deformera den, flytta enskilda delar, kopiera animationer fr\u00e5n en modell till en annan, och s\u00e5 vidare. H\u00f6gkvalitativ pixelkonst tar n\u00e4stan alltid massor av kraft f\u00f6r att noggrant placera pixlar p\u00e5 varje ram.<\/p>\n

S\u00e5, jag har varnat.<\/p>\n

Och nu lite om min stil: jag ritar fr\u00e4mst pixelkonst f\u00f6r videospel och finner inspiration i dem. Jag \u00e4r s\u00e4rskilt ett fan av Famicom\/NES, 16-bitars konsoler och 90-talets arkadspel. Pixelkonsten fr\u00e5n mina favoritspel fr\u00e5n den tiden kan beskrivas som f\u00e4rgglad, sj\u00e4lvs\u00e4ker och ren (men inte f\u00f6r mycket), den kan inte kallas h\u00e5rd eller minimalistisk. I denna stil arbetar jag sj\u00e4lv, men du kan l\u00e4tt till\u00e4mpa id\u00e9er och tekniker fr\u00e5n den h\u00e4r guiden f\u00f6r att skapa helt andra saker. Studera verk av olika konstn\u00e4rer och skapa pixelkonst som du tycker om!<\/p>\n

Programvara<\/h2>\n

\n\"Pixelkonst
\n
\nGrundl\u00e4ggande digitala verktyg f\u00f6r pixelkonst \u2014 Zoom och Pennan f\u00f6r att placera pixlar. Du kommer ocks\u00e5 att ha nytta av Linje, Form, V\u00e4lj, Flytta och Fyllning. Det finns m\u00e5nga gratis och betalda program med denna verktygssats. Jag kommer att ber\u00e4tta om de mest popul\u00e4ra och de som jag sj\u00e4lv anv\u00e4nder.<\/p>\n

Paint (gratis)<\/h3>\n

\nOm du har Windows \u00e4r inbyggda Paint ett primitivt program, men det har alla verktyg f\u00f6r pixelkonst.<\/p>\n

Piskel<\/a><\/noindex> (gratis)<\/h3>\n

\nEn ov\u00e4ntat funktionell pixelkonstredigerare som k\u00f6rs via webbl\u00e4saren. Du kan exportera ditt arbete i PNG eller animerad GIF. Ett utm\u00e4rkt alternativ f\u00f6r nyb\u00f6rjare.<\/p>\n

GraphicsGale<\/a><\/noindex> (gratis)<\/h3>\n

\nGraphicsGale \u00e4r den enda redigeraren bland dem jag har h\u00f6rt talas om, som \u00e4r specifikt utvecklad f\u00f6r pixelkonst och inkluderar animationsverktyg. Den skapades av det japanska f\u00f6retaget HUMANBALANCE. Sedan 2017 distribueras den gratis och \u00e4r fortfarande popul\u00e4r, trots den v\u00e4xande populariteten av Aseprite. Tyv\u00e4rr fungerar den bara p\u00e5 Windows.<\/p>\n

Aseprite<\/a><\/noindex> ($)<\/h3>\n

\nF\u00f6rmodligen den mest popul\u00e4ra redigeraren just nu. \u00d6ppen k\u00e4llkod<\/a><\/noindex>, massor av m\u00f6jligheter, aktivt st\u00f6d, versioner f\u00f6r Windows, Mac och Linux. Om du verkligen har tagit dig an pixelkonst och fortfarande inte har hittat r\u00e4tt redigerare, kanske detta \u00e4r vad du beh\u00f6ver.<\/p>\n

GameMaker Studio 2<\/a><\/noindex> ($$+)<\/h3>\n

\nGameMaker Studio 2 \u00e4r ett utm\u00e4rkt 2D-verktyg med en bra sprite-redigerare. Om du vill skapa pixelkonst f\u00f6r dina egna spel \u00e4r det mycket bekv\u00e4mt att g\u00f6ra allt i ett program. Just nu anv\u00e4nder jag denna programvara f\u00f6r att arbeta med UFO 50<\/a><\/noindex>, en samling av 50 retrospel: jag skapar sprit och animationer i GameMaker och tilesets i Photoshop.<\/p>\n

Photoshop<\/a><\/noindex> ($$$+)<\/h3>\n

\nPhotoshop \u00e4r dyr mjukvara som distribueras p\u00e5 abonnemang och inte \u00e4r anpassad f\u00f6r pixelkonst. Jag rekommenderar inte att du k\u00f6per den om du inte jobbar med h\u00f6guppl\u00f6sta illustrationer, eller om du inte beh\u00f6ver utf\u00f6ra komplicerade manipulationer av bilder, som jag g\u00f6r. Man kan skapa statiska spriter och pixelverk, men det \u00e4r ganska komplicerat j\u00e4mf\u00f6rt med specialiserad mjukvara (till exempel GraphicsGale eller Aseprite).<\/p>\n

\u00d6vrigt<\/h2>\n

\n\"Pixelkonst
\nMin upps\u00e4ttning f\u00f6r pixelkonst. Allt i svart, jag har just m\u00e4rkt det.<\/i><\/p>\n

Grafikplatta ($$+)<\/h3>\n

\nJag rekommenderar grafikplattor f\u00f6r alla typer av arbete med digitala illustrationer, f\u00f6r att undvika carpaltunnelsyndrom. Det \u00e4r mycket l\u00e4ttare att f\u00f6rebygga \u00e4n att bota. En g\u00e5ng kommer du att k\u00e4nna sm\u00e4rta, och den kommer bara att \u00f6ka \u2014 ta hand om dig sj\u00e4lv fr\u00e5n b\u00f6rjan. Eftersom jag en g\u00e5ng ritade med mus, har jag nu sv\u00e5rt att spela spel d\u00e4r man m\u00e5ste trycka p\u00e5 knappar. Nu anv\u00e4nder jag Wacom Intuos Pro S.<\/p>\n

Handledsst\u00f6d ($)<\/h3>\n

\nOm du inte kan k\u00f6pa en platta, k\u00f6p \u00e5tminstone ett handledsst\u00f6d. Jag gillar helst Mueller Green Fitted Wrist Brace. De andra \u00e4r antingen f\u00f6r tajta eller ger otillr\u00e4ckligt st\u00f6d. St\u00f6d g\u00e5r l\u00e4tt att best\u00e4lla online.<\/p>\n

96\u00d796 pixlar<\/h2>\n

\n\"Pixelkonst
\nFinal Fight. Capcom, 1989<\/i><\/p>\n

L\u00e5t oss b\u00f6rja! Vi b\u00f6rjar med en sprite av en karakt\u00e4r p\u00e5 96\u00d796 pixlar. Som exempel har jag ritat en ork och placerat den p\u00e5 en sk\u00e4rmdump fr\u00e5n Final Fight (bilden ovan), s\u00e5 att du f\u00f6rst\u00e5r skalet. Det h\u00e4r \u00e4r stort<\/b> f\u00f6r de flesta retrospel, sk\u00e4rmdumpens storlek: 384\u00d7224 pixlar.<\/p>\n

P\u00e5 en s\u00e5 stor sprite blir det l\u00e4ttare att visa den teknik som jag vill ber\u00e4tta om. Dessutom liknar pixel f\u00f6r pixel-teckning mer traditionella former av konst (till exempel ritning eller m\u00e5lning), med vilka du kanske \u00e4r b\u00e4ttre bekant. N\u00e4r du har bem\u00e4strat de grundl\u00e4ggande teknikerna g\u00e5r vi vidare till mindre spriter.<\/p>\n

1. V\u00e4lj palett<\/h2>\n

\n\"Pixelkonst
\n
\nPixel \u00e4r ett mycket djupare begrepp inom pixelkonst \u00e4n i andra digitala omr\u00e5den. Pixelkonst definieras av sina begr\u00e4nsningar, till exempel f\u00e4rger. Det \u00e4r viktigt att v\u00e4lja en palett p\u00e5 r\u00e4tt s\u00e4tt, den hj\u00e4lper till att definiera din stil. Men i b\u00f6rjan f\u00f6resl\u00e5r jag att du inte t\u00e4nker p\u00e5 paletter, utan v\u00e4ljer en av de befintliga (eller bara n\u00e5gra slumpm\u00e4ssiga f\u00e4rger) \u2014 du kan l\u00e4tt f\u00f6r\u00e4ndra den vid alla stadier.<\/p>\n

F\u00f6r denna tutorial kommer jag att anv\u00e4nda en palett med 32 f\u00e4rger som vi skapade f\u00f6r UFO 50<\/a><\/noindex>. F\u00f6r pixelkonst samlas de ofta i 32 eller 16 f\u00e4rger. V\u00e5r \u00e4r designad f\u00f6r en p\u00e5hittad konsol som skulle kunna ha funnits n\u00e5gonstans mellan Famicom och PC Engine. Du kan anv\u00e4nda den eller vilken annan palett som helst \u2014 tutorialen beror inte alls p\u00e5 den valda paletten.<\/p>\n

2. Grova konturer<\/h2>\n

\n\"Pixelkonst
\n
\nVi b\u00f6rjar med att rita med hj\u00e4lp av Pennverktyget. Vi skapar en skiss p\u00e5 samma s\u00e4tt som vi g\u00f6r med en vanlig penna och papper. Sj\u00e4lvklart finns det \u00f6verlappningar mellan pixelkonst och traditionell konst, s\u00e4rskilt n\u00e4r det g\u00e4ller st\u00f6rre sprites. Mina observationer visar att skickliga pixelkonstn\u00e4rer \u00e5tminstone \u00e4r ganska bra p\u00e5 att rita f\u00f6r hand och vice versa. S\u00e5 det \u00e4r alltid bra att utveckla ritf\u00f6rm\u00e5gan.<\/p>\n

3. Arbeta med konturer<\/h2>\n

\n\"Pixelkonst
\n
\nVi finjusterar konturerna: tar bort \u00f6verfl\u00f6diga pixlar och minskar tjockleken p\u00e5 varje linje till en pixel. Men vad r\u00e4knas som \u00f6verfl\u00f6digt? F\u00f6r att svara p\u00e5 denna fr\u00e5ga m\u00e5ste man f\u00f6rst\u00e5 pixelinjer och oj\u00e4mnheter.<\/p>\n

Oj\u00e4mnheter<\/h3>\n

\nDu beh\u00f6ver l\u00e4ra dig att rita tv\u00e5 grundl\u00e4ggande linjer i pixelkonst: raka och kurviga. Med penna och papper handlar allt om muskelkontroll, men vi arbetar ju med sm\u00e5 f\u00e4rgade block.<\/p>\n

Nyckeln till att rita r\u00e4tt pixelinjer \u00e4r oj\u00e4mnheterna. Det handlar om enskilda pixlar eller sm\u00e5 segment som st\u00f6r sl\u00e4thet i linjen. Som jag redan har sagt, har enskilda pixlar en enorm betydelse i pixelkonst, s\u00e5 oj\u00e4mnheter kan f\u00f6rst\u00f6ra hela estetiken. F\u00f6rest\u00e4ll dig att du drar en rak linje p\u00e5 papper, och pl\u00f6tsligt sl\u00e5r n\u00e5gon p\u00e5 bordet: oj\u00e4mnheterna i pixelkonsten ser ut precis som en slumpm\u00e4ssig krumelur.<\/p>\n

Exempel:<\/p>\n

\"Pixelkonst
\nRaka<\/i><\/p>\n

\"Pixelkonst
\nKurviga<\/i><\/p>\n

Oj\u00e4mnheter dyker upp p\u00e5 kurvor n\u00e4r l\u00e4ngden p\u00e5 linjesegmenten \u00f6kar eller minskar pl\u00f6tsligt.<\/p>\n

Det \u00e4r om\u00f6jligt att helt undvika oj\u00e4mnheter \u2014 i alla dina favorit retrospel finns de (om pixelkonst inte enbart best\u00e5r av enkla former). M\u00e5let \u00e4r att minimera oj\u00e4mnheterna samtidigt som man visar allt som kr\u00e4vs.<\/p>\n

4. Till\u00e4mpa de f\u00f6rsta f\u00e4rgerna<\/h2>\n

\n\"Pixelkonst
\n
\nF\u00e4rga din karakt\u00e4r med hj\u00e4lp av fyllning eller ett annat l\u00e4mpligt verktyg. Paletten f\u00f6renklar detta steg i arbetet. Om programvaran inte tillhandah\u00e5ller anv\u00e4ndning av paletter kan du placera den direkt i bilden, som i exemplet ovan, och v\u00e4lja f\u00e4rger med hj\u00e4lp av pipetten.<\/p>\n

I det nedre v\u00e4nstra h\u00f6rnet har jag ritat v\u00e5r v\u00e4n, l\u00e5t mig presentera, det \u00e4r - Shar. Med honom blir det l\u00e4ttare att f\u00f6rst\u00e5 vad som h\u00e4nder i varje steg.<\/p>\n

5. Skuggning<\/h2>\n

\n\"Pixelkonst
\n
\nDags att visa skuggorna - vi l\u00e4gger bara till m\u00f6rkare f\u00e4rger p\u00e5 spriten. D\u00e5 kommer bilden att se mer tredimensionell ut. L\u00e5t oss f\u00f6ruts\u00e4tta att vi har en ljusk\u00e4lla som \u00e4r placerad ovanf\u00f6r orken, till v\u00e4nster om honom. Det som \u00e4r ovanf\u00f6r och framf\u00f6r v\u00e5r karakt\u00e4r kommer att vara upplyst. Vi l\u00e4gger till skuggor l\u00e4ngst ner till h\u00f6ger.<\/p>\n

Form och volym<\/h3>\n

\n\"Pixelkonst
\n
\nOm detta steg k\u00e4nns utmanande, t\u00e4nk p\u00e5 din teckning som volymetriska former, snarare \u00e4n bara linjer och f\u00e4rg. Former existerar i tre-dimensionellt utrymme och kan ha volym som vi bygger upp med hj\u00e4lp av skuggor. Det kommer att hj\u00e4lpa till att visualisera karakt\u00e4ren utan detaljer och f\u00f6rest\u00e4lla sig att den \u00e4r gjord av lera, snarare \u00e4n av pixlar. Skuggning \u00e4r inte bara att l\u00e4gga till nya f\u00e4rger, det \u00e4r en process av att bygga upp formen. P\u00e5 en v\u00e4lnoggrann karakt\u00e4r d\u00f6ljer inte detaljer de grundl\u00e4ggande formerna: om du kisar ser du flera stora kluster av ljus och skugga. <\/p>\n

Antialiasing<\/h3>\n

\nVarje g\u00e5ng jag anv\u00e4nder en ny f\u00e4rg till\u00e4mpar jag antialiasing (AA). Det hj\u00e4lper till att j\u00e4mna ut pixlar genom att l\u00e4gga till mellanliggande f\u00e4rger vid h\u00f6rnen, d\u00e4r tv\u00e5 linjesegment m\u00f6ts:<\/p>\n

\"Pixelkonst
\n
\nGr\u00e5a pixlar mjukar upp \"brotten\" i linjen. Ju l\u00e4ngre segment linjen har, desto l\u00e4ngre \u00e4r AA-segmentet.<\/p>\n

\"Pixelkonst
\nS\u00e5 h\u00e4r ser AA ut p\u00e5 orkens axel. Det beh\u00f6vs f\u00f6r att j\u00e4mna ut linjerna som visar kurvaturen av hans muskler.<\/i><\/p>\n

Antialiasing ska inte str\u00e4cka sig utanf\u00f6r spriten som kommer att anv\u00e4ndas i spelet eller mot en bakgrund vars f\u00e4rg \u00e4r ok\u00e4nd. Till exempel, om du till\u00e4mpar AA f\u00f6r en ljus bakgrund, kommer antialiasing p\u00e5 en m\u00f6rk bakgrund att se otrevlig ut.<\/p>\n

6. Valt kontur<\/h2>\n

\n\"Pixelkonst
\n
\nTidigare var konturerna helt svarta, vilket gjorde att spriten s\u00e5g mycket tecknad ut. Bilden verkade som om den var uppdelad i segment. Till exempel, de svarta linjerna p\u00e5 armen visar muskulaturen alltf\u00f6r kontrasterande, och karakt\u00e4ren ser mindre sammanh\u00e5llen ut.<\/p>\n

Om sprite blir mer naturlig och segmenteringen mindre tydlig, kommer grundformerna av karakt\u00e4ren att vara l\u00e4ttare att l\u00e4sa. F\u00f6r detta kan du anv\u00e4nda ett selektivt kontur \u2014 delvis ers\u00e4tta den svarta konturen med en ljusare nyans. P\u00e5 den belysta delen av spriten kan du anv\u00e4nda de ljusaste f\u00e4rgerna eller, d\u00e4r spriten r\u00f6r negativt utrymme, helt ta bort konturen. Ist\u00e4llet f\u00f6r svart b\u00f6r en f\u00e4rg anv\u00e4ndas som valts f\u00f6r skuggan \u2014 p\u00e5 s\u00e5 s\u00e4tt bevaras segmenteringen (f\u00f6r att s\u00e4rskilja muskler, p\u00e4ls och s\u00e5 vidare).<\/p>\n

\u00c4ven vid detta steg lade jag till m\u00f6rkare skuggor. Det blev tre nyanser av gr\u00f6nt p\u00e5 orkens hud. Den m\u00f6rkaste gr\u00f6na f\u00e4rgen kan anv\u00e4ndas f\u00f6r den selektiva konturen och AA.<\/p>\n

7. Slutliga detaljer<\/h2>\n

\n\"Pixelkonst
\n
\nI slutet \u00e4r det v\u00e4rt att l\u00e4gga till reflektioner (de ljusaste fl\u00e4cken p\u00e5 spriten), detaljer (\u00f6rh\u00e4ngen, nitar, \u00e4rr) och andra f\u00f6rb\u00e4ttringar tills karakt\u00e4ren \u00e4r klar eller tills det \u00e4r dags att g\u00e5 vidare.<\/p>\n

Det finns flera anv\u00e4ndbara tekniker som kan till\u00e4mpas i detta skede. Vrid ritningen horisontellt, detta hj\u00e4lper ofta att avsl\u00f6ja fel i proportioner och skuggning. Du kan ocks\u00e5 ta bort f\u00e4rg \u2013 s\u00e4tta m\u00e4ttnaden p\u00e5 noll f\u00f6r att f\u00f6rst\u00e5 var skuggorna beh\u00f6ver \u00e4ndras.<\/p>\n

Skapande av brus (dithering)<\/h3>\n

\nHitintills har vi fr\u00e4mst anv\u00e4nt stora, solida omr\u00e5den av skuggor. Men det finns en annan teknik \u2014 dithering, som g\u00f6r det m\u00f6jligt att g\u00e5 fr\u00e5n en f\u00e4rg till en annan utan att l\u00e4gga till en tredje. Titta p\u00e5 exemplet nedan.<\/p>\n

\"Pixelkonst
\n
\nDen \u00f6vre gradienten fr\u00e5n m\u00f6rkt till ljust anv\u00e4nder hundratals olika nyanser av bl\u00e5tt. <\/p>\n

Den perfekta gradienten anv\u00e4nder bara nio f\u00e4rger, men den har fortfarande f\u00f6r m\u00e5nga nyanser av en och samma f\u00e4rg. Det uppst\u00e5r det s\u00e5 kallade banding (fr\u00e5n engelska band \u2014 band), d\u00e4r \u00f6gonen p\u00e5 grund av tjocka homogena band fokuserar p\u00e5 punkterna d\u00e4r f\u00e4rgerna m\u00f6ts, ist\u00e4llet f\u00f6r p\u00e5 sj\u00e4lva f\u00e4rgerna.<\/p>\n

I den nedre gradienten har vi till\u00e4mpat dithering, vilket g\u00f6r att vi undviker banding och endast anv\u00e4nder tv\u00e5 f\u00e4rger. Vi skapar brus med varierande intensitet f\u00f6r att efterlikna f\u00e4rg\u00f6verg\u00e5ngen. Denna teknik liknar halftone (halvtone \u2014 halvmatt bild) som anv\u00e4nds vid tryck; samt stippling (stippling \u2014 prickig bild) \u2014 i illustrationer och serier.<\/p>\n

P\u00e5 orken anv\u00e4nde jag dithering v\u00e4ldigt lite f\u00f6r att \u00f6verf\u00f6ra textur. Vissa pixelkonstn\u00e4rer anv\u00e4nder det knappt, medan andra \u00e4r mycket skickliga p\u00e5 det. Jag tycker att dithering ser b\u00e4st ut p\u00e5 stora omr\u00e5den fyllda med en f\u00e4rg (titta p\u00e5 himlen i sk\u00e4rmbilden av Metal Slug ovan) eller p\u00e5 omr\u00e5den som ska se grova och oj\u00e4mna ut (till exempel smuts). Best\u00e4m sj\u00e4lv hur du vill anv\u00e4nda det.<\/p>\n

Om du vill se ett exempel p\u00e5 storskalig och kvalitativ dithering, kolla in spelen av The Bitmap Brothers, det brittiska studion fr\u00e5n 80-talet, eller spel p\u00e5 datorn PC-98. Men kom ih\u00e5g att alla dessa \u00e4r NSFW.<\/p>\n

\"Pixelkonst
\nKakyusei (PC-98). Elf, 1996
\nDenna bild har bara 16 f\u00e4rger!<\/i><\/p>\n

8. Sista titten<\/h2>\n

\n\"Pixelkonst
\n
\nEn av farorna med pixelkonst \u00e4r att det verkar l\u00e4tt och enkelt (p\u00e5 grund av dess struktur och stilens begr\u00e4nsningar). Men i slut\u00e4ndan kommer du att l\u00e4gga ner enormt mycket tid p\u00e5 att finslipa dina sprites. Det \u00e4r som ett pussel du m\u00e5ste l\u00f6sa \u2014 d\u00e4rf\u00f6r attraherar pixelkonst perfektionister. Kom ih\u00e5g att en sprite inte ska ta f\u00f6r mycket tid \u2014 det \u00e4r bara en liten bit av en extremt komplex sammans\u00e4ttning av bitar. Det \u00e4r viktigt att inte f\u00f6rlora f\u00f6rst\u00e5elsen f\u00f6r helheten.<\/p>\n

\u00c4ven om din pixelkonst inte \u00e4r f\u00f6r spel, kan det ibland vara bra att s\u00e4ga till sig sj\u00e4lv: \"Allt \u00e4r redan tillr\u00e4ckligt bra!\" och g\u00e5 vidare. Det b\u00e4sta s\u00e4ttet att utveckla sina f\u00e4rdigheter \u00e4r att s\u00e5 m\u00e5nga g\u00e5nger som m\u00f6jligt g\u00e5 hela processen fr\u00e5n b\u00f6rjan till slut med s\u00e5 m\u00e5nga teman som m\u00f6jligt. <\/p>\n

Och ibland \u00e4r det bra att l\u00e4mna sprite ett tag f\u00f6r att titta p\u00e5 det med nya \u00f6gon lite senare. <\/p>\n

32\u00d732 pixlar<\/h2>\n

\n\"Pixelkonst
\n
\nVi skapade en stor sprite p\u00e5 96\u00d796 pixlar f\u00f6rst, eftersom den i den storleken mer p\u00e5minner om att m\u00e5la eller rita, men bara med pixlar. Ju mindre sprite, desto mindre liknar den vad den ska visa, och desto viktigare blir varje pixel.<\/p>\n

\"Pixelkonst
\n
\nI Super Mario Bros. \u00e4r Marios \u00f6ga bara tv\u00e5 pixlar, placerade p\u00e5 varandra. Och hans \u00f6ra ocks\u00e5. Karakt\u00e4rsskaparen Shigeru Miyamoto sa att mustaschen beh\u00f6vdes f\u00f6r att separera n\u00e4san fr\u00e5n resten av ansiktet. S\u00e5 en av Marios mest framtr\u00e4dande drag \u00e4r inte bara karakt\u00e4rens design men ocks\u00e5 en pragmatisk l\u00f6sning. Det bekr\u00e4ftar det gamla ordspr\u00e5ket \u2014 \"behovet \u00e4r uppfinningens moder.\"<\/p>\n

De grundl\u00e4ggande stegen f\u00f6r att skapa en sprite p\u00e5 32\u00d732 pixlar \u00e4r vi redan bekanta med: skiss, f\u00e4rg, skuggor, vidareutveckling. Men under s\u00e5dana f\u00f6rh\u00e5llanden v\u00e4ljer jag f\u00e4rgade former som utg\u00e5ngsskisser ist\u00e4llet f\u00f6r att rita konturer p\u00e5 grund av den lilla storleken. F\u00e4rg spelar en viktigare roll i att definiera karakt\u00e4ren \u00e4n konturer. Titta p\u00e5 Mario igen, han har inga konturer alls. Det \u00e4r inte bara mustaschen som \u00e4r intressant. Hans kindsk\u00e4gg definierar formen p\u00e5 \u00f6ronen, \u00e4rmarna visar armarna, och den \u00f6vergripande formen \u00e5terger mer eller mindre tydligt hela hans kropp.<\/p>\n

Att skapa sm\u00e5 sprites inneb\u00e4r st\u00e4ndiga kompromisser. Om du l\u00e4gger till en kant kan du f\u00f6rlora utrymme f\u00f6r skuggning. Om din karakt\u00e4r har tydligt definierade armar och ben, s\u00e5 m\u00e5ste huvudet f\u00f6rmodligen vara ganska litet. Om du anv\u00e4nder f\u00e4rg, selektiv kant och anti-aliasing effektivt, kommer den ritade objektet att verka st\u00f6rre \u00e4n vad det \u00e4r.<\/p>\n

F\u00f6r sm\u00e5 sprites gillar jag chibi-stilen: karakt\u00e4rerna ser v\u00e4ldigt s\u00f6ta ut, med stora huvuden och \u00f6gon. Ett utm\u00e4rkt s\u00e4tt att skapa en livfull hj\u00e4lte p\u00e5 begr\u00e4nsat utrymme, och i allm\u00e4nhet en mycket tilltalande stil. Men om du beh\u00f6ver visa karakt\u00e4rens r\u00f6rlighet eller styrka kan du ge mindre utrymme \u00e5t huvudet s\u00e5 att kroppen ser mer muskul\u00f6s ut. Allt beror p\u00e5 dina preferenser och m\u00e5l.<\/p>\n

\"Pixelkonst
\nHela laget \u00e4r samlat!<\/i><\/p>\n

Filformat<\/h2>\n

\n\"Pixelkonst
\nEtt s\u00e5dant resultat kan f\u00e5 vilken pixelkonstn\u00e4r som helst att bli nerv\u00f6s.<\/i><\/p>\n

Bilden du ser \u00e4r resultatet av att spara teckningen i JPG. En del data har g\u00e5tt f\u00f6rlorad p\u00e5 grund av filkomprimeringsalgoritmer. Kvalitativ pixelkonst kommer i slut\u00e4ndan att se d\u00e5lig ut, och det kommer att bli sv\u00e5rt att \u00e5terf\u00e5 dess ursprungliga palett.<\/p>\n

F\u00f6r att spara en statisk bild utan kvalitetsf\u00f6rlust, anv\u00e4nd PNG-format. F\u00f6r animationer \u2014 GIF.<\/p>\n

Hur man korrekt delar pixelkonst<\/h2>\n

\nAtt dela pixelkonst p\u00e5 sociala medier \u00e4r ett utm\u00e4rkt s\u00e4tt att f\u00e5 feedback och tr\u00e4ffa andra konstn\u00e4rer som arbetar i samma stil. Gl\u00f6m inte att anv\u00e4nda hashtaggen #pixelart. Tyv\u00e4rr konverterar sociala medier ofta PNG till JPG utan att fr\u00e5ga, vilket f\u00f6rs\u00e4mrar ditt arbete. Dessutom \u00e4r det inte alltid klart varf\u00f6r din bild har konverterats.<\/p>\n

Det finns n\u00e5gra tips f\u00f6r att bevara pixelkonsten i r\u00e4tt kvalitet f\u00f6r olika sociala medier.<\/p>\n

Twitter<\/h3>\n

\nF\u00f6r att PNG-filen inte ska \u00e4ndras i Twitter, anv\u00e4nd mindre \u00e4n 256 f\u00e4rger eller se till<\/a><\/noindex>, att din fil \u00e4r mindre \u00e4n 900 pixlar p\u00e5 den l\u00e4ngsta sidan. Jag skulle \u00f6ka filens storlek till \u00e5tminstone 512\u00d7512 pixlar. Dessutom b\u00f6r skalningen vara i multiplar av 100 (200 %, inte 250 %) och skarpa kanter bevaras (Nearest Neighbor i Photoshop).<\/p>\n

Animerade GIF-filer f\u00f6r inl\u00e4gg p\u00e5 Twitter m\u00e5ste<\/a><\/noindex> v\u00e5ga h\u00f6gst 15 MB. Bilden b\u00f6r vara minst 800\u00d7800 pixlar, cyklisk animation b\u00f6r upprepas tre g\u00e5nger, och den sista bilden b\u00f6r vara h\u00e4lften s\u00e5 l\u00e5ng i tid som de andra - den mest popul\u00e4ra teorin. Det \u00e4r dock oklart hur mycket dessa krav verkligen m\u00e5ste uppfyllas, med tanke p\u00e5 att Twitter st\u00e4ndigt \u00e4ndrar sina algoritmer f\u00f6r visning av bilder.<\/p>\n

Instagram<\/h3>\n

\nS\u00e5vitt jag vet, \u00e4r det om\u00f6jligt att publicera en bild p\u00e5 Instagram utan kvalitetsf\u00f6rlust. Men den kommer definitivt att se b\u00e4ttre ut om du \u00f6kar den till \u00e5tminstone 512\u00d7512 pixlar.
\n
K\u00e4lla: habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"

\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 […]<\/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\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n","aioseo_head_json":{"title":"\ud83e\udd47Pixelkonst f\u00f6r nyb\u00f6rjare: en handbok | ProHoster","description":"Ofta m\u00e5ste indieutvecklare.","canonical_url":"https:\/\/prohoster.info\/sv\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"sv_SE","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\/sv\/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\/sv\/wp-json\/wp\/v2\/posts\/54617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/comments?post=54617"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/posts\/54617\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/media?parent=54617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/categories?post=54617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/sv\/wp-json\/wp\/v2\/tags?post=54617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}