สาร-ภาพ

152

ณัฐ จันทโรทัย ปวริศา ตุ2นมาก ณัฐ จันทโรทัย กันยาภรณ6 พลนอก ณัฐกันย6 สิงห6พงษ6 ปริยวิศว6 อ2อนประดิษฐ6, ธิติ ชัยวงศ6 สอง เกDา สาม กรุEป

เลขที่ 293 ถ.ไชยณรงค4 ต.ในเมือง อ.เมือง จ.นครราชสีมา 30000 โทรศัพท4 044 951293 สงวนลิขสิทธิ์ตามพระราชบัญญัติลิขสิทธิ์ พ.ศ. 2537 โดย บริษัท สอง เกQา สาม กรุSป จำกัด หQามลอกเลียนไมWวWาสWวนใดสWวนหนึ่ง ของหนังสือเลWมนี้ไมWวWารูปแบบใด ๆ นอกจากจะไดQรับอนุญาตเป]น ลายลักษณ4อักษรจากผูQจัดพิมพ4เทWานั้น

สาร-ภาพ : การออกแบบสื่อสารดDวยภาพ 184 หนDา ราคา 390 บาท 978-616-92296-2-9 1 มีนาคม 2564 จำนวน 300 เล2ม (Print on Demand) 22 มิถุนายน 2564 จำนวน 500 เล2ม ณภัทร การพิมพ6 เลขที่ 9 ถนนแจQงวัฒนะ แขวงอนุสาวรีย4 เขตบางเขน กรุงเทพฯ 10220

153

เชื่อว(าหลาย ๆ ท(านที่ตัดสินใจหยิบหนังสือเล(มนี้มาเป=ดอ(าน เพราะว(ากำลัง อยากออกแบบภาพเพื่อจะใชEเปFนเครื่องมือทำคอนเทนตHในการสื่อสาร หรือโฆษณา ทำการตลาด เพราะไม(ว(าแบรนดHจะขายสินคEาใดก็ตาม “ภาพ” ก็ยังคงเปFนตัวเลือก อันดับแรกที่ใชEเปFนสิ่งที่ดึงดูดใหEเกิดความน(าสนใจไดEง(ายที่สุดผ(านการสื่อสารหลาย ๆ ช(องทางโดยเฉพาะในเครือข(ายสังคมออนไลนH (Social Media) ต(าง ๆ ในมุมมองของนักออกแบบ ตEองหยุดลูกคEาใหEอ(านโพสตHดEวยงานกราฟ=ก หรือ ภาพใหEโดนใจ โดยเฉพาะงานออกแบบที่ดี แต(งภาพใหEปcง งานกราฟ=กที่สวย จะสรEาง ภาพลักษณHและคุณค(าใหEกับแบรนดH ซึ่งเปFนส(วนสำคัญมากในการสื่อสารในยุคนี้ ในมุมมองของผูEบริโภค เราเชื่อว(าทุกวันนี้ผูEบริโภคมีเวลาไม(มากนัก โดย เฉพาะที่ตEองอ(านขEอมูลอะไรยาว ๆ ถEาไม(ใช(สินคEาที่พวกเขาอยากไดEจริง ๆ พวกเขา จะไม(เสียเวลาอ(านมันเลย เพราะฉะนั้นรูปภาพจึงตอบโจทยHพวกเขาไดEดีที่สุด อีกทั้ง เมื่อดูจากรูปภาพแลEว พวกเขาจะบอกไดEทันทีว(าชอบหรือไม(ชอบ หนังสือเล(มนี้จะมุ(งเนEนใหEเขEาใจเกี่ยวกับการออกแบบภาพ ที่เริ่มตั้งแต(การ เขEาใจถึงองคHความรูEหลายอย(างที่เกี่ยวกับการสื่อสารดEวยภาพ อาทิเช(น แนวคิดและ ความคิด จิตวิทยาดEานภาพ การจัดองคHประกอบ การใชEสำนวนโวหารทางภาพ เปFนตEน หากท(านมีหนังสือเล(มนี้ในมือ ผูEเขียนเชื่อว(าจะช(วยใหEท(านพัฒนาตัวเองใหE ออกแบบภาพตอบโจทยHงาน หรือธุรกิจ สรEางแรงบันดาลใจ ใชEความรูEความเขEาใจใน การสื่อสารดEวยภาพ และใชEจินตนาการสรEางสรรคH เพื่อทำใหEเกิดชิ้นงานที่ “สรEาง คุณค(า” ใหEกับสินคEา เมื่อถูกกลุ(มเปiาหมายพบเห็น หนังสือเล(มนี้เหมาะสำหรับเปFน คู(มือเริ่มตEนอาชีพนักออกแบบภาพ

154

155

0

Creative by Tom Murphy Creative Director: Abby Advertising Agency: Rosner The Tycoon

1

มีประโยคสุดคลาสสิคที่เราต3องเคยได3ยินผ9าน หูกันมาบ3าง คือประโยคที่พูดว9า “ภาพหนึ่ง ภาพมีความหมายเทียบได3กับคำพูดพันคำ (A Picture is worth a thousand words.)” ถ3า จะเทียบกับสำนวนไทยที่ใกล3เคียงที่สุดก็คง จะเปLน สิบปากว9าไม9เท9าตาเห็น นั่นแปลว9า รูปภาพสื่อถึงข3อมูลได3อย9างมีประสิทธิภาพ มากกว9 า คำพู ด รู ป ภาพสามารถบอกเล9 า เรื่องราวได3เช9นเดียวกับหลาย ๆ คำ ภาพบ9ง บอกถึงข3อความที่มีพลังมากกว9าคำพูด ซึ่ง เปLนเหตุผลที่นักออกแบบ นักโฆษณา นักการ ตลาด รวมถึงใครก็ตามที่ต3องการใช3ภาพเพื่อ สื่อสารสิ่งที่ตนเองคิด

2

โดย Allan Paivio[1] ศึกษาเอฟเฟกต9ของภาพที่อธิบายใหFเขFาใจเหตุผลวLา ทำไมการใชF “ภาพ” จึงมีโอกาสที่จะไดFรับการจดจำสูงกวLา ดังนี้ กวLา 90% ของสิ่งที่เรารับเขFาสมองมาคือ รูปภาพ • การประมวลผลรูปภาพไดFเร็วกวLาอLานหนังสือ 60,000 เทLา • เฉลี่ยคน 40% จะตอบสนองตLอรูปภาพไดFดีกวLาตัวหนังสือ • การสื่อสารของมนุษย9 93% เปfนการสื่อสารแบบไมLใชFคำพูด •

นอกจากนี ้ ย ั ง มี ผ ลการวิ จ ั ย ของ Marian Bonsignore [2] แหL ง American Management Association ออกมายืนยันดFวยวLาการนำเสนอสินคFาและบริการดFวย การสื่อสารที่มีภาพประกอบจะชLวยโนFมนFาวลูกคFาไดFมากถึง 67% เลยทีเดียว สรุปไดF วLา “ภาษาภาพ” จะชLวยกระตุFนการรับรูFของผูFชมหรือผูFฟtงไดFมากกวLา

3

หากมาดูในเรื่องของสถิติที่เกี่ยวขFองกับการทำงานของสมอง จากการศึกษาที่ ดำเนินการโดยนักจิตวิทยาการศึกษาของ เจอโรม บรูเนอร9 [3] ของมหาวิทยาลัย นิวยอร9ก เราก็จะพบวLา

จะจำได'เพียง 10% จากการได'ยิน • เราจะจำได'เพียง 20% จากการอ7านสิ่งต7าง ๆ • เราจะจำได'ถึง 80% จากการได'เห็น •

จะเห็นวLารูปภาพทั้งหลายมีพลังในการจดจำไดFมากกวLาการอLานหรือการฟtง ตFองยอมรับจริง ๆ วLาคอนเทนต9มาร9เกตติ้งที่ใชFรูปภาพ ลFวนมีพลังแหLงการดึงดูด พลัง แหLงการโนFมนFาวและพลังแหLการซื้อมากขึ้น

4

5

ปtจจุบันการโฆษณาในดิจิทัลมีเดียตLาง ๆ การใชFภาพเปfนเนื้อหา (Content) กลายเปf น กระแสหลั ก จนยากที ่ จ ะละเลยคุ ณ คL า ของ “ภาพ” ไมL น L า แปลกใจที่ เครือขLายสังคมออนไลน9สLวนใหญLที่เปfนยอดนิยมทั่วโลก เชLน Facebook, YouTube, Instagram, Linkedin และ Pinterest มีการแสดงผลการเห็นดFวยภาพเปfนหลัก ทุกคนคงจะเห็นตรงกันวLา “ภาพ” คือเครื่องมือสื่อสารขFอมูลที่ชัดเจนและ ชLวยเติมเต็มการสื่อสารที่คำพูดอธิบายไมLหมด แตL ใ นหลาย ๆ รู ป แบบของการสื ่ อ สารดF ว ยภาพนั ้ น บางครั ้ ง ภาษาภาพ สมัยใหมL “ภาพ” เปfนเสมือน “ภาพเสนอ” ซึ่งไมLใชL “ภาพสะทFอน” ความจริง หรือ แมFกระทั่ง “สรFางภาพ” ความจริงขึ้นมาใหมLดFวยซ้ำ ขึ้นอยูLวLาผูFสLงสารจะใชFภาพ เสนอสารอะไรออกมา ซึ่งสำหรับงานที่สื่อสารดFวยภาพแลFว การเติมเต็มจินตนาการ เพื่อแสดงพลังของการเลLาเรื่องอยLางเต็มที่นั้นเปfนวัตถุประสงค9หลักที่นักออกแบบ ตFองมีเทคนิค และแนวคิดการออกแบบที่แปลงขFอมูลใหFเปfนภาพใชFเลLาเรื่องไดF ซึ่ง เปfนเนื้อหาหลักของหนังสือเลLมนี้

6

การสื่อสารด3วยภาพให3ประสบความสำเร็จนั้นไม9ใช9เรื่องง9าย เราะบางครั้ง อาจมีปYญหาในความเข3าใจและการตีความได3 เนื่องจากภาพเปLนภาษาชนิดหนึ่ง ที่มีขั้นตอนการทำงานของกระบวนการสื่อสาร จากผู3ส9งสาร ส9งเนื้อหา ผ9านสื่อที่ เปL น ภาพ ไปยั ง ผู 3 ร ั บ สาร หรื อ ผู 3 พ บเห็ น ภาพ ทั้ ง ในการสร3 า งสรรค[ แ ละการ ตีค วามหมายที่ส ลับ ซับ ซ3อ นให3เข3าใจร9วมกัน นั้น มีท ัก ษะที่ป ระกอบไปด3ว ย โครงสร3างที่สำคัญของนักออกแบบ 3 ประการ คือ

7

1. ทักษะการวิเคราะห[เนือ้ หา ภาพทีอ่ อกแบบต3องทำหน3าทีส่ อ่ื สารข3อมูล ให3เข3าใจง9าย ในการจะแปลงข3อมูลที่มีเนื้อหาต9าง ๆ ออกมาเปLนภาพได3นั้น จำเปL น ต3 อ งเลื อ กสร3 า งภาพสื ่ อ สารออกมา การเรี ย นรู 3 ห รื อ ทำความเข3 า ใจ ความหมายของภาษาภาพก็เหมือนการเรียนรู3ภาษาอื่น ๆ ซึ่งบางครั้ง อาจจะ ต3องมีการตกลงหรือทำความเข3าใจร9วมกันว9า จะใช3อะไรเปLนสัญลักษณ[ในการสื่อ ความหมายที ่ ใ ห3 เ กิ ด ความเข3 า ใจ ซึ ่ ง ในทางการออกแบบภาพเหล9 า นั ้ น ก็ คื อ องค[ประกอบของภาพที่ต3องคำนึงถึงนั้นเอง 2. ทักษะการจัดองค[ประกอบ เปLนพื้นฐานหนึ่งที่จะทำให3ภาพมีคุณค9า ดึงดูดผู3ชมภาพ ทำให3ภาพดูแตกต9างจากภาพธรรมดาทั่ว ๆ ไปเปLนภาพที่มี ความหมาย การจัดองค[ประกอบให3น9าสนใจนำไปสู9การได3ภาพอันยอดเยี่ยม และ เปLนสิ่งสำคัญมาก ว9าจะสื่อสิ่งใดให3แก9ผู3ชมภาพ ภาพที่ไม9มีจุดเด9นย9อมขาดความ น9าสนใจและความหมาย 3. ทักษะความคิดสร3างสรรค[ สำหรับการคิดสร3างสรรค[ภาพเพื่อสื่อสารใน งานโฆษณาเปLนเรื่องของทั้งวิทยาศาสตร[และศิลปะ ส9วนที่เปLน วิทยาศาสตร[นั้น เปLนเรื่องของการศึกษาวิเคราะห[ข3อมูลต9าง ๆ ไม9ว9าจะเปLนพื้นฐานทางการตลาด ข3อมูลพฤติกรรมผู3บริโภค ข3อมูลเกี่ยวกับกลยุทธ[สื่อ ฯลฯ ส9วนที่เปLนศิลปะนั้น เปLนเรื่องของการคิดค3น การสร3างภาพ สร3างจินตนาการ การออกแบบ เปLนความ พยายามของนักออกแบบในการคิดสร3างสรรค[ภาพที่สามารถส9งสาร ไม9ว9าจะ ความหมายตรง ความหมายแฝง ความหมายทางจิตวิทยา เพื่อให3เกิดประสิทธิภาพ ในการจูงใจของผู3ชมภาพ

8

by Michal Batory

by Sunra Thompson

by Boris Gautier

by studio formagramma

9

By Agency Bronx Comunicação2

by peter snodden

Evgeny Kazantsev

10

Creative by : Taewit Jariyanukulpun Advertising Agnency : BBDO Bangkok

11

การสื่อสารด)วยภาพ (Visual communication) คือการสื่อสารโดยใช)สื่อจำพวก “ภาพ” หรือ “สัญลักษณJ” เปMนตัวสPงสาร (massage) ไปถึง ผู)รับ โดยผู)รับสารสามารถรับรู) เข)าใจ และแปล ความหมายของสารผPานตาสัมผัส หรือการเห็น ซึ ่ ง โดยทั ่ ว ไปแล) ว ภาพสามารถชP ว ยให) ก าร ถPา ยทอดความหมายของเนื้อ หาสาระเปMน ไป อยPางชัดเจนเข)าใจได)งPาย และจดจำได)นานกวPา การใช)คำพูดหรือตัวหนังสือล)วน ๆ ดังนั้นภาพ จึงเปMนสิ่งที่มีอิทธิพลอยPางมากตPอประสิทธิภาพ ของการสื่อสาร

12

Prehistoric cave art, Ennedi Plateau, Chad.

“ภาษาภาพ” (Pictograph) มีวิวัฒนาการมาตั้งแตPสมัยยุคกPอนประวัติศาสตรJ ดังจะเห็นได)ศิลปะภาพเขียนสีกPอนประวัติศาสตรJตามผนังถ้ำ (Prehistoric cave art) การสกั ด หิ น เปM น รู ป (Petroglyph) หรื อ ข) า วของเครื ่ อ งใช) ตP า ง ๆ ที ่ มี จุดมุPงหมายในการสื่อความหมาย ไมPวPาจะเปMนการถPายทอดความเชื่อ ความ ศรัทธา หรือบันทึกเรื่องราวหรือสะท)อนวิถีชีวิตของคนในยุคนั้น อันเปMนยุคที่ อาศัยการสื่อสารโดยผPานทางภาษาภาพมากPอนที่จะมีวิวัฒนาการของมนุษยJ ก)าวไปสูPการประดิษฐJตัวอักษรได)แล)ว เชPน ยุคอียิปตJโบราณที่ใช)ตัวอักษรภาพ เฮียโรกลิฟrก (Hieroglyphic) หรือ ยุคสุเมเรียนใช)อักษรรูปลิ่ม (cuneiform) ใน การสื่อสารผPานสัญลักษณJตPาง ๆ บนแผPนดินเหนียว

13

Han Zei Zi book

ภาษาภาพ (Pictograph) มี ร ู ป แบบใช) ภ าพสื ่ อ สาร และเมื ่ อ เที ย บกั บ อักษรอียิปตJโบราณ (Hieroglyphic) ดูเหมือนจะคล)ายกันมาก แตP “ภาษาภาพ” เปM น รู ป แบบหนึ ่ ง ของการเขี ย นภาพที ่ แ สดงถึ ง ความหมายของภาพตรงตาม ตัวอักษร ในขณะที่ตัวอักษรภาพเฮียโรกลิฟrก สามารถใช)ภาพแสดงถึงการออก เสียงได) อยPางไรก็ตามในยุควัฒนธรรมโบราณหลายแหPงได)สร)างภาษาภาพมาใช) ในการสื่อสารผPานสัญลักษณJตPาง ๆ ในอารยธรรมตัวเอง เชPน จีน พบรูปแบบ ภาษาภาพ (Pictograph) ที่เรียบเรียงสื่อสารออกมาเกPาแกPที่สุด ในหนังสือ Han Zei Zi [4] ที่เขียนขึ้นเมื่อประมาณ 300 ป{กPอนคริสตกาลโดยนักปรัชญาชาวจีน ชื่อ ฮั่นเฟย

14

ซึ่ง โกวิท จิตบรรจง[5] ได4อธิบายถึงวัตถุประสงค@ของการ สื่อสารด4วยภาพมีหลายประการคือ 1. เพื่อให+ข-าวสาร วัตถุประสงค@ที่สำคัญอันดับแรกของ การใช4 ภ าพ คื อ การให4 ขO า วสาร ใช4 ภ าพแทนข4 อ เท็ จ จริ ง เหตุก ารณ@ วัต ถุส ิ่ง ของ สถานที่ เพื่อ เปSน หลัก ฐาน หรื อ เปSน ภาพประกอบขOาว สารคดี และบทความ

Up/Down Mountainbike Magazine

15

2. เพื่อแนะนำ โน+มน+าวใจ หรือใช4ภาพสร4างบรรยากาศให4ผู4รับสารเกิด ความรู4สึกคล4อยตามในเนื้อหา เชOน ภาพสารคดีการทOองเที่ยว หรือภาพเพื่อการ ประชาสัมพันธ@ เปSนต4น

NATIONAL GEOGRAPHIC: PLANET OR PLASTIC?

16

3. เพื่อตกแต-งเนื้อหาให+น-าสนใจ เปSนการใช4ภาพเพื่อดึงดูดให4ผู4ชมภาพ หยุดมอง หรือสร4างสีสันในเนื้อหาให4เกิดความนOาสนใจในเนื้อหามากขึ้น

Illustration by Laura Wood

17

4. เพื่อเน+นความหมายของเนื้อหา เปSนการใช4ภาพเพื่อสื่อความคิดในการ สื่อสาร ชOวยดึงแนวคิดหลักของสารให4เดOนชัด และมีความหมายที่แจOมแจ4งขึ้น โดยเฉพาะอยOางยิ่งเมื่อเนื้อหามีลักษณะเปSนนามธรรม เชOน ปรัชญา ศาสนา เปSนต4น

'Man, God & Nature in the Ancient World Poster: Tokyo National Museum

18

5. เพื ่ อ ขยายแนวความคิ ด และความเข+ า ใจ เปS น การใช4 ภ าพประกอบ เนื้อหาซับซ4อนซึ่งยากตOอการรับรู4และทำความเข4าใจ โดยเฉพาะเนื้อหาที่เกี่ยวกับ การเปรียบเทียบ เชิงปริมาณ กระบวนการ ความสัมพันธ@ทางโครงสร4าง การทำ หน4าที่ ระบบและวิธีการปฏิบัติ

Design by Eda Qokaj

19

6. เพื่อการโฆษณา เปSนการใช4ภาพเพื่ออธิบายคุณภาพสินค4าและบริการ เพื่อโน4มน4าวใจหรือกระตุ4นเรOงเร4าให4ผู4รับสารเกิดความกระหาย อยากรู4 อยากเห็น อยากทดลอง และอยากซื้อสินค4าหรืออยากใช4บริการ ซึ่งได4แกOภาพโฆษณาที่เราพบ เห็นโดยทั่วไปนั่นเอง

Creative by Sean Davison

20

7. เพื ่ อ สื ่ อ สารเชิ ง สั ญ ลั ก ษณN เปS น การสื ่ อ สารภาพ ทั ้ ง ในระดั บ สื่ อ ความหมายแบบตรงไปตรงมา การสื่อสารที่ต4องอาศัยการเชื่อมโยงสิ่งที่เปSนเหตุและ ผลตOอกัน หรือกระทั่งสัญลักษณ@ที่เกิดจากกาเรียนรู4รOวมกันของคนในสังคม มี ความหมายถึงสิ่งอื่นตามที่คนในสังคมได4ตกลงความหมายกันเอาไว4 เชOน ภาพ กุหลาบดอกสีแดง อาจหมายถึงความรัก ภาพกางเขนเปSนสัญลักษณ@แทนศาสนา คริสต@ เปSนต4น

Design by Yuni Yoshida

21

การเลื อ กสรรภาพมาใช4 ถ O า ยทอดเรื ่ อ งใดเรื ่ อ งหนึ ่ ง เราต4 อ งดู คุณสมบัติที่ดีของภาพด4วยเชOนกัน ดังกรณีเลือกแคOภาพงOาย ๆ อยOางเชOน “ส4ม” หากลองถามคนสิบคนให4เลือกภาพส4มมาออกแบบ คำตอบที่ได4ยOอม มีหลากหลาย บางคนก็โชว@แคOผลส4มลูกเดียว บางคนใช4ต4นส4มทั้งต4น บางคน อาจเน4นภาพสีของเปลือกส4ม บางคนอาจสื่อไปทางรสชาติของผล หรือกลิ่น หอม ความสดชื่น บางคนเลือกภาพแทนวิตามินซี คำตอบที่หลากหลาย เหลOานี้คือ ความคิดหรือไอเดียที่ประกอบกันเพื่อบOงชี้แนวคิดการใช4ภาพส4ม Jonathan Baldwin และ Lucienne Roberts [6] ได4อธิบายการเลือกนำ ภาพที่นำมาใช4ในสื่อสารได4อยOางมีประสิทธิผล ควรคำนึงถึงคุณสมบัติสำคัญ ๆ ดังตOอไปนี้ คือ 1. สะดุดตา หมายถึง เปSนภาพที่ดึงดูดความสนใจของผู4ดู สะดุดตาจน สามารถเรียกความสนใจของผูด4 ูให4หยุคดูภาพนั้น ๆ ในทันทีที่เห็น 2. สื่อความหมายง-าย ทำให4ผู4ดูภาพหรือผู4รับสารเข4าใจ และแปล ความหมายของภาพได4ตรงกับสาระที่แท4จริงของสารนั้น ๆ และสามารถ ตัดสินใจได4ถูกต4อง 3. มีความน-าเชื่อถือ ภาพที่ออกแบบเพื่อการสื่อสารที่ต4องเปSนภาพ ที่ดูสมจริง หรือหากเปSนการแตOงภาพ ต4องทำให4เกิดความนOาเชื่อถือ 4. มีลักษณะเร+าอารมณN เปSนภาพที่มีความงามและสามารถทำให4เกิด อารมณ@ความรู4สึก และมีอิทธิพลในการโน4มน4าวใจผู4ดูภาพสูง

22

วิเคราะห์ ภาพ 1. ลองสังเกตสื่อรอบตัวดูแล4วจะเห็นวOาการสื่อสารด4วยภาพนั้นรายล4อมเราอยูO ทุกที่ทุกเวลาจริง ๆ ไมOวOาจะเปSนโฆษณาจากแบรนด@ดังตาม billboard ตOาง ๆ บนท4องถนน , โปสเตอร@ที่ถูกติดอยูOในลิฟต@ของห4างที่เชิญคุณเข4ารOวมกิจกรรม และสื่อจากโลกออนไลน@ ไมOวOาจะเปSน คำคมที่มีรูปภาพ, meme ขำขัน , ภาพ GIFs , Infographic หรือภาพโฆษณาขายของใน เฟซบุ}ก 2. จดบันทึกยOอวOาภาพนั้นจะมาจากที่ไหน สื่อสารอะไร พิจารณาถึงวัตถุประสงค@ ของการสื่อสารที่นักออกแบบต4องการจะสื่อออกมา 3. จากนั ้ น พิ จ ารณาถึ ง เทคนิ ค หรื อ องค@ ป ระกอบที ่ ใ ช4 ใ นการสื ่ อ ความหมาย อารมณ@ที่เกิดขึ้นเมื่อเห็นภาพนั้นเปSนอยOางไร เชOน ให4ความนOาเชื่อถือ เบิกบาน สนุกสนาน เปSนต4น 4. ภาพนั้นงOายตOอความเข4าใจหรือต4องใช4เวลาพิจารณาอยOางละเอียด จดคำ วิจารณ@ของตัวองตOอภาพนั้น ๆ 5. จากนั้นลองเลือกภาพขึ้นมาสัก 1 ชิ้นที่คุณคิดวOาจะนำมันไปตOอยอดเปSนงาน ออกแบบใหมOได4 การวิเคราะห@ผลงานที่มีอยูOแล4วจะชOวยให4คุณรู4จักการสื่อสารผOานภาพ และ รู4จักแยกสOวนประกอบเพื่อนำแตOละสOวนที่ดีของงานนั้นมาใช4รOวมกับงานออกแบบของ คุณได4

23

การพัฒนาแนวคิด ตั้งอยูOบนพื้นฐานกลุOมเป าหมายที่คุณต4องการ จากนั้นลองนำงานที่คุณเคยวิเคราะห@ อ4างอิงไว4มาพัฒนางานออกแบบ วOามันควรออกมาเปSนรูปแบบใด 1. เริ่มต4นด4วยการระดมความคิดหาคำ เพื่อพัฒนามาเปSนไอเดีย, คุณคOา, บริการ ของสินค4าที่นำมาออกแบบ 2. สร4างแผนผังความคิด (mind map) จดบันทึกเชื่อมโยงไอเดียให4เห็น ภาพรวมทั้งหมด 3. อยOาเพิ่งตัดสินใจไปกับไอเดียอันใดอันหนึ่ง แม4วOามันนOาสนใจหรือดูมี ศักยภาพสูงก็ตาม ให4เลือกไอเดียมาสามชิ้นที่คิดวOาดีที่สุด พิจารณาถึงการ สื่อความหมายของแตOละไอเดียประกอบ 4. จากนั้นลองหาภาพมาสื่อถึงความหมายของไอเดียนั้น สัก 10 ภาพจาก หลาย ๆ มุมมอง การพั ฒ นาแนวคิ ด จะทำให4 เ ห็ น วO า เราได4 ภ าพที ่ ส ื ่ อ ความหมายที ่ ต รงกั บ วัตถุประสงค@ในการออกแบบของเรามากที่สุด และได4ภาพดีที่สุดจากการทดลอง เลือกภาพหลาย ๆ แบบ

24

25

การมองหาความแตกตPาง ที่จะมาเปMนจุด แข็งให)กับแบรนดJ เปMนเรื่องที่นักออกแบบ นัก โฆษณา นักการตลาด และเจ)าของธุรกิจจะต)อง คิดหากลยุทธJเพื่อมัดใจกลุPมเปÅาหมาย ซึ่งหลาย คนอาจจะต)อ งเจอกับ ความท)า ทายในการนำ ภาพมาใช)งานให)เข)ากับเนื้อหาของโฆษณานั้น เพื่อเสริมให)ผู)ชมเกิดความอยากรู)เกี่ยวกับสินค)า มากขึ้น การเลื อ กใช) ภ าพมาประกอบในการ สื่อสารจึงเปMนสPวนสำคัญที่จะนำมาพิจารณาใน ขั้นแรก ๆ รPวมกับการกำหนดทิศทางสื่อสารทาง อารมณJและลีลา (Mood & Tone) ของสื่อนั้น ๆ

26

ภาพถOา ยในกรณี นี้ก็ค ือ ภาพที่ถ Oา ยทอดความ เหมือนจริง เนื่องจากการถOายภาพจากสิ่งที่มีอยูOจริง เปSน รูปแบบที่งOายที่สุดที่เราสามารถทำให4แบรนด@หรือสินค4า ของเราเปSนที่รู4จักด4วยภาพเดียวได4 ซึ่งในการออกแบบ เพื ่ อ สื ่ อ สาร หรื อ การโฆษณามี ก ารนำภาพถO า ย มา ประกอบงานโฆษณาหลายรูปแบบ ซึ่งสามารถจำแนกได4 ดังนี้ 1 . ภาพสินค+า (Product short) ภาพสินค4ามักใช4เปSนวัตถุประสงค@หลักของงาน โฆษณา เพื่อโอกาสสื่อสารจุดเดOนของสินค4า สรรพคุณ ตOาง ๆ หรือ เน4นความสวยงาม ความแปลกใหมOของตัว สิ น ค4 า ดั ง นั ้ น การเก็ บ รายละเอี ย ดคุ ณ ลั ก ษณะและ สภาพภายนอกของสินค4าได4เหมือนจริงจึงมีความสำคัญ อยOางยิ่ง Tara Hornor [7] บรรณาธิ ก ารอาวุ โ สของ บริษัท Creative Content Experts ได4รวบรวมเคล็ด ลับสำหรับการใช4ภาพสินค4ามาโฆษณาที่ทำให4เกิดมุมมอง ใหมOๆ ได4เทคนิคนOาสนใจ เผื่อใครนำไปปรับใช4ในงาน ออกแบบภาพถOายสินค4าตัวเองได4เลย

27

ภาพแขวนสินค,า (Hang Products) การแขวนสินค:าเพื่อ ให:ได:มุมมอง ที่ดีขึ้น การแขวนอยLางสร:างสรรคM เชL น คว่ ำ ด: า นข: า ง หรื อ แขวนให: เห็นมุมมองใหมLบ:าง photo By Tara Hornor

ภาพจากมุมที่ผิดปกติ (Unusual Angles) มุมที่รู:สึกวLาแปลกใหมL หรือมุมที่ ไมLคLอยชินตา สร:างให:เกิดภาพที่ไมL คุ:นเคย ก็จะสามารถดึงดูดความ สนใจของลูกค:าได:เป^นอยLางดี Photo By Tata Rossi

28

ใช,การสะท,อน (Use Reflections) ภาพสะท:อนชLวยเพิ่มความลึกให:กับ ภาพธรรมดา สร: างความนL าสนใจ ของตัวสินค:านั้น ๆ อาจจะลองทำ กับพื้นน้ำ พื้นเงาตLาง ๆ แล:วจะได: ภาพที่นLามหัศจรรยMกวLารูปสินค:า ทั่วไป Photo By Tata Rossi

ใช,แท=นวางเสริม (Use Stands) การจั ด วางผลิ ต ภั ณ ฑM บ นแทL น เสริ ม มาตั ้ ง ผลิ ต ภั ณ ฑM ใ ห: เ ดL น ขึ้ น เชLน กลLองลูกบาศกM ก:อนหิน หรือ แทL น รอง เป^ น วิ ธ ี ท ี ่ ย อดเยี ่ ย มใน การเพิ่มองคMประกอบที่หลากหลาย หรื อ dynamic ให: ก ั บ ภาพถL า ย ได:ดี Photo By Tata Rossi

29

เพิ่มพื้นผิว (Add Texture) ลองปรับพื้นหลังให:มีเรื่องราวมาก ขึ้น แปลกใหมLขึ้น ก็จะสามารถทำ ให:สินค:าดูนLาสนใจขึ้นอยLางผิดคาด เลยทีเดียว

Photo By Tata Rossi

เพิ่มองคBประกอบภาพ (Add Element) เทคนิคการจัดองคMประกอบมาเพิ่ม ในภาพ ด:วยอุปกรณMประกอบฉาก เฉพาะเรื่องเพื่อให:ได:ภาพที่สร:าง ความนLาสนใจยิ่งขึ้น

Photo By Tata Rossi

30

รวมองคBประกอบของมนุษยB (Include the Human Element) อี ก หนึ ่ ง แนวคิ ด ในการใช: ภ าพที่ นL า สนใจคื อ การรวมสL ว นตL า ง ๆ ของรLางกายมนุษยM เชLน มือหรือ เท: า เข: า ไปผสมกั บ สิ น ค: า ทำให: ภาพนLาสนใจขึ้นจากความลึกลับ Design by Yuni Yoshida

เพิ่มบุคลิกภาพ (Add Personality) ทำให:ภาพมีบุคลิกของมนุษยMใน การถL า ยทอดเรื ่ อ งราว โดยการ สร:างสร:างตัวละครที่เป^นบุคลิก ของสินค:าให:แตกตLางจากสินค:า คูLแขLง หรือใช:บุคคลมาประกอบ เพื่อแสดงลักษณะของผลิตภัณฑM ก็ได: Design by Yuni Yoshida

31

2. ภาพตกแต;ง (Retouch) หลายคนอาจจะมองวOางานรีทัช (Retouch) คือการแก4ไข ตกแตOงภาพให4สวยงาม เชOน การลบ ริ้วรอย สิว ตีนกา ยืดแขนขา ให4ภาพนางแบบ แตOความหมายของงานนี้มีมากกวOานั้น โดยเฉพาะ อยOางยิ่ง เมื่อมาอยูOในสายโฆษณาที่ต4องใช4ภาพนิ่งมาสื่อสารให4จบ เพียงแคOมองดูไมOกี่วินาที งานรีทัชสามารถขยายพรมแดนความหมายไปถึง “งานสร4าง ภาพ” เปSนการถOายทอดภาพตามจินตนาการที่อยูOในหัวของครีเอ ทีฟ หรือลูกค4าออกมา ให4ได4ภาพสมจริงที่สุด หรือดัดแปลงให4เกิด ความเหนือจริงแบบใด แตOต4องสื่อให4ได4ด4วยภาษาภาพซึ่งเปSนภาษา ที่ทั่วโลกเข4าใจให4ตรงกัน เชOน ความร4อน ใชOความร4อนเดียวกันไหม หรือลูกค4าบางคนอยากได4ความรู4สึกสดชื่น แตOไมOเอาภาพน้ำแข็ง เราจะตกแตOงภาพอยOางไร ใช4ภาพอะไรสื่อสาร

32

จินตนาการเหนือจริง (Surrealism) เป^นการสร:างภาพสิ่งที่มีอยูLจริงมา สร: า งเป^ น เหตุ ก ารณM ท ี ่ ด ู เ หนื อ จริ ง เป^นไปไมLได:ในความเป^นจริง หรือให: เกินจริง ซึ่งสามารถเรียกร:องความ สนใจให:หยุดดูได:เสมอ Creative by Holger Matthies

การผสมภาพ (Image mix) เป^นการนำภาพของสิ่งของสองสิ่งที่ มีอยูLจริง สิ่งที่ไมLนLามีสLวนเกี่ยวข:อง กั น นำมาจั ด วางเข: า ไว: ด : ว ยกั น ใน สิ่งแวดล:อมเดียวกัน เพื่อสร:างความ แปลกตาในการชม Creative by Holger Matthies

33

การเปลี่ยนรูปร=าง (Transformation) เป^นการนำภาพของสิ่งที่มีอยูLจริง มาสร: าง ตกแตL ง เปลี ่ ยนแปลง รูปรLาง และลักษณะให:ดูแปลก ประหลาด Creative by Daniel Motta

ทำให,มีชีวิต (Bring to life)

การสร) า งภาพจาก สิ ่ ง ที ่ ไ ร: วิ ญ ญานหรื อ ปราศจากชี วิ ต กลับมีให:ดูมีชีวิตขึ้นมาอีกครั้ง Creative by Andrea Stillacci

สร,างสรรพสิ่งขึ้นมาใหม= (Rebuilding things) เป^ น การสร: า งภาพขึ ้ น มาใหมL จากสิ่งที่เราไมLเคยรู: ไมLเคยเห็น ในความเป^นจริงมากLอน Creative by Din Sumedi

34

คือภาพที่สร4างขึ้นมาจากวิธีพื้นฐาน เชOน การวาดหรือ การเขียน ด4วยเครื่องมือตOาง ๆ เชOน ดินสอ ปากกา การ ระบาย หรือใช4คอมพิวเตอร@สร4างภาพ สำหรับนักออกแบบท ที ่ ม ี ท ั ก ษะด4 า นนี ้ จ ะทำหน4 า ที ่ อ อกแบบถO า ยทอดอารมณ@ บรรยากาศ บุคลิกของภาพให4ออกมาตรงกับบุคลิกสินค4า ความมี เ สนO ห @ ข องงานภาพประกอบนั ้ น มี ล ั ก ษณะพิ เ ศษ มากกวOาภาพถOายคือเมื่อใช4ภาพประกอบกับแบรนด@หนึ่งแล4ว คาแรคเตอร@ไมOอาจทำซ้ำได4อีกในสินค4าชนิดอื่นได4

Illstration by Nikolina Popovic

35

1. ภาพวาด (drawing) เปSนการสร4างภาพด4วยวิธีวาดมือ วิธีนี้เปSนวิธีที่ใช4มาตั้งแตOยุคแรกของสื่อ สิ่งพิมพ@ เปSนการใช4ภาพเพื่อขยายความ เข4 า ใจ ซึ ่ ง ในสมั ย กO อ นยั ง ไมO มี ก ล4 อ ง บันทึกภาพ ปèจจุบันการเขียนภาพด4วย มื อ ยั ง มี ค วามสำคั ญ อยู O ใ นงานโฆษณา ที่ต4องการความแปลกใหมO Illstration by Dilip Khomne

2. ภาพกราฟHก (Graphic) เปS น ภาพที่ ถ ู ก สร4 า งขึ ้ น มาจาก โปรแกรมคอมพิวเตอร@ ลักษณะภาพที่ ได4มีทั้งลักษณะสองมิติ โปรแกรมแกรม ที่นิยมสร4างภาพคือ Illustrator เรียก ภาพกราฟêกชนิดนี้วOา “เวกเตอร@” ซึ่ง สามารถปรับขยายขนาดได4โดยไมOเสีย คุณภาพความละเอียดไป เหมาะสำหรับ การพิ ม พ@ แ ละการแสดงผลที ่ ม ี ค วาม ละเอียดสูง Illstration by Noma Bar

36

3. ภาพจำลอง 3 มิติ (3D Model) เปMนงานกราฟrกที่ใช)โปรแกรม สร)างภาพ 3 มิติโดย ภาพลักษณะนี้ จะมีสPวนโค)ง เว)า มุม แสง ความลึก ทำให)ได)ภาพที่มีสีและแสงเงาเหมือน จริ ง เชP น ภาพในลั กษณะสามมิ ติ เพื่อจำงานลองสถาปÜตยกรรม หรือ คาแรคเตอรJการJตูน เปMนต)น Illstration by Surachai Puthikulangkura

37

4. ภาพติด ปะ ต;อ (Collage) เปMนภาพโดยการใช)เทคนิค การตั ด แปะ ซึ ่ ง จะใช) กระดาษ รู ป ภาพ สP ว นของหนั ง สื อ พิ ม พJ นิตยสาร เศษผ)า หรือสารพัดสิ่งที่ หาได) ติดทั้งหมดลงไปบนกระดาษ หรือผ)าใบ Illstration by Ritter Willy Putra

38

แผนภูมิรูปภาพ ( Pictogram ) คือ แผนภูมิที่ใช4รูปภาพแทนจำนวนของ ข4 อ มู ล ที ่ น ำเสนอ ในลั ก ษณะของตารางและแผนผั ง ไว4 อ ธิ บ ายโครงสร4 า ง ลำดั บ ขั้นตอน แผนภูมิรูปภาพ เปSนการแสดงทักษะในการสร4างภาษาภาพอยOางหนึ่งที่มี ลักษณะพิเศษคือ เปSนการจัดการข4อมูลที่มีอยูOจำนวนมากให4เข4าใจงOายขึ้น ซึ่งเปSนการ ออกแบบที่พัฒนามาจากภาษาดั้งเดิมอยOาง “กราฟ” เกิดเปSนการสื่อสารข4อมูลเชิง ภาพ (Infographic) Creative by Rajkamal Aich

39

ตัวอักษรสามารถทำหน4าที่เหมือนรูปภาพเพื่อเปลี่ยนมุมมองและความรู4สึก (look and feel)" ดึงดูดให4ผู4ชมสนใจเชOนเดียวกับการใช4ภาพประเภทอื่น ๆ ได4เชOนกัน ศาสตร@แหOงการออกแบบและการจัดตัวอักษรเพื่อการสื่อสาร โดยลักษณะที่ใช4ในการ ออกแบบมักเปSนการนำตัวอักษรมาสร4างรูปลักษณะที่จำเพาะเจาะจง เพื่อให4เกิดมิติ ของความสวยงามและมีเอกลักษณ@

Creative by Áron Jancsó2

40

รู ปภาพและกราฟิ ก 1. เลือกเพลงที่คุ4นเคยมาสัก 1 เพลง พิจารณาเนื้อหาเพลงตั้งแตOต4น จน จบ ความหมายของเนื้ อ หา ลั ก ษณะของเพลง ตี ค วามออกมาเปS น องค@ ป ระกอบสำคั ญ ที ่ เ ปS น แกO น เชO น ตั ว ละคร เหตุ ก ารณ@ ลองระบุ กลุOมเป าหมายวOาทำให4ใครดู 2. ค4นคว4าหาภาพประกอบเปSนแนวทางเพื่อสร4างแนวคิดที่จะสื่อสารเพลงนั้น ออกมาเปSนภาพ ๆ เดียว 3. สร4างภาพปกเพื่อถOายทอด อาจะใช4วิธีถOายภาพ วาดภาพ หรือสร4างภาพ ขึ้นมาด4วยเทคนิคตOาง ๆ จากคอมพิวเตอร@ หรือตัดแปะภาพ ตามที่ตนเอง ถนัด อยOางน4อย 3 ภาพ 4. พิจารณาวOาภาพใดเหมาะสมกับแนวคิดหรือความหมายของเพลงมาก ที่สุด การทดลองสร4างภาพลักษณะตOาง ๆ เพื่อเปSนทางเลือกที่ดีที่สุด จะทำให4งาน ออกแบบมีความนOาสนใจมากขึ้น

41

42

Creative by : Taewit Jariyanukulpun Advertising Agnency : BBDO Bangkok

43

การออกแบบภาพให,อ อกมาดึง ดูด ความ สนใจได,สำเร็จหรือไม<นั้น จำเป@นต,องเข,าใจสิ่งที่มี ผลต<อการรับรู,ว<าทำอย<างไรการออกแบบจึงจะ สร, า งแรงดึ ง ดู ด มากพอ ผู , อ อกแบบต, อ งค, น หา คำตอบว<า เหตุใดจึงจะทำให,งานที่ออกแบบเกิด ความน<าสนใจ และสามารถครองใจผูพ, บเห็นได, ซึ่งการรับรู,ในภาพใดภาพหนึ่งนั้น จะเกิด จากการที่สมองประมวลผลประสบการณOในอดีต และความรู,สึกขณะชมภาพนั้น ในบทนี้จะอธิบาย ถึงเรื่องที่ว<าด,วย “กฎการรับรู,ทางสายตา” เราจะ รู,สึกนึกคิดอย<างไรกับข,อมูลที่เป@นรูปภาพ

44

Zena O'Connor [8] ได,อธิบายไว,ในบทความเรื่อง “เกสตัลทO ทฤษฎีการรับรู,: ผลกระทบในการออกแบบการ สื่อสารภาพร<วมสมัย” (Gestalt Theories of Perception: The Impact in Contemporary Visual Communications Design) ว<าทฤษฎีเกสตัลทOถูกพัฒนา ขึ้นโดยนักจิตวิทยาชาว เยอรมั น ในช< ว งทศวรรษที่ 1920โดย Max Wertheimer (1880–1943), Kurt Koffka (1886 –1941) และ Wolfgang Kohler (1887–1967), ซึ่งอธิบายวิธีการรับรู,สิ่งต<าง ๆ ที่เกิด จากการมองเห็น และมีการจัดระเบียบ สิ่งที่รับรู,เหล<านั้นใน สมองเพื่อสร,าง "ความเข,าใจต<อภาพ" ดังกล<าว หรือเรียก ทฤษฎีเหล<านี้เรียกว<า หลักการเกสตัลทO (Gestalt Principles) แก<นแนวความคิดของหลักการนี้คือ "ส<วนรวมเป@นสิ่ง ที่มากกว<าผลรวมของส<วนย<อย" เมื่อเราพบ รูปแบบ, ภาพ, รูปร<าง หรือโครงสร,าง ที่ดูสับสนวุ<นวาย สมองของเราจะ รวมภาพเป@นหนึ่งเดียวกันทั้งหมด และจะแปรเปลี่ยนเป@น รูปแบบและรูปภาพที่มองเห็นได,ชัดเจนมากขึ้น ทำให,ภาพ ดั ง กล< า วดู ง < า ย อั น เป@ น กลไกของสมองเพื ่ อ ช< ว ยให, เ ราไม< สับสนเวลามองเห็นภาพ

45

เกสตัลทO (Gestalt) เป@นคำในภาษาเยอรมัน หมายถึง รูปร<าง รูปทรง (Shape Form) เป@นทฤษฎีใช,อธิบายการรับรู,ภาพของมนุษยO (Visual Perception) ซึ่ง Ellen Lupton และ Jennifer Cole Phillips [9] ได, อ ธิ บ ายหลั ก การเกสตั ล ทO ใ นงาน ออกแบบภาพกราฟíก โดยมีอยู< 6 หัวข,อหลัก ได,แก<

1.

2.

3.

4.

5.

6.

กฎของความคล-ายคลึง (Similarity) กฎของความใกล-ชิด (Proximity) กฎของรูปรGางและพื้นหลัง (Figure & Ground) กฎของความสมมาตร (Symmetry) กฎของทิศทางรGวมกัน (Common Fate) กฎของการปกป`ด (closure)

46

กฎในข,อนี้ใช,เป@นหลักการออกแบบง<ายๆ คือ อะไรที่เหมือนกันเราจะมองว<า เป@นกลุ<มเดียวกัน ใช,ในการวางกลุ<มของการรับรู, เช<น กลุ<มของ เส,น กลุ<มสี หรือสิ่งที่ รูปร<างคล,ายคลึงกัน ขนาดเท<ากัน คนเราจะรับรู,ว<ากลุ<มนั้นเป@นสิ่งเดียวกัน หรือพวก เดียวกัน

ในภาพการวางรูปวงกลมเกิดการ รับรู4แบ6งเป7น 2 กลุ6ม คือกลุ(มของวงกลม ที่มีสีน้ำเงินเหมือนกัน กับกลุ(มวงกลมที่ มีสีเหลืองเหมือนกัน นั่นแสดงว6าสีใช4เป7น การแบ6งความสัมพันธ@ระหว6างกลุ6ม หรือ พูดอีกมุมหนึ่งคือ สีกำลังใช4สร4างความ สัมพันธ@ของวัตถุขึ้นมา ในขณะเดียวกันก็ กำลังแบ6งแยกวัตถุออกเป7น 2 กลุ6ม ภาพนี้เราจะเห็นว6ากลุ6มวงกลม จะถูกแบ6งออกเป7น 2 กลุ6มด4วยขนาด คือ กลุ(มที่มีขนาดเล็กเหมือนกัน กับกลุ(มที่ มีขนาดใหญ(เหมือนกัน

47

ภาพนี้ก็เช6นกัน สมองจะรับรู4กลุ6ม วัตถุออกเป7น 2 กลุ6มด4วยรูปร6าง คือ กลุ(ม ที่มีรูปทรงสี่เหลี่ยมเหมือนกัน กับ กลุ(ม ที่มีรูปทรงวงกลมเหมือนกัน

ทิศทางการเรียงตัว ก็สามารถทำ ให4เรารับรู4ว6าวัตถุแยกออกเป7น 2 กลุ6ม คือ กลุ(มที่เรียงตัวแนวนอนเหมือนกัน กับกลุ(มที่เรียงตัวแนวเฉียงเหมือนกัน

เมื่อทราบวิธีการรับรู2เป4นเช7นนี้แล2ว ข2อตกลงของกฎ ความเหมือน คือเป4นวิธีการ สร#าง / ทำลาย (create / destroy Relationship) ความสัมพันธCระหว7างกลุ7มวัตถุ ถ2าอธิบายให2เข2าใจอย7างถ7องแท2ของ กฎนี้ก็คือ ขณะที่เกิดการสร2างความสัมพันธCของวัตถุขึ้นมา ในอีก มุมมองหนึ่งก็แบ7งแยกกลุ7มวัตถุออกจากกันได2เช7นกัน ดังนั้นทั้งการ สร2างหรือการแบ7งจึงเป4นเรื่องเดียวกัน

48

กรณี ศ ึ ก ษาการออกแบบ ด4วยการใช4กฎของความคล4ายคลึง (Similarity) เป7 น งานออกแบบ หน4าปกนิตยสาร Time ซึ่ง แสดง การใช4น้ำหนักของเส4น 2 น้ำหนัก (ทำให4 แ ยกได4 เ ป7 น 2 กลุ 6 ม วั ต ถุ ) เพื ่ อ สร4 า งภาพเครื ่ อ งบิ น ออกมา ง6าย ๆ เป7นพลังของทฤษฎีข4อนี้ Creative by Ben Wiseman

กรณี ศ ึ ก ษาการออกแบบ โฆษณา Nescafe ใช4 ป ระโยชน@ จากการเชื ่ อ มโยงเรื ่ อ งการนอน หลั บ โดยอาศั ย กฎแห6 ง ความ คล4ายคลึง ด4วยตัว “Z” ซึ่งมักใช4 เพื่อแสดงถึงการนอนหลับ เรียง เป7นแพทเทิร@นลงมาเปลี่ยน เป7น “N ” ซึ่งเป7นอักษรย6อของแบรนด@ ทิ้งท4ายด4วยคำว6า “ไม6มีอะไรปลุก คุณเท6า Nescafé” Creative by Rene Moraga

49

กรณีศึกษาการออกแบบภาพ สัญลักษณ@จากกฎความคล4ายคลึงของ โลโก4 Sun Microsystems ซึ ่ ง คำว6 า SUN เป7นเพียงแค6ตัวอักษร U และ U แบบกลับหัวเท6านั้น ใช4วิธีเรียงเป7นวน กันไปมาเป7นรูปสี่เหลี่ยม เมื่อรวมกัน แล4ว “U” ที่สลับกันนั้นจะอ6านเป7นคำ ว6า “SUN” ทั้งสี่ด4าน

Sun Microsystems Logo

กรณีศึกษาการออกเเบบภาพ กราฟtกในลักษณะ Pattern โดยใช4กฎ ของความคล4ายคลึง และแทรกความ ผิดปกติให4เกิดขึ้นในองค@ประกอบเป7น วิธีเรียกร4องความสนใจได4ดี เมื่อมีภาพ ที่ไม6เหมือนกันมาทำลายรูปแบบของ ความคล4 า ยคลึ ง กั น ซึ ่ ง ผลกระทบนี้ เรี ย กว6 า การสร4 า งความผิ ด ปกติ เ พื่ อ ดึงดูดความสนใจ cover the Beatles' album Hard Day's Night

50

กฎข,อนี้คือ การจัดกลุ)มความสัมพันธ1ของข5อมูล (ทั้งตัวอักษรและรูปภาพ) ที่มีความเกี่ยวข,องกันให,มาอยู<ใกล,กัน การทำเช<นนี้เป@นการช<วยผู,ดูได,จัดการกลุ<ม ข,อมูลก<อนเบื้องต,น เพื่อที่เขาจะได,ไม<ต,องไปตีความทุกอย<างเอง นอกจากนี้การจัดองคOประกอบให,ความสำคัญของลำดับชั้นการมองเห็น (visual hierarchy) ก็คือโดยทั่วไปแล,ววัตถุที่อยู<ใกล,กันมักถูกมองว<าเกี่ยวข,องกัน มากกว<าวัตถุที่อยู<ห<างกัน

ในตัวอย<างข,างต,น กลุ<มของวงกลม 16 วงรูปซ,ายมือ (before) คือถึงแม,สีจะ ต<างกันเมื่ออยู<รวมกันจะถูกมองว<าเป@นกลุ<ม เดีย ว ในขณะที่วงกลม 16 วง ในรูป ด,านขวาจะถูกมองว<าเป@น 2 กลุ<มที่แยกจากกัน ความแตกต<างเพียงอย<างเดียวคือ ช<องว<างระหว<างกลาง

51

ในหลายกรณีการออกแบบมัก ใช4สีพื้นเป7นหลังในสร4างความใกล4ชิด เฉพาะกลุ6มขึ้นมา ในขณะเดียวกันวัตถุ ก็ถูกแบ6งกลุ6มออกจากกัน อัตโนมัติ

นักออกแบบยังสามารถใช4เส4น จัดกลุ6มความสัมพันธ@ของข4อมูลได4 เพื่อ แบ6งกลุ6มวัตถุอออกจากกันเป7น 2 กลุ6ม เช6นเดียวกันกับการใช4สีพื้นหลังในการ แบ6งกลุ6ม

จากตัวอย<างจะเห็นว<า สมองเข,าใจว<ารูปที่มองเห็นนี้ถูกแบ<งเป@น 2 กลุ<มใหญ<ๆ เพราะสมองเราจะมองภาพในมุม มองใหญ<ก<อน แล,วค<อย มองไปในรายละเอียดภายหลัง การทำงานของกฎความใกล,ชิด บาง กรณี ค ล, า ยคลึ ง กั บ กฎความเหมื อ น ซึ ่ ง สามารถ รวม หรื อ แยก ความสัมพันธOระหว<างกลุ<มวัตถุได,เช<นเดียวกัน

52

กรณีศึกษาการออกแบบโดย ใช4กฎความใกล4ชิดจัดความสัมพันธ@ แบบกลุ6ม เพื่อสร4างลำดับชั้นของใน การเสนอกลุ 6 มของข4อ มู ล ช6 ว ยให4 ผู 4 ช มสามารถจั ด ระเบี ย บข4อ มู ล ที่ สำคัญ ได4 ตั วอย6า งในภาพแบ6 งชุด ข4อมูลเป7น 3 กลุ6ม คือ ลำดับกลุ6ม ใหญ6เป7นภาพการเรียงของกราฟtก มุ6งให4ผู4ชมเห็นอันดับแรก ต6อมากลุ6ม ขนาดกลางของตั ว อั ก ษรด4 า นบน และกลุ 6 ม ที่ 3 มี ข นาดเล็ ก สุ ด เป7 น ตัวอักษรด4านล6าง Creative by L.E.GRÁFICO

กรณี ศ ึ ก ษาการออกแบบ โปสเตอร@โดยใช4กฎของความใกล4ชิด ช6 ว ยให4 น ั ก ออกแบบสามารถแบ6 ง ภาพเป7นแถวในการสื่อข4อมูลที่แยก ตามลำดั บ การเล6 า เรื ่ อ งของปy ไ ด4 อย6างน6าสนใจ Creative by David Vijil

53

กรณี ศ ึ ก ษาหลั ก การความ ใกล4ชิดยังถูกนำไปใช4เป7นเทคนิคใน การออกแบบโลโก4ของ Unilever ด4วย วิธีการจัดวางภาพไอคอนขนาดเล็ก จำนวน 25 ภาพ ซึ่งแสดงถึงตัวแทน สำคัญของธุรกิจที่ Unilever สร4าง โดยวางเรียงไอคอนไว4ใกล4กัน ทำให4 สามารถรับรูภ4 าพเป7นตัวอักษร “U” (ใน Unilever) designed by Wolff Olins

กรณี ศ ึ ก ษากฎของความ ใกล4ชิดที่ในการถ6ายภาพ หากเรา ต4องการสร4างให4เกิดความเชื่อมโยง ระหว6างองค@ประกอบต6าง ๆ ในภาพ จำเป7นต4องนำองค@ประกอบเหล6านั้น มาไว4ใกล4กัน เช6น วางดอกไม4อยู6ใกล4 กั บ กล4 อ งมากขึ ้ น ทำให4 ข นาดของ ดอกไม4ไปสัมพันธ@กันกับหญิงสาวที่ อยู 6 ข 4 า งหลั ง ทำให4 ต ารั บ รู 4 ว 6 า เป7 น กระโปรงของเธอ Photography by Tatiana Mikhina.

54

ภาพต<าง ๆ จะเกิดขึ้นได,ต,องอาศัยความสัมพันธOระหว<างรูป (figure) และพื้น หลั ง (ground) หากใครเคยศึ ก ษา graphic design มาบ, า งแล, ว ปó ญ หาของนั ก ออกแบบ ส<วนใหญ<ที่เกิดขึ้น มักจะให,ความสำคัญกับการเลือกและสร,างสรรคO องคOประกอบต<าง ๆ จนบางครั้งก็ลืมคำนึงถึงพื้นหลังที่เกิดขึ้นจากการออกแบบ หรือ ความสัมพันธOระหว<างพื้นที่กับรูปร<างที่ส<งเสริมซึ่งและกัน ซึ่งในบางกรณีทำให,เรา มองเห็นภาพในลักษณะลวงตา 2 แง<มุม ในภาพเดียวกันได, คือใช,หลักการพื้นที่ว<าง ของรูปร<างวัตถุไปชี้นำให,เห็นภาพที่ถูกสร,างโดยที่ว<างของพื้นหลัง ซึ่งเราจะมองเห็น ได,ทีละภาพ แล,วแต<ว<าช<วงเวลาขณะนั้นเรากำลังมองที่ตัวรูปร<าง หรือมองทีพ่ ื้นหลัง

ในภาพด2านบนสายตามนุษยCมีความสามารถในการตีความรูปแบบของภาพที่ คลุมเครือได2มากกว7าหนึ่งครั้ง ซึ่งตาเราจะพยายามแก2ไขความไม7ชัดเจนนั้น โดยจะ เติมเต็มช7องว7างและสร2างรูปร7างขึ้นมาได2เอง เช7น ในภาพซ2ายจะเห็นวงกลมที่ไม7มีอยู7 จริง และภาพขวาแจกันรูบิน [10] ที่อาจเป@นแจกันหรือคนสองคนหันหน,าเข,าหากันก็ได,

55

กรณี ศ ึ ก ษาการออกแบบ โลโก4 Spartan Golf Club โดยใช4 กฎของรูปร6างและพื้นหลัง ที่มีการ ตีความแนวคิดของการออกแบบให4 เล6 น กลกั บ การมองภาพได4 อ ย6 า ง ยอดเยี่ยม ซึ่งแสดงภาพนักกอล@ฟตี วงสวิง ขณะเดียวกันก็แสดงให4เห็น ภาพใบหน4 า ของชาวสปาตั น ใส6 หมวกกันน็อก ในภาพเดียวกัน Designed by Richard Fonteeau

กรณี ศ ึ ก ษาโลโก4 “Snooty Peacock” ซึ ่ ง เป7 น ร4 า นขายเครื ่ อ ง ประดั บ ของผู 4 หญิ ง จากประเทศ อินเดีย ที่ออกแบบโดยใช4กฏของ รูปร6างและพื้นหลัง ด4วยการสร4าง ภาพหญิงสาวใส6เครื่องประดับ โดย อีกมุมมองหนึ่งแสดงเป7นภาพนกยูง ที่แพนหางแผ6ออกมา อีกนัยหนึ่งก็ เป7นผมของหญิงสาวซึ่งถูกใช4เป7น สัญลักษณ@ร6วมกัน Designed by Ryan Russell

56

กรณีศึกษาภาพถ6ายโดยใช4 กฎของรูปร6างและพื้นหลัง เป7นภาพ นักบินอวกาศที่ ถูก รวบรวมไว4ใน บล็อ กรวบรวมปรากฎการณ@ ทาง ภาพของ เจมส@ ดีน [11] ซึ่งสิง่ แรก ทีส่ ายตารับรู4กลับเป7นภาพกะโหลก ศีรษะ ในขณะที่ความจริงคือภาพ นักบินอวกาศสองคนที่ยืนอยูต6 ิดกัน โดยมีโลกอยู6ข4างหลัง

https://www.moillusions.com

กรณี ศ ึ ก ษาการออกแบบ ภาพถ6ายอีกภาพหนึ่งที่ใช4กฎของ รู ป ภาพและพื ้ น หลั ง ในแคมเปญ โฆษณาของ World for all ซึ่งได4 ออกแบบโดยใช4 พ ื ้ น ที่ ว 6 า งในการ สื ่ อ สารอธิ บ ายประเด็ น การเลี ้ ย ง สัตว@ ในแนวความคิดว6า ระหว6าง ที่ ว 6 า งของคนสองคนนั ้ น ยั ง พอมี ที ่ ว 6 า งสำหรั บ การรั บ แมวไปเลี ้ ย ง เสมอ Photography by Amol Jadhav

57

กฎของรูปร6างและพื้นหลัง ถูกนำมาใช4สื่อสารในงานโฆษณา มากมาย โดยเฉพาะงานหลาย ๆ ชิ้นของน้ำดื่มโคคาโคล6า ที่มักเล6น กับรูปร6างของขวด ตัวอย6างชิ้นนี้ จากเอเจนซี่โฆษณา McCann ของ ประเทศสโลวาเกีย นำเสนอแนวคิด เรื่อง “โค4ก กับ อาหาร” โดยการ แสดงภาพช4อนส4อมวางคู6กันให4เกิด เป7นรูปทรงของขวดโค4ก Creative by Boris Prexta

กรณี ศ ึ ก ษาการออกแบบ งานภาพของโปสเตอร@ภาพยนตร@ เรื่อง “Peter and The Wolf” ได4 แสดงให4เห็นถึงศักยภาพในการใช4 รูปภาพและพื้นหลัง ที่ยอดเยี่ยม ในแง6หนึ่งสายตาจะมองเห็นภาพ ของหมาปàา แต6เมื่อเปลี่ยนมุมมอง ไปดูพื้นหลังในภาพ จะเห็นภาพเงา รูปร6างของเด็กผู4ชายเกิดขึ้นทันที ซึ่ง สามารถสั น นิ ษ ฐานได4 ว 6 า นั ่ น เป7 น ภาพของปyเตอร@นั่นเอง Illustration by Phoebe Morris

58

สมมาตร (Symmetry) หรือสมดุลแบบ สมมาตร เป@นแนวคิดที่มีบทบาทมากในการ จัดองคOประกอบศิลปò เป@นวิธีการสร,างสรรคO ผลงานให,เกิดความสมดุล ทั้งในการถ<ายภาพ งานออกแบบ หรือในผลงานของศิลปะแขนง ต<าง ๆ ซึ่งมีกฎเกณฑOคือ น้ำหนักที่เท<ากัน ขององคOประกอบทีไ่ ม<เอนเอียงไปข,างใดข,าง หนึ่ง โดยจะต,องคำนึง ถึงจุดศูนยOถ<วง ถ,า มองดูแล,วรู,สึกว<าบางส<วนหนักไป แน<นไป หรือเบาบางไปก็จะทำให,ภาพนั้นดูเอนเอียง และเกิดความรู,สึกไม<สมดุล เมื่อมีความสมดุลแบบสมมาตรแล,ว ก็ ต , อ งมี ค วามไม< ส มมาตร (Asymmetry) หรือสมดุลแบบอสมมาต นั่นหมายถึง การ มีสัดส<วนที่ไม<เท<ากันในภาพ จะเป@นลักษณะ การรับรู,ที่เรียกว<า "สมดุลโดยความรู5สึก" กล<าวคือองคOประกอบซ,าย ขวา บน ล<าง ไม< จำเป@นว<าจะต,องเท<ากัน เพียงแต<เมื่อมองดู แล,วกลับให,ความรู,สึกว<าเกิดมีความสมดุล ภายในภาพ

Symmetry

Asymmetry

59

สมดุลแบบสมมาตร ใน การออกแบบโลโก4 มีบทบาทในการ ทำให4องค@ประกอบต6าง ๆ สมดุลกัน เพื่อสร4างภาพที่กลมกลืนกัน และดู เป7 น ระเบี ย บเรี ย บร4 อ ย แสดงถึ ง ความมั่น คงบางอย6างที่ทำให4รู4สึก สบายใจ ตัว อย6 า งโลโก4 ค ลาสสิก ของความสมมาตร ได4 แ ก6 โลโก4 Starbucks ที่ซ4ายขวาสมดุลเท6ากัน Designed by Starbucks in-house design team and Lippincott.

สมดุ ล แบบอสมมาตร กล6าวคือ ภาพหรืองานออกแบบชิน้ นั ้น ไม6จ ำเป7 น ที่ จ ะต4 องมีซ 4า ยขวา เท6ากัน ตัวอย6างโลโก4ยูทูป ที่เป7น กรอบสีแดงล4อมรอบคำว6า "Tube" ด4านขวา ซึ่งหากดูน้ำหนักแล4วจะมี องค@ประกอบที่ดูหนักกว6าด4านซ4าย ที่เป7นคำว6า “You” การออกแบบ แก4ปåญหาด4วยทำตัวอักษรสีดำเพื่อ ถ6วงความสมดุลทางความรู4สึก

Designed by YouTube’s art departmen

60

กรณีศึกษาองค@ประกอบที่ สมมาตรจากแคมเปญ Nat Geo Wild จากประเทศเอสโตเนีย แสดง ภาพสัตว@สองตัว บนและล6างของ ภาพ เพื ่ อ สร4 า งสมดุ ล ที ่ ส มมาตร จากจุดศูนย@กลางของภาพ Creative by Oussama Founi

กรณี ศ ึ ก ษาการใช4 ส มดุ ล แบบสมมาตรในการออกแบบ กราฟt ก ในภาพนี ้ จะสามารถเห็ น ตัวอย6างการจัดองค@ประกอบของ การออกแบบบนพื้นที่ว6าง เพื่อให4 องค@ประกอบทั้งหมดพื้นที่บวกและ ลบชดเชยซึ่งกันและกัน http://www.inspirationde.com

61

กรณีศึกษาตัวอย6างที่ดีของ การใช4พื้นที่เชิงลบ (พื้นหลังสีดำ) และตัวอักษรมาช6วยถ6วงความสมดุล กับขวดไวน@ ที่เป7นพื้นที่เชิงบวกใน ลักษณะแบบอสมมารต ที่ทำให4เกิด การรับรู4ที่เรียกว6า สมดุลโดยความ รู4สึก จากแคมเปญเทศกาลอาหาร และไวน@ Creative by Kaushik Badarinarayan

กรณีศึกษาในปกนิตยสาร The Albion BMX magazine มี ความสมดุ ล อสมมาตร จะเห็ น ว6 า บริเวณส6วนบนมีองค@ประกอบหลัก ขนาดใหญ6 ซึ่งได4รับการการชดเชย ด4วยองค@ประกอบที่เล็กกว6าหลาย ชิ้นที่ส6วนล6าง Cover designs by Max Joseph

62

หั ว ใจสำคั ญ ของกฎแห< ง ทางร<ว ม (Common Fate law) คื อ การจัดกลุ<มร<วมกัน เคลื่อนไหว และทิศทางเดียวกัน เป@นหลักการใน การสื่อสารด,วยภาพ โดยการเรียงลำดับของภาพตามความสำคัญของ องคOประกอบนั้น ๆ ให,สอดคล,องกับทิศทางในการอ<านของมนุษยOใน แต<ละสังคม ซึ่งส<วนใหญ<เราจะอ<านจากการจัดวางซ,ายไปขวา บนไปล<าง จากการจัดวางองคOประกอบนั้น จะทำให,เกิดความต<อเนื่องของภาพ ช<วยให,การถ<ายทอดเป@นไปตามลำดับ เช<นเมื่อเห็นเส,นที่ไปทางเดียวกัน สมองก็จะคิดต<อไปว<าจะไปทิศทางในแนวเดียวกัน ถึงเเม,วา< ท,ายสุดแล,ว สองเส,นนั้นจะแยกออกไปก็ตาม ทฤษฎีนี้ ก็คือการใช,เส,นนำสายตา นั่นเอง

Common Fate

63

กรณีศึกษาการออกแบบที่ จัดกลุIมที่เคลื่อนที่ไปด2วยกันหรือ เคลื ่ อ นที ่ ไ ปทิ ศ ทาง ตามรู ป แบบ ของกฎแหI ง ทิ ศ ทางรI ว มกั น ของ โลโก2 “One Construction” ที่ได2 ออกแบบเลข 1 ขยายจากเล็กไป ใหญI ม องเป6 น ทิ ศ ทางในลั ก ษณะ แบบเส2นนำสายตา (perspective)

กรณีศึกษารูปแบบของกฎ แหI ง ทางรI ว ม ของโลโก2 “Coca cola” ที่ออกแบบอักษร C โดยบิด เป6นหางปลาให2เราติดตามจาก C ใน Coca ไปยังตัว C ตัวตIอไปของ Cola พร2อมเส2นคลื่นสีขาวขีดพาด ไว2ด2านลIางของโลโก2 เกิดการชี้นำ สายตาไปทิศทางเดียวกัน

Designed by Nido

Designed by Frank M Robinson

64

กรณีศึกษาการออกแบบกราฟtก ดีไซน@ ที่รวบรวมงานภาพไว4ในเว็บไซต@ ของ Swissritual ในตัวอย6างการใช4กฎ ของทิศทางร6วมกันเป7นโปสเตอร@ที่ใช4 เส4นนำสายตาสองสีจัดกลุ6มให4ไปคนละ ทิ ศ ทาง การวางลงในงานจะช6 ว ย ควบคุมสายตาของผู4ชมได4เป7นอย6างดี เพียงแค6ใช4เส4นตรงชี้ไปยังจุดที่อยากจะ โฟกัสที่เหลือก็ปล6อยให4เป7นหน4าที่ของ เส4นเหล6านั้นให4จัดการกับผู4ชมเองว6าจะ มองไปทางไหน Designed by Might Oaks

กรณีศ ึกษาโปสเตอร@โฆษณา รองเท4าฟุตบอลไนกี้ ที่ออกแบบภาพ โดยใช4นักฟุตบอลสองทีมวิ่งเข4ามาแย6ง ฟุต บอลกลางสนาม โดยทิศทางการ วางนักฟุตบอลพุ6งไปในทางเดียวกัน ทำให4เกิดเป7นรูปโลโก4ไนกี้ขึ้นมา http://www.designals.com.ar/

65

กรณีศึกษาโปสเตอร@ภาพยนตร@ เรื่อง “Ocean 12” เห็นได4ชัดเจนใน การจัดองค@ประกอบตำแหน6งการเดิน เอียงไปในทิศทางเดียวกันกับตัวอักษร ทำให4เกิดการเคลื่อนไหวมาก และทำ ให4ดวงตาต4องขยับไปมองรอบ ๆ ภาพ มากขึ้น Designed by Neville Brody

กรณีศึกษากฎของทิศทางร6วม ในการถ6ายภาพ ด4วยการใช4สิ่งที่มีอยู6 ในธรรมชาติ เพื่อใช4มาสร4างเป7นเส4น นำสายตา (Leading Line) ให4 ไปพุ6ง ในทิศทางแนวเดียวกันเข4าสู6จุดสำคัญ ของภาพถ6าย ซึ่งทำให4เกิดองค@ประกอบ ของภาพถ6ายที่ยอดเยี่ยม Designed by Steve McCurry

66

กฎข,อสุดท,ายของทฤษฎีเกสตัลทOเป@นเทคนิคการออกแบบที่ต,องใช, ความระมัดระวังและกำหนดเปúาหมายที่เราต,องการจะส<งสารให,ชัดเจน ซึ ่ งในหลั กการของกฎการปกปí ด (Closure) ต, องพึ ่ งพาศั กยภาพทาง ความคิดและประสบการณOของผู,ชมอย<างมาก หัวใจหลักคือ ภาพที่เรา สื่อสารกับผู,ชมนั้น จะมีการลบบางส<วนออกไป และเหลือเพียงข,อมูล หรือเงื่อนงำ “ซ<อน” ให,ผู,ชมภาพได,เกิดจินตนาการขึ้นโดยอาศัยจาก ประสบการณOหรือการจำได,หมายรู,ของแต<ละคน เพื่อจะเดาว<าวัตถุที่เห็น นั้นคืออะไร ยกตัวอย<างการทำงานของทฤษฎีนี้ เช<น พยายามเติมเต็มช<องว<าง ในภาพ โดยอิงจากประสบการณOที่ผ<านมาของผู,ชม อธิบายตัวอย<าง ง<ายๆ อาทิ ถ,าพิมพOประโยค ฉันชอ_ ไ _ เที่ _ _ทะ_ _ ประโยคดังกล<าวคงจะพอเดาได,ว<าประโยคที่ถูกต,องคืออะไร แต< ถ,าสร,างการปกปíดมากไป เช<น ฉันชอ _ ไ _ เที่ _ _ _ _ _ _ ประโยคอย<างนี้เริ่มเดายากขึ้น แม,เราจะสามารถคิดได,ต<าง ๆ นานา แต<ถ,าข,อมูลที่เหลือนั้นไม<สามารถทำให,ผู,ชมภาพระลึกได, หรือเป@น สิ่งที่ไม<อยู<ในประสบการณOของผู,ชมแล,วก็ยากที่จะเติมเต็มสาร หรือภาพ นั้นก็ถือไม<ประสบความสำเร็จ

67

Koffka's A subjective contour

Heygt, Peterhans และ Baumgartner [12] (1984) ได, นำคำพู ดของ Koffka มาอธิบายกฎการปกปíด (Closure) ว<า "ทั้งหมดมากกว<าผลรวมของชิ้นส<วนต<าง ๆ" และ Heider [13] (1977) นำรูปอัตนัยมาแสดงว<ามีกระบวนอย<างไร เพื่อให,เห็นว<ารูปทรง ลวงตานำไปสู<การตอบสนองของสมองที่เด<นชัดเช<นเดียวกับรูปร<างจริง ตามการรับรู, ต<อรูปของทฤษฎีเกสตัลทO โดยมีคำถามว<า คุณเห็นอะไรเมื่อดูรูปด,านบน ถ,าคุณพูดว<า "แฮมเบอรOเกอรO" แสดงว<าคุณไป ทานอาหารกลางวันแล,วกลับมา ถ,าคุณพูดว<า “ดูคล,ายกับ Pac Man” แสดงว<าคุณใกล,เปúาหมายการรับรู,แบบ ลวงตา แต<ถ,าคุณดูแล,วบอกว<า “มีสามเหลี่ยม” ใช<แล,ว สามเหลี่ยมอยูต< รงไหนในภาพ นี่เป@นสิ่งที่ชี้ให,เห็นว<า “ทั้งหมดมีอยู< โดยขึ้นกับส<วนประกอบ” การเห็น สามเหลี่ยมโดยนัย ไม<ได,มีข,อยกเว,นที่เห็นตามช<องว<างด,วย

68

Designed by Landor Associates

กรณีศึกษาที่แสดงถึงการปกปtด (Closure) ในการออกแบบโลโก4 FedEx ซึ่งใน โลโก4แ สดงช6องว6า งเชิงลบที่ถ ูกใช4 ระหว6า ง "E" กับ "X" เกิด เป7 นภาพลูกศร ผลักดัน ข4อความให4เกิดความหมายที่ซ6อนเกี่ยวกับการส6งของ การพุ6งไปข4างหน4า

Designed by London Stylo Design

กรณีศึกษาภาพโลโก4ร4าน eight จะเห็นว6าการออกแบบซ6อนตัวเลข 8 อยู6ในทุก ตัวอักษรของคำว6า “Eight” แม4เลข 8 จะถูกแสดงแค6บางส6วน แต6ก็รับรู4ได4ว6าทุกตัวอักษร คือ เลข 8 (ที่ถูกตัดให4เว4าแหว6งไป) นั่นเพราะเรารู4ได4จากที่ว6างแวดล4อมที่เป7นตัวช6วยให4 เกิดความเข4าใจขึ้น แต6ถ4าหาก ตัว “i” แสดงเดี่ยว ๆ จะไม6สามารถรู4ว6าเป7นเลข 8 ได4เลย

69

กรณีศึกษาในงานออกแบบสื่อ โฆษณาเทศกาลอาหารและไวน@ ข อง McLaren Vale, 2012, Sea & Vines Food & Wine Festival ซึ่งเมื่อมอง ครั้งแรกจะเห็นเป7นแก4วไวน@ แต6เมื่อ มองจริง ๆ แล4วเป7นส4อม 2 อันที่วาง ไว4อยู6ด4วยกัน โฆษณานี้ใช4 “การปtด” อย6างมีกลยุทธ@เพื่อให4ผู4บริโภคสนใจ กับโฆษณาเป7นพิเศษซึ่งจะเพิ่มโอกาส ที่โฆษณาจะถูกเก็บไว4ในความจำระยะ ยาวได4 Creative by Showpony

กรณีศึกษาสิ่งพิมพ@โฆษณาของ Absolut Vodka ที่ใช4ความสำเร็จของ การออกแบบขวดเหล4ากลั่นด4วยการ ใช4ขวดยาเพื่อสร4างมาเป7น Brand ให4 โดดเด6นและทำให4แตกต6างจนเป7นที่ จดจำ ในภาพนี้จึงใช4รูปทรงของขวดที่ คนจำได4อยู6นั้น ซ6อนแสดงในรูปแบบ ของเสื้อผ6าหลัง เห็นที่ว6างของผิวหนัง หญิงสาว ให4คนได4ค4นหา Creative by Jan Wanger, Philipp Moré

70

การจัดกลุ1มการรับรู#ด#วยภาพ 1. แบบฝ°กหัดนี้สามารถทำโดยใช,โปรแกรมคอมพิวเตอรO หรือทำด,วยมือก็ได, หากทำด,วยมือแนะนำใช,เครื่องมือพื้นฐานอย<างกระดาษ ปากกา ดินสอ เพื่อวาดลงไปในการออกแบบ 2. เริ่มจากการค,นคว,าขอบเขตของภาพ และหลักการของเกสตัลทOต<าง ๆเพื่อ เตรียมนำมาออกแบบโดยใช,การผสมรูปร<าง รูปทรง หรือรูปภาพอย<างง<าย มาจัดองคOประกอบสร,างชุดภาพของ เส,น รูปร<าง ขนาด หรือสี เพื่อแสดง หลักการจัดกลุ<มทั้ง 6 แบบ 3. ทำตารางสี่เหลี่ยมจัตุรัสขนาด 6 เซนติเมตร จำนวน 6 ช<อง จากนั้นวาด รูปร<าง รูปทรง เส,น หรือภาพ ปรับเปลี่ยนตำแหน<งแต<ละช<องให,ตรงกับ กฎการรับรู, 6 แบบ ให,ความสนใจกับที่ว<างที่เกิดขึ้นจากการจัดวาง ตระหนักเสมอว<าที่ว<างเหล<านี้ ล,วนเป@นส<วนหนึ่งของการจัดองคOประกอบในการออกแบบ พยายามคิดถึงผลที่ เกิดขึ้นจากการจัดสมมาตร อสมาตร การเติมเต็มสร,างความหมายบางอย<างบน พื้นฐานงานที่สร,างขึ้นมา

71

ตัวอย1าง

Ellen Lupton และ Jennifer Cole Phillips [9]

72

73

74

Advertising Agency: Grabarz & Partner, Germany Creative Directors: Ralf Heuel, Patricia Pätzold, Ralf Nolting Art Director / Illustrator: Julia Elles Creative by Jackie Price

75

การออกแบบภาพเพื่อใช/ในการสื่อสารนั้น จะใช/ “ภาพ” เป9 นเครื ่ องมื อหลั กในการสื ่ อสาร เหมือนกับการใช/รูปแบบลีลาของ “ตัวอักษร” มา เป9น “ตัวแทน” ในการนำเสนอเนื้อหา ความคิด ความรู/สึกไปสูKผู/คน นักออกแบบที่นอกจากจะต/อง มี ค วามสามารถในการ “อK า นภาพ” แล/ ว ยั ง จำเป9 น ต/ อ งมี ค วามสามารถในการ “นำเสนอ ออกมาเป9นภาพ” ซึ่งเป9นทักษะสำคัญที่จะต/อง ถKายทอดข/อมูล เนื้อหา หรือความคิด ออกมาเป9น ภาพให/ผู/ชมได/รับรู/ เข/าใจ และเชื่อใจอีกด/วย

76

สำหรั บ อาชี พ ออกแบบไมK ว K า จะเป9 น งานโฆษณา งานศิ ล ปะ กราฟVกดีไซนW สถาปนิก หรืองานสร/างสรรคWใด ๆ ก็ตาม จุดเริ่มต/นจะมา จากคำ 2 คำ คือแนวคิด (Concept) และความคิด (Idea) อยKางหลีกเลี่ยง ไมKได/ สองคำนี้ใช/คล/ายๆ กัน แตKไมKเหมือนกัน แตKหลายคนก็ให/คำจำกัด ความเหมารวมไปเหมือนกันก็มี กKอนที่เราจะยกตัวอยKางการใช/งานคำสองคำนี้ ต/องทำความ เข/าใจถึงความหมายของคำวKา “แนวคิด” และ “ความคิด” ที่ถูกต/องกัน เสียกKอน ความคิด (Idea) คือสิ่งที่ปรากฏในสมอง คุณคิดจะสร/างบ/าน แตKงเพลง เก็บเงินใสKกระสอบไว/ในบ/าน หรือจะปลูกกัญชา ก็ถือวKาเป9น ความคิดทั้งหมด ตั วอยK าง เชK น เมื ่ อมี “ความคิ ด” ทั บศั พทW ว K า “ไอเดี ย” วK าจะ ออกแบบภาพเกี่ยวกับมนุษยWตKางดาว หากลองถามคนสิบคนเกี่ยวกับมนุษยW ตKางดาวคำตอบที่ได/ยKอมมีหลากหลาย เชKน ลักษณะรูปรKางหน/าตา ถิ่นที่อยูK ความสามารถ นิ ส ั ยใจคอ คำตอบที ่ หลากหลายเหลK านี ้ ค ื อความคิ ดที่ ประกอบกันเพื่อบKงชี้วKาเป9นมนุษยWตKางดาวกลายเป9นแนวคิด (Concept) ของมนุษยWตKางดาว นั่นคือสิ่งมีชีวิตจากตKางดาวที่มีลักษณะที่เป9นแกKนลึกลง ไปในแตKละประเด็น แนวคิด (Concept) จึงเป9นแกน (core) ของความคิด เปรียบ ได/กับแกKนต/นไม/ สKวนความคิดเปรียบได/กับกระพี้ หรือวงโดยรอบ

77

เมื่อได)แนวคิดในการออกแบบภาพแล)ว ต)องมากำหนดวิธีการปฏิบัติเป@น แนวทาง (theme) อารมณIและลีลา (mood and tone) ของงานในการนำเสนอ (execution) ให)เกิดความนUาสนใจนUาติดตามขึ้น เชUน ได)แนวคิดมนุษยIตUางดาวใจ ดี อาจมากำหนดแนวทางสร)างภาพยนตIแบบรUวมสมัย หรือล้ำยุคการคิดตUอแบบนี้ หมายถึงคิด “theme” แล)วมากำหนดอารมณIวUาเป@นลักษณะไหน เชUน สืบสวน ตUอสู) สยองขวัญ หรือ รักโรแมนติก นี่หมายถึง “mood and tone” ซึ่งเป@น ตัวกำหนดอารมณIของแนวทางนั้นให)ชัดเจนขึ้น

78

อยKางที่เคยพูดถึงใบบทกKอนหน/าวKา รูปภาพเป9นเครื่องมือสื่อสารที่ทรงพลัง แตKอยKางไรก็ตามหากนำเสนอภาพสำนวนเดิม ใช/ในแนวคิดแบบเดิม ๆ ก็ทำให/ภาพ ขาดความนKาสนใจได/ การจะสร/างแนวคิดสื่อสารให/มีประสิทธิภาพ ต/องใช/สำนวนเชิงภาพมาชKวย ในการออกแบบอยKางสร/างสรรคW ในทางออกแบบ หรืองานโฆษณาความคิดสร/างสรรคW คือ การสื่อสารด/วยวิธีที่ใหมK เทKากับแปลกผสมกับสื่อสารได/จริง กระบวนการเหลKานี้จะ ฝlกทำได/อยKางไร เริ่มตั้งแตKการการฝlกหาแนวคิด ซึ่ง Kate Evans [14] ได/อธิบาย เคล็ดลับในกระบวนการสร/างแนวคิดไว/เป9นขั้นตอนที่นKาสนใจ ดังนี้ ขั้นแรก เขียนข/อความของความคิดหลักในการเสนอเรื่องของคุณออกมาสัก 1 ประโยค เชKน "วิธีพัฒนาสติปwญญาของคุณ" ขั้นที่ 2 ให/เขียน คำสำคัญ (key word) หรือ วลีอื่น ๆ ที่เกี่ยวข/องกับแนวคิด หรือเป9นคำพ/องความหมายของคำเหลKานี้ เชKน • สำหรับคำสำคัญ (key word) คำวKา "พัฒนา" คำพ/องความหมาย คือ "ปรับปรุง" "เพิ่ม" หรือ "เติบโต" • สำหรับคำสำคัญ (key word) ของคำวKา “สติปwญญา” คำพ/อง ความหมาย คือ “สมอง” “พลังความรู/” หรือ “ความเฉียบแหลม” ขั้นที่ 3 สร/างภาพสื่อสารหลัก (key visual) โดยวาดภาพที่แสดงแนวคิด เหลKานี้ สำหรับคำวKา "พัฒนา" หรือ "เติบโต" อาจจะวาดรูปกองอิฐหรือต/นไม/ ที่เติบโตจากพื้นดินได/ สำหรับคำวKา "พลังความรู/" อาจวาดรูปหนังสือ สมอง ปากกา หรือแวKนตาที่แทนความฉาด

79

การหาคำสำคัญ (key word) และภาพสื่อสารหลัก (key visual)

ขั้นที่ 4 ขั้นนี้คือการผสมภาพวาดในวิธีที่เป9นไปได/ทั้งหมดที่คิด ออกมา วิธีนี้อาจสKงผลให/เกิดความคิดนอกกรอบสองสามอยKาง ในครั้งแรก แตKลองให/เวลากับการคิด ลองผสมภาพหลาย ๆ แบบ และในที่สุดก็จะสะดุดใจกับภาพที่มีแนวคิดที่จะให/ผู/ชม เห็นวKา “คิดได/ยังไงเนี่ย !” เวลาที่พวกเขาชมภาพและเข/าใจ อยKางที่เราตั้งใจสื่อสารไว/

80

ทดลองรวมภาพในทุกวิธีคิด สังเกตวgาภาพเขiากันไดiอยgางไร

ขั้นสุดท2าย ลองหาภาพเชื่อมโยง หรือใช/อุปมาอุปไมยกับภาพ ด/วยการสื่อสารเรื่องราวกำหนดแนว (theme) อารมณWและลีลา (mood and tone) ของภาพ จะทำให/แนวคิดนKาสนใจยิ่งขึ้น

ลองใช'อุปมาเล-าเรื่องในภาพ ว-า “สร'างพลังสมองของคุณ” หรือ “ดู แ ล หล- อ เลี ้ ย ง และให' อ าหารที่ เหมาะสมจะช-วยให'สติปHญญาของ คุณให'เติบโต” ลองสร'างภาพเหล-านี้ โดยการเลื อ กใช' ช นิ ด ของภาพมา สื ่ อ สารให' เ หมาะสมกั บ อารมณM ที่ ต'องการสื่อสารต-อไป

81

การนำเสนอแนวคิดออกมาเป9นภาพให/เข/าถึงผู/คนจึงเป9นศิลปะในการสื่อสาร เรื ่ องราวคล/ ายถ/ อยคำในเชิ งภาษาที ่ เรี ยกวK า “วาทศิ ลปÉ ” หรื อการใช/ “โวหาร” (Rhetoric or Figure of speech) ในการเลKาเรื่องด/วยภาพ ซึ่งมีวิธีที่หลากหลาย เพื่อ ใช/ในการเชื่อมโยงแนวคิดไปสูKการสร/างภาพให/เกิดความนKาสนใจและสื่อความหมายได/ จากการมอง เพื่อชKวยให/นักออกแบบสามารถใสKความคิดสร/างสรรคWลงในภาพเพื่อการสื่อสาร ได/อยKางหลากหลาย Tim Collins [15] ได/รวบรวม “โวหาร” การสื่อสารด/วยภาพที่มี ประโยชนWในการสร/างสรรคWโฆษณาไว/ในหนังสือ 100 Ways to Create a Great Ad. เป9นตัวอยKางโวหารที่สามารถแสดงให/เห็นถึงความเชื่อมโยงไปสูKการสื่อสารเชิงภาพได/ อยKางชัดเจน โดยขอยกตัวอยKางการใช/โวหารที่เข/างKายๆ 20 วิธี คือ 1. Visual Simile (ภาพอุปมา) 2. Visual Metaphor (ภาพอุปลักษณB) 3. Visual Puns (พFองภาพ) 4. Visual Stories (นิทานภาพ) 5. Visual Hyperbole (ภาพอติพจนB) 6. Synecdoche (สัมพจนัย) 7. Dramatizing the Negative (แสดงเชิงลบ) 8. Surrealism (ภาพเหนือจริง) 9. Visual Comparison (เปรียบเทียบ) 10. Double Meanings (สองนัย)

11. Parody (ลFอเลียน) 12. Reveal (เปkดเผย) 13. Paradox (ปฏิพจนB) 14. Typography (รูปตัวอักษร) 15. Contrast (ความตัดกัน) 16. Mash-Ups (การผสมผสาน) 17. Minimalism (นFอยแตuมาก) 18. Symbols (ภาพสัญลักษณB) 19. Borrowed Interest (หยิบยืม) 20. Visual Effects (เทคนิคพิเศษทางภาพ)

82

อุปมา (Simile) เป9นการใช/ภาพคล/ายกันเพื่อการเปรียบเทียบสิ่งหนึ่ง เหมือนกับอีกสิ่งหนึ่ง ที่โดยธรรมชาติแล/วมีสภาพที่แตกตKางกันแตKมี ลักษณะเดKน รKวมกันจะใช/คำเชื่อมที่มีความหมายวKา “เหมือนดั่ง” “คล/าย” “ดุจ” “เพียง” “ประหนึ่ง” “ปานประหนึ่ง” “ราวกับ” อยูKระหวKางคำหลักและคำเปรียบเทียบ วัตถุประสงคWของการใช/ภาพเปรียบเทียบ เพื่อเน/นให/เห็นจริงวKาเหมือนอยKางไร ใน ลักษณะใด เชKน เธอวKายน้ำเกKงเหมือนปลา ดำเหมือนถKาน เป9นต/น

คำวgา “เหม็น” + คำวgา “คาวปลา”

การอุ ป มาที ่ ส รF า งขึ้ น ในกรณี ศ ึ ก ษางานโฆษณา ลู ก อมดั บ กลิ ่ น ปากคลอเร็ ท เปÖนความสัมพันธBระหวuางคำ สองคำมาผสมกันคือ “เหม็น” ผสมกั บ “คาวปลา” สรF า ง ความหมายเชิงอุปมาสื่อสาร แนวความคิดวuา “อยuาปลuอย ปากเหม็นเหมือนดั่งคาวปลา” Creative by Juan Santiago, Manuel Torres

83

แนวคิ ด โฆษณาของ รถ Mitsubishi รุuน Pajero นี้ ใชFโวหารแบบอุปมาใหFเห็นวuา “รถคันนี้มีความแข็งแกรuงดุจ แรด” ซึ่งภาพแรดที่อยูuใตFตัว รถชuวยสนับสนุนแนวคิดไดFดี เพราะแรดมีรูปลักษณBเปÖนที่ รูFจักในดFานความแข็งแกรuง

คำวgา “แข็งแรง” + คำวgา “แรด”

Creative by Humberto Fernandez

คำวgา “เสียงดัง” + คำวgา “โทรโขgง”

โฆษณาสำหรั บ หู ฟê ง ตัดเสียงรบกวนของ Sony ที่ พยายามสื ่ อ ถึ ง ขF อ ความที่ ตFองการบอกประโยชนBของหู ฟêงอยuางชัดเจนเพียงพอที่จะ ใหFผูFบริโภคใหFความสนใจ ไดF อยu า งชั ด เจน ในแนวคิ ด วu า “อยูuอยuางสงบดFวยหูฟêงเพื่อ ปëองกันเสียงรบกวนราวกับ โทรโขuงจากเด็กขFางหลังที่นuา รำคาญ”

Creative by Bagby and Company

84

อุปลักษณI (Metaphor) คือการเปรียบเทียบให)นึกถึงอีกเรื่องหนึ่ง ซึ่ง สันติ ลอรัชวี [16] อธิบายวUาอุปลักษณIเป9นการกลUาวสิ่งหนึ่งให)เป@นอีกสิ่งหนึ่ง โดยใช)คำแสดงเปรียบเทียบวUา “เป@น” หรือ “คือ” เชื่อมอยูUระหวUางคำหลักและ คำเปรียบเทียบ ความหมายจะลึกซึ้งกวUา อุปมา (Simile) เพราะเป@นการใช)คำที่ มีความหมายอื่นมาแทนสิ่งที่ตนต)องการติดตUอด)วย เชUน ลูกคือแก)วตาดวงใจของ พUอแมU

คำวgา “โลก” + คำวgา “ละลาย” = โลกรiอน

ภาพอุปลักษณBที่สรFาง ขึ้นวัตถุสองชิ้นเขFาดFวยกันใน ลั ก ษณะที่ แ สดงความหมาย แสดงใหF เ ห็ น วu า โลกกำลั ง ละลายดFวยการผสมภาพของ “โลก”กั บ “โคนไอศกรี ม ” เพื ่ อ สื ่ อ เชื ่ อ มโยงในลั ก ษณะ เปÖนภาพที่นำไปสูuความหมาย เรื่องของสภาวะโลกรFอน Creative by Joe Antcliff

85

คำวgา “ถgายทอด” + คำวgา “ผูiชม” = ทันเหตุการณ~

Creative by Havas Bangkok

โฆษณาสำนักขuาวชuอง 11 ผสมภาพของ “การถuายทอด” ผสมกับ “ผูFชม” สื่อ แนวคิดการถuายทอดขuาวที่ทันเหตุการณBที่ใชFชuางกลFองจับผูFชมเปÖนกลFองทีวีที่ถuายทอด ภาพโดยตรง ข# อ สั ง เกตสำหรั บ การประยุ ก ต4 ใ ช# ใ นเชิ ง ภาพ กรณี Simile และ Metaphor จึงมีหัวใจสำคัญอยูRที่ “การเปรียบเทียบ” ระหวRาง “สิ่ง 2 สิ่ง” เชRนเดียวกัน แตRแตกตRางตรงกันตรงที่ Simile นั้นแสดงออกถึงการนำเสนอ ความคล#ายคลึงผRานสิ่งทั้ง 2 สิ่งออกมาอยRางเดRนชัด Metaphor จะแสดงเพียงสิ่งหนึ่งออกมา เพื่อทำให#นึกถึงเรื่องอีก เรื่องหนึ่งที่ไมRได#ปรากฏออกมาให#เห็น โดยใช#องค4ประกอบอื่น ๆ ในภาพมา ชRวยสร#างบริบทที่ชี้นำให#นึกถึง

86

พ2 อ งภาพ–พ2 อ งเสี ย ง (Pun) คื อ ใช/ ป ระโยชนW จ ากคำที ่ ม ี ค วามหมาย เหมือนกัน หรือจากคำพ/องเสียง เพื่อสร/างความตลก ขบขัน เป9นลักษณะการเลKน สำนวน หากแตKในการนำมาใช/ในงานภาพก็มีโอกาสในการใช/การพ/องภาพกับเสียง ได/เพิ่มเติม นอกเหนือจากแคKการพ/องคำหรือเสียง

คำวgา “On the Rock” พiองกับภาพ “ยืนบนกiอนหิน”

กรณีศึกษาโฆษณา 2 Gingers Irish Whisky มีการ การเลu น สำนวนดF ว ยภาพ อยuางมีประสิทธิภาพในการ ทำใหFผูFชมรูFสึกขบขันไดFอยuาง รวดเร็ ว โดยใชF แ นวคิ ด คำ หญิง 2 คน แทนตัวสินคFา 2 Gingers ยืนบนกFอนหิน มา พFองกับคำวuา“On the Rock” Creative by VSA Partners

87

กรณี ศ ึ ก ษาสำนวนของ การอวยพรปñใหมuวuา “Wish you have a good year” ที่ ถ ื อ เปÖ น ธรรมเนียมปฏิบัติเมื่อเขFาสูuปñใหมu ในภาพทำใหFผูFชมขำขันไดFจาก การพFองภาพระหวuางยางรถยนตB ซึ่งมีชื่อยี่หFอประทับบนลFอรถวuา “GOOD YEAR” มาพFองกับคำวuา “Good Year” ที ่ เ กิ ด จากการ อuานเรียงจากบนลงลuาง Facebook Good year North America

กรณีศึกษาการใชFสำนวน ดFวยภาพเพื่อที่จะดึงดูดสายตา ผูFชม ตัวอยuาง ขFอความโฆษณา สินคFานมปêôนของ Mc Donald's ที ่ มี ภ าพเตF า ของวั ว ในตำแหนu ง สัญลักษณBชู 2 นิ้ว ใชFเพื่อพFอง กับคำโฆษณานมปêôนของพวกเขา ใหFวuามีรสชาติเพิ่มขึ้นเปÖน 2 เทuา Graphic Designer- Antti Salminen

88

นิทานภาพ (Visual Stories) ก็คือ การใช/รูปภาพใน การเลKาเรื่องเป9นหลัก ซึ่งวิธีนี้จะทำให/คนดูเข/าใจได/งKายยิ่งกวKา อKานตัวหนังสือ แตKก็ไมKได/หมายความวKาจะใช/รูปภาพอะไรก็ได/ หากแตK เ ป9 น การใช/ใ ห/ม ีป ระสิท ธิภ าพสูง ในลัก ษณะเลK า เรื ่ อ ง เหมือนกับหนังสือนิทานภาพของเด็ก โดยเฉพาะมีตัวนำเรื่องที่ เน/นทKาทาง (action) อากัปกิริยาเป9นภาษาภาพให/เข/าใจงKาย โดย Mario Garcia [17] ผู/อยูKเบื้องหลังการรีแบรนดWนิตยสาร และหนั ง สื อ พิ ม พW ท ี ่ ม ี ช ื ่ อ เสี ย งหลายฉบั บ เชK น Washington Post, New York Times, Die Zeit ได/ อ ธิ บ ายถึ ง กระบวนการ ของ visual story วKาทำงานอยKางไร คือการให/ย/อนกลับไปดูวKา หนังสือนิทานเด็กเลKาเรื่องราวด/วยวิธีใด ตั ว อยK า งที ่ เ ขายกให/ เ ห็ น ภาพคื อ นิ ท านเรื ่ อ งหนู น / อ ย หมวกแดง ประโยค “หนูน/อยหมวกแดงเดินเข/าไปในปóา…..” ภาพในหนังสือจะเห็นเป9นภาพหนูน/อยกำลังเดินเข/าไป ในปóา

ประโยค “เจ/าหมาปóากำลังแอบดู…..” ภาพในหนั ง สื อ จะเห็ น หมาปó า แอบดู จ ากต/ น ไม/ ต/ น หนึ่ง ทั้งหมดเกิดขึ้นในรูปเดียว ทั้งภาพและเนื้อหา

89

กรณีศึกษาการเลuาเรื่อง ในภาพเปÖนเรื่องราวของเด็กหญิง คนหนึ่ง ที่มีเบื้องหลังวัยเด็กอัน แสนบอบช้ ำ ทางจิ ต ใจ โดยเลu า เรื่องถึงทุกประสบการณBในชีวิต ของเด็ก ๆ เปรียบเสมือนเมล็ด พันธุBที่หวuานลงในจิตใจของพวก เขาเหลuานั้น Illustrator by Oscar Paredes Jade Rivera

ตัวอยuางการเลuาเรื่องใน งานโฆษณาบริ ก ารทำความ สะอาดภายในรถของประเทศ บราซิล ซึ่งภาพเปÖนเรื่องราวของ การทะเลาะกันเมื่อเห็นคราบของ โยเกิรBตเปùûอนที่เบาะหลัง เปÖนการ แสดงสถานการณBกิริยาที่เห็นแลFว รับรูFไดFในทันทีถึงอารมณBของเรื่อง Creative Director by Paulo Lima

90

อติพจนP (Hyperbole) คือโวหารที่กลKาวออกมาเกินความจริง หรือคำที่ เปรียบเทียบเกินกวKาจะเป9นจริงได/ เพื่อสร/างและเน/นความรู/สึกและอารมณW ทำให/ ผู/ฟwงเกิดความรู/สึกวKาหนักแนKนจริงจัง และรับรู/ได/วKาจะเป9นอยKางนั้นจริง เชKน หิวไส/ จะขาด ขอให/มีอายุยืนถึงหมื่นปò จะรักกันชั่วฟôาดินสลาย จะตามเธอไปจนสุดหล/าฟôา เขียว เป9นต/น เราอาจใช/การ Hyperbole ในการทำงานเชิงภาพได/ตั้งแตKการใช/หลักการจัด องคWประกอบพื้นฐาน เชKน การขยายให/สัดสKวนเกินมาตรฐาน หรือจะจัดการภาพให/ เกิดความเหนือจริงจาก ประสบการณWของผู/ชม กรณีศึกษาโฆษณาจากกระดาษทิชชูuซับมันอาหาร SCOTT สรFางภาพเกินความ จริงออกมาเขFาถึงความรูFสึกของของมนุษยBที่กลัวความมัน สื่อความหมายออกมาวuาซับ ใหFหมด ทุกหยดความมัน ขนาดบิดรีดมันออกยังไมuมี ไมuอยากพัวพันความอFวน ที่กวuาจะไดFกินที ตFองขอเวลาซับมัน ใหFแหFงสนิท

Photo&Retouching by อนุชัย ศรีจรูญพูgทอง Remix Studio Bangkok

91

แคมเปญ วันงดสูบบุหรี่ โลก ของ Mccann Healthcare Worldwide ประเทศญี ่ ป ุ ü น ใน เสนอภาพเกิ น จริ ง แตu ผ ู F ช ม สามารถรับรูFไดFวuาจะเปÖนอยuางนั้น จริง ๆ จาก การสูบบุหรี่ ซึ่งภาพ เนF น ที ่ ผ ลกระทบภายนอกของ ผู F ห ญิ ง ถื อ บุ ห รี ่ ท ี ่ ม ี ใ บหนF า แยก ออกเปÖนสองสuวน ดFานหนึ่งสื่อถึง 'ความงาม' กuอนไมuสูบบุหรี่ และ อี ก ขF า งหนึ ่ ง สื ่ อ ถึ ง ผลกระทบที่ เกิดจากการสูบบุหรี่ Creative by Mccann Healthcare Worldwide Japan, Inc.

ตัวอยuางแคมเปญรณรงคB ของสมาคมโรคเบาหวานแหu ง ประเทศไทย ที่สรFางภาพเกินจริง โดยใชFภาพขนมรuวงใสuเทFาดูแลFว เหมือนแผลรFายแรง ใหFเห็นถึง ความนuากลัวของการกินหวานก หรือน้ำตาลในปริมาณมาก อาจ สu ง ผลใหF เ กิ ด โรคเบาหวาน ซึ่ ง เปÖนโรคที่เมื่อเกิดบาดแผลขึ้นมา จะรักษาไมuหาย เกิดการติดเชื้อ ของโรค ซึ ่ ง ภาพสื ่ อ ออกมาไดF อยuางนuาตกใจ Photo&Retouching by ณัฐคง แจiงเสม

92

สัมพจนัย (Synecdoche) เป9นโวหารลักษณะการกลKาวถึงการใช/สKวนยKอย ของสิ่งใดสิ่งหนึ่ง คือการเอาสKวนหนึ่ง (Part) มากลKาวแทนทั้งหมด (Whole) หรือ การเอาทั้งหมดมากลKาวแทนสKวนหนึ่ง โดยต/องการให/มีความหมายถึงสKวนเต็มหรือ ทั้งหมด เราสามารถใช/ Synecdoche ทำงานเชิงภาพเพื่อแทนคKา หรือเป9นการ เปรียบเทียบโดยนำลักษณะเดKนทั้งหมดแทนสKวยยKอยก็ได/ เชKน คำวKา หมาก รวมถึง พลู ปูน และมีสKวนผสมอื่น รวมอยูKด/วย ไมKใชKกินหมากเพียงอยKางเดียว หรือมือ กฎหมาย หมายถึง ผู/รักษากฎหมาย เป9นต/น

ในกรณีนี้ซอสมะเขือเทศ ไฮนซB (Heinz) ใชFชิ้นสuวนของผล มะเขือเทศที่ถูกหั่นเปÖนชิ้นจริง ๆ มาประกอบรูปรuางเพื่อบuงบอกวuา ซอสมีสuวนประกอบมะเขือเทศ แทF ๆ ทั้งขวด Creative by Robert Wohlgemuth

93

ตัวอยuางแคมเปญรณรงคB ครบรอบ 100 ปñ ของ CocaCola ที่ ห ยิ บ นำเอารู ป รu า งของ ขวดโคF ก มาเพี ย งบางสu ว นเพื่ อ มาสื่อสารแนวคิด ของโคFกไดเอท ผสมกั บอุ ปมาโวหารเหมื อ นเปÖ น ลักษณะภาพรูปรuางทรวดทรงของ ผูFหญิงไดFอยuางนuาสนใจ Creative by CMA Design

กรณี ศ ึ ก ษางานโฆษณา ของ FedEx เปÖนการใชFภาพการ สu ง ของถึ ง กั น ระหวu า งหนF า ตu า ง ขFางบนและลuาง เพื่อแทนคuางาน บริการของธุรกิจ รuวมกับกำแพงที่ ถูกระบายสuวนหนึ่งของแผนที่โลก ซึ ่ ง เกิ ด การทำงานเชิ ง ภาพแทน สuวนหนึ่งเกี่ยวกับพื้นที่ใหF บริการ ทั ้ ง หมดของการสu ง ไดF อ ยu า งตรง เปëาหมาย Creative by Rodrigo Almeida, Renata Florio, Sergio Valente

94

การแสดงเชิงลบ (Dramatizing the Negative) เป9นการใช/สำนวนเชิง ภาพด/านลบ เพื่อกำหนดสื่อสารในงานโฆษณาที่มุKงเน/นการจุดประกายความกลัว ให/กับผู/บริโภคเพื่อดึงดูดความสนใจของผู/ชม เชKน ทำให/ตกใจ ซึ่งการทำให/เห็นภาพ แล/วเกิดความรู/สึกตกใจนี้เป9นเทคนิคการโน/มน/าวใจที่ตรงไปตรงมาทำให/ข/อความถึง ผู/ชมชัดเจน ชKวยให/โฆษณานKาจดจำ เทคนิคการแสดงเชิงลบนี้สKวนมากจะใช/รKวมกับ สำนวนภาพเกินจริง (Hyperbole) เพื่อแสดงภาพผลเสียของการไมKใช/ผลิตภัณฑWของ ตนให/ชัดเจนขึ้น

Creative by Rino Rinanditio

กรณีศึกษาโฆษณา แอคเน ซีลลิ่ง เจล ไมuเพียงแตuนำเสนอภาพเชิงลบเมื่อไมuใชF ผลิตภัณฑB เมื่อเปÖนสิวทำใหFไมuกลFาเขFาสังคม และยังนำเสนอวิธีแกFปêญหาอยuางมี ความสุขดFวยขFอความ "ความอัปยศ ไมuมีอีกแลFว" ประกอบกับตัวรูปผลิตภัณฑB

95

กรณีศึกษาสเปรยBฆuาเชื้อ โรค Toilet Scat ผลิตภัณฑBเสปยB ทำความสะอาดแผu น รองนั ่ ง โถ สุขภัณฑB โดยใชFภาพเชิงลบที่มีผล ตu อ อารมณB ผ ู F ด ู ต u อ ประสบการณB การใชFหFองน้ำสาธารณะ ดFวยชื่อ บุคคลที่เคยมานั่งบนฝารองนั่งนี้ ประกอบขFอความวuา “คุณเปÖนกFน ที่เทuาไหรuแลFว ที่นั่งลงไปบนนั้น” สรiางสรรค~โดย สุทธิศักดิ์ สุจริตตานนท~

อีกตัวอยuางหนึ่งของการ ใชF ภ าพเชิ ง ลบกั บ ประสบการณB เหม็นกลิ่นถุงเทFา ดFวยการเสนอ ภาพที่ ม ี ค วามหมายลั ก ษณะวu า หากตFองการที่จะทำใหFใครบางคน เปÖนลมหรือสลบ แคuถุงเทFาที่สuง กลิ่นก็ใชFไดFเลย แสดงใหFเห็นวuาถุง เทFามีกลิ่นเหม็นถึงตายไดFอยuางไร และเสนอวิ ธ ี แ กF ป ê ญ หาก็ ช ั ด เจน ดFวยการฉีดสเปรยBฉีดเทFาEphydrol Creative by Agency TBWA

96

ภาพเหนือจริง (Surrealism) หมายถึง การใช/ภาพในจิตนาการ เป9นภาพใน สถานการณWที่ไมKสามารถเกิดขึ้นจริงได/ ด/วยการออกแบบนำเสนอเรื่องราว (Theme) หรือวัตถุ (Object) ที่ไมKคาดวKาจะเป9นเชKนนั้น นำมาวางอยูKในบรรยากาศเพ/อฝwน เทKากับเป9นการสร/างสิ่งที่แตกตKางกันระหวKางความจริงกับความไมKจริง ทำให/สามารถ กระตุ/นจินตนาการได/อยKางฉับพลัน นำไปสูKการตีความที่เป9นจริงได/

Creative by Rino Rinanditio

สำนวนโฆษณาจากบริษัท Sundex ผูFผลิตชุดเลuนเซิรBฟ ในแนวความคิดวuา “คุณไมuเคยสัมผัสน้ำมากuอน" ดFวยการสรFางภาพหนุuมสาวเหมือนเตuาทะเลเกิดใหมu โฆษณานี้พยายามจะบอกวuา เมื่อคุณสวมชุดวuายน้ำ คุณจะรูFสึกถูกลิขิตใหFไปทะเลที่เปÖน จุดปลอดภัยในชีวิตของคุณทันทีลักษณะพฤติกรรมของเตuาทะเล

97

โฆษณาผลิตภัณฑBจัดแตuง ทรงผม Bench แบรนดBแฟชั่นใน ประเทศฟk ล ิ ป ปk น สB เพื ่ อ สื ่ อ สาร ภาพออกมาบอกใหF ท ุ ก คนรูF วu า ใครก็สามารถออกแบบจัดทรงผม ไมuวuาจะเปÖนทรงอะไรก็ทำไดFอยuาง งuายดายในแบบที่พวกเขาตFองการ Creative by Melvin Mangada, Marci Reyes

หนังสือพิมพBกีฬารายวัน La Gazzetta dello Sport ของ ประเทศอิ ต าลี นำเสนอชุ ด ภาพ ความทFาทายที่เปÖนไปไมuไดF ของ การแขuงขันบนคลื่นที่โหมกระหน่ำ สื่อถึงแชมเปñยนสBที่ยิ่งใหญuที่สุด แบบเหนือจริง เพื่อใหFผูFอuานมอง ภาพแลFวสามารถเปÖนผูFตัดสินวuา ใครนuาจะกลายเปÖนตำนาน Creative by Giovanni Settesoldi, Luissandro Del Gobbo

98

ภาพเปรียบเทียบ (Visual Comparison) คือการใช/ภาพมาเปรียบเทียบ คุณสมบัติอยKางใดอยKางหนึ่ง ทั้งทางตรงและทางอ/อม ซึ่งอาจเปรียบเทียบกับตัวเอง วKาสินค/าในปwจจุบันได/มีการปรับปรุงให/มีคุณภาพที่ดีกวKาเดิม หรือมีลักษณะที่พิเศษ ไปกวKาเดิมอยKางไร แสดงให/เห็นวKารุKนใหมKดีกวKารุKนเกKา หรืออาจเปรียบเทียบความ แตกตKางของสินค/ากับคูKแขKงขัน แจกแจงถึงคุณสมบัติของตนที่เหนือกวKาสินค/าของ คูKแขKง หรือบริการของตนเองกับสินค/าอื่น ๆ ในประเภทสินค/าเดียวกัน โดยมีทั้งอ/าง ชื่อและไมKอ/างชื่อคูKแขKงขัน ซึ่งในประเทศไทยไมKสามารถโฆษณาเปรียบเทียบโดย อ/างชื่อคูKแขKงได/อยKางชัดเจน เนื่องจากอาจมีข/อพิพาทฟôองร/องกันภายหลัง

กรณี ต ั ว อยu า งการใชF ภาพเปรียบเทียบ โดยมีแนวคิด แสดงใหFเห็นวuารองเทFาวิ่งของ Mizuno รุuนใหมuนี้ดีกวuารุuนเกuา คือไมuวuาจะบนพื้นลักษณะไหน วิ ่ ง บนพื ้ น ในเมื อ งหรื อ วิ ่ ง บน พื ้ น ดิ น ธรรมชาติ ก็ ไ ดF ท ั ้ ง หมด ซึ่งเปÖนการแสดงออกดFวยภาพ ที่มีความรูFสึกเคลื่อนไหวไปบน พื้นที่ตuาง ๆ ไดFอยuางทรงพลัง Creative by Luiz Sanches

99

กรณี แ คมเปญโฆษณา ของถุ ง ยางอนามั ย ยี่ หF อ durex เปรี ย บเที ย บความแตกตu า งของ สินคFาตัวเองกับสินคFาตuางชนิดกัน โดยแจงถึ ง คุ ณ สมบั ต ิ ข องตนที่ บอกวuาราคาถูกกวuาเมื่อเทียบกับ อุปกรณBตuาง ๆ ในการเลี้ยงเด็ก Creative Director by Wadih Antón

กรณี ศึ ก ษาการใชF ภ าพ เปรี ย บเที ย บของโรงเรียนศิลปะ Panamericana ประเทศบราซิล สื่อสารแนวคิดวuา ดินสอในมือคุณ แทuงเดียวกันนี้สามารถเลือกไดFวuา จะใชFเขียนภาพที่ไมuสวยหรือสรFาง งานศิลปะ Illustrators by André Nassar, Janara Lopes

100

สองนัย (Double Meanings) หมายถึง การสร/างภาพหรือใช/ข/อความที่ สื่อสารได/ 2 ความหมาย เป9นการตั้งใจที่จะแสดงภาพบางอยKาง แตKในความเป9น จริงแล/วมีความหมายอื่นอยูKเบื้องหลัง ซึ่งเป9นวิธีการนำเสนอโดยการเลือกใช/ภาพที่ มีลักษณะมองเห็นได/เป9น 2 ภาพ 2 มุมมอง หรือ 2 ความหมาย 2 เรื่องราว ซึ่ง ภาพเหลKานี้มักจะมีลักษณะเป9นภาพลวงตา (Optical Illusion) และเป9นลักษณะ เดียวกับการเลKนคำ (Word Play) ที่แปลได/ 2 ความหมายเชKนกัน และการใช/ โวหารวิธีนี้ชKวยดึงดูดความสนใจ มีแนวโน/มที่จะถูกมองเห็นมากกวKาการใช/ภาพ โฆษณาปกติ ในชuวงปñ 1950 ที่โลก กำลั งนิ ยมกระแส "ใหญu กวu า ดี กวu า" แตu Volkswagen รุu น Beetle สวนกระแสดF วยการ โฆษณา โดยใชFแนวคิด“Think Small” ความหมาย 1 คือ ไม-ใช-ที่ใหญ-กว-าจะดีกว-า ความหมาย 2 คือ ไม-ต'องจ-ายเยอะ การเชื่อมตRอการรับรู# คือ Beetle + ฉลาด + มูลค-า Creative by Advertising Agency DDB

101

ศูนยBการคFา Galeries Rive Nord ประเทศแคนาดา สื ่ อ สาร งานโฆษณา ไมFแขวนเสื้อที่เหมาะ กับชุดชั้นในของผูFหญิง ดFวยภาพ สองนัย ความหมาย 1 คือกางเกง ในตัวจิ๋ว ความหมาย 2 คือไม'แขวน เสื้อกลับหัว การเชื่อมตRอการรับรู:# คือ รูปร-างผู'หญิง + กางกางใน + ไม' แขวนเสื ้ อ + ห' า ง Galeries Rive Nord Creative by Jonathan Rouxel

โปสเตอรBของรFานหนังสือ Crossword ในเมืองมุมไบ แคมเปญ สื่อสารเกี่ยวกับหนังสือเสียง ความหมาย 1 คือ ปากทา ลิปสติกแดง ความหมาย 2 คือ หนังสือ กางเปkดออกมา การเชื่อมตRอการรับรู# คือ ปาก + หนังสือ + หนังสือเสียง + ร'านหนังสือ Crossword

Creative by Advertising Agency Ogilvy & Mather, Mumbai

102

ล2อเลียน (Parody) คือการนำภาพที่คนรู/จักกันโดยทั่วไปเชKน ทางการเมือง หรือบุคคลสำคัญ ประวัติศาสตรW มาดัดแปลงล/อเลียนให/ขบขัน ด/วยการบิดเบือน (Distortion) และผิดเพี้ยนไปจากความจริง (Violation) เชKน การล/อเลียนภาพของ Mona Lisa ของ Da Vinci โดยทำให/ภาพของเธอดูอ/วนขึ้นมาก และในมือถือขวด ซอสสปาเกตตี้ เป9นต/น วิธีกาเชKนนี้จะทำให/ภาพนKาสนใจ เพราะการนำภาพแบบ ดั้งเดิมที่เป9นที่รู/จักกันดีมาดัดแปลงนั้น สKงผลกับผู/ที่คุ/นเคยกับภาพอยูKแล/ว แตKมา ดัดแปลง ซึ่งดึงดูดใจและมีผลตKอผู/ดูได/ดีกวKา

กรณีแคมเปญ "Art of Quarantine" ของกระทรวง วั ฒ นธรรมและความมั ่ น คง ขFอมูลของประเทศยูเครน ใชF การลFอเลียนภาพศิลปะคลาสสิก ดั ด แปลงรู ป เพื ่ อ สอนวิ ธ ี ห ยุ ด การแพรuกระจายของ COVID19 ในชu ว งที่ ห ลายคนยั ง คง เพิกเฉยตuอกฎพื้นฐานของการ เวFนระยะ หรือใสuหนFากาก Creative by Advertising Agency Looma

103

แคมเปญของ Traid ผูFคFา ปลีกเสื้อผFาวินเทจที่เปÖนมิตรกับ สิ่งแวดลFอม ใชF แ นวคิ ดลFอเลียน ปรั บ แตu ง ภาพรู ป ปê û น ใหF แ ตu ง ตั ว เหมือน hipsters โดยใชFวิธีสรFาง ภาพจากโดยการถuายภาพรูปปêûน จากพิ พ ิ ธ ภั ณ ฑB และมาคF น หา นางแบบมาใสuชุดของแบรนดB จัด ทuาทางใหFเขFากับรuางกาย จากนั้น จึงใชFเวทยBมนตรB Photoshop แตuง ภาพ Creative by Mark Roalfe

ภาพประกอบสำหรับการ ออกแบบเสื้อยืด Nike จากเมือง เบอรBลิน ประเทศเยอรมนี ไดFสรเง ภาพลF อ เลี ย นการเดิ น ขF า มถนน ของวงสี่เตuาทอง หรือ เดอะบีเทิลสB (The Beatles) อันเปÖนเอกลักษณB จากหนFาปกอัลบั้มที่ชื่อวuา Abbey Road อันโดuงดัง Creative by by Vidam Studio

104

12 Reveal (เปดเผย) การเปd ด เผย (Reavel) คื อ การทำให/ ป รากฏ ซึ ่ ง เป9 น สำนวนภาพในงาน โฆษณาที่ใช/กันมาอยKางเกKาแกKยาวนาน เป9นเทคนิคที่เรียกวKา “ซKอนและเปVดเผย” โดยจะออกแบบภาพให/ผู/ชมภาพถูกชักนำให/เชื่อวKาพวกเขากำลังเห็นสถานการณW เฉพาะอยKางใดอยKางหนึ่ง แตKความเป9นจริงแล/วหลังจากนั้นพวกเขากลับพบวKากำลังดู สถานการณWที่ตKางไปจากเดิมอยKางสิ้นเชิง เป9นเทคนิคการชี้นำภาพให/คนดูคKอยๆ เห็น ทีละสKวนนั่นเอง Creative by Creative by Jason Gorman

ตัวอยuางเทคนิคเปkดเผยในแคมเปญโฆษณาของศูนยBรถยนตB TriHonda สื่อสาร เกี่ยวกับความปลอดภัยในการขับขี่รถยนตB โดยใหFผูFชมมีสuวนรuวมกับมองไปยังขFอความ ซuอนและเปkดเผย ในตอนแรกผูFอuานอาจเห็นตัวอักษรที่เวFนตuอเนื่องกัน แตuการใชFสีที่ตัด กันนั้นทำใหFอuานคำวuา "EMAIL (อีเมล)" กuอน แลFวจึงตามดFวยคำวuา "GIRL (สาว)" ตาม ดFวยขFอความเตือนวuา "คุณไมuสามารถเห็นทั้งสองอยuาง ในเวลาเดียวกันไดF"

105

เทคนิคซuอนและเปkดเผยนี้ ยั งสามารถนำไปใชF เพื ่ อใหF เกิ ดผล ทางความรูFสึกที่รุนแรงมากขึ้น เชuน ตัวอยuางในสื่อรณรงคBโฆษณาของ องคBกรศุภนิมิต แคนาดา ที่เมื่อมอง ครั้งแรกกำลังเห็นสภาพแวดลFอมที่ งดงาม จากนั้นจึงพบวuาเรากำลังเห็น สภาพแวดลFอม ที่มีมืดมิดของเด็ก ๆ ที ่ ม ี โ ชคชะตาที ่ แ ตกตu า งกั น อยu า ง สิ้นเชิง Creative by Lyranda Martin Evans, Marketa Krivy

ในสื่อสิ่งพิมพBรณรงคBบริจาค อวัยวะของสมาคมปลูกถuายเม็กซิกัน เมื ่ อ เรามองภาพครั ้ ง แรกจะรั บ รูF การใชFชีวิตสองแบบของผูFชายคนนี้ คือทั้งวิชาการ และเลuนสนุก แตuตFอง ประหลาดใจเมื่อเห็นโลโกFองคBกรกับ คำลงทายวuา “ลงทะเบียน เพื่อเปÖนผูF บริจาคอวัยวะทันทีไดFที่...” จึงทำใหF ผูFชมเขFาใจ ความหมายของ “ชีวิตที่ สอง” ไดFในทันที Creative by Ivan Pedraza, Jaime Brash

106

ปฏิ พ จนW หรื อ ความขั ด แย/ ง (Paradox) คื อ การใช/ ภ าพหรื อ ข/ อ ความที ่ มี ความหมายตรงข/ามหรือขัดแย/งกันมานำเสนอเปรียบเทียบเพื่อให/เกิดความหมายที่ชัด ขึ้น หรือเป9นการนำภาพที่ขัดแย/งกับความรู/สึกหรือความเป9นจริงมาวางไว/ใกล/กัน โดยมีจุดประสงคWเพื่อสื่อความหมายที่ต/องการให/นKาสนใจ ด/วยความรู/สึกฉงนและ อยากค/นหาคำตอบในภาพนั้น เชKน ภาพโฆษณา ทะเลสงบนิ่งสวยงาม แตKมีคำพาด หัวที่ขัดแย/งวKา “Bad day” แสดงถึงความขัดแย/งกันของภาพกับข/อความ แตKเป9น วันแยKจริง ๆ สำหรับนักโต/คลื่น (Surfer) ทั้งหลาย เป9นต/น กรณี ก ารใชF ภ าพขั ด แยF ง กั น ของอาหารสำเร็จรูป แบรนดB Arctic Gardens ที่นำเสนอภาพหนFาตาเด็ก ยิ้ม กับหนFากากหนFาตาเหยเก ซึ่งเปÖน ความขัดแยFงระหวuางชอบและเกลียด เพื่อขยายความแนวคิดของผลิตภัณฑB คือ “ลบความขมขื่น” ที่เด็ก ๆ หลาย คนเกลียดผัก แตu Arctic Gardens ที่ มีสuวนผสมของผักอยูuภายใน แตuทาน งuายและรสชาติดจี นเด็กชอบ Creative by Luc Du Sault

107

แคมเปญโปสเตอรB ข อง ผลิตภัณฑBกระดาษชำระแบรนดB Hakle สรFางภาพขัดแยFงระหวuาง การตกแตu ง ภายในหF อ งน้ ำ ที่ ดู หรู ห ราและสภาพแวดลF อ มดF า น นอกที่ดูสกปรก เพื่อพิสูจนBใหFเห็น ภาพที ่ ช ั ด เจนของสโลแกนที ่ วu า "กระดาษทำใหFหFองน้ำสะอาด" Illustrator by Salamagica

โฆษณาของบริ ษ ั ท เวกF า (Veka) ซึ่งเปÖนผูFผลิตหนFาตuางพีวีซี ไดF ใชF ภาพภายนอกหนF าตu างบาน ใหญuที่กลับดFานสรFางความขัดแยFง กัน ภายนอกหนFาตuางนั้นเปÖนภาพ ระหวu างภาพเมื องใหญu ด F านลu าง และภาพภูเขาดFานบน เพื่อใหFเกิด ความหมายสนั บสนุ นแนวคิ ดวu า “ตอนนี ้ ค ุ ณ สามารถมี ห นF า ตu า ง เดียวกับที่ใชFอีกดFานหนึ่งของโลก ไดF” Illustrator by Salamagica

108

รูปตัวอักษร (Typography) คือการออกแบบหรือใช/ตัวอักษรเป9นรูปภาพ ประเภทหนึ่งที่มักใช/ตัวพิมพW (font) ในการสื่อสาร การออกแบบตัวอักษรสามารถทำ หน/าที่เหมือนรูปภาพเพื่อเปลี่ยน "มุมมองและความรู/สึก (look and feel) ซึ่งบKอยครั้ง สร/างผลกระทบกับผู/ชมกKอนที่พวกเขาจะตัดสินใจลงมืออKานเนื้อหาจริง ๆ เสียอีก ดังนั้นตัวอักษรที่ออกแบบนั้นเทียบกับภาพแทนการสื่อสารได/ด/วยตัวของมันเอง

Creative by El Zoghlami Ahmed

ตัวอยuางเชuนในโฆษณาของ LG นี้ นำฝุüนมาออกแบบสรFางเปÖนรูปตัวอักษรแทนคำ เกี่ยวกับการโตFเถียงกันระหวuางคูuรัก แลFวใชFหุuนยนตBทำความสะอาดเดินดูดฝุüนนั้นออกป สื่อสารแนวคิดวuาหุuนยนตBสามารถขจัดการโตFเถียงเกี่ยวกับงานบFานของคูuรักไดFดFวย

109

สิ่งพิมพBโฆษณาชิ้นนี้ใชFการ ออกแบบตัวอักษรอยuางชาญฉลาด เมื่อมองครั้งแรกดูเห็นรองเทFาสFน สูงธรรมดาๆ แตuเมื่อลองมองแบบ พิ จ ารณา ก็ จ ะทำใหF เ ห็ น รู ป รu า ง ของตั ว อั ก ษรโคF ง ไปตามรู ป ของ รองเทFาทำใหFเกิดคำวuา “Sale (ลด ราคา)” ไมuเพียงแตuแสดงใหFเห็นวuา มีการลดราคา แตuยังแสดงใหFเห็น อยuางชัดเจนถึงสิ่งที่กำลังลดราคา ดFวยเชuนกัน Creative by Agency Talent

โฆษณาสิ ่ ง พิ ม พB ข องงาน Worldpride ที่ใชFการออกแบบรูป ในลั กษณะตั วอั กษรแอมบิ แกรม (ambigram) หรื อ กลุ u ม คำที ่ ส รF า ง ขึ้นมาใหFสามารถอuานไดFอยuางนFอย สองทิศทาง โดยใชFคำวuา “pride (ความภาคภูมิใจ) ไวFตรงศูนยBกลาง ภาพ องคB ป ระกอบอั ก ษรยั ง คง ความหมายไวFเมื่อดูในมุมมองกลับ หัวกลับหางที่ตuางกัน ก็ยังสามารถ อuานไดFทั้ง 2 ทิศทาง Illustrators By Bryan Canning, Amber Thompson

110

ความตัดกัน (contrast) เป9นการออกแบบเพื่อเน/นให/เห็นความสำคัญของ จุดที่ต/องการสื่อสาร โดยให/เห็นความสำคัญของสKวนใดสKวนหนึ่งมากกวKาสKวนอื่น ๆ เพื่อแสดงจุดเดKนของภาพ สำหรับในงานออกแบบภาพนั้น การตัดกันของสKวนใดสKวน หนึ่งก็เพื่อเร/าความรู/สึก สร/างความสะดุดตา ซึ่งอาจทำได/โดยการตัดดันที่ขนาด รูปรKางตัดกัน ใช/สีตัดกัน หรือออกแบบทิศทางที่แตกตKางไปจากองคWประกอบอื่น ๆ ที่ อยูKโดยรอบเพื่อทำให/เกิดความโดดเดKนขึ้นมา

Creative by Leandro Alvarez

ในโฆษณาของ Ikea นี้ ใชFแคuคำสามคำกับรูปภาพที่มีพลังการสื่อสาร ดFวยเทคนิค ความตัดกันของความสวuางและสีบริเวณหFองหนึ่งในภาพ ทำใหFผูFชมเขFาถึงแนวคิดทั้งหมด ไดFทันทีวuา Ikea คือที่ที่จะทำใหFคุณโดดเดuนแตกตuางจากคนอื่น ๆ

111

วิธีสรFางความขัดแยFงดFวย รูปรuางในโฆษณาของ Somat ซึ่ง ใชF ว ิ ธี เ นF น ความแตกตu า งกั น ของ รูปรuางสี่เหลี่ยมผืนผFาสีแดง ตัดกับ วงกลมสีขาว โดยจัดองคBประกอบ ภาพใหFมีรูปรuางที่ตuางกันดFวยวิธี การบัง (crop) ภาพบางสuวน เปÖน สิ ่ ง ที ่ ท ำใหF ผ ู F ช มภาพรู F ว u า มี จ านที่ ขาวสะอาดอยูuที่นั่น Photographer by Ivan Frolov

โฆษณาของ Sensodyne ชิ ้ น นี ้ แ สดงถึ ง การใชF ห ลั ก ความ ขัดแยFงพื้นฐานดFวยเรื่องของการ ตัดกันระหวuางความสวuางความมืด (Light and Dark Colors) ดF วยการ ใชFภาพประกอบหลักของโปสเตอรB เปÖนหมวกสีขาวเรียงกัน ดูคลFาย เหมือนฟêนเมื่ออยูuบนพื้นหลังที่เปÖน สีดำ เพื่อขับเนFนความหมายของ ประโยชนBยาสีฟêนในการปกปëอง อุปมาเหมือนหมวกนิรภัยนั่นเอง Creative by Andrea Stillacci

112

การผสมผสาน (Mash-ups) คือการนำรูปภาพ ประเภทหรือสไตลWที่ไมKเข/า กันมารวมกัน โดยนำองคWประกอบหลายๆ อยKาง หรือไปผสมกันเรียกวKา “การยำ” ซึ่งการผสมผสานสองสิ่งที่แตกตKางกันมากเข/าด/วยกันมักจะสร/างสิ่งใหมKได/ เทคนิคนี้ ถูกนำมาใช/ในทุกสิ่งของงานศิลปะ ตั้งแตKการรีมิกซWดนตรีใหมK การนำคลิปวีดิโอมายำ ตัดตKอใหมK หรือการนำภาพมาตัดตKอใหมK เป9นต/น

Creative by Chris Garbutt

การผสมรูปภาพที่ไมuเขFากันสามารถสรFางสิ่งพิมพBโฆษณาที่ทรงพลังไดF อยuางใน กรณีโปสเตอรBสำหรับกองทุนสัตวBปüาโลก (WWF) ภาพแสดงปลาทูนuาบลูฟkชหลายตัว ซึ่ง หนึ่งในนั้นสวมหนFากากแพนดFา โฆษณาถามวuา “คุณจะแครBมากกวuานี้ไหมถFาฉันเปÖน แพนดFา” ซึ่งแคมเปญไมuใชuแคuเพียงใหFความสนใจกับสัตวBใกลFสูญพันธุBเทuานั้น แตuยัง มุuงเนFนไปที่สัตวBที่ไมuรูFจักอีกดFวย ทำใหFเราคิดและมีสuวนชuวยเหลือสัตวBใกลFสูญพันธุBในโลก นี้ ไมuวuาจะมีชื่อเสียงหรือไมuก็ตาม และปฏิบัตติ uอพวกมันอยuางเทuาเทียมกัน

113

ในโปสเตอรBที่อออกแบบ สำหรั บนิ ทรรศการ “A Fictional จิตวิทยาและชีววิทยาแหuงความ งาม” โดยออกแบบผสมภาพสuวน ตuาง ๆ ที่สมบูรณBแบบของใบหนFา ไดFแกu คิ้ว ตา จมูก ปาก และโครง หนFาที่สวยสมบูรณBแบบของแตuละ คนมาแสดงรวมกัน เพื่อสื่อแนวคิด เชิงเสียดสีเรื่อง “ความสมบูรณB แบบของความงาม” Creative by David Frew

แคมเปญของศู น ยB ภ าษา Berlitz Language Center ไดF ใ ชF แนวทางการออกแบบผสมรูปที่นuา ขนลุกและสรFางสรรคB เพื่อแสดงใหF เห็นประโยชนBของการเรียนภาษา โดยเสนอภาพที่เหนือจริงของชาย ชาวจีนโผลuออกมาจากปากของผูF พูดที่เปÖนชาวแอฟริกันอเมริกัน ใน สโลแกนที่วuา "พูดเหมือนเจFาของ ภาษา" Creative by Lucy Novita

114

น2 อ ยแตj ม าก (Minimalism) คื อ การออกแบบให/ “น/อ ย” การประหยั ด การใช/สKวนประกอบน/อยเทKาที่จำเป9น ตัดทอนสิ่งไมKสำคัญออก คงเหลือแตKภาพที่ นำมาใช/อยKางตรงไปตรงมา เพื่อให/การสื่อสารเกิดขึ้นชัดเจนที่สุด ไมK มี ข องที่ ไ มK จำเป9นหรือเกินความจำเป9น ภาพเดียวเลKาเรื่องได/ นักออกแบบจะต/องใสKใจในการ เลือกภาพให/ดีที่สุด เรียบงKายที่สุด หลายคนคงเคนได/ยินคำพูดที่ทรงอิทธิพลที่สุดวKา "Less is more" ของ Ludwig Mies van der Rohe [18] สถาปนิกชาวเยอรมัน อเมริ กั น ที่ ก ลายมาเป9 น คาถาสำคั ญ ของการเรี ย นออกแบบในยุ ค ตK อ ๆ มา ซึ่ ง โปสเตอรW และ ปôายโฆษณาที่ออกแบบ ไมKจำเป9นต/องแตKงเติมอะไรให/ดูเยอะเพื่อ ดึงดูดผู/คนให/สนใจในสินค/าของคุณก็ได/ มีแคKเพียงความเรียบงKายก็สามารถเป9น จุดเดKนได/อยKางนKาสนใจเชKนกัน โฆษณาของ FedEx สามารถพรรณนาถึ ง สิ ่ ง ที่ บริษัททำโดยไมuมีขFอความที่ ไมuจำเปÖน โดยแสดงภาพการ รวมสถานที่สำคัญที่มีชื่อเสียง ของโลกสองแหuงเขFาดFวยกัน ผสมกับสีของโลโกF ก็สามารถ สื่อสารความหมายเรื่องการ บริ ก ารสu ง ของไปทั ่ ว โลกไดF อยuางชัดเจน Creative by Matthew Brink

115

โฆษณาของ McDonalds นี ้ เ รี ย บงu า ยมาก โดยใชF ส ี ห ลั ก ที่ เกี่ยวขFองกับ McDonalds คือแดง และเหลื อ งซึ ่ ง ชu ว ยใหF ผ ู F ด ู โ ฆษณา สามารถเชื่อมโยงกลับไปยังแบรนดB McDonalds โดยเร็วที่สุด จุดโฟกัส ของรูปภาพเพียงจุดเดียวคือการ เรียงกันของเฟรนซBฟรายสBเปÖนรูป สั ญ ลั ก ษณB Wi-Fi ที่ ท ำใหF เ ขF า ใจ ประเด็นในทันทีวuา ฟรี Wi-Fi ใน รFาน McDonalds Creative by Adam Rose

แคมเปญแลกเปลี่ยนหนังสือ ของ Colsubsidio เรี ย บงu า ยและ สื่อความหมายซFอนเขFาไปในความ นF อ ยของภาพไดF น u า สนใจ โดยใชF ภาพเงากระดาษของเรื่องราวเปÖน สัญลักษณBแทนสโลแกน “มาพรFอม เรื่องหนึ่ง กลับออกไปพรFอมกับอีก เรื่องหนึ่ง” ในภาพเปÖนภาพเงาของ แฮรBรี่ พอตเตอรB จับคูuกับมFาโทรจัน Creative by Gustavo Marioni

116

ภาพสัญลักษณP (symbols) คือ สัญลักษณWที่เกิดจากการเรียนรู/รKวมกัน และ เป9นที่เข/าใจกันในระดับสากลของคนในสังคม มาใช/เป9นแนวคิดหลักในการออกแบบ ภาพก็ได/ เชKน สัญลักษณWจำพวก ปุóม Like, หมุด Google Maps, สัญลักษณWทาง การแพทยW สัญลักษณWการบินตKาง ๆ มาชKวยอธิบายความหมายที่แบรนดWต/องการ สื ่ อ สารได/ เมื ่ อ เรานำมาใช/ร วมกั บ ภาพ (Visual) ของแบรนดW ก็ ย ิ ่ ง ทำให/ ช ิ ้ น งาน ออกแบบนั้นนKาสนใจขึ้นมาได/เชKนกัน ในสK ว นการรั บ รู / ค วามหมายของการทำงานของสั ญ ลั ก ษณW ทุ ก การแทน ความหมายจะประกอบด/ ว ยองคW ป ระกอบสำคั ญ 2 สK ว นคื อ “ตั ว รู ป สั ญ ลั ก ษณW (Signifier)” และ “สิ่งที่สัญลักษณWหมายความถึง (Signified)” (พงศWธร หิรัญพฤกษW และชวณัฐ สุวรรณ [19], 2559 :53)

พื้นที่และสิ่งติดตั้งที่เกี่ยวข7องกับสุขอนามัย ใช7ในการขับถAายชำระล7าง ทำความสะอาดรAางกาย

Icon + Icon + Icon

(Signifier)

(Signified)

รูปสัญลักษณ+

ความหมายของสัญญะ

สิ่งที่ถูกหมายถึงในความคิดของผู@เห็นสัญลักษณ+

(the referent)

117

มูลนิธิมะเร็งเตFานม Susan G. Komen ใชFภาพของผูFหญิงมานั่ง เปÖนแบบจำลองใหFมีรูปรuางเหมือน สั ญ ลั ก ษณB ร ิ บ บิ ้ น สี ช มพู (Breast Cancer Plain Ribbon) ที่ ใ ชF เ ปÖ น สัญลักษณBแทนความหมายถึงการ ตระหนั ก รูF เ กี ่ ย วกั บ มะเร็ ง เตF า นม เปÖนการใชFภาพสัญลักษณBในงาน โฆษณาที่ออกแบบมาเรียบงuายแตu มีประสิทธิภาพในการสื่อสารมาก Print Magazine Regional Design Annual

ในแคมเปญรณรงคB ไ มu ใ หF ซื้อของปลอมของ Adidas ถูกสรFาง ดFวยผFาปkดแผลที่เทFาเรียงเปÖนสาม แถบของสั ญลั กษณB โ ลโกF Adidas เชื่อมโยงความเจ็บปวดของอาการ บาดเจ็บที่เทFา ดFวยวลีที่วuา "ของ ปลอมเจ็บจริง" Creative by Evans Sator, Melvin Mangada

118

หยิ บยื ม (Borrowed Interest) คื อ การเจตนาเชื ่ อ มโยงแกK น ใจความ หัวข/อ เหตุการณW หรือรูปภาพที่สำคัญและเป9นที่นKาจดจำ แตKไมKมีสKวนเกี่ยวข/องกับ สินค/า หรือบริการขิงผลิตภัณฑWนั้นเลย มาผสมผสานนำเสนอเพื่อดึงดูดความสนใจ ซึ่งเป9นเทคนิคทั่วไปในการสื่อสารโฆษณาที่จะมองหาบางสิ่งบางอยKางที่นKาสนใจ โดย หยิบยืมบางสKวนมาผสมกับคุณประโยชนWของผลิตภัณฑW

วิธีหนึ่งในการดึงดูดความ สนใจของผู F ช มไดF อ ยu า งดี คื อ การ หยิ บ ยื ม บางสu ว นจากตั ว ละคร ละครทีวี หรือภาพยนตรB ในกรณีนี้ ผลิตภัณฑBแปะแผล Band Aid ใชF ประโยชนBจากการหยิบยืมสuวนหนึ่ง ของภาพยนตB Incredible Hulk มาเชื่อมโยงอยuางมีประสิทธิภาพ เพื ่ อ ชี ้ ใ หF เ ห็ น วu า band-aid นั ้ น มี ความยืดหยุuนสูง Illustrator 3D Artist by Tarek Samaan

119

แบรนดBเครื่องดื่ม RedBull ไดFโฆษณาเครื่องดื่มชูกำลัง (energy drink) ดFวยวิธีหยิบยืมแนวคิดเรื่อง พลั ง งานของถu า นไฟฉาย มาเปÖ น ภาพบรรจุภัณฑBเลียนแบบถuานไฟ ในสโลแกน “High Energy” Creative by Faisal Basudan

บริษัท IKEA หยิบยืม “มีม” (meme) ภาพในโซเชี ย ลมี เ ดี ย ของเบอรB น ี แซนเดอรB ส (Bernie Sanders) ที่ อ อกมาปรากฏตั ว ใน พิธีเปkดตัวประธานาธิบดี โจ ไบเดน เพื่อใชFโปรโมตเกFาอี้รุuนหนึ่งลงใน Facebook เพจ ของ IKEA ประเทศ กรีซ พรFอมดFวยคำบรรยายใตFภาพ เขียนวuา: "สวัสดี Bernie! เรามีเกFาอี้ นั่งที่สะดวก สบายมาก!" ซึ่งกลาย เปÖนไวรัลไปทั่วโลกในทันที Creative by Ogilvy Greece

120

เทคนิคพิเศษทางภาพ (Visual Effect) คือการทำงานตกแตKงภาพรKวมกัน ระหวKางภาพถKายในระบบดิจิตอลผสมกับการสร/างภาพคอมพิวเตอรWสามมิติ เพื่อให/ ได/ภาพที่มีความสมจริง หรือเกินจรง อาจใช/วิธีลบสKวนที่ไมKต/องการในฉากออกเพื่อ ความสมบูรณWตามเนื้อเรื่อง หรือการสร/างภาพตKอเติมจากของเดิม ให/ดูยิ่งใหญKขึ้น หรือเติมจินตนาการให/เป9นจริงขึ้น

ตัวอยuางการใชFเทคนิคพิเศษ ทางภาพโฆษณาของบริษัทประกันภัย Jordan Insurance ที่ตFองการเตือนผูF ขับขี่รถที่สวมหมวกนิรภัยเพียงแคuใชF หลีกเลี่ยงตำรวจ ไดFสรFางความแปลก ประหลาดใหFผูFชม ดFวยซอฟตBแวรBตัด ตuอภาพ ทำใหFเกิดภาพที่เห็นตFองคิด ซ้ ำ สอง วu า เปÖ น ภาพศี ร ษะ หรื อ เปÖ น หมวกทีจ่ ำลองศีรษะของผูFสวมพอดี Photographe by Adriano Von Markendorf

121

กรณี ต ั ว อยu า งโฆษณา สตู ดิ โ อโยคะ YO BK ไดF แ สดง ใหF เ ห็ น เทคนิ ค พิ เ ศษทางภาพ อยu า งชั ด เจนวu า ประสิ ท ธิ ภ าพ ในการกลั บ คื น สู u ร ู ป รu า งเดิ ม ดF ว ยโยคะรF อ นในแคมเปญนี ้ แสดงภาพรู ป รu า งที่ ดี ที่ ซu อ นอยูu ภายใตF รu า งกายหลั ง จากที่ เ หงื่ อ ละลายออก Retouch by Philippe Lepaulard

หนั ง สื อ พิ ม พB Sonntags Zeitung ประเทศสวิตเซอรBแลนดB ใชF ก ารแตu ง ภาพประธานาธิ บ ดี ปู ต ิ นขF างใหF ข F างในคu อย ๆ กลาย เปÖนแรมโบF ลักษณะเหมือนตุ±กตา แมu ล ู ก ดกของรั ส เซี ย ที ่ เ รี ย งซF อ น กั น หลายตั ว เพื ่ อ สื ่ อ แนวคิ ด วu า สำนักขuาวนี้มีวิธีนำเสนอเรื่องราว แบบเจาะลึก Retouch by Scheffold Vizner

122

ฝ"กหา key Massage และ key visual 1. นำผลิตภัณฑWบางอยKางที่สนใจ เชKน น้ำยาล/างจาน หรือครีมกันแดดมาฝlก การเลKาเรื่องให/นKาสนใจ 2. เขียนข/อความคิดหลักในการเสนอเรื่องของคุณออกมา 1 ประโยค เชKน ครีมกันแดดปôองกันแสง 3. ให/เขียน คำสำคัญ (key word) หรือ วลีอื่น ๆ ที่เกี่ยวข/องกับแนวคิดหลัก เชKน “ปกปôอง” “ปôองกัน” “บังแดด” 4. สร/ า งภาพสื ่ อ สารหลั ก (key visual) โดยรK า งภาพ (Sketch) ความคิ ด (Idea) ลงบนกระดาษ สำหรับคำวKา “ปôองกัน” อาจวาดรูป ไขK หรือ รKม 5. ลองผสมภาพวาดหาวิธีที่เป9นไปได/ทั้งหมดที่คิดออกมาเป9นโวหารเชิงภาพ วิธีตKาง ๆ ที่อยูKในบทนี้ ในทางปฏิบัติแล/ว เราจะพบวKาการทำงานสื่อสารแตKละครั้ง เรามักจะใช/ลีลา ทั ้ ง หลายผสมปนเปกั น ได/ แตK อ ยK า งไรก็ ด ี น ั ก ออกแบบก็ ไ มK ค วรมองข/ า มที ่ จ ะใช/ ประโยชนWจากหลักการใช/โวหารทางภาพ เพราะหลักการทั้งหลายจะชKวยให/เรา สามารถมีทางเลือกในการถKายทอดสิ่งที่อยูKในรูปแบบของภาษาพูด -เขียน มาสูK รูปแบบของภาษาภาพได/ดียิ่งขั้น ลองคิดดูวKาหากเราสามารถใช/ภาษาภาพได/ดีในระดับที่ใกล/เคียงกับการพูด หรือเขียนของเรา ยKอมจะทำให/งานออกแบบของเราสามารถเข/าถึงผู/คนได/เข/าใจและ จับใจยิ่งขึ้นได/

123

ตัวอยjางการเปลี่ยน Keyword “ปกปvอง” เปxน Key Visual ล็อค

ร.ม

ชุดป3องกัน

เกราะป3องกัน

ไข.

โอบอุ>มคุ>มครอง

124

Creative by 21 Vision Team

Creative by FlavsDesigns

125

เมื ่ อ มี อ งค* ป ระกอบต1 า ง ๆ เช1 น รู ป ภาพ ข: อความ เพื ่ อใช: ในการออกแบบแล: ว สิ ่ งที ่ ต : อง ปฏิบัติในขั้นต1อมาคือการจัดวางผังภาพ (Layout) เปPนการออกแบบเค:าโครงตามแนวความคิดของ นักออกแบบ เพื่อกำหนดว1าส1วนพื้นที่ตรงไหนจะ วางอะไรอย1 า งคร1 า ว ๆ เพื ่ อ ทำออกมาให: เ ปP น ต:นฉบับงานออกแบบ (Art work) สำหรับใช:เปPน ต:นแบบเพื่อนำเสนอ เพื่อตรวจสอบผลความพึ ง พอใจ ก1อนพิมพ*หรือเผยแพร1ต1อสาธารณชน ดังนั้น จึงมีประโยชน*หลายประการสำหรับการใช:การจัด วางผังภาพเพื่อสร:างชิ้นงานออกแบบ

126

คำว1าการจัดวางผัง หรือ เรียกทับศัพท*ว1า เลย*เอาท* (Layout) นั้น David Dabner, Sandra Stewart และ Eric Zempol [20] ได:อธิบายไว:ว1า เลย*เอาท*คือ การจัดระบบให:กับองค*ประกอบที่แตกต1างกันมาก เพื่อให:ได:ผลลัพธ*ออกมาเปPนงาน ออกแบบ ซึ่งการสื่อสารผ1านการมองเห็นที่ดีนั้นต:องมีการแสดงข:อมูลอย1างเปPนระบบ มีความสอดคล:อง และขับเน:นองค*ประกอบที่สำคัญมากที่สุดให:โดดเด1นขึ้น การจัด องค*ประกอบจะออกมาดีหรือไม1ขึ้นกับกระบวนการนี้เปPนสำคัญ นักออกแบบสื่อ โฆษณาต:องครุ1นคิดพิจารณาเสมอเพื่อให:องค*ประกอบทุกอย1างสามารถแสดงบทบาท ของมันได:อย1างเหมาะสม

ตัวอย&างการจัดวางเลย/เอาท/ Design by CRAIG KUNCE

127

ประโยชน)ของการจัดวางผังภาพ 1. เป&นแบบการจำลองของงานโฆษณา เพื่อเสนอลูกค=าก>อนส>ง Artwork 2. เป& นแนวทางในการกำหนดแนวคิ ด (Concept) ของงานโฆษณาให= แก> ผู=ออกแบบ เพื่อจัดวางองคUประกอบและรูปแบบงานโฆษณาให=สอดกับความคิดสร=างสรรคU และเข=าถึงกลุ>มเป[าหมาย 3. เป&นแนวทางสำหรับช>างภาพหรือสตูดิโอในการถ>ายภาพว>างานโฆษณาชิ้น นั้นต=องการอะไร Subject และ Background ควรจะเป&นอย>างไร 4. เป&นแนวทางสำหรับผู=ออกแบบได=รู=ถึง ขนาดภาพ ขนาดตัวอักษร และสีสัน ที่ ต=องการในงานโฆษณาชิ้นนั้นด=วย 5. ช>วยในการคำนวณค>าใช=จ>ายของการโฆษณาได=ว>าต=องเสียค>าใช=จ>ายประมาณ เท>าใดหากผลิตเป&นสื่อสิ่งพิมพU เพื่อจะเสนอราคาให=ลูกค=ารูง= บประมาณก>อนทำการผลิต

128

ระบบกริด คือ การวางเส:นเปPนตาราง เพื่อใช:กำหนด ขอบเขตในการออกแบบและจัดองค*ประกอบต1าง ๆ ไม1ว1าจะ เปPนภาพหรือเนื้อหาให:อยู1ในรูปแบบที่สวยงามตามต:องการ กริ ดจึงไม1ใช1สูตรสำเร็จที่ต:องปฏิบัติตามอย1างเคร1งครัด แต1สามารถ ปรับเปลี่ยนรูปแบบได:อย1างยืดหยุ1น หน:าที่หลักของกริด คือ ใช:เปPนโครงร1างสร:างระเบียบ เพื่อแบ1งแยกเนื้อหาหรือองค*ประกอบ รูปแบบของกริดใช:เปPน แม1แบบ (Template) ในการจัดวางผังภาพ (Layout) โดยแบ1ง ตาราง และเส:นแบ1งที่จัดอย1างเปPนแบบแผน ใช:เพื่อเปPนโครงใน การกำหนดตำแหน1ง ขอบเขตบริเวณสำหรับบรรจุภาพ เนื้อหา พื ้ นที ่ ว 1 าง และส1 วนประกอบต1 าง ๆ ในการออกแบบให: งาน ออกแบบมีความต1อเนื่อง สวยงาม เปPนอันหนึ่งอันเดียวกัน ดูแล:วสอดคล:องลื่นไหล แต1การใช:กริดเปPนการวางโครงแบบหลวม ๆ เปPน เครื ่ อ งมื อ ในการทำงานโดยเฉพาะงานออกแบบเปP น ชุ ด ที่ ต: อ งการความต1 อ เนื ่ อ ง ผู : ใ ช: ส ามารถพลิ ก แพลงแบบได: ตลอดเวลา ไม1มีกฎบังคับ เพียงแต1อยู1ภายในกรอบที่จัดไว: โดย ดูผลลัพธ*สุดท:ายของงาน ซึ่งกริดไม1ใช1สิ่งใหม1 โครงสร:าง กริดนี้ ถู ก ใช: ม านานหลายศตวรรษ ซึ ่ ง David Dabner, Sandra Stewart และ Eric Zempol [20] ได:อธิบายถึงองค*ประกอบ ของกริด มีดังนี้

129

1. ขอบกระดาษ (margins) คือช>องว>างที่อยู>ระหว>างขอบของพื้นที่ทำงานซึ่งมี ภาพหรือตัวอักษรปรากฏอยู>กับขอบของกระดาษทั้งสี่ด=าน ความกว=างจากขอบกระดาษของ ช>องว>างนี้ ไม>จำเป&นต=องเท>ากันทั้งสี่ด=าน แต>ถ=าเป&นสิ่งพิมพUทั้งเล>มควรเป&นแบบแผนเดียวกัน ทุก ๆ หน=าเพื่อความต>อเนื่อง มารUจิ้นเป&นจุดพักสายตา แต>สามารถใช=เป&นที่ใส>เลขหน=า หัว เรื่อง คำอธิบาย ต>าง ๆ และอาจใช=เป&นที่ดึงดูดความสนใจ 2. แถวในแนวตั้ง (Columns) คือ ช>องที่จัดเรียงกันในแนวตั้ง ซึ่งช>องว>างระหว>าง คอลัมนUในหน=าออกแบบหนึ่งหน=าสามารถแบ>งคอลัมนUได=กี่แถวก็ได= และความกว=างของแต> ละคอลัมนUก็ไม>จำเป&นต=องเท>ากันแล=วแต>ผู=ออกแบบ 3. ชFองวFางระหวFางคอลัมนU (Gutters) คือ ช>องว>างระหว>างโมดูลที่ติดกัน ช>องว>าง อาจทอดยาวเป&นแนวตั้ง หรือแนวนอน หรืออาจเป&นทั้งแนวตั้งและแนวนอนก็ได= แต>ละแนว อาจมีความกว=างที่ต>างกันในหน=าหนึ่งๆ ก็ได=

130

ระบบกริดที่เปPนที่นิยมใช:กันในการออกแบบสื่อสิ่งพิมพ*โฆษณาประเภทต1างๆ เช1น นิ ต ยสาร (Magazine) ใบปลิ ว (Handbill) แผ1 น พั บ (Folders) เอกสารเย็ บ เล1 ม (Brochure) แคตตาล็ อก (Catalog) และโปสเตอร* Ellen Lupton และ Jennifer Cole Phillips [9] ได:แบ1งออกได:เปPน 4 ประเภท ดังนี้ 1. เมนูคริปต- กริด (Manuscript Grid) เป&นระบบกริดที่มีโครงสร=างเรียบง>าย และซับซ=อน น=อยที่สุด รูปแบบคือ ในหนึ่งพื้นที่การออกแบบจะมียูนิตกริดสี่เหลี่ยม หรือ บล็อกกริด (Block Grid) สี่เหลี่ยมขนาดใหญ>บล็อกเดียวเกือบเต็มหน=า และมีระยะขอบ (margin) ล=อมรอบ เป&นที่นิยมการวางภาพใหญ>ๆสวยๆ หรือวางตัวอักษรใหญ>ๆ ดูน>าสนใจ

ตัวอย<างการออกแบบประเภทเมนูคริปตM กริด (Manuscript Grid)

131

2. คอลัมน- กริด (Column Grid) เปMนระบบ กริดที่มีโครงสร=างซับซ=อนมากกว>าเมนูสคริปตU กริด รูปแบบคือ ในหนึ่งพื้นที่การออกแบบนั้นมีมากกว>า 1 คอลั ม นU แบ> ง พื ้ น ที ่ ด = ว ยเส= น แนวตั ้ ง ออกเป& น คอลัมนUมีขนาดความสูงเต็มหน=ากระดาษ โดยขนาด ความกว= า งของแต> ล ะคอลั ม นU จ ะมี ข นาดเท> า กั น หรือไม>เท>ากันก็ได= มีระยะขอบ (margin) ล=อมรอบ กริดประเภทนี้เหมาะสำหรับการพิมพUเนื้อหาที่ไม> ต>อเนื่องกันยาวมาก และมีการจัดวางภาพอยู>ด=วย เช>น นิตยสาร หนังสือพิมพU วารสาร ช>วยให=งานมี ความเป&นระเบียบ แบ>งสัดส>วนให=อา> นได=ง>าย

ตัวอย<างการออกแบบประเภทคอลัมนM กริด (Column Grid)

132

3. โมดูลาร- กริด (Modular Grid) เป&นระบบ กริดที่มีโครงสร=างซับซ=อนมากกว>าสองประเภทแรก รูปแบบ คือ ในหนึ่งพื้นที่การออกแบบจะมียูนิตกริด สี่เหลี่ยมหลายยูนิต โดยแบ>งด=วยทั้งเส=นทางตั้ง และ ทางนอนตัดกันหลายๆช>อง มีช>องว>างระหว>างตาราง (alley) เป&นช>องเว=นว>างระหว>าง ยูนิต มีระยะขอบ (margin) ล=อมรอบ กริดประเภทนี้ ทำให=เกิดความ อิสระในการรวมช>องต>างๆ เป&นผืนเดียวกัน หรือ แยกย>อยเป&นแบบไหนก็ได= ทำให=ออกแบบจัดวางผัง ภาพ (Layout) ได=หลากหลาย เหมาะสำหรับการ พิมพUข=อความ และมีการจัดวางภาพอยู>ด=วยและ เหมาะกั บ การใช= ใ นสื ่ อ สิ ่ ง พิ ม พU ท ี ่ ม ี ก ารออกแบบ เผยแพร>ต>อเนื่องเป&น ระยะเวลานาน เช>น นิตยสาร หนังสือพิมพU วารสาร

ตัวอย'างการออกแบบประเภทโมดูลาร8 กริด (Modular Grid)

133

4. ไฮราชิเคิล กริด (Hierarchical Grid) เป&น ระบบกริดที่มีโครงสร=างซับซ=อนไปอีกระดับซึ่งได=รับ การออกแบบเพื่อให=เหมาะสมกับข=อมูลที่จะนำเสนอ เป&นเฉพาะกรณี รูปแบบคือ ในหนึ่งพื้นที่การออกแบบ จะมียูนิตกริดสี่เหลี่ยมมากกว>า 1 ยูนิต โดยแต>ละ ยู น ิ ต จะมี ข นาดเท> า กั น หรื อ ไม> เ ท> า กั น ก็ ไ ด= จะมี ช>องว>างระหว>างตารางเป&นช>องเว=นว>างระหว>างยูนิต หรือวางซ=อนทับกันได=ตามความต=องการ เป&นรูปแบบ ที่อิสระมาก และจะมีหรือไม>มีมีระยะขอบ (margin) ล=อมรอบก็ได= กริดประเภทนี้เหมาะสำหรับการออกแบบ งานที่ข=อความ และภาพอยู>ด=วยกัน เช>น หนังสือที่มี ภาพประกอบจำนวนมาก เช>น แคตตาล็อค หรือ โปสเตอรU

ตัวอย'างการออกแบบประเภทไฮราชิเคิล กริด (Hierarchical Grid)

134

การจั ด วางผั ง ภาพ หนั ง สื อ เล1 ม นี ้ จ ะใช: ค ำทั บ ศั พ ท* ว1 า เลย*เอาท* เพื่อง1ายต1อการพูดถึงและการทำความเข:าใจ ซึ่ง เลย*เอาท*นั้นคือการจัดระบบให:องค*ประกอบที่มีความแตกต1าง กัน ให:ได:ผลลัพธ*ออกมาเปPนงานออกแบบและการสื่อสารที่ดี ต:องอาศัยวิธีจัดการเสนอข:อมูลอย1างเปPนระบบ และขับเน:น องค*ประกอบที่สำคัญให:โดดเด1นที่สุด Roy Paul Nelson [21] ได:อธิบายว1า รูปแบบเลย*เอาท* (Layout Style) จัดเปPนถือเปPน แม1แบบโครงสร:างการจัดวางที่นิยมใช:กันในการออกแบบร1วม สมัย แบ1งรูปแบบเลย*เอาท*โดย ดังนี้ 1. เลย*เอาท*เน:นภาพประกอบ จุดประสงค* เพื่อใช:รูปใน การสื่อสาร เพื่อให:รูปเปPนจุดเด1น มุ1งให:คนสนใจที่รูปก1อน 2. เลย* เ อาท* เ น: น ข: อ ความ สำหรั บ การออกแบบที ่ มี ความจำเปPนต:องใช:ข:อความหรือข:อมูลตัวอักษรจำนวนมาก 3. เลย*เอาท*ให:ความสัมพันธ*กับภาพเท1าๆ กัน เปPนการ จัดวางให:เกิดความสมดุลระหว1างภาพและตัวอักษร โดยไม1เน:น ไปที่อย1างใดอย1างหนึ่ง 4. เลย*เอาท*โดยเน:นความว1างของพื้นภาพ วิธีนี้สำหรับ การออกแบบในลักษณะเน:นที่ว1าง (space) 5. เลย* เ อาท* โ ดยวิ ธ ี ก ารจั ด แนว เพื ่ อ เปP น การกำหนด ทิศทางของภาพและตัวอักษรให:ไปในทิศทางเดียวกัน

135

1.1 Picture Window Layout (การจัดวางผังภาพแบบหน=าต>าง) เป&น รู ป แบบที่ ต = อ งการเน= น ภาพที ่ มี ขนาด ใหญ> ในส> วนพาดหั ว ข= อความโฆษณา เครื่องหมายการค=า เป&นองคUประกอบ รองลงมา โดยส>วนมากนิยมวางภาพไว= ในช> อ งกริ ด ที ่ ส ร= า งไว= เป& นระบบกริ ด เมนูคริปตU กริด (Manuscript Grid) ที่มี โครงสร=างเรียบง>าย

JDN Design Art Exhibition & Event

Makeshift volume 14

136

1.2 Mondrian Layout (การ จัดวางผังภาพแบบตาราง) เป&นการจัด วางภาพตั้งชื่อตามจิตรกรชาวดัตชU ชื่อ Piet Mondrian (ป~ต มอนเดรียน) โดย ลากเส=นตามแนวตั้งและแนวนอน แบ>ง บริ เวณพื ้ นภาพออกเป& นช> องสี ่ เหลี ่ ยม แล=วเติมเส=นหรือแท>งสีลงไปในบริเวณที่ ถูกแบ>ง เป&นลักษณะการจัดระบบกริบ แบบไฮราชิเคิล กริด (Hierarchical Grid)

Holiday Magazine by Matt Lawson

WordPress Theme by Denis Kozionov

137

1.3 Rebus layout (การจัดวาง ผังภาพแบบภาพปริศนา) เป&นการจัดโดย ใช=ภาพเป&นส>วนสำคัญ ให=ตัวภาพอธิบาย ตนเอง อาจใช= ข = อความประกอบเพี ยง เล็กน=อย แบบภาพปริศนา ใช=ภาพเล็ก ๆ มาสอดแทรกระหว> างประโยคแทนคำ เขี ย น โดยปกติ ผ ู = โฆษณามั กไม> น ิ ยม ปริศนา แต>จะพบว>าบางครั้งที่ต=องการ ความแปลกใหม>

Design by Jon McCoy

Floresta store in Nara

138

1.4 Mulipanel Layout (การจัด วางผั งภาพแบบแถบซ= อน) เป& นการนำ ภาพวางซ= อ นทั บ กั น ภาพแต> ล ะภาพ อาจจะเอียงไขว=กันไปมา หรือการผสม กันทำให=เกิดการดึงดูดการสนใจ

Design by Filipe Cartaxo

Design by Caroline Grohs

139

1.5 Silhouette layout (การ จั ด วางผั ง ภาพแบบภาพเงา) โดยใช= ภาพถ>ายลักษณะเหมือนการย=อนแสงใน ภาพถ>าย เหมือนรอยทาบของเงาบนพื้น หรือเหมือนภาพบนจอหนังตะลุง เพื่อ สร=างความแตกต>างให=ดูโดดเด>น ภาพเงา ยิ ่ งมี ล ั กษณะแปลกตาเท> าไร ยิ ่ งทำให= โฆษณาชวนมองเท>านั้น

Designed by Neville Brody

Designed by Matthew Welch

140

2.1 Copy Heavy Laout (การ จัดวางผังภาพแบบหนักบท) เป&นการ จั ด โดยใช= ข = อ ความมาก โดยเฉพาะใน กรณีที่ไม>สามารถจะตัดข=อความได= เพื่อ บรรยายรายละเอี ย ดของสิ น ค= า มี ภาพประกอบบ=างเล็กน=อย การจัดภาพ แบบนี ้ จ ะใช= โ ครงสร= า งกริ ด มาช> ว ยใน การออกแบบ

Quotes about Newspaper design

TypeTogether on flickr

141

2.2 Big type layout (การจั ด วางผังภาพแบบตัวอักษรใหญ>) เป&นการ จัดโดย เน=นข=อความให=มีขนาดใหญ>ทั้ง หั ว เรื ่ อ งหลั ก และข= อ ความรอง เพื่ อ ดึงดูดความสนใจ ตัวอักษรขนาดใหญ> มักเป&นที่สนใจสำหรับนักออกแบบและผู= ดู เพราะมั น จะมี ร ู ป ร> า งที ่ ช วนมอง ตัวอักษรในบางครั้งก็มีบทบาทมากกว>า งานศิลปะ หรือภาพสวย ๆ

Design by Marie Claire

A

Design by Peter Bilak

142

3.1 Frame Layout (การจัดวาง ผังภาพเป&นกรอบ) เป&นการจัดภาพหรือ ข= อความ ที ่ ต = องการเน= นให= อยู > ในกรอบ มักจะนิยมวางงานศิลปะไว=รอบ ๆ ทำเป&น วงล=อมบริเวณที่เป&นบทและพาดหัว หรือ อาจใช=ภาพถ>าย หรือภาพเต็มทั้งหน=า แล=ว พิมพUตัวอักษรลงบนภาพ

Design by Ceyda Cemal

Design by Delicious Design Studio

143

3.2 Circus Layout (การจั ดวาง ผังภาพแบบละครสัตวU) เป&นการจัดโดยใช= ภาพที่มีขนาดใกล=เคียงกันหลายๆ ภาพ วางกระจายเต็ ม หน= า ภาพประกอบ อาจจะจัดวางให=ดูรู=สึกว>าวุ>นวายเหมือน อยู>ในสวนสนุกหรือโรงละคร เพื่อ ให=ดู แล=วเกิดความรู=สึกว>ามากมายหลายหลาก แต>การจัดข=อความจะยังคงถูกจัดไว=อย>าง เป&นระเบียบตามระบบตาราง

Design by Mika Melvas

Design by Takehiro Wada

144

Spot Layout (การจัดวางผังภาพ แบบจุด) เป&นการวางรูปภาพให=มีลักษณะ เป&นจุดลอยกลางพื้นภาพ และใช=ข=อความ จำนวนน=อยมากเพื่อให=ภาพแลดูเด>นชัด เน=นบริเวณที่ว>าง ผู=ออกแบบจำเป&นต=อง ให=ความสำคัญแก>บริเวณพื้นภาพ

Design by Roberto Piazza

Design by Julian Suetin

145

5.1 Band layout (การจั ดวางผั ง ภาพแบบแถบ) เป&นการวางองคUประกอบ อันได=แก> รูปภาพและข=อความในลักษณะ ที่เป&นแถบตามแนวตั้งชิดขอบภาพด=านใด ด=านหนึ่ง การวาง layout ลักษณะนี้จะ เกิดบริเวณพื้นที่ว>างและเน=นให=มีความ สะดุดตาน>าสนใจ

Design by PR with Perkes

Design by Carr Shaw

146

5.2 Axial layout (การจัดวางผัง ภาพแบบแกน) เป&นการวาง layout ให= องคU ประกอบมี ล ั กษณะ เป& น แกนตรง กลางในแนวตั้ง

Design by Luke Syrylo

Design by Aaron Kelwick

147

5.3 T shape layout (การจัดวาง ผั งภาพหน= าแบบตั วที ) เป& นการจั ดวาง องคUประกอบในลักษณะเป&นรูปร>างตัวที (T) ในอักษรโรมัน ซึ่งจะทำให=ภาพเกิด ลักษณะสมดุลน>าเชื่อถือ

Design by Belbembe

Design by bashooka.com

148

5.4 L shape layout (การจัดวาง ผังภาพแบบตัวแอล) เป&นการวางภาพและ องคUประกอบในลักษณะเป&นรูป ตัวแอล ในอักษรโรมัน (L) ซึ่งจะทำให=ลักษณะ งานออกมาไม>สมดุลจนเกินไป เพื่อสร=าง ความน>าสนใจแก>ผู=ดู

Design by Belbembe

Design by bashooka.com

149

5.5 S shape layout (การจัดวาง ผั ง ภาพแบบตั ว เอส) เป& น การวางภาพ องคU ป ระกอบในลั ก ษณะเส= น แกนหลั ก เป&นรูปตัวเอส ซึ่งจะทำให=ภาพโฆษณามี ทิ ศ ทางการเคลื ่ อ นไหวเกิ ด ความรู= สึ ก ต>อเนื่อง

Design by Graphicovy

S Design by Jenna Lyons

150

เข้ าใจกริ ด เลือกงานสิ่งพิมพUโฆษณาที่ชื่นชอบจากนิตยสาร หรือจะพิมพUออกมาจากเว็บไซตU จำนวน 5 ชิ ้ น หน= า ที ่ เ ลื อ กควรมี ท ั ้ ง หน= า ที ่ เ ต็ ม ไปด= ว ยเนื ้ อ หา และหน= า ที ่ ม ี ร ู ป และ องคUประกอบอื่นๆ 1. ติดกระดาษกาวแบบลอกได=ไว=มุมกระดาษบนแผ>นรองเขียน หรือโตÑะพื้นเรียบ จากนั้นนำกระดาษไข หรือกระดาษลอดลายไปวางซ=อนบนภาพเหล>านั้น จัดวาง ให=เสมอขอบทุกด=าน 2. ใช=ดินสอลากเส=นกริดที่ภาพเหล>านั้นเลือกใช=งานบนกระดาษลอกลาย และวัด ความกว=างของคอลัมนU ขอบกระดาษด=านบน ด=านข=าง และด=านล>าง ช>องว>าง ระหว>างคอลัมนUทั้งซ=ายและขวา พิจารณาระหว>างองคUประกอบให=ดี พยายามดูให= แน>ใจทุกครั้งก>อนวาดกริด 3. เมื่อวาดกริดเสร็จสิ้น ให=ระบุลักษณะของสิ่งพิมพUโฆษณาเลือกใช=ในแต>ละชิ้น เช>น แบ>งเป&น 2 คอลัมนU 3คอลัมนU หรือการแบ>งกริดแบบอิสระ 4. เขียนสรุปข=อมูลที่ได=จากการทำแบบฝÜกหัดนี้ อธิบายว>าเพราะเหตุใดคุณถึงเลือก สิ่งพิมพUโฆษณาเหล>านี้มาทำแบบฝÜกหัด มันน>าสนใจอย>างไร ลองอภิปรายว>าระบบกริดดังกล>าวช>วยสนับสนุนงานออกแบบนั้น ๆ ได=อย>างไร

151

การจัดหน7า คุณอาจจำเป&นต=องใช>โปรแกรมคอมพิวเตอรUในการทำแบบฝÜกหัดนี้ เลือกใช= โปรแกรมที่เกี่ยวข=องกับการจัดหน=าได= เช>น InDesign, Illustrator หรือ Photoshop 1. ลองหารูป และ ข=อความโฆษณา ที่ชื่นชอบ ทั้งสโลแกน คำอธิบายสรรพคุณ ข=อความรายละเอียดอื่น ๆ 2. สร=างสร=างระบบกริดง>าย ๆ สำหรับ 1 หน=ากระดาษ A4 3. เลือกฟอนตUที่จะนำมาใช= พิจารณาฟอนตUที่จะใช=เป&นหัวเรื่องหลัก กับฟอนตU สำหรับข=อความบรรยายอื่น ๆ 4. จัดองคUประกอบในพื้นที่งานที่สร=างกริดไว= ตามแนวทางการจัดวางผังภาพแต> ละแนวทาง 5. ลองจัดวางภาพและข=อความให=ต>างกันสัก 6 แบบ นึกถึงตำแหน>งรูปและ ข=อความให=สัมพันธUกันขององคUประกอบในหน=านั้น ๆ ในรูปและข=อความเดิม ที่เปลี่ยนแปลงนั้น สามารถย>อหรือขยายขนาดได= หลังจากนั้น นำงานแต>ละแบบลองมาดูเปรียบเทียบกัน ใช=พื้นที่ว>างมากน=อยขนาด ไหน ใช=ระบบกริดกี่รูปแบบ ตำแหน>งการวางตัวอักษรและรูปภาพที่เปลี่ยนแปลง หรือ เปลี่ยนขนาดหรือไม> สามารถสร=างความแตกต>างอย>างชาญฉลาดของแต>ละ Layout หรือไม> หน=าที่ของคุณคือพิจารณาให=ละเอียดถี่ถ=วนว>า ภาพใดใน 6 แบบนั้นเรียกร=อง ความสนใจออกมาได=อย>างโดดเด>น เพราะอะไร

152

Creative KongFrost Professional DesignbybybyHong Creative 21Vince Vision Team Photographers Network

153

การออกแบบไม*ว*าจะเป0นสื่อใด ๆ นอกจาก สร8างภาพให8สื่อสารความหมายได8ตรงตามต8องการ แล8ว ยังต8องอาศัยความงามทางด8านศิลปะเข8าไปผสม จึ ง จะช* ว ยให8 ง านที ่ อ อกแบบไปนั ้ น มี จ ุ ด เด* น อย* า ง ชั ด เจน และมี ค วามสามารถดึ ง ดู ด ใจต* อ ผู 8 พ บเห็ น ผลงานออกแบบ ซึ่งหลักการทางศิลปะนั้น หลักการ จัดองคPประกอบถือเป0นสิ่งจำเป0นอย*างยิ่ง ต*อการ ออกแบบที ่ น ั ก ออกแบบต8 อ งรู8 เพราะไม* ว * า การ ออกแบบใด ๆ ย*อมหนีไม*พ8นเรื่องของการพิจารณา ด8านพื้นที่ (Spacing) ตำแหน*ง ขนาด ทิศทาง และ รูปแบบของการวางองคPประกอบต*าง ๆ อยู*เสมอ

154

คำว*า “องคPประกอบ” ตามความหมายจากพจนานุกรมฉบับ ราชบัณฑิตยสถาน พ.ศ. 2554 หมายถึง ส*วนต*าง ๆ ที่ประกอบกันทำ ให8เกิด รูปร*า งใหม*ขึ้น โดยเฉพาะ นอกจากนี้ยังมีค ำจำกัดความของ นักวิชาการ มีการให8คำนิยามซึ่งสามารถสรุปได8ดังต*อไปนี้ Aaris Sherin [22] ได8 น ิ ยามความแตกต* างระหว* าง “เลยP เอาตP (Layout)” และ “การจัดองคPประกอบ (Composition)” ว*า เลยPเอาตP คือ เค8 า โครงการจั ดเรี ยงองคP ประกอบต* า ง ๆ ของการออกแบบ เป0 น ความหมายเชิงเทคนิคมากกว*า และเป0นสิ่งที่สามารถทำแบบอัตโนมัติ เช*น จัดเรียงเรื่องราวบนหน8าโปสเตอรP ส*วนการจัดองคPประกอบแสดง ถึงกระบวนการคิดเชิงสร8างสรรคPที่เกี่ยวข8องกับศิลปะเพื่อทำภาพให8 สวยงามสร8างความน*าสนใจขึ้น David Dabner, Sandra Stewart และ Eric Zempol [21] อธิบาย ว*า องคPประกอบ (Composition) นั้นหมายถึงการจัดการโครงสร8างของ การมองเห็น เป0นหลักการออกแบบเกี่ยวข8องกับการนำองคPประกอบ พื้นฐานของศิลปะไม*ว*าจะเป0น จุด เส8น สี รูปทรง รูปร*าง ที่ว*าง แสงเงา และพื้นผิว นำมาจัดรวมกันแล8วเกิดรูปร*างต*าง ๆ ที่แสดงออกในการสือ่ ความหมายและความคิดสร8างสรรคP จากคำจำกัดความของนักวิชาการ ดังกล*าวข8างต8นพอจะสรุปว*า “เลยPเอาตP” นั้นคือ การจัดเรียงแบบมีโครงสร8างของรายการภายใน พื้นที่ ในขณะที่ “องคPประกอบ”คือสัดส*วนขององคPประกอบต*าง ๆ เพื่อสร8างความสัมพันธPทั้งหมดในพื้นที่

155

หน8 าที ่ส ำคั ญของการจั ดองคP ประกอบก็ค ื อ การทำให8 ผ ู 8ดู ร ับรู8 ความสัมพันธPระหว*างส*วนประกอบต*าง ๆ ในภาพ ให8ตรงกับจุดประสงคP ของการสื่อสารในการออกแบบสื่อโฆษณาต*าง ๆ การประกอบภาพให8ได8 ผลสำเร็จ นักออกแบบจะต8องมีความกระจ*างในใจว*า อะไรคือสาร (message) อะไรคือแนวความคิด (concept) อะไรคือความรู8สึก (feeling) หรืออารมณP (mood) ทั้งหมดคือสิ่งที่ต8องการให8งานออกแบบแสดงออกมาให8เห็น โดย หน8าทีก่ ารจัดองคPประกอบคือ 1. การนำส*วนประกอบ (elements) ต*าง ๆ ในภาพมาได8รบั การคัดสรรเน8นส*วนสำคัญ (emphasized) และจัดส*วนอื่น ๆ ให8มีความ สำคัญรองลงไป (sub-ordinate) 2. การรวมส*วนต*าง ๆ เข8าด8วยกันในภาพจะให8มีความผสม กลมกลืนเป0นหน*วยเดียวกัน เพื่อบอกเรื่องราวเพียงเรื่องเดียว และรวม ความคิดไว8เพียงความคิดเดียว 3. การเลือกรายละเอียดต*าง ๆ ในภาพที่จำเป0น และกำจัด ส*วนอื่น ๆ ซึง่ จะมารบกวนจุดเด*นออกไป 4. เน8นรายละเอียดของส*วนที่ สำคั ญเป0 นพิเศษ เรี ยกว*า "ศูนยPความสนใจ" (center of interest) การเลือกจุดสนใจหลักในงาน ออกแบบนั้ น ขึ ้นอยู* กั บนักออกแบบแต*ล ะคนว* า จะสื ่อความหมาย ความคิดของแต*ละคน ดังนั้นศูนยPความสนใจอาจจะแปรเปลี่ยนไปตาม การรับรู8

156

การจัดองคPประกอบในงานออกแบบได8ประยุกตPมาจากวิช า ทั ศ นศิ ล ปá หากมองย8 อ นไปยั ง ประวั ต ิ ศ าสตรP ทฤษฎี ก ารจั ด วาง องคP ป ระกอบมี ก ารพั ฒ นาในหลากหลายรู ป แบบ เช* น การใช8 คณิตศาสตรPในการกำหนดพื้นที่ของรูปในชื่อสัดส*วนทองคำ (Golden Section) เป0นสัดส*วนที่มีการนำเอาไปใช8ในการออกแบบเพื่อกำหนด พื้นที่การวางองคPประกอบในสัดส*วนที่ลงตัว เพราะเป0นสัดส*วนที่ดูแล8ว สบายตา โดยอัตราส*วนเหล*านี,้ uค*าแทนด8วยสัญลักษณP φ (อ*านว*า ฟç) มีค*าประมาณ 1.618 เรียกได8ว*าเป0นตัวเลขมหัศจรรยP (David Dabner, Sandra Stewart และ Eric Zempol, [21] 1991: 36)

การกำหนดพื้นที่ของรูปในสัดสNวนทองคำ Golden Section

157

การกำหนดเสVนโครงรNางของเกรียวกVนหอย (golden spiral)

ในการนำสัดส*วนทองคำ ไปใช8 จะเน8นให8เส8นโครงร*างของ เกรี ย วก8 น หอย (golden spiral) ซึ ่ ง ด8 า นในเป0 น ตั ว กำหนดพื ้ น ที่ และการจัดเรียงของภาพกราฟíก ตัวอักษรต*าง ๆ เพื่อ ให8เกิดความ สมดุล โดยวิธีกำหนดว*าส*วนไหน จะจัดให8เป0นพื้นที่ว*างและส*วน ไหนเป0นส*วนที่เน8นที่สุดของภาพ ซึ่งส*วนใหญ*ในการจัดองคPประกอบ ต*าง ๆ มักถูกจัดวางไว8ด8านในของ เกรียวก8นที่จะม8วนออกมา โดย ปล*อยด8านนอกเป0นพื้นที่ว*าง Illustrator by Ruta Kiskyte

158

David Dabner, Sandra Stewart และ Eric Zempol, [21] จากวิทยาลัยการพิมพP ลอนดอน อธิบายถึงทฤษฎีการจัดวางองคPประกอบร*วมสมัยส*วนใหญ*ในยุคหลังว*า ประยุกตP มาจากวิชาวาดเขียน คือ การทำงานออกแบบให8คล8ายกับภาพวาด โดยใช8วิธีเดียวกันกับ จิตรกรวาดภาพที่ต8องพยายามจัดวางองคPประกอบภาพให8สมบูรณPที่สุด ให8แสดงเรื่องราว อารมณP และบรรยากาศอย*างเด*นชัด และได8รวบรวมองคPประกอบที่สำคัญสำหรับนัก ออกแบบ และเป0นองคPประกอบต8องนำมาพิจารณาอันดับแรกๆ ก*อนเสมอ ได8แก*

จุดเด&น (Emphasis) การสร8างจุดแห*งความสนใจให8เกิดขึ้นในงานออกแบบ เป0นเรื่องสำคัญอันดับต8นๆ ทีท่ ุกตำรามักบอกว*า ต8องหาจุดเด*น หรือ “จุดโฟกัส” ก*อน เสมอ เพื่อเป0น เครื่องดึงดูดความสนใจ จะเป0น ณ จุดใดจุดหนึ่งในภาพที่ เห็น ว*า มี ความสำคัญ เพราะการที่มีจุดสนใจหลายจุด จะทำให8การออกแบบเกิดความล8มเหลว เพราะหาจุดเด*นชัดไม*ได8 วิธีการสร8างจุดโฟกัสจะมีหลายวิธีให8ได8เลือกใช8มากมาย ทั้งใช8 เทคนิคการเน8นด8วย สี เส3น ขนาด รูปร;าง ความคมชัด หรือแม3แต;สีสัน ที่โดดเด*น ขึ้นมาจากจุดอืน่

159

ตัวอย*างงานออกแบบโปสเตอรP งานแฟชั ่น การทำให8 เ ด* น ด8 ว ยสี จุ ด โฟกัสของภาพจึงเน8นไปที่นางแบบและ เสื้ อ ผ8 า ดั งนั ้น การวางองคP ประกอบ กราฟíกที่มีสีไว8ที่กึ่งกลางเพื่อเน8นความ สนใจไปที ่ ใบหน8 า ของนางแบบและ เสื้อผ8า (เมื่อลองมองภาพนี้สายตาจะ ถู กดึ ง ดู ด ไปที ่ กราฟí ก สี เ หลื อง และ เส8 น ตรงสี ข าวจะชี้ น ำสายตาไปยั ง รายละเอียดอื่น ๆ) Design by Matthew Metz

การสร8างจุดเด*นอีกวิธีหนึ่ง คือ การจัดตำแหน*งองคPประกอบของภาพ ในทางทฤษฎีไม*ใช*เพียงแค*จัดตำแหน*ง จุดแห*งความสนใจให8อยู*เพียงตรงกลาง ภาพเท*านั้น ตามหลักกฎสามส*วน (Rule of Thirds) ซึ่งคำนี้จะได8ยินคำนี้บ*อยใน งานถ*ายภาพ แต*ที่จริงแล8วกฎสามส*วน สามารถนำมาใช8 ก ั บงานออกแบบได8 เหมือนกัน โดยการวางองคPประกอบที่ เป0นจุดเด*นที่เราต8องการโฟกัส ไปอยู*ใน จุ ดของกฎสามส* วนก็ จะช* วยให8 งาน โดยรวมของเราดูเด*นขึ้น

160

กฎสามส*วน คือการแบ*งช*องในแนวตั้งและในแนวนอนเป0นสามส*วนเท*าๆ กัน โดย สร8างเส8น 4 เส8นขึ้นมาตามสัดส*วนที่กำหนด นิยมวางจุดเด*นหรือจุดสนใจไว8ตรงจุดตัด 9 ช*อง ไม*ว*าจะเป0นภาพแนวตั้ง แนวนอน หรือเป0นรูปสี่เหลี่ยมจัตุรสั ก็ตาม

ตัวอย*างงานออกแบบ ปกนิ ต ยสาร Pilot ที ่ ไ ด8 ใ ช8 หลั ก การกฎสามส* วน (Rule of Thirds) มีความสนใจอยู*ที่ ดวงตาของนางแบบตกอยู*ที่ จุดตัดมุมหนึ่งพอดี เพื่อเจาะจง ให8มองเข8ามายังผู8ชมในขณะที่ จุดศูนยPกลางนั้น ส*วนใหญ*จะ เป0นทีว่ *าง Design by Jason Mildren

161

ที ่ ว &าง (Space) หรื อบริเวณที่ เป0 นความว* างไม* ใช*ส * วนที ่เป0น รูปทรง หรือเนื้อหา ในการจัดองคPประกอบใดก็ตามถ8าปล*อยให8มีพื้นที่ ว*างมากและให8มีรูปทรงน8อย การจัดนั้นจะให8ความรู8สึกอ8างว8าง โดด เดี่ยว ในทางตรงกันข8าม ถ8าให8มีรูปทรงมากหรือเนื้อหามาก โดยไม* ปล*อยให8มีพื้นที่ว*างเลยก็จะให8ความรู8สึกอึดอัด คับแคบ ดังนั้นการจัด วางในอัตราส*วนที่พอเหมาะก็จะให8ความรู8สึกที่พอดีทำให8ได8ภาพที่ได8มี พื้นที่หายใจและมีสัดส*วนงดงาม ที่ว*างเหล*านั้นมีทั้งที่เป0น ที่ว;างลบ (Negative Space) และที่ว;างบวก (Positive Space) 2.1 พื ้ น ที ่ ว ; า งลบ (Negative Space) เป0 น การใช8 ท ี ่ ว * า ง (Space) บริเวณว*างโดยรอบวัตถุ (Object) หรือที่ว*างที่อยู*เฉย ๆ ซึ่งใน การออกแบบงานต* า ง ๆ จะต8 อ งคำนึ ง ถึง ช* ว งระยะระหว* า งพื ้น ที่ โดยรอบกับตัววัตถุให8มีความสัมพันธPกัน ซึ่งพื้นที่ที่ “ว*าง” นั้นจะช*วย ระบุขอบเขตของวัตถุต*าง ๆได8

162

ตั วอย; างการออกแบบ รู ป และพื ้ น ที ่ ว ; า งทางลบ (Negative Space) จากภาพเป0นการแสดง วิ ธ ี การออกแบบ คื อ เมื ่ อนำ ภาพมาใช8ในงานออกแบบ ถ8า ใช8ภาพทั้งภาพ ทำให8ดูอึดอัด เต็ มไปด8 วยเหรี ยญเต็ มพื ้ นที่ หากนำภาพมาใช8 ท ั ้ งหมดจะ วางองคP ประกอบอื ่ น ๆ เช* น ตั วอั กษร หั วข8 อหลั ก หั วข8 อ รอง ได8ลำบาก ในกรณีนี้ใช8วิธี ลบพื้นที่ออกไปครึ่งหนึ่ง แต*ให8 สังเกตที่รูปร*างของเหรียญที่ เป0 นรู ปร* างวงกลมเพื ่ อไม* ให8 ภาพเหรียญที่ถูกตัดแหว*งออก ไปจนน*าเกลียด การตัดทำให8 เกิดพื้นที่หายใจ และรูปร*าง ของเหรียญชี้ไปที่ตำแหน*งพาด หัวโดยอัตโนมัติ

163

2.2 พื้นที่ว;างทางบวก (Positive Space) เป0นที่ว*างของ รูปหรือเนื้อหา หรือที่ว*างทำงาน (Active Space) ซึ่งอาจเป0นรูปร*าง รูปทรงตัน หรือพื้นผิวง*ายๆ ในขนาดใดก็ได8 ที่ว*างนี้ไม*ได8หมายความ ถึงพื้นที่ว*างเปล*าโดยรอบในงานเพียงอย*างเดียว แต*หมายถึงรวมไปถึง พื้นที่ที่ไม*สำคัญ หรือพื้นหลังที่มีพื้นผิวด8วย หรืออาจเกิดจากการ ซ8อนทับกันของรูปร*าง ในการออกแบบงานกราฟíกที่ว*างจะเป0นตัวช*วย ในงานดูไม*หนักจนเกินไป และถ8าควบคุมพื้นที่ว*างนี้ให8ดี ๆ ที่ว*างก็จะ เป0นตัวที่ช*วยเสริมจุดเด*นให8เห็นได8ชัดเจนมากขึ้น

(Positive Space)

(Negative Space)

หากคุณเห็นแจกัน แสดงว*าพื้นที่สีขาวเป0นพื้นที่บวก พื้นที่สีน้ำ เงินกลายเป0นพื้นที่เชิงลบ หากคุณเห็นใบหน8า แสดงว*าพื้นที่สีดำเป0น พื้นที่บวก และพื้นที่สีขาวเป0นพื้นที่เชิงลบ พูดง*ายๆ ก็คือ พื้นที่เชิงบวกจะอธิบายได8ดีที่สุดว*าเป0นพื้นที่ใน ตัวแบบ รูป หรือตัววัตถุที่เราสนใจ พื้นที่เชิงลบคือพื้นที่รอบ ๆ ตัว แบบนั่นเอง

164

พื้นที่ว)างลบ

พื้นที่ว)างบวก

พื้นที่ว)างบวก พื้นที่ว)างบวก

ตัวอย;างเป[นการออกแบบพื้นที่ว;างทางบวก (Positive Space) โดยใช8ตัวอักษรที่ เป0นโลโก8มาจากชื่อย*อ พิมพPตัวใหญ*ตัวใหญ*บนภาพพื้นหลังสีแดง ทำการเจาะพื้นที่ขาว ตัวอักษร J และทำเป0นรูปในลักษณะบริเวณว*างที่ตัวของวัตถุกับพื้นผิวของตัวอักษร R เกิด พื้นที่ว*างทางบวก (Positive Space) ทำให8พื้นทีส่ บายตาและสวยงามขึ้น

165

ลำดับชั้น (Hierarchy) เป0นการสร8างลำดับความสำคัญ คือปôจจัยพื้นฐานของการ ออกแบบที่สามารถสร8างหรือทำลายงานออกแบบของเราได8 การลำดับความสำคัญเป0นการ จัดเรียงองคPประกอบในการออกแบบให8ผู8ชมมองเห็นความสำคัญหรือการเพิ่มระดับการ มองเห็นที่แตกต*างกัน 3 ลำดับ คือ ใหญ* กลาง เล็ก เป0นการเน8นย้ำความสำคัญทางสายตา โดยมีลำดับชั้นดังนี้ ลำดับแรก โดยทั่วไปตัวอักษร ภาพ หรือข8อมูลที่สำคัญที่สุด เป0นส*วนของ องคPประกอบทีต่ 8องการให8มองเห็นได8ง*ายที่สุดในการออกแบบ ลำดับที่สอง ช*วยจัดระเบียบการออกแบบของเป0นส*วน ๆ หรือจัดกลุ*มข8อมูล ที่เกี่ยวข8องกันและไม*ควรโดดเด*นเหมือนกับประเภทลำดับที่หนึ่ง แต*ควรจะนำผู8ชมไปยัง ส*วนต*าง ๆ ของการออกแบบ ลำดับที่สาม สำหรับรูปแบบข8อความที่มีปริมาณมากโดยทั่วไปคือเนื้อหาใน การออกแบบ อาจเป0นบทความทั้งสั้น ๆ คำอธิบายสั้น ๆ แต*ข8อคำนึงที่สำคัญสำหรับลำดับ นี้คือ การเลือกใช8ตัวอักษรทีอ่ *านได8ง*ายเนื่องจากขนาดตัวอักษรอาจค*อนข8างเล็ก

166

กรณีตัวอย*างผลงานการ ออกแบบโปสเตอรPงานคอนเสิรPต ที่เลือกใช8ภาพเป0นองคPประกอบ หลัก ซึ่งรูปภาพขนาดใหญ*เป0น องคPประกอบที่เด*นชัดที่สุด และ ให8ความสำคัญมากที่สุด ในขณะ ที่ตัวหนังสือที่เป0นชื่อของงานคือ องคPประอบลำดับที่ 2 มีขนาด กลาง และองคPประกอบลำดับ 3 มี ข นาดที ่ เ ล็ ก ที ่ ส ุ ด คื อ กลุ* ม รายละเอียด โดยให8ความสำคัญ กับพื้นที่ว*าง Design by Jessica Svendsen

กรณีตัวอย*างผลงานการ ออกแบบโปสเตอรPงานเทศกาล ภาพยนตรPของ Andrew Pfund ซึ่งดึงดูดสายตาแรกเห็นของคุณ ด8 ว ยคำว* า "ออกไปที ่ น ั ่ น (Out There)" ด8 ว ยตั ว อั ก ษรที ่ ใ หญ* ผสมอยู*กับรูปภาพเป0นลำดับชั้น ที ่ 1 โดยมี อ งคP ป ระกอบอื ่ น ๆ ลดลำดับชั้นลงไป Design by Andrew Pfund

167

ความสมดุ ล (Balance) เป0 น กฎข8 อ หนึ ่ ง ในทฤษฎี เ กสตั ล ทP (Gestalt) คื อการกำหนดและจั ดวางองคP ประกอบให8 มี น ้ ำหนั กและ ขนาด ในสัดส*วนที่เท*าๆ กันทั้งสองข8าง งานออกแบบที่ขาดความสมดุล จะก*อให8เกิดความรู8สึกภาพนั้นเอียงได8 ความสมดุลจะเกิดขึ้นได8ด8วยวัตถุ สองสิ่งขึ้นไป (ยกเว8นสมดุลตรงกลางที่มีองคPประกอบเพียงสิ่งเดียว) จะ สร8างความสมดุลเราต8องออกแบบให8มีสัดส*วนที่พอดีกัน อย*างเช*น สมดุลซ8ายขวา สมดุลบนล*าง ที่จะสร8างความรู8สึกได8ต*างกัน ซึ่งความ สมดุลมี 2 ลักษณะคือ มีทั้งแบบสมดุลแบบสมมาตร (Symmetrical) และสมดุลแบบอสมมาตร (Asymmetrical) ซึ่งเป0นกฎหนี่งในทฤษฎี เกสตัลทP

168

กรณี ศ ึ ก ษาตั ว อย* า งงาน ออกแบบโปสเตอรP ท ี ่ จ ั ด สมดุ ล องคPประกอบได8อย*างดีทั้งบนล*าง ซ8ายขวา การจัดวางองคPประกอบ แบบนี้ทำให8งานออกมาสวยงาม และดูสะอาด Design by Fanny Dallenne

กรณี ก ารจั ด สมดุ ล แบบ อสมมาตร ซึ่งภาพอาจจะดูหนัก ไปทางซ8ายมากหน*อย ตัวอย*าง ภาพใช8การกระจายองคPประกอบ ต*าง ๆ จัดวางให8ถ*วงน้ำหนักกัน โดยใช8องคPประกอบเล็ก ๆ คือ ตัวอักษร และเรือ มาถ*วงเพื่อให8 สมดุลกัน Design by Andrew Saeger

169

ความมีเอกภาพ (Unity) คือ การจัดวางองคPประกอบให8มีการ รวมตัวเป0นอันหนึ่งอันเดียวกัน ไม*กระจัดกระจาย งานออกแบบที่ขาด เอกภาพจะทำให8ผู8ดูเกิดความรู8สึกแตกแยกและไม*น*าสนใจ การสร8าง เอกภาพให8เกิดขึ้นกับงานออกแบบสามารถทีจ่ ะกระทำได8หลายวิธี เช*น เลือกใช8งานรูปภาพที่เป0นภาพชุดเดียวกัน หรือการใช8รูปร*าง รูปทรง ที่ เหมือนกันแม8ว*าตัวภาพจะมีลักษณะที่แตกต*างกัน แต*ถา8 ต8องการออกให8 เกิดเอกภาพอาจใช8พื้นรองรับภาพที่เหมือนกัน ความเอกภาพอาจสร8าง ได8จากการใช8สีวรรณะเดียวกันก็ได8 เป0นการทำงานที่เหมือนกับกฎของ ความคล8ายคลึง (Similarity) ในทฤษฎีเกสตัลทP

170

กรณีตัวอย*างภาพคือการ ใช8รูปร*างสามเหลี่ยมมาสร8างเป0น กรอบภาพส* ง เสริ ม ให8 ง านมี เอกภาพ แม8 ว * า ตั ว ภาพจะมี ลักษณะที่แตกต*างกัน และการ ปรับแต*งสีลงในภาพให8ไปในโทน เดี ย วกั น ทำให8 ง านออกแบบมี ความเป0นเอกภาพขึ้นมา Design by Feint

กรณีตัวอย*างการออกแบบ เว็บไซตPจะเป0นการนำภาพมาจัด วางเป0นชิ้น ๆ ในลักษณะการจัด เลยPเอาทPแบบมอนเดรียน สิ่งที่ทำ ให8งานออกแบบนี้เกิดเอกภาพ คื อ การเลื อ กใช8 ง านรู ป ภาพที่ เป0นภาพชุดสีโทนเดียวกัน เพื่อ ช*วยส*งเสริมกันและกัน การนำ ภาพมาจั ด วางแบบนี ้ เ ราจะได8 งานที่ดูเรียบง*าย ซึ่งการนำภาพ มาใช8กับเว็บไซตP เราจะต8องจับคู* ภาพที่ดูส*งเสริมกันและกัน เลือก โทนสีที่ดูเข8ากัน Design by Feint

171

ความขัดแยRง (contrast) เป0นการจัดวางส*วนประกอบของการ ออกแบบไม*ให8เกิดความซ้ำซากน*าเบื่อ เป0นการออกแบบโดยใช8ความ แตกต*างกันของส*วนประกอบได8แก* เส8น สี รูปร*าง รูปทรง ทิศทาง ขนาด สี และพื้นผิว เป0นเครื่องมือที่ช*วยไฮไลทP หรือซ*อนองคPประกอบของงาน ออกแบบของเราออกมาดูดี เช*น ถ8าเราเพิ่มความขัดแย8งให8กับองคPประกอบ อะไรสักอย*าง องคPประกอบนั้นก็จะดูเด*นชัดขึ้นมาได8ทันที

172

กรณีตัวอย*างโปสเตอรPงาน เทศกาลเต8 นระบำ ได8 ใช8 กราฟí ก สี ม * วงเป0 นองคP ประกอบที ่ ต ั ดกั บ พื้นหลัง และยังตัดกับตัวอักษรได8 เป0นอย*างดี Design by Thebault Julien

กรณี ต ั ว อย* า งถั ด มาเป0 น โปสเตอรP โ รงเรี ย นภาพยนตP ที่ ออกแบบมาด8 วยหารใช8 โทนสี ที่ ขัดแย8งกันระหว*างสีโทนร8อนและ สีโทนเย็น อีกทั้งยังใช8ความขัดแย8ง ของขนาดตัวอักษรขนาดเล็กตัด กับรูปภาพขนาดใหญ*ได8อย*างชาญ ฉลาด Design by Moderngraphs

173

จังหวะ (Rhythm) ลักษณะของจังหวะในการจัดภาพ ได8แก*การ วางองคPประกอบให8มีระยะตำแหน*งขององคPประกอบเป0นช*วง ๆ ซึ่งจะ ก*อให8เกิดความรู8สึกเคลื่อนไหวต*อเนื่อง และมีทิศทางแก*ผู8ดู จังหวะใน การงานออกแบบ แบ*งได8เป0น 3 ลักษณะ ได8แก* จังหวะชนิดซ้ำ จังหวะช*วงระยะที่เป0นแบบแผนคงที่ จังหวะชนิดช*วงระยะไม*คงที่ การจั ด วางแบบนี ้ เ ป0 น การนำองคP ป ระกอบที ่ เ ราใช8 ใ นงาน ออกแบบมาใช8ซ้ำในส*วนอื่น

174

กรณี ต ั ว อย* า งโปสเตอรP สนับสนุนกีฬาโอลิมปíกของผลิต ภัณฑPเสื้อผ8าลาคอส ใช8เส8นวางซ้ำ เป0นจังหวะห*างเท*า ๆ กัน รวมถึง การใช8องคPประกอบที่ทำซ้ำของ ภาพประกอบนักกีฬา ตลอดจน ความสัมพันธPของพื้นที่บวกและ ลบ Design by Mike Lemanski

Design by Cheil

ตัวอย*างการจัดองคPประกอบในลักษณะจังหวะชนิดช*วงระยะไม*คงที่ ของเครื่องเปúา โดยอาศัยมุมมอง Perspective ทำให8จังหวะเท*ากัน ในขณะเดียวกันได8สร8างจุดสนใจด8วย ทิศทางที่ชี้ไปเก8าอี้เพื่อสื่อสารแนวคิดเสียงจากรอบทิศทางของผลิตภัณฑP

175

Designs by Mauro De Donatis and Elizaveta Ukhabina.

ภาพการจัดหน8านิตยสารด8านบน เราจะเห็นว*ามีการใช8องคPประกอบที่คล8ายกัน นำมาใช8งานโดยวางจังหวะช*วงระยะที่เป0นแบบแผนคงที่ ต*างกันเพียงรูปภาพ เนื้อหา และสีการใช8องคPประกอบซ้ำยังช*วยให8ผู8อ*านเข8าใจข8อมูลได8เร็วขึ้นด8วย หลักการจัดองค-ประกอบภาพทั้งหมดที่กล8าวมานี้ ได<แก8 การเน<นจุดแห8ง ความสนใจ รูปแบบและที่ว8าง ขนาดและลำดับความสำคัญ สมดุลขององค-ประกอบ ความมีเอกภาพ ความขัดแย<ง และจังหวะ เปGนเพียงพื้นฐานการจัดองค-ประกอบ มิได<หมายความว8าจะให<ยึดปฏิบัติอย8างเคร8งครัด หรือถือเปGนหลักการตายตัวเสมอ แต8สำหรับผู<ที่เริ่มทำงานออกแบบใหม8 ๆ ควรที่จะนำไปปฏิบัติให<เข<าหลักเกณฑก8อน ต8อเมื่อได<ศึกษาและฝVกฝนจนเกิดความชำนาญแล<ว การที่จะพลิกแพลงหรือ สร<างสรรค-ให<ได<ภาพที่ดีกว8า แปลกตากว8าก็สามารถทำได<ง8ายขึ้น

176

Design Quiz (คำถามสร)างกราฟ-ก) 1

A

B

การจัดองค*ประกอบงาน Facebook Ad ชิ้นไหนดูดีกว8ากัน ให8ลองพิจารณาองคPประกอบต*าง ๆ ในภาพ ภาพ ตัวอักษร การจัด วาง ขนาด ความสัมพันธPในองคPประกอบต*าง ๆ และลองอธิบายเหตุผลว*า เพราะอะไร

177

Design Quiz (คำถามสร)างกราฟ-ก) 2

A

B

Instragram Ad ชิ้นไหนเหมาะสมกว8ากัน ให8 ล องพิ จ ารณาการจั ด วาง และลองอธิ บ าย เหตุผลว*าชิ้นที่เลือกนั้นดีกว*าอีกชิ้นอย*างไร

178

Design Quiz (คำถามสร)างกราฟ-ก) 3

A

ป<าย J Flag ชิ้นไหนเหมาะสมกว8ากัน ให8ล องพิจ ารณาการจัด วาง และ ลองอธิบายเหตุผลว*าชิ้นที่เลือกนั้นดีกว*าอีก ชิ้นอย*างไร

B

179

Design Quiz (คำถามสร)างกราฟ-ก) 4

A

B

ป<ายฟ?ตเนส ชิ้นไหนวางองค*ประกอบดีกว8ากัน ให8ลองพิจารณาการจัดวาง และลองอธิบายเหตุผลว*า ชิ้นที่เลือกนั้นดีกว*าอีกชิ้นอย*างไร

180

[1] Allan Paivio. (1974). Pictures and words in visual search. Memory & Cognition 1974, Vol. 2,No.3, 515-521 [2] Marian Bonsignore. Using Visual Language to Create the Case for Change. Retrieved December 21, 2020, from https://www.amanet.org/ articles/using-visual-language-to-create-the-case-for-change/ [3] Jerome Bruner’s. (1966). Jerome S. Bruner and the Process of Education The Encyclopedia of informalEducation. New York : University.

[4] Han Zei Zi book. Systems of Record Keeping - AP World History Retrieved December 26, 2020, from https://ancientcivilizationsapwh. weebly.com [5] โกวิท จิตบรรจง. (2542). การถKายภาพเพื่อการสื่อสาร (Photographic For Communication). สงขลา, สำนักพิมพPโปรแกรมวิชานิเทศศาสตรP คณะ วิทยาการจัดการ สถาบันราชภัฎสงขลา.

[6] Jonathan Baldwin, Lucienne Roberts. (2019). Visual Communication From Theory to Practice. London: Bloomsbury Publishing.

[7] Tara Hornor. (2020). 10 Beginner Tips for Unique Product Photography.

Retrieved December 28, 2020, from [8] Zena O'Connor. (2013). Gestalt Theories of Perception: The Impact in Contemporary Visual Communications Design. Article in Color Research & Application · December 2013 Volume 40, No 1.

[9] Ellen Lupton, E., Philips, J.C. (2015). Graphic design. The New Basics.

2nd ed., New York: Princeton, Architectural Press.

181

[10] Rubin, E. (1915). Synsoplevede figurer. Studier i psykologisk Analyse.

Første Del. Copenhagen and Christiania: Gyldendalske Boghandel, Nordisk Forlag.

[11] James Dean. Mighty Optical Illusions. Retrieved January 10, 2021, from https://www.moillusions.com/astronaut-skull-optical-illusion/ [12] Heider, G.M. (1977). More about Hull and Koffka. American Psychologist, 32, 383.

[13] Heygt, R. V. D., Peterhans, E., & Baumgartner, G. (1984). Illusory contours and cortical neuron responses. Science, 224, 1260-1262.

[14] Kate Evans. A Pro’s 4 Steps To Make Powerful Visual Metaphors.Retrieved January 10, 2021, from https://www.sparkol.com /en/Blog/A-pro-s-4-steps-to-make-powerful-visual-metaphors [15] Tim Collins. (2014) 100 Ways to Create a Great Ad. 19th ed., United Kingdom: Laurence King Publishing.

[16] สันติ ลอรัชวี. (2560) เอกสารประกอบเวิรmคช็อป Visual Literacy. กรุงเทพฯ: Practical Design Studio, 7 ต.ค.

[17] Mario Garcia. (2019). The Story: Volume II: Storytelling Kindle Edition Thane & Prose, October 15 [18] Ludwig Mies van der Rohe.(2008). Cited in Moises Puente Conversations with Mies van der Rohe. Barcelona: Editorial Gustavo Gili, SL. [19] พงศPธร หิรัญพฤกษP และชวณัฐ สุวรรณ. (2559). เครื่องหมายกับความหมาย. กรุงเทพฯ: คัดสรร ดีมาก จำกัด

182

[20] David Dabner, Sandra Stewart, Eric Zempol. (1992). Graphic design school The Principles and Practice of Graphic Design. New Jersey: John Wiley & Sons Inc. [21] Roy Paul Nelson. (1994). The Design of Advertising. 7 Sub edition, Madison, WCB Brown & Benchmark Pub. [22] Aaris Sherin. (2013). Design Elements, Using Images to Create Graphic Impact. Gloucester, MA, United States: Rockport Publishers Inc.

What is the golden ratio? What you need to know and how to use it https://www.canva.com/learn/what-is-the-golden-ratio/ How to Create Dynamic Compositions https://medium.com/thefuturishere/how-to-create-dynamic-compositions3c5cc3f00632 12 Visual Hierarchy Principles Every Non-Designer Needs to Know https://visme.co/blog/visual-hierarchy/ 20 Powerful Advertising Appeals You Can Use in Your Campaigns https://blog.creatopy.com/advertising-appeals/ 11 Rules of Composition for Non-Designers https://visme.co/blog/composition-rules-for-non-designers/ 10 rules of composition all designer https://www.canva.com/learn/visual-design-composition/

183

หนังสือเล*มนี้ได8นำบทความหลาย ๆ อันที่ผู8เขียนได8เขียน เผยแพร*ในเว็บไซตP และเพจมนุษยPออกแบบ มาเป0นตัวตั้งในการ เขียนแล8วเพิ่มเติมข8อมูล ความรู8ต*าง ๆ จากหนังสือต*างประเทศ เกี ่ ย วที่ ก ั บ การออกแบบและงานโฆษณา และเพิ ่ ม เติ ม จาก ประสบการณPการทำเว็บไซตP และการดูแลทำภาพเพื่อสื่อสารใน เพจต*าง ๆ ทีท่ ำให8คนแชรPและติดตามในหลาย ๆ เพจ ตลอด 10 ปç ที่ผ*านมา สำคัญที่สุด ขออุทิศหนังสือเล*มนี้ให8เป0นพลังกับทุกคนที่ กำลังเรียนการออกแบบ หรือกำลังหาพลังในการสร8างสรรคP ขอ เป0นบันไดเพื่อให8ท*านได8ดึงศักยภาพออกมาใช8อย*างเต็มที่ ทั้งนัก ออกแบบภาพ นักเล*าเรื่องด8วยภาพ นักสร8างภาพประกอบ นัก โฆษณา แม8กระทั่งเจ8าของธุรกิจเล็ก ๆ ที่ต8องการหาแนวคิดในการ ออกแบบภาพเพื่อทำการตลาด หรือส*งเสริมการขาย ให8ท*านได8ก8าว ไปสู*เป±าหมายอีกขั้น และเป0นส*วนเติมเต็มในสังคมต*อไป ถ8าอ*าน “สาร-ภาพ” แล8วยังสงสัย ลองลงมือออกแบบงาน จริง ๆ กันดีกว*า ติดขัดเกีย่ วกับการออกแบบเรื่องอะไรส*งงานที่ทำ มาซักถามได8ในเพจมนุษยPออกแบบได8เสมอ แค* “ศาสตรP” อย*างเดียวไม*พอ ต8องลงมือสร8าง “ศิลปá” ให8 ชัดเจนสื่อสารได8ด8วย ณัฐ จันทโรทัย

184

20 ปç ก*อนที่จะมาเป0นอาจารยPสอนหนังสือ ผู8เขียนได8อยู*ใน บริษัทเอเจนซี่โฆษณาหลายแห*ง ไต*เต8ามาตั้งแต*ฝúายศิลปá มาเป0น อารPตไดเรคเตอรP และครีเอทีพ แล8วลาออกมาสอนหนังสือ 16 ปç ระหว*างนั้นได8เปíดธุรกิจเล็ก ๆ ทำเว็บไซตPและเปíดเพจ Long young Run สร8 า งแบรนดP เสื ้ อผ8 ากี ฬาขึ ้ นมา ใช8พ ลั งของภาพสื ่อสารใน แคมเปญต*าง ๆ ภายในระยะเวลา 1 ปç เพจมีผู8ติดตามถึง 120,000 คน ในยุคที่เฟซบุก≥ จำกัดการเข8าถึงและการเห็น ซึ่งไม*ใช*เรื่องง*ายเลยที่จะ ทำให8คนติดตามเพจได8สักพันคนหมื่นคน นั่นเป0นพลังของการเล*า เรื่องด8วยภาพล8วน ๆ เมื่อมาปฏิบัติหน8าที่อาจารยPก็ได8ใช8วิธี “เล*าเรื่องด8วยภาพ” การเป0นอาจารยPทำให8ต8องทำสไลดPสอนทุกสัปดาหP เพื่อใช8บรรยาย ซึ่งเน8นการสอนเล*าเรื่องด8วยภาพ เพื่อให8ผู8เรียนจดจำและเข8าใจ เนื้อหาได8ง*าย