การออกแบบงานกราฟิกด้วย Canva ม.1

เรื่องที่ 1 บทนำสู่โลกการออกแบบและรู้จัก Canva

การออกแบบคืออะไร และ Canva คือใคร

1. “การออกแบบ” คืออะไร? ทำไมมันอยู่รอบตัวเรา?

ลองมองไปรอบๆ ตัวเราสิ…

• หน้าปกเกมที่เราเล่น
• ซองขนมที่สีสวยๆ
• โปสเตอร์หนังที่ทำให้เราอยากดู
• เสื้อยืดลายเท่ๆ
• หน้าตาแอป TikTok หรือ Facebook ที่เราไถเล่น

รู้ไหมว่าทั้งหมดนี้มีสิ่งที่เหมือนกัน? … นั่นคือ มันถูก “ออกแบบ” (Design) มาแล้วทั้งนั้น!

การออกแบบกราฟิก (Graphic Design) พูดง่ายๆ ก็คือ การใช้ภาพวาด, รูปถ่าย, สี, และตัวอักษร มาจัดวางเพื่อ “สื่อสาร” อะไรบางอย่าง

• ซองขนมออกแบบให้สีสดใส ➡️ เพื่อให้เรา “อยากกิน”
• หน้าปกเกมออกแบบให้ตัวละครดูเท่ ➡️ เพื่อให้เรา “อยากเล่น”
• ป้ายห้องน้ำ ➡️ เพื่อให้เรา “เข้าใจ” ว่านี่คือห้องน้ำชายหรือหญิง

สรุปความสำคัญของการออกแบบ: มันช่วยให้สิ่งต่างๆ น่าสนใจ, เข้าใจง่าย และ สวยงาม นั่นเอง

2. รู้จัก “Canva” – เครื่องมือออกแบบสุดเจ๋ง

ถ้าการออกแบบคือการสร้างสรรค์ “Canva” ก็คือ “กล่องเครื่องมือวิเศษ” ที่ช่วยให้เราสร้างงานออกแบบได้ง่ายเหมือนเล่นเกม

Canva คืออะไร?

• คือ โปรแกรม (หรือแอปพลิเคชัน) สำหรับออกแบบกราฟิก ที่ทำงาน ออนไลน์ (ผ่านเว็บไซต์ หรือแอปในมือถือ/แท็บเล็ต)

ทำไม Canva ถึงเจ๋ง?

1. ใช้งานง่าย: แค่ “ลาก” แล้วก็ “วาง” (Drag-and-Drop) ไม่ต้องมีทักษะศิลปะขั้นเทพก็ทำได้
2. มีของฟรีให้เล่นเพียบ: ทั้งรูปภาพ, สติกเกอร์, ตัวอักษรสวยๆ และที่สำคัญคือ “แม่แบบ” (Template)
3. ไม่ต้องติดตั้งโปรแกรม: ทำงานผ่านเว็บเบราว์เซอร์ (อย่าง Google Chrome) ได้เลย
4. ทำได้ทุกอย่าง: ตั้งแต่โปสเตอร์, การ์ดอวยพร, โลโก้, อินโฟกราฟิก (Infographic), ไปจนถึงงานนำเสนอ (Presentation) และวิดีโอสั้นๆ ลง TikTok/Reels

3. ภารกิจที่ 1 เปิดประตูสู่ Canva (การสมัครใช้งาน)

เราจะมาสร้างบัญชี (Account) ของตัวเองกัน เพื่อเก็บผลงานของเราไว้

วิธีสมัครใช้งาน (Sign Up) (สำหรับคนที่ไม่เคยมีบัญชี):

1. เปิดเว็บเบราว์เซอร์ (เช่น Google Chrome) แล้วพิมพ์ Canva.com
2. มองหาปุ่ม “Sign up” (สมัครใช้งาน) แล้วคลิก
3. [วิธีที่แนะนำที่สุด!] ให้นักเรียนเลือก “Continue with Google” (ดำเนินการต่อด้วย Google)
4. เลือกบัญชีอีเมลของโรงเรียน (หรืออีเมล G Suite/Gmail) ที่เราใช้
5. ระบบอาจจะถามว่าเราเป็นใคร ให้เลือก “Student” (นักเรียน)
6. เสร็จแล้ว! เราจะเข้าสู่หน้าแรกของ Canva

วิธีเข้าสู่ระบบ (Log In) (สำหรับครั้งต่อๆ ไป):

1. ไปที่ Canva.com
2. คลิก “Log in” (เข้าสู่ระบบ)
3. เลือก “Continue with Google” (หรือวิธีเดียวกับที่เราใช้สมัคร)
4. เลือกบัญชีของเรา

ทัวร์โปรแกรม Canva และเริ่มสร้างชิ้นแรก

หลังจากที่เรา Log in เข้ามาแล้ว ตอนนี้เราอยู่ที่หน้า Home ของ Canva ต่อไปเราจะมาดูกันว่า ถ้าจะเริ่มออกแบบจริงๆ หน้าตาโปรแกรมมันเป็นยังไง

4. ภารกิจที่ 2 ทัวร์สำรวจหน้าจอโปรแกรม Canva

เมื่อเรากดสร้างงานออกแบบ (เช่น กด “Create a design” แล้วเลือก “Poster”) เราจะเจอกับหน้าจอทำงานหลัก ซึ่งแบ่งเป็น 4 ส่วนสำคัญๆ ที่เราต้องรู้จัก:

ส่วนที่ 1 แถบเครื่องมือด้านข้าง (Side Panel) – (อยู่ด้านซ้ายมือ)

นี่คือ “คลังสมบัติ” ของเรา ที่รวมทุกอย่างที่เราต้องใช้

• Design/Templates (แม่แบบ): ที่รวมแบบ “สำเร็จรูป” สวยๆ เราแค่เลือกมาแล้วแก้ไข
• Elements (องค์ประกอบ): ที่รวมของสนุกๆ!
  • Lines & Shapes: เส้น, วงกลม, สี่เหลี่ยม
  • Graphics: สติกเกอร์, รูปการ์ตูน
  • Photos: รูปถ่ายสวยๆ (มีทั้งฟรีและเสียเงิน สังเกตรูปมงกุฎ 👑 = เสียเงิน)
• Text (ข้อความ): ใช้สำหรับเพิ่มหัวข้อ หรือเนื้อหาต่างๆ
• Uploads (อัปโหลด): ใช้สำหรับนำรูปภาพของเราเอง (เช่น รูปหน้าเรา หรือรูปที่โหลดมา) เข้าไปใน Canva

ส่วนที่ 2 พื้นที่ทำงาน (Workspace) – (อยู่ตรงกลางใหญ่ๆ)

นี่คือ “กระดาษ” ของเรา เราจะวาด เขียน แปะสติกเกอร์ หรือวางรูปภาพต่างๆ ลงบนพื้นที่สีขาวตรงนี้

ส่วนที่ 3 แถบเครื่องมือด้านบน (Top Bar)

นี่คือ “เครื่องมือปรับแต่ง” มันจะโผล่มาเมื่อเราคลิกที่วัตถุ (เช่น คลิกที่ตัวอักษร)

• ถ้าเราคลิก “ตัวอักษร”: แถบนี้จะเปลี่ยนเป็นเครื่องมือแก้ Font, ขนาดตัวอักษร, ทำตัวหนา, เปลี่ยนสีตัวอักษร
• ถ้าเราคลิก “รูปภาพ”: แถบนี้จะเปลี่ยนเป็นเครื่องมือแก้สี, ตัดรูป (Crop)
• สำคัญมาก: ปุ่ม Undo (รูปลูกศรย้อนกลับ ↩️) ใช้เมื่อเราทำพลาดและอยากย้อนกลับไป

ส่วนที่ 4 ปุ่ม “Share” (แชร์) – (อยู่มุมบนขวา)

นี่คือ “ปุ่มส่งงาน” เมื่อเราออกแบบเสร็จแล้ว เราจะมากดปุ่มนี้

• ใช้สำหรับ “Download” (ดาวน์โหลด) เพื่อบันทึกงานเป็นไฟล์รูปภาพ (เช่น .JPG, .PNG) หรือ PDF

5. ภารกิจที่ 3 การค้นหาและเลือกใช้แม่แบบ (Template)

สิ่งที่ง่ายที่สุดในการเริ่มออกแบบใน Canva คือการใช้ “แม่แบบ” (Template) ซึ่งก็คือ “แบบสำเร็จรูป” ที่นักออกแบบมืออาชีพทำไว้ให้ เรามีหน้าที่แค่ “เปลี่ยนข้อความ” และ “เปลี่ยนรูปภาพ” นิดหน่อย งานก็สวยแล้ว!

วิธีหาและใช้ Template:

1. วิธีที่ 1 (หาจากหน้า Home):
   1. ที่หน้าแรกของ Canva จะมีช่องค้นหาใหญ่ๆ
   1. ลองพิมพ์สิ่งที่เราอยากทำลงไป เช่น “Poster” (โปสเตอร์), “Infographic” (อินโฟกราฟิก), “Logo” (โลโก้)
   1. ระบบจะโชว์ Template สวยๆ มาให้เลือกเพียบ
2. วิธีที่ 2 (หาจากหน้าทำงาน):
   1. หลังจากที่เราเข้ามาใน “พื้นที่ทำงาน” (กระดาษขาวๆ) แล้ว
   1. มองไปที่ “แถบเครื่องมือด้านข้าง” (คลังสมบัติ)
   1. คลิกที่เมนูแรก “Design/Templates”
   1. เราสามารถพิมพ์ค้นหาในช่อง “Search templates” ได้เลย เช่น พิมพ์ว่า “Game”, “Food”, “School”

ลองทำดู: ให้นักเรียนลองค้นหา Template ที่ตัวเองชอบ 1 แบบ (อาจจะเป็น Poster แนะนำตัวเอง หรือ Infographic เรื่องที่สนใจ) แล้วคลิกเลือก Template นั้นให้มาอยู่ในพื้นที่ทำงานของเรา

สรุปบทเรียน 2 ชั่วโมง

ใน 2 ชั่วโมงนี้ เราได้เรียนรู้ว่า

1. การออกแบบ อยู่รอบตัวเรา ช่วยในการสื่อสาร
2. Canva คือเครื่องมือออกแบบออนไลน์ที่ใช้ง่ายและฟรี
3. เราสามารถ สมัครใช้งาน (Sign Up) ผ่าน Google Account ของเราได้
4. หน้าจอ Canva มี 4 ส่วนหลัก: คลังสมบัติ (ซ้าย), กระดาษ (กลาง), เครื่องมือปรับแต่ง (บน), และ ปุ่มส่งงาน (ขวา)
5. วิธีเริ่มงานที่ง่ายที่สุดคือการใช้ Template (แม่แบบ)

สไลด์สอน บทนำสู่โลกการออกแบบและรู้จัก Canva

https://gamma.app/docs/Canva-evs020mx3znsm99

เรื่องที่ 2 จิตวิทยาของตัวอักษร สี และเอฟเฟกต์

1. 🧠 จิตวิทยาของ “แบบอักษร” (The Psychology of Fonts)

แบบอักษร (Font) คือ “บุคลิก” หรือ “การแต่งกาย” ของข้อความ ลองนึกภาพคนใส่สูท กับคนใส่เสื้อยืด กางเกงขาสั้น ทั้งสองคนอาจพูดประโยคเดียวกัน แต่ความรู้สึกที่ผู้ฟังได้รับจะแตกต่างกันอย่างสิ้นเชิง

เราสามารถแบ่งกลุ่มความรู้สึกของ Font หลักๆ ได้ดังนี้:

ก. Serif (ฟอนต์มีเชิง/มีขา)

• ลักษณะ: มี “ขา” หรือ “เชิง” เล็กๆ ที่ปลายตัวอักษร (เช่น Times New Roman, Garamond, สารบรรณ)
• ความรู้สึกที่สื่อ:
  • คลาสสิก, ดั้งเดิม (Classic, Traditional): เหมือนหนังสือพิมพ์, หนังสือเก่า, งานวิชาการ
  • ทางการ (Formal): ดูน่าเชื่อถือ, จริงจัง, เป็นผู้ใหญ่
  • หรูหรา (Elegant): ให้ความรู้สึกแพง, มีระดับ
• เหมาะสำหรับ: เนื้อหาที่เป็นทางการ, บทความยาวๆ (ช่วยนำสายตาในการอ่าน), ใบประกาศนียบัตร, งานที่ต้องการความน่าเชื่อถือ

ข. Sans Serif (ฟอนต์ไม่มีเชิง/ไม่มีขา)

• ลักษณะ: ตัวอักษรเกลี้ยงๆ ไม่มีขา (เช่น Arial, Helvetica, Roboto, สุขุมวิท, พร้อม)
• ความรู้สึกที่สื่อ:
  • ทันสมัย (Modern): ดูสะอาด, เรียบง่าย, มินิมอล
  • เป็นมิตร (Friendly): อ่านง่าย, เข้าถึงง่าย, ไม่ซับซ้อน
  • ชัดเจน (Clean): เหมาะกับการอ่านบนหน้าจอคอมพิวเตอร์หรือมือถือมาก
• เหมาะสำหรับ: งานนำเสนอ (PowerPoint), เว็บไซต์, UI/UX, โปสเตอร์สมัยใหม่, อินโฟกราฟิก

ค. Script (ฟอนต์ลายมือ)

• ลักษณะ: เหมือนลายมือเขียน ทั้งแบบหวัดและแบบคัดลายมือ
• ความรู้สึกที่สื่อ:
  • เป็นส่วนตัว (Personal): เหมือนจดหมายที่เขียนด้วยมือ, ให้ความรู้สึกใกล้ชิด
  • อ่อนโยน, หรูหรา (Elegant, Feminine): มักใช้ในงานแต่งงาน, การ์ดเชิญ
  • ความคิดสร้างสรรค์ (Creative): ดูมีศิลปะ, ไม่เป็นทางการ
• เหมาะสำหรับ: การ์ดอวยพร, โลโก้ร้านกาแฟ/ร้านอาหาร, การเน้นคำพูด (Quote) ที่สร้างแรงบันดาลใจ

ง. Display / Decorative (ฟอนต์ประดิษฐ์)

• ลักษณะ: มีการตกแต่งเยอะ, มีเอกลักษณ์เฉพาะตัวสูงมาก (เช่น ฟอนต์แนวสยองขวัญ, ฟอนต์ลายการ์ตูน)
• ความรู้สึกที่สื่อ: สื่ออารมณ์ตามธีมของฟอนต์นั้นๆ อย่างชัดเจน (สนุก, น่ากลัว, ย้อนยุค)
• เหมาะสำหรับ: “หัวข้อเรื่อง” (Heading) เท่านั้น ห้ามใช้กับเนื้อหาเยอะๆ เพราะอ่านยากมาก ใช้เพื่อดึงดูดสายตาเป็นหลัก

2. 🎨 จิตวิทยาของ “สี” (The Psychology of Color)

สีส่งผลต่ออารมณ์โดยตรงและรวดเร็วที่สุด เพราะมันเชื่อมโยงกับสัญชาตญาณและประสบการณ์ร่วมของเรา

ก. โทนร้อน (Warm Colors): สีแดง, ส้ม, เหลือง

• ลักษณะ: สีที่ให้พลังงาน, โดดเด่น
• ความรู้สึกที่สื่อ:
  • พลังงาน, ความตื่นเต้น: ดึงดูดสายตาได้ดีที่สุด
  • ความอบอุ่น, ความสุข: (สีส้ม, สีเหลือง) ให้ความรู้สึกเป็นมิตร, สดใส
  • ความเร่งด่วน, อันตราย: (สีแดง) มักใช้เป็นปุ่ม “ซื้อเลย” หรือป้าย “ลดราคา” เพราะกระตุ้นการตัดสินใจ
• เหมาะสำหรับ: โปรโมชั่น, งานรื่นเริง, อาหาร (กระตุ้นความอยากอาหาร), งานที่ต้องการพลังบวก

ข. โทนเย็น (Cool Colors): สีฟ้า, เขียว, ม่วง

• ลักษณะ: สีที่ให้ความรู้สึกสงบ, ผ่อนคลาย
• ความรู้สึกที่สื่อ:
  • ความน่าเชื่อถือ, ความปลอดภัย: (สีฟ้า, สีน้ำเงิน) มักเป็นสีของธนาคาร, โรงพยาบาล, บริษัทเทคโนโลยี
  • ความสงบ, ธรรมชาติ: (สีเขียว) สื่อถึงสิ่งแวดล้อม, สุขภาพ, การผ่อนคลาย
  • ความคิดสร้างสรรค์, ความลึกลับ: (สีม่วง) สื่อถึงความหรูหรา, จินตนาการ
• เหมาะสำหรับ: งานวิชาการ, องค์กรที่ต้องการความน่าเชื่อถือ, ผลิตภัณฑ์สุขภาพ, สปา

ค. สีกกลาง (Neutral Colors): สีดำ, ขาว, เทา, น้ำตาล

• ความรู้สึกที่สื่อ:
  • ขาว: ความสะอาด, เรียบง่าย, พื้นที่ว่าง (Space)
  • ดำ: ความหรูหรา, พลังอำนาจ, ความเคร่งขรึม
  • เทา: ความเป็นกลาง, ความเสถียร, ความเป็นมืออาชีพ
• การใช้งาน: มักใช้เป็นสีพื้น (Background) หรือสีของเนื้อหา (Body Text) เพื่อให้สีหลัก (โทนร้อน/เย็น) โดดเด่นขึ้นมา

3. ✨ ผลกระทบของ “เอฟเฟกต์” (The Impact of Effects)

เอฟเฟกต์คือ “เครื่องปรุง” ที่ช่วยชูรสชาติ แต่ถ้าใส่มากเกินไปก็จะทำลายรสชาติดั้งเดิมของอาหาร

ก. เงา (Shadow)

• ผลกระทบ: สร้าง “มิติ” (Depth) ทำให้ข้อความหรือวัตถุ “ลอย” ออกมาจากพื้นหลัง ช่วยให้อ่านง่ายขึ้นเล็กน้อยบนพื้นหลังที่ซับซ้อน
• ความรู้สึก: ดูนุ่มนวล, มีมิติ, ไม่แบนราบ

ข. เค้าร่าง / ขอบ (Outline / Stroke)

• ผลกระทบ: “ตัด” ข้อความออกจากพื้นหลังอย่างชัดเจน ทำให้ “อ่านออก” ได้ แม้พื้นหลังจะมีสีสันหลากหลาย (เช่น การพาดหัวข่าวบนภาพ)
• ความรู้สึก: โดดเด่น, หนักแน่น, คมชัด, บางครั้งอาจดูลายตาถ้าใช้เยอะไป, ให้ความรู้สึกเหมือนสติกเกอร์หรือการ์ตูน

ค. ยกขึ้น / เรืองแสง (Lift / Glow)

• ผลกระทบ: ทำให้ข้อความดูสว่างขึ้น, ดึงดูดสายตาไปยังจุดนั้น
• ความรู้สึก: มีพลัง, ส่องสว่าง, แฟนตาซี, โดดเด่นเป็นพิเศษ

ง. พื้นหลังข้อความ (Background Shape)

• ผลกระทบ: สร้าง “ป้ายกำกับ” (Label) ให้กับข้อความ ทำให้อ่านง่ายที่สุดบนพื้นหลังใดๆ ก็ตาม
• ความรู้สึก: เป็นระเบียบ, ชัดเจน, ตั้งใจเน้นย้ำ

💡 สรุปการทำงานร่วมกัน (How They Work Together)

สิ่งที่ทรงพลังที่สุดคือการ “ผสมผสาน” องค์ประกอบเหล่านี้เพื่อสร้างอารมณ์ที่ต้องการ:

• ตัวอย่าง 1: งานวิชาการ / เป็นทางการ
  • ฟอนต์: Serif (เช่น Times New Roman) หรือ Sans Serif ที่ดูเคร่งขรึม (เช่น Arial)
  • สี: น้ำเงินเข้ม, เทา, ดำ บนพื้นขาว
  • เอฟเฟกต์: ไม่ใส่เลย (เน้นความสะอาดตา)
  • ความรู้สึก: น่าเชื่อถือ, จริงจัง, เป็นมืออาชีพ
• ตัวอย่าง 2: งานปาร์ตี้ / กิจกรรมสนุกๆ
  • ฟอนต์: Sans Serif ตัวหนาๆ มนๆ หรือ ฟอนต์ลายมือสนุกๆ
  • สี: โทนร้อน (ส้ม, เหลือง) ตัดกับสีสดใสอื่นๆ (เช่น ฟ้า)
  • เอฟเฟกต์: เงา (Shadow) เพื่อให้ดูนุ่มนวล หรือ ขอบ (Outline) เพื่อให้ดูเหมือนสติกเกอร์
  • ความรู้สึก: สนุกสนาน, มีพลัง, เป็นกันเอง
• ตัวอย่าง 3: งานหรูหรา / พรีเมียม
  • ฟอนต์: Script ที่อ่อนช้อย หรือ Serif ที่เส้นบางๆ
  • สี: ดำ, ขาว, ทอง, เงิน (ใช้สีน้อยแต่เน้น)
  • เอฟเฟกต์: อาจจะไม่ใส่เลย หรือใส่แค่ Lift (ยกขึ้น) บางๆ เพื่อให้ดูมีระดับ
  • ความรู้สึก: หรูหรา, มีราคา, พิถีพิถัน

สไลด์สอน จิตวิทยาของตัวอักษร สี และเอฟเฟกต์

https://gamma.app/docs/1-28ffzxip2xz1kgc