====== 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 =====


{{ :images:workflow.png |}}
==== 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.
 
  * [[https://indidansk.dk/farver/|Farvesymbolik]]
  * [[https://venngage.com/blog/disney-villains/|What Disney Villains Can Tell Us About Color Psychology]]
  * [[https://www.colorpsychology.org/|Color Psychology 101: A Beginner's Guide to the Meaning of colors]]


=== 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) 
  * [[https://ambitiousdesigner.substack.com/p/hsb|HSV (HSB) farvemodel]] 
    * 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) [[https://youtu.be/lfR7Qj04-UA?si=ZptvmwO6jmiIIpzw&t=377|Basic Light Model]]
      * Cast shadow -> Core-shadow & Hi-light -> Terminator -> Bounce-light.

{{ :images:light_model_basic.png |}}


    * 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.

{{ :images:lighter_colors.png?230 |}}

----


===== 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å 16x16, 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.