Skip to content

YouTube thumbnail generator - Build 1280×720 thumbnails with centered/left/split layouts, auto-fit titles, perfectly centered tag pill, palette presets & color pickers, and one-click Update + Export (SVG/PNG)

License

Notifications You must be signed in to change notification settings

ttelang/yt-thumbnail-maker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

YouTube Thumbnail Generator

Create stunning, professional YouTube thumbnails instantly! This advanced tool generates 1280×720 thumbnails with multiple layouts, real-time preview, extensive customization options, and seamless export functionality.

✨ Key Features

🎨 Advanced Layout System

  • 4 Distinct Layouts: Left accent bar, centered title, bottom strip, and split layouts
  • Real-time Preview: Instant updates as you type - no update button needed
  • Mobile Preview: Toggle to see how thumbnails appear on mobile devices
  • Responsive Design: Optimized interface with colors panel on the right

🖼️ Visual Elements & Customization

  • Background Images: Upload custom backgrounds with opacity control
  • Visual Elements: Add arrows, stars, checkmarks, exclamation marks, fire, and lightning
  • Element Sizing: Adjustable visual element sizes with real-time preview
  • Text Visibility: Multiple options including shadows and background bands

🎯 Professional Typography

  • Dynamic Font Sizing: Auto-adjusting font sizes based on content length
  • Text Rotation: Tilt titles and subtitles at angles from -15° to +15° for dynamic visual impact
  • Proportional Scaling: Subtitle scales proportionally with title font size
  • Extended Pill Text: Support for up to 64-character category tags with smart sizing
  • Character Counters: Real-time feedback with optimal length indicators

🌈 Comprehensive Color System

  • 22+ Color Presets: Including emotional triggers (Urgent, Shock, Warning, Success, Viral, Mystery)
  • Unique Font Colors: Each preset features distinctive typography colors for maximum impact
  • High Contrast Gradients: Dramatically different background start/end colors
  • Custom Color Pickers: Fine-tune any color element manually

⌨️ Keyboard Shortcuts

  • U - Update preview (legacy - now auto-updates)
  • E - Export SVG
  • [ ] - Adjust font size
  • < > - Adjust text rotation angle
  • G - Toggle guides
  • 1-6 - Apply preset colors
  • Ctrl/Cmd+S - Export PNG

📤 Export Options

  • SVG Export: Vector format for scalability
  • PNG Export: High-quality raster format
  • Consistent Output: Fixed export issues ensuring preview matches output

🚀 YouTube Best Practices Built-in

  • Eye-catching Elements: Built-in visual drama elements
  • High Contrast Design: Ensures visibility across all devices
  • Emotional Triggers: Color presets designed to evoke specific emotions
  • Optimal Text Length: Character limits based on YouTube best practices
  • Professional Layouts: Layouts designed for maximum click-through rates

💡 Usage

  1. Enter Content: Add your title, subtitle, tag, and brand name
  2. Choose Layout: Select from 4 professional layouts (A, B, C, D)
  3. Pick Colors: Choose from 22+ presets or customize manually
  4. Add Elements: Include visual elements like arrows, stars, or fire
  5. Upload Background: Optional custom background image with opacity control
  6. Adjust Settings: Fine-tune font sizes, text rotation, element sizes, and visibility options
  7. Export: Download as SVG or PNG with keyboard shortcuts

🛠️ Technical Details

  • Resolution: 1280×720 (YouTube standard)
  • Format Support: SVG (vector) and PNG (raster) export
  • Browser Compatibility: Modern browsers (Chrome, Firefox, Edge, Safari)
  • File Structure: Clean separation with external CSS and JavaScript
  • Responsive: Mobile-friendly interface

📱 Interface Layout

  • Left Panel: Content inputs, layout selection, and export controls
  • Center: Real-time thumbnail preview with guides toggle
  • Right Panel: Complete color system with presets and custom pickers

🎨 Color Presets

Standard Themes: Cool, Indigo, Cyan, Teal, Rose, Amber, Purple, Sunset, Emerald, Crimson, Ocean, Forest, Neon, Gold, Midnight, Volcano

Emotional Triggers: Urgent, Shock, Warning, Success, Viral, Mystery

🔧 Requirements

  • Modern web browser with HTML5 Canvas support
  • JavaScript enabled
  • No installation or signup required

📄 License

This project is licensed under the MIT License. See LICENSE for details.


Perfect for: YouTubers, content creators, marketers, designers, and anyone looking to create professional thumbnails quickly and easily.

About

YouTube thumbnail generator - Build 1280×720 thumbnails with centered/left/split layouts, auto-fit titles, perfectly centered tag pill, palette presets & color pickers, and one-click Update + Export (SVG/PNG)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published