สมาชก กลม ced2

นางสาวกมลรตน ทองลา หส 533410080301

นางสาวจรารตน เทศารนทร รหส 533410080306

นางสาวสวรรณ ปะทะโก รหส 533410080330

นายชยยา ปรสมย รหส 533410080336

ป 4 หม 3

สาขาคอมพวเตอรศกษา

มหาวทยาลยราชภฏมหาสารคาม

ภาคเรยนท 1 ปการศกษา 2556

ค าน า

เอกสารฉบบนจดท าขนเพอประกอบการเรยนวชาโปรแกรมสรางเวปเพอการศกษา โดยมจดประสงค

เพอการศกษาความรเกยวกบเรองทฤษฎและ

การออกแบบเวปไซต ซงจะน าความรทไดจากเรองทฤษฎและการออกแบบเวปไซต ไปประยกตใชใน

ชวตประจ าวน

ทางคณะผจดท าหวงเปนอยางยงวารายงานฉบบนจะเปนประโยชนแกผทสนใจจะศกษาไมมากก

นอย หากรายงานฉบบนมความผดพลาดประการใดตองขออภยไว ณ โอกาสน

เวบไซตคอ

หนาเวบหลายหนาทเชอมตอทางไฮเปอรลงค ท าขนเพอเสนอขอมลผานทาง internetใหเปน

แหลงขอมลตางๆผานใน www

องคประกอบของการออกแบบเวบไซต

การออกแบบเวบไซตทมประสทธภาพนนตองค านงถง องคประกอบส าคญดงตอไปน

1. ความเรยบงาย (Simplicity)

หมายถง การจ ากดองคประกอบเสรมใหเหลอเฉพาะองคประกอบหลก กลาวคอในการสอสารเนอหา

กบผใชนน เราตองเลอกเสนอสงทเราตองการน าเสนอจรง ๆ ออกมาในสวนของกราฟก สสน ตวอกษรและ

ภาพเคลอนไหว ตองเลอกใหพอเหมาะ ถาหากมมากเกนไปจะรบกวนสายตาและสรางความค าราญตอผใช

ตวอยางเวบไซตทไดรบการออกแบบทด ไดแก เวบไซตของบรษทใหญ ๆ อยางเชน Apple Adobe Microsoft

หรอ Kokia ทมการออกแบบเวบไซตในรปแบบทเรยบงาย ไมซบซอน และใชงานอยางสะดวก

2. ความสม าเสมอ ( Consistency)

หมายถง การสรางความสม าเสมอใหเกดขนตลอดทงเวบไซต โดยอาจเลอกใชรปแบบเดยวกนตลอด

ทงเวบไซตกได เพราะถาหากวาแตละหนาในเวบไซตนนมความแตกตางกนมากจนเกนไป อาจท าใหผใชเกด

ความสบสนและไมแนใจวาก าลงอยในเวบไซตเดมหรอไม เพราะฉะนนการออกแบบเวบไซตในแตละหนาควรท

จะมรปแบบ สไตลของกราฟก ระบบเนวเกชน (Navigation) และโทนสทมความคลายคลงกนตลอดทงเวบไซต

3. ความเปนเอกลกษณ (Identity)

ในการออกแบบเวบไซตตองค านงถงลกษณะขององคกรเปนหลก เนองจากเวบไซตจะสะทอนถง

เอกลกษณและลกษณะขององคกร การเลอกใชตวอกษร ชดส รปภาพหรอกราฟก จะมผลตอรปแบบของ

เวบไซตเปนอยางมาก ตวอยางเชน ถาเราตองออกแบบเวบไซตของธนาคารแตเรากลบเลอกสสนและกราฟก

มากมาย อาจท าใหผใชคดวาเปนเวบไซตของสวนสนกซงสงผลตอความเชอถอขององคกรได

4. เนอหา (Useful Content)

ถอเปนสงส าคญทสดในเวบไซต เนอหาในเวบไซตตองสมบรณและไดรบการปรบปรงพฒนาใหทนสมย

อยเสมอ ผพฒนาตองเตรยมขอมลและเนอหาทผใชตองการใหถกตองและสมบรณ เนอหาทส าคญทสดคอ

เนอหาททมผพฒนาสรางสรรคขนมาเอง และไมไปซ ากบเวบอน เพราะจะถอเปนสงทดงดดผใชใหเขามา

เวบไซตไดเสมอ แตถาเปนเวบทลงคขอมลจากเวบอน ๆ มาเมอใดกตามทผใชทราบวา ขอมลนนมาจากเวบใด

ผใชกไมจ าเปนตองกลบมาใชงานลงคเหลานนอก

5. ระบบเนวเกชน (User-Friendly Navigation)

เปนสวนประกอบทมความส าคญตอเวบไซตมาก เพราะจะชวยไมใหผใชเกดความสบสนระหวางด

เวบไซต ระบบเนวเกชนจงเปรยบเสมอนปายบอกทาง ดงนนการออกแบบเนวเกชน จงควรใหเขาใจงาย ใชงาน

ไดสะดวก ถามการใชกราฟกกควรสอความหมาย ต าแหนงของการวางเนวเกชนกควรวางใหสม าเสมอ เชน อย

ต าแหนงบนสดของทกหนาเปนตน ซงถาจะใหดเมอมเนวเกชนทเปนกราฟกกควรเพมระบบเนวเกชนทเปน

ตวอกษรไวสวนลางดวย เพอชวยอ านวยความสะดวกใหกบผใชทยกเลกการแสดงผลภาพกราฟกบนเวบเบรา

เซอร

6. คณภาพของสงทปรากฏใหเหนในเวบไซต (Visual Appeal)

ลกษณะทนาสนใจของเวบไซตนน ขนอยกบความชอบสวนบคคลเปนส าคญ แตโดยรวมแลวกสามารถ

สรปไดวาเวบไซตทนาสนใจนนสวนประกอบตาง ๆ ควรมคณภาพ เชน กราฟกควรสมบรณไมมรอยหรอขอบ

ขนบนไดใหเหน ชนดตวอกษรอานงายสบายตา มการเลอกใชโทนสทเขากนอยางสวยงาม เปนตน

7. ความสะดวกของการใชในสภาพตาง ๆ (Compatibility)

การใชงานของเวบไซตนนไมควรมขอบจ ากด กลาวคอ ตองสามารถใชงานไดดในสภาพแวดลอมท

หลากหลาย ไมมการบงคบใหผใชตองตดตงโปรแกรมอนใดเพมเตม นอกเหนอจากเวบบราวเซอร ควรเปนเวบ

ทแสดงผลไดดในทกระบบปฏบตการ สามารถแสดงผลไดในทกความละเอยดหนาจอ ซงหากเปนเวบไซตทม

ผใชบรการมากและกลมเปาหมายหลากหลายควรใหความส าคญกบเรองนใหมาก

8. ความคงทในการออกแบบ (Design Stability)

ถาตองการใหผใชงานรสกวาเวบไซตมคณภาพ ถกตอง และเชอถอได ควรใหความส าคญกบการ

ออกแบบเวบไซตเปนอยางมาก ตองออกแบบวางแผนและเรยบเรยงเนอหาอยางรอบคอบ ถาเวบทจดท าขน

อยางลวก ๆ ไมมมาตรฐานการออกแบบและระบบการจดการขอมล ถามปญหามากขนอาจสงผลใหเกดปญหา

และท าใหผใชหมดความเชอถอ

9. ความคงทของการท างาน (Function Stability)

ระบบการท างานตาง ๆ ในเวบไซตควรมความถกตองแนนอน ซงตองไดรบการออกแบบสรางสรรค

และตรวจสอบอยเสมอ ตวอยางเชน ลงคตาง ๆ ในเวบไซต ตองตรวจสอบวายงสามารถลงคขอมลไดถกตอง

หรอไม เพราะเวบไซตอนอาจมการเปลยนแปลงไดตลอดเวลา ปญหาทเกดจากลงค กคอ ลงคขาด ซงพบได

บอยเปนปญหาทสรางความร าคาญกบผใชเปนอยางมาก

กระบวนของการออกแบบเวบไซต

ก าหนดเปาหมายของเวบไซต

ขนตอนแรกของการออกแบบเวบไซต คอการก าหนดเปาหมายของเวบไซตใหแนชดเสยกอน เพอ

จะไดออกแบบการใชงานไดตรงกบเปาหมายทไดตงเอาไว โดยทวไปมกจะเขาใจวาการท าเวบไซตมจดมงหมาย

เพอบรการขอมลของหนวยงานหรอองคกรเทานน แตในความเปนจรงแลว เวบไซตแตละแหงกจะมเปาหมาย

ของตนเองแตกตางกนออกไป

ก าหนดกลมผใชเปาหมาย

ผออกแบบเวบไซตจ าเปนตองทราบกลมผใชเปาหมายทเขามาใชบรการเวบไซต เพอทจะได

ตอบสนองความตองการของผใชไดอยางชดเจน ตวอยางเชนเวบไซตทมกลมผใชหลากหลาย เชน เซรชเอนจน

เวบทา และเวบไดเรกทอร แตเวบไซตสวนใหญนนจะตอบสนองความตองการเฉพาะกลมเทานน ไมส าหรบทก

คน เพราะคณไมสามารถตอบสนองความตองการของคนทหลากหลายไดในเวบไซตเดยว

สงทผใชตองการจากเวบ

หลงจากทไดเปาหมายและกลมเปาหมายของเวบไซตแลว ล าดบตอไปคอการออกแบบเวบไซตเพอ

ดงดดผใชงานใหไดนานทสด ดวยการสรางสงทนาสนใจเพอดงดดผใชโดยทวไปแลว สงทผใชคาดหวงจากการ

เขาชมเวบไซตหนง ไดแก

- ขอมลและการใชงานทเปนประโยชน

- ขาวและขอมลทนาสนใจ

- การตอบสนองตอผใช

- ความบนเทง

- ของฟร

ขอมลหลกทควรมอยในเวบไซต

เมอเราทราบถงความตองการทผใชตองการไดรบเมอเขาชมเวบไซตหนง ๆ แลว เรากออกแบบ

เวบไซตใหมขอมลทผใชตองการ ซงขอมลตอไปน เปนสงทผใชสวนใหญคาดหวงจะไดรบเมอเขาไปชมเวบไซต

- ขอมลเกยวกบของ

- รายละเอยดของผลตภณฑ

- ขาวความคบหนาและขาวจากสอมวลชน

- ค าถามยอดนยม

- ขอมลในการตดตอ

หลกการออกแบบเวบไซต

1.น าเสนอขอมลโดยจดสสนขอความใหดสะดดตาและมรปภาพประกอบ

2.หนาแรกไมควรมขอมลหรอรปภาพใหญๆมากเกนไป จะท าใหเวบเปดไดชาถาตองการน าเสนอภาพ

ขนาดใหญควรเรมตนแสดงภาพเลกกอนแลวท าลงคใหคลกเพอเปดดภาพใหญ

3.มภาพเคลอนไหวประกอบเพอโฆษณาประชาสมพนธเพอดงดดความสนใจแตไมควรใสมากเกนไปจะ

ท าใหลายตา

4.หนาเวบทมภาพถายควรใชโปรแกรมกราฟก เชน Photoshop ลดขนาดไฟลและบบ%ลง ไมควรน า

ภาพจากกลองขนไปตรงๆเพราะขนาดไฟลจะใหญมาก

5.อพเดทขอมลหนาเวบเปนระยะๆเพอไมใหผชมรสกเบอ เชน เพมเนอหา ขาวใหม เปลยนส เปลยน

รปภาพ ฯลฯ

6.ไมควรใสเบอร อเมลลไวทหนาเวบไซตเพราะจะท าใหเมลลขยะ (สแปม) สงเขามามาก ใหใช

แบบฟอรมส าหรบตดตอสอบถามแทน

การออกแบบโครงสรางเวบไซต

เวบไซตในปจจบน จะมหลกการอกแบบทแตกตางไมมากนก ซงจะมวธการออกแบบหนาตาของ

เวบไซตอย 3 รปแบบ คอ

1.ออกแบบหนาเวบไซตทเนนการน าเสนอเนอหามากๆ

เปนการออกแบบเวบไซตทมการน าเสนอเนอหามากกวารปภาพ โดยจะใชโครงสรางของตารางเปนหลก เพอ

ใสขอความแบบหนาสารบญ และรปภาพทเปนชนเลกๆได

2.ออกแบบหนาเวบไซตทเนนภาพกราฟกเปนหลก

เปนการออกแบบเวบไซตทมภาพกราฟกทสวยงามถกจดวางไวในหนาโฮมเพจ ซงแตกตางจากขอแรกมาก

เพราะจะไมคอยมขอความในเวบเพจ แตจะเปนการ Link ทภาพเพอเขาไปยงหนาเวบเพจอนๆตอไป การ

สรางเวบไซตแบบนจะใหโปรแกรม Photoshop ส าหรบตกแตงภาพกอนน าไปใชบนหนาเวบ

3.ออกแบบหนาเวบไซตทมทงภาพและเนอหา

เปนการออกแบบหนาเวบไซตทผสมกนระหวางขอ1 และ 2 ขางตน โดยจะเนนการจดวางภาพทตดแบงเปน

ชนเลกๆกอน หลงจากนนจงใสขอความประกอบภาพลงไป เพอใหเวบไซตของเรามความสวยงามดวย

ภาพกราฟกทน ามาประกอบและใสเนอหาไดอยางสมบรณดวยเวบไซต (Web site)

สวนประกอบของหนาเวบไซต

สวนประกอบของหนาเวบไซตแบงออกเปน 3 สวนหลกๆ คอ

1. สวนหวของเวบเพจ (Page Header)

เปนสวนทอยตอนบนสดของหนา และเปนสวนทส าคญทสดของหนา เพราะเปนสวนทดงดดผชมให

ตดตามเนอหาภายในเวบไซตมกใสภาพกราฟกเพอสรางความประทบใจสวนใหญประกอบดวย

- โลโก (Logo) เปนสงทเวบไซตควรม เปนตวแทนของเวบไซตไดเปนอยางด และยงท าใหเวบ

นาเชอถอ

- ชอเวบไซต

- เมนหลกหรอลงค (Navigation Bar) เปนจดเชอมโยงไปสเนอหาของเวบไซต

2.สวนของเนอหา (Page Body)

เปนสวนทอยตอนกลางของหนา ใชแสดงขอมลเนอหาของเวบไซต ซงประกอบดวยขอความ ,

ตารางขอมล ภาพกราฟก วดโอ และอนๆ และอาจมเมนหลกหรอเมนเฉพาะกลมวางอยในสวนนดวย

ส าหรบสวนเนอหาควรแสดงใจความส าคญทเปนหวเรองไวบนสด ขอมลมความกระชบ ใชรปแบบ

ตวอกษรทอานงาย และจด Layout ใหเหมาะสมและเปนระเบยบ

3. สวนทายของหนา (Page Footer)

เปนสวนทอยดานลางสดของหนา จะมหรอไมมกได มกวางระบบน าทางทเปนลงคขอความงาย ๆ

และอาจแสดงขอมลเพมเตมเกยวกบเนอหาภายในเวบไซต เชน เจาของเวบไซต, ขอความแสดงลขสทธ,

วธการตดตอกบผดแลเวบไซต, ค าแนะน าการใชเวบไซต เปนตน

รปโครงสรางเวบไซตทเหมาะสม

สวนประกอบยอยอนๆ ทจ าเปน

1. Text เปนขอความปกต โดยเราสามารถตกแตงใหสวยงามและมลกเลนตางๆ ดงเชนโปรแกรม

ประมวลค า

2. Graphic ประกอบดวยรปภาพ ลายเสน ลายพน ตางๆ มากมาย

3. Multimedia ประกอบดวยรปภาพ ภาพเคลอนไหว และแฟมเสยง

4. Counter ใชนบจ านวนผทเขามาเยยมชมเวบไซตของเรา

5. Cool Links ใชเชอมโยงไปยงเวบไซตของตนเองหรอเวบไซตของคนอน

6. Forms เปนแบบฟอรมทใหผเขาเยยมชม กรอกรายละเอยด แลวสงกลบมายงเวบไซต

7. Frames เปนการแบงจอภาพเปนสวนๆ แตละสวนกจะแสดงขอมลทแตกตางกนและเปนอสระ

จากกน

8. Image Maps เปนรปภาพขนาดใหญทก าหนดสวนตางๆ บนรป เพอเชอมโยงไปยงเวบไซตอนๆ

9. Java Applets เปนโปรแกรมส าเรจรปเลกๆ ทใสลงในเวบไซต เพอใหการใชงานเวบไซตม

ประสทธภาพมากยงขน

องคประกอบงานกราฟก (Element of Design)

องคประกอบหลก ๆ ในงานกราฟกจะแบงออกเปน 8 ชนดคอ เสน, รปราง, รปทรง, น าหนก, พนผว,

ทวาง, ส และตวอกษร

เสน (Line)

ลกษณะของเสน (Line) แบบตาง ๆ ตามตารางมาตรฐานแลวจะพดถงเรองนวาเปนเรองของจด เสน ระนาบ

แตถาจะเอาใหเขาใจงาย ๆ กเพยงแตเขาใจวาความหมายของเสนกคอ การทจดหลาย ๆ จด ถกน มาวาง

ตอเนองจนกลายเปนเสนรปทรงตาง ๆ ขนมา รปทรงของเสนทจะสอออกมาถงความรสกทแตกตางกนออกไป

เสนแนวนอน ใหความรสกสงบ ราบเรยบ

เสนตรงแนวตง ใหความรสกมนคงแขงแรง

เสนทแยง ใหความรสกไมมนคง รวดเรว แสดงถงเคลอนไหว

เสนตดกน ใหความรสกประสาน แขงแกรง หนาแนน

เสนโคง ใหความรสกออนชอย ออนนอม

เสนประ ใหความรสก โปรง ไมสมบรณ หรอในบางกรณอาจจะใชเปน

สญลกษณในการแสดงถงสวนทถกซอนเอาไว

เสนโคงกนหอย ใหความรสกเคลอนไหวไมมทสนสด

เสนโคงแบบคลน ใหความรสกถงการเคลอนไหวอยางนมนวล

เสนซกแซก ใหความรสก นากลว อนตราย

สวนใหญแลวเสนจะมอยทกๆ งานออกแบบ โดยถกน าไปใชรวมกบองคประกอบตางๆ จนสอถง

อารมณของผลงานออกมาได ในแบบทตองการ ดงนน การเลอกใชเสนเขามาเปนสวนประกอบในงานของเรา

จงถอวาเปนสงทตองค านงถงเปนอนดบแรก

รปราง (Shape), รปทรง (Form) ,น าหนก (Value)

รปราง : เปนองคประกอบตอเนองมาจากเสน เกดจากการน าเสนแบบตาง ๆ มาตอกนจนได

รปราง 2 มตทมความกวางและความยาว (หรอความสง) ในทางศลปะจะแบงรปรางออกเปน 2 แบบ

คอ รปรางทคนตา แบบทเหนแลวรเลยวานนคออะไร เชนดอกไม หรอคน และอกแบบหนงจะเปน

รปรางแบบฟรฟอรม เปนแนวทใชรปรางสอความหมายทจนตนาการไวออกมา ไมมรปทรงทแนนอน

แตดแลวเกดจนตนาการถงอารมณทตองการสอได

รปทรง : เปนรปรางทมตเพมขนมากลายเปนงาน 3 มตคอ มความลกเพมเขามาดวย

น าหนก : เปนสวนทมาเสรมใหดออกวารปทรงมน าหนกขนาดไหนเบา หรอหนก ทบ หรอ

โปรงแสง น าหนกจะเกดจากการเตมสและแสงแรเงาลงไปในรปทรงจนไดผลลพธออกมาตามท

ตองการ

ในการท างานกราฟกรปรางจะมผลอยางมากตออารมณของงาน เชน ถาตองการงานท

อารมณผหญงจด ๆ เพยงแคใสรปของดอกไมลงไปกจะสามารถแสดงอารมณไดอยางชดเจน หรอใน

งานทตองการใหมมตมากขนกอาจจะเปนรปทรงของดอกไมในมมมองทแปลกตา กจะสามารถสอ

อารมณทตองการออกไปไดพรอมกบเปนการสรางความนาสนใจเพมขนมาอกดวย

พนผว (Texture)

ในงานออกแบบกราฟก พนผวจะเปนอกหนงองคประกอบทชวยสออารมณของงานออกมาไดชดเจน

มากขน เชน ถาเราเลอกพมพงานลงในกระดาษ Glossy ทเงาและแวววาว งานนนจะสอกอกไปไดทนทวา

“หร มระดบ” หรอ ถาเราใสลวดลายทดคลาย ๆ สนม หรอรอยเปอนลงไปในงานกจะสอไดทนทถง “ความ

เกา” ดงนนในการท างาน นกออกแบบจงควรเลอกสรางพนผวทงในองคประกอบตาง ๆ ทใสลงไปในภาพ

รวมทงวสดทใชพมพงานดงกลาวลงไป กจะสามารถชวยสอความหมายทตองการไดอยางเหมาะสม

ทวาง (Space)

อาจจะจะเกดจากความตงใจหรอไมตงใจของนกออกแบบกได ทวางไมไดหมายความถงพนทวางเปลา

ในงานเพยงอยางเดยว แตหมายถงรวมไปถงพนททไมส าคญหรอ Background ดวย ในการออกแบบงาน

กราฟก ทวางจะเปนตวชวยในงานดไมหนกจนเกนไป และถาควบคมพนทวางนใหด ๆ ทวางกจะเปนตวท

ชวยเสรมจดเดนใหเหนไดชดเจนมากขน

ส (Color)

สของงานกราฟก ถอเปนหวใจหลกส าคญเลยกวาได เพราะการเลอกใชสจะแสดงถงอารมณทตองการ

ไดชดเจนมากกวาสวนประกอบอนๆ ทงหมด เชน สโทนรอน สาหรบงานทตองการความตนเตน ทาทาย

หรอสโทนเยนสาหรบงานตองการใหดสภาพ สบายๆ ส าหรบเรองสเปนเรองทตองพดถงละเอยดมากกงา

หวขออน ๆ ดงนนจงขอยกไปอธบายไวเปนเรองใหญๆ ในหวขอตอไป

ตวอกษร (Type) ตวอกษรเปน

สงส าคญไมเปนรองใคร เมอตองทางานกราฟกดไซน ในเรองงานกราฟกทดบางงาน นกออกแบบอาจจะใช

เพยงแคตวอกษรและสเปนสวนประกอบเพยงสองอยาง เพอสรางสรรคงานทสามารถสอความหมายออกมา

ไดในดไซนทสวยงาม ดงนน เรองนจะตองยกไปอธบายใหละเอยดมากขนในหวขอใหญ ๆ ตอไปจากเรองส

สและการสอความหมายในอารมณตางๆ

ถาจะรจกสใหลกซงถงขนเลอกใชไดอารมณทตองการได กตองมาทาความเขาใจกบ 3 เรองเหลาน คอ สเกด

จากอะไร, แตละสมความหมายอยางไร และเทคนคการนาสไปใชใหไดอยางใจตองการท าอยางไรกนกอน

สเกดจากอะไร?

ในปจจบนแหลงก าเนดสจะมอย 3 ชนดคอ

สทเกดจ าแสง เกดจากการหกเหของแสงผานแทงแกวปรซมม 3 สคอ สแดง (Red), สเขยว (Green) และสนา

เงน (Blue) เรยกรวมกนวา RGB นามาผสมกนจนเกดเปนสสนตาง ๆ มากมาย ตวอยางอปกรณทใช

แหลงก าเนดสแบบน เชน โทรทศนหรอจอคอมฯ ของเรานนเอง

สเกดจากหมกสในการพมพ เกดจากการผสมหมกพมพทง 4 สในเครองพมพคอ สฟา, สมวงแดง, ส

เหลอง และสด า เรยกรวมกนวา CMYK จนไดออกมาเปนสสนตาง ๆ ตามทตองการ ในการทางานกราฟก ถา

หากวาเปนงานทนาไปพมพตามแทนพมพแลว นกออกแบบกควรจะเลอกใชโหมดสแบบนทกครง เพอใหได

ผลลพธทออกมาตรงกบทเหนในจอคอมฯ ทท างานอย

สทเกดจากธรรมชาตเปนสทไดจากธรรมชาต จากกระบวนการสงเคราะหทางเคม 3 สคอ สแดง ส

เหลองและสนาเงน หลงจากนนจงนามาผสมกนจนเกดเปนสอนๆ แหลงก าเนดสแบบทเราเรยนกนมาในคลาส

ศลปะตงแตเดกจนโต ทเรยกกนวาแมสกคอสแบบนนนเอง การผสมสไวใชงานจะใชงานจะใชวธผสมจากสท

เกดจากสทเกดธรรมชาต โดยเรมผสมจากแมส หรอสขนทหนง ไปจนเปนสขนทสองและขนทสามตากลาดบ

ภาพแตละสมความหมายอยางไร?

หลงจากรจกการผสมสกนไปแลว ตอไปกจะตองมารจกกบจตวทยาของสทจะมผลตออารมณของผพบ

เหนกนสอะไรใหความรสกอยางไรบาง เราจะมาดกนตามรายละเอยดตอไปน

สแดง ใหความรสกอนตราย เรารอน รนแรง มนคง อดมสมบรณ

สสม ใหความรสกสวาง เรารอน ฉดฉาด

สเหลอง ใหความรสกสวาง สดใส สดชน ระวง

สเขยว ใหความรสกงอกงาม พกผอน สดชน

สน าเงน ใหความรสกสงบ ผอนคลาย สงางาม ทม

สมวง ใหความรสกหนก สงบ มเลศนย

สน าตาล ใหความรสกเกา หนก สงบเงยบ

สขาว ใหความรสกบรสทธ สะอาด ใหม สดใส

สด า ใหความรสกหนก หดห เศราใจ ทบตน

สทองเงนและสมนวาว แสดงถงความรสกมนคง

สด ากบสขาว แสดงถงความรสกทางอารมณทถกกดดน

สเทาปานกลาง แสดงถงความนงเฉย สงบ

สเขยวแกผสมสเทา แสดงถงความสลด รนทดใจ ชรา

สสดและสบาง ๆ ทกชนด แสดงความรสก กระชมกระชวย แจมใส

ความรสกเกยวกบสทกลาวมาจะเปนความรสกแบบกลาง ๆ ทเปนสวนใหญในโลก แตนอกจากทกลาว

มาแลว ในบางพนทหรอบางวฒนธรรม อทธพลของสจะแตกตางกนออกไปตามประสบการณของแตละบคคล

วฒนธรรม ประเพณ ขนบธรรมเนยม หรอคานยมของแตละกลมชน

ตวอยางภาพทออกแบบโดยการเลอกใชสตางๆ

นอกจากแตละสจะสรางความรสกดวยตนเองแลว เมอนามาใชรวมกนเรายงสามารถแบงสออกเปน 2 วรรณะ

เพอสรางอารมณทแตกตางกนออกไปเมอใชงานรวมกนไดอกคอ สทอยในวรรณะรอน (Warm Tone

Color) ไดแก สเหลองสม สสม สแดง และสมวงแดง สกลมนเมอใชในงานจะรสกอบอน รอนแรง สนกสนาน

สทอยในวรรณะ (Cool Tone Color) ไดแก สเขยว สฟา สมวงคราม สกลมนเมอใชงานจะไดความรสกสดชน

เยนสบาย

การแบงสออกเปนสโทนรอนและสโทนเยน

ภาพตวอยางงานออกแบบสโทนเยน และสโทนรอน

เทคนคการนาสไปใชงานมอยมากมายหลายวธ แตทกวธจะชไปทวตถประสงคเดยวหลก ๆ คอ ใชส

เพมความโดดเดนใหกบจดเดนในภาพ และใชสตกแตงสวนอนๆ ของภาพใหไดภาพรวมออกมาในอารมณท

ตองการ

เทคนคการเลอกสจะมสตรส าเรจใหเลอกใชงานอยบาง คอ วธโยงความสมพนธจากวงลอส กอนนะ

ท างานทกครง และน าวาใหเปดไฟลวงลอสขนมา แลวเลอกสหลก ๆ สาหรบใชในการท างานกอน

เทคนคการเลอกใชสแบบสตรส าเรจจะมอยหลายรปแบบ แตแบบทนยมใหงานกนเปนหลกจะมอยาง

4รปแบบ คอ

Mono หรอเอกรงค จะเปนการใชสทไปในโทนเดยวกนทงหมด เชน จดเดนเปนสแดง สสวนทเหลอ

จะเปนสทใกลเคยงกบสแดง โดยใชวธลดนาหนกความเขมของสแดงลงไป

Complement คอ สทตดกนหรอสตรงกนขาม เปนสทอยตรงขามกนในวงจรสเชน สฟาจะตรงขาม

กบสสม หรอสแดงจะตรงขามกบสเขยว สามารถนามาใชงานไดหลายอยาง และกสามารถสงผลไดทงดและ

ไมด หากไมรหลกพนฐานในการใชงาน การใชสตรงขามหรอสตดกน ไมควรใชในพนทปรมาณเทากนในงาน

ควรใชสใดสหนงจานวน 80% อกฝายหนงตองเปน 20% หรอ 70-30 โดยประมาณ บนพนทของงาน

โดยรวม จะทาใหความตรงขามกนของพนทนอยกลายเปนจดเดนของภาพ

Triad คอ การเลอกสสามสทระยะหางเทากนเปนสามเหลยมดานเทามาใชงาน

Analogicหรอสขางเคยงกน การเลอกสใดสหนงขนมาใชงานพรอมกบสทอยตดกนอกขางละส หรอก

คอสสามสอยตดกนในวงจรสนนเอง

รจกตวอกษรทใชอยใหดขนอกสกนด (Typography)

ส าหรบการเลอกใชงานตวอกษรทเหมาะสม เราจะตองมารจกกบคณสมบตหลก ๆ ทส าคญของ

ตวอกษร เชน สวนประกอบหลก ๆ และชนดกนกอน

Body & Proportion

Body หลก ๆ จะประกอบไปดวยตว Body เอง และสวนแขนขา และทส าคญทสดทจะสงผลถงการ

เลอกใชงาน Font กคอสวนของ “เชง” หรอ “Serif” (ในตว Body ของ Font อาจจะแยกยอยไดเปนตา หรอ

ไหลไดอก และในเบองตนใหรจกกนไวในชอของ Body กอน)

สวนของ Proportion ของ Font จะหมายถง ลกษณะการตกแตงเพอนาไปใชงาน เชน ตวหนา หรอ

ตงเอยง โดยปกตแลว Proportion ของ Font จะมอย 3 แบบคอ Normal คอ แบบปกตไมไดก าหนดอะไร

เพมเตม Bold คอ แบบทเปนตวหนาและ Italic คอ แบบทเปนตวเอยง

นอกจากทง 3 แบบทกลาวมาแลว ในบางครงอาจจะเจอแบบทยอยลงไปอก เชน Bold Italic ทเปน

ตวหนาและเอยงหรอ Narrow ทมลกษณะแคบๆ ผอมๆ กเปนไปได

วธเลอก Font ไปใชในงานออกแบบ

การเลอก Font ไปใชในงานออกแบบมขอควรค านงงาย ๆ อย 2 ขอคอ

1. ความหมายตองเขากน หมายความวา ความหมายของคาและ Font ทเลอกใชควรจะไปดวยกนได

เชน คาวานารกกควรจะใช Font ทดนารกไปดวย ไมควรใช Font ทดเปนทางการดงภาพตวอยาง

2. อารมณของฟอนต และอารมณของงานตองไปในทศทางเดยวกน เชน งานทตองการความ

นาเชอถอกจะเลอกใช Font แบบ Serif ทดหนกแนน นาเชอถอ สวนงานทตองการความฉดฉาดอยาง

โปสเตอรลดราคากควรจะเลอกใช Font ทเปนกนเองไมเปนทางการมากนกอยาง Font ในกลม Script เปน

ตน

ภาพตวอยาง อารมณของฟอนต และอารมณของงานทเปนไปในทศทางเดยวกน

นอกจากการเลอก Font มาใชงานแลว การวางต าแหนงตวอกษรกเปนอกเรองหนงทมความส าคญกบ

การทางาน สาหรบการวางต าแหนงตวอกษร มขอควรค านงถงไวใหอย 3 ขอคอ

1. ธรรมชาตการอานของคนไทยจะอานจากซายไปขวา และบนลงลาง โดยมรศมการกวาดสายตา

ตามล าดบ ดงนนถาอยากใหอานงาย ควรจะวางเรยงลาดบใหดดวย ไมเชนนนจะเปนการอานขามไปขามมาทา

ใหเสยความหมายของขอความไป

2. จดเดนควรจะมเพยงจดเดยว หรอพดงาย ๆ กคอ มตวอกษรตวใหญๆ อยเพยงชดเดยว จงจะเปน

จดเดนทมองเหนไดงาย ไมสบสน สวนจดอน ๆ ขนาดควรจะเลกลงมาตามลาดบความส าคญ

3. ไมควรใช Font หลากหลายรปแบบเกนไป จะทาใหกลายเปนงานทอานยากและชวนปวดศรษะ

มากกวาชวนอาน ถาจาเปนจรง ๆ แนะนาใหใช Font เดมแตไมตกแตงพวกขนาด, ความหนาหรอก าหนดให

เอยงบาง เพอเพมความนาสนใจไมใหงานดนาเบอแบบนจะดกวา