10 basic elements of design · web viewบทท 7 ว สด กราฟฟ ค (graphic...

40
บบบบบ 7 บบบบบบบบบบบบ (Graphic Materials) บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบ บบบบ บบบบบบบบบบบบ บบบบบบบ บบบ บบ บบ บบบบ บบบบ บบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบ บ บบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบบบบบบบ บบบบบบบบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ บบบบบ บบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบบ

Upload: others

Post on 28-Jan-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

บทท 7

วสดกราฟฟค

(Graphic Materials)

งานผลตสอเพอถายทอดความร ความรสกทางดานจตใจและการกระทำาใหผรบสารเกดการเรยนรซงการสอความหมายกใชเครองมอทเปนสญลกษณทแตกตางกนไป เปนทยอมรบกน โดยทวไปวาการเรยนรเกดขนไดจากประสบการณของผรบสารทมปฏสมพนธกบ ภาวะแวดลอม หรอสถานการณการเรยนรตางๆ ซงการรบรโดยผาน ประสาทสมผส ทงหา คอ ตา ห จมก ลน และกายสมผส โดยเฉพาะประสบการณทางตาทเปนทยอมรบกนในดานเทคโนโลยการศกษาวา การรบรทางตานนทำาใหเกดมโนทศนและเขาใจไดด 

         วสดกราฟกกจดเปนสอทนยมกนมากเพราะความสะดวกในการใชความงายและประหยดในการผลตทมมากกวาสอชนดอน ๆ โดยทคณคาหรอประโยชนทไดกไมดอยไปกวาสออนใดเลย ฉะนนในงานการจดการศกษา ครผสอนควรใหความสนใจศกษาเรองราวเกยวกบการผลต และการใชวสดกราฟกไวดวยเพราะเมอครนำาวสดกราฟกไปใชในกระบวนการเรยนการสอนแลวยอมจะสงผลใหนกเรยนเกดการเรยนรทถกตอง และตรงตามจดมงหมายทตองการไดอยางมประสทธภาพแนนอน

                        วสดกราฟก เปนสอการสอนททำาหนาทเสมอนเปนภาษาชวเลขสากล เพราะเขยนลายเสนเสนอเพยงเลกนอยแตไดเนอหามากมาย นนคอ วสดกราฟกจะชวยใหผอานหรอผเรยนสามารถเปดตวเอง รบกระแสของเนอหาวชาและขอมลขาวสารทมปรมาณมากมายมหาศาล ซงหลงไหลเขามาอยางทวมทนไดทนการ และยงชวยใหผเรยนเขาใจในเนอหาไดเรวขนอกดวย ทกวนนเราจะเหนวาในหนงสอพมพ นตยสาร เอกสารรายงานขาวดานธรกจและดานเทคโนโลยตาง ๆ ตลอดจนปายประกาศตาม

Page 2: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ทสาธารณะ มกจะมสอประเภทวสดกราฟกถกนำาเสนอเคยงคไปกบสารสนเทศตาง ๆ เชน ความรเกยวกบการสงเสรมสขภาพ ผลกระทบของสงแวดลอมทมตอทอยอาศย เปนตน

7.1.วสดกราฟก (Graphic Materials) 

เปนคำารวมระหวาง กราฟก และวสด คำาวา วสด “ ”

วสด หมายถง สงของทมอายการใชงานระยะ

กราฟก หมายถง การแสดงดวยลายเสน

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

ฉะนนวสดกราฟก จงหมายถง

โสตทศนวสด ทผลตขนเพอแสดงสญลกษณ หรอความหมายของสงหนงสงใด ทำาใหคนไดเหนความจรง หรอความคดอนถกตองชดเจนจากวสดกราฟกนนๆ (ชม ภมภาค. 2524 : 131)

วสดมลกษณะเปนลายเสน ซงอาจเปนส หรอขาวดำากได มคณคาในการเรยนรโดยทำาใหสงทเปนนามธรรมเปนรปธรรมมากขน ทำาใหเขาใจไดงาย และชวยดงดดความสนใจของผเรยนไดดเพราะมการเพมสสนให สวยงามนาด วสดกราฟกแมจะตองใชเวลาในการผลต แตเมอผลตแลวสามารถใชทบทวนซำาไดอกหลายครง (วรฬห ลลาพฤทธ, 2521 : 171)

Page 3: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

อปกรณการสอนทใหความหมายโดยการแสดงดวยลายเสนหรอสญลกษณตางๆ ซงใกลความจรงมากกวาการใชสญลกษณทเปนคำาพดวสดเหลาน ไดแก แผนท แผนภม แผนภาพ ภาพโฆษณา การตน แผนสถตฯลฯ (เอกสารประกอบการสอนชดวชาเทคโนโลยและสอสารการศกษา มสธ., 2523 : 136)

โดยสรป วสดกราฟก จงหมายถง ทศนวสดอยางหนงทนำามาใชในการสอความหมายเพอแสดงสญลกษณหรอความหมายของสงใดสงหนงทเกยวของกบขอเทจจรง แนวคด และเสรมความเขาใจโดยอาศยสวนประกอบทเปนรปภาพ สญลกษณ แผนภาพ ฯลฯ วสดกราฟกจดวาเปนสอราคาถก (Low Cost Media) และครผสอนสามารถผลตไดดวยตนเอง

7.2. ประโยชนของวสดกราฟก               วสดกราฟกมประโยชนตอการเรยนการสอน ดงน                1. ชวยใหผสงสารกบผรบสารเขาใจความหมายไดตรงกน                2. ชวยใหผรบสารเรยนรไดดกวาการฟงคำาบรรยายเพยงอยางเดยว                3. ประหยดเวลา                4. ชวยใหผรบสารสนใจเรองราวทใชสอสารดยงขน                5. ชวยใหผรบสารไดมโอกาส มสวนรวมในกจกรรมการสอสาร                6. ชวยใหการอธบายสงทเขาใจยากใหเขาใจงายขน

7.3. ลกษณะของวสดกราฟกทด        สอวสดกราฟกทใชประกอบการเรยนการสอนทดควรมลกษณะดงน        1. มความงายตอความเขาใจ สามารถสอความหมายไดรวดเรว ชดเจนทงรปภาพ สญลกษณ ตวอกษะและถอยคำา        2. การออกแบบตองคำานงถงการเรยนรโดยเรยงลำาดบภาพ

Page 4: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

สญลกษณและตวอกษรตามลำาดบขนตอน        3. ตองมการเนนจดเดนโดยการใชส ขนาด รปราง รปทรง เสน หรอทศทาง เพอแบงแยกขอมลทเปนใจความสำาคญใหเดนกวาขอมลอน ๆ        4. มความเปนเอกภาพทงเนอหาและรปภาพ        5. มความประณต สวยงาม ตามคณคาของศลปกรรม

7.4. หลกการออกแบบวสดกราฟกการออกแบบวสดกราฟกใหมคณภาพและประสทธภาพในการสอ

ความหมายควรยดหลกการดงน       1. ตรงกบจดมงหมายของเนอหาวชา       2. การออกแบบโดยการคำานงถงประโยชนทจะนำาไปใชงานโดยมงทจะไดรบจากการใชวสดกราฟกเพอการสอความหมายสำาคญ       3. การออกแบบวสดกราฟกควรมลกษณะงาย ๆ สวนประกอบตาง ๆ ไมจำาเปนตองแสดงรายละเอยดมากเกนไป และขบวนการผลตไมยงยากซบซอน       4. คำานงถงความประหยดทงเงนงบประมาณและเวลาในการจดทำา       5. มสดสวนด องคประกอบทงหมดกลมกลน เชน รปแบบ พนผว เสน ส เปนตน       6. มโครงสรางทเหมาะสม กลมกลนกบวฒนธรรม สงคม และมความถกตองตามสภาพทเปนจรง

7.5 ประเภทของวสดกราฟควสดกราฟคทใชในการเรยนการสอน แบงออกเปนประเภทตาง ๆ ดงน1 แผนสถต (Graphs) ใชนำาขอมลทเปนตวเลข เพอแสดงความสมพนธระหวางปรมาณ และเวลา หรอความสมพนธของขอมล 2 ชนด แบงเปน- แผนสถตแบบเสน ใชเสนแสดงขอมลทละเอยดถกตองรวดเรวกวาแบบอน ๆ- แบบสถตแบบแทง ใชแทงแทนขอมลแตละชนด ซงขนาดของแทงจะตอง

Page 5: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

เทากน ใชไดดในกรณทมขอมลไมมาก เปนแบบททำางายและอานงาย- แผนสถตแบบวงกลม แสดงขอมลทงหมดภายในวงกลม และแบงสวนดวยเสนรศมตามปรมาณของขอมล ใชเปรยบเทยบความแตกตางหรอความสมพนธของขอมล ทงหมดในเวลาเดยวกนแตไมละเอยด- แผนสถตแบบรปภาพ ใชรปภาพหรอสญลกษณแบบขอมล เราความสนใจด แตไมละเอยด เพราะจะบอกขอมลโดยประมาณ- แผนสถตแบบพนท ใชพนทของรปทรงเรขาคณตตาง ๆ เชน สเหลยม สามเหลยม วงกลม เพอใชเปรยบเทยบขอมล 2-3 อยาง ซงผดจะเขาใจไดเรว แตมรายละเอยดนอยมาก

ภาพท7.1 ตวอยางภาพแบบสถตแบบแทง

2. แผนภาพ (Diagram) ใชแสดงความสมพนธของสวนตาง ๆ หรอกระบวนการทำางานมลกษณะเปนนามธรรม เพราะมรายละเอยดทสำาคญ เหมาะใชกบผเรยนทเรยนในระดบสงกวาประถมศกษา แบงออกเปน 3 ชนด คอ- แผนภาพแบบลายเสน- แผนภาพแบบรปภาพ- แผนภาพแบบผสม

Page 6: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ภาพท7.2 ตวอยางแผนภาพ (Diagram)

3. แผนภม (Chart) เปนวสดทใชแสดงความสมพนธของขอเทจจรง ขอมลความร เพอแสดงการเปรยบเทยบ พฒนาการ กระบวนการ การจำาแนก การวเคราะห โดยมรปภาพ สญลกษณ คำา หรอ ขอความ ประกอบ แบงออกเปน 8 ชนดดวยกนคอ- แผนภมแบบตนไม : แสดงใหเหนวาสงหนงแยกออกไดเปนหลายสง- แผนภมแบบสายธาร : กลบกบแบบตนไม แสดงใหเหนวาสงหนงเกดจาก หลายสงมารวมกน- แผนภมแบบตอเนอง : แสดงลำาดบขนการทำางาน การทำากจกรรมตามลำาดบ- แผนภมแบบองคการ : แสดงความสมพนธของหนวยงานภายในองคการ หรอ ระหวางองคกร มกนยมใชเสนโยงระหวาง กรอบสเหลยม- แผนภมแบบเปรยบเทยบ: เปรยบเทยบใหเหนความแตกตางระหวางแนวคด รปรางลกษณะ ขนาดของสงตาง ๆ- แผนภมแบบตาราง : แสดงความสมพนธระหวางเวลากบเหตการณ- แผนภมแบบววฒนาการ : แสดงการเปลยนแปลงของสงหนงสงใดทเปนไป ตามเวลา

Page 7: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

- แผนภมแบบอธบายภาพ : มลกษณะเปนรปภาพ และมลกศรชสวนตาง ๆ ทม ตวอกษรกำากบเพอใหทราบวาเปนอะไร

ภาพท 7.3 ตวอยางแผนภม (Chart)

4. ภาพโฆษณา (Poster) ใชเพอประกาศ หรอจงใจใหผดกระทำาตามหรอไมให กระทำาตาม ภาพโฆษณาทด จะตองทำาใหผดจำางายและประทบใจอยางรวดเรว การผลตภาพโฆษณาจงควรคำานงถง- การออกแบบใหมลกษณะเดน เราความสนใจ- ใชขอความสน ๆ และภาพประกอบเปนแบบงาย ๆ- สสะดดตา ใชสตดกน แตไมควรเกน 3 ส- ควรมขนาดใหญ- แสดงจดมงหมายเพยงอยางเดยว

Page 8: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ภาพท 7.4 ตวอยางภาพโฆษณา (Poster)

5. การตน (Cartoon) เปนทศนวสด ทมลกษณะเปนภาพเขยนดวยลายเสน แสดง เฉพาะลกษณะเดน ๆ เพอเลยนแบบกรยาทาทางของมนษย สตว หรอสงของ เพอถายทอดเรองราว ความคดเหน อารมณ หรอ ทศนะของผเรยนไปยงตวผดสามารถนำามาใชในการศกษา การโฆษณา และความบนเทงได

Page 9: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ภาพท 7.5 ตวอยางการตน (Cartoon)

6. ภาพวาด (Drawing) เปนการวาด หรอเขยน อาจเปนภาพส หรอภาพขาว-ดำา

ภาพท 7.6 ตวอยางภาพวาด (Drawing)ชอผลงาน ขอจงทรงพระเจรญยงยนนาน เทคนค สนำาบนกระดาษ ผลงานของ เกรกบระ ยมนาค

Page 10: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

7. ภาพถาย (Photograph) เปนภาพทถายจากของจรง สถานทจรง โดยใชกลองถายภาพแบบตาง ๆ ซงมทงกลองถายภาพทใชฟลม และผานกระบวนการลาง อด ขยายภาพ หรอ ใชคอมพวเตอร พมพภาพ ทไดมาจากการถายภาพจากลองระบบดจตอล

ภาพท 7.7 ตวอยางภาพถาย (Photograph)8.สอสงพมพในปจจบนสามารถแบงประเภทของสอสงพมพไดมามายหลายประเภท โดยทงสงพมพ 2 มต และสงพมพ 3 มต คอ สงพมพทมลกษณะเปนแผนเรยบ ใชวสดจำาพวกกระดาษและมเปาหมายเพอนำาเสนอเนอหาขาวสารตาง ๆ เชน หนงสอ นตยสาร จลสาร หนงสอพมพ แผนพบ โบชวร ใบปลว นามบตร แมกกาซน พอกเกตบค เปนตน สวนสงพมพ 3 มต คอ สงพมพทมลกษณะพเศษทตองอาศยระบบการพมพแบบพเศษ และสวนใหญจะเปนการพมพโดยตรงลงบนผลตภณฑทสรางรปทรงมาแลว สำาหรบตวอยางการพมพแบบ 3 มตไดแก การพมพสกนบนภาชนะตาง ๆ เชน แกว กระปอง พลาสตก การพมพระบบแพดบนภาชนะทมผวตางระดบ เชน เครองป นดนเผา เครองใชไฟฟา การพมพระบบพนหมก เชน การพมพวนหมดอายของอาหารกระปองตาง ๆ โดยสามารถจำาแนกประเภทของสอสงพมพได ดงน

Page 11: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

1.สอสงพมพประเภทหนงสอ

          สอสงพพมประเภทหนงสอจะมหนงสอสารคด ตำารา แบบเรยน และหนงสอบนเทงคด จะเนนความรตางๆ

ภาพท 7.8 หนงสอ2. สอสงพมพเพอเผยแพรขาวสาร          สอสงพมพเพอเผยแพรขาวสาร... เชน หนงสอพมพ วารสาร นตยสาร จลสาร ใบปลว แผนพบ โบชวร หรอ โปสเตอร

หนงสอพมพ (Newspapers) เปนสอสงพมพทผลตขนโดยนำาเสนอเรองราวขาวสารภาพ และความคดเหน ในลกษณะของแผนพมพ แผนใหญ ทใชวธการพบรวมกบ ซงสอสงพมพชนดนไดพมพออกเผยแพรทงลกษณะหนงสอพมพรายวน รายสปดาห และรายเดอน

วารสาร นตยสาร เปนสอสงพมพทผลตขนโดยนำาเสนอสาระขาว ความบนเทง ทมรปแบบการนำาเสนอ ทโดเดน สะดดตา และสรางความสนใจใหกบผอาน ทงนการผลตนน มการกำาหนดระยะเวลาการออกแบบเผยแพรทแนนอน ทงลกษณะวารสาร นตยสารรายปกษ (15 วน) และรายเดอน

จลสาร เปนสอสงพมพทผลตขนแบบไมมงหวงผลกำาไร เปนแบบใหเปลาโดยใหผอานศกษาหาความร ทกำาหนดออกแบบเผยแพรเปนครง ๆ หรอลำาดบตาง ๆ ในวาระพเศษ

Page 12: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

โบชวร (Brochure) เปนสอสงพมพทมลกษณะเปนสมดเลมเลก ๆ เยบตดกนเปนเลมจำานวน 8 หนา เปนอยางนอยมปกหนา และปกหลง ซงในการแสดงเนอหาจะเกยวกบโฆษณาสนคา

ใบปลว (Leaflet, Handbill) เปนสอสงพมพใบเดยว ทเนนการประกาศ มกมขนาด A4 เพองายในการแจกจาย ลกษณะการแสดงเนอหาเปนขอความทผอานแลวเขาใจงาย

แผนพบ (Folder) เปนสอสงพมพทเนนการผลตโดยเนนการเสนอเนอหา ซงเนอหาทนำาเสนอนนเปนเนอหาทสรปใจความสำาคญ ลกษณะเปนการพบเปนรปเลมตาง ๆ

โปสเตอร (Poster) เปนสอสงพมพโฆษณา โดยใชปดตามสถานทตาง ๆ มขนาดใหญเปนพเศษซงเนนการนำาเสนออยางโดเดนดงดดความสนใจ

ภาพท 7.9 ตวอยางสอสงพมพเพอเผยแพรขาวสาร3. สงพมพเพอการบรรจภณฑ          สงพมพเพอการบรรจภณฑเปนสงพมพทใชในการหอหมผลตภณฑการคาตาง ๆ แยกเปนสงพมพหลก ไดแกสงพมพทใชปดรอบ

Page 13: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ขวด หรอกระปองผลตภณฑการคา สงพมพรอง ไดแก สงพมพทเปนกลองบรรจหรอลง

ภาพท 7.10 ตวอยางสงพมพเพอการบรรจภณฑ

4. สงพมพมคา          สงพมพมคา เปนสอสงพมพทเนนการนำาไปใชเปนหลกฐานสำาคญตาง ๆ ซงกำาหนดตามกฎหมาย เชน ธนาณต บตรเครดต เชคธนาคาร ตวแลกเงน หนงสอเดนทาง โฉนด เปนตน

Page 14: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ภาพท7.11 ตวอยางสงพมพมคา

5.สงพมพลกษณะพเศษ          สงพมพลกษณะพเศษ  เปนสอสงพมพมการผลตขนตามลกษณะพเศษแลวแตการใชงาน ไดแกนามบตร บตรอวยพร ปฏทน ใบสงของ ใบเสรจรบเงน สงพมพบนแกว สงพมพบนผา เปนตน

ภาพท 7.12 ตวอยางสงพมพลกษณะพเศษ

6. สงพมพอเลกทรอนกส          สงพมพอเลกทรอนกส  เปนสอสงพมพทผลตขนเมอใชงานในคอมพวเตอร หรอระบบเครอขายอนเตอรเนต ไดแก Document Formats, E-book for Palm/PDA เปนตน

Page 15: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ภาพท 7.13 ตวอยางสงพมพอเลกทรอนกส

9 สญลกษณ (Logo) เปนทศนวสดทใชสญลกษณตาง ๆ แสดงหรอแทนตาม ความหมายของหนวยงาน มทงทเปนเครองหมาย รปภาพ ตวอกษร หรอการผสมผสานกน

ภาพท 7.14 ตวอยางสญลกษณ (Logo)

Page 16: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

7.6 รปทรงและพนท (Shape&Space)

ภาพท 7.15 ทำาไมเราถงเหนรปนเปนรปหวใจ?การทเราจะรบรวารปน ภาพนเปนภาพอะไร สอความหมายอยางไรเกดจาก 2 ลกษณะ

1.เกดจากการเรยนร การผานประสพการณมาตงแตเดก รปทรงแบบนแบบนนสอความหมายอยางไร เปนการสอความหมายทเปนสากล คนทงโลกหรอคนสวนใหญเขาใจ และผานการเรยนรมาคลายกน

2.เกดจากการทำางานระหวางรปราง ( Shape) กบพนทรอบขาง ( Space ) ทำางานสงเสรมกน สรางความแตกตางซงกนและกนทำาใหสายตามนษยสามารถแยกแยะรปรางรปทรงนนๆได

Page 17: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ภาพท 7.16 แสดงการคลคลายจากรปรางธรรมชาต มาสรปรางนามธรรม โดยศลปนลทธ Cubism คอ Plabo Picasso

ภาพท 7.17 โลโก Oregon human society มการนำาเอารปทรงและพนท (Shape&Space) เพอสอถงสตวตางๆ

Page 18: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

พนฐานของงานออกแบบกราฟฟคคอการตดทอน หลกการในงานออกแบบตดทอนคอการมองสงตางๆโดยใชวธมองรปรางและพนทรอบขางแลวตดทอนใหเหลอเปนรปทรงงายๆ เปนเรขาคณตและมองใหเปนแคภาพ 2 สคอ ขาวกบดำา เพอหาสวนสำาคญและนำาไปสอความหมายใหชดเจนทสด ถาสอความหมายไดถกตองแลว จงคอยๆเตมรายละเอยดไปเรอยๆ

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

ภาพท 7.18 แสดงการมองสงตางๆแบบตดทอนใหเหลอรปทรงงายๆเปนสาวเหลยม สเหลยม วงกลม เพอใหเปนพนฐานในงานออกแบบ

7.7 ความหมายทางจตวทยาของรปทรงสามเหลยม สเหลยม วงกลม

Page 19: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

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

1.สเหลยมผนผา และสเหลยมจตรส

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

Page 20: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

fresh cool ice cube background by rprongjai

Photo. Template for branding identity. For graphic designers presentations and portfolios by Vitalliy

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

Page 21: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ความรสกทมนคง (คดเกยวกบสจดของเขมทศ) เราเชอวารปทรงเหลานเ มนใหเกดความรสกทเชอถอไดและปลอดภย

ตวอกษร และรปทรงสเหลยมทมหนวยการสรางพนฐานทแขงแกรงอกทงยงสนบสนนโครงสรางโดยรวม ตวอยางเชน:

ในงานสถาปตยกรรม อฐ – , คาน , คอลมน

ในขอความ วรรคหนงสอ คอลมนในหนงสอพมพ–

ในการออกแบบเวบ ตาราง – HTML

ไดรบการเชอมโยงกบโครงสรางกไมนาแปลกใจทใหบรการทางการเงนจำานวนมากเลอกทจะใชชองสเหลยมและรปสเหลยมสำาหรบโลโกของพวกเขา Wells Fargo, American Express, และ Visa ทงหมดใชรปทรงนเพราะ รปรางบงบอกถงความนาเชอถอและอายการใชงาน ในขณะทยงมความรสกแบบดงเดมทนาเชอถอและมอำานาจ (ทงหมดคณภาพทสำาคญในอตสาหกรรมนน) บาง บรษท สอและเทคโนโลยยงใชสเหลยมและรปสเหลยมยมอากาศของ gravitas (NPR, BBC, และ Microsoft)

2.วงกลม

มความแตกตางจากรปสเหลยมมากมาย วงกลมมอยรอบๆตวเราในธรรมชาต เพราะความสมพนธของดวงอาทตย ดวงจนทร และโลกมการเชอมโยงจกรวาลหรอทองฟา ในความเปนจรงในโลโกของ Samsung ทวงรสนำาเงนเขมจะหมายถง การเปนตวแทนของจกรวาล

Page 22: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

Incredibly beautiful spiral galaxy somewhere in deep space by Vadim Sadovski

เพราะวงกลมไมมจดเรมตนหรอสนสด มนเชอมตอความคดดวยกน มนทำาใหรสกถงความสมบรณแบบและครบวงจร อยางวงกลม สญลกษณหยนหยาง ; วธการ ทำาใหม “ / โหลดอกครง ประกอบไปดวยลกศร”วงกลม;  วงดนตรทจดงานแตงงาน; และนาฬกา

Page 23: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

An yin-yan symbol made of fried egg in a pan by Fisher Photostudio

Update sign icon, vector illustration. Flat design style by best4u

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

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

3.สามเหลยม

เพราะรปทรงนมยอดสามเหลยมซงเปนสญลกษณของความยงใหญหรอเหนอกวา มนเปนภาพแทนของโลโกอาดดาส ทสรางรปสามเหลยม–ซงเปนสญลกษณของภเขา จดสดยอดของความสำาเรจ“ .” ซงเปรยบ

Page 24: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

เสมอนกบการผลกดนตวเองใหกลาเอาชนะความทาทาย และการทำาใหดทสด

Greatness of nature. Ama Dablam peak (6856 m) at sunset. Nepal, Himalayas by Kiwisoul

สามเหลยมยงสรางการเคลอนไหวและการนำาสายตาของเราในวธการบางอยาง จงไมนาแปลกใจรปทรงน ไดรบการเชอมโยงกบการเคลอนไหว และทศทางทมนทำาใหรสกวา เปนสญลกษณสากลสำาหรบปม “play” เกดขนเปนรปสามเหลยมมมไปดานขางใดขางหนง หรอสญลกษณของโลโกของ Google Play เปนตน หากคณกำาลงมองตรงไปทตาของผชมทมตอบางสงบางอยาง สามเหลยมสามารถเปนตวกำาหนดทศทางทดได

Page 26: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

Old motel sign on Route 66, USA by Andrey Bayda

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

Page 27: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

illustration showing a pyramid of tin cans by Wilm Ihlenfeld

สามเหลยมแบบเดยวกนสามารถบงบอกถงความขดแยง และการกระทำาตางๆได ในประเทศสวนใหญทวโลก สญญาณจราจรทบงบอกถงอนตรายมกเปนรปสามเหลยม มนยงสามารถสรางความหมายเดลตาสญลกษณทางคณตศาสตร (รปสามเหลยม) หมายถงการเปลยนแปลงหรอความแตกตาง ซงในความเปนจรงโลโกของ Reebok (“เดลตา Reebok”) ม 3 สวนแยกแตละสญลกษณของรางกายจตใจ และการเปลยนแปลงทางสงคม ทเกดขนเมอมคนผลกดนตวเองเกนกวาขด จำากด ของพวกเขา

Page 28: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

Yield Sign at Sunrise on a Desert Road by Nickolay Stanev

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

“การออกแบบทด ไมใชแคสวย แตตองสรางใหเกดความลงตวในจตใจดวย ” NUMBER 24

Page 29: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ภาพท 7.19 ตวละครไมคและแซลลในภาพยนตร Monsters inc. ถกวางแผนออกแบบมาจากรปทรงวงกลมและสเหลยม โดยตวละครไมคเปน

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

ออกแบบจากรปทรงสเหลยม

7.8 การจดวางรปทรงเพอสอความรสก

ในงานออกแบบการจดวางรปทรงเพอสอความรสกเปนเรองละเอยดออน และมความสำาพนธกบหลกการวางองคประกอบภาพ และ สมพนธกบกรอบเฟรม

Page 30: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ภาพสามเหลยมดานซายดสมมาตร เมอเทยบกบดานขวาทดไมสมมาตรเพราะระนาบของสามเหลยมไมขนานกบกรอบเฟรม

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

หนยอย

Page 31: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

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

ทรงตดกนใหความรสกใกลชด

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

Page 32: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ขนาดกเปนสงชวยสอความหมายทางจตวทยา สเหลยมขนาดใหญใหความรสกมอำานาจมความสำาคญกวาสเหลยมขนาดเลก

ภาพท 7.20 จากภาพยนตรแอนเมชนขนาดสนเรอง Luxo Jr. ของบรษท Pixar animation มโคมไฟ 2 ชนเลนลกบอลกน โดยไมมหนาตา แตก

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

Page 33: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ภาพท 7.21 โปสเตอรภาพยนตรเรอง United 39 เปนเรองของเครองบนทบนชนตกเวลดเทรตเซนเตอรในเหตการณ 911 การสอความหมายทางภาพ เลอกใชมมแหลมของเทพเสรภาพ แสงเงามด เครองบนทบน

เอยง เพอสอถงเหตการณทอนตราย

Page 34: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ภาพท 7.22 จากภาพยนตรเรอง Ninja assassin มมกลองสอถงความเปนศตรกน รวมทงการใชสดำาดลกลบ และบรรยากาศฝนตก ปบรรยากาศ

เหตการณในเรองทกำาลงจะตอสกนใหดตนเตนมากขน

ภาพท 7.23 จากภาพยนตรเรอง 2012 ในเหตการณทเครองบนกำาลงหนเหตการณภยภบต เลอกใชมมกลองเหนเครองบนขนาดเลกในเหตการณอนตรายจากภยภบต สอถงเหตการณทเครองบนกำาลงเพชญเปนเหตการณทใหญโตนากลว

แบบฝกหด

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

Page 35: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

บรรณานกรม

- วสดกราฟก (Graphic Materials) http://nutthapolton.blogspot.com/p/blog-page.html , นาย ณฐพล  พงษสานตคร และ นายดเรก   ใตตา 2558

- ประเภทของสอสงพมพhttp://atcharayongthum.weebly.com/3611361936323648361636073586362935913626363936563629362636363656359136143636361736143660.html , อจฉรา ยงธรรม 2558

- ความหมายทางจตวทยาของรปทรงสามเหลยม สเหลยม วงกลม http://www.number24.co.th/portfolio-item/%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%AB%E0%B8%A1%E0%B8%B2%E0%B8%A2%E0%B8%97%E0%B8%B2%E0%B8%87%E0%B8%88%E0%B8%B4%E0%B8%95%E0%B8%A7%E0%B8%B4%E0%B8%97%E0%B8%A2%E0%B8%B2%E0%B8%97%E0%B8%B5%E0%B9%88/ , ศรญญา เสรฟกรา 2558

- Repetition, Rhythm and Pattern http://flyeschool.com/content/repetition-rhythm-and-pattern , Robert Flye 2012

- 10 Basic Elements of Design https://creativemarket.com/blog/10-basic-elements-of-design , By Maryam Taheri on May 27, 2016 in Design Trends

Page 36: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

สารบญภาพ

ภาพท 7.1 http://experience-english.blogspot.com/2012/05/best-practices-describing-trends-graphs.htmlภาพท 7.2 https://www.pinterest.com/tohopkins/school/?lp=trueภาพท 7.3 https://my.dek-d.com/baboonnoo/blog/

ภาพท 7.4 https://www.pinterest.com/christyloren/advertisingconcept/?lp=trueภาพท 7.5 http://jfarson.weebly.com/infographic-art.html

ภาพท 7.6 https://preede.wordpress.com/2011/09/11/%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B8%87%E0%B8%B2%E0%B8%99%E0%B8%97%E0%B8%B1%E0%B8%A8%E0%B8%99%E0%B8%A8%E0%B8%B4%E0%B8%A5%E0%B8%9B%E0%B9%8C/ภาพท 7.7 http://www.number24.co.th/portfolio-item/%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%AB%E0%B8%A1%E0%B8%B2%E0%B8%A2%E0%B8%97%E0%B8%B2%E0%B8%87%E0%B8%88%E0%B8%B4%E0%B8%95%E0%B8%A7%E0%B8%B4%E0%B8%97%E0%B8%A2%E0%B8%B2%E0%B8%97%E0%B8%B5%E0%B9%88/

Page 37: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร

ภาพท 7.8/7.9/ 7.10 /7.11/7.12/7.13

http://atcharayongthum.weebly.com/3611361936323648361636073586362935913626363936563629362636363656359136143636361736143660.htmlภาพท 7.14 http://tutornaitumnan.lnwshop.com

ภาพท 7.15 www.malgusto.com

ภาพท 7.16 http://watkadarin.com/E-(new)1/02studio2classrm/unit2/chapt2.3s&form/shape&form.htmภาพท 7.17 http://tutornaitumnan.lnwshop.com

ภาพท 7.18 https://www.pinterest.com/christyloren/advertisingconcept/?lp=trueภาพท 7.19 https://tcorsiblog.wordpress.com/2016/04/10/tbd/ภาพท 7.20 https://en.wikipedia.org/wiki/Luxo_Jr.

ภาพท 7.21 https://en.wikipedia.org/wiki/United_93_(film)

ภาพท 7.22 http://www.the-fanboy-perspective.com/ninja-assassin-2009.htmlภาพท 7.23 http://vator.tv/news/2012-12-07-what-was-the-big-tech-story-of-2012

Page 38: 10 Basic Elements of Design · Web viewบทท 7 ว สด กราฟฟ ค (Graphic Materials) งานผล ตส อเพ อถ ายทอดความร ความร