บทที่ 3

ก�รออกแบบภ�พสัญลักษณ์

(Symbol Design)

march-4-ai-book.indd 44 3/17/2014 7:09:35 AM

45ชั้นมัธยมศึกษาปีที่ 3

บทที่ 3ก�รออกแบบภ�พสัญลักษณ์ (Symbol Design)

3.1 ระบบป้�ยสัญลักษณ์

ระบบป้ายสัญลักษณ์มีความสัมพันธ์ในด้านการออกแบบสื่อสารเพื่อการใช้งานโดยเริ่มจากการขยายตัวของกลุม่คนจำานวนมากขึน้เกดิเปน็เมอืงใหญ่และขยายอาณาเขตกวา้งออกไประบบปา้ยสัญลักษณจ์งึเป็นกลไกสำาคญัในการจดัระเบียบเพือ่แกไ้ขปญัหาการสือ่สารระหวา่งมนษุยช์าตใิหเ้ปน็ระบบเดยีวกนัไดอ้ยา่งสะดวกและรวดเร็วมากที่สุด

จุดมุ่งหม�ยและหน้�ที่ของป้�ยสัญลักษณ์

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

รูปที่3.2ตัวอย่างป้ายบอกทาง[Online]Available:http://www.flick-river.com/places/United+States/Georgia/Adams+Crossroads/

รูปที่3.3ตัวอย่างป้ายบอกทาง[Online]Available:http://www.sumizen.com/page/3/

รูปที่3.1ตัวอย่างป้ายสัญลักษณ์[Online]Available:http://www.freepik.com/free-photo/interstate-

sign_655455.htm

march-4-ai-book.indd 45 3/17/2014 7:09:35 AM

46 การใช้งานโปรแกรมด้านคอมพิวเตอร์กราฟิกเบื้องต้น

หน้าที่หลักของป้ายสัญลักษณ์แบ่งตามประโยชน์ใช้สอยออกเป็น4ชนิดดังนี้ 1.บอกทิศทาง

2.ระบุชื่อสถานที่สิ่งของ

3.ให้ข้อมูลข่าวสาร

4.ควบคุมหรือบังคับ

รูปที่3.4ตัวอย่างป้ายบอกทิศทาง[Online]Available:http://www.freepik.com/free-photo/interstate-sign_655455.htm

รูปที่3.5ตัวอย่างป้ายระบุชื่อสถานที่สิ่งของ[Online]Available:http://www.coroflot.com/lonchair/Angelo-State-University

http://fromthedesert.mx/columnas/el-hombre-mas-encabronado-de-sonora/la-disneylandizacion/

รูปที่3.6ตัวอย่างป้ายให้ข้อมูลข่าวสาร[Online]Available:http://lifetoreset.wordpress.com/2011/08/08/hayao-miyazaki-ghibli-museum/

รูปที่3.7ตัวอย่างป้ายควบคุมหรือบังคับ[Online]Available:http://www.freepik.com/free-photo/interstate-sign_655455.htm

march-4-ai-book.indd 46 3/17/2014 7:09:37 AM

47ชั้นมัธยมศึกษาปีที่ 3

ประเภทของป้�ยสัญลักษณ์

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

3.2 หลักก�รออกแบบป้�ยสัญลักษณ์

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

รูปที่3.8ตัวอย่างป้ายสัญลักษณ์ที่ดี[Online]Available:http://www.freepik.com/free-photo/inter-

state-sign_655455.htm

march-4-ai-book.indd 47 3/17/2014 7:09:37 AM

48 การใช้งานโปรแกรมด้านคอมพิวเตอร์กราฟิกเบื้องต้น

3.3 ก�รปรับแต่งสี

จากบทที่ผ่านมา (บทที่ 2) เราได้เรียนเรื่องการสร้างภาพแล้ว ในบทนี้จะเรียนเรื่องการใช้สี การใช้สีในAdobeIllustratorจะมี2แบบคือแบบสีพื้นและแบบไล่สี(Gradient) ระบบสใีนโปรแกรมAdobeIllustratorหรอืโปรแกรมทำากราฟกิทัว่ไปจะแบง่ออกเปน็2ระบบสีหลักๆคือCMYKและRGB CMYKนัน้ใชส้ำาหรบังานพมิพต์า่งๆประกอบดว้ยสีนำา้เงนิ(Cyan)ชมพสูด(Magenta)เหลอืง(Yellow)และดำา(Key) RGBเป็นระบบสีที่ใช้กับเว็บไซต์โทรทัศน์อุปกรณ์สื่อสารต่างๆประกอบด้วยสีแดง(Red)เขียว(Green)และนำ้าเงิน(Blue)

1.Fillคือสีของวัตถุ2.Strokeคือสีเส้น3.Colorสีที่เราเลือกใส่ในวัตถุ4.GradientสีแบบGradientที่เราเลือกใส่ในวัตถุ5.Noneไม่ใส่สี(ใช้เวลาต้องการสร้างแต่เส้นหรือรูปแบบไม่มีเส้น)

เราสามารถคลิกสลับFillและStrokeเพื่อปรับแต่งสีได้หากเราไม่ใส่สีเส้นหรือสีด้านในให้เราคลิกNoneเพื่อปิดการลงสี

FillandStroke Fill Stroke

march-4-ai-book.indd 48 3/17/2014 7:09:38 AM

49ชั้นมัธยมศึกษาปีที่ 3

3.3.1 ก�รลงสีพื้น

การลงสีมี3วิธีคือ

วิธีที่1เลือกจากสวอชพาเลต(SwatchesPalette)ที่อยู่ทางด้านขวามือหากหาไม่เจอให้ไปที่Window>Swatchesเราสามารถคลิกเลือกสีได้จากหน้าต่างSwatch

วิธีใส่สี 1.เลือกเครื่องมือลูกศรดำา(SelectionTool)ที่ToolBoxหลังจากนั้นคลิกที่ตัวObjectที่เราต้องการจะใส่สี 2.ไปเลือกสีที่Swatchesเวลาเม้าส์เราไปชี้Cursorจะเปลี่ยนเป็นรูปมือให้กดเลือกสีจะเห็นว่าObjectของเราจะกลายเป็นสีตามที่เราเลือก

ก่อนจะลงสีให้เราสำารวจดูก่อนว่าเราจะลงสีตรงส่วนไหนลงสีเส้นหรือข้างในตัวที่เราต้องการจะลงจะต้องวางทับอยู่ด้านบนของอีกตัวหนึ่งตลอดเช่นหากเรากดที่Strokeจะเห็นได้ว่าตัวStrokeจะขึ้นมาอยู่ด้านบนแสดงว่าเราต้องการจะใส่สีเส้นหากเราต้องการใส่สีด้านในกดตัวFillแล้วFillจะสลับขึ้นมาอยู่ข้างบนแทน

march-4-ai-book.indd 49 3/17/2014 7:09:38 AM

50 การใช้งานโปรแกรมด้านคอมพิวเตอร์กราฟิกเบื้องต้น

วิธีที่2เลือกจากพาเนลคัลเลอร์(ColorPanel)ที่อยู่ทางด้านขวามือหากหาไม่เจอให้ไปที่Window>Colorการลงสีแบบนี้จะเป็นการผสมสีของโหมดสี(CMYKหรือRGBตามที่เราได้ตั้งค่าไว้)

วิธีใส่สี 1.เลือกเครื่องมือลูกศรดำา(SelectionTool)ที่ToolBoxหลังจากนั้นคลิกที่ตัวObjectที่เราต้องการจะใส่สี 2.ไปปรับสีที่Colorโดยกำาหนดค่าเปอร์เซนต์สีแต่ละสีตามที่เราต้องการ

วิธีที่3หน้าต่างColorPickerเรียกออกมาได้โดยดับเบิ้ลคลิกในช่องFillStrokeจะเกิดหน้าต่างColorPickerขึ้นมาให้เลือกสี

จากรูปแท่งสายรุ้งด้านข้างจะเป็นตัวเลือกเฉดของสีส่วนหน้าต่างใหญ่เป็นโทน(Tone)และเฉด(Shade)เราสามารถคลิกเลือกสีได้ตามความต้องการช่องสีเหลี่ยมซ้อนกันตรงกลางชั้นบนคือสีปัจจุบันที่เรากำาลังเลือกชั้นล่างคือสีก่อนหน้าที่เราเลือกไว้หากเราเลือกสีที่ถูกใจแล้วกดOKเพื่อยืนยันวัตถุของเราก็จะเปลี่ยนสีตามที่เราได้เลือกไว้

march-4-ai-book.indd 50 3/17/2014 7:09:38 AM

51ชั้นมัธยมศึกษาปีที่ 3

3.3.2 สีไล่ระดับ (Gradient Tool)

สีไล่ระดับนี้เป็นการไล่จากสีหนึ่งไปอีกสีหนึ่งเป็นการไล่สีแบบที่ทำาให้เกิดมิติมีทั้งการไล่สีจำานวน2สีหรือมากกว่านั้นก็ได้

วิธีการทำางานของGradientTool 1.คลิกเลือกวัตถุที่เราต้องการไล่สีจากนั้นคลิกปุ่มGradientที่Toolboxสีค่าแรกที่ปรากฏจะเป็นสีขาวไล่ไปสีดำาหรือหากเราเคยทำางานมาแล้วจะปรากฏเป็นสีล่าสุดที่เราได้ทำาไว้

2.เปิดพาเนลGradientเพื่อตั้งค่า

1.ช่องสำาหรับคลิกรูปแบบสำาเร็จรูปของสีGardient2.เลือกรูปแบบสีที่ต้องการใช้งานแบบเส้นตรง(Linear)แบบวงกลม(Radial) Linearคือการไล่แบบเส้นตรงจะไล่สีได้ทั้งแนวนอนแนวขวาง Radialคือการไล่แบบรัศมีเหมาะสำาหรับวัตถุทรงกลมหรือวัตถุท่ีเราต้องการสร้างความโค้งมน3.สำาหรับสลับทิศทางของการไล่เฉดสี4.กำาหนดองศาของการไล่เฉดสี5.แถบGardientสำาหรับไล่เฉดสีจุดสี่เหลี่ยมเล็กๆด้านบนคือจุดสำาหรับเลื่อนกำาหนดค่าความสมดุลในการไล่ระดับระหว่าเฉดสีและเครื่องมือด้านล่างคือจุดColorSliderสำาหรับกำาหนดเฉดสีที่มีอยู่ในแถบสีสามารถเพิ่มหรือลดสีและย้ายตำาแหน่งได้

ลงสีแบบธรรมดาลงสีแบบไล่เฉดสี

march-4-ai-book.indd 51 3/17/2014 7:09:38 AM

52 การใช้งานโปรแกรมด้านคอมพิวเตอร์กราฟิกเบื้องต้น

3.การเพิ่มสีในกล่องGradientให้คลิกเลือกสีจากหน้าต่างSwatchesคลิกค้างไว้แล้วลากมาปล่อยที่แถบGradientSliderและการลบสีออกจากแถบGradientSliderให้คลิกเลือกจุดColorSliderแล้วลากออก

4.เมือ่เราเลอืกสไีดต้ามทีต่อ้งการแลว้จะเหน็ไดว้า่สทีีเ่กดิขึน้อาจจะไมเ่รยีงตวักนัสวยงามใหเ้ราคลกิเลอืกGradentToolคลิกลงไปที่ภาพจะเกิดเครื่องมือปรับแต่งรายละเอียดสีให้เราลากตามทิศทางที่เราต้องการได้

march-4-ai-book.indd 52 3/17/2014 7:09:39 AM

53ชั้นมัธยมศึกษาปีที่ 3

3.4 Selection Tool

Selection Toolหรือท่ีเรียกง่ายๆว่าลูกศรดำาเป็นเคร่ืองมือท่ีเอาไว้จับตัววัตถุในงานใช้เลือกวัตถุหมุนวัตถุหรือเคล่ือนย้ายวัตถุ

หากเราได้สร้างวัตถุขึ้นมา2ชิ้นที่ซ้อนทับกันแล้วอยากจะเลือกรูปใดรูปหนึ่งเพื่อย้ายไปไว้ที่อื่นให้ใช้เครื่องมือSelectionToolเลือกวัตถุน้ันวัตถุท่ีโดนเลือกจะข้ึนเส้นLineและจุดAnchorเราก็จะสามารถเคล่ือนย้ายวัตถุได้

เราสามารถเลือกวัตถุชิ้นใหญ่ได้โดยการใช้ลูกศรดำาคลิกแล้วลากคลุมวัตถุทั้งหมดในกรณีที่วัตถุอยู่ห่างกันเราต้องการจะเลือกวัตถุหลายวัตถุพร้อมๆกันให้เราคลิกShiftค้างไว้แล้วเลือกวัตถุทีละภาพ

การหมุนและย่อขยายวัตถุให้เราคลิกเลือกวัตถุที่เราต้องการแล้วนำาเมาส์ไปวางไว้ที่มุมของเส้นที่ล้อมรอบวัตถุจะเห็นไว้ว่าเมาส์จะมีหน้าตาเปลี่ยนไปหากเราต้องการหมุนเมาส์จะเปลี่ยนไปเป็นรูปลูกศรโค้งส่วนหากเราจะขยายเมาส์จะเปลี่ยนเป็นรูปลูกศรเฉียง

Direct Selection Tool หรือท่ีเรียกง่ายๆว่าลูกศรขาวเป็นเคร่ืองมือท่ีเอาไว้จัดการกับเส้นAnchorท่ีเราสร้างข้ึนมาเราสามารถใช้ลูกศรขาวคลิกเลือกจุดAnchorเพ่ือแก้ไขดัดแปลงรูปทรงได้

Selectionใช้เลือกวัตถุต่างๆ

DirectSelectionใช้เลือกจุดAnchorที่อยู่ในวัตถุ

march-4-ai-book.indd 53 3/17/2014 7:09:39 AM

54 การใช้งานโปรแกรมด้านคอมพิวเตอร์กราฟิกเบื้องต้น

เอกส�รอ้�งอิง

ประเสริฐพิชยะสุนทร.ศิลปะและก�รออกแบบเบื้องต้น.พิมพ์ครั้งที่1.กรุงเทพมหานคร.สำานักพิมพ์แห่ง จุฬาลงกรณ์มหาวิทยาลัย,2555มาโนชกงกะนันท์.ศิลปะก�รออกแบบ.กรุงเทพมหานคร.โรงพิมพ์ไทยวัฒนาพาณิชย์ธารทิพย์เสรินทวัฒน์.ทัศนศิลป์:ก�รออกแบบพ�ณิชย์ศิลป์.กรุงเทพมหานคร.หลักไทช่างพิมพ์,2550วรพงศ์วรชาติอุดมพงศ์.บทคว�มรู้ท�งก�รออกแบบพ�ณิชย์ศิลป์ ออกแบบกร�ฟิก.พิมพ์ครั้งที่3กรุงเทพมหานคร.ศิลปาบรรณาการ,2540อารยะศรีกัลยาณบุตร.ก�รออกแบบสิ่งพิมพ์.กรุงเทพมหานคร.วิสคอมเซ็นเตอร์,2550AdobeCreativeTeam.AdobeIllustratorCS5:ClassroominaBook

march-4-ai-book.indd 54 3/17/2014 7:09:39 AM