2. สมาชิก กลุ่ม ced2
นางสาวกมลรัตน์ ทองลา หัส 533410080301
นางสาวจิรารัตน์ เทศารินทร์ รหัส 533410080306
นางสาวสุวรรณี ปะทะโก รหัส 533410080330
นายชัยยา ปุริสมัย รหัส 533410080336
ปี 4 หมู่ 3
สาขาคอมพิวเตอร์ศึกษา
มหาวิทยาลัยราชภัฏมหาสารคาม
ภาคเรียนที่ 1 ปีการศึกษา 2556

3. คานา
เอกสารฉบับนี้จัดทาขึ้นเพื่อประกอบการเรียนวิชาโปรแกรมสร้างเว็ปเพื่อการศึกษา โดยมีจุดประสงค์
เพื่อการศึกษาความรู้เกี่ยวกับเรื่องทฤษฎีและ
การออกแบบเว็ปไซต์ ซึ่งจะนาความรู้ที่ได้จากเรื่องทฤษฎีและการออกแบบเว็ปไซต์ ไปประยุกต์ใช้ใน
ชีวิตประจาวัน
ทางคณะผู้จัดทาหวังเป็นอย่างยิ่งว่ารายงานฉบับนี้จะเป็นประโยชน์แก่ผู้ที่สนใจจะศึกษาไม่มากก็
น้อย หากรายงานฉบับนี้มีความผิดพลาดประการใดต้องขออภัยไว้ ณ โอกาสนี้

4. เว็บไซต์คือ
หน้าเว็บหลายหน้าที่เชื่อมต่อทางไฮเปอร์ลิงค์ ทาขึ้นเพื่อเสนอข้อมูลผ่านทาง internetให้เป็น
แหล่งข้อมูลต่างๆผ่านใน www
องค์ประกอบของการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ที่มีประสิทธิภาพนั้นต้องคานึงถึง องค์ประกอบสาคัญดังต่อไปนี้
1. ความเรียบง่าย (Simplicity)
หมายถึง การจากัดองค์ประกอบเสริมให้เหลือเฉพาะองค์ประกอบหลัก กล่าวคือในการสื่อสารเนื้อหา
กับผู้ใช้นั้น เราต้องเลือกเสนอสิ่งที่เราต้องการนาเสนอจริง ๆ ออกมาในส่วนของกราฟิก สีสัน ตัวอักษรและ
ภาพเคลื่อนไหว ต้องเลือกให้พอเหมาะ ถ้าหากมีมากเกินไปจะรบกวนสายตาและสร้างความคาราญต่อผู้ใช้
ตัวอย่างเว็บไซต์ที่ได้รับการออกแบบที่ดี ได้แก่ เว็บไซต์ของบริษัทใหญ่ ๆ อย่างเช่น Apple Adobe Microsoft
หรือ Kokia ที่มีการออกแบบเว็บไซต์ในรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานอย่างสะดวก
2. ความสม่าเสมอ ( Consistency)
หมายถึง การสร้างความสม่าเสมอให้เกิดขึ้นตลอดทั้งเว็บไซต์ โดยอาจเลือกใช้รูปแบบเดียวกันตลอด
ทั้งเว็บไซต์ก็ได้ เพราะถ้าหากว่าแต่ละหน้าในเว็บไซต์นั้นมีความแตกต่างกันมากจนเกินไป อาจทาให้ผู้ใช้เกิด
ความสับสนและไม่แน่ใจว่ากาลังอยู่ในเว็บไซต์เดิมหรือไม่ เพราะฉะนั้นการออกแบบเว็บไซต์ในแต่ละหน้าควรที่
จะมีรูปแบบ สไตล์ของกราฟิก ระบบเนวิเกชั่น (Navigation) และโทนสีที่มีความคล้ายคลึงกันตลอดทั้งเว็บไซต์
3. ความเป็นเอกลักษณ์ (Identity)
ในการออกแบบเว็บไซต์ต้องคานึงถึงลักษณะขององค์กรเป็นหลัก เนื่องจากเว็บไซต์จะสะท้อนถึง
เอกลักษณ์และลักษณะขององค์กร การเลือกใช้ตัวอักษร ชุดสี รูปภาพหรือกราฟิก จะมีผลต่อรูปแบบของ
เว็บไซต์เป็นอย่างมาก ตัวอย่างเช่น ถ้าเราต้องออกแบบเว็บไซต์ของธนาคารแต่เรากลับเลือกสีสันและกราฟิก
มากมาย อาจทาให้ผู้ใช้คิดว่าเป็นเว็บไซต์ของสวนสนุกซึ่งส่งผลต่อความเชื่อถือขององค์กรได้

5. 4. เนื้อหา (Useful Content)
ถือเป็นสิ่งสาคัญที่สุดในเว็บไซต์ เนื้อหาในเว็บไซต์ต้องสมบูรณ์และได้รับการปรับปรุงพัฒนาให้ทันสมัย
อยู่เสมอ ผู้พัฒนาต้องเตรียมข้อมูลและเนื้อหาที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ เนื้อหาที่สาคัญที่สุดคือ
เนื้อหาที่ทีมผู้พัฒนาสร้างสรรค์ขึ้นมาเอง และไม่ไปซ้ากับเว็บอื่น เพราะจะถือเป็นสิ่งที่ดึงดูดผู้ใช้ให้เข้ามา
เว็บไซต์ได้เสมอ แต่ถ้าเป็นเว็บที่ลิงค์ข้อมูลจากเว็บอื่น ๆ มาเมื่อใดก็ตามที่ผู้ใช้ทราบว่า ข้อมูลนั้นมาจากเว็บใด
ผู้ใช้ก็ไม่จาเป็นต้องกลับมาใช้งานลิงค์เหล่านั้นอีก
5. ระบบเนวิเกชั่น (User-Friendly Navigation)
เป็นส่วนประกอบที่มีความสาคัญต่อเว็บไซต์มาก เพราะจะช่วยไม่ให้ผู้ใช้เกิดความสับสนระหว่างดู
เว็บไซต์ ระบบเนวิเกชั่นจึงเปรียบเสมือนป้ายบอกทาง ดังนั้นการออกแบบเนวิเกชั่น จึงควรให้เข้าใจง่าย ใช้งาน
ได้สะดวก ถ้ามีการใช้กราฟิกก็ควรสื่อความหมาย ตาแหน่งของการวางเนวิเกชั่นก็ควรวางให้สม่าเสมอ เช่น อยู่
ตาแหน่งบนสุดของทุกหน้าเป็นต้น ซึ่งถ้าจะให้ดีเมื่อมีเนวิเกชั่นที่เป็นกราฟิกก็ควรเพิ่มระบบเนวิเกชั่นที่เป็น
ตัวอักษรไว้ส่วนล่างด้วย เพื่อช่วยอานวยความสะดวกให้กับผู้ใช้ที่ยกเลิกการแสดงผลภาพกราฟิกบนเว็บเบรา
เซอร์
6. คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์ (Visual Appeal)
ลักษณะที่น่าสนใจของเว็บไซต์นั้น ขึ้นอยู่กับความชอบส่วนบุคคลเป็นสาคัญ แต่โดยรวมแล้วก็สามารถ
สรุปได้ว่าเว็บไซต์ที่น่าสนใจนั้นส่วนประกอบต่าง ๆ ควรมีคุณภาพ เช่น กราฟิกควรสมบูรณ์ไม่มีรอยหรือขอบ
ขั้นบันได้ให้เห็น ชนิดตัวอักษรอ่านง่ายสบายตา มีการเลือกใช้โทนสีที่เข้ากันอย่างสวยงาม เป็นต้น
7. ความสะดวกของการใช้ในสภาพต่าง ๆ (Compatibility)
การใช้งานของเว็บไซต์นั้นไม่ควรมีขอบจากัด กล่าวคือ ต้องสามารถใช้งานได้ดีในสภาพแวดล้อมที่
หลากหลาย ไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมอื่นใดเพิ่มเติม นอกเหนือจากเว็บบราวเซอร์ ควรเป็นเว็บ
ที่แสดงผลได้ดีในทุกระบบปฏิบัติการ สามารถแสดงผลได้ในทุกความละเอียดหน้าจอ ซึ่งหากเป็นเว็บไซต์ที่มี
ผู้ใช้บริการมากและกลุ่มเป้าหมายหลากหลายควรให้ความสาคัญกับเรื่องนี้ให้มาก

6. 8. ความคงที่ในการออกแบบ (Design Stability)
ถ้าต้องการให้ผู้ใช้งานรู้สึกว่าเว็บไซต์มีคุณภาพ ถูกต้อง และเชื่อถือได้ ควรให้ความสาคัญกับการ
ออกแบบเว็บไซต์เป็นอย่างมาก ต้องออกแบบวางแผนและเรียบเรียงเนื้อหาอย่างรอบคอบ ถ้าเว็บที่จัดทาขึ้น
อย่างลวก ๆ ไม่มีมาตรฐานการออกแบบและระบบการจัดการข้อมูล ถ้ามีปัญหามากขึ้นอาจส่งผลให้เกิดปัญหา
และทาให้ผู้ใช้หมดความเชื่อถือ
9. ความคงที่ของการทางาน (Function Stability)
ระบบการทางานต่าง ๆ ในเว็บไซต์ควรมีความถูกต้องแน่นอน ซึ่งต้องได้รับการออกแบบสร้างสรรค์
และตรวจสอบอยู่เสมอ ตัวอย่างเช่น ลิงค์ต่าง ๆ ในเว็บไซต์ ต้องตรวจสอบว่ายังสามารถลิงค์ข้อมูลได้ถูกต้อง
หรือไม่ เพราะเว็บไซต์อื่นอาจมีการเปลี่ยนแปลงได้ตลอดเวลา ปัญหาที่เกิดจากลิงค์ ก็คือ ลิงค์ขาด ซึ่งพบได้
บ่อยเป็นปัญหาที่สร้างความราคาญกับผู้ใช้เป็นอย่างมาก
กระบวนของการออกแบบเว็บไซต์
กาหนดเป้าหมายของเว็บไซต์
ขั้นตอนแรกของการออกแบบเว็บไซต์ คือการกาหนดเป้าหมายของเว็บไซต์ให้แน่ชัดเสียก่อน เพื่อ
จะได้ออกแบบการใช้งานได้ตรงกับเป้าหมายที่ได้ตั้งเอาไว้ โดยทั่วไปมักจะเข้าใจว่าการทาเว็บไซต์มีจุดมุ่งหมาย
เพื่อบริการข้อมูลของหน่วยงานหรือองค์กรเท่านั้น แต่ในความเป็นจริงแล้ว เว็บไซต์แต่ละแห่งก็จะมีเป้าหมาย
ของตนเองแตกต่างกันออกไป

7. กาหนดกลุ่มผู้ใช้เป้าหมาย
ผู้ออกแบบเว็บไซต์จาเป็นต้องทราบกลุ่มผู้ใช้เป้าหมายที่เข้ามาใช้บริการเว็บไซต์ เพื่อที่จะได้
ตอบสนองความต้องการของผู้ใช้ได้อย่างชัดเจน ตัวอย่างเช่นเว็บไซต์ที่มีกลุ่มผู้ใช้หลากหลาย เช่น เซิร์ชเอ็นจิน
เว็บท่า และเว็บไดเรกทอรี่ แต่เว็บไซต์ส่วนใหญ่นั้นจะตอบสนองความต้องการเฉพาะกลุ่มเท่านั้น ไม่สาหรับทุก
คน เพราะคุณไม่สามารถตอบสนองความต้องการของคนที่หลากหลายได้ในเว็บไซต์เดียว
สิ่งที่ผู้ใช้ต้องการจากเว็บ
หลังจากที่ได้เป้าหมายและกลุ่มเป้าหมายของเว็บไซต์แล้ว ลาดับต่อไปคือการออกแบบเว็บไซต์เพื่อ
ดึงดูดผู้ใช้งานให้ได้นานที่สุด ด้วยการสร้างสิ่งที่น่าสนใจเพื่อดึงดูดผู้ใช้โดยทั่วไปแล้ว สิ่งที่ผู้ใช้คาดหวังจากการ
เข้าชมเว็บไซต์หนึ่ง ได้แก่
- ข้อมูลและการใช้งานที่เป็นประโยชน์
- ข่าวและข้อมูลที่น่าสนใจ
- การตอบสนองต่อผู้ใช้
- ความบันเทิง
- ของฟรี
ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์
เมื่อเราทราบถึงความต้องการที่ผู้ใช้ต้องการได้รับเมื่อเข้าชมเว็บไซต์หนึ่ง ๆ แล้ว เราก็ออกแบบ
เว็บไซต์ให้มีข้อมูลที่ผู้ใช้ต้องการ ซึ่งข้อมูลต่อไปนี้ เป็นสิ่งที่ผู้ใช้ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าไปชมเว็บไซต์
- ข้อมูลเกี่ยวกับข้อง
- รายละเอียดของผลิตภัณฑ์
- ข่าวความคืบหน้าและข่าวจากสื่อมวลชน
- คาถามยอดนิยม
- ข้อมูลในการติดต่อ

8. หลักการออกแบบเว็บไซต์
1.นาเสนอข้อมูลโดยจัดสีสันข้อความให้ดูสะดุดตาและมีรูปภาพประกอบ
2.หน้าแรกไม่ควรมีข้อมูลหรือรูปภาพใหญ่ๆมากเกินไป จะทาให้เว็บเปิดได้ช้าถ้าต้องการนาเสนอภาพ
ขนาดใหญ่ควรเริ่มต้นแสดงภาพเล็กก่อนแล้วทาลิงค์ให้คลิกเพื่อเปิดดูภาพใหญ่
3.มีภาพเคลื่อนไหวประกอบเพื่อโฆษณาประชาสัมพันธ์เพื่อดึงดูดความสนใจแต่ไม่ควรใส่มากเกินไปจะ
ทาให้ลายตา
4.หน้าเว็บที่มีภาพถ่ายควรใช้โปรแกรมกราฟิก เช่น Photoshop ลดขนาดไฟล์และบีบ%ลง ไม่ควรนา
ภาพจากกล้องขึ้นไปตรงๆเพราะขนาดไฟล์จะใหญ่มาก
5.อัพเดทข้อมูลหน้าเว็บเป็นระยะๆเพื่อไม่ให้ผู้ชมรู้สึกเบื่อ เช่น เพิ่มเนื้อหา ข่าวใหม่ เปลี่ยนสี เปลี่ยน
รูปภาพ ฯลฯ
6.ไม่ควรใส่เบอร์ อีเมลล์ไว้ที่หน้าเว็บไซต์เพราะจะทาให้เมลล์ขยะ (สแปม) ส่งเข้ามามาก ให้ใช้
แบบฟอร์มสาหรับติดต่อสอบถามแทน

9. การออกแบบโครงสร้างเว็บไซต์
เว็บไซต์ในปัจจุบัน จะมีหลักการอกแบบที่แตกต่างไม่มากนัก ซึ่งจะมีวิธีการออกแบบหน้าตาของ
เว็บไซต์อยู่ 3 รูปแบบ คือ
1.ออกแบบหน้าเว็บไซต์ที่เน้นการนาเสนอเนื้อหามากๆ
เป็นการออกแบบเว็บไซต์ที่มีการนาเสนอเนื้อหามากกว่ารูปภาพ โดยจะใช้โครงสร้างของตารางเป็นหลัก เพื่อ
ใส่ข้อความแบบหน้าสารบัญ และรูปภาพที่เป็นชิ้นเล็กๆได้
2.ออกแบบหน้าเว็บไซต์ที่เน้นภาพกราฟิกเป็นหลัก
เป็นการออกแบบเว็บไซต์ที่มีภาพกราฟิกที่สวยงามถูกจัดวางไว้ในหน้าโฮมเพจ ซึ่งแตกต่างจากข้อแรกมาก
เพราะจะไม่ค่อยมีข้อความในเว็บเพ็จ แต่จะเป็นการ Link ที่ภาพเพื่อเข้าไปยังหน้าเว็บเพ็จอื่นๆต่อไป การ
สร้างเว็บไซต์แบบนี้จะให้โปรแกรม Photoshop สาหรับตกแต่งภาพก่อนนาไปใช้บนหน้าเว็บ
3.ออกแบบหน้าเว็บไซต์ที่มีทั้งภาพและเนื้อหา
เป็นการออกแบบหน้าเว็บไซต์ที่ผสมกันระหว่างข้อ1 และ 2 ข้างต้น โดยจะเน้นการจัดวางภาพที่ตัดแบ่งเป็น
ชิ้นเล็กๆก่อน หลังจากนั้นจึงใส่ข้อความประกอบภาพลงไป เพื่อให้เว็บไซต์ของเรามีความสวยงามด้วย
ภาพกราฟิกที่นามาประกอบและใส่เนื้อหาได้อย่างสมบูรณ์ด้วยเว็บไซต์ (Web site)

10. ส่วนประกอบของหน้าเว็บไซต์
ส่วนประกอบของหน้าเว็บไซต์แบ่งออกเป็น 3 ส่วนหลักๆ คือ
1. ส่วนหัวของเว็บเพ็จ (Page Header)
เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สาคัญที่สุดของหน้า เพราะเป็นส่วนที่ดึงดูดผู้ชมให้
ติดตามเนื้อหาภายในเว็บไซต์มักใส่ภาพกราฟิกเพื่อสร้างความประทับใจส่วนใหญ่ประกอบด้วย
- โลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ได้เป็นอย่างดี และยังทาให้เว็บ
น่าเชื่อถือ
- ชื่อเว็บไซต์
- เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์
2.ส่วนของเนื้อหา (Page Body)
เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ซึ่งประกอบด้วยข้อความ,
ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ และอาจมีเมนูหลักหรือเมนูเฉพาะกลุ่มวางอยู่ในส่วนนี้ด้วย
สาหรับส่วนเนื้อหาควรแสดงใจความสาคัญที่เป็นหัวเรื่องไว้บนสุด ข้อมูลมีความกระชับ ใช้รูปแบบ
ตัวอักษรที่อ่านง่าย และจัด Layout ให้เหมาะสมและเป็นระเบียบ
3. ส่วนท้ายของหน้า (Page Footer)
เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้ มักวางระบบนาทางที่เป็นลิงค์ข้อความง่าย ๆ
และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น เจ้าของเว็บไซต์, ข้อความแสดงลิขสิทธิ์,
วิธีการติดต่อกับผู้ดูแลเว็บไซต์, คาแนะนาการใช้เว็บไซต์ เป็นต้น

11. รูปโครงสร้างเว็บไซต์ที่เหมาะสม
ส่วนประกอบย่อยอื่นๆ ที่จาเป็น
1. Text เป็นข้อความปกติ โดยเราสามารถตกแต่งให้สวยงามและมีลูกเล่นต่างๆ ดังเช่นโปรแกรม
ประมวลคา
2. Graphic ประกอบด้วยรูปภาพ ลายเส้น ลายพื้น ต่างๆ มากมาย
3. Multimedia ประกอบด้วยรูปภาพ ภาพเคลื่อนไหว และแฟ้มเสียง
4. Counter ใช้นับจานวนผู้ที่เข้ามาเยี่ยมชมเว็บไซต์ของเรา

12. 5. Cool Links ใช้เชื่อมโยงไปยังเว็บไซต์ของตนเองหรือเว็บไซต์ของคนอื่น
6. Forms เป็นแบบฟอร์มที่ให้ผู้เข้าเยี่ยมชม กรอกรายละเอียด แล้วส่งกลับมายังเว็บไซต์
7. Frames เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนก็จะแสดงข้อมูลที่แตกต่างกันและเป็นอิสระ
จากกัน
8. Image Maps เป็นรูปภาพขนาดใหญ่ที่กาหนดส่วนต่างๆ บนรูป เพื่อเชื่อมโยงไปยังเว็บไซต์อื่นๆ
9. Java Applets เป็นโปรแกรมสาเร็จรูปเล็กๆ ที่ใส่ลงในเว็บไซต์ เพื่อให้การใช้งานเว็บไซต์มี
ประสิทธิภาพมากยิ่งขึ้น
องค์ประกอบงานกราฟิก (Element of Design)
องค์ประกอบหลัก ๆ ในงานกราฟิกจะแบ่งออกเป็น 8 ชนิดคือ เส้น, รูปร่าง, รูปทรง, น้าหนัก, พื้นผิว,
ที่ว่าง, สี และตัวอักษร
เส้น (Line)
ลักษณะของเส้น (Line) แบบต่าง ๆ ตามตารางมาตรฐานแล้วจะพูดถึงเรื่องนี้ว่าเป็นเรื่องของจุด เส้น ระนาบ
แต่ถ้าจะเอาให้เข้าใจง่าย ๆ ก็เพียงแต่เข้าใจว่าความหมายของเส้นก็คือ การที่จุดหลาย ๆ จุด ถูกน มาวาง
ต่อเนื่องจนกลายเป็นเส้นรูปทรงต่าง ๆ ขึ้นมา รูปทรงของเส้นที่จะสื่อออกมาถึงความรู้สึกที่แตกต่างกันออกไป

13.  เส้นแนวนอน ให้ความรู้สึกสงบ ราบเรียบ
 เส้นตรงแนวตั้ง ให้ความรู้สึกมั่นคงแข็งแรง
 เส้นทแยง ให้ความรู้สึกไม่มั่นคง รวดเร็ว แสดงถึงเคลื่อนไหว
 เส้นตัดกัน ให้ความรู้สึกประสาน แข็งแกร่ง หนาแน่น
 เส้นโค้ง ให้ความรู้สึกอ่อนช้อย อ่อนน้อม
 เส้นประ ให้ความรู้สึก โปร่ง ไม่สมบูรณ์ หรือในบางกรณีอาจจะใช้เป็น
 สัญลักษณ์ในการแสดงถึงส่วนที่ถูกซ่อนเอาไว้
 เส้นโค้งก้นหอย ให้ความรู้สึกเคลื่อนไหวไม่มีที่สิ้นสุด
 เส้นโค้งแบบคลื่น ให้ความรู้สึกถึงการเคลื่อนไหวอย่างนิ่มนวล
 เส้นซิกแซ็ก ให้ความรู้สึก น่ากลัว อันตราย
ส่วนใหญ่แล้วเส้นจะมีอยู่ทุกๆ งานออกแบบ โดยถูกนาไปใช้ร่วมกับองค์ประกอบต่างๆ จนสื่อถึง
อารมณ์ของผลงานออกมาได้ ในแบบที่ต้องการ ดังนั้น การเลือกใช้เส้นเข้ามาเป็นส่วนประกอบในงานของเรา
จึงถือว่าเป็นสิ่งที่ต้องคานึงถึงเป็นอันดับแรก

14. รูปร่าง (Shape), รูปทรง (Form) ,น้าหนัก (Value)
รูปร่าง : เป็นองค์ประกอบต่อเนื่องมาจากเส้น เกิดจากการนาเส้นแบบต่าง ๆ มาต่อกันจนได้
รูปร่าง 2 มิติที่มีความกว้างและความยาว (หรือความสูง) ในทางศิลปะจะแบ่งรูปร่างออกเป็น 2 แบบ
คือ รูปร่างที่คุ้นตา แบบที่เห็นแล้วรู้เลยว่านั่นคืออะไร เช่นดอกไม้ หรือคน และอีกแบบหนึ่งจะเป็น
รูปร่างแบบฟรีฟอร์ม เป็นแนวที่ใช้รูปร่างสื่อความหมายที่จินตนาการไว้ออกมา ไม่มีรูปทรงที่แน่นอน
แต่ดูแล้วเกิดจินตนาการถึงอารมณ์ที่ต้องการสื่อได้
รูปทรง : เป็นรูปร่างที่มิติเพิ่มขึ้นมากลายเป็นงาน 3 มิติคือ มีความลึกเพิ่มเข้ามาด้วย
น้าหนัก : เป็นส่วนที่มาเสริมให้ดูออกว่ารูปทรงมีน้าหนักขนาดไหนเบา หรือหนัก ทึบ หรือ
โปร่งแสง น้าหนักจะเกิดจากการเติมสีและแสงแรเงาลงไปในรูปทรงจนได้ผลลัพธ์ออกมาตามที่
ต้องการ
ในการทางานกราฟิกรูปร่างจะมีผลอย่างมากต่ออารมณ์ของงาน เช่น ถ้าต้องการงานที่
อารมณ์ผู้หญิงจัด ๆ เพียงแค่ใส่รูปของดอกไม้ลงไปก็จะสามารถแสดงอารมณ์ได้อย่างชัดเจน หรือใน
งานที่ต้องการให้มีมิติมากขึ้นก็อาจจะเป็นรูปทรงของดอกไม้ในมุมมองที่แปลกตา ก็จะสามารถสื่อ
อารมณ์ที่ต้องการออกไปได้พร้อมกับเป็นการสร้างความน่าสนใจเพิ่มขึ้นมาอีกด้วย

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

16. ที่ว่าง (Space)
อาจจะจะเกิดจากความตั้งใจหรือไม่ตั้งใจของนักออกแบบก็ได้ ที่ว่างไม่ได้หมายความถึงพื้นที่ว่างเปล่า
ในงานเพียงอย่างเดียว แต่หมายถึงรวมไปถึงพื้นที่ที่ไม่สาคัญหรือ Background ด้วย ในการออกแบบงาน
กราฟิก ที่ว่างจะเป็นตัวช่วยในงานดูไม่หนักจนเกินไป และถ้าควบคุมพื้นที่ว่างนี้ให้ดี ๆ ที่ว่างก็จะเป็นตัวที่
ช่วยเสริมจุดเด่นให้เห็นได้ชัดเจนมากขึ้น
สี (Color)
สีของงานกราฟิก ถือเป็นหัวใจหลักสาคัญเลยก็ว่าได้ เพราะการเลือกใช้สีจะแสดงถึงอารมณ์ที่ต้องการ
ได้ชัดเจนมากกว่าส่วนประกอบอื่นๆ ทั้งหมด เช่น สีโทนร้อน สาหรับงานที่ต้องการความตื่นเต้น ท้าทาย
หรือสีโทนเย็นสาหรับงานต้องการให้ดูสุภาพ สบายๆ สาหรับเรื่องสีเป็นเรื่องที่ต้องพูดถึงละเอียดมากกง่า
หัวข้ออื่น ๆ ดังนั้นจึงขอยกไปอธิบายไว้เป็นเรื่องใหญ่ๆ ในหัวข้อต่อไป

17. ตัวอักษร (Type) ตัวอักษรเป็น
สิ่งสาคัญไม่เป็นรองใคร เมื่อต้องทางานกราฟิกดีไซน์ ในเรื่องงานกราฟิกที่ดีบางงาน นักออกแบบอาจจะใช้
เพียงแค่ตัวอักษรและสีเป็นส่วนประกอบเพียงสองอย่าง เพื่อสร้างสรรค์งานที่สามารถสื่อความหมายออกมา
ได้ในดีไซน์ที่สวยงาม ดังนั้น เรื่องนี้จะต้องยกไปอธิบายให้ละเอียดมากขึ้นในหัวข้อใหญ่ ๆ ต่อไปจากเรื่องสี
สีและการสื่อความหมายในอารมณ์ต่างๆ
ถ้าจะรู้จักสีให้ลึกซึ้งถึงขั้นเลือกใช้ได้อารมณ์ที่ต้องการได้ ก็ต้องมาทาความเข้าใจกับ 3 เรื่องเหล่านี้ คือ สีเกิด
จากอะไร, แต่ละสีมีความหมายอย่างไร และเทคนิคการนาสีไปใช้ให้ได้อย่างใจต้องการทาอย่างไรกันก่อน
สีเกิดจากอะไร?
ในปัจจุบันแหล่งกาเนิดสีจะมีอยู่ 3 ชนิดคือ
สีที่เกิดจาแสง เกิดจากการหักเหของแสงผ่านแท่งแก้วปริซึมมี 3 สีคือ สีแดง (Red), สีเขียว (Green) และสีน้า
เงิน (Blue) เรียกรวมกันว่า RGB นามาผสมกันจนเกิดเป็นสีสันต่าง ๆ มากมาย ตัวอย่างอุปกรณ์ที่ใช้
แหล่งกาเนิดสีแบบนี้ เช่น โทรทัศน์หรือจอคอมฯ ของเรานั่นเอง

18. สีเกิดจากหมึกสีในการพิมพ์ เกิดจากการผสมหมึกพิมพ์ทั้ง 4 สีในเครื่องพิมพ์คือ สีฟ้า, สีม่วงแดง, สี
เหลือง และสีดา เรียกรวมกันว่า CMYK จนได้ออกมาเป็นสีสันต่าง ๆ ตามที่ต้องการ ในการทางานกราฟิก ถ้า
หากว่าเป็นงานที่นาไปพิมพ์ตามแท่นพิมพ์แล้ว นักออกแบบก็ควรจะเลือกใช้โหมดสีแบบนี้ทุกครั้ง เพื่อให้ได้
ผลลัพธ์ที่ออกมาตรงกับที่เห็นในจอคอมฯ ที่ทางานอยู่
สีที่เกิดจากธรรมชาติเป็นสีที่ได้จากธรรมชาติ จากกระบวนการสังเคราะห์ทางเคมี 3 สีคือ สีแดง สี
เหลืองและสีน้าเงิน หลังจากนั้นจึงนามาผสมกันจนเกิดเป็นสีอื่นๆ แหล่งกาเนิดสีแบบที่เราเรียนกันมาในคลาส
ศิลปะตั้งแต่เด็กจนโต ที่เรียกกันว่าแม่สีก็คือสีแบบนี้นั่นเอง การผสมสีไว้ใช้งานจะใช้งานจะใช้วิธีผสมจากสีที่
เกิดจากสีที่เกิดธรรมชาติ โดยเริ่มผสมจากแม่สี หรือสีขั้นที่หนึ่ง ไปจนเป็นสีขั้นที่สองและขั้นที่สามตากลาดับ
ภาพแต่ละสีมีความหมายอย่างไร?

19. หลังจากรู้จักการผสมสีกันไปแล้ว ต่อไปก็จะต้องมารู้จักกับจิตวิทยาของสีที่จะมีผลต่ออารมณ์ของผู้พบ
เห็นกันสีอะไรให้ความรู้สึกอย่างไรบ้าง เราจะมาดูกันตามรายละเอียดต่อไปนี้
สีแดง ให้ความรู้สึกอันตราย เร่าร้อน รุนแรง มั่นคง อุดมสมบูรณ์
สีส้ม ให้ความรู้สึกสว่าง เร่าร้อน ฉูดฉาด
สีเหลือง ให้ความรู้สึกสว่าง สดใส สดชื่น ระวัง
สีเขียว ให้ความรู้สึกงอกงาม พักผ่อน สดชื่น
สีน้าเงิน ให้ความรู้สึกสงบ ผ่อนคลาย สง่างาม ทึม
สีม่วง ให้ความรู้สึกหนัก สงบ มีเลศนัย
สีน้าตาล ให้ความรู้สึกเก่า หนัก สงบเงียบ
สีขาว ให้ความรู้สึกบริสุทธิ์ สะอาด ใหม่ สดใส
สีดา ให้ความรู้สึกหนัก หดหู่ เศร้าใจ ทึบตัน
สีทองเงินและสีมันวาว แสดงถึงความรู้สึกมั่นคง
สีดากับสีขาว แสดงถึงความรู้สึกทางอารมณ์ที่ถูกกดดัน
สีเทาปานกลาง แสดงถึงความนิ่งเฉย สงบ
สีเขียวแก่ผสมสีเทา แสดงถึงความสลด รันทดใจ ชรา
สีสดและสีบาง ๆ ทุกชนิด แสดงความรู้สึก กระชุ่มกระชวย แจ่มใส
ความรู้สึกเกี่ยวกับสีที่กล่าวมาจะเป็นความรู้สึกแบบกลาง ๆ ที่เป็นส่วนใหญ่ในโลก แต่นอกจากที่กล่าว
มาแล้ว ในบางพื้นที่หรือบางวัฒนธรรม อิทธิพลของสีจะแตกต่างกันออกไปตามประสบการณ์ของแต่ละบุคคล
วัฒนธรรม ประเพณี ขนบธรรมเนียม หรือค่านิยมของแต่ละกลุ่มชน

20. ตัวอย่างภาพที่ออกแบบโดยการเลือกใช้สีต่างๆ
นอกจากแต่ละสีจะสร้างความรู้สึกด้วยตนเองแล้ว เมื่อนามาใช้ร่วมกันเรายังสามารถแบ่งสีออกเป็น 2 วรรณะ
เพื่อสร้างอารมณ์ที่แตกต่างกันออกไปเมื่อใช้งานร่วมกันได้อีกคือ สีทีอยู่ในวรรณะร้อน (Warm Tone
Color) ได้แก่ สีเหลืองส้ม สีส้ม สีแดง และสีม่วงแดง สีกลุ่มนี้เมื่อใช้ในงานจะรู้สึกอบอุ่น ร้อนแรง สนุกสนาน
สีที่อยู่ในวรรณะ (Cool Tone Color) ได้แก่ สีเขียว สีฟ้า สีม่วงคราม สีกลุ่มนี้เมื่อใช้งานจะได้ความรู้สึกสดชื่น
เย็นสบาย
การแบ่งสีออกเป็นสีโทนร้อนและสีโทนเย็น
ภาพตัวอย่างงานออกแบบสีโทนเย็น และสีโทนร้อน

21. เทคนิคการนาสีไปใช้งานมีอยู่มากมายหลายวิธี แต่ทุกวิธีจะชี้ไปที่วัตถุประสงค์เดียวหลัก ๆ คือ ใช้สี
เพิ่มความโดดเด่นให้กับจุดเด่นในภาพ และใช้สีตกแต่งส่วนอื่นๆ ของภาพให้ได้ภาพรวมออกมาในอารมณ์ที่
ต้องการ
เทคนิคการเลือกสีจะมีสูตรสาเร็จให้เลือกใช้งานอยู่บ้าง คือ วิธีโยงความสัมพันธ์จากวงล้อสี ก่อนนะ
ทางานทุกครั้ง และนาว่าให้เปิดไฟล์วงล้อสีขึ้นมา แล้วเลือกสีหลัก ๆ สาหรับใช้ในการทางานก่อน
เทคนิคการเลือกใช้สีแบบสูตรสาเร็จจะมีอยู่หลายรูปแบบ แต่แบบที่นิยมให้งานกันเป็นหลักจะมีอย่าง
4รูปแบบ คือ
Mono หรือเอกรงค์ จะเป็นการใช้สีที่ไปในโทนเดียวกันทั้งหมด เช่น จุดเด่นเป็นสีแดง สีส่วนที่เหลือ
จะเป็นสีที่ใกล้เคียงกับสีแดง โดยใช้วิธีลดน้าหนักความเข้มของสีแดงลงไป
Complement คือ สีที่ตัดกันหรือสีตรงกันข้าม เป็นสีที่อยู่ตรงข้ามกันในวงจรสีเช่น สีฟ้าจะตรงข้าม
กับสีส้ม หรือสีแดงจะตรงข้ามกับสีเขียว สามารถนามาใช้งานได้หลายอย่าง และก็สามารถส่งผลได้ทั้งดีและ
ไม่ดี หากไม่รู้หลักพื้นฐานในการใช้งาน การใช้สีตรงข้ามหรือสีตัดกัน ไม่ควรใช้ในพื้นที่ปริมาณเท่ากันในงาน
ควรใช้สีใดสีหนึ่งจานวน 80% อีกฝ่ายหนึ่งต้องเป็น 20% หรือ 70-30 โดยประมาณ บนพื้นที่ของงาน
โดยรวม จะทาให้ความตรงข้ามกันของพื้นที่น้อยกลายเป็นจุดเด่นของภาพ
Triad คือ การเลือกสีสามสีที่ระยะห่างเท่ากันเป็นสามเหลี่ยมด้านเท่ามาใช้งาน
Analogicหรือสีข้างเคียงกัน การเลือกสีใดสีหนึ่งขึ้นมาใช้งานพร้อมกับสีที่อยู่ติดกันอีกข้างละสี หรือก็
คือสีสามสีอยู่ติดกันในวงจรสีนั่นเอง

22. รู้จักตัวอักษรที่ใช้อยู่ให้ดีขึ้นอีกสักนิด (Typography)
สาหรับการเลือกใช้งานตัวอักษรที่เหมาะสม เราจะต้องมารู้จักกับคุณสมบัติหลัก ๆ ที่สาคัญของ
ตัวอักษร เช่น ส่วนประกอบหลัก ๆ และชนิดกันก่อน
Body & Proportion
Body หลัก ๆ จะประกอบไปด้วยตัว Body เอง และส่วนแขนขา และที่สาคัญที่สุดที่จะส่งผลถึงการ
เลือกใช้งาน Font ก็คือส่วนของ “เชิง” หรือ “Serif” (ในตัว Body ของ Font อาจจะแยกย่อยได้เป็นตา หรือ
ไหล่ได้อีก และในเบื้องต้นให้รู้จักกันไว้ในชื่อของ Body ก่อน)
ส่วนของ Proportion ของ Font จะหมายถึง ลักษณะการตกแต่งเพื่อนาไปใช้งาน เช่น ตัวหนา หรือ
ตังเอียง โดยปกติแล้ว Proportion ของ Font จะมีอยู่ 3 แบบคือ Normal คือ แบบปกติไม่ได้กาหนดอะไร
เพิ่มเติม Bold คือ แบบที่เป็นตัวหนาและ Italic คือ แบบที่เป็นตัวเอียง
นอกจากทั้ง 3 แบบที่กล่าวมาแล้ว ในบางครั้งอาจจะเจอแบบที่ย่อยลงไปอีก เช่น Bold Italic ที่เป็น
ตัวหนาและเอียงหรือ Narrow ที่มีลักษณะแคบๆ ผอมๆ ก็เป็นไปได้

23. วิธีเลือก Font ไปใช้ในงานออกแบบ
การเลือก Font ไปใช้ในงานออกแบบมีข้อควรคานึงง่าย ๆ อยู่ 2 ข้อคือ
1. ความหมายต้องเข้ากัน หมายความว่า ความหมายของคาและ Font ที่เลือกใช้ควรจะไปด้วยกันได้
เช่น คาว่าน่ารักก็ควรจะใช้ Font ที่ดูน่ารักไปด้วย ไม่ควรใช้ Font ที่ดูเป็นทางการดังภาพตัวอย่าง
2. อารมณ์ของฟอนต์ และอารมณ์ของงานต้องไปในทิศทางเดียวกัน เช่น งานที่ต้องการความ
น่าเชื่อถือก็จะเลือกใช้ Font แบบ Serif ที่ดูหนักแน่น น่าเชื่อถือ ส่วนงานที่ต้องการความฉูดฉาดอย่าง
โปสเตอร์ลดราคาก็ควรจะเลือกใช้ Font ที่เป็นกันเองไม่เป็นทางการมากนักอย่าง Font ในกลุ่ม Script เป็น
ต้น
ภาพตัวอย่าง อารมณ์ของฟอนต์ และอารมณ์ของงานที่เป็นไปในทิศทางเดียวกัน

24. นอกจากการเลือก Font มาใช้งานแล้ว การวางตาแหน่งตัวอักษรก็เป็นอีกเรื่องหนึ่งที่มีความสาคัญกับ
การทางาน สาหรับการวางตาแหน่งตัวอักษร มีข้อควรคานึงถึงไว้ให้อยู่ 3 ข้อคือ
1. ธรรมชาติการอ่านของคนไทยจะอ่านจากซ้ายไปขวา และบนลงล่าง โดยมีรัศมีการกวาดสายตา
ตามลาดับ ดังนั้นถ้าอยากให้อ่านง่าย ควรจะวางเรียงลาดับให้ดีด้วย ไม่เช่นนั้นจะเป็นการอ่านข้ามไปข้ามมาทา
ให้เสียความหมายของข้อความไป
2. จุดเด่นควรจะมีเพียงจุดเดียว หรือพูดง่าย ๆ ก็คือ มีตัวอักษรตัวใหญ่ๆ อยู่เพียงชุดเดียว จึงจะเป็น
จุดเด่นที่มองเห็นได้ง่าย ไม่สับสน ส่วนจุดอื่น ๆ ขนาดควรจะเล็กลงมาตามลาดับความสาคัญ
3. ไม่ควรใช้ Font หลากหลายรูปแบบเกินไป จะทาให้กลายเป็นงานที่อ่านยากและชวนปวดศีรษะ
มากกว่าชวนอ่าน ถ้าจาเป็นจริง ๆ แนะนาให้ใช้ Font เดิมแต่ไม่ตกแต่งพวกขนาด, ความหนาหรือกาหนดให้
เอียงบ้าง เพื่อเพิ่มความน่าสนใจไม่ให้งานดูน่าเบื่อแบบนี้จะดีกว่า