diff --git a/docs/visual-assets-guide.md b/docs/visual-assets-guide.md new file mode 100644 index 0000000..c7c688e --- /dev/null +++ b/docs/visual-assets-guide.md @@ -0,0 +1,435 @@ +# 🎨 FIREFROST GAMING: Visual Assets Guide (v1.0) + +**Created:** February 8, 2026 +**Maintained By:** Frostystyle (Michael) & Gingerfury (Meg) +**Asset Location:** `/root/firefrost-master-configs/branding/` +**Status:** Production Ready + +--- + +## 1. Asset Inventory + +### Logos (branding/logos/) + +| Asset | Filename | Size | Usage | +|-------|----------|------|-------| +| **Circular Emblem** | firefrost-emblem-512.png | 512x512px (305 KB) | Favicon, social profile pics, app icons | +| **Light Logo** | firefrost-logo-light.png | Variable (831 KB) | Light backgrounds, print materials | +| **Dark Logo** | firefrost-logo-dark.png | Variable (1.3 MB) | Dark backgrounds, website header, Discord | + +### Backgrounds (branding/backgrounds/) + +| Asset | Filename | Size | Usage | +|-------|----------|------|-------| +| **Fire+Frost Collision** | fire-frost-collision.png | 1920x1080px (3.7 MB) | Website hero, social headers, wallpapers | + +### Founders (branding/founders/) + +| Asset | Filename | Size | Usage | +|-------|----------|------|-------| +| **Frostystyle & Gingerfury** | frostystyle-gingerfury.png | Variable (1.7 MB) | About Us page, team bios, promotional materials | + +--- + +## 2. Logo Usage Guidelines + +### The Circular Emblem (Primary Brand Mark) + +**Best For:** +- ✅ Website favicon (16x16, 32x32, 64x64 sizes) +- ✅ Social media profile pictures (Discord, Twitter, Instagram, TikTok) +- ✅ App icons (Android, iOS) +- ✅ Loading spinners (animated rotation) +- ✅ Watermarks on content +- ✅ Small-space branding + +**Why It Works:** +- Scales perfectly from 16px to billboard size +- No text = works at ANY size +- Instantly recognizable Fire + Frost duality +- Circular shape fits all profile pic requirements + +**Technical Specs:** +- Format: PNG with transparency +- Dimensions: 512x512px (source) +- File size: 305 KB (optimize for web to <100 KB) + +**Minimum Size:** 64px width (below this, details blur) + +--- + +### The Light Logo (For Light Backgrounds) + +**Best For:** +- ✅ Website header (if using light theme) +- ✅ Print materials (business cards, flyers, posters) +- ✅ Email signatures +- ✅ YouTube banners (if light background) +- ✅ Instagram posts on white backgrounds +- ✅ Documents and presentations + +**When NOT to Use:** +- ❌ Dark backgrounds (text won't be visible) +- ❌ Very small sizes (text becomes unreadable under 200px width) + +**Technical Specs:** +- Format: PNG with transparency +- Dimensions: Variable width, maintains aspect ratio +- File size: 831 KB (compress for web) + +**Minimum Size:** 200px width (text legibility threshold) + +--- + +### The Dark Logo (For Dark Backgrounds) + +**Best For:** +- ✅ Website header (dark theme - RECOMMENDED) +- ✅ Discord server icon/banner +- ✅ Twitch overlays and panels +- ✅ YouTube thumbnails (dark backgrounds) +- ✅ Twitter/X header image +- ✅ GitHub profile +- ✅ Social media posts on dark backgrounds + +**This is Your WORKHORSE Logo:** +- Most gaming websites use dark themes +- Most social platforms support dark mode +- Most promotional materials will use this version + +**Technical Specs:** +- Format: PNG with transparency +- Dimensions: Variable width, maintains aspect ratio +- File size: 1.3 MB (compress for web) + +**Minimum Size:** 200px width + +--- + +## 3. Background Usage Guidelines + +### Fire+Frost Collision (Epic Wallpaper) + +**Best For:** +- ✅ Website hero section (full-width background) +- ✅ Twitter/X header (1500x500px crop) +- ✅ YouTube channel banner (2560x1440px crop) +- ✅ Discord server banner +- ✅ Twitch offline screen +- ✅ Desktop wallpapers (for fans) +- ✅ Promotional materials +- ✅ Loading screens + +**Emotional Impact:** +- Left (Fire) = Passion, chaos, energy (Gingerfury/Emissary) +- Right (Frost) = Precision, order, stability (Frostystyle/Wizard) +- Center = The collision (where Fire meets Frost) + +**This Image TELLS THE FIREFROST STORY without words.** + +**Technical Specs:** +- Format: PNG +- Dimensions: 1920x1080px (Full HD) +- File size: 3.7 MB (LARGE - compress for web use) + +**Optimization Needed:** +- Target web size: <500 KB (use compression tools) +- For social media headers: Crop and resize to platform specs + +--- + +## 4. Founders Art Usage + +### Frostystyle & Gingerfury (Founder Portraits) + +**Best For:** +- ✅ About Us page hero image +- ✅ Team bios and introductions +- ✅ Social media "Meet the Team" posts +- ✅ Community announcements +- ✅ Promotional materials featuring the founders + +**Story Context:** +- **Left (Frostystyle):** The Wizard with his Manual (knowledge, infrastructure, precision) +- **Right (Gingerfury):** The Emissary with her Banhammers (community, protection, justice) + +**This art represents the partnership at the heart of Firefrost.** + +**Technical Specs:** +- Format: PNG +- Dimensions: Variable (high resolution) +- File size: 1.7 MB + +**Usage Notes:** +- Always credit as "Frostystyle & Gingerfury, Founders of Firefrost Gaming" +- Use full image when possible (don't crop just one founder) +- Consider creating individual portrait crops for separate bios + +--- + +## 5. Social Media Platform Specs + +### Favicon Sizes Needed + +**Generate from firefrost-emblem-512.png:** + +| Size | Format | Usage | +|------|--------|-------| +| 16x16 | ICO/PNG | Browser tab icon | +| 32x32 | ICO/PNG | Bookmark icon | +| 64x64 | PNG | High-DPI displays | +| 128x128 | PNG | Chrome Web Store | +| 180x180 | PNG | Apple Touch Icon (iOS) | +| 192x192 | PNG | Android Chrome | +| 512x512 | PNG | PWA icon | + +**Generate using ImageMagick or online tools (favicon.io)** + +--- + +### Social Media Profile Images + +**All platforms can use firefrost-emblem-512.png (circular)** + +| Platform | Recommended Size | Format | +|----------|------------------|--------| +| Discord | 512x512 | PNG | +| Twitter/X | 400x400 | PNG | +| Instagram | 320x320 | PNG | +| TikTok | 200x200 | PNG | +| YouTube | 800x800 | PNG | +| Facebook | 180x180 | PNG | +| Twitch | 256x256 | PNG | +| Reddit | 256x256 | PNG | + +**Pro Tip:** Upload the 512x512 version - platforms will auto-resize and crop to circle. + +--- + +### Social Media Headers/Banners + +**Use fire-frost-collision.png (crop to fit platform specs)** + +| Platform | Size | Notes | +|----------|------|-------| +| Twitter/X | 1500x500 | Crop center, focus on collision point | +| YouTube | 2560x1440 | Full width, safe area 1546x423 (center) | +| Facebook | 820x312 | Crop center | +| LinkedIn | 1584x396 | Crop center | +| Discord Server | 960x540 | 16:9 aspect ratio | +| Twitch | 1200x480 | Profile banner | + +**Cropping Strategy:** Always keep the Fire+Frost collision point in the center of the crop. + +--- + +## 6. Website Usage + +### Favicon Implementation +```html + + + + + +``` + +--- + +### Header Logo (Dark Theme) +```html + +Firefrost Gaming +``` + +**Responsive sizing:** +- Desktop: 300-400px width +- Tablet: 200-300px width +- Mobile: 150-200px width + +--- + +### Hero Background +```css +.hero-section { + background-image: url('/branding/backgrounds/fire-frost-collision.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + min-height: 600px; +} +``` + +**Optimization:** Use compressed version (<500 KB) for web. + +--- + +## 7. File Optimization Guide + +### Current File Sizes (Too Large for Web) + +| Asset | Current Size | Target Web Size | Action Needed | +|-------|--------------|-----------------|---------------| +| Emblem | 305 KB | <100 KB | Compress | +| Light Logo | 831 KB | <200 KB | Compress | +| Dark Logo | 1.3 MB | <300 KB | Compress | +| Background | 3.7 MB | <500 KB | Compress + Resize | +| Founders | 1.7 MB | <400 KB | Compress | + +--- + +### Compression Tools + +**Online (No Installation):** +- TinyPNG (https://tinypng.com) - Best for PNG compression +- Squoosh (https://squoosh.app) - Google's image optimizer +- Compressor.io - Alternative + +**Command Line (ImageMagick):** +```bash +# Install ImageMagick +apt install imagemagick + +# Compress emblem +convert firefrost-emblem-512.png -quality 85 -strip firefrost-emblem-512-optimized.png + +# Resize and compress background for web +convert fire-frost-collision.png -resize 1920x1080 -quality 80 -strip fire-frost-collision-web.png +``` + +--- + +### Recommended Web Versions + +**Create these optimized versions for web use:** +```bash +# Emblem (web-optimized) +convert firefrost-emblem-512.png -quality 85 -strip firefrost-emblem-web.png + +# Dark logo (web-optimized) +convert firefrost-logo-dark.png -quality 80 -strip firefrost-logo-dark-web.png + +# Background (web-optimized and resized) +convert fire-frost-collision.png -resize 1920x1080 -quality 75 -strip fire-frost-collision-web.png +``` + +**Save optimized versions in:** `branding/web-optimized/` + +--- + +## 8. Logo Do's and Don'ts + +### ✅ DO: + +- Use the circular emblem for small spaces (favicons, profile pics) +- Use the dark logo for most web applications +- Maintain aspect ratio when resizing +- Use high-resolution sources for print +- Compress images for web to improve load times +- Keep clear space around logos (20px minimum) +- Use PNG format with transparency + +### ❌ DON'T: + +- Don't rotate or skew the logos +- Don't change the color balance or gradient +- Don't add effects (drop shadows, outer glows) not in the original +- Don't place logos on busy backgrounds (reduces readability) +- Don't use low-resolution versions for large displays +- Don't crop the circular emblem into a square +- Don't stretch or distort logos + +--- + +## 9. Brand Consistency Checklist + +**Before publishing ANY branded content, verify:** + +- [ ] Using correct logo variant (emblem vs full logo) +- [ ] Logo is high-resolution (not pixelated) +- [ ] File size optimized for web (<500 KB ideally) +- [ ] Colors match Firefrost palette (no color shifts) +- [ ] Aspect ratio maintained (no stretching) +- [ ] Clear space around logo (not cramped) +- [ ] Readable at intended display size +- [ ] Background doesn't clash with logo + +--- + +## 10. Quick Reference + +### When to Use Which Logo? + +**Need a small icon?** → Circular Emblem (firefrost-emblem-512.png) +**Dark background?** → Dark Logo (firefrost-logo-dark.png) +**Light background?** → Light Logo (firefrost-logo-light.png) +**Epic background?** → Fire+Frost Collision (fire-frost-collision.png) +**About Us page?** → Founders Art (frostystyle-gingerfury.png) + +--- + +### File Locations (Git Repository) +``` +/root/firefrost-master-configs/branding/ +├── logos/ +│ ├── firefrost-emblem-512.png +│ ├── firefrost-logo-light.png +│ └── firefrost-logo-dark.png +├── backgrounds/ +│ └── fire-frost-collision.png +└── founders/ + └── frostystyle-gingerfury.png +``` + +**Git Repository:** https://git.firefrostgaming.com/mkrause612/firefrost-phase0-configs + +--- + +## 11. Future Asset Needs + +**To Create Later:** + +- [ ] Favicon.ico (multi-size ICO file) +- [ ] Apple touch icons (180x180) +- [ ] Android Chrome icons (192x192, 512x512) +- [ ] Optimized web versions (compressed) +- [ ] Social media cropped variants +- [ ] Individual founder portrait crops +- [ ] Animated logo (GIF/video for loading screens) +- [ ] Monochrome logo variants (pure black/white) + +--- + +## 12. Legal & Ownership + +**Asset Ownership:** +- All visual assets are property of Firefrost Gaming +- Created using AI generation (Gemini AI) +- Free to use for all Firefrost Gaming purposes (website, social, promotional) + +**Usage Rights:** +- ✅ Internal use (website, social media, marketing) +- ✅ Community use (wallpapers, fan content with credit) +- ❌ Commercial resale or redistribution +- ❌ Modification for use by other brands + +**Credit Line (Optional):** +> "Firefrost Gaming brand assets created with Gemini AI" + +--- + +## Revision History + +| Version | Date | Changes | +|---------|------|---------| +| **1.0** | 2026-02-08 | Initial visual assets guide. Documented 5 brand assets: emblem, light/dark logos, collision background, founders art. | + +--- + +**END OF VISUAL ASSETS GUIDE** + +**Maintained by The Wizard (Frostystyle) & The Emissary (Gingerfury)** +**Firefrost Gaming: Fire + Frost in Perfect Balance** 🔥❄️