Visuele Stijlgids
De complete visuele stijlgids voor Milena's Cozy Treehouse Club, gebaseerd op de bestaande artwork.
Voorbeelden uit de Game
Karakterontwerp - Milena
Milena in casual outfit - groene hoodie met denim shorts
Milena in herfstoutfit - mosterdgele trui met patchwork rok
Omgevingen
De boomhut van Milena in het bos met vijver
Detail van de boomhut met veranda en hangmat
Gezellig interieur met rond raam, houtkachel en bed
Keuken/eetkamer met groene stoelen
Het bosdorp met winkeltjes in bomen
Algemene Stijl
Kernwoorden
| Woord | Betekenis |
|---|---|
| Gezellig | Warm, uitnodigend, huiselijk |
| Storybook | Handgetekende illustratie-stijl |
| Natuurlijk | Organische vormen, aardse tinten |
| Kindvriendelijk | Zacht, vriendelijk, niet bedreigend |
| Cottage-core | Landelijke, knusse esthetiek |
Stijlreferenties
De visuele stijl is een mix van:
- Storybook Illustration - Handgetekende look met zichtbare lijnen
- Studio Ghibli - Warme, gedetailleerde achtergronden
- Cozy Grove - Zachte kleuren, knusse sfeer
- Hollow Knight/Ori - Gelaagde, atmosferische omgevingen
Algemene Regels
- Zichtbare linework - Zwarte/donkerbruine contouren
- Organische vormen - Geen perfecte geometrie
- Warme kleurtemperatuur - Aardse, natuurlijke tinten
- Gelaagde diepte - Voorgrond, middenplan, achtergrond
- Detailrijk maar leesbaar - Veel details die niet afleiden
Karakterontwerp
Lichaamsproporties
Karakters zijn in een semi-realistische anime stijl:
Hoofd : Lichaam ratio = 1 : 2.5 tot 1 : 3
Kenmerken:
- Natuurlijke proporties (geen chibi)
- Grote, expressieve ogen
- Zachte, ronde gezichtstrekken
- Slanke lichaamsbouw
- Natuurlijke handen en voeten
Milena (Hoofdpersonage)
| Kenmerk | Beschrijving |
|---|---|
| Haar | Blond/lichtbruin, krullend of steil, soms met gekleurde tips |
| Ogen | Groot, groen/bruin, vriendelijke blik |
| Leeftijd | Circa 10-12 jaar |
| Stijl | Comfortabele, natuurlijke kleding |
Kledingstijlen:
- Casual: Hoodie + shorts/rok
- Herfst: Gebreide trui + patchwork rok
- Zomer: Lichte jurk of t-shirt
- Winter: Warme jas, sjaal, muts
Gezichten
Ogen:
- Groot en expressief
- Duidelijke highlights (2-3 lichtpunten)
- Zachte wenkbrauwen
- Natuurlijke wimpers
Mond:
- Klein, simpel
- Zachte glimlach
- Expressief bij emoties
Neus:
- Klein, subtiel
- Soms alleen een schaduw
NPC Dieren
Dieren zijn semi-antropomorf:
- Rechtopstaand
- Kleding dragend
- Expressieve gezichten
- Behouden dierlijke kenmerken
| Dier | Kenmerken |
|---|---|
| Beer | Rond, groot, vriendelijk |
| Uil | Wijs, grote ogen, veren |
| Vos | Slank, slim, rode vacht |
| Konijn | Lange oren, zacht, klein |
| Eekhoorn | Pluizige staart, energiek |
Omgevingsontwerp
Boomhutten
Gebaseerd op de bestaande artwork:
Exterieur:
- Houten planken constructie
- Schuin dak met schoorsteenpijp
- Ronde EN vierkante ramen
- Veranda/balkon met reling
- Ladder of trap naar beneden
- Hangmat tussen bomen
- Rookpluim uit schoorsteen
Interieur:
- Groot rond raam (hobbit-stijl)
- Houtkachel centraal
- Ingebouwd bed/slaapnis
- Houten balken zichtbaar
- Boekenplanken, flesjes, lantaarns
- Gedroogde kruiden hangend
- Warme verlichting
Kleurenpalet Interieurs
Hout (dominant): #8B6914, #A67C52, #6B4423
Warm licht: #F5DEB3, #FFE4B5, #FFEAA7
Accenten groen: #6B8E23, #556B2F, #8FBC8F
Metaal/grijs: #708090, #5F6A6A
Bosomgeving
Bomen:
- Dikke, knoestige stammen
- Wolkachtig, gelaagd gebladerte
- Warm bruin met groene tinten
- Zichtbare textuur in schors
Vegetatie:
- Gelaagd gras (voor- en achtergrond)
- Wilde bloemen in groepjes
- Struiken met ronde vormen
- Paddenstoelen als accent
Water:
- Zacht blauw-groen
- Reflecties van omgeving
- Zachte rimpelingen
- Waterplanten aan randen
Bosdorp/Winkels
Gebaseerd op de uitgebreide winkel-assets:
Het Wolletje - wolwinkel met vos
De Meubelmaker - werkplaats met das
Natuurwinkeltje in een boom - met beer
Architectuur kenmerken:
- Winkels ingebouwd in grote bomen
- Groene mosdaken
- Houten constructies met warm bruin
- Uithangborden met winkelnamen
- Veranda's met uitstallingen
- Waslijnen met producten
- Lantaarns voor sfeerverlichting
Interieur kenmerken:
Typisch winkel-interieur met NPC
- Houten vloeren en wanden
- Grote ramen met uitzicht
- Werktuigen passend bij beroep
- Planken vol producten
- Gezellige, volle sfeer
- NPC prominent aanwezig
Kleurenpalet
Hoofdkleuren (uit assets)
| Categorie | Kleuren | Hex Codes |
|---|---|---|
| Groen (Bos) | Bosgroen, Sage, Olijf | #4A7C59, #87A96B, #6B8E23 |
| Bruin (Hout) | Warm bruin, Sepia, Kastanje | #8B4513, #A0522D, #6B4423 |
| Crème (Licht) | Warm wit, Beige, Zand | #F5F5DC, #F5DEB3, #DEB887 |
| Blauw (Water) | Zacht blauw, Grijsblauw | #87CEEB, #6B8E9F, #5F9EA0 |
| Geel (Accent) | Mosterd, Warm geel | #DAA520, #F4A460, #E6B333 |
Seizoenskleuren
Lente:
- Lichtgroen, roze bloesem, lichtblauw
Zomer:
- Diepgroen, zonnig geel, helder blauw
Herfst:
- Oranje, rood, goud, warm bruin
Winter:
- Wit, ijsblauw, donkergroen, bordeaux
Technische Specificaties
Resoluties
| Asset Type | Resolutie | Gebruik |
|---|---|---|
| Achtergronden | 1920x1080 | Full scene backgrounds |
| Karakter full | 512x512+ | Character sheets |
| Karakter sprite | 128x256 | In-game sprites |
| UI elementen | Variabel | Schaalbaar (vector-based look) |
| Icons | 64x64 | Inventory, menu's |
Bestandsformaten
- Karakters: PNG met transparante achtergrond
- Achtergronden: PNG (hoge kwaliteit) of JPG
- UI: PNG met alpha voor overlays
- Animaties: Sprite sheets of individuele frames
Rendering Stijl
De artwork heeft een handgeschilderd/geïllustreerd uiterlijk:
- Linework: Zichtbare zwarte/donkerbruine contouren
- Shading: Zachte gradiënten, geen harde cel-shading
- Textuur: Lichte papier/canvas textuur mogelijk
- Details: Hoog detailniveau in belangrijke gebieden
UI Ontwerp
Algemene UI Stijl
Passend bij de storybook-stijl:
- Randen: Hout-look of perkament
- Achtergronden: Warme, neutrale tinten
- Tekst: Leesbaar, vriendelijk lettertype
- Iconen: Handgetekende stijl
Knoppen
┌─────────────────────────┐
│ ≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈ │ ← Houten textuur
│ Button Text │
│ ≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈ │
└─────────────────────────┘
Kleuren:
- Primary: Bosgroen
#4A7C59 - Secondary: Warm bruin
#8B4513 - Accent: Mosterdgeel
#DAA520 - Disabled: Grijsbruin
#A9A9A9
Dialoog Boxes
- Perkament/papier achtergrond
- Houten frame eromheen
- Karakterportret links
- Naam in decoratief vak
- Tekst in leesbaar lettertype
Animatie Richtlijnen
Karakteranimaties
Idle:
- Subtiel ademen (borst op/neer)
- Af en toe knipperen
- Kleine haarbewegingen
Lopen:
- Vloeiend, natuurlijk
- Armen zwaaien licht mee
- Haar beweegt mee
Interactie:
- Expressieve gezichtsanimaties
- Handbewegingen
Omgevingsanimaties
- Bladeren wiegen in de wind
- Rookpluim kringelt omhoog
- Water rimpelt zachtjes
- Lantaarns flikkeren
- Vuurvliegjes 's avonds
Do's en Don'ts
Do's
- Zichtbare, organische linework
- Warme, aardse kleurenpaletten
- Gedetailleerde, gelaagde achtergronden
- Zachte, natuurlijke belichting
- Handgetekend/geïllustreerd gevoel
- Ronde ramen en organische vormen
Don'ts
- Perfecte geometrische vormen
- Felle, onnatuurlijke kleuren
- Vlakke, detailloze achtergronden
- Harde schaduwen of highlights
- Pure zwart voor contouren
- Generieke, steriele omgevingen
Asset Checklist
Beschikbare Assets - Karakters & Achtergronden
| Bestand | Type | Beschrijving |
|---|---|---|
Meisje 01.png | Karakter | Milena - casual outfit |
Meisje 02.png | Karakter | Milena - herfst outfit |
Meisje 03.png | Karakter | Milena - variatie 3 |
Meisje 04.png | Karakter | Milena - variatie 4 |
Meisje 05.png | Karakter | Milena - variatie 5 |
background_home.png | Achtergrond | Boomhut in bos met vijver |
buitenkant.jpg | Achtergrond | Boomhut exterieur close-up |
boomhut1.png | Achtergrond | Interieur - slaapkamer |
Binnenkant.png | Achtergrond | Interieur - keuken |
Boswinkels.png | Achtergrond | Bosdorp overzicht |
Beschikbare Assets - Winkels
| Bestand | Type | Beschrijving |
|---|---|---|
Winkeltjes/Het wolletje.png | Exterieur | Wolwinkel met vos |
Winkeltjes/Het wolletje binnen.png | Interieur | Wolwinkel met spinnewiel |
Winkeltjes/Het wolletje binnen met rek.png | Interieur | Wolwinkel met kledingrek |
Winkeltjes/Kleding kopen.png | UI | Shop interface |
Winkeltjes/Meubelmaker.png | Exterieur | Meubelmakerij met das |
Winkeltjes/Meubelmaker - binnen.png | Interieur | Werkplaats |
Winkeltjes/De herberg.png | Exterieur | Herberg met boerderij |
Winkeltjes/Natuurwinkeltje.png | Exterieur | Natuurwinkel met beer |
Winkeltjes/Sapjesbar.png | Exterieur | Sapjesbar met eekhoorn |
Winkeltjes/Sorbetkar.png | Exterieur | IJskar met egel |
Winkeltjes/UIl.png | Exterieur | Tante Uil's tovershop |
Winkeltjes/Uil 2.png | Exterieur | Uil's bibliotheek |
Winkeltjes/Magische boomgaard.png | Locatie | Betoverde boomgaard |
Winkeltjes/Ruilmarkt.png | Exterieur | Centrale ruilmarkt |
Winkeltjes/Ruilscherm.png | UI | Ruilhandel interface |
Nog Te Maken
- Meer NPC karakters
- Seizoensvariaties achtergronden
- Meer UI elementen (inventory, dialoog)
- Item sprites
- Animatie sprite sheets
- Effecten (regen, sneeuw, etc.)
- Winkel interieurs (overige)