Web Banner Design — คู่มือออกแบบแบนเนอร์เว็บ
Web Banner Design คือการออกแบบภาพกราฟิกสำหรับโฆษณาออนไลน์หรือ hero sections บนเว็บไซต์ แบนเนอร์ที่ดีต้องดึงดูดสายตา สื่อสารข้อความชัดเจน และกระตุ้นให้ผู้ใช้คลิก (CTR) ครอบคลุมทั้ง display ads, social media banners, website hero images และ email headers บทความนี้อธิบายหลักการออกแบบ ขนาดมาตรฐาน เครื่องมือ เทคนิค และ Python automation สำหรับสร้าง banners อัตโนมัติ
ขนาดมาตรฐาน Web Banner
# banner_sizes.py — Standard web banner sizes
import json
class BannerSizes:
GOOGLE_ADS = {
"medium_rectangle": {"size": "300×250", "name": "Medium Rectangle", "use": "ยอดนิยมที่สุด — sidebar, in-content"},
"large_rectangle": {"size": "336×280", "name": "Large Rectangle", "use": "In-content, article"},
"leaderboard": {"size": "728×90", "name": "Leaderboard", "use": "ด้านบนหน้า (header)"},
"half_page": {"size": "300×600", "name": "Half Page", "use": "Sidebar — พื้นที่เยอะ impact สูง"},
"large_mobile": {"size": "320×100", "name": "Large Mobile Banner", "use": "Mobile เท่านั้น"},
"billboard": {"size": "970×250", "name": "Billboard", "use": "ด้านบนหน้า — desktop only"},
"skyscraper": {"size": "160×600", "name": "Wide Skyscraper", "use": "Sidebar แนวตั้ง"},
}
SOCIAL_MEDIA = {
"facebook_post": {"size": "1200×630", "name": "Facebook Post", "ratio": "1.91:1"},
"facebook_cover": {"size": "820×312", "name": "Facebook Cover", "ratio": "2.63:1"},
"instagram_post": {"size": "1080×1080", "name": "Instagram Post", "ratio": "1:1"},
"instagram_story": {"size": "1080×1920", "name": "Instagram Story", "ratio": "9:16"},
"twitter_post": {"size": "1200×675", "name": "Twitter/X Post", "ratio": "16:9"},
"youtube_thumbnail": {"size": "1280×720", "name": "YouTube Thumbnail", "ratio": "16:9"},
"linkedin_post": {"size": "1200×627", "name": "LinkedIn Post", "ratio": "1.91:1"},
}
WEBSITE = {
"hero": {"size": "1920×1080", "name": "Hero Banner (Full Width)", "note": "Responsive — ปรับตาม viewport"},
"hero_half": {"size": "1920×600", "name": "Hero Banner (Half)", "note": "ไม่ full screen"},
"category": {"size": "1200×400", "name": "Category Banner", "note": "หน้า category/collection"},
"promo": {"size": "800×400", "name": "Promotion Banner", "note": "Popup, sidebar promo"},
}
def show_google(self):
print("=== Google Ads Banner Sizes ===\n")
for key, banner in self.GOOGLE_ADS.items():
print(f" [{banner['size']:>10}] {banner['name']:<25} — {banner['use']}")
def show_social(self):
print(f"\n=== Social Media Sizes ===")
for key, banner in self.SOCIAL_MEDIA.items():
print(f" [{banner['size']:>10}] {banner['name']:<25} ({banner['ratio']})")
def show_website(self):
print(f"\n=== Website Banner Sizes ===")
for key, banner in self.WEBSITE.items():
print(f" [{banner['size']:>10}] {banner['name']:<25} — {banner['note']}")
sizes = BannerSizes()
sizes.show_google()
sizes.show_social()
sizes.show_website()หลักการออกแบบ Banner
# design_principles.py — Banner design principles
import json
class DesignPrinciples:
PRINCIPLES = {
"hierarchy": {
"name": "1. Visual Hierarchy",
"description": "จัดลำดับความสำคัญ: Headline (ใหญ่สุด) → Subtext → CTA Button",
"tip": "คนอ่านเป็น Z-pattern หรือ F-pattern — วาง content ตามนั้น",
},
"simplicity": {
"name": "2. Simplicity (ความเรียบง่าย)",
"description": "ข้อความสั้น กระชับ ไม่เกิน 7-10 คำ — คนเห็น banner แค่ 1-2 วินาที",
"tip": "1 message, 1 image, 1 CTA — อย่าใส่ข้อมูลเยอะเกิน",
},
"contrast": {
"name": "3. Contrast & Color",
"description": "สีพื้นหลัง vs สีตัวอักษรต้อง contrast ชัด — อ่านง่าย",
"tip": "ใช้ complementary colors, CTA button ใช้สีเด่น (red, orange, green)",
},
"cta": {
"name": "4. Clear CTA (Call to Action)",
"description": "ปุ่ม CTA ต้องเห็นชัด — 'สมัครเลย', 'ดูรายละเอียด', 'ซื้อเลย'",
"tip": "ปุ่มต้องใหญ่พอ, สีเด่น, ข้อความ action-oriented",
},
"brand": {
"name": "5. Brand Consistency",
"description": "ใช้ font, สี, logo ของแบรนด์ — สร้าง brand recognition",
"tip": "Logo ต้องเห็นชัด แต่ไม่ใหญ่เกินไป — ไม่ใช่ focus หลัก",
},
"responsive": {
"name": "6. Responsive Design",
"description": "ออกแบบให้แสดงผลดีทุกขนาดหน้าจอ — desktop, tablet, mobile",
"tip": "ทำ banner หลายขนาด หรือใช้ responsive banner (HTML5/CSS)",
},
}
COMMON_MISTAKES = [
"ข้อความเยอะเกินไป — คนไม่อ่าน ให้สั้นกระชับ",
"ไม่มี CTA — คนไม่รู้จะทำอะไรต่อ",
"สีกลมกลืนกับ background — banner หายไป",
"รูปภาพ low quality — ดูไม่ professional",
"Font อ่านยาก — ใช้ script font เล็กเกินไป",
"ไม่ responsive — มือถือแสดงผลเพี้ยน",
]
def show_principles(self):
print("=== Design Principles ===\n")
for key, p in self.PRINCIPLES.items():
print(f"[{p['name']}]")
print(f" {p['description']}")
print(f" Tip: {p['tip']}")
print()
def show_mistakes(self):
print("=== Common Mistakes ===")
for mistake in self.COMMON_MISTAKES[:4]:
print(f" ✗ {mistake}")
dp = DesignPrinciples()
dp.show_principles()
dp.show_mistakes()Python Banner Generator
# banner_gen.py — Python automated banner generator
import json
class BannerGenerator:
CODE = """
# auto_banner.py — Generate banners with Pillow
from PIL import Image, ImageDraw, ImageFont, ImageFilter
import os
class BannerMaker:
def __init__(self, width, height, bg_color='#1a1a2e'):
self.width = width
self.height = height
self.img = Image.new('RGB', (width, height), bg_color)
self.draw = ImageDraw.Draw(self.img)
def add_gradient(self, color1, color2, direction='horizontal'):
'''Add gradient background'''
for i in range(self.width if direction == 'horizontal' else self.height):
ratio = i / (self.width if direction == 'horizontal' else self.height)
r = int(color1[0] + (color2[0] - color1[0]) * ratio)
g = int(color1[1] + (color2[1] - color1[1]) * ratio)
b = int(color1[2] + (color2[2] - color1[2]) * ratio)
if direction == 'horizontal':
self.draw.line([(i, 0), (i, self.height)], fill=(r, g, b))
else:
self.draw.line([(0, i), (self.width, i)], fill=(r, g, b))
def add_text(self, text, position, font_size=48, color='white', font_path=None):
'''Add text to banner'''
try:
font = ImageFont.truetype(font_path or 'arial.ttf', font_size)
except:
font = ImageFont.load_default()
self.draw.text(position, text, fill=color, font=font)
def add_cta_button(self, text, position, width=200, height=50,
bg_color='#e94560', text_color='white'):
'''Add CTA button'''
x, y = position
# Rounded rectangle
self.draw.rounded_rectangle(
[x, y, x + width, y + height],
radius=10, fill=bg_color
)
# Button text (centered)
try:
font = ImageFont.truetype('arial.ttf', 20)
except:
font = ImageFont.load_default()
bbox = self.draw.textbbox((0, 0), text, font=font)
tw, th = bbox[2] - bbox[0], bbox[3] - bbox[1]
tx = x + (width - tw) // 2
ty = y + (height - th) // 2
self.draw.text((tx, ty), text, fill=text_color, font=font)
def add_logo(self, logo_path, position, size=(100, 100)):
'''Add logo image'''
logo = Image.open(logo_path).resize(size)
self.img.paste(logo, position, logo if logo.mode == 'RGBA' else None)
def save(self, filename):
self.img.save(filename, quality=95)
print(f"Saved: {filename} ({self.width}x{self.height})")
# Usage — Generate multiple sizes
configs = [
{"size": (728, 90), "name": "leaderboard"},
{"size": (300, 250), "name": "medium_rect"},
{"size": (1200, 630), "name": "facebook"},
{"size": (1080, 1080), "name": "instagram"},
]
for config in configs:
w, h = config["size"]
banner = BannerMaker(w, h)
banner.add_gradient((26, 26, 46), (22, 33, 62))
banner.add_text("Summer Sale 50% Off", (w//10, h//4), font_size=min(h//3, 48))
banner.add_cta_button("Shop Now", (w//10, h*2//3), width=min(w//3, 200))
banner.save(f"banner_{config['name']}.png")
"""
def show_code(self):
print("=== Banner Generator ===")
print(self.CODE[:600])
def batch_example(self):
print(f"\n=== Batch Generation Example ===")
sizes = [
("Leaderboard", "728×90"),
("Medium Rectangle", "300×250"),
("Facebook Post", "1200×630"),
("Instagram Post", "1080×1080"),
("YouTube Thumbnail", "1280×720"),
]
for name, size in sizes:
print(f" Generated: banner_{name.lower().replace(' ', '_')}.png ({size})")
gen = BannerGenerator()
gen.show_code()
gen.batch_example()Design Tools
# tools.py — Banner design tools
import json
class DesignTools:
FREE_TOOLS = {
"canva": {
"name": "Canva",
"description": "ออกแบบ banner ง่ายมาก — drag & drop, templates เยอะ",
"best_for": "มือใหม่, social media banners, quick designs",
"cost": "ฟรี (Pro $12.99/month)",
},
"figma": {
"name": "Figma",
"description": "Professional design tool — collaboration, components, auto-layout",
"best_for": "Web designers, UI/UX, design systems",
"cost": "ฟรี (Pro $12/month)",
},
"gimp": {
"name": "GIMP",
"description": "Open source image editor — ทดแทน Photoshop ฟรี",
"best_for": "Photo editing, advanced banner design",
"cost": "ฟรี",
},
}
PAID_TOOLS = {
"photoshop": {
"name": "Adobe Photoshop",
"description": "มาตรฐาน industry — image editing + banner design",
"cost": "$20.99/month",
},
"illustrator": {
"name": "Adobe Illustrator",
"description": "Vector graphics — scalable banners, logos",
"cost": "$20.99/month",
},
"bannersnack": {
"name": "Creatopy (Bannersnack)",
"description": "Banner-specific tool — animated banners, HTML5 export",
"cost": "$17/month",
},
}
AI_TOOLS = {
"midjourney": "AI image generation — สร้าง background images",
"dall_e": "OpenAI DALL-E — generate banner images from text",
"remove_bg": "Remove.bg — ลบ background รูปภาพอัตโนมัติ",
"canva_ai": "Canva Magic Design — AI สร้าง banner อัตโนมัติจาก prompt",
}
def show_free(self):
print("=== Free Tools ===\n")
for key, tool in self.FREE_TOOLS.items():
print(f"[{tool['name']}] {tool['cost']}")
print(f" {tool['description']}")
print()
def show_ai(self):
print("=== AI-powered Tools ===")
for tool, desc in self.AI_TOOLS.items():
print(f" [{tool}] {desc}")
tools = DesignTools()
tools.show_free()
tools.show_ai()HTML5 Animated Banner
// animated_banner.html — HTML5/CSS animated banner
// <div class="banner">
// <div class="banner-content">
// <h2 class="headline">Summer Sale</h2>
// <p class="subtext">Up to 50% Off</p>
// <a href="#" class="cta-btn">Shop Now</a>
// </div>
// </div>
const bannerCSS = `
.banner {
width: 728px;
height: 90px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
overflow: hidden;
position: relative;
border-radius: 8px;
}
.headline {
font-size: 24px;
font-weight: 800;
color: white;
animation: slideIn 0.5s ease-out;
}
.subtext {
font-size: 14px;
color: rgba(255,255,255,0.9);
animation: slideIn 0.7s ease-out;
}
.cta-btn {
background: #ff6b6b;
color: white;
padding: 10px 24px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
transition: transform 0.2s, box-shadow 0.2s;
animation: pulse 2s infinite;
}
.cta-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(255,107,107,0.4);
}
@keyframes slideIn {
from { transform: translateX(-30px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0.4); }
50% { box-shadow: 0 0 0 10px rgba(255,107,107,0); }
}
`;
console.log("=== HTML5 Animated Banner ===");
console.log("Features:");
console.log(" - CSS gradient background");
console.log(" - Slide-in text animation");
console.log(" - Pulsing CTA button");
console.log(" - Hover effects");
console.log(" - Responsive friendly");FAQ - คำถามที่พบบ่อย
Q: ขนาด banner ไหนสำคัญที่สุด?
A: Google Ads: 300×250 (Medium Rectangle) — แสดงมากที่สุด, CTR สูงสุด รองลงมา: 728×90 (Leaderboard), 336×280 (Large Rectangle) Social: 1200×630 (Facebook/LinkedIn), 1080×1080 (Instagram) เริ่มจาก 3 ขนาดหลัก: 300×250, 728×90, 1080×1080
Q: CTR ที่ดีของ banner เท่าไหร่?
A: Display ads average: 0.05-0.10% (ต่ำมาก — ปกติ) ดี: 0.10-0.30% ดีมาก: 0.30-1.00% Retargeting ads: 0.70-1.00% (สูงกว่าเพราะ targeted) ปรับปรุง CTR: A/B test headlines, สี CTA, images, targeting
Q: ใช้เครื่องมืออะไรออกแบบดี?
A: มือใหม่: Canva (ฟรี, templates เยอะ, ง่ายมาก) Intermediate: Figma (professional, collaboration ดี, ฟรี) Advanced: Photoshop + Illustrator (industry standard) Animated banners: Google Web Designer (ฟรี), Creatopy AI: Canva Magic Design, Midjourney สำหรับ images
Q: ควรใช้ static หรือ animated banner?
A: Static: โหลดเร็ว, ง่าย, รองรับทุก platform Animated (GIF/HTML5): CTR สูงกว่า 10-20%, ดึงดูดสายตา แต่ file size ใหญ่ กฎ: animation ไม่เกิน 15 วินาที, ไม่ loop เกิน 3 รอบ (Google policy) แนะนำ: เริ่มจาก static → ลอง animated สำหรับ campaigns สำคัญ
