Guide Guru
A guides, overlays, and ruler generation app for Canva
Guide Guru is a comprehensive Canva app designed for precision-focused designers who demand exact alignment and professional layout standards. This powerful tool enhances your Canva design workflow with broadcast-quality rulers, grids, and smart guides, enabling perfect snapping and alignment while remaining completely invisible in your final exports. Whether you're creating social media content, video productions, or technical drawings, Guide Master provides the professional-grade layout assistance that elevates your designs from good to exceptional.
​
​
Intro and tutorial video for Guide Guru
Directory
Key Features
​​​
1. Interactive Rulers
​
Rulers
-
Purpose: Provide precise measurement tools for exact positioning and alignment in design layouts
-
How it works: Displays horizontal and vertical ruler scales along canvas edges with customizable measurement units (pixels, inches, centimeters) and real-time positioning feedback
-
User Experience: Designers can instantly see exact measurements while positioning elements, eliminating guesswork and ensuring pixel-perfect layouts
​
Smart Guides
-
Purpose: Enable snapping and alignment functionality without cluttering final exports
-
How it works: Generates vector-quality guidelines that provide magnetic snapping for design elements but remain invisible in exported files
-
User Experience: Elements automatically snap to guides for perfect alignment, while guides disappear during export to keep designs clean
​
Incremental Markers
-
Purpose: Offer multiple precision levels for different design requirements
-
How it works: Displays major increments (50px), minor increments (25px), and micro increments (10px) as visual markers along rulers
-
User Experience: Designers can choose an appropriate precision level - 50px for rough layouts, 10px for fine details, creating efficient workflows
​​
Custom Guide Creation
-
Purpose: Allow designers to set exact positioning standards for consistent layouts
-
How it works: Click-to-place or numeric input system for creating guides at specific pixel positions with instant visual feedback
-
User Experience: Set up layout grids once, then use throughout the project for consistent spacing and alignment across multiple designs​
​
2. Comprehensive Grid Systems
Composition Grids
-
Purpose: Apply proven artistic composition principles to improve visual hierarchy and balance
-
How it works: Overlays mathematical composition frameworks (rule of thirds, golden ratio, diagonal guides) as semi-transparent grid systems
-
User Experience: Designers can position key elements along compositionally strong points, creating more engaging and visually appealing layouts.​
​
Perspective Drawing
-
Purpose: Enable accurate 3D perspective illustrations and technical drawings within Canva
-
How it works: Generates authentic perspective grid systems with proper vanishing points and projection angles using SVG mathematics
-
User Experience: Artists can create professional isometric illustrations and perspective drawings with confidence, knowing proportions are mathematically correct
​
Web Layout Grids
-
Purpose: Ensure responsive design compatibility and proper spacing for digital interfaces
-
How it works: Provides standard web layout grids (12-column, 16-column, custom) with proper gutters and breakpoints
-
User Experience: Web designers can create layouts that translate perfectly to responsive websites, maintaining proper spacing across devices
​
Technical Drawing
-
Purpose: Support professional technical illustration and architectural drawing workflows
-
How it works: Authentic isometric and dimetric projection grids with precise 30°, 60°, and 120° angles
-
User Experience: Technical illustrators can create accurate 3D representations of products, buildings, and mechanical components
​​
2. Social Media Template
Instagram Templates
-
Purpose: Optimize content for Instagram's specific dimensions and UI safe areas
-
How it works: Provides templates with exact pixel dimensions (1080x1080, 1080x1920) plus UI-safe zones that avoid platform interface overlap
-
User Experience: Content creators can design with confidence knowing text and key elements won't be hidden by Instagram's interface elements
​
YouTube Templates
-
Purpose: Create platform-optimized content that displays perfectly across all YouTube viewing contexts
-
How it works: Templates include thumbnail safe areas (1280x720), channel banner dimensions, and YouTube Shorts specifications
-
User Experience: YouTubers can create thumbnails and banners that look great on desktop, mobile, and TV viewing without cropping issues
​
Multi-Platform Support
-
Purpose: Streamline content creation across multiple social media platforms
-
How it works: Pre-configured templates for LinkedIn, Twitter/X, TikTok, Facebook, Pinterest with platform-specific safe zones
-
User Experience: Social media managers can quickly adapt designs for different platforms while maintaining visual consistency and optimal presentation
​
2. Broadcast Video Standards
Safe Area Overlays
-
Purpose: Ensure content displays properly across all television and video platforms
-
How it works: Displays industry-standard action-safe (95%) and title-safe (90%) zones as overlay guides
-
User Experience: Video editors can confidently place content knowing it will display correctly on all viewing devices, from mobile phones to large TVs
​
Video Format Support
-
Purpose: Support all major video aspect ratios and emerging format standards
-
How it works: Provides templates for 16:9 (standard), 4:3 (legacy), 9:16 (mobile), 4:5 (social), 1:1 (square), and cinema ratios
-
User Experience: Video creators can quickly switch between formats while maintaining proper composition and safe areas
​
Lower Third Zones
-
Purpose: Provide designated areas for graphics and text overlays in video production
-
How it works: Clearly marked left and right lower third safe areas with proper sizing for broadcast standards
-
User Experience: Video producers can design lower thirds that fit perfectly without interfering with main content or platform UI elements
​
2. Advanced Customization
Individual Color Control
-
Purpose: Allow precise brand matching and visual hierarchy through color differentiation
-
How it works: Separate color pickers for rulers, grids, guides, and overlays with real-time preview
-
User Experience: Designers can match brand colors exactly and use different colors to distinguish between guide types for better organization
​
Thickness Settings
-
Purpose: Optimize guide visibility for different canvas sizes and design complexity
-
How it works: Precise line weight control from 0.5px (subtle) to 5px (prominent) with live preview
-
User Experience: Guides remain visible but non-intrusive, with thickness automatically scaling to maintain optimal visibility
​
Opacity Control
-
Purpose: Balance guide visibility with design content visibility
-
How it works: Fine opacity adjustment from 10% (barely visible) to 100% (fully opaque) with real-time feedback
-
User Experience: Designers can make guides subtle enough to not interfere with design evaluation while keeping them visible enough for alignment
​
2. Export Options
-
Purpose: Provide flexible output options for different workflow requirements
-
How it works: PNG downloads for raster use, SVG for vector workflows, plus direct Canva media library integration
-
User Experience: Seamless integration with existing workflows - guides can be saved, shared, or reused across projects without leaving Canva
​
​​​
Canvas Detection System
-
Automatic Recognition: Detects canvas dimensions from Canva's interface
-
Multi-Method Detection: URL parsing, document scanning, and DOM analysis
-
Manual Override: Custom canvas size input for specific requirements
-
Orientation Intelligence: Automatic landscape/portrait/square detection
Guide Generation Engine
-
Vector-Quality Rendering: SVG-based guides for crisp, scalable lines
-
Smart Caching: Performance optimization with 30-second guide caching
-
File-Based Upload: Enhanced Canva compatibility with blob-based uploads
-
Non-Exportable Guides: Alignment assistance without appearing in final exports
Template Management
-
50+ Pre-configured Templates: Industry-standard canvas sizes and ratios
-
Quick Selection: Pop-up template browser with visual previews
-
Aspect Ratio Matching: Automatic template suggestion based on current canvas
-
Custom Template Storage: Save frequently used custom dimensions
Preview System
-
Real-Time Rendering: Instant visual feedback with HTML5 Canvas
-
Scale-Accurate Display: Preview matches exact guide proportions
-
Performance Monitoring: Live generation time tracking and cache efficiency
-
Status Dashboard: Comprehensive app state and performance metrics
Core Components
​​
Canva Platform
-
App Registration: Multi-method registration system (standard, legacy, direct)
-
Content Upload API: File-based asset upload with dual fallback methods
-
Design Interaction: Automatic guide placement at canvas origin
-
Error Handling: Comprehensive error detection and recovery systems
Browser Compatibility
-
Modern Browsers: Support for latest Chrome works best
-
Hardware Acceleration: GPU-accelerated shadow rendering when available
-
Progressive Enhancement: Graceful fallbacks for older browsers
-
Mobile Support: Touch-optimized controls for mobile devices
Modern Web Technologies
-
Vanilla JavaScript: No framework dependencies for maximum compatibility
-
Canvas API: Hardware-accelerated rendering for smooth performance
-
SVG Generation: Vector-based guides for infinite scalability
-
Blob Processing: Secure file handling without URL-based vulnerabilities
Performance Optimization
-
Smart Caching: 30-second guide cache for instant regeneration
-
Lazy Loading: On-demand template and pattern loading
-
Memory Management: Automatic cleanup and resource optimization
-
Progressive Enhancement: Graceful degradation for various browser capabilities
​
Technical Integration
​
Design Workflow Integration
-
Start by matching the ratio to your page. Or to the media type you need a guide for
-
Choose Appropriate Templates: We have a library of guides, grids, and templates. These can be used on their own or in unison
-
Customise: In some instances you can add your own guide lines or alter the templates to better fit your needs
-
Utilize Color Coding: Assign different colors, opacity, or line thickness to different guide types for visual organization
-
Save Configurations: Either save as a template to in the app to use again. Or export guide setups as PNG/SVG for future reference in your media library.
Professional Standards
-
Video Production: Always use action-safe and title-safe areas for broadcast content
-
Social Media: Respect platform-specific safe zones to prevent content cutoff
-
Technical Drawing: Leverage perspective grids for accurate 3D representations
-
Web Design: Use responsive grid systems for consistent layout structures
​
Best Practices
​​
Common Issues
- none shared or found at this time
​
Support Resources
- none shared or found at this time
​
Please report bugs to: simon.spencer.harvey@gmail.com subject: Guide Guru Bug
Please share feature request to: simon.spencer.harvey@gmail.com subject: Guide Guru Idea
​
Troubleshooting and Support
​​​
Current Version: V1.145
First Public Release - This is the inaugural public version of Guide Guru, representing the culmination of extensive development and testing to deliver a professional-grade canvas layout assistant for Canva users.