blog-banner-creationlisted

# Blog Banner Creation Skill ## Purpose Create branded blog header images that follow strict layout and branding rules to ensure consistency and mobile-safe rendering across all platforms. ## CORE RULES ### 1. The 75% Safe Zone Rule **ALL important content MUST be within the center 75% of the image.** ``` +--------------------------------------------------+ | 12.5% margin | | +--------------------------------------------+ | | | | | | | 75% SAFE ZONE | | | | (All logos, text, important content) | | | | | | | +--------------------------------------------+ | | 12.5% margin | +--------------------------------------------------+ ``` - **Horizontal margins**: 12.5% on left and right - **Vertical margins**: 12.5% on top and bottom - **Why**: Prevents cutoff on mobile devices and social media previews ### 2. Layout Hierarchy (Top to Bottom) Within the 75% safe zone, content is arranged: ``` TOP-LEFT: [Brand Icon] Brand Logo (WITH SHADOW) (positioned LEFT or RIGHT, NOT centered) (shadow behind text for "lift" effect) MIDDLE: ARTICLE TITLE (LARGE font, main focus, CENTERED, word-wrapped if needed) (subtle shadow for readability) BOTTOM: (NOTHING - no tagline, title is the main content) ``` **Key Points**: - Logo icon should be