65 lines
3.6 KiB
Markdown
65 lines
3.6 KiB
Markdown
# Stickers
|
||
|
||
Drop sticker images into this folder. They'll be picked up automatically by the editor's Stickers tab on the next page load — there's no manifest to update and no constants file to edit.
|
||
|
||
## Filename convention
|
||
|
||
```
|
||
<category>__<sticker_name>.<ext>
|
||
```
|
||
|
||
The **category** comes before the double underscore. The **sticker name** comes after, with single underscores separating words.
|
||
|
||
A few examples:
|
||
|
||
| Filename | Category | Display name |
|
||
| -------------------------------- | -------- | ----------------- |
|
||
| `hearts__pink_heart.png` | Hearts | Pink Heart |
|
||
| `hearts__beating_heart.png` | Hearts | Beating Heart |
|
||
| `paws__small_paw_print.png` | Paws | Small Paw Print |
|
||
| `bones__dog_bone.png` | Bones | Dog Bone |
|
||
| `pets__golden_retriever.png` | Pets | Golden Retriever |
|
||
| `stars__sparkle.png` | Stars | Sparkle |
|
||
|
||
The category and each word in the sticker name are title-cased when displayed (`pink_heart` → `Pink Heart`). Lowercase your filenames; capitalization is added automatically.
|
||
|
||
## Supported formats
|
||
|
||
- `.png` (recommended — transparency supported)
|
||
- `.webp` (transparency supported)
|
||
- `.jpg` / `.jpeg`
|
||
- `.svg`
|
||
|
||
PNG with transparency is the best choice for print-quality stickers. JPEG is fine for opaque art but doesn't blend onto colored shirts as cleanly.
|
||
|
||
## Sizing
|
||
|
||
There's no fixed size requirement. The editor places each sticker at 80×80 design units on add (the user can resize from there), and the print export renders the canvas at 4500×4500 pixels — so the sticker is scaled to roughly 1200×1200 px in the final print.
|
||
|
||
That math has consequences for source image size:
|
||
|
||
- **Small sources (under ~100px)** scale up heavily for print. A 47×47 PNG, for example, is upscaled ~25× to reach print resolution, which produces visible pixel-art / bitmap artifacts. If you *want* that look (deliberate retro / pixel sprites), it's fine. If you want crisp print output, source images should be larger.
|
||
- **For crisp print output**, aim for at least **600×600 px** sources (matches the print-scale target with room to spare). 1024×1024 is comfortable headroom; beyond ~2048×2048 you're wasting bandwidth without any visible gain.
|
||
- **Vector (SVG) sources** sidestep the issue entirely — they scale cleanly to any size. Recommended where the artwork allows it.
|
||
|
||
The editor preserves aspect ratio on add (the sticker scales to fit an 80×80 box, not stretched to fill it).
|
||
|
||
## Categories
|
||
|
||
Categories are derived from filenames — there's no fixed list. Adding a file with a new category prefix automatically adds the category pill to the Stickers tab. Removing the last file in a category removes the pill.
|
||
|
||
If you want a specific display order for categories, prefix them with a digit (e.g. `1-hearts__pink.png`, `2-stars__sparkle.png`); the leading digit + dash is stripped from the display name but used for sorting. Without prefixes, categories are listed alphabetically.
|
||
|
||
## A note on file size
|
||
|
||
Images here are bundled into the Vite `public/` directory and served as static assets. They are NOT processed by the build, so file size translates 1:1 to network cost. If your source images are heavy, run them through `pngquant` or `cwebp` before dropping them in:
|
||
|
||
```sh
|
||
pngquant --quality 75-90 --strip --output optimized.png input.png
|
||
cwebp -q 85 input.png -o output.webp
|
||
```
|
||
|
||
## Lazy loading
|
||
|
||
Sticker thumbnails use `<img loading="lazy">`, so only the stickers visible (or near-visible) in the panel are fetched. A library of 200+ stickers won't block the initial page load.
|