Add 2a. 2D Visual Style and Palette
parent
df7401625d
commit
3fb4f812df
1 changed files with 213 additions and 0 deletions
213
2a.-2D-Visual-Style-and-Palette.md
Normal file
213
2a.-2D-Visual-Style-and-Palette.md
Normal file
|
|
@ -0,0 +1,213 @@
|
||||||
|
# 2D Visual Style and Palette
|
||||||
|
|
||||||
|
NETFISHING uses warm, palette-limited, pixel-style 2D art that complements its chunky low-poly 3D world.
|
||||||
|
|
||||||
|
The art does not need to follow a strict historical console limitation. It should still look deliberately constructed at the pixel level rather than like smooth high-resolution art that was reduced afterward.
|
||||||
|
|
||||||
|
## Core visual qualities
|
||||||
|
|
||||||
|
Assets should generally use:
|
||||||
|
|
||||||
|
- Limited color counts
|
||||||
|
- Clear blocky silhouettes
|
||||||
|
- Intentional pixel clusters
|
||||||
|
- Minimal antialiasing
|
||||||
|
- Simple shadow shapes
|
||||||
|
- Small selective highlights
|
||||||
|
- Warm neutral interface colors
|
||||||
|
- Muted environmental colors
|
||||||
|
- Brighter accents for interactive or collectible elements
|
||||||
|
|
||||||
|
Avoid:
|
||||||
|
|
||||||
|
- Smooth vector-like antialiasing in pixel assets
|
||||||
|
- Soft airbrush shadows
|
||||||
|
- Large blurred highlights
|
||||||
|
- Heavy texture noise
|
||||||
|
- Photorealistic detail
|
||||||
|
- Excessive gradients
|
||||||
|
- One-pixel noise scattered without purpose
|
||||||
|
- Colors that blend into surrounding panels or terrain
|
||||||
|
|
||||||
|
## Shared palette
|
||||||
|
|
||||||
|
The following colors are a starting reference rather than an absolute restriction.
|
||||||
|
|
||||||
|
### Light neutrals
|
||||||
|
|
||||||
|
| Name | Hex |
|
||||||
|
|---|---|
|
||||||
|
| Cream | `#F3E3C5` |
|
||||||
|
| Pale panel | `#F8E8CB` |
|
||||||
|
| Warm highlight | `#FFE8C2` |
|
||||||
|
| Soft sand | `#D7A35F` |
|
||||||
|
|
||||||
|
### Browns and earth
|
||||||
|
|
||||||
|
| Name | Hex |
|
||||||
|
|---|---|
|
||||||
|
| Warm tan | `#D5AA72` |
|
||||||
|
| Caramel | `#B77A2E` |
|
||||||
|
| Dock wood | `#8A4F23` |
|
||||||
|
| Dark timber | `#4E2816` |
|
||||||
|
| Deep soil | `#6B2D1A` |
|
||||||
|
|
||||||
|
### Greens
|
||||||
|
|
||||||
|
| Name | Hex |
|
||||||
|
|---|---|
|
||||||
|
| Olive grass | `#A3A62A` |
|
||||||
|
| Moss green | `#6F7D19` |
|
||||||
|
| Dark foliage | `#40552C` |
|
||||||
|
| Muted UI green | `#5D7A61` |
|
||||||
|
| Deep UI green | `#354C39` |
|
||||||
|
|
||||||
|
### Water and cool accents
|
||||||
|
|
||||||
|
| Name | Hex |
|
||||||
|
|---|---|
|
||||||
|
| Seafoam | `#8FD3C4` |
|
||||||
|
| Turquoise | `#2F9E9A` |
|
||||||
|
| Deep teal | `#176F73` |
|
||||||
|
| Navy outline | `#0D1B2A` |
|
||||||
|
|
||||||
|
### Bright accents
|
||||||
|
|
||||||
|
| Name | Hex |
|
||||||
|
|---|---|
|
||||||
|
| Fox orange | `#D94908` |
|
||||||
|
| Playful coral | `#F04F73` |
|
||||||
|
| Strong red | `#C9003D` |
|
||||||
|
| Golden yellow | `#F0A000` |
|
||||||
|
| Purple accent | `#55305F` |
|
||||||
|
|
||||||
|
## Color hierarchy
|
||||||
|
|
||||||
|
Use calmer colors for:
|
||||||
|
|
||||||
|
- Large UI panels
|
||||||
|
- Terrain
|
||||||
|
- Background decoration
|
||||||
|
- Common item frames
|
||||||
|
- Structural elements
|
||||||
|
|
||||||
|
Use brighter colors for:
|
||||||
|
|
||||||
|
- Characters
|
||||||
|
- Rare fish
|
||||||
|
- Important items
|
||||||
|
- Selected controls
|
||||||
|
- Notifications
|
||||||
|
- Bobbers
|
||||||
|
- Interaction icons
|
||||||
|
- Shop highlights
|
||||||
|
- Rarity indicators
|
||||||
|
|
||||||
|
Do not make every object equally saturated.
|
||||||
|
|
||||||
|
## Shading
|
||||||
|
|
||||||
|
Preferred shading is restrained.
|
||||||
|
|
||||||
|
Most assets should use:
|
||||||
|
|
||||||
|
- Base color
|
||||||
|
- One shadow color
|
||||||
|
- Optional highlight color
|
||||||
|
- Optional outline or edge color
|
||||||
|
|
||||||
|
Small icons may use only two or three colors.
|
||||||
|
|
||||||
|
Larger fish illustrations may use several colors where species markings require them, but should still avoid smooth painterly rendering.
|
||||||
|
|
||||||
|
## Highlights
|
||||||
|
|
||||||
|
Highlights should be:
|
||||||
|
|
||||||
|
- Small
|
||||||
|
- Purposeful
|
||||||
|
- Positioned to describe form
|
||||||
|
- Drawn as clean pixel clusters
|
||||||
|
- Limited to important surfaces
|
||||||
|
|
||||||
|
The creature references use small cream or white highlight marks rather than broad glossy gradients.
|
||||||
|
|
||||||
|
## Outline policy
|
||||||
|
|
||||||
|
NETFISHING does not require a heavy full outline around every asset.
|
||||||
|
|
||||||
|
Use one of these approaches depending on the asset:
|
||||||
|
|
||||||
|
- Selective dark outline on visually important edges
|
||||||
|
- Dark local color at the shadow-facing edge
|
||||||
|
- No outline where strong color contrast is sufficient
|
||||||
|
- Full outline for tiny icons that otherwise lose readability
|
||||||
|
|
||||||
|
Avoid inconsistent one-pixel outlines that appear and disappear accidentally.
|
||||||
|
|
||||||
|
Dark navy, brown, dark teal, or dark purple may be more appropriate than pure black.
|
||||||
|
|
||||||
|
## Pixel clusters
|
||||||
|
|
||||||
|
Good pixel art uses connected, intentional shapes.
|
||||||
|
|
||||||
|
Prefer:
|
||||||
|
|
||||||
|
- Larger coherent clusters
|
||||||
|
- Clean diagonal rhythms
|
||||||
|
- Deliberate stair-step edges
|
||||||
|
- Controlled texture patterns
|
||||||
|
|
||||||
|
Avoid:
|
||||||
|
|
||||||
|
- Random single-pixel noise
|
||||||
|
- Dithering everywhere
|
||||||
|
- Unnecessary checkerboarding
|
||||||
|
- Jagged shapes caused only by poor resizing
|
||||||
|
|
||||||
|
## Background awareness
|
||||||
|
|
||||||
|
Contributors should know the likely background.
|
||||||
|
|
||||||
|
Common backgrounds include:
|
||||||
|
|
||||||
|
- Warm cream UI tiles
|
||||||
|
- Tan panels
|
||||||
|
- Olive grass
|
||||||
|
- Brown soil
|
||||||
|
- Teal water
|
||||||
|
- Dark green tabs
|
||||||
|
|
||||||
|
An icon that looks good on white may disappear on cream or tan.
|
||||||
|
|
||||||
|
Include an in-context screenshot with every submission.
|
||||||
|
|
||||||
|
## UI color language
|
||||||
|
|
||||||
|
Suggested UI roles:
|
||||||
|
|
||||||
|
- Main panel: warm cream
|
||||||
|
- Inner panel: sandy tan
|
||||||
|
- Primary tab: muted or deep green
|
||||||
|
- Text: dark brown
|
||||||
|
- Secondary text: caramel or muted tan
|
||||||
|
- Selection: green outline or stronger contrast
|
||||||
|
- Warning: coral or orange
|
||||||
|
- Disabled: low-contrast cream, gray, or muted tan
|
||||||
|
|
||||||
|
## Environment texture language
|
||||||
|
|
||||||
|
Environment textures should use:
|
||||||
|
|
||||||
|
- Large angular patches
|
||||||
|
- Low-frequency patterning
|
||||||
|
- Limited palettes
|
||||||
|
- Subtle value variation
|
||||||
|
- Clearly repeating but not distracting motifs
|
||||||
|
- No realistic photographic surface detail
|
||||||
|
|
||||||
|
The grass reference uses overlapping angular shapes in nearby olive values.
|
||||||
|
|
||||||
|
The soil and cliff reference uses dark brown and reddish shapes with sparse marks and denser texture near the base.
|
||||||
|
|
||||||
|
The texture should support the 3D form rather than overpower it.
|
||||||
Loading…
Add table
Add a link
Reference in a new issue