HTX Frederikshavn & Hjørring

Det har aldrig været sjovere at være nørd

Brugerværktøjer

Webstedsværktøjer


ddu:exercise:libresprite_1

PixelArt Øvelse: Sprite i LibreSprite

Denne øvelse viser, hvordan du kan skabe din egen sprite i LibreSprite, trin for trin, efter workflowet: Silhuet → Block-out → Farvefyld → Refine


Mål

  • Lær at tegne en sprite fra bunden i LibreSprite.
  • Arbejd systematisk gennem fire faser af pixel-art workflow.
  • Brug din egen palette til at skabe sammenhæng i farver og stemning.
  • Eksporter din sprite til brug i spil, animation eller portfolio.

Forberedelse

  • Software: Download og installer [LibreSprite](https://libresprite.github.io/).
  • Palette: Importér din egen palette:
    • Gå til Palettes → Import Palette → fra fil og vælg den fil, læreren har givet.
  • Nyt dokument:
    • Vælg File → New og sæt størrelsen til fx 32×32 eller 64×64 pixels.

Workflow

1. Silhuet

Form og grundidé

  • Brug Pen Tool (P) til at tegne din sprites silhuet i én farve (typisk sort).
  • Fokusér på figuren eller objektets form – tænk over proportioner og tydelighed.
  • Zoom ud jævnligt for at tjekke, om figuren er genkendelig i lille størrelse.
  • Silhuetten skal vise karakterens personlighed (fx stærk, klodset, adræt).

Tip: Hvis silhuetten ikke “læses” tydeligt, så justér formen, inden du går videre. (Her menes, er det let for øjet at forstå, hvad figuren forestiller, bare ud fra figurens form uden farver eller detaljer.)


2. Block-out

Grundformer og dele

  • Lav et nyt lag (Layer → New Layer) over silhuetten.
  • Brug lyse farver fra din palette til at blokke de vigtigste dele ud:
    • Krop, hoved, arme, ben, tøj, våben.
  • Her handler det om opdeling af former, ikke detaljer.
  • Brug få farver for at bevare overblikket.
  • Fjern stray pixels, samt “clean up” af jaggies and double lines.

Tip: Du kan skrue ned for silhuettens opacity for lettere at se block-out laget ovenpå.


3. Farvefyld

Du skal vælge farve, eller farver for din pixelart.

Valget af farven for en karakter, kan kommunikere information omkring karakteren f.eks. er det god, eller ond karakter, eller hvilke type af kræfter/egenskaber som figuren har.

HSV farvemodel

    • Lilla (mørke/korruption, royal)
    • Red (ild, passion)
    • Blå (havet, magi, det ukendte)
    • Grøn (naturen/druid) –> mærk grøn : giftig)
    • Sort (ond, elegance)
    • Gul (Guld/værdi)
    • Hvid (god/hellig)
    • Grå (neutral)
  • Vælg en grund farve for dit design (base-color)
    • Hue (farve famlie)
    • Saturation (intensiteten af en farve, eller farve mætning)
    • Value (Brightness, (HSB) lys eller mørke, ..lys-intensiteten)

Tip: Hold farverne flade i starten — du kan altid justere senere i Refine-fasen.


4. Refine

Detaljer og finish

  • Brug Pen Tool (P) og Eraser (E) til at finpudse kanter og former.
  • Tilføj små detaljer: øjne, konturer, reflekslys, tekstur.
  • Ryd op i pixels, der stikker ud.
  • Brug flere lag til fx:
    • Lys og skygge
    • Effekter (fx glød eller støv)
  • Zoom ud og tjek, hvordan sprite ser ud i spil-størrelse.

Tip: Mindre er ofte bedre — for mange pixels kan gøre din sprite rodet. (vær tro mod din oprindelige palette)


Lys & skygge

  • (Saultoons) Basic Light Model
    • Cast shadow → Core-shadow & Hi-light → Terminator → Bounce-light.

  • Hvor kommer lyset fra ?? (bestem placering af lyskilde)
    • (Tip: Opret selvstændigt lag til lys og skygge CTRL-SHIFT-N)
  • Lys : Gå op 45 $^\circ$ til venstre. (fra grund-farve), juster HUE op ad ganske lidt.
  • Mørke : Gå ned 45 $^\circ$ til højre. (fra grund-farve), juster HUE ned ad ganske lidt.
  • Du kan have flere/mange nuancer eller af lag af lys og skygge på din karakter
  • Reflektion / genskin
    • Vælg lyseste nuance, og 'bumb lyst intensitet op .. til (næsten hvid)
  • Features (øjne,næse, mund) sættes på eget lag. (så de kan flyttes uafhængigt af andre elementer) Brug Shift-L.


Gem og eksportér

  • Gem dit arbejde som LibreSprite-projekt (.lspr) med File → Save.
  • Eksporter færdig sprite som PNG:
    • File → Export → PNG File
  • Navngiv filen tydeligt (fx `karakter_navn.png`).

Øvelse

  • Lav en sprite på 16×16, 32×32 eller 64×64 pixels efter workflowet:
    • Silhuet → Block-out → Farvefyld → Refine
  • Brug din egen palette.
  • Eksportér som PNG og del resultatet med klassen.

Tips

  • Brug begrænset farveantal for at bevare pixelart-stilen.
  • Zoom jævnligt ud for at se, hvordan sprite læses på afstand.
  • Brug lag strategisk: ét til silhuet, ét til block-out, ét til farve, ét til detaljer.
  • Eksperimentér med lys og skygge, men hold paletten konsistent.
ddu/exercise/libresprite_1.txt · Sidst ændret: af 127.0.0.1