{"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\/da\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","title":{"rendered":"Pixelkunst for begyndere: en guide til brug","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/00d172ccd0d834f54c3fa1ffe2f03481.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nIndie-udviklere m\u00e5 ofte kombinere flere roller: spildesigner, programm\u00f8r, komponist, kunstner. Og n\u00e5r det kommer til visuelle elementer, v\u00e6lger mange pixelart \u2014 det virker simpelt ved f\u00f8rste \u00f8jekast. Men for at skabe noget smukt kr\u00e6ves der meget erfaring og specifikke f\u00e6rdigheder. Jeg fandt en tutorial til dem, der lige er begyndt at l\u00e6re det grundl\u00e6ggende i denne stil: med beskrivelse af speciel software og tegneteknikker baseret p\u00e5 to sprites.<noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<h2>Baggrund<\/h2>\n<p>\nPixelart er en form for digital kunst, hvor \u00e6ndringer foretages p\u00e5 pixelniveau. Det forbindes prim\u00e6rt med grafik fra videospil i 80'erne og 90'erne. Dengang m\u00e5tte kunstnere tage hensyn til hukommelsesbegr\u00e6nsninger og lav opl\u00f8sning. I dag er pixelart stadig popul\u00e6rt i spil og som kunstnerisk stil generelt, p\u00e5 trods af muligheden for at skabe realistisk 3D-grafik. Hvorfor? Selv uden at tage nostalgi i betragtning, er det en behagelig og v\u00e6rdifuld udfordring at skabe et fedt v\u00e6rk inden for s\u00e5 stramme rammer.<\/p>\n<p>Indgangsbarrieren til pixelart er relativt lav sammenlignet med traditionel kunst og 3D-grafik, hvilket tiltr\u00e6kker indie-udviklere. Men det betyder slet ikke, at det bliver nemt <b>at f\u00e6rdigg\u00f8re<\/b> et spil i denne stil. Jeg har set mange indie-udviklere med pixelart metroidvanias p\u00e5 crowdfunding-platforme. De troede, at de ville v\u00e6re f\u00e6rdige p\u00e5 et \u00e5r, men i virkeligheden havde de brug for yderligere seks \u00e5r. <\/p>\n<p><img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" 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>Pixelart p\u00e5 det niveau, som de fleste \u00f8nsker at skabe, kr\u00e6ver meget tid, og der er meget f\u00e5 korte tutorials. N\u00e5r du arbejder med en 3D-model, kan du rotere den, deformere den, flytte enkelte dele af den, kopiere animationer fra en model til en anden og s\u00e5 videre. H\u00f8j-niveau pixelart kr\u00e6ver n\u00e6sten altid en masse energi p\u00e5 omhyggelig placering af pixels p\u00e5 hvert enkelt frame.<\/p>\n<p>Generelt har jeg advaret.<\/p>\n<p>Og nu lidt om min stil: jeg tegner prim\u00e6rt pixelkunst til videospil, og det er ogs\u00e5 her, jeg finder min inspiration. Jeg er is\u00e6r fan af Famicom\/NES, 16-bit konsoller og arkadespil fra 90'erne. Pixelkunsten fra mine yndlingsspil fra den tid kan beskrives som farverig, sikker og ren (men ikke for meget), den kan ikke kaldes h\u00e5rd og minimalistisch. Jeg arbejder selv i denne stil, men du kan nemt anvende ideer og teknikker fra denne tutorial til at skabe helt andre ting. Udforsk v\u00e6rker af forskellige kunstnere og skab pixelkunst, som du kan lide!<\/p>\n<h2>Software<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/5dc5fa7ebabd2a31b1375cdfc9437b66.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nGrundl\u00e6ggende digitale v\u00e6rkt\u00f8jer til pixelkunst \u2013 Zoom (Zoom) og Blyant (Pencil), til at placere pixels. Du vil ogs\u00e5 f\u00e5 brug for Linje (Line), Figur (Shape), V\u00e6lg (Select), Flyt (Move) og Maleb\u00f8tte (Paint Bucket). Der findes mange gratis og betalte programmer med dette v\u00e6rkt\u00f8js\u00e6t. Jeg vil fort\u00e6lle dig om de mest popul\u00e6re og dem, jeg selv bruger.<\/p>\n<h3>Paint (gratis)<\/h3>\n<p>\nHvis du har Windows, er det indbyggede Paint et primitivt program, men det har alle v\u00e6rkt\u00f8jerne til pixelkunst.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.piskelapp.com\/\">Piskel<\/a><\/noindex> (gratis)<\/h3>\n<p>\nEn overraskende funktionel pixelkunstreder, der k\u00f8rer i din browser. Du kan eksportere dit arbejde som PNG eller en animeret GIF. Et glimrende valg for begyndere.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/graphicsgale.com\/us\/\">GraphicsGale<\/a><\/noindex> (gratis)<\/h3>\n<p>\nGraphicsGale er den eneste editor blandt dem, jeg har h\u00f8rt om, der er udviklet specifikt til pixelkunst og inkluderer animationsv\u00e6rkt\u00f8jer. Den blev skabt af det japanske firma HUMANBALANCE. Siden 2017 har den v\u00e6ret gratis at downloade og er stadig popul\u00e6r, p\u00e5 trods af Aseprites stigende popularitet. Desv\u00e6rre fungerer den kun p\u00e5 Windows.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.aseprite.org\/\">Aseprite<\/a><\/noindex> ($)<\/h3>\n<p>\nM\u00e5ske den mest popul\u00e6re editor lige nu. <noindex><a rel=\"nofollow\" href=\"https:\/\/www.aseprite.org\/faq\/#if-aseprite-source-code-is-available-how-is-that-you-are-selling-it\">\u00c5ben kildekode<\/a><\/noindex>, masser af muligheder, aktiv support, tilg\u00e6ngelig p\u00e5 Windows, Mac og Linux. Hvis du seri\u00f8st arbejder med pixelkunst og stadig ikke har fundet den rette editor, kan dette v\u00e6re det, du har brug for.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.yoyogames.com\/get\">GameMaker Studio 2<\/a><\/noindex> ($$+)<\/h3>\n<p>\nGameMaker Studio 2 er et fremragende 2D-v\u00e6rkt\u00f8j med en fantastisk sprite-editor. Hvis du vil lave pixelkunst til dine egne spil, er det meget praktisk at g\u00f8re alt i et program. Lige nu bruger jeg denne software til at arbejde p\u00e5 <noindex><a rel=\"nofollow\" href=\"https:\/\/50games.fun\/\">UFO 50<\/a><\/noindex>, en samling af 50 retro-spil: jeg skaber sprites og animationer i GameMaker og tilesets i Photoshop.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.photoshop.com\/\">Photoshop<\/a><\/noindex> ($$$+)<\/h3>\n<p>\nPhotoshop er dyr software, som distribueres via abonnement og ikke er optimeret til pixel-art. Jeg anbefaler ikke at k\u00f8be det, medmindre du arbejder med illustrationer i h\u00f8j opl\u00f8sning eller har brug for at udf\u00f8re komplekse manipulationer med billeder, som jeg. Du kan skabe statiske sprites og pixelv\u00e6rker i det, men det er ret kompliceret sammenlignet med specialiseret software (som GraphicsGale eller Aseprite).<\/p>\n<h2>Andet<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/e810f041b931c304b6b65f9895a9f325.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Mit s\u00e6t til pixel-art. Alt er sort, jeg bem\u00e6rkede det f\u00f8rst nu.<\/i><\/p>\n<h3>Grafisk tablet ($$+)<\/h3>\n<p>\nJeg anbefaler grafiske tablets til ethvert arbejde med digitale illustrationer for at undg\u00e5 karpaltunnelsyndrom. Det er meget lettere at forebygge end at heles. En dag vil du m\u00e6rke smerte, og den vil kun blive v\u00e6rre \u2014 tag vare p\u00e5 dig selv fra starten. Fordi jeg engang tegnede med musen, har jeg nu sv\u00e6rt ved at spille spil, hvor man skal trykke p\u00e5 taster. Jeg bruger nu Wacom Intuos Pro S.<\/p>\n<h3>Handsupport ($)<\/h3>\n<p>\nHvis du ikke kan f\u00e5 fat i en tablet, s\u00e5 k\u00f8b i det mindste en handsupport. Jeg kan bedst lide Mueller Green Fitted Wrist Brace. De andre er enten for stramme eller giver utilstr\u00e6kkelig st\u00f8tte. Supports kan nemt bestilles online.<\/p>\n<h2>96\u00d796 pixels<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" 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>Lad os komme i gang! Vi starter med en karakter sprite p\u00e5 96\u00d796 pixels. Som eksempel har jeg tegnet en ork og placeret den p\u00e5 et screenshot fra Final Fight (billedet ovenfor), s\u00e5 du kan forst\u00e5 st\u00f8rrelsesforholdet. Dette <b>er en stor<\/b> sprite for de fleste retro-spil, screenshot st\u00f8rrelse: 384\u00d7224 pixels.<\/p>\n<p>P\u00e5 en s\u00e5 stor sprite er det lettere at vise den teknik, jeg vil tale om. Derudover minder pixel-for-pixel tegning mere om traditionelle kunstformer (som tegning eller maleri), som du m\u00e5ske er bedre bekendt med. N\u00e5r du har mestret de grundl\u00e6ggende teknikker, vil vi g\u00e5 videre til mindre sprites.<\/p>\n<h2>1. V\u00e6lg en palette<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/f99208134b3f107fcdf3f14b8c2216b8.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nPixel er et meget dybere begreb inden for pixel-art end i nogen andre digitale sf\u00e6rer. Pixel-art defineres af sine begr\u00e6nsninger, som for eksempel farver. Det er vigtigt at v\u00e6lge en palette korrekt, da den hj\u00e6lper med at fastl\u00e6gge din stil. Men i starten foresl\u00e5r jeg ikke at t\u00e6nke p\u00e5 paletter og bare v\u00e6lge en af de eksisterende (eller bare et par tilf\u00e6ldige farver) \u2014 du kan nemt \u00e6ndre den p\u00e5 ethvert tidspunkt.<\/p>\n<p>I denne tutorial vil jeg bruge en palet med 32 farver, som vi har skabt til <noindex><a rel=\"nofollow\" href=\"https:\/\/50games.fun\/\">UFO 50<\/a><\/noindex>. Til pixelkunst samles de ofte i 32 eller 16 farver. Vores er udviklet til en fiktiv konsol, som kunne have v\u00e6ret skabt et sted mellem Famicom og PC Engine. Du kan tage den eller en anden \u2014 tutorialen afh\u00e6nger slet ikke af den valgte palet.<\/p>\n<h2>2. Grovere konturer<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/e8ead988dfafeae4b220ff3dc39093e6.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nLad os starte med at tegne ved hj\u00e6lp af v\u00e6rkt\u00f8jet Blyant. Vi vil lave et skitser, ligesom vi g\u00f8r med en almindelig pen og papir. Selvf\u00f8lgelig overlapper pixelkunst og traditionel kunst, is\u00e6r n\u00e5r det kommer til store sprites. Mine observationer viser, at dygtige pixelkunstnere som regel ogs\u00e5 kan tegne godt i h\u00e5nden og omvendt. S\u00e5 det er altid nyttigt at udvikle tegnef\u00e6rdigheder.<\/p>\n<h2>3. Arbejde med konturer<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/738dde231295a317d5461b4055e2be61.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nVi finpudser konturerne: fjerner overskydende pixels og reducerer tykkelsen af hver linje til \u00e9n pixel. Men hvad skal man betragte som overskydende? For at besvare dette sp\u00f8rgsm\u00e5l skal vi forst\u00e5 pixel linjer og uj\u00e6vnheder.<\/p>\n<h3>Uj\u00e6vnheder<\/h3>\n<p>\nDu skal l\u00e6re at tegne to grundl\u00e6ggende linjer i pixelkunst: lige og buede. Med en pen og papir handler det om muskelkontrol, men vi arbejder med sm\u00e5 farvede blokke.<\/p>\n<p>N\u00f8glen til at tegne de rigtige pixel linjer er uj\u00e6vnheder. Det er enkeltpixels eller sm\u00e5 segmenter, der bryder glathed af linjen. Som jeg allerede har n\u00e6vnt, har et enkelt pixel enorm betydning i pixelkunst, s\u00e5 uj\u00e6vnheder kan \u00f8del\u00e6gge hele \u00e6stetikken. Forestil dig, at du tegner en lige linje p\u00e5 papir, og pludselig st\u00f8der nogen til bordet: uj\u00e6vnheder i pixelkunst ser liges\u00e5dan ud som en tilf\u00e6ldig krusedulle.<\/p>\n<p>Eksempler:<\/p>\n<p><img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/8d873c547fa1fc638d524877599d1788.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Lige<\/i><\/p>\n<p><img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/0516dfef0ffc74335de791e16708b90f.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Buede<\/i><\/p>\n<p>Uj\u00e6vnheder opst\u00e5r p\u00e5 buede linjer, n\u00e5r l\u00e6ngden af linjesegmenterne \u00f8ges eller mindskes ikke gradvist.<\/p>\n<p>Det er umuligt helt at undg\u00e5 uj\u00e6vnheder \u2014 de findes i alle dine yndlings retrospil (medmindre selvf\u00f8lgelig pixelkunst kun best\u00e5r af enkle former). M\u00e5let: at minimere uj\u00e6vnheder, samtidig med at man viser alt det n\u00f8dvendige.<\/p>\n<h2>4. Anvend de f\u00f8rste farver<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/b8b937d95667cff41f1060a77e715acb.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nFarv din karakter med fyld eller et andet passende v\u00e6rkt\u00f8j. Paletten vil g\u00f8re denne del af arbejdet lettere. Hvis softwaren ikke underst\u00f8tter brug af paletter, kan du placere den direkte i billedet som i eksemplet ovenfor og v\u00e6lge farver med pipetten.<\/p>\n<p>I nederste venstre hj\u00f8rne har jeg tegnet vores ven, m\u00f8d \u2014 Sharik. Det vil v\u00e6re lettere at forst\u00e5, hvad der sker p\u00e5 hvert trin med ham.<\/p>\n<h2>5. Skyggelegning<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/2e0793f9ded395337e4da9ede215b9d8.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nNu er det tid til at tilf\u00f8je skygger \u2014 vi tilf\u00f8jer blot m\u00f8rkere farver til sprite. Det vil f\u00e5 billedet til at se mere tredimensionelt ud. Lad os antage, at vi har en lyskilde, der er placeret ovenfor og til venstre for orken. S\u00e5 alt, der er over og foran vores karakter, vil blive belyst. Vi tilf\u00f8jer skygger nederst til h\u00f8jre.<\/p>\n<h3>Form og volumen<\/h3>\n<p>\n<img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/1994fcb30789e1601bcae8ce1a50d5e7.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nHvis dette trin er sv\u00e6rt for dig, s\u00e5 forestil dig dit billede som tredimensionelle former snarere end blot linjer og farver. Former eksisterer i et tredimensionelt rum og kan have volumen, som vi opbygger med skygger. Dette hj\u00e6lper med at visualisere karakteren uden detaljer og forestille sig, at den er lavet af ler snarere end af pixels. Skyggelegning er ikke blot at tilf\u00f8je nye farver, men en proces til opbygning af form. P\u00e5 en veludf\u00f8rt karakter skjuler detaljerne ikke de grundl\u00e6ggende former: hvis du kigger n\u00f8je, vil du se flere store klynger af lys og skygge. <\/p>\n<h3>Anti-aliasing<\/h3>\n<p>\nHver gang jeg bruger en ny farve, anvender jeg anti-aliasing (AA). Det hj\u00e6lper med at udj\u00e6vne pixels ved at tilf\u00f8je mellemfarver i hj\u00f8rnerne, hvor to segmenter af en linje m\u00f8des:<\/p>\n<p><img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/9fc0ab09f076b1de252038c899ada201.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nGr\u00e5 pixels bl\u00f8dg\u00f8r \"brud\" i linjen. Jo l\u00e6ngere segmentet af linjen er, desto l\u00e6ngere er AA-segmentet.<\/p>\n<p><img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/262533d7923415430375d84f58a9d7fa.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>S\u00e5dan ser AA ud p\u00e5 orkens skulder. Det er n\u00f8dvendigt for at glatte linjerne, der viser kurven af hans muskler.<\/i><\/p>\n<p>Anti-aliasing b\u00f8r ikke str\u00e6kke sig ud over sprite, der vil blive brugt i spillet eller p\u00e5 en baggrund, hvis farve er ukendt. For eksempel, hvis du anvender AA til en lys baggrund, vil det se d\u00e5rligt ud p\u00e5 en m\u00f8rk baggrund.<\/p>\n<h2>6. Valgt kontur<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/32574a815ea81137a948f0a18217c8db.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nTidligere var konturerne helt sorte, hvilket gjorde, at sprite s\u00e5 meget tegnet ud. Billedet var n\u00e6rmest delt op i segmenter. For eksempel viser de sorte linjer p\u00e5 armen for st\u00e6rkt muskulaturen, og karakteren ser mindre sammenh\u00e6ngende ud.<\/p>\n<p>Hvis sprite'en bliver mere naturlig, og segmenteringen ikke s\u00e5 markant, vil de grundl\u00e6ggende former for figuren v\u00e6re lettere at l\u00e6se. Til dette kan man bruge en selektiv kontur \u2014 delvist erstatte den sorte kontur med en lysere farve. P\u00e5 den oplyste del af sprite'en kan de lyseste farver bruges, eller der hvor sprite'en ber\u00f8rer det negative rum, kan konturen helt fjernes. I stedet for sort b\u00f8r man bruge farven valgt til skyggen \u2014 s\u00e5ledes bevares segmenteringen (til adskillelse af muskler, pels osv.).<\/p>\n<p>Desuden har jeg p\u00e5 dette trin tilf\u00f8jet m\u00f8rkere skygger. Der er opn\u00e5et tre nuancer af gr\u00f8n p\u00e5 orkens hud. Den m\u00f8rkeste gr\u00f8nne farve kan bruges til den selektive kontur og AA.<\/p>\n<h2>7. Endelige detaljer<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/196f80b3ed3928d4c1ac7b9b99782fa1.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nTil sidst b\u00f8r man tilf\u00f8je h\u00f8jlys (de lyseste pletter p\u00e5 sprite'en), detaljer (\u00f8reringe, nitter, ar) og andre forbedringer, indtil figuren er klar, eller indtil man skal videre til n\u00e6ste.<\/p>\n<p>Der er flere nyttige teknikker, man kan anvende p\u00e5 dette trin. Vend tegningen vandret, det hj\u00e6lper ofte med at afsl\u00f8re fejl i proportioner og skygger. Man kan ogs\u00e5 fjerne farven \u2014 s\u00e6tte m\u00e6tningen til nul for at forst\u00e5, hvor skyggerne skal \u00e6ndres.<\/p>\n<h3>Skabelse af st\u00f8j (dithering)<\/h3>\n<p>\nIndtil nu har vi prim\u00e6rt brugt store, solide omr\u00e5der med skygger. Men der er ogs\u00e5 en anden teknik \u2014 dithering, der muligg\u00f8r overgangen fra \u00e9n farve til en anden uden at tilf\u00f8je en tredje. Se eksemplet nedenfor.<\/p>\n<p><img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/85c2482ab6f83e0eb972d31d50ff0a2e.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nDen \u00f8verste gradient fra m\u00f8rk til lys bruger hundreder af forskellige nuancer af bl\u00e5. <\/p>\n<p>Den mellemste gradient bruger kun ni farver, men der er stadig for mange nuancer af \u00e9n farve. Der opst\u00e5r s\u00e5kaldt banding, hvor \u00f8jet fokuserer p\u00e5 farvernes ber\u00f8ringspunkter snarere end selve farverne p\u00e5 grund af tykke, ensartede striber.<\/p>\n<p>I den nederste gradient har vi anvendt dithering, hvilket hj\u00e6lper med at undg\u00e5 banding og bruger kun to farver. Vi skaber st\u00f8j i forskellige intensiteter for at efterligne farvegradering. Denne teknik ligner meget halftone, der anvendes i trykning; samt stippling \u2014 i illustrationer og tegneserier.<\/p>\n<p>P\u00e5 orken anvendte jeg dithering meget lidt for at overf\u00f8re teksturen. Nogle pixelkunstnere bruger slet ikke det, mens andre tv\u00e6rtimod ikke er bange for det og g\u00f8r det meget dygtigt. Jeg synes, dithering ser bedst ud p\u00e5 store omr\u00e5der fyldt med \u00e9n farve (kig p\u00e5 himlen i sk\u00e6rmbilledet fra Metal Slug, som blev vist f\u00f8r) eller p\u00e5 de omr\u00e5der, der skal se ru og uj\u00e6vne ud (for eksempel mudder). Beslut selv, hvordan du vil bruge det.<\/p>\n<p>Hvis du vil se et eksempel p\u00e5 omfattende og kvalitetssikret dithering, s\u00e5 unders\u00f8g spillene fra The Bitmap Brothers, det britiske studie fra 80'erne, eller spil p\u00e5 PC-98. Bare husk, at alle de er NSFW.<\/p>\n<p><img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/25efcc37096d23b0da636b7f04b17e40.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Kakyusei (PC-98). Elf, 1996<br \/>\nDer er kun 16 farver p\u00e5 dette billede!<\/i><\/p>\n<h2>8. Sidste blik<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/e1cccd845e1bffa32b26fccc011b6560.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nEn af farerne ved pixelkunst er, at det virker let og simpelt (p\u00e5 grund af dets struktur og stilens begr\u00e6nsninger). Men til sidst bruger du en enorm m\u00e6ngde tid p\u00e5 at forfine dine sprites. Det ligner et puslespil, der skal l\u00f8ses \u2014 det er derfor, pixelkunst tiltr\u00e6kker perfektionister. Husk, at \u00e9n sprite ikke skal tage for meget tid \u2014 det er kun et lille stykke af en meget kompleks samling af stykker. Det er vigtigt ikke at miste fokus p\u00e5 det samlede billede.<\/p>\n<p>Selv hvis din pixelkunst ikke er til spil, er det nogle gange v\u00e6rd at sige til dig selv: \"Det er allerede godt nok!\" Og komme videre. Den bedste m\u00e5de at udvikle f\u00e6rdigheder p\u00e5 er at gennemf\u00f8re hele processen fra start til slut s\u00e5 mange gange som muligt, med s\u00e5 mange emner som muligt. <\/p>\n<p>Og det kan nogle gange v\u00e6re nyttigt at tr\u00e6de v\u00e6k fra din sprite i kort tid for senere at se den med friske \u00f8jne. <\/p>\n<h2>32\u00d732 pixels<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/6a4441d7b2cfa580454f6d6b64b7644b.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nVi lavede en stor sprite p\u00e5 96\u00d796 pixels f\u00f8rst, fordi denne st\u00f8rrelse mere ligner maleri eller kunst, men kun med pixels. Jo mindre sprite, jo mindre ligner det, hvad det skal vise, og jo vigtigere er hver pixel.<\/p>\n<p><img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/ac13676b156c0e357e690e90d4a9bc5d.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nI Super Mario Bros. er Marios \u00f8je kun to pixels, der er placeret oven p\u00e5 hinanden. Og hans \u00f8re ogs\u00e5. Karakterens skaber, Shigeru Miyamoto, sagde, at oversk\u00e6gget var n\u00f8dvendigt for at adskille n\u00e6sen fra resten af ansigtet. S\u00e5 en af de vigtigste tr\u00e6k ved Marios ansigt er ikke kun designet for karakteren, men ogs\u00e5 en pragmatisk kneb. Dette bekr\u00e6fter den gamle visdom \u2014 \"n\u00f8d l\u00e6rer naken kvinde at spinde.\"<\/p>\n<p>De grundl\u00e6ggende trin til at skabe en sprite p\u00e5 32\u00d732 pixels er allerede velforst\u00e5et for os: skitse, farve, skygger og videre bearbejdning. Men under disse forhold v\u00e6lger jeg farvede figurer som startskitse i stedet for at tegne konturer p\u00e5 grund af den lille st\u00f8rrelse. Farven spiller en vigtigere rolle i at definere karakteren end konturerne. Se p\u00e5 Mario igen, han har slet ingen konturer. Det er ikke kun oversk\u00e6gget, hans sm\u00e5 side-diller definerer formen p\u00e5 \u00f8rerne, \u00e6rmerne viser h\u00e6nderne, og den samlede form viser mere eller mindre tydeligt hele hans krop.<\/p>\n<p>At skabe sm\u00e5 sprites er konstant en balancegang. Hvis du tilf\u00f8jer en omrids, kan du miste plads til skygger. Hvis din karakter har klart definerede arme og ben, skal hovedet nok ikke v\u00e6re for stort. Hvis farven, selektiv omrids og anti-aliasing bruges effektivt, vil den tegnede genstand se st\u00f8rre ud, end den reelt er.<\/p>\n<p>For sm\u00e5 sprites kan jeg godt lide chibi-stilen: karaktererne ser meget s\u00f8de ud, de har store hoveder og \u00f8jne. En fremragende m\u00e5de at skabe en farverig helt p\u00e5 i begr\u00e6nset rum, og generelt en meget behagelig stil. Men hvis du m\u00e5ske skal vise karakterens bev\u00e6gelighed eller styrke, s\u00e5 kan du give mindre plads til hovedet, s\u00e5 kroppen ser mere muskul\u00f8s ud. Det hele afh\u00e6nger af dine pr\u00e6ferencer og m\u00e5l.<\/p>\n<p><img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/5c32b47afc803e698c9523e183086b9c.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Hele holdet er samlet!<\/i><\/p>\n<h2>Filformater<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixelkunst for begyndere: en guide til brug\" src=\"\/wp-content\/uploads\/2019\/12\/c636145341db38f18a33b8c9708c36bf.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>S\u00e5dan et resultat kan f\u00e5 enhver pixelkunstner til at blive nerv\u00f8s<\/i><\/p>\n<p>Billedet, du ser, er resultatet af at gemme tegningen som JPG. Nogle data gik tabt p\u00e5 grund af filkomprimeringsalgoritmer. Kvalitets pixelart vil til sidst se d\u00e5rligt ud, og det vil ikke v\u00e6re nemt at genskabe den oprindelige palet.<\/p>\n<p>For at gemme et statisk billede uden tab af kvalitet, brug PNG-formatet. For animationer \u2014 GIF.<\/p>\n<h2>S\u00e5dan deler man pixelart korrekt<\/h2>\n<p>\nAt dele pixelart p\u00e5 sociale medier er en fremragende m\u00e5de at f\u00e5 feedback og m\u00f8de andre kunstnere, der arbejder i samme stil. Glem ikke at tilf\u00f8je hashtagget #pixelart. Desv\u00e6rre konverterer sociale medier ofte PNG til JPG uden varsel, hvilket forringer dit arbejde. Det er desuden ikke altid klart, hvorfor dit billede blev konverteret.<\/p>\n<p>Der er flere tips til, hvordan man bevarer pixelart i den rigtige kvalitet til forskellige sociale medier.<\/p>\n<h3>Twitter<\/h3>\n<p>\nFor a PNG file to remain unchanged on Twitter, use fewer than 256 colors, or <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/NolanOBrien\/status\/1199037916019716096\">make sure<\/a><\/noindex>, your file is less than 900 pixels on the longer side. I would increase the file size to at least 512\u00d7512 pixels, ensuring that the scaling is in multiples of 100 (200%, not 250%) and that sharp edges are maintained (Nearest Neighbor in Photoshop).<\/p>\n<p>Animated GIF files for Twitter posts <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/cyangmou\/status\/989149918534275072?lang=en\">skal<\/a><\/noindex> should not exceed 15 MB. The image must be at least 800\u00d7800 pixels, the looping animation should repeat three times, and the last frame should be half as long as the others \u2014 this is the most popular theory. However, it is unclear how strictly these requirements need to be followed, as Twitter continuously changes its image display algorithms.<\/p>\n<h3>Instagram<\/h3>\n<p>\nAs far as I know, it is impossible to post an image on Instagram without losing quality. But it will certainly look better if you increase it to at least 512\u00d7512 pixels.<br \/>\n<br \/>Kilde: <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.3 - 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\/da\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"da_DK\" \/>\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\/da\/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 for Beginners: A Guide | ProHoster","description":"Indie developers often have to deal with.","canonical_url":"https:\/\/prohoster.info\/da\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"da_DK","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\/da\/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\/da\/wp-json\/wp\/v2\/posts\/54617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/comments?post=54617"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/posts\/54617\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/media?parent=54617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/categories?post=54617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/tags?post=54617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}