ไปทำแบบทดสอบ 🎯
🎒0/9

สมุดสะสมสติกเกอร์ของฉัน

วิชากราฟิกส์และสื่อผสม · ครูภาณุพงษ์ ชุคาน (ครูตุ๊ก)

ปลุกพลังเล่าเรื่อง
ด้วย INFOGRAPHIC

ข้อมูลน่าเบื่อเป็นภาพสนุกได้! บทเรียนนี้พาไปรู้จักอินโฟกราฟิก ตั้งแต่พิกเซลตัวจิ๋ว ไปจนถึงการออกแบบของจริง พร้อมเกมและแบบทดสอบให้ลองมือ 🎨

Information
+
Graphic
=
Infographic
เริ่มผจญภัยกันเลย ↓
ขั้นตอนการทำ Infographic
เลื่อนลงเพื่อเริ่มเรียน ⌄
01 · อยู่รอบตัวเรา

อินโฟกราฟิกซ่อนอยู่ทุกที่

ตึกสูง ป้ายรถไฟฟ้า บิลบอร์ดริมทาง หรือแม้แต่โปสเตอร์รณรงค์สุขภาพ ล้วนใช้หลักการ "ข้อมูล + ภาพ" เพื่อสื่อสารให้เข้าใจง่ายและจำได้ไว ลองคลิกดูตัวอย่างจริงได้เลย

02 · ก่อนจะเป็นภาพ

รู้จัก "พิกเซล" เพื่อนซี้ของทุกภาพดิจิทัล

ภาพทุกภาพบนจอ ประกอบขึ้นจากจุดสีเล็กๆ นับล้านจุดเรียกว่า "พิกเซล" และในแต่ละพิกเซลยังซ่อน "ซับพิกเซล" สีแดง เขียว น้ำเงิน ไว้อีกที ลองซูมเข้าไปดู!

Pixel และ Sub-pixel
Pixel vs Sub-pixel เมาส์ชี้เพื่อซูม
ภาพขยายจนเห็นพิกเซล
ยิ่งซูม ยิ่งเห็นจุดสี เมาส์ชี้เพื่อซูม
03 · เลือกไฟล์ให้ถูกงาน

Vector VS Bitmap ใครทนซูมกว่ากัน?

ภาพ Vector วาดจากเส้นและสูตรคณิตศาสตร์ ขยายเท่าไหร่ก็ยังคมกริบ ส่วนภาพ Bitmap เก็บเป็นจุดสี ยิ่งขยายยิ่งแตกเป็นตารางพิกเซล ลองชี้เมาส์เพื่อซูมเปรียบเทียบดู

Vector กับ Bitmap เปรียบเทียบ
Vector = คมทุกระยะซูม คลิกดูภาพเต็ม
เส้น Vector จริง
เบื้องหลังเส้น Vector คลิกดูภาพเต็ม
04 · เวทมนตร์แต่งภาพ

รีทัชอย่างไรให้ภาพเล่าเรื่องได้

ก่อนข้อมูลจะกลายเป็นภาพสวยๆ นักออกแบบมักใช้โปรแกรมอย่าง Photoshop ตัดต่อ ปรับแสง หรือสร้างฉากในจินตนาการ ลองดูตัวอย่างการเนรมิตภาพเหล่านี้

05 · เลือกโครงเรื่องให้ปัง

9 รูปแบบเลย์เอาต์ Infographic

แต่ละเรื่องราวเหมาะกับโครงสร้างไม่เหมือนกัน แตะที่การ์ดเพื่อดูคำอธิบาย แล้วกด "ดูตัวอย่างจริง" เพื่อดูของจริงจากนักออกแบบมืออาชีพ

06 · มินิเกม

เรียงลำดับ 6 ขั้นตอนให้ถูกต้อง

แตะคำในกล่องด้านล่างตามลำดับที่คิดว่าถูกต้อง เพื่อวางลงในช่องขั้นตอนที่ 1-6 แล้วกด "ตรวจคำตอบ"

07 · รู้จักไฟล์งาน

คลังนามสกุลไฟล์ที่ควรรู้จัก

เลือกหมวดที่อยากรู้ แล้วดูว่าแต่ละนามสกุลไฟล์เหมาะกับงานแบบไหน

08 · ทดสอบตัวเอง

พร้อมวัดพลังนักออกแบบหรือยัง?

ตอบคำถาม 6 ข้อ เก็บคะแนนให้ครบ แล้วรับสติกเกอร์ปริญญาบัตรพิเศษ!

🎓

ยินดีด้วย! นักออกแบบอินโฟกราฟิกตัวน้อย

ตอนนี้เธอรู้จักพิกเซล เวกเตอร์ เลย์เอาต์ทั้ง 9 แบบ ขั้นตอนการทำงาน และไฟล์งานต่างๆ แล้ว ลองนำความรู้นี้ไปออกแบบอินโฟกราฟิกเรื่องที่ตัวเองสนใจดูนะ!