🎨 Custom Illustrations Guide

Creating educational, scientific, and decorative illustrations for Mushroom Knowledge Hub

🎯 Illustration Philosophy

Custom illustrations bridge the gap between photography and information design. They can:

  • 🔬 Show internal structures invisible in photos (spore production, mycelium networks)
  • 📚 Simplify complex concepts (life cycles, chemical processes)
  • 🎓 Provide stylized educational content that's easier to understand than photos
  • ✨ Add visual interest and brand personality to content
  • 🌍 Show ecological relationships and environmental interactions

🖌️ Illustration Styles

🔬 Scientific/Botanical Style

Characteristics:

  • Highly detailed, accurate
  • Cross-sections and cut-aways
  • Labels and annotations
  • Neutral backgrounds
  • Realistic shading

Use For: Species identification, anatomy guides, spore prints, microscopy illustrations

✏️ Line Art / Vector Style

Characteristics:

  • Clean, scalable vectors
  • Simplified shapes
  • Flat or minimal shading
  • Icons and symbols
  • 2-4 colors maximum

Use For: Icons, UI elements, simple diagrams, infographic components

🌿 Naturalistic Illustration

Characteristics:

  • Painterly, artistic
  • Watercolor or gouache style
  • Textured, organic feel
  • Environmental context
  • Warm, inviting aesthetic

Use For: Headers, landing pages, lifestyle content, welcoming imagery

📊 Diagrammatic Style

Characteristics:

  • Geometric, structured
  • Clear information hierarchy
  • Arrows, flows, connections
  • Labeled components
  • Process-oriented

Use For: Life cycles, growing processes, chemical pathways, decision trees

🎨 Color Palette for Illustrations

Category Colors Usage
Primary (Browns/Tans) #5C4A41, #8B7968, #B8A899, #D9CFC1 Mushroom subjects, main elements
Secondary (Greens) #2D5016, #4A7C59, #7BA073, #C8D5B9 Natural environment, growth concepts
Accent (Blues) #2C5F77, #4A90A4, #89B5C5, #E8F1F5 Water, sky, scientific/educational content
Highlights (Purples) #6C3483, #9B59B6, #BB8FCE, #F4ECF7 Psilocybin-related, spiritual content (sparingly)
Neutrals #3A3F47, #A0A8B5, #D4D9E0, #F5F7FA Backgrounds, shadows, text annotations
🎨 Color Guidelines:
  • ✅ Use brand color palette for consistency
  • ✅ Limit to 3-5 colors per illustration
  • ✅ Ensure WCAG AA contrast for any text
  • ✅ Use natural, earthy tones as foundation
  • ❌ Avoid neon or fluorescent colors
  • ❌ Don't use pure black (#000000)

🛠️ Tools & Software

Vector Illustration

Tool Best For Format Cost
Adobe Illustrator Professional vector work, complex diagrams AI, SVG, EPS Subscription
Affinity Designer Cost-effective alternative, great for icons SVG, PDF, EPS One-time
Inkscape Free option, suitable for simple diagrams SVG Free
Figma Web-based, great for collaboration SVG, PNG Free/Paid

Raster/Painterly Illustration

Tool Best For Format Cost
Procreate iPad illustration, naturalistic style PSD, PNG One-time
Adobe Photoshop Professional raster work, textures PSD, PNG, TIFF Subscription
Clip Studio Paint Great brushes, illustration-focused PSD, PNG Subscription/One-time
Krita Free, full-featured digital painting KRA, PNG, PSD Free

📐 Technical Specifications

Vector Illustrations

  • Format: SVG (primary), PDF (backup)
  • Artboard Size: 1000x1000px minimum
  • Export: "Presentation Attributes" for SVG, optimized
  • Stroke Width: Minimum 2px for web visibility
  • File Size: Target <50 KB for SVG
  • Compression: SVGO tool for optimization

Raster Illustrations

  • Resolution: 300 DPI for source, 72-96 DPI for web
  • Size: 2000-4000px wide (working file)
  • Format: PSD/Procreate (source), PNG (web export)
  • Color Mode: RGB
  • Layers: Keep organized, named layers
  • Export: PNG-24 with transparency or JPEG (no transparency)

🎓 Illustration Content Types

1. Mushroom Anatomy Illustrations

Cross-Section Diagram

Labeled illustration showing: Cap, Gills, Annulus, Stipe, Mycelium, Substrate

Include: Scientific labels, scale indicator, color-coded parts

2. Life Cycle Illustrations

  • Spore germination → Mycelium growth → Primordia → Fruiting body → Spore release
  • Circular or linear flow diagrams
  • Time indicators (days/weeks)
  • Environmental conditions at each stage

3. Identification Comparison Charts

  • Side-by-side illustrations of similar species
  • Key differences highlighted
  • Color variations shown
  • Size comparisons with scale

4. Growing Process Diagrams

  • Step-by-step cultivation methods (PF Tek, Monotub)
  • Equipment illustrations
  • Sterile technique demonstrations
  • Problem identification (contamination types)

5. Chemical/Biological Processes

  • Psilocybin molecular structure
  • Metabolic pathways
  • Neurotransmitter interactions
  • Simplified for educational purposes

✨ Best Practices

🎨 Illustration Checklist

Pre-Production:
  • ✅ Define illustration purpose and target audience
  • ✅ Research scientific accuracy requirements
  • ✅ Sketch rough concepts before digital work
  • ✅ Get stakeholder approval on concept
Production:
  • ✅ Use brand color palette
  • ✅ Maintain consistent style across series
  • ✅ Work at high resolution, export optimized
  • ✅ Add labels with legible fonts (min 12px)
  • ✅ Include scale references where relevant
  • ✅ Organize layers/groups logically
Post-Production:
  • ✅ Optimize file size (SVGO for vectors)
  • ✅ Verify accuracy with subject matter expert
  • ✅ Test on multiple devices/browsers
  • ✅ Provide alt text description
  • ✅ Archive source files with version control

📝 Style Guide Standards

Typography in Illustrations

  • Labels: Inter or sans-serif, 12-16px minimum
  • Headers: 20-32px, bold weight
  • Body/Annotations: 14-18px, regular weight
  • Color: Dark gray (#3A3F47) on light, light gray (#F5F7FA) on dark

Line Weights

  • Detail Lines: 1-2px
  • Main Outlines: 3-4px
  • Emphasis/Borders: 5-6px
  • Arrows: 2-3px with 15-20px heads

Consistency Requirements

  • Same illustration style within each article/section
  • Consistent color meanings (e.g., green = growth phase always)
  • Uniform labeling approach
  • Similar level of detail across series

🚀 Implementation

SVG Embedding Example

<figure class="illustration">
    <img src="mushroom-lifecycle.svg" 
         alt="Diagram showing 5 stages of mushroom lifecycle from spore to fruiting body" 
         loading="lazy">
    <figcaption>Mushroom Life Cycle</figcaption>
</figure>

Responsive Behavior

  • SVG scales perfectly (use for all resolutions)
  • Test text legibility at mobile sizes (min 320px)
  • Consider simplifying complex diagrams for mobile
  • Provide zoom/expand option for detailed illustrations

📚 Resources & References

Scientific Illustration References

  • 📖 Guild Handbook of Scientific Illustration
  • 🌐 Scientific Illustration Blog (scientificillustration.com)
  • 🎓 GNSI (Guild of Natural Science Illustrators)

Mycology Illustration Examples

  • 📚 Historical: Beatrix Potter's mycological illustrations
  • 📘 Modern: Mushrooms of the Pacific Northwest field guides
  • 🖼️ Online: MycoMap, iNaturalist illustration guides