Medium Banner Template
การเขียน Blog ให้สวยงาม เราควรคำนึงถึง Banner ของ Blog เช่นกัน วันนี้จะมาแจก Banner Template ที่จะรับรองว่าง จะแสดง สวยงามทุกที่
ใน Medium รูปที่เราเลือกเป็นรูป Cover จะถูกทำไปเป็น Thumnail ในที่ต่างๆ ที่มี “สัดส่วน” ของรูปภาพที่ต่างกัน แน่นอนว่า ถ้าเราทำภาพ Cover ไม่ดีเนี่ย มันจะโดนตัดๆๆๆ ไม่สวยงาม ไหนจะการนำไปแชร์ใน Social network อีก ภาพอาจจะโดนตัดไม่มีชิ้นดี
วันนี้จะแจก Themplate ที่ใช้อยู่ ซึ่งมีขนาด “ประมาณ” นี้
รูปข้างบนจะแสดงชั้นเจนเลยว่า รูปที่เราใช้ทำ Cover ส่วนใดจะถูกตัดบ้าง ถ้าใครอย่างได้ file ตัวอย่าง download ได้ที่นี่
จาก template ในเส้นของขนาด medium ได้คิดถึงเรื่องภาพอาจโดนตัดแล้ว อะไรที่อยู่ในนั้นจะไม่โดนตัดแล้วนาจา (เมื่อแชร์แบบปกติ)
ตัวอย่างการใช้งาน
แสดงในหน้าหลักของ blog
เป็นหน้าของตัว Blog เลย ทั้งนี้เราสามารถเลือกได้ว่า อยากให้รูปปูเต็มหรือไม่ แต่ template ที่ให้ไปเหมาะกับการปูเต็มมากกว่า
แสดงใน Medium หน้า List
ในหน้า list จะแสดงรูปตาม ratio เลย แต่ตัว CSS ดันมี fix max height ไว้ ดังนั้นถ้าทำรูปไม่ยาวพอ ในหน้านี้ รูปจะชิดซ้าย ด้านขวาจะเหลือที่ว่าง OCD กำเริบได้นะ
แสดงใน Medium ขนาดกลาง
เป็นขนาดที่ Common ที่สุด เป็นสัดส่วนที่ใช่ค่อยข้างเยอะใน Social Media ต่างๆ
แสดงใน Medium ขนาด เล็ก
จะแสดง ratio เกือบจตุรัส แต่เลือกเอาเฉพาะตรงกลางรูปมาแปะ รูปนี้โดนตัดขอบเยอะมาก แต่การจะยัด Text ทั้งหมดลงในพื้นที่นี้ก็อาจทำให้ compose ของตำแหน่งอื่นไม่สวย ก็เลยยอมให้อันนี้โดนตัด — ที่สำคัญรูปมันค่อนข้างเล็ก ต่อให้เรายัดทุกอย่างลง มันก็อาจมองเห็นไม่ชัดอยู่ดี
แสดงใน Suggestion ของ Medium
ที่ท้าย blog จะมี Suggestion อยู่ ซึ่งขนาดของ ratio ค่อนข้างยาวหน่อย
Twitter ในเว็บ
twitter เว็บไซต์ จะใช้รูปขนาดทั่วๆ ไป
แชร์บน Facebook
ในส่วนของ facebook ก็ใช้ thumbnail ขนาดกลาง
แชร์จากแชร์บน Facebook
การแชร์จากแชร์ จะทำให้ Content ข้างในเล็กลงกว่าการแชร์รอบเดียว แน่นอนว่าขอบอาจโดนตัดบ้าง
Mobile App
ต่อมาจะเป็นการแสดงผลในรูปแบบต่างๆ ของ Mobile App
Medium App — Blog
หน้า blog ของ medium จะปูรูปเต็มเลย template ที่ให้ไป ไม่ทำให้สาระสำคัญดูเล็กเกินไป
Medium App — high light blog
หน้านี้จะใช้ขนาดกลางเช่นกัน แต่ด้านซ้ายและขวา จะโดนตัดกว่าเยอะหน่อย ตัว Template เผื่อ margin ตรงนี้ไว้แล้ว
Medium App — blog list
โดนตัดกระจายเลย T T
Twitter App
ความมนที่หัวจะเยอะหน่อย อย่าเอาอะไรไปไว้ที่มุมก็ดีนะ
Facebook App — แชร์
facebook ใช้ ratio ภาพเดียวกันกับบนเว็บเลย นายทพดี
Facebook App — แชร์ในแชร์
ส่วนอันนี้ก็ยังคงใช้ ratio เดียวกันอยู่ เยี่ยม
Facebook App — Suggestion
เวลาเราค้นหาอะไรบางอย่างใน facebook จะมี suggestion ของโพสต์ด้วย แต่ Suggestion จะโดยตัดเยอะหน่อย แต่รายละเอียดสำคัญไม่หาย แต่ที่สำคัญคือภาพไม่ละเอียด T^T
Size ต่างๆ มาจากไหน
1. Thumbnail
ผมรวบรวม Thumbnail ของ Content ต่างๆ จาก Medium, Twitter และ Facebook โดยพยายามหาจุดร่วมของทั้ง 3 ตัวนี้ แต่ไซต์ที่ดีที่สุดสำหรับใช้คือ 1000*300 pixel เพราะเวลาแสดงใน Blog แบบปูเต็ม ตัวรูปจะไม่สูงเกินไป และรูปภาพที่ปูเต็มสวยงามพอดี
2. CSS
แน่นอนเป็น dev ต้องอ่าน CSS ได้บ้าง content บางประเภทใน Medium มีการ fix max-width และ max-height ดังนั้น size ที่เลือกมา จะทำให้รูปแสดงพอดี ไม่โดน CSS ทำร้าย จนเห็นว่ามันไปกองด้านใดด้านหนึ่ง หรือรูปแสดงผลเล็กเกินไป
ทำไมเราต้องทำ Banner ดีๆ?
รูปสวยมีชัยไปกว่าครึ่ง banner ที่ดีควรโชว์รายละเอียดสำคัญครบถ้วน และไม่แน่นจนอ่านยากเกินไป เวลาแชร์ใน Facebook Twitter มันจะเห็นว่ารูปเรามันแสดงพอดี แน่นอนว่ามันดูประณีตขึ้นด้วย
สรุป
template นี้เป็นแค่ 1 ตัวอย่างครัช จริงๆ จะใช้ภาพขนาดใดก็ได้ แต่ควรคำนึงถึง social media ด้วย แน่นอนว่า template นี้คิดมาแล้ว ใครจะเอาไปใช้ก็ยินดีครับ — แต่อย่างไรก็ตาม Social media มีการเปลี่ยนแปลงตลอด thumbnail ที่ทำไว้อาจใช้ได้ไม่เหมาะสมแล้ว ดังนั้นควรลองก่อนโพสต์นะครับ
ขอบคุณที่อ่านจนจบจ้าาา
— จบ —
