Computer Graphics and Multimedia for Advertising and Public Relations

การออกแบบกราฟก (ฉบับปรับปรุง)

นุจรี บุรีรัตน สาขาวิชาเทคโนโลยีมัลติมีเดีย คณะเทคโนโลยีสื่อสารมวลชน มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

คำนำ ปจจุบันงานออกแบบกราฟกตาง ๆ ถูกสรางขึ้นเพื่อเปนสัญลักษณ ในการถายทอด ประสบการณทางความคิดสำหรับมนุษย เพื่อใชเปนสื่อกลางในการสื่อความหมายในการคิด และสื่อสารความหมายถึงกัน ซึ่งทำใหเกิดการเรียนรู ดวยคุณสมบัติที่ดีของงานกราฟก ทำให งานกราฟกมีบทบาทสำคัญในการลดขอจำกัดตาง ๆ ทำใหการสื่อความหมายตอกันของ มนุษยเปนไปอยางมีประสิทธิภาพ และดวยความเจริญกาวหนาทางวิชาการ และเทคโนโลยี จำนวนประชากรโลกที่ เพิ ่มขึ้น ความเปนโลกไรพรมแดน ความแตกตางระหวางบุ ค คล สิ่งเหลานี้เปนเหตุผลสำคัญที่ทำใหมนุษยจำเปนตองใหความสำคัญกับงานกราฟกมากขึ้น วัตถุประสงคของหนังสือการออกแบบกราฟกเลมนี้ ตองการนำเสนอถึงประเด็น ความรูเบื้องตนเกี่ยวกับการออกแบบ ความคิดสรางสรรคในงานออกแบบ การออกแบบ กราฟก เครือขายงานกราฟก พื้นฐานงานกราฟก การใชงานโปรแกรมกราฟก การจัดพิมพ และการนำเสนอ การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop และการฝกปฏิบ ั ติ การใชโปรแกรม Adobe Illustrator นอกจากนั้นผูเขียนตองการใหหนังสือการออกแบบ กราฟ ก เล ม นี้ เป น คู  ม ื อ ประกอบการเรีย นการสอนในรายวิ ช าคอมพิ ว เตอรก ราฟก และ มัลติมีเดียเพื่องานโฆษณาและประชาสัมพันธ ตามหลักสูตรระดับปริญญาตรี คณะเทคโนโลยี สื่อสารมวลชน มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร ผูเขียนหวังวาจะเปนประโยชนกับ นักศึกษา และผูที่สนใจเพื่อกระตุนใหเกิดความคิดสรางสรรค และแนวคิดในการออกแบบงาน กราฟ ก ตลอดจนได เ รี ย นรู  เ ทคนิ ค วิ ธ ี ก ารในการสร า งสรรค ส ื ่ อ เพื่ อ งานโฆษณาและ ประชาสัมพันธตาง ๆ สุดทายนี้ ผูเขียนขอขอบพระคุณทุกทาน ที่ใหการสนับสนุน และเปนกำลัง ใจในการ ทำหนังสือเลมนี้ขึ้นมา ขอใหหนังสือเลมนี้เปนวิทยาทานความรูแกผูที่สนใจ และสามารถ นำไปประยุกตใชใหเกิดประโยชนตอสังคมตอไป

นุจรี บุรีรัตน

สารบัญ หนา บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบ 1.1 ความหมายและความสำคัญของการออกแบบ 1.2 แนวคิดในการออกแบบ 1.3 หลักการออกแบบ 1.4 องคประกอบของการออกแบบ 1.5 บทสรุป

1 4 13 25 56

บทที่ 2 ความคิดสรางสรรคในงานออกแบบ 2.1 ความหมายของความคิดสรางสรรค 2.2 ความคิดสรางสรรคในงานออกแบบ 2.3 เทคนิควิธีคิดเบื้องตนเพื่อการออกแบบอยางเปนระบบ 2.4 กระบวนการคิดสรางสรรค 2.5 กระบวนการการคิดเชิงออกแบบ 2.6 บทสรุป

58 62 64 65 67 70

สารบัญ (ตอ) หนา บทที่ 3 การออกแบบกราฟก 3.1 ความหมายของการออกแบบกราฟก 3.2 คุณคาของงานออกแบบกราฟก 3.3 บรรทัดฐานการออกแบบกราฟก 3.4 ขั้นตอนการออกแบบกราฟก 3.5 การจัดวางองคประกอบในงานออกแบบกราฟก 3.6 บทสรุป บทที่ 4 เครือขายงานกราฟก 4.1 สื่อสิ่งพิมพ 4.2 ฟอนต 4.3 อินโฟกราฟก 4.4 เว็บไซต 4.5 มัลติมีเดีย 4.6 แอนิเมชัน 4.7 บทสรุป

73 75 76 78 83 91

93 100 107 118 130 131 144

สารบัญ (ตอ) หนา บทที่ 5 พื้นฐานงานกราฟก 5.1 ประเภทของภาพกราฟก 5.2 ไฟลภาพกราฟก 5.3 การกำหนดความละเอียดของภาพกราฟก 5.4 โหมดสีในงานกราฟก 5.5 ตัวอักษรในงานกราฟก 5.6 บทสรุป

148 152 160 164 165 173

บทที่ 6 การใชงานโปรแกรมกราฟก การจัดพิมพและการนำเสนอ 6.1 การใชงานโปรแกรม Adobe Photoshop 6.2 การใชงานโปรแกรม Adobe Illustrator 6.3 การจัดเตรียมไฟลในการจัดพิมพ 6.4 การจัดพิมพ 6.5 การนำเสนอแบบออนไลน 6.6 บทสรุป

174 181 187 198 205 219

สารบัญ (ตอ) หนา บทที่ 7 การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 7.1 การออกแบบโปสเตอรขนาด A4 (Poster Design) 7.2 การออกแบบปกเฟซบุกแฟนเพจ (FaceBook Fanpage Cover Design) 7.3 การออกแบบโฮมเพจ (Homepage Design) 7.4 การออกแบบแอนิเมชัน (Animation Design)

221 260 295 331

บทที่ 8 การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 8.1 การออกแบบโลโก (Logo Design) 8.2 การออกแบบนามบัตร (Business Card Design) 8.3 การออกแบบฉลากสินคา (Label Design) 8.4 การออกแบบโปสเตอรขนาด A3 (Poster Design)

350 373 401 429

บรรณานุกรม

455

ประวัติผูเขียน

458

สารบัญตาราง

ตารางที่ 1.1 สีและการสื่อความหมายทางจิตวิทยา

หนา 48

สารบัญภาพ ภาพที่ 1.1 การออกแบบดวยแนวคิดสไตลสมัยใหม 1.2 การออกแบบดวยแนวคิดสไตลหลังสมัยใหม 1.3 การออกแบบดวยแนวคิดสไตลมินิมัล (Minimal Style) 1.4 การออกแบบแนวคิดสไตลรวมสมัย (Contemporary) 1.5 การออกแบบดวยแนวคิดสไตลลอฟต (Loft) 1.6 การออกแบบแนวคิดสไตลวินเทจ (Vintage) 1.7 การออกแบบแนวคิดสไตลเรโทร (Retro) 1.8 ความสมดุลแบบซายขวาเหมือนกัน (Symmetrical Balance) 1.9 แบบซายขวาไมเหมือนกัน (Asymmetrical Balance) 1.10 ความสมดุลแบบรัศมี (Radial Balance) 1.11 การซ้ำโดยเปลี่ยนแปลงขนาดและการจัดวางองคประกอบตามทิ​ิศทาง ที่แตกตางกัน 1.12 การสรางความขัดแยงหรือตัดกัน 1.13 สวนเดนและสวนรอง 1.14 ภาพแมวแสดงความเคลื่อนไหว 1.15 การจัดใหรวมกลุม 1.16 การใชรูปทรงที่คุนเคยทามกลางรูปทรงที่แปลกตา 1.17 การจัดวางองคประกอบดวยการใชกฎสามสวน 1.18 ความกลมกลืน (ซาย) และความขัดแยง (ขวา) 1.19 จุด เสน 1.20 การวางตำแหนงของจุดและการเวนพื้นที่ระหวางจุด 1.21 เสนตรง เสนโคง เสนฟนปลา เสนคลื่น

หนา 6 7 8 9 10 11 12 14 14 15 16 17 18 19 20 21 23 24 25 26 27

สารบัญภาพ (ตอ) ภาพที่ 1.22 ระนาบที่ทำใหผูดูมีความรูสึก 1.23 รูปรางตามธรรมชาติ 1.24 รูปรางเรขาคณิต 1.25 รูปรางอิสระ 1.26 รูปทรงเรขาคณิต 1.27 รูปทรงธรรมชาติ 1.28 รูปทรงอิสระ 1.29 ปริมาตรของรูปทรงสามมิติ 1.30 ลักษณะของพื้นผิว 1.31 ขนาดตัวอักษร 1.32 วงจรสีในงานออกแบบ 1.33 สีที่เกิดจากแสง (RGB) 1.34 สีที่เกิดจากหมึกสีในการพิมพ (CMYK) 1.35 แมสี 1.36 สีขั้นที่ 1 (Primary Colors) 1.37 สีขั้นที่ 2 (Secondary Colors) 1.38 สีขั้นที่ 3 (Tertiary Colors) 1.39 น้ำหนักของสี (Value) 1.40 การเรียงลำดับความจัดของสี 1.41 คูสีที่อยูตรงขามกันในวงจรสี 1.42 คูสีขางเคียง 1.43 สีวรรณะอุนและสีวรรณะเย็น

หนา 29 30 30 31 32 33 34 35 36 37 38 39 39 40 40 41 42 42 43 44 45 46

สารบัญภาพ (ตอ) ภาพที่ 1.47 การออกแบบผลิตภัณฑโดยใชสีน้ำตาล 1.48 การออกแบบผลิตภัณฑโดยใชสีเขียว 1.49 การออกแบบผลิตภัณฑโดยใชสีสม 1.50 การออกแบบผลิตภัณฑโดยใชสีชมพู 1.51 การออกแบบผลิตภัณฑโดยใชสีมวง 1.52 การออกแบบผลิตภัณฑโดยใชสีแดง 1.53 การออกแบบผลิตภัณฑโดยใชสเี หลือง 2.1 ดร. เอ็ดเวิรด เด โบโน (Dr. Edward de Bono) 2.2 การเชื่อมโยงการทำงานของสมองซีกซายกับสมองซีกขวา 2.3 กระบวนการการคิดเชิงออกแบบ (Design Thinking Process) 3.1 บรรทัดฐานในงานออกแบบ 3.2 ขั้นตอนการทำงานออกแบบกราฟก 3.3 การวิเคราะหปญหา (Problem Analysis) 3.4 แนวคิดหลักของงานออกแบบกราฟก 3.5 การออกแบบแนวคิด (Conceptual Design) 3.6 กรณีศึกษาและคนหาขอมูล (Case Study and Data Finding) 3.7 การออกแบบภาพราง (Preliminary Design) 3.8 การออกแบบคอมพิวเตอรกราฟก (Computer Graphic Design) 3.9 การเผยแพรสื่อ (Publishing) 3.10 การออกแบบโดยใชมาตราสวน (Scale) 3.11 การออกแบบโดยใชกราฟกซ้ำ ๆ 3.12 การออกแบบโดยใชความสมดุลในความรูสึก

หนา 52 52 53 54 54 55 55 59 61 68 77 78 79 80 80 81 81 82 83 84 85 85

สารบัญภาพ (ตอ) ภาพที่

หนา

3.13 การออกแบบโดยใชความสมมาตร (Symmetry) 3.14 การออกแบบโดยใชความโปรงใส (Transparency) 3.15 การออกแบบวัตถุโดยใชกรอบ (Framing) 3.16 การออกแบบโดยใชกริด (Grid) 3.17 การออกแบบภาพโดยใชการเคลื่อนไหว (Movement) 4.1 สื่อสิ่งพิมพ 4.2 ขนาดของสื่อสิ่งพิมพ 4.3 ภาพเลยเอาทหยาบ (Rough Layout) 4.4 เลยเอาทสมบูรณ (Comprehensive Layout) 4.5 ตัวอยางงานออกแบบตัวอักษร 4.6 การสรางฟอนตจากเว็บไซต calligraphr.com 4.7 ดาวนโหลดฟอนตจากเว็บไซต F0nt.com 4.8 การดาวนโหลดฟอนต (Download Font) 4.9 การติดตั้งฟอนต (Install Font) 4.10 การนำฟอนตที่ติดตั้งไวนำไปใชงานบนโปรแกรม Adobe Illustrator 4.11 ตัวอยางอินโฟกราฟก 4.12 การสรางอินโฟกราฟกจากโปรแกรม Adobe Photoshop 4.13 ตัวอยางงานอินโฟกราฟก 4.14 การสรางอินโฟกราฟกบนเว็บไซต Canva.com 4.15 การสรางอินโฟกราฟกโดยการอัปโหลดขอมูลดวยตัวเอง

86 87 88 89 90 96 97 98 99 103 104 104 105 106 106 111 115 116 117 118

สารบัญภาพ (ตอ) ภาพที่

หนา

4.16 โครงสรางเว็บไซต 4.17 การสรางเว็บไซตดวยโปรแกรม Adobe Dreamweaver 4.18 การสรางเว็บไซตดวย WordPress 4.19 การออกแบบโฮมเพจ (Homepage) 4.20 สวนประกอบในการออกแบบเว็บเพจ 4.21 การเชื่อมโยง (Link) 4.22 การจดโดเมนเนม (Domain Name) 4.23 การลงทะเบียนขอพื้นที่เว็บไซต หรือเว็บโฮสติ้ง (Web Hosting) 4.24 การอัปโหลดเว็บไซตโดยใชโปรแกรม Filezilla 4.25 มัลติมีเดีย (Multimedia) 4.26 การทำกระดานภาพนิ่ง (Story Board) 4.27 การสรางงานมัลติมีเดียโดยใชโปรแกรม Adobe Premiere Pro 4.28 การสรางงานมัลติมีเดียโดยใชแอปพลิเคชัน KineMaster 4.29 การสรางงานมัลติมีเดียโดยใชแอปพลิเคชัน CapCut 4.30 งานออกแบบมัลติมีเดีย (Multimedia) 4.31 งานแอนิเมชัน (Animation) 5.1 พิกเซล (Pixel) 5.2 ภาพบิตแมพ (Bitmap)

121 122 123 124 125 126 127 128 129 130 132 134 135 136 137 141 149 150

สารบัญภาพ (ตอ) ภาพที่

หนา

5.3 ภาพเวกเตอร (Vector) 5.4 ภาพไฟล JPEG 5.5 ภาพไฟล GIF 5.6 ภาพไฟล PNG 5.7 ภาพไฟล BMP 5.8 ภาพไฟล TIFF 5.9 ภาพไฟล PSD 5.10 ภาพไฟล AI 5.11 การตั้งคาความละเอียด 72 พิกเซล/นิ้ว 5.12 การตั้งคาความละเอียดของภาพ 150 พิกเซล/นิ้ว 5.13 การตั้งคาความละเอียดของภาพ 300 พิกเซล/นิ้ว 5.14 โหมดสี Grayscale Mode (ซาย), RGB Mode (กลาง), CMYK Mode (ขวา) 5.15 ตัวอักษรในงานกราฟก 5.16 ตัวอักษรแบบหัวตัด 5.17 ตัวอยางงานออกแบบที่ใชตัวอักษรแบบหัวตัด 5.18 ตัวอักษรแบบดั้งเดิม 5.19 ตัวอยางงานออกแบบที่ใชตัวอักษรแบบดั้งเดิม

151 152 154 155 156 157 158 160 161 162 163 164 165 166 167 167 168

สารบัญภาพ (ตอ) ภาพที่

หนา

5.20 ตัวอักษรแบบลายมือ 5.21 ตัวอยางงานออกแบบที่ใชตัวอักษรแบบลายมือ 5.22 ตัวอักษรแบบประดิษฐ 5.23 ตัวอยางงานออกแบบที่ใชตัวอักษรแบบประดิษฐ 5.24 ระยะหางของตัวอักษร 6.1 สัญลักษณโปรแกรม Adobe Photoshop 6.2 หนาจอโปรแกรม Adobe Photoshop 6.3 เครื่องมือโปรแกรม Adobe Photoshop 6.4 เครื่องมือการใชงานโปรแกรม Adobe Illustrator 6.5 เครื่องมือโปรแกรม Illustrator 6.6 กำหนดคาสีโดยตรงโดยใชสีเหลืองบริสุทธิ์ 100% 6.7 ระยะหางจากขอบชิ้นงาน (Margin) 6.8 การตั้งคาระยะตัดตก (Bleed) 6.9 ตัวอยางไฟลแบบบิตแมปความละเอียด 72 PPI (ภาพซาย) และความละเอียด 300 PPI (ภาพขวา) 6.10 การตรวจสอบวาไฟลแบบบิตแมปมีความละเอียดไมนอยกวา 300 PPI 6.11 การแปลงฟอนตเปนเวกเตอร ในโปรแกรม Adobe Illustrator 6.12 การแปลงฟอนตเปนเวกเตอรในโปรแกรม Adobe Photoshop 6.13 การฝงไฟลภาพตาง ๆ ไวในไฟล AI 6.14 การพิมพออฟเซ็ท (Offset Printing) 6.15 การพิมพดิจิทัล (Digital Printing) 6.16 สีผงหมึก

169 169 170 171 172 174 175 177 182 184 188 189 190 191 192 193 194 195 198 199 201

สารบัญภาพ (ตอ) ภาพที่

หนา

6.17 การนำเสนอผลงานออนไลนบนเว็บไซต 6.18 เว็บไซต Flickr.com 6.19 ตัวอยางการเขาใชงานเว็บไซต issuu.com 6.20 การเลือกรูปแบบการเชื่อมตอ 6.21 การอัปโหลด (UPLOAD) 6.22 ชองทางที่จะเลือกไฟลเพื่ออัปโหลด 6.23 การเลือกไฟลเพื่ออัปโหลด 6.24 การกรอกรายละเอียด 6.25 ผลงานที่อัปโหลดเสร็จเรียบรอยแลว 6.26 เผยแพรผลงานบนเว็บไซต issuu.com 6.27 หนาจอการแสดงผลงานแบบเต็มหนาจอ 7.1.1 ตัวอยางการออกแบบโปสเตอร 7.1.2 การสรางชิ้นงานใหม 7.1.3 ชิ้นงานใหม 7.1.4 การเลือกสีพื้นหนา (Foreground Color) 7.1.5 การเลือกสีพื้นหลัง (Background Color) 7.1.6 การเลือกเครื่องมือการไลเฉดสี (Gradient Tool) 7.1.7 การเลือกรูปแบบการไลเฉดสี (Gradient Tool) 7.1.8 การเลือกทิศทางการไลเฉดสีแบบสะทอน (Reflected Gradient) 7.1.9 การไลเฉดสีจากบนลงลาง 7.1.10 ภาพที่ไดจากไลเฉดสีจากบนลงลาง

209 210 211 212 213 214 215 216 217 218 219 221 226 227 227 228 228 229 229 230 230

สารบัญภาพ (ตอ) ภาพที่

หนา

7.1.11 การเปดไฟลภาพ 7.1.12 การใชเครื่องมือเคลื่อนยาย 7.1.13 การยายภาพมาวางในชิ้นงาน 7.1.14 การปรับขนาดภาพใหเหมาะสม 7.1.15 การใชเครื่องมือเลือกพื้นที่โดยเลือกจากสีที่ใกลเคียงกัน 7.1.16 การเลือกบริเวณพื้นที่สีขาว 7.1.17 การลบบริเวณพื้นที่สีขาว 7.1.18 ภาพที่ไดจากการลบบริเวณพื้นที่สีขาว 7.1.19 การใชเครื่องมือเลือกพื้นที่ดวยการเลือกจากสีที่ใกลเคียงกัน 7.1.20 การใชเครื่องมือเลือกพื้นที่จากสีที่ใกลเคียงกัน 7.1.21 ภาพที่ไดจากการลบบริเวณพื้นที่สีขาวเพิ่มเติม 7.1.22 การหมุนภาพ 7.1.23 การหมุนรูปภาพ และการเพิ่มเลเยอรใหม 7.1.24 การสรางขอความแบบแนวนอน 7.1.25 การสรางขอความและกำหนดรูปแบบตัวอักษร 7.1.26 การหมุนขอความ 7.1.27 การสรางเอฟเฟกตตัวอักษร 7.1.28 เอฟเฟกตตัวอักษร 7.1.29 การสรางเลเยอรใหม 7.1.30 การสรางขอความแบบแนวนอน (Horizontal Type Tool) 7.1.31 การใสสีใหแกขอความ

231 231 232 232 233 233 234 234 235 235 236 236 237 237 238 238 239 239 240 240 241

สารบัญภาพ (ตอ) ภาพที่

หนา

7.1.32 การหมุนขอความ 7.1.33 การสรางเลเยอรใหม 7.1.34 การเปดไฟลภาพ 7.1.35 การยายภาพมาวางในชิ้นงาน 7.1.36 การยายภาพมาวางในชิ้นงาน 7.1.37 การปรับสีของภาพ 7.1.38 การเปลี่ยนสีภาพ 7.1.39 การสรางเลเยอรใหม 7.1.40 การสรางขอความแบบแนวนอน (Horizontal Type Tool) 7.1.41 การพิมพและการใสสีใหแกขอความ 7.1.42 การปรับขนาดขอความ 7.1.43 การสรางเลเยอรใหม 7.1.44 การสรางขอความแบบแนวนอน 7.1.45 การสรางขอความแบบแนวนอน 7.1.46 การสรางเลเยอรใหม 7.1.47 การสรางขอความแบบแนวนอน 7.1.48 การสรางขอความและกำหนดรูปแบบตัวอักษร 7.1.49 การเปดไฟลภาพที่ตองการ 7.1.50 การเลือกเครื่องมือเคลื่อนยาย 7.1.51 การยายภาพมาวางในชิ้นงาน 7.1.52 การสรางเลเยอรใหม

241 242 242 243 243 244 244 245 245 246 246 247 247 248 248 249 249 250 250 251 251

สารบัญภาพ (ตอ) ภาพที่

หนา

7.1.53 การสรางเลเยอรใหม 7.1.54 การวาดรูปทรงสี่เหลี่ยม 7.1.55 การสรางเลเยอรใหม 7.1.56 การสรางขอความแบบแนวนอน 7.1.57 การเลือกสีพื้นหนา (Foreground Color) 7.1.58 การสรางขอความและกำหนดรูปแบบตัวอักษร 7.1.59 การจัดวางขอความ 7.1.60 การบันทึกไฟลงานสำหรับแกไขได 7.1.61 การแปลงฟอนตเปนเวกเตอร 7.1.62 การล็อคขอความ 7.1.63 การสงออกไฟล (Export) 7.1.64 การเลือกรูปแบบไฟลงานที่ตองการสงออก 7.1.65 การสงออกไฟลงาน Ad-Pizza.jpg 7.1.66 ภาพโปสเตอร และตัวอยางการนำเสนอบนหนาจอ LCD 7.2.1 ตัวอยางการออกแบบปกเฟซบุกแฟนเพจ 7.2.2 การสรางชิ้นงานใหม 7.2.3 ชิ้นงานใหม 7.2.4 การเลือกสีพื้นหนา (Foreground Color) 7.2.5 การสรางเลเยอรใหม 7.2.6 การเลือกเครื่องมือเติมสี 7.2.7 การเติมสีใหแกวัตถุ

252 252 253 253 254 254 255 255 256 257 257 258 258 259 260 265 266 266 267 267 268

สารบัญภาพ (ตอ) ภาพที่

หนา

7.2.8 การสรางเลเยอรใหม 7.2.9 การเลือกเครื่องมือวาดรูปทรงสี่เหลี่ยม 7.2.10 การเลือกสีพื้นหนา (Foreground Color) 7.2.11 การกำหนดคาสีพื้นหนาและเสนขอบ 7.2.12 การวาดรูปทรงสี่เหลี่ยม 7.2.13 การสรางเลเยอรใหม 7.2.14 การเลือกสีพื้นหนา (Foreground Color) 7.2.15 การเลือกเครื่องมือวาดรูปทรงสี่เหลี่ยม 7.2.16 การกำหนดคาสีพื้นหนาและเสนขอบ 7.2.17 รูปทรงสี่เหลี่ยมสีมวง และสีเหลือง 7.2.18 การสรางเลเยอรใหม 7.2.19 การเปดไฟลภาพที่ตองการ 7.2.20 การเลือกเครื่องมือเคลื่อนยาย 7.2.21 การยายภาพมาวางในหนาชิ้นงาน 7.2.22 การสรางเลเยอรใหม 7.2.23 การสรางขอความแบบแนวนอน (Horizontal Type Tool) 7.2.24 การพิมพและการใสสีใหแกขอความ 7.2.25 การสรางเอฟเฟกตตัวอักษร 7.2.26 ตัวอักษรที่สรางเอฟเฟกต 7.2.27 การสรางเลเยอรใหม 7.2.28 การเปดไฟลภาพที่ตองการ

268 269 269 270 270 271 271 272 272 273 273 274 274 275 275 276 276 277 277 278 278

สารบัญภาพ (ตอ) ภาพที่

หนา

7.2.29 การเลือกเครื่องมือเคลื่อนยาย 7.2.30 การยายภาพมาวางในหนาชิ้นงาน 7.2.31 การสรางเลเยอรใหม 7.2.32 การสรางขอความและกำหนดรูปแบบตัวอักษร 7.2.33 การสรางเลเยอรใหม 7.2.34 การใชเครื่องมือสรางรูปทรงวงรี 7.2.35 การเลือกสีพื้นหนา (Foreground Color) 7.2.36 การเลือกเครื่องมือสรางเสนพาธตามการลากเมาสอิสระ 7.2.37 การปรับรูปทรงของวงกลมดวยเสนพาธ 7.2.38 ภาพวงกลมที่ปรับรูปทรงใหโคงมน 7.2.39 การคัดลอกเลเยอร (Duplicate Layer) 7.2.40 การบันทึกชื่อเลเยอรใหม 7.2.41 การเคลื่อนยายและหมุนภาพ 7.2.42 การยายเลเยอร 7.2.43 ภาพที่ไดจากการยายเลเยอร 7.2.44 การคัดลอกเลเยอร 7.2.45 การสรางเลเยอรใหม 7.2.46 การเปดไฟลภาพ 7.2.47 การสรางเลเยอรใหม 7.2.48 การกำหนดรูปแบบตัวอักษร 7.2.49 การสรางเลเยอรใหม

279 279 280 280 281 281 282 282 283 283 284 284 285 285 286 286 287 287 288 288 289

สารบัญภาพ (ตอ) ภาพที่

หนา

7.2.50 การใชเครื่องมือสรางรูปทรงอิสระ 7.2.51 การเลือกประเภทรูปทรงอิสระ 7.2.52 การกำหนดขนาดของรูปดอกไม 7.2.53 ภาพที่ไดจากการกำหนดขนาดรูปดอกไม 7.2.54 การบันทึกไฟลงานสำหรับแกไขได 7.2.55 การสงออกไฟลงาน (Export) 7.2.56 การเลือกรูปแบบไฟลงานที่ตองการนำไปใชเมื่อตองการสงออก 7.2.57 การสงออกไฟลงาน Cover FB.jpg 7.2.58 ผลงานการออกแบบปกเฟซบุกแฟนเพจ 7.2.59 ตัวอยางการนำปกเฟซบุกแฟนเพจไปใชงาน 7.3.1 ตัวอยางการออกแบบโฮมเพจ 7.3.2 การสรางชิ้นงานใหม 7.3.3 ชิ้นงานใหม 7.3.4 การเลือกสีพื้นหนา (Foreground Color) 7.3.5 การเลือกเครื่องมือเติมสี 7.3.6 การสรางเลเยอรใหม 7.3.7 การใชเครื่องมือสรางรูปทรงวงรี 7.3.8 การสรางรูปทรงวงรี 7.3.9 การปรับรูปทรงวงรี 7.3.10 การกำหนดคาสีพื้นหนาและเสนขอบ 7.3.11 การสรางเลเยอรใหม

289 290 290 291 291 292 293 293 294 294 295 299 300 300 301 301 302 302 303 303 304

สารบัญภาพ (ตอ) ภาพที่

หนา

7.3.12 การสรางขอความแบบแนวนอน 7.3.13 การใสสใี หแกขอความ 7.3.14 การคัดลอกเลเยอร (Duplicate Layer) 7.3.15 การบันทึกเลเยอรใหม 7.3.16 การใชเครื่องมือเคลื่อนยาย 7.3.17 การแกไขขอความ 7.3.18 การคัดลอกขอความเมนู 7.3.19 การสรางเลเยอรใหม 7.3.20 การเลือกเครื่องมือวาดรูปทรงสี่เหลี่ยม 7.3.21 การวาดรูปทรงสี่เหลี่ยมลอมรอบขอความ 7.3.22 การกำหนดคุณสมบัติของรูปทรงสี่เหลี่ยม 7.3.23 การเปลี่ยนสีขอความใหม 7.3.24 การเลื่อนเลเยอรขึ้น 7.3.25 การสรางเลเยอรใหม 7.3.26 การเปดไฟลภาพที่ตองการ 7.3.27 การเลือกเครื่องมือเคลื่อนยาย 7.3.28 การยายภาพมาวางในหนาชิ้นงาน 7.3.29 การสรางเลเยอรใหม 7.3.30 การเปดไฟลภาพที่ตองการ 7.3.31 การยายภาพมาวางในหนาชิ้นงาน 7.3.32 การสรางเอฟเฟกตใหแกวัตถุ

304 305 305 306 306 307 307 308 308 309 309 310 310 311 311 312 312 313 313 314 314

สารบัญภาพ (ตอ) ภาพที่

หนา

7.3.33 การสรางเลเยอรใหม 7.3.34 การสรางขอความแบบแนวนอน 7.3.35 การพิมพขอความ “Your Logo” 7.3.36 การสรางเลเยอรใหม 7.3.37 การใชเครื่องมือสรางรูปทรงหลายเหลี่ยม (Polygon Tool) 7.3.38 การเลือกสีพื้นหนา (Foreground Color) 7.3.39 การวาดรูปทรงหลายเหลี่ยม 7.3.40 การปรับรูปทรงของวงกลมดวยเสนพาธ 7.3.41 การสรางเลเยอรใหม 7.3.42 การยายภาพมาวางในหนาชิ้นงาน 7.3.43 การสรางเลเยอรใหม 7.3.44 การปรับสีของภาพ 7.3.45 การเปลี่ยนสีภาพ 7.3.46 การสรางเลเยอรใหม 7.3.47 การพิมพขอความ “www.youtsite.com” 7.3.48 การพิมพขอความ “LOVE DOG” 7.3.49 การใชเครื่องมือสรางรูปทรงวงรี 7.3.50 การเลือกสีพื้นหนา (Foreground Color) 7.3.51 การวาดรูปทรงกลม 7.3.52 การปรับรูปทรงของวงกลมดวยเสนพาธ 7.3.53 การปรับรูปทรงวงกลมดวยเสนพาธ และสรางเลเยอรใหม

315 315 316 316 317 317 318 318 319 319 320 320 321 321 322 322 323 323 324 324 325

สารบัญภาพ (ตอ) ภาพที่

หนา

7.3.54 การใชเครื่องมือสรางรูปทรงวงรี และกำหนดคุณสมบัติ 7.3.55 การคัดลอกเลเยอร (Duplicate Layer) 7.3.56 การสรางกลุมใหม (Create a new group) 7.3.57 ภาพที่ไดจากการรวมกลุม 7.3.58 การคัดลอกเลเยอรของกลุม (Group) 7.3.59 การบันทึกไฟลงานสำหรับแกไขได 7.3.60 การสงออกไฟลงาน (Export) 7.3.61 การเลือกรูปแบบไฟลงานที่ตองการนำไปใชเมื่อตองการสงออก 7.3.62 การสงออกไฟลงาน Homepage.jpg 7.3.63 ผลงานการออกแบบโฮมเพจ 7.3.64 ภาพโฮมเพจทีอ่ ัปโหลดขึ้นบนเว็บไซต 7.4.1 ภาพแมวที่วาดเพื่อนำมาสรางแอนิเมชัน (Animation) 7.4.2 การสรางชิ้นงานใหม 7.4.3 ชิ้นงานใหม 7.4.4 การเปดใชเครื่องมือไทมไลน 7.4.5 การเลือกเครื่องมือสรางเฟรมแอนิเมชัน (Create Frame Animation) 7.4.6 การเปดไฟลภาพ 7.4.7 การยายภาพ 7.4.8 ภาพที่ไดจากการยายมาวางไวในชิ้นงาน 7.4.9 การเปดไฟลภาพ 7.4.10 การยายภาพ

325 326 326 327 327 328 329 329 330 330 331 332 333 334 334 335 335 336 336 337 337

สารบัญภาพ (ตอ) ภาพที่

หนา

7.4.11 ภาพที่ไดจากการยายมาวางไวในชิ้นงาน 7.4.12 การเปดไฟลภาพ 7.4.13 การยายภาพ 7.4.14 ภาพที่ไดจากการยายมาวางไวในชิ้นงาน 7.4.15 การสรางเฟรมที่ 1 7.4.16 การคัดลอกเฟรมที่ 1 7.4.17 การสรางเฟรมที่ 2 7.4.18 การคัดลอกเฟรมที่ 2 7.4.19 การเลือกเวลาที่ตองการหนวงเฟรม 7.4.20 การกดปุมแสดงผลแอนิเมชัน (Play Animation) 7.4.21 การกดปุมหยุดแอนิเมชัน (Play Animation) 7.4.22 การบันทึกไฟลงานสำหรับแกไขได 7.4.23 การเลือกไฟลภาพแอนิเมชัน 7.4.24 การบันทึกไฟลงานแอนิเมชัน 7.4.25 การนำไฟลภาพแอนิเมชันไปเผยแพรบนเว็บไซต 7.4.26 การเลือกไฟลแอนิเมชัน 7.4.27 การอัปโหลดไฟลแอนิเมชัน 7.4.28 ขั้นตอนระหวางการอัปโหลดไฟล 7.4.29 การอัปโหลดไฟลแอนิเมชันเสร็จสิ้น 7.4.30 ตัวอยางการนำลิงกไปใชงาน 7.4.31 การดาวนโหลดไฟลประเภทตาง ๆ

338 338 339 339 340 340 341 341 342 342 343 343 344 345 345 346 346 347 347 348 348

สารบัญภาพ (ตอ) ภาพที่

หนา

7.4.32 การนำแอนิเมชันไปใชบนเว็บไซต 7.4.33 การออกแบบแอนิเมชันทีแ่ สดงผลบนอินเทอรเน็ต 8.1.1 ภาพโลโกฟารม LOVE ORGANIC ที่นำไปติดบนวัสดุตาง ๆ 8.1.2 การสรางชิ้นงานใหม 8.1.3 ชิ้นงานใหม 8.1.4 การแสดงตาราง 8.1.5 การใชเครื่องมือสรางรูปทรงวงรี (Ellipse Tool) 8.1.6 การกำหนดสีเสนขอบ (Stroke) 8.1.7 การวาดรูปเสนรอบวงกลม 8.1.8 เสนรอบวงกลมสีเขียว และการสรางเลเยอรใหม 8.1.9 การคัดลอก และยายภาพวงกลม 8.1.10 การปรับขนาดภาพวงกลม 8.1.11 ภาพวงกลมที่ไดจากการปรับขนาด และการสรางเลเยอรใหม 8.1.12 การใชเครื่องมือปากกาวาดเสนอิสระ (PenTool) 8.1.13 การวาดเสนอิสระ 8.1.14 การเครื่องมือปรับเสนพาธอยางอิสระ (Anchor Point Tool) 8.1.15 การปรับเสนพาธ 8.1.16 การใชเครื่องมือพิมพขอความตามเสนพาธ (Type on a Path Tool) 8.1.17 การพิมพขอความ “LOVE ORGANIC” 8.1.18 การกำหนดรูปแบบขอความ และการสรางเลเยอรใหม 8.1.19 การพิมพขอความและกำหนดรูปแบบตัวอักษร

349 349 350 355 356 356 357 357 358 358 359 359 360 360 361 361 362 362 363 363 364

สารบัญภาพ (ตอ) ภาพที่

หนา

8.1.20 ขอความที่กำหนดรูปแบบแลว และการสรางเลเยอรใหม 8.1.21 การใชเครื่องมือวาดรูปทรงกลม (Ellipse Tool) 8.1.22 การวาดรูปทรงกลมและกำหนดรูปแบบ 8.1.23 การใชเครื่องมือวาดเสนตรง (Line Segment Tool) 8.1.24 การวาดเสนตรง 8.1.25 การวาดเสนตรง และวางในแนวเฉียง 8.1.26 การซอนเสนตาราง (Hide Grid) 8.1.27 การบันทึกไฟลในกรณีที่ตองการแกไข 8.1.28 การบันทึกไฟลนามสกุล .ai 8.1.29 การบันทึกไฟลในกรณีที่ตองการแกไขภายหลัง 8.1.30 การแปลงฟอนตเปนเวกเตอร 8.1.31 การรวมกลุม (Group) 8.1.32 การสงออกไฟลงาน (Export) 8.1.33 การเลือกรูปแบบไฟลงานที่ตองการนำไปใชเมื่อตองการสงออก 8.1.34 การกำหนดคาความละเอียด (Resolution) 8.1.35 ผลงานการออกแบบโลโก และตัวอยางการนำไปใชงาน 8.2.1 ภาพนามบัตรที่เผยแพรในรูปแบบสื่อสิ่งพิมพ 8.2.2 การสรางชิ้นงานใหม 8.2.3 ชิ้นงานใหม 8.2.4 การใชเครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectangle Tool) 8.2.5 การเติมสี (Fill)

364 365 365 366 366 367 367 368 368 369 370 370 371 371 372 372 373 381 382 382 383

สารบัญภาพ (ตอ) ภาพที่

หนา

8.2.6 การวาดรูปสี่เหลี่ยม 8.2.7 การเพิ่มเลเยอรใหม 8.2.8 การใชเครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectangle Tool) 8.2.9 การเติมสี (Fill) 8.2.10 รูปสี่เหลี่ยมผืนผาที่ทำการวาดเสร็จแลว 8.2.11 การคัดลอกรูปสี่เหลี่ยมผืนผา 8.2.12 การคัดลอกรูปสี่เหลี่ยมผืนผาเสร็จแลว และการเติมสี (Fill) 8.2.13 การเพิ่มเลเยอรใหม 8.2.14 การใชเครื่องมือดูดสี (Eyedropper Tool) 8.2.15 การใชเครื่องมือปากกา (Pen Tool) 8.2.16 การใชปากกาวาดเสนรูปภาพที่ตองการ 8.2.17 การใชเครื่องมือเพิ่มจุดแองเคอรและแกไขจุด (Anchor Point Tool) 8.2.18 ตัวอยางการปรับจุดของเสนพาธใหมีความโคงมน 8.2.19 การเพิ่มเลเยอรใหม 8.2.20 การพิมพขอความ และกำหนดสีใหแกขอความ 8.2.21 ภาพที่ไดจากการพิมพขอความ และกำหนดสีใหแกขอความ 8.2.22 การกำหนดสีขอความบางสวน 8.2.23 การคัดลอกรูปทรงที่มีลักษณะคลายอักษร A 8.2.24 การเติมสี (Fill) 8.2.25 การคัดลอกขอความ 8.2.26 การเปลี่ยนสีขอความ

383 384 384 385 385 386 387 387 387 388 388 389 389 390 390 391 391 392 392 393 393

สารบัญภาพ (ตอ) ภาพที่

หนา

8.2.27 การสราง QR CODE 8.2.28 การปรับขนาดและวาง QR CODE ในตำแหนงที่ตองการ 8.2.29 การสรางเลเยอรใหม 8.2.30 การพิมพขอความและกำหนดสี 8.2.31 ภาพที่ไดจากการพิมพขอความและกำหนดสีใหแกขอความ 8.2.32 การบันทึกไฟลนามสกุล .ai 8.2.33 การบันทึกไฟลงานสำหรับแกไขได 8.2.34 การจัดการฟอนตเปนภาพเวกเตอร 8.2.35 การสงออกไฟลงาน (Export) 8.2.36 การเลือกรูปแบบไฟลงานที่ตองการนำไปใชเมื่อตองการสงออก 8.2.37 การกำหนดโหมดสีในการสงออกไฟล 8.2.38 ผลงานการออกแบบนามบัตร และตัวอยางการนำไปใชงาน 8.3.1 ภาพฉลากสินคาที่นำไปติดลงบนแกวน้ำพลาสติก 8.3.2 การสรางเอกสารใหม 8.3.3 การสรางชิ้นงานใหม 8.3.4 การใชเครื่องมือสรางรูปทรงวงรี 8.3.5 การเลือกสีพื้นหนา (Forground Color) 8.3.6 การสรางเลเยอรใหม 8.3.7 การใชเครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectangle Tool) 8.3.8 การวาดรูปทรงสี่เหลี่ยม และสรางเลเยอรใหม 8.3.9 การคัดลอกวงกลม

394 394 395 395 396 396 397 398 398 399 399 400 401 404 405 405 406 406 407 407 408

สารบัญภาพ (ตอ) ภาพที่

หนา

8.3.10 การเปลี่ยนสีวงกลม 8.3.11 การทำกรอบวงกลมสีขาว 8.3.12 การยายกรอบวงกลมสีขาว 8.3.13 การลบสวนสวนเกินสีเหลือง 8.3.14 การลบสวนเกินสีเหลือง และการเพิ่มเลเยอรใหม 8.3.15 การใชเครื่องมือพิมพขอความ (Type Tool) 8.3.16 การพิมพขอความและการกำหนดสีตัวอักษร 8.3.17 การสรางเลเยอรใหม 8.3.18 การเลือกเครื่องมือพิมพขอความ 8.3.19 การพิมพขอความและการกำหนดสีตัวอักษร 8.3.20 การสรางเอฟเฟกตใหแกขอความ 8.3.21 การสรางเอฟเฟกตใหแกขอความ และการสรางเลเยอรใหม 8.3.22 การพิมพขอความสรางเอฟเฟกต และการสรางเลเยอรใหม 8.3.23 การใชเครื่องมือสรางรูปวงรี (Ellipse Tool) 8.3.24 การวาดรูปวงกลมและกำหนดสี 8.3.25 การสรางเลเยอรใหม 8.3.26 การใชเครื่องมือสรางรูปวงรี (Ellipse Tool) 8.3.27 การวาดรูปวงรีและเติมสี 8.3.28 การใชเครื่องมือยางลบ (Eraser Tool) 8.3.29 การลบรูปวงรี 8.3.30 การลบรูปวงรี และการสรางเลเยอรใหม

408 409 409 410 410 411 411 412 412 413 413 414 414 415 415 416 416 417 417 418 418

สารบัญภาพ (ตอ) ภาพที่

หนา

8.3.31 การใชเครื่องมือแปรงทาสี (Paintbrush Tool) 8.3.32 การใชเครื่องมือแปรงทาสีวาดรูปหูถวยกาแฟ 8.3.33 การสรางเลเยอรใหม 8.3.34 การใชเครื่องมือแปรงทาสี (Paintbrush Tool) 8.3.35 การใชแปรงทาสีลากเมาสเปนเสนหยัก 8.3.36 การคัดลอกภาพ และการสรางเลเยอรใหม 8.3.37 การใชเครื่องมือพิมพขอความ (Type Tool) 8.3.38 การพิมพขอความและการเติมสี 8.3.39 การพิมพขอความ กำหนดสี และจัดวางใหสวยงาม 8.3.40 การบันทึกไฟลนามสกุล .ai 8.3.41 การบันทึกไฟลงานสำหรับแกไขได 8.3.42 การจัดการฟอนตเปนภาพเวกเตอร 8.3.43 การสงออกไฟลงาน (Export) 8.3.44 การบันทึกไฟลนามสกุล .jpg 8.3.45 การเลือกประเภทโหมดสีในการสงออกไฟล 8.3.46 ผลงานการออกแบบฉลากสินคา และตัวอยางการนำไปใชงาน 8.4.1 ภาพโปสเตอรสินคาที่นำไปใชงาน 8.4.2 การสรางชิ้นงานใหม 8.4.4 การเปดไฟลภาพ 8.4.5 การยายภาพ 8.4.6 การยายภาพมาวางไวในชิ้นงาน

419 419 420 420 421 421 422 422 423 423 424 425 426 426 427 428 429 431 432 433 433

สารบัญภาพ (ตอ) ภาพที่

หนา

8.4.7 การสรางเลเยอรใหม 8.4.8 การสรางเลเยอรใหม 8.4.9 การใชเครื่องมือเคลื่อนยาย 8.4.10 การใชเครื่องมือสรางรูปวงรี (Ellipse Tool) 8.4.11 การคำสั่งที่ใชในการตัดภาพเฉพาะสวน (Make Clipping Mask) 8.4.12 ภาพที่ไดจากการตัดภาพเฉพาะสวน (Make Clipping Mask) 8.4.13 การสรางเลเยอรใหม 8.4.14 การเปดไฟลภาพที่ตองการ 8.4.15 การคำสั่งที่ใชในการตัดภาพเฉพาะสวน (Make Clipping Mask) 8.4.16 ภาพที่ไดจากการตัดภาพเฉพาะสวน (Make Clipping Mask) 8.4.17 การเปดไฟลภาพที่ตองการ 8.4.18 การคำสั่งที่ใชในการตัดภาพเฉพาะสวน (Make Clipping Mask) 8.4.19 ภาพที่ไดจากการตัดภาพ 3 ภาพ 8.4.20 การใชเครื่องมือวาดรูปทรงสี่เหลี่ยม 8.4.21 การคำสั่งที่ใชในการตัดภาพเฉพาะสวน (Make Clipping Mask) 8.4.22 ภาพที่ไดจากการตัดภาพเฉพาะสวน และการสรางเลเยอรใหม 8.4.23 การพิมพขอความและกำหนดรูปแบบขอความ 8.4.24 การสรางเอฟเฟกตตัวอักษร 8.4.25 ภาพที่ไดจากการสรางเอฟเฟกตตัวอักษร และการสรางเลเยอรใหม 8.4.26 การสรางเอฟเฟกตตัวอักษร 8.4.27 การกำหนดรูปแบบตัวอักษร และสรางเลเยอรใหม

434 434 435 435 436 436 437 437 438 438 439 439 440 440 441 441 442 442 443 443 444

สารบัญภาพ (ตอ) ภาพที่

หนา

8.4.28 การใชเครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectagle Tool) 8.4.29 การกำหนดขนาดและเลือกสีใหแกกรอบสี่เหลี่ยม 8.4.30 ภาพกรอบสี่เหลี่ยม และการสรางเลเยอรใหม 8.4.31 การพิมพขอความและกำหนดรูปแบบตัวอักษร 8.4.32 การเปดภาพโทรศัพทแลวนำมาวางในหนาชิ้นงาน 8.4.33 การสรางเลเยอรใหม และการใชเครื่องมือพิมพขอความ 8.4.34 การสรางเลเยอรใหม 8.4.35 เปดภาพโลโกที่เตรียมไวแลวนำมาใสในหนาชิ้นงาน 8.4.36 การสรางเลเยอรใหม 8.4.37 การพิมพขอความชื่อราน “Zap” 8.4.38 การพิมพขอความและกำหนดรูปแบบ 8.4.39 การบันทึกไฟลนามสกุล .ai 8.4.40 การบันทึกไฟลงานสำหรับแกไขได 8.4.41 การจัดการฟอนตเปนภาพเวกเตอร 8.4.42 การสงออกไฟลงาน (Export) 8.4.43 การเลือกรูปแบบไฟลงานที่ตองการนำไปใชเมื่อตองการสงออก 8.4.44 การกำหนดรายละเอียดใหแกภาพที่ตองการสงออก 8.4.45 ผลงานการออกแบบโปสเตอร และตัวอยางการนำไปใชงาน

444 445 445 446 446 447 447 448 448 449 449 450 450 451 452 452 453 454

ความรู้เบือ้ งต้นเกี่ยวกับการออกแบบ การออกแบบเปนความพยายามของมนุษยในการสรางสรรคสิ่งใหมหรือปรับปรุงสิ่งที่มี อยูเดิมใหมีความเหมาะสมมากขึ้น เพื่อแกปญหาและตอบสนองความตองการทั้งดานความงาม และประโยชนใชสอย มีการวางแผนเปนขั้นตอน และเลือกใชวัสดุ วิธีการเพื่อทำตามสิ่งที่ตองการ นั้นใหสอดคลองกับลักษณะรูปแบบ และคุณสมบัติของวัสดุแตละชนิดตามความคิดสรางสรรค การออกแบบแฝงอยูในงานทุกประเภท ทั้งนี้เพราะการออกแบบเปนกระบวนการในการแกปญหา ดวยความคิดสรางสรรคของมนุษย การออกแบบมีวิวัฒนาการอยางตอเนื่องและมีอิทธิพลตอการ ใชชีวิตประจำวันของมนุษย เกี่ยวของกับทุกเพศ ทุกวัย ทุกอาชีพ เพราะทุกคนตางมีความรักสวย รักงามในรูปแบบของตนเอง เชน การออกแบบการแตงกายใหเหมาะสมกับโอกาสและสถานที่ เปนสิ่งที่แตละคนตางเลือกสรรอยางรอบคอบใหเขากับบุคลิกและสรีระของตน รวมไปถึงการ ออกแบบสถาปตยกรรม เครื่องอุปโภค บริโภค รวมทั้งสื่อโฆษณาและประชาสัมพันธตาง ๆ ตอง มีการออกแบบเพื่อใหเหมาะสมกับผูใช และประโยชนตอการใชงาน มนุษยใหความสำคัญในดาน การออกแบบ จะเห็นไดวาการออกแบบและศิลปะนั้นเปนสิ่งที่ควบคู อยูกับความสุนทรียะของ มนุษยตลอดมา 1.1 ความหมายและความสำคัญของการออกแบบ การออกแบบนั้นมีความสำคัญตอวิถีชีวิตมนุษยเปนอยางมากแมวาปจจุบันจะมีเครื่องมือ ที่มีประสิทธิภาพสำหรับการออกแบบดวยคอมพิวเตอร และโปรแกรมตาง ๆ ที่สามารถสรางสรรค งานออกแบบได แตไมไดหมายความวาผลงานออกแบบ จะมีประสิทธิภาพหรือสวยงามเสมอไป อยางไรก็ตามคอมพิวเตอรเปนเพียงเครื่องมือที่ชวยในการออกแบบ ตองอาศัยนักออกแบบเปน ผูสรางสรรคผลงาน ดังนั้นนักออกแบบที่ดีจึงควรมีความรูเบื้องตนเกี่ยวกับการออกแบบ ซึ่งเปน พื ้ น ฐานสำคั ญ เพื ่ อ ต อ ยอดไปสู  ก ารออกแบบผลงานต า ง ๆ ที่ ม ี ค วามซั บ ซ อ นมาก ขึ้นโดยมีสาระสำคัญ ดังนี้

การออกแบบกราฟก 2

1.1.1 ความหมายของการออกแบบ มาโนช กงกะนั น ท (2549) ได ใ ห ค วามหมายเกี ่ ย วกั บ การออกแบบ หมายถึ ง กระบวนการสรางสรรคประเภทหนึ่ง ของมนุษย โดยมีทัศนธาตุ หรือองคประกอบศิลป ซึ่ง หมายถึง สวนประกอบตาง ๆ ที่สำคัญ ในงานศิลปะหรือทัศนศิลป ไดแก จุด เสน สี พื้นผิว แสง เงา เป น องค ป ระกอบ และใช ท ฤษฎี ต  า ง ๆ เป น แนวทางการดำเนิ น งาน โดยการใช ว ั ส ดุ หลากหลายชนิดมาเปนวัตถุดิบในการนำมาสรางสรรคเปนผลงานที่มีคุณคาและเปนประโยชน ตอไป โดยที่นักออกแบบจะตองมีขั้นตอนในการปฏิบัติงาน ตลอดจนกระบวนการสรางสรรค ผลงานการออกแบบจะเกิดขึ้นเพื่อตอบสนองความตองการในการดำรงชีวิตประจำวันใหมีความ สะดวก สบายและมี ความงาม เพื่อแกปญ หาที ่เ กิ ด ขึ้น ทางกายภาพหรือ เพื่ อพัฒ นาวิถ ี ช ี วิ ต ของมนุษยใหมีคุณภาพที่สูงกวาเดิม อุ ด มศั ก ดิ ์ สาริ บ ุ ต ร (2550) ได ใ ห ค วามหมายเกี ่ ย วกั บ การออกแบบ หมายถึ ง การรวบรวม หรือการจัดองคประกอบที่เปน 2 มิติ และ 3 มิติ เขาดวยกันอยางมีหลักเกณฑ ในการนำองคประกอบของการออกแบบจัดรวมกัน ผูออกแบบจะตองคำนึงถึงประโยชนใชสอย และความงาม อันเปนคุณลักษณะที่ควรมีของการออกแบบ การออกแบบเปนศิลปะของมนุษย เนื่องจากเปนการสรางคานิยมทางความงาม และตองสนองคุณประโยชนทางกายภาพใหแก มนุษย จรุ ง ยศ อรั ณ ยะนาค (2560) ได ใ ห ค วามหมายเกี ่ ย วกั บ การออกแบบ หมายถึ ง การวางแผนกระบวนการคิดเกี่ยวกับการปฏิบัตงิ านตาง ๆ ใหบรรลุเปาหมายตามที่กำหนดไว ผูที่ วางแผนดีจะลดเวลาและพลังงานในการบรรลุเปาหมาย โดยมีการกำหนดความคิดรวบยอด หรือ มโนทัศน เปนทักษะในการเขาใจหรือมีแนวคิดเพื่อการวางแผน และลงมือทำเพื่อใหไดผลงาน ในระดับคุณภาพ โดยผลงานออกแบบนั้น ตองมีความสรางสรรคและมีคุณคาตอตนเองและสังคม Li (2019) ไดใหความหมายเกี่ยวกับการออกแบบ หมายถึง การพัฒนาเทคโนโลยีภาพ ดิจิทัลที่สามารถปรับแตง และเพิ่มรายละเอียดสำคัญ เพื่อสรางความนาสนใจใหแกภาพดิจิ ทัล และการสรางสรรคผลงานการออกแบบชวยสงเสริมภาพลักษณที่ดีใหแกสังคมและวัฒนธรรม Grigg (2020) ไดใหความหมายเกี่ยวกับการออกแบบ หมายถึง การถายทอดมุมมองทาง ความคิดสรางสรรคเพื่อองคประกอบกราฟกที่สรางความเขาใจ และนำไปใชประโยชนในเชิง พาณิชยได

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 3

วิกิพีเดีย (2564) ไดใหความหมายเกี่ยวกับ การออกแบบ หมายถึง การสรางสรรคสิ่งใหม หรือปรับปรุงดัดแปลงสิ่งที่มีอยูใหดีขึ้น เชน การเปลี่ยนแปลงลักษณะ รูปแบบ การประยุกตจาก สิ่งเดิมใหไดสิ่งใหม ที่ใชประโยชนได และเปลี่ยนไปจากเดิม การถายทอดรูปแบบจากความคิด ออกมาเปน ผลงานที่ผูอื่น สามารถมองเห็น รับรู หรือสัมผัสได ทั้ง ในรูปแบบดิจิทัล และงาน สิ่งพิมพตาง ๆ ซึ่งการออกแบบครอบคลุมถึงการออกแบบวัตถุ ระบบ หรือปฏิสัมพันธของมนุษย และยังรวมไปถึงการคิดเชิงออกแบบ (Design Thinking) ซึ่งแบบที่ออกมาอาจเปนสิ่ง ที่เปนไปได จริง จากสิ่งที่รับรูไดทางตา หู จมูก ลิ้น กาย อันไดแก รูป เสียง กลิ่น รส และสิ่งที่สามารถสัมผัส ไดดวยกาย หรือแบบที่เปนเพียงนามธรรม คือสิ่งที่รับรูเฉพาะทางใจเทานั้น ผูที่ออกแบบจะ เรียกวา นักออกแบบ ซึ่งหมายถึงคนในวิชาชีพสาขาการออกแบบที่แตกตางกัน เชน นักออกแบบ แฟชั่น นักออกแบบแนวความคิด หรือนักออกแบบเว็บไซต และนักออกแบบสื่อโฆษณาและ ประชาสัมพันธ ฯลฯ การออกแบบนั้นมีความจำเปนที่ตองพิจารณาดานสุนทรียศาสตร ประโยชน ใชสอย หลักเศรษฐศาสตร และมุมมองสัง คมการเมือง ทั้ง ในสิ่ง ที่ออกแบบและขั้นตอนการ ออกแบบ การออกแบบอาจเกี่ยวของกับการคนหาขอมูล ความคิด การทำแบบจำลอง การ ปรับแกแบบ แบบมีปฏิสัมพันธ และการออกแบบใหม (Re-Design) ขณะที่ความหลากหลายของ การออกแบบอาจรวมไปถึง เสื้อผา สวนตอประสานกราฟกกับผูใช อาคารบานเรือน สิ่งปลูกสราง เอกลักษณองคกร การจัดการกระบวนการทางธุรกิจ เพื่อใหสามารถเชื่อมโยงและทำงานกันได อยางมีประสิทธิภาพและนำกลับมาใชใหมได จึงตองทำการจัดการกระบวนการทางธุรกิจ หรือ แมกระทั่งกระบวนการการออกแบบ 1.1.2 ความสำคัญของการออกแบบ จากเดิมที่มนุษยดำรงชีวิตอยูดวยความเรียบงาย ทำใหสิ่งของเครื่องใชตาง ๆ ไดรับการ ประดิษฐขึ้นเพื่อตอบสนองทางดานการใชงาน ซึ่งสวนใหญเกิดจากธรรมชาติ ไมเนนความสวยงาม จึงไมไดผานการดัดแปลงหรือปรุงแตง แตดวยสมองของมนุษยที่ฉลาด บวกกับวิวัฒนาการในการ ดำรงชี ว ิ ต ทำให ม นุ ษ ย ร ู  จ ั ก การเปลี ่ ย นแปลงและปรั บ ปรุ ง สิ ่ ง ต า ง ๆ ให ม ี ท ั ้ ง ประโยชน และความสวยงามควบคู ไ ปดว ยกัน จึ ง ก อ ใหเ กิด การออกแบบที ่ต อบสนอง ผู  ใ ช ง าน และ ตรงตามความตอ งการของกลุ ม เป า หมาย หากพิ จ ารณาตามจุ ด มุ  ง หมายของการออกแบบ แตละประเภท จรุงยศ อรัณยะนาค (2560) ไดกลาวถึงความสำคัญของการออกแบบได ดังนี้

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 4

1.1.2.1 เพื่อชวยเพิ่มคุณคาทางสุนทรียศาสตร เปนการกระตุนดึงดูดใจและสรางความ สนใจแกผูใช หรือผูพบเห็นใหรูสึกชื่นชอบ พึงพอใจในผลงานหรือเกิดความซาบซึ้ง มีคุณคาทางใจ ตอผูใชจากการออกแบบสินคาหรือบริการตาง ๆ 1.1.2.2 ชวยใหสิ่งตาง ๆ สามารถตอบสนองพฤติกรรมผูใชไดตรงตามวัตถุประสงค หรือหนาที่การใชสอย เชน การออกแบบของเลนสำหรับเด็กใหมีสีสันสดใส การออกแบบอุปกรณ ของใช ส ำหรั บ ผู  ส ู ง วั ย ให ใ ช ง านง า ยและปลอดภั ย และการออกแบบอุ ป กรณ ต  า ง ๆ ใหสอดคลองกับสรีระของรางกายสามารถยืดหยุนได ซึ่งการออกแบบสวนใหญจะตองคำนึงถึง กลุมเปาหมายของผูใชงาน และตอบโจทยการใชง าน โดยผลงานการออกแบบนั้นจะตองมี ทั้ง ประโยชนและความสวยงามควบคูกันไป 1.1.2.3 ทำใหการแสดงออกทางความคิดและการสื่อสารขอมูลมีความแมนยำ ชัดเจน เขาใจในสิ่งที่ตองการสื่อสารออกไป และสามารถดึงดูดกลุมเปาหมายไดดียิ่งขึ้น 1.2 แนวคิดในการออกแบบ ในสมัยกอนแนวคิดในการออกแบบอาจมุงเนนที่การใชงานและประโยชนเปนหลัก โดย ไมไดคำนึงถึงคุณคาทางความงาม ตอมาเมื่อสังคมมนุษยมีความเจริญขึ้น จึงเริ่มใหความสำคัญ กับสุนทรียภาพ ดังจะเห็นไดจากการแตงกาย เครื่องใช เครื่องประดับ การตกแตงที่อยู อ าศัย และสถาปตยกรรม จนเกิดพัฒ นาการดานแนวคิดการออกแบบ ที่แตกตางกันไปตามยุคสมัย ประเพณี วัฒนธรรม หรือภูมิภาคนั้น ๆ และกลายเปนแนวคิด หรือรูปแบบ (Style) (จรุงยศ อรัณ ยะนาค, 2560; Li, 2019) การออกแบบที่มีเอกลักษณสามารถสื่อความหมายและสะทอนความงามไดอยางเฉพาะ เจาะจง ซึ ่ ง แต ล ะแนวคิ ด ในการออกแบบนั ้ น มี ค วามเป น มา แนวคิ ด และหลั ก การสำคั ญ ที ่ ไ ม เ หมื อ นกั น แม จ ะมี บ างสิ ่ ง คล า ยคลึ ง กั น ทั ้ ง นี ้ เ พราะโดยทั ่ ว ไป แนวคิ ด การออกแบบ แตละอยางนั้นตางก็มีอิทธิพลซึ่งกันและกันอยูเสมอ สาระแนวคิดทางการออกแบบที่มีแบบแผน ลั ก ษณะเฉพาะอั น โดดเดน และตอบสนองความต องการของมนุ ษยไ ด อยา งมี ประสิท ธิภาพ ยอมไดรับการยอมรับจากนักออกแบบ และนำไปประยุกตใชในงานศิลปะ หรืองานออกแบบ แขนงตาง ๆ แมแนวคิดในการออกแบบจะมีหลากหลายแนวทาง เพื่อใหเห็นถึงความเปนมาของ แนวคิดการออกแบบ จึงไดยกเฉพาะแนวคิดที่นิยมและแพรหลายตั้งแตอดีตจนถึงปจจุบัน ดังนี้

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 5

1.2.1 แนวคิดการออกแบบสไตลสมัยใหม (Modern Style) ค น ส  ว น ใ ห ญ  ม ั ก เ ข  า ใ จ ก า ร อ อ ก แ บ บ ส ม ั ย ใ ห ม  เ ร ิ ่ ม จ า ก ก ล ุ  ม ส ถ า ป นิ ก และนักออกแบบชาวเยอรมัน แตอัน ที่จริง แลว เกิดขึ้นจากกลุ มนัก ออกแบบอุต สาหกรรม และกลุ  ม เดอะสไตล ใ นประเทศเนเธอร แ ลนด ได แ สวงหาความเรี ย บง า ยเพื ่ อ ตอบสนอง ตอความสับสนของสัง คมสมัย ใหม ในขณะนั้น ตอมาจึง แพรขยายไปวงการสถาปนิกและนั ก ออกแบบอุตสาหกรรมในเยอรมนี จนกลายเปนที่นิยมทั่วโลก ลักษณะการออกแบบสไตลสมัยใหม มีที่มาจาก 3 ปจจัยหลัก ดังนี้ (นวลนอย บุญวงษ, 2542) 1.2.1.1 พัฒนาการทางเทคโนโลยี การประดิษฐคิดคนเครื่องจักรกลเพื่อนำมาทดแทน แรงงานคน ไดเกิดขึ้นหลังการปฏิวัติอุตสาหกรรมในศตวรรษที่ 18 จนกลายเปนระบบการผลิตที่มี มาตรฐาน นักออกแบบจึงเริ่มคนหาปรัชญาการออกแบบใหม ๆ เพื่อใหหลุดพนจากรูปแบบเดิม และสอดคลองกับพัฒนาการทางเทคโนโลยี 1.2.1.2 แนวคิดแบบหนาที่นิยม โดยมีที่มาจากนักออกแบบชาวเยอรมันไดเสนอแนว ทางการออกแบบผลิตภัณฑเครื่องใชไฟฟาใหมีรูปทรงที่เอื้ออำนวยตอการผลิตและการใชสอย และนักออกแบบจากสถาบันนี้ชวยสรางมาตรฐานในงานออกแบบอุตสาหกรรม เผยแพรผลงาน อันมีรูปแบบเรียบงายแตมากดวยคุณคาทางการใชสอย 1.2.1.3 ลักษณะรูปแบบจากงานศิลปะ ศิลปะคิวบิสมและเดอะสไตล ถือวามีบทบาท สำคัญ ตอรูปแบบการออกแบบสมัยใหม โดยรูปแบบจากงานศิลปะทั้งสองกลุมนี้จะมีรูปทรง เรขาคณิตและลักษณะความเรียบงายบริสุทธิ์ จึงกลายเปนรูปแบบที่ถูกนำมาใชในงานออกแบบ สมัยใหม ปจุบันสามารถพบเห็นไดทั่วไปจากงานสถาปตยกรรม งานออกแบบอุปกรณเครื่องใช รวมทั้งงานออกแบบสื่อโฆษณาและประชาสัมพันธตาง ๆ แนวความคิดนี้ ยึดถือคตินิยมการใชเหตุผลตามหลักประโยชนนิยมและความประหยัด ซึ่งมีแนวคิดพื้นฐานคือ “รูปทรงตองเปนไปตามประโยชนใชสอย” นักออกแบบจะคำนึงถึงคุณคา การใช ง านสู ง สุ ด นิ ย มใช ร ู ป ทรงเรขาคณิ ต ลดการตกแต ง ที ่ ท ำให ด ู ฟ ุ  ม เฟ อ ย ส ว น งานออกแบบกราฟกสไตลสมัยใหม ไดเปดรับการจัดองคประกอบแบบสมมาตร (Asyrnmetiical) ยึ ด ถื อ การใช ร ะบบกริ ด (Grid Systerm) นิ ย มวางจุ ด เด น ของภาพบนพื ้ น ขาว ตลอดจน การใชตัวอักษรแบบไมมีเชิง และเนนความเรียบงายปราศจากการตกแตง ที่มากเกิน ไปทำ ใหงานออกแบบกราฟกที่สะทอนความเปนสมัยใหมไดอยางดี

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 6

ภาพที่ 1.1 การออกแบบดวยแนวคิดสไตลสมัยใหม ที่มา : Pinterest (2021) จากภาพที่ 1.1 เปนการออกแบบหนัง สือ ดวยแนวคิดการออกแบบสไตลสมั ย ใหม (Modern Style) โดยใชพื้นหลังสีขาว ตลอดจนการใชตัวอักษรแบบไมมีเชิงและเนนความเรียบ งาย ปราศจากการตกแตงที่มากเกินไป เปนงานออกแบบกราฟกที่สะทอนความเปนสมัยใหม ทำ ใหดูสะอาด สบายตานาอาน 1.2.2 แนวคิดการออกแบบสไตลหลังสมัยใหม (Post modern Style) คำว า หลั ง สมัย ใหม หรือ ที่ น ิ ยมเรี ยกทับ ศั พท กั น ว า “โพสต โ มเดริ น” เป น คำเรียกใช กั น ตลอดที ่ ผ  า นมา และมี ค วามหมายแตกต า งกั น ในบางมิ ต ิ แต ใ นการออกแบบหมายถึ ง แนวคิดที่แสดงการตอตาน ปฎิเสธ หรือคัดคาน แนวคิดการออกแบบสมัยใหมที่มุงเนน ประโยชน ใชสอยและความเรียบง าย สไตลหลัง สมัยใหมเ ปนการออกแบบที ่สอดคล องกับวัฒ นธรรม ประชานิยม (Pop Culture) เสรีภาพความมีอิสระจากทฤษฎี การออกแบบสมัยใหม ไมเนน ความมีเอกภาพ หมายถึง การนำหลายสิ่ง หลายอยางมาผสมกัน เชน กาลเทศะ ยุคสมัย อดีต อนาคต หรือวัฒ นธรรม ซึ่ง ไดรับอิท ธิ พ ลแนวคิ ดและ รูปแบบมาจากอาร ตนูไ ว อารตเตโด ป อ บอาร ต และกลุ  ม เมมฟ ส กลุ  ม นั ก ออกแบบ และสถาปนิ ก ที่ จ ั ด ตั ้ ง ขึ ้ น มาในเมื อ งมิ ล าน ประเทศอิตาลี มีแนวคิดแปลกแหวกแนว รุนแรง และตอตานสัง คม แสดงถึง สัญ ชาตญาณ และสุนทรียภาพของผูออกแบบสไตลหลัง สมัยใหม ไปสูจุดสูง สุดอยางรวดเร็ว และกลายเปน รู ป แบบใหม ท ี ่ น ั ก ออกแบบนำไปประยุ ก ต ใ ช แ นวความคิ ด โดยพื ้ น ฐานแล ว ความต อ งการ ตอบสนองคนเฉพาะกลุม มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 7

ทำใหแนวทางการออกแบบคอนขางหลากหลาย การนำหลายอยางมาผสมกัน การ ออกแบบจะใช ร ู ป ทรงแปลกตา ซั บ ซ อ น ดู ข ั ด แย ง กั น ในตั ว ให ค วามรู  ส ึ ก กำกวม การจั ด องคป ระกอบแบบอสมมาตร แสดงถึ ง ความก า วหน า ทางวิ ท ยาการของวั ส ดุ มี ก าร เลื อ กใช ว ั ส ดุ แ ปลกใหม สร า งความสั ม พั น ธ ก ลมกลื น ไปกั บ สิ ่ ง แวดล อ มเดิ ม ของพื ้ น ที่ และนิยมการตกแตงลวดลายเนนความอิสระไมยึดติดกับความเชื่อ การทดลองสิ่ง แปลกใหม มีการผสานความขัดแยงระหวางรูปทรง สี และวัสดุเขาดวยกัน

ภาพที่ 1.2 การออกแบบดวยแนวคิดสไตลหลังสมัยใหม ที่มา : Infinitydesign (2021) จากภาพที่ 1.2 เปนการออกแบบโปสเตอร ดวยแนวคิดการออกแบบสไตลหลังสมัยใหม (Post modern Style) โดยใชตัวอักษรที่มีรูปแบบแตกตางกัน จัดองคประกอบแบบอสมมาตร ทำใหดูสลับซับซอน ดูขัดแยงกันในตัว ใหความรูสึกกำกวม แตสรางความนาสนใจและสนุกสนาน 1.2.3 แนวคิดการออกแบบสไตลมินิมัล (Minimal Style) สืบเนื่องจากปรัชญาสรางสรรค และวลีอมตะที่ทั่วโลกเรียกวา less is more (นอยแตมาก) โดยไมจำกัดเฉพาะในวงการสถาป ตยกรรม และงานตกแตง ภายในเท านั้น แตมีอิทธิพ ลใน วงการอื่นๆ ทั้งงานศิลปะ กราฟก และออกแบบอุตสาหกรรม งานสวนใหญจะดูเรียบงายพิถีพิถัน มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 8

เน น คุ ณ ประโยชน แ ละการจั ด วางพื ้ น ที ่ ว  า ง (Space) ตามลั ก ษณะการใช ส อยที ่ ต  อ งการ แนวความคิ ด ให ค วามสำคั ญ กั บ ความเรี ย บง า ย ใช พ ื ้ น ที ่ ว  า งที ่ ใ ห ค วามรู  ส ึ ก โล ง ผ อ นคลาย พยายามใช ส วนประกอบเพี ยงเล็กนอ ยแตไ ด ผ ลมาก ตัดทอนสิ่ง ไม จ ำเปน ออกใหม ากที ่ สุ ด ซ ึ ่ ง คล า ยกั บ ศิ ล ปะของญี ่ ป ุ  น ที ่ ไ ด แ ร งบั น ดาลใจ จาก ปร ั ชญ าลั ทธิ เซ น (Ze n) แม ก ารใช ส ี ส ไตล ม ิ น ิ ม ั ล จะไม ไ ด ม ี ล ั ก ษณะเฉพาะเจาะจง แต ส  ว นมากใช ส ี แ บบโมโนโครม (Monochrome) การเลือกใชสีเดียว แตมีการไลน้ำหนักความเขม นิยมใชสีขาว เทา และดำ เสนหที่สำคัญ คือ การใชความเรียบงายของเสน รูปทรง โครงสรางรวมของผลงาน เนนลักษณะ เดนของวัสดุที่นำมาใชในงานโครงสรางของตกแตง โดยเลือกวัสดุธรรมชาติ การสรางความสมดุล ระหวางผลงานออกแบบและผูใช นอกจากนี้ความคิดสไตลมินิมัล ยังเปนสิ่งกำหนดและสะทอน ทัศนคติการดำรงชีวิตอีกดวย

ภาพที่ 1.3 การออกแบบดวยแนวคิดสไตลมินิมัล (Minimal Style) ที่มา : Infinitydesign (2021) จากภาพที่ 1.3 เปนการออกแบบปกหนัง สื อ ดวยแนวคิดการออกแบบสไตล มิน ิ มั ล (Minimal Style) โดยใชพื้นที่วางที่ใหความรูสึกโลงผอนคลาย เรียบงาย เลือกใชสีแบบโมโน โครม ใชสวนประกอบเพียงเล็กนอย โดยตัดทอนสิ่งไมจำเปนออกใหมากที่สุด 1.2.4 แนวคิดการออกแบบสไตลรวมสมัย (Contemporary) แนวคิดการออกแบบสไตลรวมสมัยเปนการนำรูปแบบหรือสไตลที่กำลังไดรับความ นิยมในปจจุบันมาผสมผสานกับรูปแบบตาง ๆ ในอดีต ซึ่งหมายความวาความรวมสมัยสามารถ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 9

เปลี่ยนแปลงไดอยูตลอดเวลา ขึ้นอยูกับวาปจจุบันงานออกแบบที่กำลังนิยมมีลักษณะอยางไร เปนการนำเอาลักษณะเฉพาะที่โดดเดน อารมณและความรูสึกจากสไตลงานออกแบบในอดีตมา ผสมผสานกับปจจุบันจนเกิดความสมดุล จึงกลาวไดวาสไตลรวมสมัยไมมีรูปแบบที่เจาะจงตายตัว อยางไรก็ดี สไตลรวมสมัยมักมีรูปแบบพื้นฐานคือ เรียบงาย ไมหรูหราหรือหวือหวาจนเกินไป แต แฝงไปด ว ยความทั น สมั ย ใช โ ทนสี อ ุ  น เพื ่ อ สร า งความรู  ส ึ ก ใกล ช ิ ด แบบครอบครั ว คนส ว น ใหญยังคงสับสนระหวางสไตลสมัยใหมและรวมสมัย ความแตกตางที่สังเกตไดคือ สไตลสมัยใหม จะเนน เสน สายที่เฉียบคม เปน เหลี่ยมมุม ตัดทอนสิ่ง ไมจำเปนใหบรรยากาศสดชื่นและสดใส สวนสไตลรวมสมัยจะมีความออนชอยนุมนวลกวา มักใชสีโทนอุนใหความรูสึกกลมกลืน

ภาพที่ 1.4 การออกแบบแนวคิดสไตลรวมสมัย (Contemporary) ที่มา : Pinterest (2021) จากภาพที ่ 1.4 เป น การออกแบบกราฟก ด วยแนวคิ ด การออกแบบสไตล รวมสมัย (Contemporary) โดยใชลายเสนผสมผสานระหวางตัวอักษร และภาพบุคคลที่แสดงออกถึง ความออนชอย ใชโทนสีอุน เรียบงาย ไมหวือหวาจนเกินไป แตแฝงไปดวยความทัน สมัยให ความรูสึกใกลชิด 1.2.5 แนวคิดการออกแบบสไตลลอฟต (Loft) คำวา “ลอฟต” หมายถึง หองชั้นบน หรือหองใตหลังคา หรือในอีกความหมาย หนึ่งคือ ลอฟตอพารตเมนต อาคารที่มีพื้นที่เปดโลง เพดานสูง เกิดแนวคิดจากการนำโรงงาน หรือสิ่ง กอสรางไมไดใชแลว นำมาปรับปรุงเปนที่อยูอาศัย หรือสตูดิโอทำงาน โดยเฉพาะอยางยิ่ง ในหมูนักออกแบบและศิลปน มีจุดศูนยกลางอยูบริเวณยานคนรวยในเมืองนิวยอรก ที่มีอาคาร โรงงานเกาอยูเปนจำนวนมาก ดังนั้น ลักษณะโครงสรางอาคารจึงมีลักษณะถูกสรางดวยปูนเหล็ก มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 10

หรือวัสดุอื่นแบบหยาบ ๆ ไมมีความประณีต ตางจากบานพักอาศัยทั่วไปที่สรางอยางประณีตกวา

ภาพที่ 1.5 การออกแบบดวยแนวคิดสไตลลอฟต (Loft) ที่มา : Pinterest (2021) จากภาพที่ 1.5 เปนการออกแบบภาพสามมิติ (3D) ดวยแนวคิดการออกแบบสไตล ลอฟต (Loft) การออกแบบภายในของสำนักงานสไตลลอฟต โดยใชโปรแกรมคอมพิวเตอรสาม มิติ โครงสรางอาคารทำจากวัสดุแบบหยาบ เชน สรางดวยปูน เหล็ก หรือวัสดุอื่น ๆ ที่ไมไดเนน ความประณีตแตอยางใด 1.2.6 แนวคิดการออกแบบสไตลวินเทจ (Vintage) คนส ว นใหญ ม ั ก เข า ใจคำว า สไตล ว ิ น เทจ (Vintage) ต อ งเป น ชุ ด ลายดอก กระโปรงยาวคลุมเขา และหมวกกวางเทานั้น ในความเปนจริงสามารถเปนรูปแบบอื่นได ดังจะ เห็น ไดจากในงานสถาป ตยกรรม และตกแตง กายในจะมีล ักษณะออนชอ ย ประณีต งดงาม เสนสายโคงมน นิยมประดับดวยงานแกะสลักลวดลายแบบตะวันตก เชน ดอกไม ใบไม ผลไม เถาวัลย และสัตว แมแตบนเครื่องเรือนก็ยัง แกะสลักแทบทุกสวน และมักเลือกใชเครื่องเรือน ที่ทำจากวัสดุธรรมชาติ รูปทรงโบราณ ที่ทำบุดวยหนังหรือผาปกเปนลวดลายตางๆ ซึ่งชวยสราง ความทรงจำ รวมทั้ ง คุ ณ ค า ทางจิ ต ใจ และเรื ่ อ งราวผ า นกาลเวลา นอกจากนั ้ น ยั ง นิ ย ม ใชสีแบบพาสเทล (Pastel color) ที่มีการผสมสีขาวลงไป เพื่อลดความเขมขนของเนื้อสีเดิม ให ค วามรู  ส ึ ก อ อ นหวาน สบายตา ไม ฉ ู ด ฉาด เช น สี ข าว ครี ม เขี ย วอ อ น หรื อ ม ว งอ อ น นิยมการตกแตง ผนังดวยกระดาษบุผนังที่เปนแพทเทิรน (Pattern) ลายดอกไมซ้ำ ๆ กันและงาน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 11

สิ่งพิมพนิยมใชสีสันสบายตา เรียบงาย และออนหวาน ขณะเดียวกันก็ดูโกหรู เนนความละเอียด และความประณีตของลวดลายที่นำมาใช

ภาพที่ 1.6 การออกแบบแนวคิดสไตลวินเทจ (Vintage) ที่มา : Pinterest.com (2021) จากภาพที่ 1.6 เปนการออกแบบโปสเตอร ดวยแนวคิดการออกแบบสไตลวิ น เทจ (Vintage) ใชเสนสายโคงมน ประดับดวยงานแกะสลักลวดลาย ใชสีเขียว สีครีม ที่มีการผสมสีขาว ลงไป เพื่อลดความเขมขนของเนื้อสีเดิม ทำใหเกิดความสบายตาและไมฉูดฉาด 1.2.7 แนวคิดการออกแบบสไตลเรโทร (Retro) Retro เป น คำย อ ของ Retrospective มี ร ากศั พ ท ม ากจากภาษาละติ น หมายถึงยอนยุ​ุค การหวนคืนสูอดีต หรือนิยมในสิ่งที่พนสมัยในปจจุบัน ซึ่งสไตลเรโทรจัดอยูใน ศิลปะปอปอารต หากเปรียบเทียบกับสไตลวินเทจก็จะมีความเกาแกนอยกวา คำวาเรโทรนั้น สามารถนำไปใชไดกับทุกสิ่งที่มนุษยสรางสรรคขึ้น และใหความรูสึกยอนถึงวันวานที่นาหวนคืนใน อดีต เชน เครื่องพิมพดีด ตลับเทปเพลง โทรศัพท โทรทัศน หรืออุปกรณเกา ๆ คำวาเรโทรถูก นำไปใชกันอยางแพรหลายขึ้น จนเริ่มขยายไปยังวงการสื่อสาธารณะ และงานออกแบบตาง ๆ นอกจากนี้ในปจจุบันยังรวมไปถึงรูปแบบการใชชีวิตอีกดวย มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 12

แนวความคิดเปนการนำเอารูปแบบหรือสไตลในอดีตมาปรับแตงผสมผสานกับความเปน ป จ จุ บ ั น อาจหมายถึ ง สิ ่ ง ของที ่ ท ำขึ ้ น ใหม แต ไ ด แ รงบั น ดาลใจมาจากงานออกแบบดั ้ ง เดิม แลวดัดแปลงใหดูทันสมัยขึ้น ลักษณะเดนของสไตลนี้คือ ความสนุกสนาน มีชีวิตชีวาการนำเอา กระแสนิยมในอดีตผนวกกับความสำคัญ ดาน ประโยชนใชสอยเนนการใชลวดลาย เพื่อการ ตกแตงทางดานงานแฟชั่นจะเปนการยอนยุค นำรูปแบบการแตงกายชวงหลังสงครามโลกครั้งที่ 2 จากกระแสความนิยมวันวานในอดีต ทำใหพบเห็นสถาปตยกรรมและสิ่งกอสรางตาง ๆ เปนอยาง มาก เช น ตลาดเพลิ น วานที ่ อ ำเภอหั ว หิ น จั ง หวั ด ประจวบคี ร ี ข ั น ธ ตลาดนั ด รถไฟ และตลาดอั ม พวาจั ง หวั ด สมุ ท รสงคราม หรื อ อาจเป น สถาป ต ยกรรมที ่ ส ร า งขึ ้ น มาใหม ภายใตแนวคิดสไตลเรโทร

ภาพที่ 1.7 การออกแบบแนวคิดสไตลเรโทร (Retro) ที่มา : Pinterest.com (2021) จากภาพที ่ 1.7 เป น การออกแบบโปสเตอร ด ว ยแนวคิด การออกแบบสไตล เรโทร (Retro) เนนใชลวดลายเพื่อการตกแตง เปนลักษณะงานแบบยอนยุค ออกแบบตัวอักษรใหดูเกา และใชภาพตลับเทปเพลงแบบโมโนโทน แตมคี วามสนุกสนาน มีชีวิตชีวา แม แ นวคิ ด ในการออกแบบจะมี ห ลากหลายแนวทาง ซึ ่ ง นั ก ออกแบบสามารถนำไป ประยุกตใชในงานศิลปะ หรืองานออกแบบแขนงตาง ๆ ไดตามความเหมาะสม นอกจากแนวคิด การออกแบบการสร า งสรรค ง านออกแบบให เ กิ ด ความสวยงามและมี ป ระสิ ท ธิ ภ าพนั้ น นั ก ออกแบบจำเป น ต อ งคำนึ ง ถึ ง หลั ก การออกแบบ เพื ่ อ จั ด วางองค ป ระกอบต า ง ๆ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 13

ให ผ สมผสานกั น อย า งลงตั ว และ เหมาะสม ตรงตามวั ต ถุ ป ระสงค ข องการใช ง าน และการสื่อความหมาย จรุงยศ อรัญยะนาค (2560) ไดใหหลักการสำคัญ ดังนี้ 1.3 หลักการออกแบบ หลักการที่จะเปนแนวทางในการออกแบบ เพื่อใหเกิดสุนทรียภาพทางความงาม หรือการ รับรูชื่น ชมในผลงานการออกแบบ และผลงานนั้นตองสามารถนำไปใชประโยชนไ ดอยา งมี ประสิทธิภาพ รวมทั้งตอบโจทยความตองการ จะตองคำนึงถึงประเด็นตาง ๆ ดังนี้ 1.3.1 ความสมดุล (Balance) การนำองคประกอบตาง ๆ ของการออกแบบ เชน จุด หรือเสนนำมาจัดวางใหเกิด ความเสมอกัน หรือเทาเทียมกัน เปนการกระจายน้ำหนัก จากผลงานที่นำไปจัดวางเพื่อทำ ให เ กิ ด ความรู  ส ึ ก ไม ห นั ก ไปด า นใดด า นหนึ ่ง ทั ้ ง ที่ ร ั บ รู  ท างสายตา และรั บ รู  ท างความรูสึก โ ด ย ค ว า ม ส ม ด ุ ล น ั ้ น อ า จ เ ก ิ ด ท ั ้ ง แน ว ต ั ้ ง หร ื อ แ น ว น อ น ส ำ ห ร ั บ ง า น อ อ ก แบบ มีวิธีมากมายที่จะทำใหเกิดความสมดุลขึ้น โดยจะตองคำนึงถึงจุดศูนยถวง (Gravity) ตรงกลาง ของผลงาน เพื่อเฉลี่ยน้ำหนักขององคประกอบตาง ๆ โดยรอบคลายกับการสรางสมดุลใหกับคัน ชั่งตราสัญลักษณของกระทรวงยุติธรรม ที่แสดงออกถึงความเสมอภาค ไมโอนเอียงไปดานใดดาน หน ึ ่ ง ก าร สร  า ง คว ามสมดุ ล น ั้น ช ว ยให ผลง าน เก ิ ดคว าม ม ั ่ น คง และ ดู น  าสน ใจ ซึ่งโดยทั่วไปแลวสามารถแบงความสมดุลออกได 3 แบบดวยกันคือ 1.3.1.1 แบบซายขวาเหมือ นกัน หรือ คลายกัน (Symmetrical or formal balance) คือการจัดวางองคประกอบตาง ๆ หางจากเสนแกนกลางใหดานซายและขวาเทากัน การออกแบบสื่อที่มีความสมดุลแบบซายขวาเหมือนกันหรือคลายกัน สามารถวัดระยะหางจากไม บรรทัดเพื่อใหหางจากเสนกลางไดเทากัน หรือใชวิธีการคัดลอกวัตถุเพื่อใหมีขนาดเทากันทั้งซาย และขวา ความสมดุ ล แบบนี ้ จ ะให ค วามรู  สึ ก มั ่ น คง เป น ทางการ แข็ ง แรง สง า งาม สงบนิ่ง และยุ ต ิ ธ รรม เหมาะกั บ งานออกแบบที ่ ต  อ งการความเป น ระเบี ย บแบบแผน เช น สัญลักษณของหนวยงานราชการ หรือใบประกาศนียบัตร

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 14

ภาพที่ 1.8 ความสมดุลแบบซายขวาเหมือนกัน (Symmetrical Balance) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.8 เปนภาพวงกลมสีสมที่มีขนาดและระยะหางจากแกนกลางเทากัน เพื่อให เกิดความสมดุลแบบซายขวาเหมือนกัน สามารถประยุกตใชในการออกแบบสื่อโดยการสรางวัตถุ และจัดวางใหเกิดความสมดุลที่สามารถรับรูทางสายตาไดทันที 1.3.1.2 แบบซายขวาไมเทากัน (Asymmetrical or informal balance) คือ การจัดวางใหองคประกอบทั้งดานซายและขวามีลักษณะตางกัน หรือไมเทากัน เชน วัตถุทั้งสอง ต า งกั น ด ว ยปริ ม าตรและรู ป ทรง แต ใ ห ค วามสมดุ ล ทางด า นความรู  ส ึ ก ความสมดุ ล แบบนี้สามารถสรางความรูสึกขัดแยง ไมเปนระเบียบ ความหลากหลายและเคลื่อนไหว การ ออกแบบสื่อที่มีความสมดุลแบบซายขวาไมเทากัน สามารถสรางวัตถุที่แตกตางทางดานรูปทรง หรือขนาด แตจัดวางใหทั้งซายและขวาหางกัน ความสมดุลแบบนี้จะใหความรูสึกไมเปนทางการ และไมนาเบื่อ จึงเหมาะในงานที่ตองการความตื่นตาตื่นใจ เชน งานออกแบบในอุตสาหกรรม บันเทิง งานออกแบบโฆษณาและประชาสัมพันธสินคาเกี่ยวกับวัยรุน

ภาพที่ 1.9 แบบซายขวาไมเหมือนกัน (Asymmetrical Balance) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 15

จากภาพที่ 1.9 เปนภาพวงกลมสีสมดานซายมีขนาดใหญกวา และดานขวามีขนาดเล็ก ตามลำดับจำนวน 3 วงที่มีความแตกตางของขนาด แตระยะหางจากแกนกลางเทากัน เพื่อใหเกิด ความสมดุลแบบซายขวาไมเหมือนกัน สามารถประยุกตใชในการออกแบบสื่อโดยการสรางวัตถุที่ แตกตางทั้งขนาดและรูปทรง แตจัดวางใหทั้งซายและขวาหางกัน 1.3.1.3 แ บ บ ร ั ศ ม ี ห ร ื อ ว ง ข ด ( R a d i a l o r Spiral balance) คือการจัดวางองคประกอบ ใหเกิดความสมดุล โดยเริ่มจากจุดศูนยกลาง แลวกระจายออกไปโดย รอบคลายกับรัศมี การออกแบบสื่อที่มีความสมดุลแบบซายขวาไมเทากัน สามารถสรางวัตถุที่ แตกตางทางดานรูปทรงหรือขนาด แตจัดวางใหทั้ง ซายและขวาหางกัน ความสมดุล แบบนี้ จะใหความรูสึกไมเปนทางการ

ภาพที่ 1.10 ความสมดุลแบบรัศมี (Radial Balance) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.10 เปนภาพวงกลมสีสมที่มีขนาดไมเทากัน โดยเรียงลำดับจากขนาดเล็กไป ถึงขนาดใหญที่กระจายออกไปโดยรอบ เพื่อใหเกิดความสมดุลแบบรัศมี สามารถประยุกตใชใน การออกแบบสื่อโดยการสรางวัตถุที่มีขนาดเล็กเรียงไปหาใหญ แตใหมีระยะหางจากจุดศูนยกลาง กระจายออกไป 1.3.2 ความมีเอกภาพ (Unity) การสรางความสัมพัน ธระหวางองคประกอบตาง ๆ ใหเกิดความเปน อันหนึ่งอัน เดี ย วกั น มี ค วามเกี ่ ย วเนื ่ อ งกั น การสร า งเอกภาพช ว ยให ผ ลงานมี ค วามสวยงามกลมกลืน (Harmony) โดยสามารถทำไดหลากหลายวิธี เชน การจัดองคประกอบใหอยูรวมกันเปนกลุม มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 16

การซ้ำกันขององคประกอบ การสรางความสัมพันธขององคประกอบใหไปในทิศทางเดียวกัน หรือแมแตการสรางความหลากหลายสามารถกอ ใหเกิดเอกภาพได เชนกัน ความมีเอกภาพ ไม ไ ด ห มายถึ ง การจั ด องค ป ระกอบอย า งเดี ย ว แต ย ั ง มี เ อกภาพทางด า นความคิ ด ด ว ย ซึ่ง หมายถึงที่มาแนวคิด เนื้อหาเรื่องราว อารมณหรือความรูสึกภายในตาง ๆ โดยที่บางครั้ง ก็มีความสำคัญไมนอยกวาความมีเอกภาพทางดานองคประกอบ 1.3.3 การซ้ำและจังหวะ (Repetition and Rhythm) การซ้ำและจังหวะมีลักษณะที่คลายคลึงกัน โดยการซ้ำ เปนการนำองคประกอบ ที่มีรูปรางเหมือนกัน ขนาดเทากัน จัดวางซ้ำโดยมีระยะหางเทา ๆ กัน แตเมื่อนำมาวางซ้ำ โดยที ่ ม ี ก ารเพิ่ ม ลดขนาด มี ร ะยะความถี่ ห รื อ ความห า งไม เ ทา กั น จะทำให เ กิ ด จั ง หวะขึ้น การสร า งจั ง หวะสามารถทำได ห ลายลั ก ษณะ การสร า งจั ง หวะที ่ ร าบเรี ย บสม่ ำ เสมอ จะให ค วามรู  ส ึ ก สงบนิ ่ ง ผ อ นคลาย ส ว นการสร า งจั ง หวะที ่ เ ปลี ่ ย นไปมาอย า งฉั บ พลั น จะใหความรูสึกสนุก กระฉับกระเฉงและมีชีวิตชีวา การสรางจังหวะที่มีความถี่ และอัตราสูง จะทำใหกลายเปนความเคลื่อนไหวขึ้น ซึ่งการสรางความเคลื่อนไหวในงานออกแบบชวยใหผ ล งานตื ่ น ตาตื ่ น ใจ และใช ใ นการนำสายตาผู  ช มไปสู  จ ุ ด เด น หรื อ บริ เ วณอื ่ น ในผลงานได เหมาะกั บ งานออกแบบที ่ ต  อ งการดึ ง ดู ด ความสนใจแสดงถึ ง ความมี พ ลั ง เช น นำเสนอเข า รายการกีฬา โฆษณาสินคาตาง ๆ

ภาพที่ 1.11 การซ้ำโดยเปลี่ยนแปลงขนาด และการจัดวางองคประกอบตามทิ​ิศทางที่แตกตางกัน ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 17

จากภาพที่ 1.11 เปนภาพแครอทและตนหอมที่จัดวางซ้ำ ๆ กัน โดยมีการเพิ่ม ลดขนาด มีระยะความถี่หรือความหางไมเทากัน ทำใหเกิดจังหวะขึ้น สามารถประยุกตใชในการออกแบบ สื่อโดยการสรางวัตถุ 1 ชิ้น แลวนำมาปรับขนาด หรือปรับทิศทางของภาพ จะไดผลงานใหม ที่ใชในการนำสายตาผูชม 1.3.4 การเนน (Emphasis) การเน น เป น การทำให บ ริ เ วณใดบริ เ วณหนึ ่ ง ในงานกลายเป น จุ ด เด น ดู ดีมีความนาสนใจขึ้น มา เปนวิธีการที่นักออกแบบบัง คั บสายตาผู ชม (Forcing attention) ใหมองมายัง บริเวณที่ตองการ โดยบริเวณที่สายตาถูกบัง คับ ใหม องจะเรียกกันว า จุดสนใจ หรื อ จุ ด รวมสายตา (Point of focal point) ซึ่ ง การเน น ให เ กิ ด จุ ด เด น สามารถกระตุ น การรับรูของมนุษยไดมากกวาที่ดูแบบปกติ อาจจะสรางวัตถุที่มีความแตกตางจากภาพรวมที่มีอยู เดิ ม และเพิ ่ ม เติ ม ในส ว นของการใช ส ี ท ี ่ ต รงข า ม หรื อ เข ม มากกว า เดิ ม รวมทั ้ ง การจั ด วาง องคประกอบที่เดน ชัด แตง านออกแบบทุกประเภทไมจ ำเปน ตองมี จุ ด สนใจในงานเสมอไป เนื ่ อ งจากงานออกแบบบางอย า งจะต อ งมองในองค ร วมทั ้ ง หมดจึ ง จะพบความโดดเด น การเนนใหเกิดจุดเดนในงานออกแบบ มีวิธีการดังตอไปนี้ 1.3.4.1 การสรางความขัดแยงหรือตัดกัน คือการใชองคประกอบใหมีลักษณะ ขั ด แย ง กั น เพื ่ อ สร า งจุ ด สนใจในบริ เ วณนั ้ น ๆ ความขั ด แย ง ควรจะสร า งขึ ้ น ท า มกลาง ความกลมกลื น ในบริ เ วณอื ่ น ของภาพ โดยบริ เ วณที ่ ส ร า งความขั ด แย ง นี ้ ไ ม ค วรมี ป ริ ม าณ เกินรอยละ 20 ของพื้นที่ทั้งหมด

ภาพที่ 1.12 การสรางความขัดแยงหรือตัดกัน ที่มา : นุจรี บุรีรัตน มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 18

จากภาพที่ 1.12 เปนภาพเรือที่จอดอยูริมฝงทามกลางทิวทัศนภูเขาที่มีลักษณะขัดแยงกัน เพื่อสรางจุดสนใจ สามารถประยุกตใชในการออกแบบสื่อโดยการสรางวัตถุชิ้นใหมแลวนำมาวาง ตำแหน ง กลางตรงภาพที ่ มี ค วามกลมกลื น เป น การเน น ให เ กิ ด จุ ด เด น ขึ ้ น มาจากการสร า ง ความขัดแยงหรือตัดกัน 1.3.4.2 การเนนโดยการใชรูปคน (กรณีที่เปนภาพทิวทัศน) รูปคนเปนสิ่งที่มนุษย คุนเคยมากกวารูปอื่น ๆ แตเมื่อรูปคนปรากฏอยูทามกลางทิวทัศน ตนไม ภูเขา ภาพทิวทัศน เหล า นี้ ถ ื อ เป น รู ป ที่ ใ ห ค วามรู  ส ึ ก แปลกตามากกว า รู ป คน อย า งไรก็ ด ี แ ม ว  า สิ ่ ง แปลกใหม จะได ร ั บ ความสนใจมากกว า แต ใ นขณะเดี ย วกั น หากสิ ่ ง เก า ปรากฏอยู  ท  า มกลางสิ ่ ง ใหม สิ่งเกาจะถูกรับรูไดกอนเสมอ นั่นหมายความถามีรูปคนปรากฏอยู ทำใหภาพนั้นแสดงออกถึงการ มีชีวิต จึงทำใหไดรับความสนใจมากกวาทิวทัศน 1.3.4.3 การตกแต ง บริ เ วณนั ้ น เป น พิ เ ศษ อาจใช ว ิ ธ ี ก ารตั ด เส น หรื อ การเพิ ่ ม ลวดลาย เพิ ่ ม รายละเอี ย ดในบริ เ วณที ่ ต  อ งการให เ ป น จุ ด เด น หรื อ จุ ด สนใจ โดยปลอยใหสวนอื่น ๆ มีรายละเอียดที่นอยกวา จะทำใหเกิดจุดเดนในบริเวณที่ตองการ 1.3.4.4 การสรางสวนเดนและสวนรอง โดยปกติแลว สิ่งที่มีขนาดใหญกวา หรือ สีที่เดนกวา จะมองเห็นไดชัดเจนกวา สิ่งที่เปนสวนรองที่มีขนาดเล็ก หรือสีที่ออนกวา จะทำให เกิด การเปรียบเทียบระหวางกันเกิดขึ้น

ภาพที่ 1.13 สวนเดนและสวนรอง ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 19

จากภาพที่ 1.13 เปนภาพดอกไมสีแดงตรงกลางสีชมพู โดยมีขนาดใหญและใชสีเขมกวา จึงทำเกิดสวนเดนคือ ดอกไมสีแดงที่มีขนาดใหญ และสวนรองคือ ดอกไมสีชมพูที่มีขนาดเล็กกวา สามารถประยุกตใชในการออกแบบสื่อโดยการสรางวัตถุที่ตองการใหมีสวนเดนและสวนรองโดย ใชขนาดและสีเพื่อใหมีความแตกตางอยางชัดเจน 1.3.4.5 การเนนดวยทาทางความเคลื่อนไหว การที่วัตถุที่สรางขึ้นมาสามารถ ทำใหเกิดการเคลื่อนไหวในรูปแบบตาง ๆ จะทำใหไดรับความสนใจกอนเสมอ ทั้งนี้เนื่องจาก วัตถุที่อยู นิ่ง จะสัง เกตเห็นไดยากเพราะไมมีการเปลี่ยนแปลงทางกายภาพ ดัง นั้น เมื่อมีการ เคลื่อนไหว ของวัตถุก็จะทำใหมนุษยรับรูไดงาย

ภาพที่ 1.14 ภาพแมวแสดงความเคลื่อนไหว ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.14 เปนภาพแมวสองภาพที่มีทาทางตางกัน โดยภาพแรกจะเปนภาพแมวนั่ง นิ่ง ๆ และภาพที่สองเปนภาพแมวยกเทาขวาขึ้นมาเปนทาทางการเคลื่อนไหว สามารถประยุกตใช ในการออกแบบสื่อโดยการสรางวัตถุที่ตองการใหเกิดการเคลื่อนไหว การสรางภาพเคลื่อนไหว ลักษณะนี้จะตองกำหนดใหแตละเฟรมเปนคียเฟรม และใสเนื้อหาแตละเฟรมเพื่อนำมาประกอบ กันเปนภาพเคลื่อนไหวแบบเฟรมตอเฟรม (Frame By Frame) 1.3.4.6 การจัดใหรวมกลุมกัน วัตถุใด ๆ ที่สรางขึ้นมาแลวนำมารวมกันไวใน บริ เ วณที ่ ม ี ค วามหนาแน น และมี ล ั ก ษณะเป น กลุ  ม ก อ น จะได ร ั บ ความสนใจ และการรั บ รู ไดดีกวาบริเวณที่มีความหนาแนนนอยหรือเจือจาง แตในงานออกแบบไมควรนำทุกอยางมา จั ด วางรวมกั น เพราะจะทำให ผ ลงานขาดความมี เ สน ห  ควรมี บ างส ว นกระจายออกไป

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 20

บางเพื่อเปนสวนประกอบรอง (Subordinate) และจะทำใหสวนเดนนั้นยิ่งดูมีความเดนชัดขึ้น อีกดวย

ภาพที่ 1.15 การจัดใหรวมกลุม ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.15 เปนภาพปลาหมึกที่มีการจัดใหรวมกลุม จากภาพมีขนาดแตกตางกันโดย การปรับขนาด แลวนำมาวางรวมกลุมกัน สามารถประยุกตใชในการออกแบบสื่อโดยการสราง วัตถุแบบเดียวกัน แลวนำมารวมกลุมกันจะไดรับความสนใจไดดีกวาภาพที่มีวัตถุกระจายตัว ออกไป 1.3.4.7 การซ้ำกัน การที่มนุษยไดยินเสียงกระดิ่งดังติด ๆ กัน จะไดรับความสนใจ กวาดังเพียงครั้งเดียว ดังนั้น การทำซ้ำ ๆ กันของสิ่งใดสิ่งหนึ่งจะทำใหไดรับความสนใจมากยิ่ง ขึ้น ในการออกแบบโฆษณาจึงนิยมใชวิธีการโฆษณาซ้ำหลาย ๆ ครั้ง 1.3.4.8 การวางตำแหนงสำคัญของภาพ ตำแหนงสำคัญของกรอบสี่เหลี่ยม คือ ซายบน โดยทั่วไปถือวาเปนตำแหนงที่สายตามนุษยจะใหความสำคัญกอนเปนจุดแรก เนื่องจาก พฤติกรรมการอานหนังสือของมนุษยสวนใหญ จะมองจากตำแหนงซายบนกอนแลวเลื่อนไปขวา จากนั้นเลื่อนลงมาดานลางตามลำดับ ดังนั้นรูปใดก็ตามถาถูกจัดวางใหปรากฏในตำแหนงดังกลาว ก็มีความเปนไปไดวาจะมองเห็นไดกอน หากรูปนั้น ๆ ไมไดมีลักษณะดอยจนเกินไป

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 21

1.3.4.9 การแยกตัวจากกลุ ม การซ้ำ ๆ กันที่แนนหนาและใชบริเวณในภาพ มากเกิน ไป จะสรางความคลุมเครือตอการรับรูไ ด ทำใหกลายเปนพื้นไปโดยอัตโนมัติ ดังนั้น หากมีบริเวณอื่นที่มีความชัดเจนมากกวา บริเวณนั้นจะดึงดูดสายตาและกลายเปนจุดสนใจแทน 1.3.4.10 การใชเสนนำสายตา ในสวนขององคประกอบศิลปทั้ง หมด เสนเปน องคประกอบ ที่สำคัญ และสามารถแสดงทิ ศ ทางได ดี มากที่ สุ ด เนื่องจากสามารถนำสายตา จากจุ ด หนึ ่ ง ไปยั ง อี ก จุ ด หนึ ่ ง ได ดั ง นั ้ น งานศิ ล ปะและการออกแบบ จึ ง มั ก มี ก ารใช เ ส น เพื่อนำสายตา เพื่อเปนจุดสนใจของภาพ 1.3.4.11 การใชรูปทรงที่ชัดเจนทามกลางรูปทรงที่เลือ นราง การสรางสรรค รูปทรงที่ตองการเนนใหมีรูปรางสีสันที่ชัดเจน เชน ภาพมีขนาดใหญ ชัดเจน และใชสีที่เขม หรือ แตกต า งจากสี อ งค ร วมที ่ ม ี เ ป น สี พ ื ้ น อ อ น ในขณะที ่ ร ู ป ทรงอื ่ น ๆ ที ่ เ ป น ส ว นรองนั้ น สามารถมองเห็นไดเพียงเลือนราง 1.3.4.12 การใชรูปทรงที่คุนเคยทามกลางรูปทรงที่แ ปลกตา การใชรูปทรงที่ แปลกพิสดารดวยทาทาง หรือผิดไปจากปกติ หรือสื่อความหมายไดยาก ลอมรอบรูปทรงที่คุนเคย เพราะโดยปกติแลวสายตามนุษยจะใหความสนใจกับรูปทรงทุกรูปที่สามารถแปลความหมายได แตเมื่อไมสามารถแปลความหมายรูปทรงที่แปลกได สายตาจะไปหยุดที่ภาพที่สามารถแปล ความหมายได

ภาพที่ 1.16 การใชรูปทรงที่คุนเคยทามกลางรูปทรงที่แปลกตา ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 22

จากภาพที่ 1.16 เปนภาพกบกระโดดทามกลางรูปทรงที่แปลกตาสามารถสื่อความหมาย ไดยาก นำมาตกแตงเพิ่มเติม ลอมรอบกบที่กำลังกระโดดซึ่งเปนภาพที่คุนเคย สามารถประยุกตใช ในการออกแบบสื่อโดยการสรางวัตถุหรือรูปทรงที่คุนเคย แลวนำรูปทรงแปลกตามาตกแตง เชน สัญลักษณ รูปทรงเรขาคณิตที่ผสมผสานกัน หรือลวดลายตาง ๆ นำมาจัดวางเปนองคประกอบ เสริม จะทำใหวัตถุหรือรูปทรงที่คุนเคยนั้นไดรับความสนใจขึ้นมา 1.3.4.13 การเนนดวยการใชสี การใชสีสรางความแตกตางระหวางบริเวณที่ ตองการสรางจุดเดนในบริเวณอื่น ๆ ของภาพ เชน ใชสีแดงบริเวณที่เปนจุดเดน สวนบริเวณอื่น ๆ ของผลงานใชสีเขียวออนจะทำใหสีแดงเดนกวาสีเขียวออน หรืออาจใชวิธีการจับคูสีระหวางความ จัดของสีที่เขมคูกับสีที่ออน 1.3.5 สัดสวน (Proportion) ความสัมพัน ธกลมกลืนกันระหวางขนาดขององคประกอบตาง ๆ ซึ่ง เปนความ พอเหมาะพอดี ไมมากไมน อยจนเกิน ไป หรือระหวางองคป ระกอบทั ้ง หลายที ่นำมาจั ด วาง และพื ้ น ที ่ ว  า งในผลงาน ควรคำนึ ง ถึ ง สั ด ส ว นขององค ป ระกอบวา มี ค วามสั ม พั น ธ ก ัน อยาง เหมาะสมหรื อ ไม รวมถึ ง การจั ด วางองค ป ระกอบลงบนพื ้ น ที ่ ว  า งให ม ี ส ั ด ส ว นที ่ ส วยงาม กลายเปนตำแหนงที่สามารถดึงดูดไดการสรางความสัมพันธของสัดสวน มี 2 วิธี ดังนี้ กฎสามส ว น (Rule of Thirds) คื อ การวางองค ป ระกอบลงบนพื ้น ที่วาง ที ่ แ บ ง ออกเป น สามส ว น ทั ้ ง แนวตั ้ ง และแนวนอน ทำให เ กิ ด จุ ด ตั ด ทั ้ ง หมด 4 จุ ด เรี ย กวา “ฮอตสปอต” ซึ่งเปนจุดที่สรางความนาสนใจในผลงานได ชวยทำใหเกิดไดนามิก (Dynamic) ใน งานออกแบบสามารถจัดวางองคประกอบตาง ๆ ลงในแตละสวน ซึ่งตองวางแผนในแตละสวนวา ตองมีเนื้อหาหรือวัตถุใดในการนำมาประกอบกัน และจัดวางใหสมดุล ลักษณะการจัดวางแบบนี้ นิยมใชในการออกแบบแลว ยังนิยมใชในการจัดองคประกอบในงานดานถายภาพอีกดวย

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 23

ภาพที่ 1.17 การจัดวางองคประกอบดวยการใชกฎสามสวน ที่มา : นุจรี บุรีรัตน (2564) จากภาพที ่ 1.17 เป น ภาพแสดงใหเ ห็ นจุ ด ตัด 4 จุ ด และภาพถ า ยบุค คลด ว ยการใช กฎสามสวน เปนภาพถายจากกลองดิจิทัลโดยใชเครื่องมือที่แสดงเสนกฎสามสวนใหปรากฏขึ้นมา บนหนาปดของกลอง แตสำหรับผูที่มีความชำนาญแลวสามารถใชสายตาวัดได กฎแหงเลขคี่ (Rule of Odds) คือ การจัดวางวัตถุเปนจำนวนคูไวรอบ ๆ วั ต ถุ ที่ ต อ งการให เ ป น จุด สนใจ จากนั ้ น นำวั ต ถุ ท ี ่ ต  องการให เ ปน จุ ด สนใจมาวางตรงกลาง เมื่อรวมวัตถุ ที่สนใจดวยก็จะมีจำนวนวัตถุทั้งหมดเปนจำนวนคี่ เชน วางสี่เหลี่ยมจำนวน 4 อัน ไว ร อบ ๆ สี ่ เ หลี ่ ย มขนาดใหญจ ำนวน 1 อั น ซึ ่ ง สร า งความสมดุ ล และเรี ย กร อ งความสนใจ ของผูชมไดดี จากกฎแหงเลขคี่นี้ สามารถนำมาประยุกตใชในการออกแบบ โดยนำวัตถุขนาดเล็ก มาวางเปนสวนเสริมรายรอบ แลวนำวัตถุที่มีขนาดใหญไวตรงกลาง เพื่อสรางจุดสนใจ 1.3.6 ความกลมกลืนและความขัดแยง ในการออกแบบนั้น คำวา กลมกลืนและขัดแยง มักเปนคำพูดที่พูดถึงอยูเ สมอ ความกลมกลืนคือ การจัดวางองคประกอบทั้งหลายใหเกิดความรูสึกกลมกลืนในภาพรวมทั้ง หมด ถึ ง แม จ ะมี ส  ว นปลี ก ย อ ยอื ่ น ๆ ที ่ ด ู ข ั ด แย ง ไปบ า ง แต เ มื ่ อ พิ จ ารณาในภาพรวมแล ว ยังมีความกลมกลืนอยู นักออกแบบสามารถสรางความกลมกลืนไดหลายแนวทาง เชน การใชสี ที ่ ม ี เ นื ้ อ สี ใ กล เ คี ย งกั น หรื อ การเปลี ่ ย นแปลงขนาดที ล ะน อ ย การสร า งผลงานที ่ ป ระสาน กลมกลื น กั น จนดู เ ป น อั น หนึ ่ ง อั น เดี ย วกั น จะทำให เ กิ ด ความมี เ อกภาพขึ ้ น ได ดั ง นั้ น ผลงานการออกแบบสวนใหญ มักแสดงความกลมกลืนในผลงานภาพรวมอยูเสมอ อยางไรก็ตาม การสร า งผลงานออกแบบที ่ ม ี ค วามกลมกลื น สู ง เกิ น ไป อาจทำให ด ู ส งบนิ่ง น า เบื่ อ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 24

และขาดความน า สนใจได เ ชน กั น ดั ง นั ้ น นัก ออกแบบจึ ง ควรพิ จ ารณาองค ประกอบต า ง ๆ ที่ใชและควบคุมใหอยูในความพอดี ความขัดแยง คือ การจัดวางองคประกอบที่ตรงขามกัน หรือไมเปนไปในทิศทางเดียวกัน มาจัดวางไวดวยกัน จนกอใหเกิดความรูสึกขัดแยงขึ้นภายในผลงาน เชน การใชสีที่แตกตางเชนสี ตรงข า ม หรื อ การใช พ ื ้ น ผิ ว หยาบกั บ พื ้ น ผิ ว ละเอี ย ด การสร า งความขั ด แย ง สามารถดึ ง ดูด และเรี ย กร อ งความสนใจจากผู  ช มได ด ี ให ค วามรู  ส ึ ก ไม ซ้ ำ ซากน า เบื ่ อ ดั ง นั ้ น จึ ง เหมาะกับ งานออกแบบที่ตองการใหดูทันสมัย สนุกสนาน และไมเปนทางการ

ภาพที่ 1.18 ความกลมกลืน (ซาย) และความขัดแยง (ขวา) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.18 ความกลมกลืน (ซาย) เปนภาพวัตถุรูปทรงกลมสีสมที่มีขนาดเทากัน จัด วางในระยะหางเทากัน ทำใหมองแลวใหความรูสึกกลมกลืน และภาพความขัดแยง (ขวา) เปน ภาพวัตถุรูปทรงกลมสีสมที่มีขนาดเทากัน จัดวางในระยะหางเทากัน แตมีวงกลมสีแดงที่หลนลง มา 1 อัน ทำใหเกิดความรูสึกขัดแยง การซ้ำ คือ การนำองคประกอบที่รูปรางเหมือนกันขนาดเทากันจัดวางซ้ำ ๆ อยางตอเนื่อง ในวางซ้ำ ๆ มีรูปแบบ รูปทรง หรือทิศทางการจัดวางที่เปลี่ยนไป จะทำใหเกิดจังหวะขึ้นการเนน คือ การทำใหองคประกอบหรือพื ้นที ่บริเวณใดบริเวณหนึ่ง ดึง ดู ดสายตาผู ชม โดยปกติ แ ล ว ผลงานออกแบบที่มีการเนนใหเกิดจุดเดน สัดสวน คือ การสรางความสัมพันธระหวางขนาดองคประกอบตาง ๆ ภายในผลงาน นอกจากนี ้ ย ั ง หมายถึ ง ความสั ม พั น ธ ข ององค ป ระกอบและพื ้ น ที ่ ว  า ง ความกลมกลื น คื อ การจัดวางองคประกอบตาง ๆ ใหเกิดความรูสึกกลมกลืนในภาพรวมทั้งหมด เมื่อผลงานมีการ ผสมผสานกลมกลื น จนเป น อั น หนึ ่ ง อั น เดี ย วกั น ก็ จ ะทำให เ กิ ด ความมี เ อกภาพได มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 25

ในขณะที ่ ค วามขั ด แย ง คื อ การจั ด องค ป ระกอบที ่ ม ี ร ู ป แบบแตกต า งกั น จนสร า ง ความรูสึกขัดแยงขึ้นในผลงาน 1.4 องคประกอบของการออกแบบ องคประกอบของการออกแบบคือ องคประกอบพื้นฐานทางศิลปะที่จะถูกนำมาใชในการ ออกแบบ โดยองคประกอบของการออกแบบ แบงออกไดดังนี้ 1.4.1 จุด เสน ระนาบ (Dot/Line/Plane) เปน สวนประกอบพื้นฐานสำคัญของการออกแบบกราฟก โดยใชองคประกอบในการ สรางภาพพื้นผิวแบบตาง ๆ แผนภาพ แผนผังที่หลากหลาย ภาพเคลื่อนไหว และศิลปะในการ ประยุกตใชตัวอักษร กราฟก ดังนั้น สรุปไดวางานออกแบบกราฟกนั้นเกิดจาก จุด เสน ระนาบ เปนหลัก

ภาพที่ 1.19 จุด เสน ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.19 จุด เปนหนวยขององคประกอบที่มีขนาดเล็กที่สุด ใหความรูสึกหยุดนิ่ง ไมเคลื่อนไหว และเสน เปน จุดหลายจุ ดที่ เรี ยงติด ต อกันในทิ ศ ทางเดี ยวกัน สามารถแสดง ความรูสึกไดตามทิศทาง เชน จากภาพเปนเสนแนวนอนใหความรูสึกสงบนิ่ง เงียบสงบ 1.4.1.1 จุด (Dot) เปนแนวความคิดที่ใชกำหนดตำแหนง ที่แนนอน ซึ่งจุดนั้นไมมีปริมาตร พื้นที่ หรือ ความยาว เมื่อจุดปรากฏอยูในที่วาง เชน ในพื้นที่สี่เหลี่ยมมีจุดตรงกลางพื้นที่โลง ทำใหเกิด ความรูสึกสงบนิ่ง โดดเดี่ยว แตเมื่อใดที่จุดอยูตำแหนงใดตำแหนงหนึ่งที่ไมใชตรงกลาง จะเกิดการ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 26

แขงกันของพื้นที่รอบ ๆ ที่ไมเทากัน และทำใหเกิดความรูสึกที่แตกตางออกไป จุดไมมีความกวาง ยาว เปน กลาง ไมแสดงทิศทาง แตจุดที่มีมากกวาหนึ่งจุด ถามีระยะหางและความหนาแนน ตางกันออกไปสามารถสรางใหเกิดทิศทางการเคลื่อนไหว และขนาดได

ภาพที่ 1.20 การวางตำแหนงของจุดและการเวนพื้นที่ระหวางจุด ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.20 เปนการวางตำแหนงของจุด และการเวนพื้นที่ระหวางจุด สามารถทำ ใหรูสึกไดถึงการเพิ่มระยะหาง แตถานำจุดมาเรียงติดกันจะทำใหเกิดเปนเสน ใหความรูสึกของ ทิศทาง ถานำจุดมาจัดเรียงเปนเสนโคงขึ้นลง จะสามารถสรางความรูสึกเคลื่อนไหว และจังหวะได 1.4.1.2 เสน (Line) เสน คือจุดที่ตอเนื่องกันในทางยาว หรือรองรอยของจุดที่เคลื่อนไปในทิศทางเดียวกัน ความยาวของเสนทำหนาที่เปนขอบเขตที่วาง ขอบเขตของสิ่งของ ขอบเขตของรูปทรง ขอบเขต ของน้ำหนัก ขอบเขตของสี และเปนแกนของรูปราง และรูปทรง เสนขั้นตน มี 2 แบบคือ เสนตรง และเสนโคง แตจะพัฒนาออกไปเปนแบบตาง ๆ กัน เชน เสนฟนปลาเกิดจากเสนตรงมาประกอบกัน หรือเสนคลื่น เกิดจากเสนโคงมาประกอบกัน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 27

ภาพที่ 1.21 เสนตรง เสนโคง เสนฟนปลา เสนคลื่น ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.21 เปนภาพ เสนตรง เสนโคง เสนฟนปลา เสนคลื่น ซึ่งแตละเสนสามารถ แสดงความรูสึกไดแตกตางกันไป ตามทิศทางของเสนที่ปรากฏ ในทางเรขาคณิต เสนจะไมมีความกวาง จะมีแตความยาว เสนอาจเกิดจากการเชื่อมกัน ของจุดสองจุดที่หางกัน ในระยะหนึ่ง ก็ไ ด หรือในงานภาพเคลื่อนไหว เสนอาจเกิดจากการ เคลื่อนไหวของจุดจากบนลงลาง และจากซายไปขวา ในทางกราฟ ก เส น จะมี ค ุ ณ สมบั ต ิ ไ ด หลากหลาย เชน มีความหนา หรือความบางอาจเกิดจากการเขียนดวยดินสอ ปากกา พูกัน หรือ เมาส เสนตรง และเสนโคง มีความตอเนื่องหรือหักมุม ถาเสนขยายตัวในทางขนานจะกลายเปน ระนาบหรือพื้นผิว ดังนั้นลักษณะของเสน จึงมีหลายแบบ ไดแก เสนตรง เสนโคง เสนคลื่น เสน ฟน ปลา เสน กนหอย เสน ชัด เสน มัว ถาแบง เสนออกเปนชนิดตามทิศทางและความหนาของ เสน ไดลักษณะของเสนอีกแบบหนึ่ง คือ เสนดิ่ง เสนราบ เสนเฉียง เสนแนวลึก เสนหนา เสนบาง นอกจากรูปแบบของเสนที่กลาวมาแลว ยังมีเสนอีกชนิดหนึ่งที่เกิดจากจินตนาการของผูใชงาน หรือผูชม ไดแก 1) เสนแกนของรูปทรง 2) เสนรูปนอกของกลุมรูปทรง 3) เสนที่ลากด ว ย จิน ตนาการจากจุดหนึ่งไปยังจุดหนึ่ง 4) เสนโครงสรางของปริมาตร และเสนโครงสรางของ องคประกอบ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 28

ความรูสึกที่เกิดจากการใชเสน 1) เสนตรง ใหความรูสึกแข็งแรง แนนอน ตรง เขม ไมประนีประนอม หยาบ และ เอาชนะ 2) เสนคลื่น หรือเสนโคง ใหความรูสึกสบาย เปลี่ยนแปลงได เลื่อนไหล ตอเนื่อง สุภาพ แตถาใชเสนโคงแบบนี้มากๆ จะทำใหความรูสึกกังวล ขาดจุดมุงหมาย 3) เสนโคงแคบ ใหความรูสึกมีพลังเคลื่อนไหว เปลี่ยนแปลงเร็ว 4) เสนโคงกลม ใหความรูสึกที่มีระเบียบ เปนวงจร 5) เสน โคง กนหอย ใหความรูสึกการเขาสูศูนยกลาง คลี่คลาย มีการเคลื่อนไหวไม สิ้นสุด ความไมรูจักจบ 6) เสนฟนปลา ใหความรูสึกเปลี่ยนแปลงเร็ว ทำใหประสาทกระตุก เหมือนพลังไฟฟา ฟาผาความขัดแยง สงคราม 7) เสนนอน ใหความรูสึกกลมกลืนกับแรงดึงดูดของโลก การพักผอน เงียบ เฉย สงบ เชน เสนขอบฟา เสนขอบทะเล ทุงกวาง 8) เสนตั้ง ใหความรูสึกสมดุล มั่นคง แข็งแรง จริงจัง เงียบขรึม ผูดี สงา ทะเยอทะยาน รุงเรือง 9) เสนเฉียง ใหความรูสึกเคลื่อนไหว ไมมั่นคง 1.4.1.3 ระนาบ (Plane) ระนาบคื อ พื ้ น ผิ ว เรี ย บที ่ ข ยายออกไปในทางกวา งและทางยาว อาจเกิ ด จากการ เคลื่อนไหวของเสนในทางกวาง และรูปรางคือ ระนาบอยางหนึ่งในโปรแกรมคอมพิวเตอรสำหรับ ออกแบบในระบบเวกเตอร ทุก ๆ รูปรางจะประกอบไปดวยเสน (Line) และเนื้อสี (Fill) ระนาบอาจมีลักษณะเปนของแข็งหรือเปนรูพรุน อาจจะทึบหรือโปรง แสงและอาจมี พื้นผิวขรุขระหรือราบเรียบ นอกจากรูปทรงที่ถูกมองเปนระนาบแลว ยังสามารถมองกลุมของ ตั ว หนั ง สื อ กลุ  ม หนึ ่ ง เป น ระนาบได เ ช น กั น โดยมองว า ตั ว อั ก ษรแต ล ะตั ว เหมื อ นเป น จุ ดที่ ตอเนื่องกัน อาจใหความรูสึกหนักหรือเบาขึ้นอยูกับความหนาแนนของตัวอักษร นอกจากนั้นยังเขาใจไดวา ระนาบคือ พื้นผิวแบนราบ 2 มิติ ที่มีลักษณะใกลเคียงกับ รู ป ร า งของที ่ ว  า ง ระนาบสามารถสร า งรู ป ทรง 2 มิ ต ิ ได ห ลายลั ก ษณะ เช น สี ่ เ หลี ่ ย ม จัตุรัส สี่เหลี่ยมผืนผา วงกลม สามเหลี่ยม รูปทรงแบน ที่มีลักษณะตาง ๆ นอกจากนั้นในทาง มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 29

ศิลปะระนาบยังสามารถสรางรูปทรง 3 มิติไ ดอีกดวย ระนาบสัมพันธกับที่วางคือ บัง คับการ เคลื่อนไหวของที่วาง 2 มิติ เชน การใชระนาบบางใสซอนกัน การใชระนาบสานเขาดวยกัน หรือ การใชระนาบเชื่อมตอกัน

ภาพที่ 1.22 ระนาบที่ทำใหผูดูมีความรูสึก ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.22 เปนภาพระนาบที่ทำใหผูดูมีความรูสึกรวมไปกับภาพ โดยเห็นระนาบ บางตัวจะลม หรือจะไหลไปตามแรงโนมถวงของโลก เนื่องจากภาพรูปทรงตาง ๆ ที่วางอยูใน ตำแหนงพื้นที่เอียง จึงทำใหรูสึกวารูปทรงตาง ๆ จะถูกเลื่อนลงมาตามความเอียดของเสน 1.4.2 รูปราง รูปทรง ปริมาตร (Shape/ Form/Capacity) การออกแบบรูปรางและรูปทรงจะมีลักษะกายภาพที่ใกลเคียงกัน แตจะแตกตางกันในแง ของความมีมิติ “รูปราง”หมายถึงพื้นที่ใด ๆ ที่มีลักษณะ 2 มิติ มีเพียงความกวางและความยาว เทานั้น สวน “รูปทรง” หมายถึง รูปรางที่มีลักษณะเปน 3 มิติ ประกอบดวย ความยาว ความ กวาง และลึก ทำใหเกิดมวล และปริมาตรขึ้น 1.4.2.1 รูปราง (Shape) หมายถึง เสนรอบนอก (Out Line) ของวัตถุที่เรามองเห็น ซึ่งเปนลักษณะ 2 มิติ มีความกวางและความยาว ไมมีความหนาหรือความลึก เปรียบเทียบรูปราง เหมือนลักษณะรางกายที่มองเห็นไดดวยสายตา เชน รูปรางสูงโปรง รูปรางอวนทวน ในทางศิลปะ หมายถึงสิ่งที่เห็นแตเพียงขอบนอก มีลักษณะจำกัดเพียงความกวางกับสูง เชน รูปรางพื้นฐาน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 30

ไดแก รูปสามเหลี่ยม รูปสี่เหลี่ยม รูปวงกลม เปนตน สามารถนําไปใชในงานออกแบบ 2 มิติ แบง ออกเปน 3 ประเภท ดังนี้ 1) รู ป ร า งตามธรรมชาติ (Natural Shape) หมายถึ ง รู ป ร า งซึ ่ ง เกิ ด ขึ้ น เองตาม ธรรมชาติที่เราเห็นอยูทุกวัน เชน คน กอนเมฆ สัตว พืช เปนตน

ภาพที่ 1.23 รูปรางตามธรรมชาติ ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.23 เปนภาพกอนเมฆ รูปรางตามธรรมชาติที่เกิดขึ้น และสามารถมองเสน รอบนอก ในการออกแบบสามารถสรางวัตถุที่มีลักษณะ 2 มิติ มีเพียงความกวางและความยาว และรูปรางตามธรรมชาติเปนสิ่งมนุษยสามารถสื่อสารและแปลความหมายไดรวดเร็ว สามารถ นำไปประยุกตใชสำหรับสื่อทั่วไปที่ตองการนำเสนอเพียงรูปรางพื้นฐาน หรือ รูปรางตามธรรมชาติ 2) รูปรางเรขาคณิต (Geometrical Shape) หมายถึง รูปรางที่มนุษยสรางขึ น มี โครงสรางแนนอน เชน วงกลม สามเหลี่ยม สี่เหลี่ยม เปนตน

ภาพที่ 1.24 รูปรางเรขาคณิต ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 31

จากภาพที่ 1.24 เปนภาพรูปรางเรขาคณิต วงกลม สามเหลี่ยม สี่เหลี่ยม ที่มองเห็น เพียงรูปราง มีลักษณะไมเกิน 2 มิติ ในการออกแบบสามารถใชโปรแกรมทางคอมพิวเตอรกราฟก สามารถสรางรูปรางเรขาคณิตไดโดยการเลือกรูปรางที่ตองการแลวนำมาจัดวางองคประกอบ ซึ่ง รูปรางเรขาคณิตของแตละแบบจะใหความรูสึกที่แตกตางกัน 3) รูปรางอิสระ (Free Shape) หรือเรียกวา Abstract Shape หมายถึง รูปรางที่ ถูกเปลี่ยนแปลงใหงายขึ้น หรือตัดตอนใหผิดเพี้ยนไปจากความจริง อาจดัดแปลง เพื่อใหเกิด ความแปลกใหม สามารถใชในงานออกแบบที่ไมเปนทางการ ใชในการเนนคำ ขาวประกาศ ตาง ๆ เชน ประกาศลดราคา หรือระบุราคาสินคาใหเห็นอยางชัดเจน

ภาพที่ 1.25 รูปรางอิสระ ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.25 เปนภาพรูปรางอิสระ ที่สรางขึ้นเปนรูปรางหลายแฉก และภาพหัวใจ ในการออกแบบสามารถใชโปรแกรมทางคอมพิวเตอรกราฟกสรางรูปรางอิสระได โดยใชเนน ขอความ หรือประกาศเพื่อใหเปนจุดสนใจ ดึงดูดสายตาผูชมใหสนใจในสินคาหรือบริการ 1.4.2.2 รูปทรง (Form) หมายถึง โครงสรางทั้งหมดของวัตถุที่ปรากฎแกสายตาใน ลักษณะ 3 มิติ ประกอบดวยสวนกวาง สวนยาว สวนหนาหรือลึก จะใหความรูสึกเปนแทง มี เนื้อที่ภายในมีปริมาตร และมีน้ำหนัก สามารถแบงเปน 3 ประเภท ดังนี้ 1) รูปทรงเรขาคณิต เปนรูปพื้นฐานแบบงาย ๆ ในลักษณะเรขาคณิต เชน วงกลม วงรี สามเหลี่ยม ฯลฯ มีโครงสรางที่แนนอน เหมาะสำหรับงานออกแบบที่ตองการความเปนทางการ ดูมั่นคงและ เปนระเบียบเรียบรอย มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 32

1

3

2

7

4

8

5

6

9

ภาพที่ 1.26 รูปทรงเรขาคณิต ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.26 เปนภาพรูปทรงเรขาคณิตประเภทตาง ๆ ไดแก 1. สามเหลี่ยม (Triangular ) มีดาน 3 ดาน มีมุม 3 มุม 2. ปรามิดฐานสามเหลี่ยม (Tetrahedrom) ปรามิดฐานสามเหลี่ยม ประกอบดวย ดานสามเหลี่ยม 4 ดาน มุม 4 มุม ขอบ 6 ขอบ 3. ปริซึมรูปหาเหลี่ยม (Pentagonal) มีหนาตัด (ฐาน) ทั้งสองขางเปนรูปหาเหลี่ยมทั้ง สองอยูในระนาบที่ขนานกัน 4. กรวย (Cone) มีฐานเปนรูปวงกลม มียอดแหลมที่ไมอยูในระนาบเดียวกันกับฐาน 5. ลูกบาศก (Cube) ปริซึมซึ่งมีหนาตัดเปนรูปสี่เหลี่ยมจัตุรัสที่เทากันทุกหนา 6. รูปแปดดาน (Octahedron) มีดาน 8 ดาน มีมุม 8 มุม 7. ทรงกระบอก (Cylinder) มีฐานสองฐานเปนรูปวงกลมที่เทากันทุกดาน และอยูบน ระนาบที่ขนานกัน 8. ทรงกลม (Sphere) มีดานขางเปนผิวโคงเรียบ และจุดทุกจุดบนผิวโคงอยูหางจาก จุดคงที่จุดหนึ่งเปนระยะเทากัน 9. ปริซึมหกเหลี่ยม (Hexaconal Prism) มีหนาตัด (ฐาน) ทั้งสองขางเปนรูปหก เหลี่ยมทั้งสองอยูในระนาบที่ขนานกัน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 33

2) รูปทรงธรรมชาติคือ รูปที่ถายทอดและเลียนแบบมาจากธรรมชาติ เชน คน สัตว สิ่งมีชีวิต และสิ่งของตาง ๆ ใหความรูสึกที่คุนเคย เหมาะกับงานออกแบบที่ตองการสื่อสาร อยางตรงไปตรงมา เขาใจงาย ไมซับซอน

ภาพที่ 1.27 รูปทรงธรรมชาติ ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.27 เปนภาพตนจามจุรียักษ ซึ่งเปนสถานที่ทองเที่ยวแหงหนึ่งของจังหวัด กาญจนบุรีที่ถายทอดความเปนธรรมชาติที่สวยงาม ตามรูปทรงที่เกิดขึ้นเองโดยปราศจากการ ดัดแปลง ใหความรูสึกที่คุนเคย เขาใจงาย ไมซับซอน เนื่องจากรูปทรงธรรมชาติเปนสิ่งที่เราพบ เห็นเปนประจำในชีวิตประจำวัน 3) รูปทรงอิสระ เปนรูปที่เกิดจากการเพิ่มเติม ดัดแปลง ตัดทอนรูปทรงเรขาคณิต และรูปทรงธรรมชาติ เชน ดอกไม เปลวไฟ น้ำตก จะมีโครงสรางที่ไ มแนน อนตายตัว ทำ ความรูสึกเคลื่อนไหว เปนจังหวะและอิสระ เหมาะสำหรับงานออกแบบที่ตองการความแปลกตา และดึงดูดความสนใจ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 34

ภาพที่ 1.28 รูปทรงอิสระ ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.28 เปนภาพรูปทรงอิสระ เกิดจากการเพิ่มเติม ดัดแปลง ตัดทอนรูปราง ในการออกแบบสามารถใชเครื่องมือจากโปรแกรมคอมพิวเตอรวาดรูปทรงอิสระได โดยมีใหเลือก หลายรูปแบบ เชน รูปดอกไม ตนไม ใบไม เพื่อนำมาตกแตงงานออกแบบใหมีความนาสนใจมาก ขึ้น 1.4.2.3 ปริมาตร (Capacity) หมายถึง ปริมาณสามมิติในวัตถุ หรือรูปทรงสามมิติ ซึ่งยึดถือหรือบรรจุอยูในภาชนะ ไมวาจะสถานะใดก็ตาม ปริมาตรระบุปริมาณเปนตัวเลขโดยใชหนวยกำกับ เชน ลูกบาศกเมตร นอกจากนี้ยัง เปน ที่เขาใจกัน โดยทั่วไปวา ปริมาตรของภาชนะคือ ความจุของภาชนะ เชน ปริมาณของของไหล (ของเหลวหรือแกส) ที่ภาชนะนั้นสามารถบรรจุได มากกวาจะหมายถึง ปริมาณเนื้อวัสดุของภาชนะ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 35

ภาพที่ 1.29 ปริมาตรของรูปทรงสามมิติ ที่มา : Bing (2021) จากภาพที่ 1.29 เปนภาพปริมาตรของรูปทรงสามมิ ติ ไดแก รูปทรงกลม รูปทรง สี่เหลี่ยม รูปทรงกระบอก รูปทรงกรวย ซึ่งรูปทรงตาง ๆ จะประกอบดวย ความยาว ความกวาง และลึก ทำใหเกิดมวล และปริมาตรขึ้น ในการออกแบบสามารถใชโปรแกรมคอมพิว เตอร ทางดานสามมิติสรางรูปทรงตาง ๆ ได เพื่อนำไปใชในการนำเสนอสื่อที่ตองการรายละเอียด มากกวาสองมิติ เชน การออกแบบอาคาร การออกแบบภายใน หรือการออกแบบทั่ ว ไปที่ ตองการใหรายละเอียดทุกมุมมอง 1.4.3. ทัศนียภาพ (Perspective) เกิดจากการพยายามที่จะเลียนแบบสิ่งที่ตาเห็นคือ มี การเห็น ระยะสิ่งที่อยูขางหนาและขางหลัง โดยสิ่ง ที่อยูดานหนาจะมีขนาดใหญกวาสิ่งที่อยู ดานหลัง เชน การมองเห็นคนที่กำลังเดินมาในระยะไกล สายตาจะมองเห็นคนขนาดเล็ก แตพอ เดินเขามาในระยะใกล ภาพก็จะใหญและชัดเจนขึ้นตามลำดับ 1.4.3.1 พื ้ น ผิ ว (Texture) คื อ การถั ก ทอลายบนพื ้ น หน า ของสสาร พื ้ น ผิ ว ใน สิ่งแวดลอมชวยทำใหเขาใจธรรมชาติ เชน หนามเปนระบบชวยปองกันของกลีบกุหลาบ เปนตน พื้นผิวเปนองคประกอบสำคัญในงานออกแบบ ไมวาจะเปนงานออกแบบภายใน ไปจนถึงใบปลิว สำหรับการขายทางการตลาด พื้นผิวเปนลักษณะทางกายภาพ หรือความรูสึก เชน สีที่ทำใหเกิด ความรูสึกตาง ๆ และกระดาษที่มีทั้งชนิดที่เปนพื้นผิวเรียบ และขรุขระ หรือเปนปุม ๆ ในทาง กายภาพอาจสัมผัสกับผิวดวยมือแลวทำเกิดความใหรูสึก หรือในทางความรูสึกอาจสัมผัสเนื้องาน ด ว ยสายตาโดยไม ต  อ งสั ม ผั ส ด ว ยมื อ พื ้ น ผิ ว นั ้ น สามารถสร า งอารมณ แ ละเชื ่ อ มโยงไปยั ง มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 36

ประสบการณตาง ๆ เชนเดียวกับความแตกตางระหวางภาพถายกับภาพเขียนที่อาจวาดไดเหมือน จริง แตยังรูสึกตางจากภาพถาย ความงามของพื้นผิวใหความรูสึกที่ลึกซึ้งไดหลายแบบ เชน รูสึก เหนียว แหลม ดาน ภาพ ๆ หนึ่ง อาจจะมีพื้นผิวไดหลายชนิด ซึ่ง อาจจะขัดแยงกันทำใหเกิด ความรูสึกอยางใดอยางหนึ่งขึ้นมาได นักออกแบบจะตองจัดการกับพื้นผิ​ิวทั้งทางกายภาพ และ ความรูสึกดวยสายตา ซึ่งขึ้นอยูกับประสบการณของผูดู ถือเปนหนาที่สำหรับนักออกแบบที่จะ จัดการกับอารมณตาง ๆ ตามที่ตัวเองตองการ

ภาพที่ 1.30 ลักษณะของพื้นผิว ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.30 เปนลักษณะของพื้นผิวของกระดาษสีเหลืองที่เปนรอยยับ ซึ่งเกิดจาก การขยำใหยับ แลวคลี่ออกมาวางใหแผนกระดาษกางออก จะเห็นรอยยับซึ่งเปนพื้น ผิวที่สามารถ นำไปประยุกตใชในการจัดวางองคประกอบได เชน นำไปใชเปนภาพพื้นหลัง สำหรับงานที่ไ ม ตองการความเปนทางการ 1.4.3.2 พื้นผิวรูปธรรม พื้นผิวรูปธรรมเกิดไดหลายวิธี เชน จากการเฉือน การขูดขีด หรือการเผาใหไหมไมเวนแมแตการเขียนลายมือที่หวัด หรือเขียนแบบไมตั้งใจ ก็สามารถสราง พื้นผิวรูปธรรมได 1.4.3.3 พื้นผิวกลมกลืนและขัดแยง รายละเอียดของพื้นผิวมีไดทั้ง แบบกลมกลืน และแบบขัดแยง ซึ่งมีเรื่องของปริมาณเขามาเกี่ยวของ เชน พื้นผิวของถุงมือแบบแนบชิด ทำให เกิดความรูสึกทางพื้นผิวกลมกลืนกัน แตถานำผิวของทางลูกรังในชนบทมาเทียบกับพื้นผิว คอนกรีตในเมืองกรุงก็จะเกิดความขัดแยงกันที่รุนแรง

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 37

1.4.4 ขนาด (Scale) งานกราฟกชิ้นหนึ่งอาจมีขนาดที่เล็กมากไปจนถึงขนาดใหญที่สุด ขนาดในความหมาย ของนักออกแบบคืออะไร ขนาดสามารถเปนไดทั้งตัวกระทำ (Subjective) หรือตัวถูกกระทำ (Objective) ในเชิงตัวถูกกระทำมักจะมีขอตกลงรวมกันในการอาน เชน แผนที่ซึ่งมีขนาดกำกับ วามีมาตราสวนเทาใด ทำใหจินตนาการตอขนาดจริง ของสถานที่นั้น ๆ ได ในขณะที่ในเชิง ตัว กระทำ ขนาดจะเปนเหมือนการอางอิงขณะของสิ่งใดสิ่งหนึ่ง เชน หอง ๆ หนึ่งมีขนาดเทาใด เมื่อ เปรียบเทียบกับขนาดของมนุษยคือ ขนาดเปนตัวกระทำการวัดสิ่ง ตาง ๆ เพื่อชวยใหสามารถ ออกแบบใหเขากับวิถีชีวิตตามขนาดของรางกายของเรา ขนาดขึ้นอยูกับบริบทที่มันตั้งอยู โดย ปกติกระดาษหนึ่งแผนจะปรากฏตัวพิมพจำนวนหนึ่ง หรือภาพใด ๆ บนกระดาษ ในที่นี้บริบท คือ ตัวกระดาษ ในขณะที่ตัวอักษรและภาพถูกเปรียบเทียบกับขนาดของกระดาษ ขนาดยังมีผล ตอหนาที่ เชน ตัวหนังสือที่มีขนาด 12 pt. อาจเปนขนาดที่มนุษยเริ่มอานไดงายกวาขนาดที่เล็ก กวานี้ หรือฉลากยาสำหรับคนสูงอายุที่สายตายาวอาจตองมีตัวอักษรที่ขนาดใหญ

ภาพที่ 1.31 ขนาดตัวอักษร ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.31 เปนภาพตัวอักษรที่มีหลายขนาด โดยเริ่มจากขนาดใหญสุด เรียงลำดับ ลงมาถึงขนาดเล็กสุด ในการออกแบบตัวอักษร นอกจากจะพิจารณาประเภทของตัวอักษรใหเขา กั บ อารมณ ข องสื ่ อ แล ว การเลื อ กขนาดตั ว อั ก ษรควรให ค วามสำคั ญ เพื ่ อ ให เ หมาะสมกั บ กลุมเปาหมาย เนื่องจากอายุที่แตกตางกันทำใหความสามารถในการมองเห็นตัวอักษรไมเทากัน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 38

1.4.5 สี (Color) สี หมายถึง คลื่นแสงที่สองกระทบวัตถุ และสะทอนสูสายตามนุษยจนทำใหมองเห็นวัตถุ เปนสีตาง ๆ เชน สีแดง เขียว เหลือง สีถือเปนองคประกอบสำคัญในงานออกแบบเปนอยางมาก เนื่องจากสามารถสรางอิทธิพลและกระตุนความรูสึกของมนุษยไดแตกตางกันออกไป เชน สีแดง ใหความรูสึกรอน สีเขียวใหความรูสึกธรรมชาติ สีเหลืองใหความรูสึกถึงความรุงเรือง เรืองรอง สีมักถูกนำไปใชในงานออกแบบเพื่อสรางทัศนคติที่ดี การจดจำและสื่อความหมายที่เชื่อมโยงกับ คุณลักษณะของสีนั้น ๆ เพื่อใหเกิดผลงานอยางมีประสิทธิภาพสูงสุด นักออกแบบจะใชสีในการ สื่อความรูสึกออกมา โดยไมไดเปดเผยชัดเจน แตซอนความรูสึกไวขางในของสี จรุงยศ อรัญยะ นาค (2560)

ภาพที่ 1.32 วงจรสีในงานออกแบบ ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.32 เปนภาพวงจรสีในงานออกแบบ เกิดจากการผสมกันเปนคู เริ่มตั้งแต แมสี 3 สี แลวเกิดเปนสีใหมขึ้นมา จนครบวงจร จะไดสีทั้งหมด 12 สี ซึ่งแบงสีเปน 3 ขั้น 1.4.5.1 แหลงกำเนิดสี ในอดีตการออกแบบกราฟกนั้นมีสีดำกับสีขาวเปนพื้นฐาน ตอมาเริ่มมีสีอื่น ๆ เพิ่ม ขึ้น มาทำใหสรางความสมบูรณให กับกระบวนการออกแบบ นำมาซึ่ง สื่อสมัยใหมที่มี ผ ลใน ชีวิตประจำวันจนกระทั่งงานออกแบบกราฟกกับสีเปนสิ่งที่แยกกันไมได ในปจจุบันแหลงกำเนิด สี มี 3 ชนิด คือ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 39

1) สีที่เกิดจากแสง (RGB) เกิดจากการหักเหของแสงผานแทงแกวปริซึมมี 3 สี คือ สีแดง (Red) สีเขียว (Green) และสีน้ำเงิน (Blue) เรียกวา RGB นำมาผสมกันจนเกิดเปน สีสัน ตาง ๆ อุปกรณที่ใชแหลงกำเนิดสีแบบนี้ เชน โทรทัศน จอคอมพิวเตอร จอโทรศัพท

ภาพที่ 1.33 สีที่เกิดจากแสง (RGB) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที ่ 1.33 เป น ภาพสี ท ี ่ เ กิ ด จากแสง (RGB) มี 3 สี คื อ สี แ ดง (Red) สี เ ขี ยว (Green) และสีน้ำเงิน (Blue) เรียกวา RGB 2) สี ท ี ่ เ กิ ด จากหมึ ก สีใ นการพิ มพ (CMYK) เกิ ด จากการผสมสี ท ั ้ ง 4 สี สี ใ น เครื่องพิมพคือ สีฟา (Cyan) สีมวงแดง (Magenta) สีเหลือง (Yellow) สีดำ (Black) สีดำใช B แทน Black เรียกวา CMYK ไดออกมาเปนสีสันตาง ๆ ตามตองการ เหมาะสำหรับงานสื่อสิ่งพิมพ ตาง ๆ นักออกแบบจะใชโหมดสีนี้ในการทำงาน เพื่อใหไดสีในชิ้นงานตรงกับที่เห็นในหนาจอมาก ที่สุด

ภาพที่ 1.34 สีที่เกิดจากหมึกสีในการพิมพ (CMYK) ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 40

จากภาพที่ 1.34 เปนภาพสีที่เกิดจากหมึกสีในการพิมพ (CMYK) เกิดจากการผสมสีทั้ง 4 สี สีในเครื่องพิมพคือ สีฟา (Cyan) สีมวงแดง (Magenta)) สีเหลือง (Yellow) สีดำ (Black) 3) สีที่เกิดจากธรรมชาติ เกิดจากกระบวนการสังเคราะหทางเคมี มี 3 สี คือ สีแดง สีเหลือง และสีน้ำเงิน หลังจากนั้นจึงนำมาผสมกันจนเปนสีอื่น ๆ แหลงกำเนิดสีแบบนี้ จะเปนแบบที่เรียนกันมาตั้งแตในวิชาศิลปะที่เรียกวาแมสี (อนัน วาโซะ, 2558)

ภาพที่ 1.35 แมสี ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.35 เปนภาพวงจรสีสีขั้นที่ 1 (Primary Colors) แมสี ไดแก สีแดง สีเหลือง สีน้ำเงิน การผสมสีไวใชงานจะใชวิธีผสมจากสีที่เกิดจากธรรมชาติ โดยเริ่มจากแมสีสามสี หรือสีขั้น ที่ 1 ไปจนถึงสีขั้นที่ 2 และสีขั้นที่ 3 ตามลำดับ ดังนี้ สีขั้นที่ 1 (Primary Colors) คือ แมสี ไดแก สีแดง สีเหลือง สีน้ำเงิน สีแดง สีน้ำเงิน สีเหลือง

ภาพที่ 1.36 สีขั้นที่ 1 (Primary Colors) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 41

จากภาพที่ 1.36 เปนภาพวงจรสีสีขั้นที่ 1 (Primary Colors) แมสี ไดแก สีแดง สีเหลือง สีน้ำเงิน สี ข ั ้ น ที่ 2 (Secondary Colors) คื อ สี ท ี ่ เ กิ ด จากสี ข ั ้ น ที่ 1 หรื อ แม ส ี ผ สมกั น ใน อัตราสวนที่เทากัน จะทำใหเกิดสีใหม 3 สี ไดแก สีแดง ผสมกับ สีเหลือง ไดสี สม สีแดง ผสมกับ สีน้ำเงิน ไดสีมวง สีเหลือง ผสมกับ สีน้ำเงิน ไดสีเขียว

สีมวง สีสม สีเขียว

ภาพที่ 1.37 สีขั้นที่ 2 (Secondary Colors) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.37 เปนภาพวงจรสีสีขั้นที่ 2 (Secondary Colors) สีที่เกิดจากสีขั้นที่ 1 หรือแมสีผสมกัน ในอัตราสวนที่เทากัน จะทำใหเกิดสีใหม 3 สี สีขั้นที่ 3 (Tertiary Colors) คือ สีที่เกิดจากสีขั้นที่ 1 ผสมกับสีขั้นที่ 2 ในอัตราสวนที่เทากัน จะไดสเี พิ่มขึ้น 6 สี สีแดง ผสมกับ สีสม ไดสี สมแดง สีแดง ผสมกับ สีมวง ไดสีมวงแดง สีเหลือง ผสมกับ สีเขียว ไดสีเขียวเหลือง สีน้ำเงิน ผสมกับ สีเขียว ไดสีเขียวน้ำเงิน สีน้ำเงิน ผสมกับ สีมวง ไดสีมวงน้ำเงิน มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 42

สีเหลือง ผสมกับ สีสม ไดสีสมเหลือง สีเหลือง+สีสม = สีสมเหลือง สีแดง+สีสม = สีสมแดง สีแดง+สีมวง = สีมวงแดง สีน้ำเงิน+สีมวง = สีมวงน้ำเงิน สีน้ำเงิน+สีเขียว = สีเขียวน้ำเงิน สีเหลือง+สีเขียว = สีเขียวเหลือง

ภาพที่ 1.38 สีขั้นที่ 3 (Tertiary Colors) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.38 เปนภาพวงจรสีขั้นที่ 3 (Tertiary Colors) สีที่เกิดจากสีขั้นที่ 1 ผสม กับสีขั้นที่ 2 ในอัตราสวนที่เทากัน จะไดสีอื่น ๆ อีก 6 สี 1.4.5.2 น้ำหนักของสี (Value) หมายถึง ความสวาง หรือความมืดของสี เชน ถา นำสีขาวไปผสมกับอีกสีหนึ่งสีนั้นจะสวางขึ้น

ภาพที่ 1.39 น้ำหนักของสี (Value) ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 43

จากภาพที่ 1.39 น้ำหนักของสี (Value) เปนการไลน้ำหนักของสีใหความมืดความสวาง ที่แตกตางกัน 1.4.5.3 ความจัดของสี (Intensity) หมายถึง ความสด หรือความบริสุทธิ์ ของ สี ๆ หนึ่ง เชน สีที่ถูกสีดำผสมเขาไปจะทำใหหมนหมอง ความจัดของสีจะเรียงลำดับจากจัดสุดไป หมนสุด ดวยการเพิ่มปริมาณของสีดำที่ผสมเรียงกันไปตามลำดับ

ภาพที่ 1.40 การเรียงลำดับความจัดของสี ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.40 เปนภาพความจัดของสี (Intensity) จะเรียงลำดับจากจัดสุดไปหมนสุด 1.4.5.4 คู  สี (Complementary Colours) สี ท ี ่ อ ยู  ต รงกั น ข า มกั น ในวงจรสี ธรรมชาติ เมื่อนำมาวางคูกันจะทำใหเกิดความสดใส เพราะเปนคูสีที่ตัดกันและขัดแยงกัน ถานำ คูสีมาผสมกันจะไดสีกลาง แตถานำสีหนึ่งเจือลงไปในคูสีเล็กนอยจะทำใหเกิดความหมน สีตรง ขามจะทำใหความรูสึกที่ตัดกันรุนแรง สรางความเดน และเราใจไดมากแตหากใชไมถูกหลัก ไม เหมาะสม หรือใชจำนวนสีมากสีจนเกินไป จะทำใหความรูสึกพรามัว ลายตา ขัดแยง ควรใชสี ตรงขาม ในอัตราสวน 80% ตอ 20% หรือหากมีพื้นที่เทากันที่จำเปนตองใช ควรนำสีขาว หรือสี ดำ เขามาเสริม เพื่อตัดเสนใหแยกออกจากกัน หรืออีกวิธีหนึ่งคือการลดความสดของสีตรงขาม ใหหมนลงไป

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 44

ภาพที่ 1.41 คูสีที่อยูตรงขามกันในวงจรสี ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.41 เปนภาพคูสีที่อยูตรงขามกันในวงจรสี ไดแก สีเหลือง ตรงขามกับ สี มวง สีสม ตรงขามกับ สีฟา สีแดง ตรงขามกับ สีเขียว ในการออกแบบสามารถนำไปจัดวาง องคประกอบ ในอัตราสวน 80% ตอ20% จะทำใหงานดูนาสนใจมากขึ้น 1.4.5.5 สีขางเคียง สีที่อยูเคียงขางกันทั้งซายและขวาในวงจรสี มีความคลายคลึงกันหากนำมาจัดอยู ดวยกันจะมีความกลมกลืนกัน หากอยูหางกันมากเทาใดความกลมกลืนก็จะยิ่งนอยลง ความ ขัดแยง ก็จะมีมากขึ้น สวนใหญจะเปน สีในวรรณะเดียวกัน เชน ฟา - ฟาเขียว – เขียว การ ออกแบบโดยใชสีขางเคียงโดยเลือกจากโทนสีที่ตองการ จากนั้นเลือกสีที่อยูขางเคียงมาเปน สวนประกอบ และจัดวางองคประกอบใหเหมาะสม จะทำใหลดความขัดแยง ผลงานมีความกลื มกลืนมากขึ้น

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 45

ภาพที่ 1.42 คูสีขางเคียง ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.42 เปนภาพคูสีขางเคียงคือ สีที่อยูขางกัน เชน สีเขียว สีเขียวอมฟา และสี ฟ า หรื อ สี แ ดง สี ส  ม แดง และสี ส  ม ในการออกแบบสามารถเลื อ กใช ส ี เ พื ่ อ นำไปตกแต ง องคประกอบตาง ๆ การเลือกใชสีที่ใกลเคียง จะทำใหงานดูมีความกลมกลืน และสีไมโดดไปจาก สีหลักที่เลือกใช 1.4.5.6 วรรณะสี สีวรรณะอุนและสีวรรณะเย็น สามารถแบงวงจรสีออกเปน 2 สวนดวยเสนแนวดิ่ง ครึ่งซีกดานซาย ไดแก สีวรรณะอุน คือ เหลือง เหลืองสม สม แดงสม แดง มวงแดง และมวง อีกครึ่งซีกดานขวา สีวรรณะเย็น ไดแก สีเหลือง เหลืองเขียว น้ำเงินเขียว น้ำเงิน มวงน้ำเงิน และมวง โดยสีมวงและสีเหลืองจะเปน สี วรรณะกลาง ๆ คือ ถาอยูในกลุมสีอุนจะอุนดวย ถาอยูในกลุมรอนก็จะรอนดวย

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 46

วรรณะอุน วรรณะเย็น

ภาพที่ 1.43 สีวรรณะอุนและสีวรรณะเย็น ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 1.43 เปนภาพสีวรรณะอุนและสีวรรณะเย็น โดยแบงออกเปน 2 สวนดวย เสนแนวดิ่ง ครึ่งซีกดานซายคือ สีวรรณะอุน และครึ่งซีกดานขวาคือ สีวรรณะเย็น ตามสีที่ไลเรียง ในการออกแบบสามารถเลือกใชสีเพื่อนำไปตกแตงองคประกอบตาง ๆ การเลือกใชสีในแตละ งานจะตองใหสัมพันธกับอารมณและความรูสึกของวรรณะสี เพื่อการสื่อสารที่เขาใจ 1.4.5.7 หลักการใชสีในการออกแบบ การใชสีในการออกแบบนั้น อยูที่นักออกแบบมีจุดมุงหมายใดที่จะสรางความสนใจ ความเราใจตอผลงานเพื่อสงตอใหผูใชงานไดเขาถึงจุดหมายที่ตองการ หลักของการใชสีในการ ออกแบบมีดังนี้ 1) การใชสีวรรณะเดียวคือ กลุมสีที่แบงออกเปนวงลอของสีเปน 2 วรรณะ คือ วรรณะรอน (Warm tone) ซึ่งประกอบดวย สีเหลือง สีสม สีแดง สีมวง สีเหลานี้ใหอิทธิพล ตอความรูสึก ตื่นเตน เราใจ กระฉับกระเฉง ถือวาเปนวรรณะรอน วรรณะเย็น (Cool tone) ประกอบดวย สีเหลือง สีเขียว สีน้ำเงิน สีมวง สีเหลานี้ดูเย็นตา ใหความรูสึก สงบ สดชื่น (สี เหลืองกับสีมวงอยูไดทั้งสองวรรณะ) การใชสีแตละครั้งควรใชสีวรรณะเดียวทั้งหมด เพราะจะทำ ใหมีความเปนอันหนึ่งอันเดียวกัน (เอกภาพ) มีความกลมกลืน และมีแรงจูงใจใหคลอยตามได มาก

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 47

2) การใชสีตางวรรณะ หลักการทั่วไป ใชอัตราสวน 80% ตอ 20% ของ วรรณะสี ถาใชสีวรรณะรอน 80% สีวรรณะเย็น 20% ซึ่งการใชสีแบบนี้จะสรางจุดสนใจใหผูดู ไม ควรใชอัตราสวนที่เทากัน เพราะจะทำใหไมมีสีใดเดน และไมนาสนใจ 3) การใชสีตรงกัน ขาม สีตรงขามจะทำใหความรูสึกที่ตัดกันรุนแรง สราง ความเดน และเราใจไดมากแตหากใชไมถูกหลัก ไมเหมาะสม หรือใชจำนวนสีมากจนเกินไป จะ ทำใหความรูสึกพรามัว ลายตา ขัดแยง ควรใชสีตรงขาม ในอัตราสวน 80% ตอ20% หรือหากมี พื้นที่เทากันที่จำเปนตองใช ควรนำสีขาว หรือสีดำ เขามาเสริม เพื่อตัดเสนใหแยกออกจากกัน หรืออีกวิธีหนึ่งคือการลดความสดของสีตรงขามใหหมนลงไป ในงานดานการออกแบบ หรือการจัดภาพ การเลือกใชสีใหมีใหมีสภาพโดยรวมเปน วรรณะรอน หรือวรรณะเย็น จะสามารถควบคุมและสรางสรรคภาพใหเกิด ความกลมกลื น งดมงามไดงายขึ้น เพราะมีอิทธิพลตอใวล ปริมาตร และชองวาง สีมีคุณสมบัติที่ทำใหเกิดความ กลมกลืน หรือขัดแยง ได สีสามารถบง บอกใหเกิดจุดเดน และการรวมกันใหเกิดเปนหนวย เดียวกัน ได การใชสีในการออกแบบจำเปน ตองนำหลัก การต าง ๆ ของสีไ ปประยุกตใ ช ใ ห สอดคลองกับเปาหมายในงาน เพราะสีมีผลตอการออกแบบ ดังนี้ 1) สรางความรูสึก สีใหความรูสึกตอผูพบเห็นแตกตางกันไป ทั้งนี้ขึ้นอยูกับ ประสบการณและภูมิหลังของแตละคน สีบางสีสามารถรักษาบำบัดโรคจิตบางชนิดได การใชสี ภายใน หรือภายนอกอาคารจะมีผลตอการสัมผัส และสรางบรรยากาศได 2) สรางความนาสนใจ สีมีอิทธิพลตองานศิลปะการออกแบบจะชวยสรางความ ประทับใจ และความนาสนใจเปนอันดับแรกที่ไดพบเห็น 3) สีบอกสัญลักษณของวัตถุ ซึ่งเกิดจากประสบการณ หรือภูมิหลัง เชน สีแดง สัญลักษณของไฟจราจร หรืออันตราย สีเขียวสัญลักษณแทนพืช หรือความปลอดภัย เปนตน 4) สีชวยใหเกิดการรับรู และจดจำงานศิลปะ การออกแบบตองการให ผู พบ เห็นเกิดการจดจำในรูปแบบ และผลงาน หรือเกิดความประทับใจ การใชสีจะตองสะดุดตา และ มีเอกภาพ 5) เลือกใชสีคูตรงขามจะทำใหงานมีความแตกตาง (Contrast) ที่สูงทำใหงานดู โดดเดน การเลือกใชสีที่มีคาสีใกลเคียงกัน จะทำใหงานดูออนนุมและเปนไปในทางเดียวกัน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 48

6) เลือกสีเพียง 3 ถึง 4 สี เพื่องายตอการคุมโทนสีของงานออกแบบ การใชสีที่ มากไมใชเรื่องที่ผิด แตการใชสีที่มากหมายถึงความยากที่มากขึ้นในการทำงาน การใชสีที่นอยทำ ใหควบคุมคาสีที่ตองการควบคุมโทนสีของงานออกมาไดอยางไมยาก 1.4.5.8 สีและการสื่อความหมาย การออกแบบสื่อที่หลากหลาย นักออกแบบจะตองเลือกใชสีเขามาชวยในการสื่อ ความหมาย ไมวาจะเปนสีตัวอักษร หรือสีของภาพตาง ๆ ที่นำมาออกแบบสื่อ เพื่อเปนการสราง ความรูสึกใหเกิดอารมณรวมไปกับผลงานที่ตองการสื่อสาร ซึ่งแตละสีจะมีความหมายแตกตาง กัน ดังนั้น หากนักออกแบบเขาใจถึงความหมายของสีเปนอยางดี จะสามารถเลือกสีเพื่อนำมาใช ในการออกแบบสื่อตาง ๆ ไดอยางมีประสิทธิภาพมากขึ้น โดยความหมายของสี สามารถจำแนก ไดดังตารางที่ 1.1 ตารางที่ 1.1 สีและการสื่อความหมายทางจิตวิทยา สี ความหมาย สีเหลือง ความเฉลียวฉลาด สดใส เบิกบาน และกระฉับกระเฉง เปนสีที่ใหพลังดานความ สวางมาก ดังนั้นจึงเรียกรองความสนใจไดดี เปนสีที่เหมาะสำหรับกลุมเปาหมาย ที่เปนเด็ก หรือวัยรุน สีแดง แสดงถึงความรอนแรง ความรัก ความกลา และความแข็งแรง เปนสีที่มีค วาม อิ่มตัว หรือความสดของสีสูง สามารถสำแดงพลังไดมากกวาสีอื่น ๆ ดังนั้นจึงควร ระวังเมื่อใชเปนสีพื้นหลังในบริเวณกวาง เนื่องจากทำใหโดดเดนกวาสวนที่เปน ภาพ และอาจทำใหลาสายตาไดเมื่อมองเปนเวลานาน สีดำ แสดงถึงความมีพลัง อำนาจ นากลัว และเครงขรึม เปนสีที่มีความสวางนอยที่สุด นิยมใชในวงการแฟชั่น เนื่องจากทำใหผูใสดูมีสรีระที่ผอมบางลง ในงานออกแบบ สีดำมักถูกใชเปนสีพื้นหลัง ชวยขับใหสีอื่น ๆ ดูเดนมากขึ้น อยางไรก็ตาม การวาง ตัวอักษรสีขาวลงบนพื้นสีดำ อาจจะสรางความลำบากตอการอาน หากเลี่ยงไมได ก็ควรใชตัวอักษรสีขาวลงบนพื้นสีดำอาจสรางความยากลำบากตอการอ านได หากเลี่ยงไมไดก็ควรใชตัวอักษรที่มีความหนา หรือใหญกวาปกติ สีน้ำตาล แสดงถึงความเกาแก สงบเงียบ ถอมตน และเหมือนธรรมชาติ นิยมใชในงาน ออกแบบที่สื่อถึงการรีไซเคิล อนุรักษธรรมชาติ และตนทุนต่ำ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 49

ตารางที่ 1.1 สีและการสื่อความหมายทางจิตวิทยา (ตอ) สี ความหมาย สีเขียว แสดงถึงความสดชื่น พักผอน ธรรมชาติ และความปลอดภัย เปนสีที่ใชความรูสึก นิ่งเฉยมากกวาความเคลื่อนไหว เหมาะสำหรับงานออกแบบสำหรับผลิตภัณฑ หรือบริการดานธรรมชาติ และสุขภาพ เชน อาหารเสริม อาหารปลอดสารพิษ และสปา สีสม แสดงถึง ความอบอุน ราเริง มั่นใจ และความสุข เปนสีหนึ่ง ที่นิยมใชในงาน ออกแบบที่มีกลุมเปาหมายเปนเด็ก เนื่องจากชวยใหเกิดความคิดสรางสรรคได นอกจากนี้ยัง นิย มใชในงานโฆษณา และรายการโทรทั ศน ท ี่ เกี่ย วกั บอาหาร เนื่องจากชวยกระตุนความรูสึกหิว และทำใหอาหารดูนาทานมากขึ้น แตหากใช ในพื้นที่ที่กวางมากเกินไปอาจทำใหรูสึกลายตาได สีน้ำเงิน แสดงถึงความสงบเยือกเย็น เปนผูนำ ไววางใจ อิสระ และการติดตอสื่อสาร เปน สีที่คนสวนใหญชื่นชอบ เหมาะสมกับงานออกแบบที่เกี่ยวของกับเทคโนโลยี และ และสีฟา สินคาที่มีกลุมเปาหมายเปนผูชาย

สีมวง

แสดงถึงความลึกลับ ความเชื่อ สงางาม ฟุมเฟอย และกามารมณ เหมาะสำหรับ งานออกแบบที่เกี่ยวของกับสินคาราคาแพง เชน เครื่องประดับ หรือเสื้อผาแบ รนด เ นม หากเป น สี ม ว งออ นจะให ค วามรู ส ึ กอ อนหวาน เหมาะสำหรับงาน ออกแบบที่มีกลุมเปาหมายเปนผูหญิง สีขาว แสดงถึงความบริสุทธิ์ สะอาด เรียบงาย และความดี เปนสีที่สามารถเขากับสีอื่น ไดงาย เหมาะสมสำหรับการใชเปนสีพื้นหลัง เนื่องจากทำใหสวนที่เปนพื้น ที่ภาพ ดูเดนขึ้น อยางไรก็ตามการใชสีขาวมากเกินไป จะทำใหผลงานดูไ มเดน ไมมี ชีวิตชีวา และนาเบื่อได ที่มา: จรุงยศ อรัณยะนาค (2560)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 50

1.4.5.9 การเลือกสีในการออกแบบเชิงการตลาด เนื่องจากงานออกแบบกราฟกมักสัมพันธกับงานโฆษณาและการตลาด รวมทั้ง กระแสนิยมแฟชั่น ซึ่งอาจมีการแทนคาสีแตกตางออกไปจากหลักจิตวิทยา 1) สีดำแทนความคลาสสิก ความอมตะ ความเปนกบฏ ความลึกลับ สีดำเปน สีที่ไดรับความนิยมสูงในแวดวงการออกแบบ

ภาพที่ 1.44 การออกแบบผลิตภัณฑโดยใชสีดำ ที่มา : https://www.badnorwegian.com (2563) จากภาพที่ 1.44 เปนภาพการออกแบบโดยใชสีดำ ผลิตภัณฑครีมบำรุงผิวสำหรับเพศ ชาย ใชสีดำในการออกแบบ ทำใหงานมีความคลาสสิก ลึกลับ นาคนหา เหมาะสำหรับเพศชายที่ มีบุคลิกลึกลับ นาคนหา 2) สีขาวแทนความเปนกลาง ความออนนอม ความบริสุทธิ์ ปราศจากเชื้อโรค ความออนเยาว สีขาวมักไดรับการเลือกใหเปนสีที่สื่อในภาพโฆษณาครีมบำรุงผิว และสวนใหญใช เปนพื้นหลังของเว็บไซต

ภาพที่ 1.45 การออกแบบผลิตภัณฑโดยใชสีขาว ที่มา : https://www.pinterest.com (2563)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 51

จากภาพที่ 1.45 เปนภาพการออกแบบผลิตภัณฑโดยใชสีขาว ซึ่งสีขาวสื่อใหเห็นถึง ความบริสุทธิ์ ความสะอาด ปราศจากเชื้อโรค 3) สีเทา สีเงิน แทนการปลอดภัยและสวัสดิภาพ ความนาเชื่อถือซึ่งถือเปน สี ที่เลือกใชสำหรับธุรกิจที่สำคัญในอนาคต เพราะมนุษยยุคตอไปจะเริ่มสนใจที่ความปลอดภัยเปน หลัก

ภาพที่ 1.46 การออกแบบผลิตภัณฑโดยใชสีเทา ที่มา : https://www.pinterest.com (2563) จากภาพที่ 1.46 เปนภาพการออกแบบผลิตภัณฑโดยใชสีเทา สีเทาสื่อใหเห็นถึงความ ปลอดภัยและสวัสดิภาพ ทำใหรูสึกมั่นใจถึงความปลอดภัยในการที่จะเลือกซื้อผลิตภัณฑ 4) สีน้ำตาลแทนความสบายความคลาสสิก ในวงการแฟชั่นมักใชสีน้ำตาลเปน ตัวโฆษณา โดยใชคูสีดำและสีทอง แตบางครั้งอาจใชคูกับสีเขียวแสดงถึงธรรมชาติของโลก หรือ กระแสการออกแบบที่นำทรัพยากรธรรมชาติมาใช

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 52

ภาพที่ 1.47 การออกแบบผลิตภัณฑโดยใชสีน้ำตาล ที่มา : https://bamboodu.com (2563) จากภาพที่ 1.47 เปนภาพการออกแบบผลิตภัณฑโดยใชสีน้ำตาล สีน้ำตาลแทนความ สบายแทนความคลาสสิก เมื่อใชคูกับสีเขียว จะใหความรูสึกธรรมชาติเหมือนสีของตนไมแ ละ ใบไม 5) สีเขียวแทนความเปนธรรมชาติ ความสงบ การเกิดใหม ความเยาววัย

ภาพที่ 1.48 การออกแบบผลิตภัณฑโดยใชสีเขียว ที่มา : https://dribbble.com (2563)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 53

จากภาพที่ 1.48 เปนภาพการออกแบบผลิตภัณฑโดยใชสีเขียว สีเขียวสื่อใหเห็นถึง ความเปนธรรมชาติ การเกิดใหม และความเยาววัย 6) สีสมแทนความกระตือรือรน ความอบอุน ความราเริง และความรูสึกที่เปน อิสระ ยังเปนสีที่แสดงถึงความคิดสรางสรรค และมีพลัง

ภาพที่ 1.49 การออกแบบผลิตภัณฑโดยใชสีสม ที่มา : https://www.jhornig.com (2563) จากภาพที่ 1.49 เปนภาพการออกแบบผลิตภัณฑโดยใชสีสมสื่อใหเห็นถึงความสดชื่น ความกระตือรือรน ความอบอุน ความราเริง และความรูสึกที่เปนอิสระ 7) สีชมพูแทนความบริสุทธิ์ ใหความรูสึกปลอบประโลมจิตใจ และความรูสึก ภายในใหสงบลง แสดงถึงความมีน้ำใจ ความอบอุน และความทะนุถนอม จึงเหมาะกับสินคาที่ ออนโยน เชน สินคาเด็ก หรือสินคาความสวยความงามสำหรับสุภาพสตรี

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 54

ภาพที่ 1.50 การออกแบบผลิตภัณฑโดยใชสีชมพู ที่มา : https://www.akerufeed.com (2563) จากภาพที่ 1.50 เปนภาพการออกแบบผลิตภัณฑโดยใชสีชมพู สีชมพูสื่อถึงความอบอุน นาทะนุถนอมจึงเหมาะกับสินคาที่ออนโยน เชน น้ำหอม หรือสินคาสำหรับสุภาพสตรี 8) สีมวงแทนความหรูหรา ชั้นสูง มีปญญา มีความนิยมในธุรกิจหรูหรา สีมวง ออนนั้นเหมาะกับการออกแบบเชิงสิทธิสตรี หรือดึงดูดความสนใจของเด็ก ๆ

ภาพที่ 1.51 การออกแบบผลิตภัณฑโดยใชสีมวง ที่มา : https://thedieline.com (2563) จากภาพที่ 1.51 เปนภาพการออกแบบผลิตภัณฑโดยใชสีมวง สีมวงสื่อถึงความหรูหรา มีความนิยมในธุรกิจหรูหรา 9) สีแดงแทนความมีพลังงาน กิเลส ความกลาหาญ ความรัก ความอันตราย ความกาวราว การดึงดูดทางเพศ สีแดง เปนสีที่ไดรับความนิยมมากสีหนึ่งในแวดวงการตลาดบาง มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 55

แหง เชน ประเทศจีน สีแดง หมายถึง ความโชคดี สีแดงจะเปนสีที่กระตุนอารมณที่สื่อถึงความ รอนแรงไดดีที่สุด

ภาพที่ 1.52 การออกแบบผลิตภัณฑโดยใชสีแดง ที่มา : https://packageinspiration.com (2563) จากภาพที่ 1.52 เปนภาพการออกแบบผลิตภัณฑโดยใชสีแดง สีแดงสื่อถึงความมีพลัง ทั้งดานบวกและดานลบ สีแดงจะเปนสีที่กระตุนอารมณที่สื่อถึงความรอนแรงไดดีที่สุด 10) สีเหลืองแทนความราเริง สนุกสนาน มีความสุข มีไอเดีย มักใชกับการ เปลี่ยนภาพลักษณของแบรนดที่ตองการภาพลักษณใหม

ภาพที่ 1.53 การออกแบบผลิตภัณฑโดยใชสีเหลือง ที่มา : https://scottsnyderphoto.com (2563) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 56

จากภาพที่ 1.53 เปนภาพการออกแบบผลิตภัณฑโดยใชสีเหลือง สีเหลืองสื่อถึงความ สนุกสนาน ราเริง มีความสุข 1.5 บทสรุป การออกแบบ หมายถึง การสรางสรรคสิ่งใหม หรือปรับปรุงดัดแปลงสิ่งที่มีอยูใหดีขึ้น ผานกระบวนการคิด การวางแผนเกี่ยวกับการปฏิบัติงานตาง ๆ ใหบรรลุเปาหมายไดผลงาน ในระดับคุณภาพ มีองคประกอบศิลปเปนสวนประกอบ และใชทฤษฎีตาง ๆ เปนแนวทาง โดยผลงานออกแบบนั้น จะตองมีความสรางสรรคและมีคุณคาตอตนเองและสังคม ความสำคัญ ของการออกแบบคือ การตอบสนองตอความตองการของกลุมเปาหมาย ชวยเพิ่มคุณคาทางสุนทรียศาสตรชวยใหสามารถตอบสนองพฤติกรรมผูใชไดตรงตามวัตถุประสงค ทำใหการแสดงออกทางความคิดและการสื่อสารขอมูลมีความแมนยำ ชัดเจน และเขาใจ แนวคิ ด ทางการออกแบบแต ล ะสไตล น ั ้ น บางแนวคิ ด ใกล เ คี ย งกั น เนื ่ อ งจากการ ประยุกตใชและดัดแปลงผสมผสานกันมา สไตลสมัยใหมจะเนนเรื่อง ประโยชนใชสอยเปนหลัก รูปทรงเรียบงาย และตัดทอนสิ่ง ไมจำเปน ออก และการมุง เนนประโยชนใชสอยมากเกินไป เพราะทำให ข าดแรงบั ล ดาลใจต อ การแสวงหาคุ ณ ค า ใหม ๆ ดั ง นั ้ น สไตล ห ลั ง สมั ย ใหม จึงยึดหลักคตินิยมผสมผสาน คุณคาทางอารมณ และตอบสนองคนเฉพาะกลุม สไตลมินิมัลจะใหความสำคัญกับความเรียบงายใชองคประกอบนอย แตไดประสิทธิภาพ สู ง สุ ด นิ ย มเส น สายดู แ ข็ ง เป น เหลี ่ ย มคม การจั ด วางพื ้ น ที ่ ว  า งอย า งอิ ส ระปรั บ เปลี ่ ย นได ตามประโยชน ใชสอย มักใชสีแบบโมโนโครมหรือสีโทนเย็น ในขณะที่สไตลลอฟตจะมีเอกลักษณ เฉพาะตัวคือ การใหความเคารพตอวัสดุ เผยใหโครงสรางทางสถาปตยกรรม แบบไมปรุงแตงใดๆ ให ความรูสึกมั่นคงแข็งแรง และดิบหยาบ สวนสไตลวินเทจและเรโทรนั้นสื่อถึงความเกาแก ยอนยุคสูอดีตคลายคลึงกัน ในขณะที่สไตลเรโทรจะหมายถึงการหวนคืนสูอดีตที่นิยมราว 20-50 ป มีรูปแบบสนุกสนาน สีสันฉูดฉาดบาดตาและลวดลายเรขาคณิต การออกแบบที่ดีจำเปนตองคำนึงถึงหลักการออกแบบเพื่อจัดวางองคประกอบตาง ๆ อย า งพอดี มี ค วามสมดุ ล เป น หลั ก การพื ้ น ฐานที ่ น ั ก ออกแบบควรให ค วามสำคั ญ ของ องค ป ระกอบโดยรอบความมี เ อกภาพเป น การสร า งความสั ม พั น ธข ององค ป ระกอบต า ง ๆ ภายในผลงานเพื่อใหเกิดความรูสึกกลมกลืนดูเปนอันหนึ่งอันเดียวกัน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความรูเบื้องตนเกี่ยวกับการออกแบบ 57

การซ้ำคือ การนำองคประกอบที่รูปรางเหมือนกันขนาดเทากันจัดวางซ้ำ ๆ อยางตอ เนื่อง การเนน คือ การทำใหองคประกอบหรือพื้นที่บริเวณใด บริเวณหนึ่ง ดึง ดูดสายตาผูชม สัดสวนคือ การสรางความสัมพันธระหวางขนาดองคประกอบตาง ๆ ภายในผลงาน สรุปองคประกอบของการออกแบบ องคประกอบพื้นฐานทางศิลปะที่จะถูกนำมาใชในการออกแบบ ประกอบดวย 1) จุด เสน ระนาบ 2) รูปราง รูปทรง ปริมาตร 3) ทัศนียภาพ 4) ขนาด และ 5) สี การผสมสีไวใชงานจะใชวิธีผสมจากสีที่เกิดจากธรรมชาติ โดยเริ่มจากแมสีสามสี หรือสี ขั้นที่หนึ่งไปจนถึงสีขั้นที่สอง และสีขั้นที่สามตามลำดับ ดังนี้ สีขั้นที่ 1 คือ แมสี ประกอบดวย 3 สี สีขั้นที่ 2 คือ สีที่เกิดจากสีขั้นที่ 1 หรือแมสีผสมกัน ในอัตราสวนที่เทากัน จะทำใหเกิดสีใหม 3 สี สีขั้นที่ 3 คือ สีที่เกิดจากสีขั้นที่ 1 ผสมกับสีขั้นที่ 2 ในอัตราสวนที่เทากัน จะไดสเี พิ่มขึ้น 6 สี น้ำ หนักของสี หมายถึง ความสวาง หรือความมืดของสี ความจัดของสี หมายถึง ความสด หรือความ บริสุทธิ์ของสี คูสี คือสีที่อยูตรงกันขามกันในวงจรสีธรรมชาติ สีขางเคียง สีที่อยูเคียงขางกันทั้ง ซายและขวาในวงจรสี สีวรรณะอุนและสีวรรณะเย็น แบงออกเปน 2 สวนดวยเสนแนวดิ่ง ครึ่งซีก ดานซาย คือ สีวรรณะอุน และครึ่งซีกดานขวา คือ สีวรรณะเย็น ตามสีที่ไลเรียง หลักการใชสีใน การออกแบบ การใชสีวรรณะเดียว คือกลุมสีที่แบงออกเปนวงลอของสีเปน 2 วรรณะ การใชสี ตางวรรณะ หลักการทั่วไป ใชอัตราสวน 80% ตอ 20% ของวรรณะสี และการใชสีตรงกันขาม สี ตรงขามจะทำใหความรูสึกที่ตัดกันรุนแรง การเลือกสีในการออกแบบเชิงการตลาด เนื่องจากงาน ออกแบบกราฟกสัมพันธกับงานโฆษณา และการตลาดรวมทั้งกระแสนิยมแฟชั่น ซึ่งอาจมีการ แทนคาสีแตกตางออกไปจากหลักจิตวิทยา

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

ความคิ ดสร้างสรรค์ในงานออกแบบ ความคิ ด สร า งสรรค เ ป น สิ ่ ง ที ่ น ั ก จิ ต วิ ท ยาและนั ก ประสาทวิ ท ยาสนใจและศึ ก ษา มาอยางยาวนาน เปนการศึกษาเพื่อหาที่มาของความคิดสรางสรรควาเกิดขึ้นไดอยางไร จากเดิมมี ความเชื่อวาความคิดสรางสรรคเกิดขึ้นที่สมองซีกขวาเทานั้น แตปจจุบันไดมีการศึกษาการทำงาน ของสมอง พบว า หากพยายามจะคิ ด สร า งสรรค โดยใช ส มองซี ก ขวาเพี ย งด า นเดี ย ว จะได ความคิดที่พูดไดแตทำไมได ดวยเหตุนี้ความคิดสรางสรรคจะเกิดจากการ ทำงานของสมองทั้ง ซีกซายและซีกขวา (เสาวนีย พิสิฐานุสรณ, 2553) สมองของคนเรานั้นแบงการทำงานเปน 2 สวนคือ สมองซีกซาย และสมองซีกขวา โดย สมองซีกซาย (Left Hemisphere) จะทำการควบคุมการทำงานอวัยวะดานขวาของรางกาย และทำงานในลักษณะของความเปนเหตุเปนผล เปนขั้นเปนตอน และเปนตรรกะ สวนสมอง ซี ก ขวา (Right Hemisphere) จะทำหน า ที ่ เ กี ่ ย วกั บ ความคิ ด สร า งสรรค จิ น ตนาการ การสัง เคราะห ความซาบซึ้ง ในดานดนตรี และศิลปะ ความสามารถในการหยั่ง หามิติตาง ๆ และการใชประโยชนจากรูปแบบและรูปทรงเรขาคณิต คนเราสามารถคิดสรางสรรคสิ่งตาง ๆ ไดนั้นเกิดจากการทำงานของสมองซีกขวา 2.1 ความหมายของความคิดสรางสรรค ดร. เอ็ดเวิรด เด โบโน (Dr. Edward de Bono) นักจิตวิทยาผูเชี่ยวชาญดานการ คิดสรางสรรคซึ่งเปนทั้งนักฟสิกส นักเขียน และที่ปรึกษาแนวคิดเชิงสรางสรรค นวัตกรรม และ ทักษะทางความคิด อีกทั้ง ยัง เคยไดรับการเสนอชื่อเขารับการพิ จารณารางวัลโนเบล สาขา เศรษฐศาสตร ใน ป ค.ศ. 2005 มีผลงานการเขียนหนังสือเกี่ยวกับความคิดสรางสรรคที่มีชื่อเสียง ไดแก Six Thinking Hats (1985) และ Six Action Shoes (1991) เชื่อวา “ความคิดสรางสรรค เป น ทั ก ษะที ่ พ ั ฒ นาได ” ให ค วามเห็ น ไว ว  า ความคิ ด สร า งสรรค ส ามารถเรี ย นรู  ไ ด ไมเกี่ยวกับพรสวรรค ส วนตัว ความคิดสรางสรรคไ มไ ดเ กิ ด จากแรงบันดาลใจเพียงเท า นั้ น ความคิ ด สร า งสรรค เ ป น มากกว า การคิ ด แตกต า ง ความคิ ด สร า งสรรค จ ำเป น ต อ งมี

ความคิดสรางสรรคในงานออกแบบ 59

หรือเปน เรื่องของการเพิ่มมูลคา สวนการคิดนอกกรอบเปนการหลีกหนีการหามเปลี่ยนแนว ความคิด โดยจะมีการเชื่อมโยงการทำงานของสมองสองซีก

ภาพที่ 2.1 ดร. เอ็ดเวิรด เด โบโน (Dr. Edward de Bono) นักจิตวิทยาผูเชี่ยวชาญดานการคิดสรางสรรค ที่มา : Thefamouspeople (2021) เกรียงศักดิ์ เจริญวงศศักดิ์ (2553) ไดใหความหมายเกี่ยวกับความคิดสรางสรรค หมายถึง ความสามารถในการมองเห็นความสัมพันธของสิ่งตาง ๆ การขยายขอบเขตความคิดออกไปจาก กรอบความคิดเดิมที่มีอยูสูความคิดใหม ๆ ที่ไมเคยมีมากอนเพื่อคนหาคําตอบที่ดีที่สุด ให แก ปญหาทีเ่ กิดขึ้น เปนการสรางสรรคสิ่งใหมที่แตกตางไปจากเดิม เปนความคิดที่หลากหลาย คิดได กวางไกลหลายแงมุม เนนทั้งปริมาณ และคุณภาพ องคประกอบของความคิดสรางสรรค ไดแก ความคิดนั้นตองเปนสิ่งใหมไมเคยมีมากอน (New Original) สามารถใชการได (Workable) และ มีความเหมาะสม (Appropriate) การคิดเชิงสรางสรรคจึงเปนการคิดเพื่อการเปลี่ยนแปลงจากสิ่ง เดิ ม ไปสู  ส ิ ่ ง ใหม ท ี ่ ด ี ก ว า ซึ ่ ง จะได ผ ลลั พ ธ ท ี ่ ต  า งไปโดยสิ้ น เชิ ง หรื อ ที่ เ รี ย กว า "นวั ต กรรม" (Innovation) จากความคิด เห็น และความหมายของนั กวิ ชาการทั้ง สองทาน สรุปไดวา ความคิ ด สรางสรรคนั้นเปนสิ่งที่เกิดจาก “พรแสวง” กลาวคือ เปนสิ่งที่สามารถพัฒนาขึ้นมาไดจากการ เรียนรูและฝกฝน เพื่อหาความคิดเพื่อใหไดมาซึ่งสิ่งใหม ๆ ที่แตกตางไปจากเดิม เปนการคิดที่ หลากหลาย กวางไกล หลากหลาย แตความคิดสรางสรรคจะตองมีองค ประกอบสำคัญ คือ ความคิดที่สดใหม ไมซ้ำใคร อีกทั้งสิ่งที่เปนผลจากความคิดสรางสรรคสามารถสรางนวัตกรรมใหม เพื่อตอบสนองความตองการในการใชงานกราฟก มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 60

นั ก วิ จ ั ย พบว า บุ ค คลจะใช ส มองส ว นใดขึ ้ น อยู  ก ั บ กิ จ กรรมที ่ บ ุ ค คลนั ้ น ปฏิ บ ั ติ บางคนมีทักษะและความสามารถที่บง บอกไดวาสามารถใชสมองดานหนึ่งมากกวาอีกดานหนึ่ง อย า งไรก็ต ามทัก ษะกระบวนการคิ ด ส วนใหญจ ำเป นตอ งใชก ารทำงานของสมองทั้ง สองซีก ประสานกัน สิ่งสำคัญที่ทำใหการคิดมีประสิทธิภาพขึ้นอยูกับความกลมกลืนของการประสานกัน ของสมองทั้ ง สองซี ก (รุ จ ิ ร ั ต น บั ว ลา, 2546 : 27-28) การที ่ บ ุ ค คลสามารถใชส มองทั้ง สอง ซีกทำงานไดอยางทัดเทียมกันจะทำใหบุคคลนั้นสามารถคิดวิเคราะห สังเคราะห และแกปญหา ไดดีกวาบุคคลที่ถนัดใชสมองซีกใดซีกหนึ่งในการทำงาน การใช ส มองเพี ย งซี ก เดี ย วส ง ผลต อ ความรู  ค วามสามารถที ่ ไ ม เ กิ ด ประโยชน นอกจากนี้ผูที่ใช สมองซีกซายอย างเดียวจะมีความบกพรองในเรื่องของการเขา สัง คม และ การใช ช ี ว ิ ต ในสั ง คม มั ก อยู  ร  ว มกั บ ผู  อ ื ่ น ไม ค  อ ยได มี ค วามเป น ตั ว ตนสู ง แต ถ  า บุ ค คลใด ใชสมองซีกขวาเพียงซีกเดียว จะเปนบุคคลที่ใชอารมณมากกวาเหตุผล ขาดความรูความสามารถ ทางดานการคิดวิเคราะห ขาดความสามารถทางดานการจดจำ และมีโอกาสในการตัดสินใจ ผิดพลาดมากกวาบุคคลที่ ใชสมองซีกซาย หากบุคคลใดมีการใชสมองทั้งสองซีก จะสงผลดีตอ การดำเนิน ชีวิตทำให การใชชีวิตอยูรวมกัน ในสัง คมไดอย างไมมี ปญ หา ดัง นั้นทุกกิจกรรม ทางการคิ ด ของมนุ ษย เกิ ด จากสมองทั ้ ง สองซี ก จะคิ ด สลั บ กั น ไปมาระหว า งสมองซีกซาย กั บ สมองซี ก ขวา บางกิ จ กรรมเน น หนั ก ที ่ ซ ี ก ใดซี ก หนึ ่ ง ตามความถนั ด ในการพั ฒ นา ความคิดสรางสรรค จึง จำเปนตองพัฒ นาทั้งในดานของการใชเหตุผล และการสรางสรรคไป พรอม ๆ กัน จึงไมสามารถแยกพัฒนาทักษะแตละดานได ดังภาพ การเชื่อมโยงการทำงานของ สมองสองซีก

ความคิดสรางสรรคในงานออกแบบ 61

สมองซีกซาย การคิดวิเคราะห การใชเหตุผล ภาษา

ทักษะตัวเลข ควบคุมการทำงานดวยมือขวา

สมองซีกขวา ความจำ ความคิดสรางสรรค การใชอารมณ

ศิลปะและดนตรี ควบคุมการทำงานดวยมือซาย

ภาพที่ 2.2 การเชื่อมโยงการทำงานของสมองซีกซายกับสมองซีกขวา ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 2.2 เปนการเชื่ อมโยงการทำงานของสมองสองซีก จะเห็นไดวาการทำ งานของสมองทั ้ ง สองซี ก จะทำงานรว มกั น มี การเชื ่ อ มต อ ความสั ม พัน ธก ั น แต จ ะมี ร ู ปแบบ ของการประมวลผลที่ตางกัน ดั ง นั ้ น ผู  ท ี ่ เ ป น นั ก ออกแบบไม ว  า จะเป น การออกแบบสิ ่ ง ใดก็ ต ามมั ก จะเริ ่ ม ต น การทำงานโดยใหความสำคัญ กั บแนวคิ ดที ่นา สนใจ กอนเปนอันดับแรก การที่จะไดแนวคิ ด ที่ น  า สนใจมาทำงาน จำเป น ต อ งผ า นขั ้ น ตอน การตี ค วามโจทย ใ ห แ ตกต า งออกไป หรื อ การหาข อ มู ล เบื ้ อ งลึ ก เพื ่ อ นำมาใช ป ระกอบการออกแบบนอกจากแนวคิ ด ที ่ ดี แ ล ว ยั ง จะตองมีองคประกอบ ที่เปนสวนประกอบสำคัญสำหรับทำใหเกิดงานกราฟกที่ดี นั่นคือ ความคิด สรางสรรค การคิดสรางสรรคจึงถือวาเปนสวนประกอบสำคัญ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 62

กลาวไดวากระบวนการคิดของสมองสามารถคิดไดหลากหลาย และแปลกใหมอยูเสมอ สวนหนึ่งขึ้นอยูกับภูมิหลังที่มีความแตกตางของแตละบุคคล สงผลใหเกิดความคิดจินตนาการที่ไม เหมือนใคร และสามารถนำไปประยุกตไ ดกับศิลปะทุกแขนง ไมวาจะเปนทฤษฎีหรือปฏิบัติ ความคิดสรางสรรคจะเชื่อมโยงความคิดที่หลากหลาย และมักจะแสวงหาทางเลือกใหมอยูเสมอ นอกจากนี้กระบวนการของความคิดสรางสรรคอาจเกิดขึ้นไดโดยบังเอิญหรือโดยตั้งใจ แตเปน ความสามารถที่ฝกฝน ระดมสมอง ความคิดสรางสรรคจึง เปนความสามารถในการมองเห็ น ความสัมพันธของสิ่งตาง ๆ และขยายขอบเขตความคิดเดิม ๆ ใหกวางและหลากหลายแงมุม ซึ่ง สิ่งเหลานี้ทำใหเกิดเปนความคิดสรางสรรคใหม ๆ ได 2.2 ความคิดสรางสรรคในงานออกแบบ ความสามารถในการจิน ตนาการหรือสรางสรรคสิ่งใหม ๆ อาจเริ่มจากการสรางสรรค ความคิ ด ใหม จ ากการผสมผสานการเปลี ่ ย นแปลง (Changing) หรื อ การนำกลั บ มาใช ใ หม (Reapplying) ความจริงแลวทุกคนมีความคิดสรางสรรค สังเกตไดตั้งแตวัยเด็กที่เด็ก ๆ มักมี จินตนาการ มีความคิดสรางสรรคที่เกิดขึ้นโดยธรรมชาติ แตเมื่อมีอายุมากขึ้น ความคิดสรางสรรค จะถูกครอบงำดวยกระบวนการการศึกษา แตอุปสรรคที่เกิดขึ้นนี้สามารถรื้อฟนใหกลับมาได แต ทั้งนี้ตองคนหาความถนัดของตนเอง ความตองการ ความพรอมของใจ และวันเวลาที่จะเปนตัว ชวยใหเกิดความคิดสรางสรรคขึ้น ความคิ ด สร า งสรรค ใ นงานออกแบบจะเกิ ด ขึ้ น ได นั ้น ทั ศ นคติ ค ื อ ส วนหนึ ่ ง ที ่ สำคัญ เนื่องจากทัศนคติที่จำเปนตองมี คือ การยอมรับการเปลี่ยนแปลง และยอมรับสิ่งใหม พรอมที่จะ เผชิญ กับความคิดที่ห ลากหลาย และความเปนไปได มีความคิดที่ยืดหยุน ตองการเห็นการ เปลี่ยนแปลงที่ดีขึ้น และพรอมที่จะปรับปรุงอยูเสมอ พฤติกรรมของผูที่มีความคิดสรางสรรคจะ ทำงานหนักเพื่อพัฒนาความคิด และแนวทางแกปญหาของตนใหดีขึ้นอยางตอเนื่อง ดวยวิธีการ เปลี่ยนแปลงแบบคอยเปนคอยไป หรือปรับปรุงใหมีความสมบูรณขึ้นตามลำดับ เพราะความคิด สรางสรรคที่เยี่ยมยอดไมเคยปรากฏวาเกิดจากการคิดเพียงครั้งเดียว หรือจากกิจกรรมสั้น ๆ ผูที่มี ความคิดสรางสรรครูดีวา การปรับปรุงใหดีขึ้นสามารถทำไดเสมอ 2.2.1 วิธีการคิดสรางสรรคที่นักออกแบบควรนำไปประยุกตใช มีวิธีการสำคัญในการ พัฒนาความคิดสรางสรรค 5 วิธี ดังนี้

ความคิดสรางสรรคในงานออกแบบ 63

2.2.1.1 วิวัฒนาการ (Evolution) เปนวิธีการปรับปรุงใหดีขึ้นดวยวิธีการแบบ สะสมทีละขั้นตอน ความคิดใหมเกิดจากความคิดหลากหลายแนวทางในการแกปญหาใหม ๆ หรือ เกิดจากแนวทางเกาที่ปรับปรุงใหดีขึ้น เชน การปรับปรุงและพัฒนาอุปกรณคอมพิวเตอร จาก เมื่อกอนมีขนาดใหญ การประมวลผลชา และไมสามารถพกพาไปไหนไดสะดวก แตวิวัฒนาการ ในปจุบันจะเห็นวาไดรับการพัฒนาใหอุปกรณคอมพิวเตอรมีหลากหลายขนาด และปรับเปลี่ยน รูปแบบใหมีความสะดวกในการพกพา สามารถใชงานไดอยางงาย รวดเร็ว และเพิ่มประสิทธิภาพ ในการทำงานมากขึ้น 2.2.1.2 การผสมผสาน (Synthesis) เปนการผสมผสานหรือสังเคราะหแนวคิด เขาดวยกัน ซึ่ง กลายเปน ความคิด ใหม ในงานออกแบบกราฟก และงานออกแบบสื่อตาง ๆ สามารถนำรูปแบบเดิมที่มีอยูมาผสมผสานหรือรวมสิ่งตาง ๆ เขาดวยกัน เปนการผสมผสานที่ตอง คำนึงถึงการจัดวางองคประกอบตาง ๆ อยางลงตัว ซึ่งจะทำใหเกิดสิ่งใหมขึ้น 2.2.1.3 การปฏิวัติ (Revolution) เปนการเปลี่ยนแปลงโครงสราง หรือการจัด ระเบียบใหม ซึ่งเปนการเปลี่ยนแปลงทีเ่ กิดขึ้นในระยะเวลาคอนขางสั้น ถึงแมผลแหงการปฏิวัติ จะมีการถกเถียงในความคิดเห็นที่แตกตาง แตในงานออกแบบกราฟกบางครั้ง การกลาที่จะ เปลี่ยนแปลงความคิดใหม เปน วิธีการคิดสรางสรรคที่ตองมุง เนนถึง ผลประโยชนที่จะไดรับ มากกว า การเปลี ่ ย นแปลงที ่ ไ ร เ หตุ ผ ล และผลกระทบที ่ ไ ด ร ั บ ต อ งเกิ ด ความคุ  ม ค า กั บ การ เปลี่ยนแปลง และสามารถใชประโยชนไดในระยะยาว 2.2.1.4 การปรับ เปลี่ยนวิธีการใหม (Reapplication) ปรับมุมมองเรื่องเกา ดวยมุมมองใหม หรือมองแบบนอกกรอบ เปนวิธีการแกปญหาโดยไมมุงเนนที่คุณสมบัติของวัตถุ หรืออุปกรณนั้น ๆ แตใหมองมุมใหมวาสามารถนำมาใชประโยชนอยางอื่นไดหรือไม ในกรณีที่ ตองแกปญหาอาจจะไดมาซึ่งวิธีการใหม เชน การใชกรรไกรเปนไขควง เปนตน ในงานออกแบบ กราฟกสามารถปรับเปลี่ยนวิธีการใหมไดหลายรูปแบบ ไมวาจะเปนการใชหลักการออกแบบ หรือ องคประกอบพื้นฐานทางศิลปะที่จะถูกนำมาใชในงานออกแบบ สามารถปรับเปลี่ยนวิธีการใหมได เชน ภาพวาดบางอยางหากมองดวยมุมมองทั่วไป จะสื่อความหมายแบบปกติ แตหากกลับดาน หรือปรับเปลี่ยนมุมมองใหม อาจสื่อความหมายที่เปลี่ยนแปลงไปจากเดิม 2.2.1.5 การปรับเปลี่ยนทิศทาง (Changing Direction) เปนการปรับเปลี่ยน ทิศทางการมองปญหาดวยวิธีการที่หลากหลายยิ่งขึ้น โดยเริ่มจากการวิเคราะหโจทยที่ไดรับ หรือ ปญหาที่ตองแกไข งานออกแบบกราฟกเปรียบเสมือนการแกไขปญหา ใหผูใชงานไดเขาใจไดงาย มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 64

ขึ้น การทำงานจึงตองพบกับปญหาที่หลากหลาย การแกไขปญหาจึงมีไดมากกวาหนึ่งวิธี บางครั้ง จึงตองปรับเปลี่ยนทิศทางการแกไขปญหา เพื่อใหไดแนวทางการแกไขปญหาที่หลากหลาย และ อาจจะไดแนวคิดและเทคนิคใหม ๆ ในการทำงานเพิ่มขึ้น การคิดอยางเปนระบบเปนกระบวนการคิดที่เกิดจากการปลูกฝงมาตั้งแตในวัยเด็ก บาง คนเติบโตมาพรอมกับทักษะการจัดการที่โดดเดน ในขณะเดียวกันก็มีคนจำนวนมากที่ยัง ตอง พัฒนาทักษะนี้ เพื่อทำใหการใชชีวิตเปนระบบระเบียบมากขึ้น นอกจากนี้ทักษะการคิดอยางเปน ระบบยังเปนอีกหนึ่งทักษะ ที่จำเปนตอการทำงานในองคกรเชนเดียวกัน เพราะจะชวยใหการ ทำงานเกิดระบบที่มีประสิทธิภาพ และจัดการงานตางๆ ไดอยางรอบคอบรวดเร็ว งานออกแบบ จึงเปนอีกงานหนึ่งที่นักออกแบบจะตองพัฒนาทักษะวิธีคิดเพื่อการออกแบบอยางเปนระบบ 2.3 เทคนิควิธคี ิดเบื้องตนเพื่อการออกแบบอยางเปนระบบ เปน แนวทางในการใช เ ทคนิ ควิธี คิ ด แก ป ญ หาในการออกแบบอย างเป นระบบ การ คำนึงถึงสิ่งใดสิ่งหนึ่งในมุมมองภาพรวมที่เปนระบบ โดยมีสวนประกอบยอย ที่มีความสัมพันธและ เชื่อมโยงกันและกันอยางมีเหตุผล เพื่อนำไปสูการแกปญหาอยางชาญฉลาด ที่จะสงผลใหการ แกปญหานั้นมีความถูกตอง แมนยำ และรวดเร็ว 2.3.1 กำหนดเปาหมายและวัตถุประสงคเปาหมาย แบงเปนวัตถุประสงคหลายขอยอย แตพื้น ฐานสำคัญ ของเปา หมายในงานออกแบบนั้น นอกจากเนนเรื่องการใช ประโยชน แ ล ว ความนาสนใจจะเกิดขึ้นไดหลายรูปแบบดวยกัน เชน การเกิดรูปแบบใหม การสื่อสารแบบใหม การสร า งภาษากราฟ ก แบบใหม ความน า สนใจมั ก จะมี ค ุ ณ สมบั ติ ของความใหม และการสรางความรูสึกประทับใจเปนสวนประกอบ สวนเปาหมายดานอื่น ๆ ที่ตองนำมา พิจารณา เชน เปาหมายทางการตลาด เปาหมายการเผยแพรขาวสาร หรือเปาหมายทางการเมือง 2.3.2 การตี ค วามโจทย เป น การนำกรอบความคิด มาพิ จ ารณาถึ ง ความเปนไปได โดยกรอบความคิ ด นั ้ น มี ก ารเลื อ กอย า งเหมาะสม เพราะความน า สนใจของการตี ค วาม เปนการเลือกกรอบความคิดใหเหมาะสมกับโจทยนั่นเอง 2.3.3 เนื้อหาจากการวิจัย เปนเรื่องของกลุมเปาหมายวาเปนใคร แบงเปนเพศ ชาย หญิง หรือบุคคลทั่วไป มีชวงอายุเทาใด นักศึกษา หรือกลุมที่มีความสนใจเฉพาะดาน ขาวสาร ที ่ ใ ห ม ี ร ะดั บ ความยากง า ย มี ค วามเป น สากลหรื อ ไม หรื อ เจาะจงเฉพาะคนในประเทศ

ความคิดสรางสรรคในงานออกแบบ 65

หรือชาวตางชาติ ซึ่งผูออกแบบจำเปนจะตองรูและเขาใจเพื่อวางแผน ดำเนินการกับขาวสาร ออกแบบ และนำเสนอใหตรงจุดกับกลุมเปาหมายที่ตองการไดอยางถูกตอง 2.3.4 แนวความคิด มาจากการคนควาเนื้อหาแลวนำมารวบยอด เปนเรื่องยากที่ จะ จำกั ด ว า แนวความคิ ด นั ้ น ควรมาจากไหน เพราะสามารถดึ ง สิ ่ ง ที ่ น  า สนใจในเนื ้ อ หามา เปนแนวความคิดไดทั้งนั้น แตแนวความคิดนั้นมักเปนที่มาของตัวแสดงออกมาอยูเสมอ 2.3.5 ตั ว แสดงออก เป น สิ ่ ง ที ่ ส ื บ ค น จากเนื ้ อ หา ถ า ขาดตั ว แสดงออกเหมื อ น ขาดเครื่องมือในการสื่อสาร ปกติพื้นฐานตัวแสดงออกที่งายที่สุดคือ ตัวอักษรในภาษาเขียน 2.3.6 บริ บ ท เป น กติ ก าทางสั ง คมเปรี ย บเหมื อ นการสร า งระบบหนึ ่ ง เพื ่ อ รองรั บ อี ก ระบบหนึ ่ ง เช น สร า งระบบเสาและคานเพื ่ อ รองรั บ ระบบแรงดึ ง ดู ด ของโลก เชนเดียวกับงานกราฟก ที่ตองสรางภาษากราฟกมารองรับโจทย เชน จะออกแบบฉลากยาสำหรับ ผูสูง อายุตองทำตัวหนัง สือขนาดใหญ และตองใสสีสะทอนแสงเพื่อรองรับระบบสายตาของ ผูสูงอายุใหมองเห็นไดอยางชัดเจนยิ่งขึ้น การออกแบบที่กำลังถูกนำมาใชอยางกวางขวางกับองคกรตางๆ เกิดขึ้นจากกระบวนการ คิดสรางสรรคที่นำมาประยุกตใชกับการออกแบบ ดังนั้นการปลูกฝงระบบวิธีคิดใหเกิดขึ้นกับ บุคลากรในองคกรที่จะนำไปประยุกตใชในการทำงาน นับเปนกระบวนการที่ตองมีการพัฒ นา อยางตอเนื่อง ซึ่ง จะชวยใหองคกรสามารถสรางสรรคสิ่งใหม ๆ ทั้ง ในดานการออกแบบการ ประดิษฐคิดคน หรือนวัตกรรมได 2.4 กระบวนการการคิดสรางสรรคในงานออกแบบ 2.4.1 การทำความเขาใจเกี่ยวกับปญหา (First Insight) คือ ระยะที่เขาใจถึงปญ หาที่ ไดรับและพรอมจะทำการแกไขปญหา การสรางความเขาใจเกี่ยวกับโจทยหรือปญหาเปนขั้นตอน สำคัญในการออกแบบ เพราะปญหาในการออกแบบไมชัดเจน จำเปนตองใชความพยายามในการ ทำใหเกิดความเขาใจอยางถองแท 2.4.2 การเตรียมการ (Preparation) คือ ความพยายามที่จะสรางความคิดสำหรับการ แกไขอยางรูตัว เปนขั้นตอนที่มีความสำคัญ และเปนชวงระยะเวลาที่ตองทำงานหนัก เพราะการ เกิดความคิดขึ้นมาไมใชเรื่องบังเอิญ แตเปนผลจากการใชเวลาของการเตรียมการ การศึกษา และ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 66

การทำงานที่มุงมั่นเกี่ยวกับปญหาเปนเวลานาน จนสามารถรวบรวมเรื่องราวของปญหาไดมาก ที่สุด 2.4.3 การฟกตัวของความคิด (Incubation) คือ ระยะของความสงบ และหยุดพักความ พยายามใชความคิดอยางตั้งใจ เปนการถอนตัวออกจากปญหาระยะหนึ่ง โดยหันไปทำอยางอื่น เพื่อปลอยใหจิตใตสำนึกไดทำงานในการดึง ความรู ประสบการณที่เก็บไวขึ้นมาใชในการเสนอ แนวทางแกปญหา 2.4.4 การเกิดประกายความคิด (Illumination) คือ การทำงานของจิตใตสำนึกผสมผสาน กับจินตนาการและความชาญฉลาดเฉพาะตัว ชวยใหเกิดประกายความคิดทีม่ ีโอกาสที่จะเปนไปได เกี่ยวกับวิธีการแกปญหาเขามาในชวงที่ไมคาดหวัง หากไมไดรับการเอาใจใส ประกายความคิดนั้น อาจจะหายไป ซึ่งประกายความคิดนี้เปนเพียงจุดเริ่มตนเทานั้นแตยังขาดรายละเอียด และความ สมบูรณพอที่จะนำไปใชงานจริง 2.4.5 การพัฒนาใหสัมฤทธิผล (Verification) คือ ระยะสุดทายเพื่อทำใหสิ่งที่คิดไดแลว เกิดสัมฤทธิผลในการนำไปใชแกปญ หาดวยการนำขอมูล ความรู และความชำนาญตาง ๆ มา ตรวจสอบพัฒนาและแกไข ทำใหแนวความคิดมีความชัดเจนและรอบคอบมากขึ้น จะทำใหเกิด การเปลี่ยนแปลงจากการเปนแคแนวความคิดใหกลายเปนตนแบบสำหรับการผลิตและจำหนาย ตอไป กระบวนการคิ ด สร า งสรรค ใ นงานออกแบบ สามารถสรุ ป ได ว  า เกิ ด จาก ความคิดสรางสรรคอันเปนผลจากการทำงานของสมองซีกซายและซีกขวา มีการทำงานสลับกัน อย า งเชื ่ อ มโยงและสั ม พั น ธ ก ั น เทคนิ ค วิ ธ ี ค ิ ด เบื ้ อ งต น เพื ่ อ การออกแบบอย า งเป น ระบบ ประกอบดวย การที่นักออกแบบจะสรางสรรคผลงานจากความคิดสรางสรรค โดยใชเทคนิควิธีคิดใน การออกแบบอยางเปนระบบเพื่อนำมาซึ่งกระบวนการคิดสรางสรรคสำหรับการออกแบบ สิ่งที่ จำเปน ตองศึกษาเพื่อใหสามารถออกแบบไดอยางมีประสิทธิภาพนับเปนพื้นฐานสำคัญ ที ่ นั ก ออกแบบควรศึกษานั้นคือ กระบวนการการคิดเชิงออกแบบ การทำธุรกิจในปจจุบัน องคกรสวนใหญใหความสำคัญและสนใจในการเรียนรูเรื่องการ ออกแบบ ทั้งที่องคกรไมไดทำธุรกิจเกี่ยวกับความสรางสรรคนั้นผลิตผลิตภัณฑความสวยความ งาม แตที่ตองทำความเขาใจกับเรื่องของการออกแบบ เพราะในยุคนี้การออกแบบเปนไดมากกวา

ความคิดสรางสรรคในงานออกแบบ 67

การคิดคน สรางสรรคสิ่ง ใหมๆ ใหออกมาเปนวัตถุจับตองได แตการออกแบบสามารถนำไป ประยุกตใชไดกับทุกองคกร ซึ่ง ในอุตสาหกรรมตาง ๆ การออกแบบที่กำลังถูกนำมาใชอยาง กว า งขวางกั บ องค กรต า ง ๆ คื อ กระบวนการคิ ด เชิ ง ออกแบบ กระบวนการคิ ด นี ้ ถ ู กนำมา ประยุกตใชกับการบริหารองคกร ตลอดจนปลูกฝงบุคลากรใหฝกวิธีคิดรูปแบบนี้ เพื่อที่จะนำไป ประยุ ก ต ใ ชใ นการทำงานในหน วยงานของตน ซึ ่ ง กระบวนการคิ ด รู ป แบบนี ้ มี ล ั กษณะและ กระบวนการที่สรางสรรคขึ้นมา โดยเชื่อวาเปนหลักการที่ชวยทำใหองคกรกาวหนาและประสบ ความสำเร็จ อีกทั้งยังชวยพัฒนาองคกรใหกาวสูองคกรที่มีความคิดสรางสรรคไดอยางสมบูรณ 2.5 กระบวนการการคิดเชิงออกแบบ (Design Thinking Process) การทำความเขา ใจในขั ้น ตอนการคิ ดเชิง ออกแบบจะสามารถลำดั บการปฎิ บั ต ิ ก าร ตลอดจนรูวิธีคิดและกระบวนการในการแกไขปญหาตาง ๆ ไปจนถึงสามารถสรางนวัตกรรมหรือ ผลลัพธเพื่อมาตอบโจทยที่ตองการได ซึ่งกระบวนการการคิดเชิงออกแบบในรูปแบบสากลนั้นมี การสรางสรรคเปนขั้นตอน ดังนี้ 2.5.1 ขั้นตอนกระบวนการการคิดเชิงออกแบบ 2.5.1.1 การเขาใจปญหา (Empathize) เปนขั้นแรกที่ตองทำความเขาใจกับ ปญ หาใหถองแท ตลอดจนเขาใจกลุมเปาหมาย หรือเขาใจในสิ่ง ที่เราตองการแกไ ขนี้เพื่อหา หนทางที่เหมาะสมและดีที่สุด การเขาใจคำถามอาจเริ่มดวยการตั้ง คำถาม สรางสมมติฐาน กระตุนใหเกิดการใชความคิดที่นำไปสูความคิดสรางสรรคที่ดีได ตลอดจนวิเคราะหปญหาใหถวนถี่ เพื่อหาแนวทางที่ชัดเจนใหได การเขาใจในปญหาอยางลึกซึ้งถูกตองนั้น จะนำไปสูการแกปญหาที่ ตรงประเด็นและไดผลลัพธทดี่ ีที่สุด 2.5.1.2 การกำหนดปญหาใหชัดเจน (Define) เมื่อทราบถึงขอมูลปญ หาที่ ชัดเจน ตลอดจนวิเคราะหอยางรอบดาน ใหนำขอมูลทั้งหมดมาวิเคราะห เพื่อคัดกรองใหเปน ปญหาที่แทจริง และกำหนดหรือบงชี้ปญหาอยางชัดเจน เพื่อเปนแนวทางในการปฎิบัติการตอไป รวมถึงมีหลักการในการแกไขปญหาอยางมีทิศทาง 2.5.1.3 การระดมความคิ ด (Ideate) การระดมความคิ ด คือ การนำเสนอ แนวความคิดตลอดจนแนวทางการแกไขปญหาในรูปแบบตาง ๆ อยางไมมีกรอบจำกัด ควรระดม ความคิดในหลากหลายมุมมอง หลากหลายวิธีการใหมากที่สุด เพื่อเปนฐานขอมูลในการนำไป ประเมินผล และสรุปเปนความคิดที่ดีที่สุดสำหรับการแกไขปญหานั้น ๆ ซึ่งไมจำเปนตองเกิดจาก มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 68

ความคิดเพียงความคิดเดียว แตเปนการผสมผสานหลากหลายความคิดใหเปนแนวทางที่ชัดเจน การระดมความคิดชวยใหมองปญหาไดอยางรอบดานและละเอียดขึ้น รวมถึงหาวิธีการแกปญ หา ไดอยางรอบคอบ 2.5.1.4 การสรางตนแบบ (Prototype) การสรางตนแบบเปนการทดสอบ การทำงานของแบบจำลอง (Model) หรือตนแบบของระบบงานใหม การทำตนแบบสามารถทำ ใหกระบวนการพัฒนาเร็วและงายขึ้น โดยเฉพาะอยางยิ่งในงานที่ยากแกการเขาใจอยางชัดเจน สำหรับการออกแบบผลิตภัณฑหรือนวัตกรรมคือ การสรางตนแบบ เพื่อทดสอบจริงกอนที่ จะ นำไปผลิตจริง สำหรับงานออกแบบคือ การออกแบบรางกอนนำไปจัดทำเปนงานจริง สวนในงาน ดานอื่น ๆ คือ การลงมือปฎิบัติหรือทดลองทำจริง ตามแนวทางที่ไ ดเลือกแลว ตลอดจนสร าง ตนแบบของปฎิบัติการที่ตองการจะนำไปใชจริง 2.5.1.5 การทดสอบ (Test) เปนการทดลองนำตนแบบหรือขอสรุปที่นำไปใช จริงมาปฎิบัติกอน เพื่อทดสอบประสิทธิภาพ ตลอดจนประเมินผลและคุณภาพของตนแบบ เสร็จ แลวจึง นำปญ หาหรือ ขอ ดี ขอ เสีย ที ่เกิด ขึ ้น มาปรับปรุง แกไ ข กอนนำไปใชจริง เปนการลด ขอผิดพลาด และหากพบขอผิดพลาดจะสามารถดำเนินการแกไขไดกอนนำไปใชจริง

เขาใจปญหา

กำหนดปญหา

ระดมความคิด

สรางตนแบบ

ทดสอบ

ภาพที่ 2.3 กระบวนการการคิดเชิงออกแบบ (Design Thinking Process) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที ่ 2.3 เป น กระบวนการการคิ ด เชิ ง ออกแบบ (Design Thinking Process) ประกอบดวย 5 ขั้น ตอน ไดแก 1) เขาใจปญ หา 2) กำหนดปญ หา 3) ระดมความคิด 4) สราง ตนแบบ และ 5) ทดสอบ

ความคิดสรางสรรคในงานออกแบบ 69

2.5.2 ประโยชนของกระบวนการการคิดเชิงออกแบบ 2.5.2.1 เปนการฝกกระบวนการแกไขปญหา ตลอดจนหาทางออกที่เปนลำดับ ขั้น ตอน และเปนการฝกการแกปญหาแบบหาสาเหตุ หรือการมองหาทางออกแบบรอบดาน กระบวนการนี้จะทำใหมองอยางรอบคอบและละเอียดมากขึ้น ทำใหเขาใจปญหาไดอยางถองแท และแกไขไดตรงประเด็น 2.5.2.2 มีทางเลือกที่หลากหลาย การคิดเพื่อหาหนทางการแกปญ หาบนพื้น ฐานขอมูลที่มีหลากหลาย ตลอดจนพยายามคิดหาวิถี ทาง หรือแบง ปนความคิดที่ด ีอ อกมา หลากหลายรูปแบบ ทำใหเรามองเห็นไดรอบดาน และมีตัวเลือกที่ดีที่สุด กอนนำไปใชแกปญ  หา จริง หรือนำไปปฎิบัติจริง 2.5.2.3 มีตัวเลือกที่ดีที่สุด เหมาะสมที่สุด เมื่อมีตัวเลือกหลากหลาย จะทำให รูจักคิดวิเคราะห แยกแยะ และการคิดวิเคราะหนี้ จะทำใหสามารถเลือกทางเลือกที่ดี และ เหมาะสมที่สุด ทำใหไดตัวลือกที่ดีสงผลใหผลงานมีประสิทธิภาพ 2.5.2.4 ฝกความคิด สรา งสรรค การระดมความคิด และแลกเปลี่ยนความ คิดเห็น ตลอดจนจะทำใหสมองไดฝกคิดหลากหลายรูปแบบ หลากหลายวิธีการ หลากหลาย มุมมอง และทำใหรูวิธีแสวงหาสิ่งแปลกใหม ซึ่งเปนพื้นฐานในการฝกความคิดสรางสรรคที่ดี ซึ่ง เปนพื้นฐานที่ดีในการแกปญหา ตลอดจนการบริหารจัดการองคกรใหทำงานอยางมีประสิทธิภาพ ซึ่งเกิดจากการรับฟงความคิดเห็นผูรวมงานในองคกร ทำใหทุกคนมีสวนรวม และไดรูสึกถึงการ เปนสวนหนึ่งของการตัดสินใจ 2.5.2.5 เกิดกระบวนการใหม และนวัตกรรม เมื่อมีความคิดที่หลากหลาย รูปแบบตลอดจนการแบงปนความคิดดี ๆ และการที่ไดพยายามฝกคิดจะทำใหคนพบวิธีใหม ๆ เสมอ หรือเกิดนวัตกรรมใหม ๆ ขึ้นมาไดเชนกัน ซึ่งสิ่งไดอาจอยูในรูปแบบกระบวนการ หรือ ขั้นตอน โดยอาจจะยังไมไดพัฒนาเปนระบบที่สมบูรณ แตสามารถนำไปตอยอดได รวมทั้งหาก พัฒนาเกิดเปนนวัตกรรมได จะทำใหเกิดประสิทธิภาพมากที่สุด 2.5.2.6 มีแผนสำรองในการแกปญหา การคิดที่หลากหลายวิธีนอกจากจะทำให สามารถวิ เ คราะห เ ลือ กวิ ธี ท ี ่ด ี ท ี ่ ส ุด ไดแ ล วนั้ น ยั ง สามารถทำให ม ี ต ั วเลื อ กสำรอง โดยผ าน กระบวนการลำดับความสำคัญเรียบรอยแลว ทำใหเราสามารถเลือกใชแกปญหาไดทัน ทวงทีหาก วิธีการที่เลือกครั้งแรกไมประสบความสำเร็จ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 70

2.5.2.7 องคกรมีการทำงานอยางเปนระบบ เมื่อบุคลากรในองคกรถูกฝกให คิดอยางเปนระบบแบบแผน และปลูกฝงระบบการทำงานที่ดี ยอมสงผลใหองคกรมีการทำงาน อยางเปนระบบ และทำงานไดมีประสิทธิภาพมากขึ้นดวย จะเปนการเพิ่มศักยภาพใหกับบุคลากร และองคกรมากขึ้น การคิดเพื่อแกไขปญหาหรือโจทยใหตรงจุดปญหา ตลอดจนพัฒนาแนวคิดใหม เพื่อแกไขปญหาหรือโจทยที่ตั้งไว เพื่อหาวิถีทางที่ดีและเหมาะสมที่สุด การแกปญหาบนพื้นฐาน กระบวนการนี้จะเนนไปที่ผูใชหรือผูบริโภคเปนหลัก โดยมีเจตนาในการสรางผลลัพธในอนาคตให เปนรูปธรรม เพื่อตอบโจทยตลอดจนแกปญหาไดอยางมีประสิทธิภาพ รวมถึงเกิดนวัตกรรมที่เปน ประโยชนตอไป การประยุกตใช กระบวนการคิดเชิงออกแบบมาใช จะทำใหทราบถึงคิดวิเคราะห ปญหาที่เกิดขึ้น อยางถี่ถวน ถองแท และละเอียด สามารถทำใหระบุปญหาได และมีวิธีการในการ แกไขปญหาที่เปนลำดับ มีการคิดวิเคราะหวิธีแกไขอยางถี่ถวน และรอบดาน ทำใหสามารถมอง วิธีการแกปญหาตาง ๆ ไดรอบดาน หลากหลายมุมมอง และทำใหสามารถแกไขปญ หาไดอยางมี ประสิทธิภาพมากขึ้น หรือสามารถหาทางแกอื่นสำรองไดทันทวงทีหากทางแกที่เลือกไวไมประสบ ผลสำเร็จ แตก็ไมทำใหเสียใจเพราะไดทดลองแกไขหลากหลายวิธี 2.6 บทสรุป ความคิดสรางสรรคเปนความสามารถในการพัฒนาขึ้นมาไดจากการเรียนรู และฝกฝน เพื่อสรางสรรคสิ่งใหม ๆ ใหเกิดขึ้น โดยความหมายของความคิดสรางสรรคจะตองเกิดจากการคิด ใหไดมาซึ่งสิ่ง ใหม ๆ ทั้งในรูปแบบนวัตกรรมที่เปนสิ่งประดิษฐ หรือแมกระทั่งการสรางสรรค ระบบใหม ๆ เทคนิ ค วิ ธ ี ค ิ ด เบื ้ อ งต น เพื่ อ การออกแบบอย า งเป น ระบบ ประกอบด ว ย 1) กำหนด เปาหมายและวัตถุประสงคเปาหมายคือ การคำนึง ถึง การใชประโยชนและความนาสนใจ 2) การตีความโจทย เปนการเลือกกรอบความคิดมีใหมีความเหมาะสม 3) เนื้อหาจากการวิจัย ผู  อ อกแบบจำเป น จะต อ งรู  แ ละเข า ใจเพื ่ อ วางแผน ดำเนิ น การกั บ ข า วสาร ออกแบบ และการนำเสนอให ต รงจุ ด กั บ กลุ  ม เป า หมายที ่ ต  อ งการได ถ ู ก ต อ ง 4) แนวความคิ ด มาจากการคนควาเนื้อหาแลวนำมารวบยอด 5) ตัวแสดงออก เปนสิ่งที่สืบคนจากเนื้อหา และ 6) บริบท คือกติกาทางสังคม

ความคิดสรางสรรคในงานออกแบบ 71

กระบวนการคิดสรางสรรคสำหรับการออกแบบ ประกอบดวยสิ่งสำคัญดังนี้ 1) การทำ ความเขาใจเกี่ยวกับปญหา 2) การเตรียมการ 3) การฟกตัวของความคิด 4) การเกิดประกาย ความคิด และ 5) การพัฒนาใหสัมฤทธิผล คือ ระยะสุดทายเพื่อทำใหสิ่งที่คิดไดแลวสัมฤทธิผลใน การนำไปใชแกปญหา กระบวนการการคิดเชิงออกแบบ การทำความเขาใจในขั้นตอนการคิดเชิงออกแบบจะ สามารถลำดับการปฎิบัติการ ตลอดจนรูวิธีคิดและกระบวนการในการแกไขปญหาตาง ๆ ซึ่ง ขั้นตอนกระบวนการการคิดเชิงออกแบบในรูปแบบสากลนั้นมีการสรางสรรคเปนขั้นตอน ดังนี้ 1) การเขาใจปญหา 2) การกำหนดปญหาใหชัดเจน 3) การระดมความคิด 4) การสรางตนแบบ และ 5) การทดสอบ (Test) ประโยชน ข องกระบวนการการคิ ด เชิ ง ออกแบบ ประกอบด ว ย 1) เป น การฝ ก กระบวนการแกไ ขปญ หา 2) มีทางเลือกที่หลากหลาย 3) มีตัวเลือกที่ดีที่สุด เหมาะสมที่สุด 4) ฝกความคิดสรางสรรค 5) เกิดกระบวนการใหมและนวัตกรรม 6) มีแผนสำรองในการ แกปญหา และ 7) องคกรมีการทำงานอยางเปนระบบ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟิ ก จากการศึกษาทางดานประวัติศาสตร ชี้ใหเห็นวามนุษยมีพัฒนาการทางดานเทคโนโลยี เพื่อสรางเครื่องมือมาโดยตลอด เริ่มตั้งแตขอสันนิษฐานที่วามนุษยเริ่มตนจากการพัฒนาเครื่องมือ ที่ใชในการขุดรากไมหรือตัดเนื้อสัตวเพื่อนำมาเปนอาหาร อยางไรก็ตามแมวาการใชเครื่องมือใน สมัยแรก ๆ เปนเพียงขอสันนิษฐานสูการมีสิ่งประดิษฐคิดคนใหม ๆ ในยุคตอมา แตความสามารถ ในการสรางสรรคสิ่งใหม ๆ เกิดขึ้นไดทำใหมนุษยมีความสามารถในการจัดการทางสังคม และ สรางกฎควบคุมเปาหมายของมนุษยดวยวิธีตาง ๆ Wang (2020) ไดกลาวถึงความเปนมาของกราฟกวาเกิดขึ้นจากการพัฒนาทักษะ และ ยกระดับจากการออกแบบกราฟกดวยมือ นำไปสูการออกแบบกราฟกดวยคอมพิวเตอรที่ชว ยใน การสรางสรรคงานกราฟกไดรวดเร็วมากยิ่งขึ้น สงผลใหงานกราฟกไดรับความนิยมเพิ่มขึ้นในทุก อุตสาหกรรม รวมถึงการโฆษณา และประชาสัมพันธสื่อตาง ๆ ดวยกราฟกที่สวยงาม สรางรายได ใหกับธุรกิจตาง ๆ ศุภกรณ ดิษฐพันธ (2558) ไดกลาวถึงจุดเริ่มตนของกราฟก เกิดขึ้นจากพัฒนาการทาง ทักษะของมนุษยโดยมีวิวัฒนาการจากจุดเริ่มตนของวิวัฒนาการที่สับสน ไมวาจะเปนการสงภาษา เปนความสามารถในการสงเสียง เพื่อการสื่อสารระหวางกัน นับเปนสิ่งแรกของพัฒนาการทาง ทักษะของมนุษย การเขียนเปนการสงภาษาดวยสัญลักษณ และภาพหรือตัวอักษร ดวยการวาด และการขีดลงบนผิวกลายเปน “กราฟก” หรือภาพ ปจจุบันสามารถนำเทคโนโลยีเขามาใชในการ เก็บเสียงคำพูดซึ่งตางจากภาษาเขียนที่ยังคงอยู การคิดคนภาษาเขียนนี้เองทำใหเคาโครงอารย ธรรมของชาติพันธมนุษยมีความชัดเจนขึ้น และทำใหสามารถรักษาความรูและประสบการณและ ความคิดของมนุษยไวได การเปลี่ยนแปลงตาง ๆ ที่เกิดขึ้นกับมนุษยเปนวิวัฒนาการ เกิดจากการ มองเห็น ปญ หา แลวตองการใหไ ดม าซึ่ง คำตอบ หรือจุดมุ ง หมายที ่ ค าดการณไ ว จึง ไดเ กิ ด กระบวนการคิด การวางแผน และการออกแบบเพื่อหาวิธีการที่จะนำหลักการหรือทักษะตาง ๆ มาสรางสรรคใหเกิดเปน สิ่ง ใหม เพื่อพัฒ นาวิถีชีวิตของมนุษยใหมีคุณภาพที่สูงกวาเดิม โดย ประยุกตใชเครื่องมือหรืออุปกรณเทคโนโลยีที่ทันสมัยนำมาสรางสรรคเปนผลงานที่มีคุณคาและ เปนประโยชนตอไป

การออกแบบกราฟก 73

3.1 ความหมายของการออกแบบกราฟก งานกราฟกมีบทบาทตอการดำเนินชีวิตของมนุษยมาตั้งแตสมัยโบราณ ในปจจุบันสังคม มนุษยไดใชงานกราฟกในเกือบทุกกิจกรรม เชน การศึกษา การออกแบบการทดลอง การนำเสนอ ขอมูลการแสดงออกทางศิลปะ การโฆษณาผลิตภัณฑ ภาพยนตร และดวยความเจริญกาวหนา ทางเทคโนโลยีคอมพิวเตอรจึงมีผลทำใหการสรางงาน และการใชงานกราฟกสามารถดำเนิน การ ไดอยางมีประสิทธิภาพ งานกราฟกจึงมีความสำคัญและมีบทบาทเพิ่มขึ้นอยางมากตอการดำเนิน ชีวิตของมนุษย การสื่อความหมายระหวางมนุษย เปนกิจกรรมทางสังคมที่มนุษยมีมาตั้งแตสมัย ดึกดำบรรพ มนุษยรูจักใชเครื่องมือที่เปนสัญลักษณสื่อความหมายและมีความแตกตางกันตาม ความเจริญของสังคมมนุษยในแตละยุคสมัย มนุษยยุคเริ่มแรกยังไมมีภาษาและสัญลักษณจึงใช ของจริง และสภาวะจริงรอบตัวในการสื่อความหมายตอกัน คอมพิวเตอรเขามามีบทบาทสำคัญในการออกแบบกราฟกมากกวาเครื่องมือชนิ ดอื่น ตั้งแตไดมีการประดิษฐเครื่องพิมพ เนื่องจากขั้นตอนสุดทายในการออกแบบจะตองมีการแสดง ชิ้นงานออกมาในรูปแบบของการพิมพ ซึ่งนักออกแบบเริ่มเปลี่ยนวิธีการทำงาน จากการสเกตซ ภาพบนแผน กระดาษด วยดิน สอสี หรือปากกา กลายเปนการสร างชิ ้นงานออกมาทางหน า จอคอมพิวเตอร การใชคอมพิวเตอรชวยในการออกแบบ สรางความคิดใหม รูปแบบและสีตาง ๆ ทำใหการทำงานสะดวกรวดเร็วขึ้น มีการใชซอฟตแวรชวยในการระบายสี และวาดภาพ การออกแบบกราฟกและสื่อเปนขั้นตอนหนึ่งของการสรางสรรคงานที่เกี่ยวของกับ งาน กราฟก งานดานสิ่งพิมพ โดยมีหลักการคิดและวิธีการดำเนินการที่ตองอาศัยแนวคิดเกี ่ยวกับ กระบวนการสื่อความหมาย หลักการทางศิลปะประยุกต และทฤษฎีการรับรูทางจิตวิทยา Nikolova (2005) ไดใหความหมายเกี่ยวกับ การออกแบบกราฟก หมายถึง กิจกรรมที่ เกิดจากประสบการณ หรือเกิดจากความคิดสรางสรรคเพื่อสรางงานกราฟกที่มีคุณคา และสราง ความรูสึกที่ดีตามสถานการณ หรือสภาพแวดลอมทางธุรกิจที่เปลี่ยนแปลงไป Guo (2001) การออกแบบกราฟก หมายถึง การพัฒนางานกราฟกเกิดจากทักษะ การ เรียนรู การฝกฝน และมีความคิดสรางสรรคของนักออกแบบกราฟก เพื่อมุงสูการสรางงานกราฟก ที่เกิดจากการปฏิบัติอยางแทจริง วิกิพีเดีย (2564) การออกแบบกราฟก หมายถึง นักออกแบบที่จะทำการสรางกราฟก หรือนำเอาสวนประกอบทางศิลป เชน สัญลักษณ รูปภาพ ตัวอักษร ผานกระบวนการทางการ ออกแบบ เชน การออกแบบตัวอักษร การวาดภาพประกอบ การจัดองคประกอบ เพื่อใชในการ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 74

สื่อสาร สวนใหญเขาใจวาการออกแบบกราฟกเปนงานที่ทำดวยคอมพิวเตอรหรือเปนการสราง แอนิเมชันสองมิติ (2D) หรือสามมิติ (3D) เทานั้น ซึ่ง ในความเปนจริง คอมพิวเตอรเปนเพียง เครื่องมือหนึ่งที่ชวยในการสรางงานออกแบบกราฟก เชนเดียวกับ ดินสอ ปากกา พูกัน เทานั้น Martin (2012) การออกแบบกราฟก หมายถึง กิจกรรมการออกแบบที่สรางสรรคโดย องคกร บุคลากร หรือปญญาประดิษฐ การรวบรวมทรัพยากร และวัตถุในการออกแบบใหมีความ พรอมเพื่อใหงานออกแบบสมบูรณ Cezzar (2020) การออกแบบกราฟก หมายถึง การพัฒนากราฟก และการออกแบบเพื่อ การสื่อสารเปนสิ่งที่สำคัญจากการฝกฝน และเรียนรูจนเกิดทักษะ และความเชี่ยวชาญในการ ออกแบบกราฟก Allen Hurlburt Designer และสมาชิ ก ของ The Club ได จ ำแนกหน า ที ่ ห ลั ก ของงานออกแบบกราฟกไวในหนังสือ The Design Concept โดยแบงออกเปน 3 ลักษณะ ดังนี้ 3.1.1 เพื ่ อ บอกเล า เรื ่ อ งราวหรื อ ให ร ายละเอี ย ดสิ ่ ง ต า ง ๆ (To Inform) เช น สัญ ลักษณ บอกตำแหนง สถานที่ ในโรงพยาบาลที ่ต องการเขา ถึง แผนกตาง ๆ อยางรวดเร็ ว และชัดเจน ชวยลดความสับสนตอการหาตำแหนงของแผนกตาง ๆ อาจจะแสดงในลักษณะของ แผนภาพ หรือแผนผัง เพื่อใหสามารถเขาใจเรื่องราวไดงายขึ้น 3.1.2 เพื่อแสดงถึงลักษณะของบุคคลหรือสิ่งใดสิ่งหนึ่ง (To Identify) การออกแบบ กราฟกเกี่ยวของกับการสื่อสารบุคลิกของสิ่งนั้น ๆ ออกมาอยางมีเอกลักษณ เชน โปสเตอรที่ แสดงการแพรระบาดของโรคที่มีความรุนแรง และเปนอันตรายตอชีวิต ควรหลีกเลี่ยงและ ระมัดระวังมากที่สุด ควรใชสีแดงที่แสดงออกถึงความรอนแรง ความอันตราย สถานการณตึง เครียด เพื่อใหเกิดการระมัดระวัง 3.1.3 เพื่อการโนมนาวหรือชักจูง (To Persuade) กราฟกมีหนาที่ในการขับเนน ขอดี หรื อ ลั ก ษณะเด น ของสิ ่ ง ที่ ก ล า วถึ ง เช น การออกแบบโลโก ข องธนาคารแห ง หนึ่ ง ควรใชองคประกอบศิล ป ที่ สื ่อถึง ความมั่น คง ซื่อสัตย นาเชื่อถือ เพื่อใหเกิดความมั่น ใจใน ผลิตภัณฑสินคาและบริการ งานออกแบบกราฟกที่ดีจะทำใหเห็นถึงความคิดในการออกแบบที่มาจากความใสใจใน รายละเอียดทุกขั้นตอน จะทำใหมีอิทธิพลโดยตรงที่จะโนมนาวผูรับขอมูลใหเกิดความสนใจ และยอมรับในผลงานการออกแบบกราฟก อีกทั้งยังแสดงใหเห็นถึงคุณคาดานตาง ๆ ในดานการ สื่อสารไปยังกลุมเปาหมาย มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 75

3.2 คุณคาของงานออกแบบกราฟก การนำกราฟกไปใชในงานดานตาง ๆ จะชวยสงเสริมใหงานนั้นนาสนใจ สรางความแปลก ใหมแกผูพบเห็น และจุดประสงคของงานออกแบบกราฟกคือ การสื่อสารใหมีความเขาใจตรงกัน สังเกตไดจากตัวอักษรที่สามารถนำมารวมกันเปนขอความเพื่อสื่อสาร ภาษาที่นำมาสรางเปนขอ ความสามารถมีไดหลากหลายภาษาแตกตางกัน เมื่อนำมาใชในการสื่อสารตองทำใหผูรับ สาร เขาใจไดตรงกันกับผูสงสาร อนัน วาโซะ (2561) ไดใหคุณคาของงานออกแบบกราฟก ดังนี้ 3.2.1 เพิ่มประสิทธิภาพในการสื่อสาร การรับรูของมนุษยสามารถรับรูไดหลายทาง เชน รสชาติ กลิ่น การไดยิน การมองเห็น ดวยดวงตา ซึ่งเปนหนึ่งในการรับรูของมนุษย ตาคือสวนรับแสงสะทอนจากวัตถุ ทำใหสามารถ มองเห็น และรับรูสิ่งตาง ๆ รอบตัวได การสื่อสารโดยใชรูปภาพและขอความมีหลากหลายรูปแบบ เชน สื่อสารดวยตัวอักษร ตัวเลข รูปภาพ สัญลักษณพิเศษ ลวนมาจากงานออกแบบกราฟกที่ สรางขึ้นเพื่อการสื่อสาร เมื่อนำมารวบรวมเปนประโยคของภาษา และสื่อสารออกมาไดอย าง เขาใจ ทำใหเกิดประสิทธิภาพในการสื่อสาร ไดผลงานที่ถูกตองตรงตามวัตถุประสงค 3.2.2 จดจำงาย และนาสนใจ การนำงานออกแบบกราฟกไปใชง านเพื่อการสื่อ สารตองทำให จดจำไดน าน และดู นาสนใจ ซึ่งสามารถทำไดโดยการออกแบบที่งาย เพื่อใหงายตอการจดจำ แตการทำใหนาสนใจ นั้นเปนเรื่องที่ยาก เนื่องจากไมสามารถบอกไดวาทำอยางไรใหนาสนใจ แตสามารถกลาวโดยรวม ไดวา กราฟกที่สรางดวยโปรแกรมคอมพิวเตอรตองมีคุณภาพ โทนสีที่ใชควรดูสบายตา หรืองาย ตอการจดจำไดงาย มีเอกลักษณไมใชสี และลงรายละเอียดที่มากเกินไป ควรนำสิ่งที่เปนลักษณะ เดนในองคกร รวมทั้งอัตลักษณภายในองคกรที่มี เชน สี ตัวอักษร สโลแกน เปนตัวแทนสิ่ง ที่ ตองการสื่อสาร 3.2.3 งานนำเสนอนาติดตาม และเขาใจงาย การนำเสนองานที่ดีตองมีแบบแผน มีการเตรียมการในสวนของผูนำเสนอ รวมไปถึงสื่อที่ ใชในการนำเสนองาน ตองมีความนาติดตาม ตอเนื่องและเขาใจงาย การนำเสนอที่ดีตองมีการ เตรียมขอมูล เตรียมความพรอมกอนนำเสนอจริง จะทำใหไดวางแผนการนำเสนอ และลำดับ ขั้นตอนการนำเสนอใหถูกตอง ตลอดจนเพิ่มความมั่นใจในการนำเสนอ การสรุปประเด็นที่สำคัญ และนำเสนอดวยเทคนิคที่นาสนใจ จะทำใหงานนาติดตามคนหา และศึกษาในประเด็นอื่นตอได ทำใหดึงดูดใจลูกคา หรือผูรับสาร อยางไรก็ตามในการเตรียมขอมูลตองมีการศึกษาวาผูฟงเปน มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 76

ใคร มีวุฒิภาวะ และการศึกษาระดับใด จึงจะสามารถวิเคราะหขอมูลที่นำมาใชนำเสนอใหแกผูฟง การทำงานนำเสนอที่ดีจึง ตองมีการเตรียมขอมูลหลัก การนำกราฟก เชน ขอความ รูปภาพ ภาพเคลื่อนไหว เสียง วิดีโอ ตลอดจนการมีสวนรวมระหวางกัน จะทำใหเกิดความนาสนใจเพิ่มขึ้น 3.2.4 เปนสื่อกลาง เพื่อใหเกิดการเรียนรู นอกจากการนำกราฟกมาใชในการสื่อสารแบบทั่วไปแลว การนำกราฟกมาเปนสื่อกลาง เพื่อใหเกิดการเรียนรู หรือพัฒนาในดานตาง ๆ ทั้งดานความคิดสรางสรรค หรือดานวิชาการ กราฟกสามารถทำใหผูเรียนจดจำไดเปนอยางดี เนื่องจากมีสีสัน และรูปภาพที่ทำใหเกิดการจดจำ ไดอยางรวดเร็วมากกวาขอความที่มีจำนวนมาก การศึกษาการออกแบบกราฟกจากแหลงตาง ๆ เพื่อนำมาพัฒ นาการเรียนรูดานกราฟกของตนเปนสิ่ง ที่ดี แตการออกแบบกราฟกที่ดีควรมี ความคิดที่แปลกใหม สื่อความหมายได และแตกตางไปจากเดิม 3.2.5 เกิดความคิดสรางสรรคในสิ่งใหม การออกแบบกราฟกที่มีความคิดแปลกใหม ยอมไดรับความสนใจมากกวาการออกแบบ กราฟกที่ใชความคิดเดิม ซึ่งการทำใหงานมีความริเริ่มคิดสรางสรรคนั้น ตองเริ่มคิดจากสิ่งที่วาง เปลาหรือสิ่งที่ไมเคยมีมากอน บางครั้งอาจทำใหไมสามารถสรางงานสิ่งใหมได ดังนั้นหากการ ออกแบบภาพกราฟกยึดติดกับกรอบที่มีอยูในสังคมมากจนเกินไป อาจไมสรางสรรคงานใหมได จึงตองคิดแบบผสมผสานสิ่งแปลกใหมเพื่อใหไดกราฟกแปลกใหม (Edustyles, 2564) เมื ่ อ ทราบถึ ง ความหมาย และเห็ น คุ ณ ค า ของงานออกแบบกราฟ ก แล ว ก อ นที่ นั ก ออกแบบจะสรางสรรคผลงานขึ้นมา จะตองรูวาผลงานที่ออกแบบมานั้นจะดีหรือไมดี มีเกณฑ อะไรในการประเมินหรือตัดสินงานกราฟก เพราะไมสามารถตัดสินจากความรูสึกของคนใดคน หนึ่ง ดังนั้น สิ่งที่ตองมีในการออกแบบ คือ บรรทัดฐานการออกแบบกราฟก เพื่อเปนมาตรฐานใน การประเมินผลงานการออกแบบตอไป 3.3 บรรทัดฐานในการออกแบบ บรรทั ด ฐานจะทำหน า ที ่ เ ป น ตั ว วั ด ทำให ส ามารถตั ด สิ น งานกราฟ ก ได ว า งานใด เป น งานที ่ ด ี หรื อ ไม ด ี บรรทั ด ฐานในงานออกแบบมี 3 ประการ (Radhi, Lacobellis, & Behdinan, 2021) ดังนี้ 3.3.1 มีประโยชนใชสอยที่ดี หมายถึงงานอออกแบบกราฟกนั้นตองมีประโยชนใชสอยที่ ดี นักออกแบบกราฟกนิยมเรียกขอนี้วา “ตองเวิรค” นั่นคือ ตองรูวางานใชกับใคร ที่ใด เพื่ออะไร มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 77

ใชงานแบบใด ดังนั้น เมื่อทำการออกแบบควรนึกถึงประโยชนใชสอยเปนหลัก เชนออกแบบเกาอี้ ไดสวยงาม แตเมื่อนั่งไมกี่ครั้งเกาอี้นั้นพังหรือชิ้นสวนหักเสียหาย หรือออกแบบเว็บไซตสวยงาม แตแสดงผลชา หรือตองติดตั้งโปรแกรมเพิ่มเติมในการแสดงผล ถือวาเปนการออกแบบที่ไม ตอบสนองตอประโยชนการใชงานที่ดี 3.3.2 มีความสวยงาม ผูใชงานสวนใหญที่ชอบงานออกแบบกราฟกเนื่องจากความสวย นักออกแบบกราฟกนิยมเรียกขอนี้วา “ตองสวย” เพราะเปนสิ่งดึงดูดใจแกผูพบเห็นในครั้งแรก ชวยสนับสนุนการตัดสินใจซื้อ หรือใชสิ่งของนั้น แตเนื่องจากความพึงพอใจในความสวยงามของ แตละคนนั้น จะมีรสนิยมไมเหมือนกัน ขึ้นอยูกับประสบการณและมุมมอง ซึ่งถือเปนเรื่องปกติ สิ่ง สำคัญ คือเมื่อผลงานที่ออกแบบมาทำใหคนสวนใหญพอใจ และชื่นชอบในผลงาน ถือวางาน ออกแบบกราฟกนั้นไดรับการยอมรับ 3.3.3 สื่อความหมายได งานออกแบบกราฟกที่ดีจะตองสามารถสื่อความหมายใหเขาใจ ไดตรงกันระหวางกลุมเปาหมายกับสิ่งที่นักออกแบบตองการจะถายทอด นักออกแบบกราฟกนิยม เรียกขอนี้วา “ตองสื่อ” ตองเปนไปตามวัตถุประสงคที่ตั้งไว การสรางงานออกแบบกราฟ กที่ สวยงาม และสามารถสื่อความหมายไดนั้น จะทำใหเกิดการรับรูและเขาใจในสิ่งที่ตองการสื่อสาร งานออกแบบกราฟกจึงจะมีคุณคาสามารถสื่อสารใหเขาใจไดทันที

เวิรค 50 %

สวย 30%

สื่อ 20%

ภาพที่ 3.1 บรรทัดฐานในงานออกแบบ ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 3.2 สรุปใหเห็นไดวา บรรทัดฐานในงานออกแบบแบงออกเปน 3 ประการ คือ 1) ตองเวิรค ใหคะแนน 50% 2) ตองสวย ใหคะแนน 30% และ 3) ตองสื่อ ใหคะแนน 20% โดยที่มีคะแนนเต็ม 100% ทั้งนี้ขึ้นอยูกับงานออกแบบแขนงตาง ๆ อาจใหคาระดับคะแนนที่ แตกตางกัน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 78

จากบรรทัดฐานการออกแบบกราฟก จะทำใหนักออกแบบไดพิจารณากอนดำเนินการ ซึ่งจะทำใหเห็นถึงลำดับความสำคัญกอนหลัง ดังนั้นในการสรางสรรคผลงานกราฟกที่ไ ดคุณภาพ ควรใหคะแนนในแตละดานอยางเหมาะสม ตอบโจทยความตองการของผูใชงาน ขั้นตอนตอไปที่ นักออกแบบตองศึกษา เปนขั้นตอนการทำงานออกแบบกราฟก เพื่อการทำงานที่เปนระบบใหได งานที่มีประสิทธิภาพ 3.4 ขั้นตอนการออกแบบกราฟก สิ่ง สำคัญ ในการทำงานทุก อย างคื อ ความเขาใจในขั ้นตอนการทำงานตั้ง แตเริ่ ม ต น จากโจทยปญหาจนถึงสงขั้นตอนรายงาน เชนเดียวกับการออกแบบกราฟก Laing, Apperley, & Masoodian (2017) ไดกลาวถึงขั้นตอน การทำงานที่สัมพันธกันของการออกแบบกราฟก ดังนี้ 1. วิเคราะห ปญหา

4. ออกแบบ ภาพราง

2. ออกแบบ แนวคิด

5. ออกแบบ คอมพิวเตอร

3. คนหา ขอมูล

6. เผยแพร

ภาพที่ 3.2 ขั้นตอนการทำงานออกแบบกราฟก ที่มา : นุจรี บุรีรัตน (2564) 3.4.1 การวิ เ คราะห ป  ญ หา (Problem Analysis) เป น ขั ้ น ตอนการตอบคำถาม เพื่อสรางแนวคิดตองมีโจทยปญหา และนักออกแบบจะนำปญหามาคิดวิเคราะหแกไ ขอยาง เหมาะสม โดยใชหลักการวิเคราะหขั้นตอนการเรียบเรียงใหไดมาซึ่งคำตอบ ศึกษาถึงสิ่งที่จะทำ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 79

การออกแบบวาเกี่ยวของกับอะไร สามารถนำไปใชประโยชนที่ใด ใชกับใคร และทำอยางไร เพื่อใหไดขอมูลเบื้องตนในการออกแบบแนวคิด

ภาพที่ 3.3 การวิเคราะหปญหา (Problem Analysis) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 3.4 เปนการวิเคราะหปญ หา (Problem Analysis) ซึ่ง เปนขั้นตอนการ แกโจทยปญ หา อาจใชวิธีการทำรายการตรวจสอบ (Checklist) หรือวิเคราะหโ ครงสร า งที่ เกี่ยวของกับงาน เพื่อพิจารณาวิธีการแกโจทยปญหานั้น ๆ การออกแบบกราฟกที่ดีไมไดมีเฉพาะ ความสวยงามเท า นั ้ น ดั ง นั ้ น ทุ ก ครั ้ ง ก อ น การสร า งงานออกแบบกราฟ ก นั ก ออกแบบ ควรตอบคำถาม 4 ข อ เพื ่ อ ให ไ ด ข  อ มู ล ตั ้ ง ต น ก อ นจะสรุ ป สร า งเป น แนวคิ ด หลั ก ของงาน ออกแบบกราฟก โดยใชหลักการวิเคราะหโจทย ดังนี้ 3.4.1.1 อะไร (What) เปนการใหคำตอบวา งานออกแบบกราฟกคืองานอะไร ลักษณะ เปนการใหโจทยที่ผูออกแบบสามารถนำไปฏิบัติไดวาตองทำงานอะไร มีรายละเอียดอยางไร เมื่อ นักออกแบบกราฟกเห็นโจทยแลว สามารถที่จะวิเคราะหแกปญหาออกแบบงานได 3.4.1.2 ที่ใด (Where) เปนการใหคำตอบวา งานออกแบบนี้จะถูกนำไปใชทใี่ ด เชน ใช ประชาสัมพันธในหนวยงานภายใน หรือหนวยงานภายนอก เปนสื่อมัลติมีเดียที่นำเสนอออนไลน ผานเว็บไซต หรือ สื่อสังคมออนไลนผานทางชองทางใด เปนตน 3.4.1.3 ใคร (Who) เปนการใหคำตอบวา งานออกแบบนี้ใครคือกลุมเปาหมาย เชน สำหรับเพศใด กลุมวัยใด อาชีพอะไร เมื่อทราบกลุมเปาหมายที่ชัดเจน นักออกแบบจะไดผลิตงาน ไดตรงตามกลุมเปาหมาย เนื่องจากกลุมเปาหมายที่แตกตาง การเขาถึงสื่อยอมมีความแตกตาง กัน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 80

3.4.1.4 อยางไร (How) เปนการใหคำตอบวา รายละเอียดที่ลูกคาตองการใหออกแบบ กราฟกเพื่อสื่อสารอะไร นักออกแบบจะไดผลิตงานไดตรงความตองการของกลุมเปาหมาย

1.What

2.Where

3.Who

4.How

ภาพที่ 3.4 แนวคิดหลักของงานออกแบบกราฟก ที่มา : นุจรี บุรีรัตน (2564) 3.4.2 การออกแบบแนวคิด (Conceptual Design) เมื่อไดคำตอบจากการวิเคราะห โจทยปญ หา นักออกแบบจะตองวิเคราะหรวบรวมแนวคิดทั้ง หมด งานออกแบบกราฟกที่ดี ตองมีแนวคิดที่ดี เพื่อเพิ่มคุณคาใหแกงานออกแบบกราฟก ดังนั้น แนวคิดจึงมีบทบาทสำคัญ ในการกำหนดคุณคาของชิ้นงานออกแบบกราฟกอยางมาก แตงานออกแบบกราฟกที่ไมมีแนวคิด ไมไดเปนงานที่ไมดีเสมอ เนื่องจากงานบางอยางไมมีแนวคิด แตเปนการทำงานออกแบบเพื่อ ตอบสนองเกณฑการออกแบบ (Design Criteria)

ภาพที่ 3.5 การออกแบบแนวคิด (Conceptual Design) ที่มา : นุจรี บุรีรัตน (2564) 3.4.3 กรณี ศ ึ ก ษาและค น หาข อ มู ล (Case Study and Data Finding) หากงาน ออกแบบกกราฟกนั้นมีกรณีศึกษา และคนหาขอมูลที่ดีแลว นักออกแบบควรศึกษาเปรียบเทียบ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 81

ขอดีขอเสียของงาน เพื่อนำไปประยุกตใหเขากับงานออกแบบกราฟก ซึ่งถือไดวาเปนเรื่องสำคัญ สำหรั บ นั ก ออกแบบกราฟ ก มาก เป น การชี ้ แ นะช อ งทางในการออกแบบ แก ไ ขโจทย ไ ด จากตัวอยางที่มีอยู ซึ่ง สามารถศึกษาไดจากแหลงเรียนรูตาง ๆ เชน พิพิธภัณฑ นิทรรศการ แสดงผลงาน เว็บไซตที่สรางแรงบันดาลใจ ตัวอยางผลงานการออกแบบทั้ง ในประเทศและ ตางประเทศ เพื่อเปดมุมมอง และทันตอกระแสการเปลี่ยนแปลงทางสังคม จากนั้นจึงใชความคิด ของนักออกแบบดัดแปลงงานออกแบบกราฟกอยางสรางสรรค

ภาพที่ 3.6 กรณีศึกษาและคนหาขอมูล (Case Study and Data Finding) ที่มา : นุจรี บุรีรัตน (2564) 3.4.4 การออกแบบภาพราง (Preliminary Design) เปนการถายทอดแนวคิดของ งานออกแบบกราฟกที่มีอยูในจินตนาการ ถายทอดออกมาเปนภาพรางบนกระดาษ เปนงานที่ยัง ไมมีรายละเอียด ดังนั้นจึงไมจำเปนตองมีความสวยงามมากนักเพียงแตใหสามารถทำความเขาใจ วางานกราฟกคืออะไร อยูตรงไหน ควรออกแบบอยางไร ควรมีภาพรางแบบตาง ๆ เพื่อเปนแบบ ให เ ลื อ ก แล ว จึ ง คิ ด วิ เ คราะห ค ั ด เลื อ กว า ภาพร า งใด ที ่ ต อบสนองแนวคิ ด บรรทั ด ฐาน การออกแบบมากที่สุด

ภาพที่ 3.7 การออกแบบภาพราง (Preliminary Design) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 82

3.4.5 การออกแบบคอมพิ ว เตอรก ราฟ ก (Computer Graphic Design) เป น ขั ้ น ตอนการนำภาพร า งที ่ ผ  า นการพิ จ ารณา หรื อ คั ด เลื อ กจากที ม งานออกแบบกราฟ ก มา สรางสรรคดวยโปรแกรมทางคอมพิวเตอรที่ใชในการออกแบบกราฟกที่เหมาะสม รวมถึงขั้นตอน การตรวจทานความถูกตอง เปนขั้นตอนการเลือกใชโปรแกรมคอมพิวเตอรกราฟกใหเหมาะสมกับ งานที่จะออกแบบ เชน หากตองการผลิตสื่อสิ่งพิมพ เชน โปสเตอรขนาดใหญ ประเภทไฟลภาพ เปนแบบเวคเตอร ควรเลือกใชโปรแกรม Adobe Illustrator แตหากตองการผลิตสื่อเพื่อนำเสนอ ผานหนาจอคอมพิวเตอรหรือโทรศัพทตาง ๆ ประเภทไฟลภาพเปนแบบบิตแมพ ควรเลือกใช โปรแกรม Adobe Photoshop

CG

ภาพที่ 3.8 การออกแบบคอมพิวเตอรกราฟก (Computer Graphic Design) ที่มา : นุจรี บุรีรัตน (2564) 3.4.6 การเผยแพร (Publishing) เปนขั้นตอนสุดทายที่นักออกแบบจะตองจัดเตรียม ไฟลสงพิมพใหถูกตองครบถวน หากจะตองสงใหโรงพิมพควรประสานงานระหวางผูสงและผูรับ ไฟลใหถูกตองเพื่อปองกันขอผิดพลาด กอนนำไปเผยแพรในรูปแบบสื่อสิงพิมพ เชน การพิมพสื่อ เพื่อการโฆษณาและประชาสัมพันธตาง ๆ เชน นามบัตร แผนพับ ไวนิล เปนตน หรือสามารถ เผยแพรผานสื่อในรูปแบบออนไลน เชน เผยแพรผานทางเว็บไซต สื่อสังคมออนไลนตาง ๆ ซึ่งเปน การเผยแพรสื่อที่สามารถเลือกกลุมเปาหมายได และประหยัดคาใชจาย สามารถมีปฏิสัมพันธกับ กลุมเปาหมายไดสะดวกและรวดเร็ว

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 83

ภาพที่ 3.9 การเผยแพรสื่อ (Publishing) ที่มา : นุจรี บุรีรัตน (2564) งานออกแบบกราฟกที่ดีนั้น นักออกแบบจะตองคำนึงถึงสิ่งสำคัญอีกอยางคือ การจัดวาง องคประกอบในงานออกแบบกราฟก เชน การนำ สี เสน รูปภาพ ตัวอักษรตาง ๆ มาวางไว ดวยกันในพื้นที่หนึ่ง เพื่อสรางผลงานที่สามารถสื่อสารในสิ่งที่ตองการออกมา 3.5 การจัดวางองคประกอบในงานออกแบบกราฟก การจัดวางองคประกอบทำขึ้นเพื่อใหงานที่ออกแบบสามารถสื่อความหมายที่ตองการ และสามารถมองเห็นจุดเดนของงานไดอยางชัดเจน และทำใหภาพรวมของงานออกแบบกราฟก สงเสริมไปในทิศทางเดียวกัน 3.6.1 การใช ม าตราส ว น (Scale) การจั ด วางองค ป ระกอบโดยการสร า งวั ต ถุ ท ี ่ มี ขนาดใหญ ขนาดเล็กที่มีขนาดไมเทากัน ในการออกแบบจะเปนการแสดงใหเห็นถึงสิ่งที่ตองการ เนนเปนพิเศษ หากออกแบบ สิ่งใดที่มีขนาดเทากันหมด แสดงใหเห็นวาไมไดเนนที่จะสื่ออะไร ซึ ่ ง จะทำให ง านออกแบบดู เ รี ย บง า ยเกิ น ไป ดั ง นั ้ น ในการออกแบบจำเป น ต อ งให มี รูปแบบของมาตราสวน (Scale) ที่แตกตางเสมอ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 84

ภาพที่ 3.10 การออกแบบโดยใชมาตราสวน (Scale) ที่มา : Idxw (2564) จากภาพที่ 3.10 เปนการออกแบบโปสเตอรโดยใชมาตราสวนที่ตางขนาด จะเห็นวามี ภาพใบหนาของผูชายที่มีขนาดใหญ เพื่อเนนเปนพิเศษทำใหเปนจุดเดน ภาพที่มีขนาดใหญ โดยทั่วไปจะเปนตัวละครเอกในเรื่อง และมีภาพใบหนาตัวประกอบอื่น ๆ ที่มีขนาดไมเท ากัน นำมาเปนสวนรอง เพื่อสรางจุดเดนของงานใหชัดเจนมากขึ้น 3.6.2 การออกแบบโดยใชกราฟกซ้ำ ๆ (Repetition) การสรางเปนพื้นผิวแปลกใหม ในรูปแบบซ้ำ ๆ เปนหลักการหนึ่งในการจัดวางองคประกอบซึ่งจะชวยในการสรางความนาสนใจ ทำใหดูแปลกตา มีความตอเนื่องลื่นไหลดูไดอยางเพลิดเพลิน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 85

ภาพที่ 3.11 การออกแบบโดยใชกราฟกซ้ำ ๆ ที่มา : Idxw (2564) 3.6.3 ความสมดุล (Balance) การจัดสมดุลมีอยู 2 ลักษณะที่สำคัญ คือ ความสมดุลใน รู ป ทรง หรื อ ความเหมื อ นกั น ทั ้ ง 2 ด า น คื อ เมื ่ อ มองดู ภ าพแล ว เห็ น ได ท ั น ที ว  า ภาพที่ ปรากฎนั ้ น เท า กั น ลั ก ษณะภาพแบบนี ้ ท ำให ค วามรู  ส ึ ก ที ่ ม ั ่ น คง เป น ทางการแต อ าจทำ ใหดูนาเบื่อไดงาย ความสมดุ ล ในความรู  ส ึ ก หรื อ ความสมดุ ล ที ่ ส องข า งไม เ หมื อ นกั น เป น ความ แตกต า งกั น ทั ้ ง ในด า นรู ป แบบ สี หรื อ พื ้ น ผิ ว แต เ มื ่ อ มองดู โ ดยรวม จะเห็ น ว า เท า กั น ไมเอนเอียงไปขางใดขางหนึ่ง ความสมดุลในลักษณะนี้ ทำใหเกิดความรูสึกเคลื่อนไหว แปรเปลี่ยน ไมเปนทางการ และไมนาเบื่อ

ภาพที่ 3.12 การออกแบบโดยใชความสมดุลในความรูสึก ที่มา : Idxw (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 86

จากภาพที ่ 3.12 เป น การออกแบบกราฟ ก ใช ก ารจั ด วางองค ป ระกอบแบบ มีความสมดุลในความรูสึก จากรูปใบหนาผูชาย ที่มีภาพประกอบตาง ๆ มาวางแลวใหเกิดภาพ ทำใหมีความรูสึกวาภาพรวมทั้งหมดคือใบหนาผูชาย ทำใหงานออกแบบดูไมนาเบื่อ 3.6.4 ความสมมาตร (Symmetry) จำเปนจะตองยึดหลักของความสมมาตรโดยรวม หมายความวาองคประกอบของกราฟกทางฝงซายและขวาจะตอง “เทากัน” หรือ “เหมือนกัน” เสมอไป ซึ่งโดยสวนใหญจะเปนอยางนั้น แตในการใชงานจริงอาจมีชองวางเพียงเล็กนอย เพื่อให งานออกแบบกราฟกนาสนใจ แตองคประกอบของภาพโดยรวมยังตองยึดหลักความสมมาตร เทากัน

ภาพที่ 3.13 การออกแบบโดยใชความสมมาตร (Symmetry) ที่มา : Idxw (2564) จากภาพที่ 3.13 เปนการออกแบบกราฟกโดยใชความสมมาตร (Symmetry) ใชการจัด วางองคประกอบแบบเทากันทางฝงซายและขวา มีน้ำหนักของวัตถุตาง ๆ อยูหางกันอยางสมดุล โดยยึดหลักความสมมาตรเทากัน 3.6.5 ความโปรงใส (Transparency) เปนการจัดวางองคประกอบในลักษณะของการ ทำใหภาพคอย ๆ เลือนหายไป ซึ่งอาจนำวัตถุหลายอยางมาจัดวางซอนกัน แลวสามารถมองทะลุ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 87

ผาน หรือแมแตการออกแบบความโปรงใสใหแกวัสดุ หรือใชการดัดขึ้นรูปสามารถสรางผลลัพธ ที่แตกตางกันได

ภาพที่ 3.14 การออกแบบโดยใชความโปรงใส (Transparency) ที่มา : Idxw (2564) จากภาพที่ 3.14 เปนการออกแบบกราฟกโดยใชความโปรงใส (Transparency) โดยใช ภาพที่มีความโปรงใสสามารถมองทะลุผานลงไปในอีกชั้นของวัตถุที่วางอยูซอนกันได การจัดวาง องคประกอบแบบนี้จะมีความแปลกใหม และควรเลือกกลุมเปาหมายในชวงวัยรุน เพราะหากสูง วัยอาจจะทำใหตาลาย และทำใหไมเขาใจสิ่งที่ตองการสื่อสาร 3.6.6 จั ง หวะลี ล า (Rhythm) การกำหนดจั ง หวะขององค ป ระกอบภาพ จำเป น ตองอาศัยหลักการทางศิลปะ การสรางจังหวะหรือลีลาของสวนประกอบตาง ๆ ไดแก ขอความ ภาพประกอบ หรือสัญลักษณ จะทำหนาที่ 2 ทาง คือ เปนการชี้นำใหผูดูภาพ และสาระขอมูล ตามตองการ และเปนการเนนใหเกิดความสวยงามที่มีความแปลกตา วิธีการสรางองคประกอบ ใหเกิดจังหวะลีลา กระทำไดหลายแบบ ไดแก 3.6.6.1 แบบจั ด ระเบีย บ เป น การจัด ที ่เ น น รู ปแบบอยา งเป นทางการ เช น การจั ด ให เ กิ ด ความสมดุ ล แบบสมมาตร มี ก ารแบ ง แยกตั วอั กษรและภาพไว ค นละสวนกัน มีการแบงระยะพื้นที่วางเปนระยะ ๆ เทากัน 3.6.6.2 การจัดแบบสลับ เปนการสลับเนื้อหาสาระรูปภาพ การสลับรูปแบบรูป ทรงเพื่อเนนความตื่นตาตื่นใจ ไมนาเบื่อ นิยมใชจัดออกแบบกราฟก หนาเอกสาร 3.6.6.3 การจัดแบบศูนยกลาง เปนการเนนรูปภาพอยูตรงกลางภาพ และใหตัว

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 88

อักษรขอความอยูลอมรอบหรือกระจายเปนรัศมี นิยมใชจัดในงานออกแบบสื่อโฆษณา 3.6.6.4 การจั ด แบบกระจาย เป น การจั ด แบบอิ ส ระโดยไม เ น น ลั ก ษณะ องค ป ระกอบแบบใด การจั ด ภาพแบบนี ้ จ ะมี จ ั ง หวะลี ล าไม แ น น อน แล ว แต โ อกาสและ ลักษณะงานนั้น ๆ นิยมใชในงานออกแบบสื่อโฆษณา 3.6.6.5 การจัดแบบผสมผสาน เปนการนำหลาย ๆ วิธีการจัดออกแบบ รวมกัน ทำใหเกิดเปนรูปแบบใหมขึ้นมา การจัดวิธีการนีต้ องคำนึงถึงความสอดคลองสัมพันธกัน 3.6.7 การใช ก รอบ (Framing) การใช ก รอบช ว ยทำให ง านที ่ ต  อ งการเน น โดดเดน น า สนใจมากยิ ่ ง ขึ ้ น หลั ก ในการใช ก รอบคื อ การใช อ งค ป ระกอบวั ต ถุ หรื อ กราฟ ก ต า ง ๆ มาสรางกรอบในจินตนาการ ซึ่งไมจำเปนตองตีกรอบดวยเสนตรงสี่เหลี่ยมแบบปกติทั่วไป แต สามารถทำใหผูดูรูสึกไดถึงกรอบเชนกัน

ภาพที่ 3.15 การออกแบบวัตถุโดยใชกรอบ (Framing) ที่มา : Idxw (2564) จากภาพที่ 3.15 เปนการออกแบบกราฟก โดยการใชกรอบจากวัตถุตาง ๆ นำมาวาง เรียงตอกันใหความรูสึกเปนกรอบลอมรอบตัวอักษรญี่ปุน โดยเลือกจากวัตถุที่มีการใชเสนที่นำ สายตา ซึ่งเปนการเนนใหเห็นขอความที่ชัดเจน ชวยทำใหงานเนนความโดดเดน 3.6.8 การใชกริด (Grid) กริด คือ เสนที่วางเปนตารางใชในการทำงาน เพื่อกำหนด ขอบเขตในการออกแบบงานกราฟก และจัดองคประกอบตาง ๆ ทั้ง ภาพและเนื้อหาใหอยูใน รูปแบบที่สวยงามตามตองการ หนาที่หลักของกริดคือ ใชเปนโครงสรางคราว ๆ เพื่อแบงแยก เนื้อหาใหมีความเปนระเบียบเรียบรอย

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 89

ภาพที่ 3.16 การออกแบบโดยใชกริด (Grid) ที่มา : Idxw (2564) จากภาพที่ 3.16 เปนการออกแบบหนังสือ โดยการใชกริดลักษณะการออกแบบเปน คอลัมน การนำเสนกริดมาแสดงเปนตารางเพื่อใหเห็นโครงสรางแบบคราว ๆ และแบงระยะหาง ไดอยางลงตัว เหมาะสำหรับการออกแบบหนังสือที่มีเนื้อหาจำนวนมาก นำเนื้อหามาจัดแบงเปน คอลัมนเพื่อใหเนื้อหาเปนระเบียบไมหนาแนนเกินไป ทำใหนาอานมากขึ้น 3.6.9 การเคลื่อนไหว (Movement) การออกแบบภาพนิ่งใหมีการเคลื่อนไหวสามารถ ทำใหภาพนั้นดูมีแรงและมีความรวดเร็ว มีการเคลื่อนที่ไปในทิศทางตาง ๆ ดวยการใชกลุมของ เสน หรือการทำใหเบลอเฉพาะสวน หรือเบลอเปนเสนในทิศทางที่ตางกัน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 90

ภาพที่ 3.17 การออกแบบภาพโดยใชการเคลื่อนไหว (Movement) ที่มา : https://idxw.net (2564) จากภาพที่ 3.17 เปนการออกแบบภาพนิ่งใหมีการเคลื่อนไหว โดยการใชเสนเปนตัวนำ สายตา มีการเคลื่อนที่ไปในทิศทางตาง ๆ ซึ่งออกแบบเสนใหรับการเคลื่อนไหวของรางกายไปใน ทิศทางที่สัมพันธกัน เพื่อใหรูสึกถึงการเคลื่อนไหว ไปในที่ทิศที่กำหนด การจั ด วางองค ป ระกอบของการออกแบบกราฟ ก เป น การจั ด วางองค ป ระกอบ ขึ้นเพื่อใหงานออกแบบสามารถสื่อความหมายที่ตองการ และสามารถมองเห็นจุดเดนของงาน ได อ ย า งชั ด เจน ซึ ่ ง ภาพรวมของงานส ง เสริ ม ไปในทิ ศ ทางเดี ย วกั น ประกอบด ว ย 1) การใชมาตราสวน (Scale) การออกแบบเพื่อตองการเนนเปนพิเศษ ควรสรางวัตถุที่มีขนาดเล็ก ใหญไมเทากัน วัตถุที่มีขนาดใหญจะสรางจุดสนใจไดมากกวา 2) การออกแบบโดยใชกราฟกซ้ำ ๆ (Repetition) การสรางเปน พื้น ผิวแปลกใหม ในรูปแบบซ้ำ ๆ เปนหลักการในการสรางความ น า สนใจทำให ด ู แ ปลกตา 3) ความสมดุ ล (Balance) คื อ ภาพมองที่ ด ู ภ าพแล ว ทำให ความรู  ส ึ ก ที ่ ม ั ่ น คงรู  ส ึ ก สมดุ ล ทั ้ ง ด า นรู ป ทรง และสมดุ ล ในความรู  ส ึ ก 4) ความสมมาตร (Symmetry) องค ป ระกอบของกราฟ ก ทางฝ  ง ซ า ยและขวาจะต อ งเท า กั น หรื อ เหมื อนกัน 5) ความโปรงใส (Transparency) เปนการจัดวางเลยเอาทในลักษณะของการคอยๆ เลือนหายไป มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 91

หรือการออกแบบความโปรง ใสกับวัสดุ 6) จังหวะลีลา (Rhythm) เปนการกำหนดจังหวะของ องคประกอบภาพจำเปนที่ตองอาศัยหลักการทางศิลปะ การสรางจังหวะลีลา ของสวนประกอบ ตาง ๆ 7) การใชกรอบ (Framing) การใชกรอบชวยทำใหงานที่ตองการ เนนโดดเดน นาสนใจมาก ยิ ่ ง ขึ ้ น 8) การใช ก ริ ด (Grid) เป น การใช เ ส น ที ่ ว างเป น ตาราง เพื ่ อ กำหนดขอบเขต ในการออกแบบงานและจัดองค ประกอบต าง ๆ และ 9) การเคลื่อนไหว (Movement) การ ออกแบบภาพนิ่ง ใหมีการเคลื่อนไหวสามารถทำใหภาพนั้นดูมีแรงและมีความรวดเร็ว มีการ เคลื่อนที่ไปในทิศทางตาง ๆ จากหลักการจัดวางองคประกอบของการออกแบบกราฟกขางตน ควรศึกษาจดจำให เขาใจอยางถองแท นอกจากจะชวยใหสรางสรรคงานไดอยางมีหลักวิธีคิด เขาใจที่มาที่ไปใน เหตุผลในการเลือกใชสิ่งที่นำมาประกอบกัน จะทำใหผลงานการจัดวางองคประกอบสำหรับงาน ออกแบบงานกราฟกนั้นมีคุณภาพ และสื่อสารไดตรงวัตถุประสงค และใชง านไดตามความ ตองการของกลุมเปาหมาย 3.6 บทสรุป การออกแบบกราฟก เปนการสราง หรือรวมสวนประกอบทางศิลปผานกระบวนการ ทางการออกแบบอยางใดอยางหนึ่ง หรือมากกวาหนึ่งกระบวนการทางการออกแบบ เพื่อใชใน การสื่อสารบางอยาง หรือเปน กิจกรรมการออกแบบที่สรางสรรคโดยองคกร บุคลากร หรือ ปญญาประดิษฐ รวบรวมทรัพยากร และวัตถุในการออกแบบใหมีความพรอมเพื่อใหงานออกแบบ สมบูรณ การออกแบบเพื่อการสื่อสารเปนสิ่งที่สำคัญจากการฝกฝน และเรียนรูจนเกิดทักษะ และ ความเชี่ยวชาญในการออกแบบกราฟก คุณคาของงานออกแบบกราฟก จำแนกไดดังนี้ 1) เพิ่มประสิทธิภาพในการสื่อสาร 2) จดจำงาย และนาสนใจ 3) งานนำเสนอนาติดตาม และเขาใจงาย 4) เปนสื่อกลางเพื่อใหเกิดการ เรียนรู และ 5) เกิดความคิดสรางสรรคในสิ่งใหม บรรทัดฐานในการออกแบบ จะทำหนาที่เปนตัววัดทำใหสามารถตัดสินงานกราฟกได วางานไหนเปนงานที่ดี หรือไมดี บรรทัดฐานในงานออกแบบมี 3 ประการ ดังนี้ สิ่งแรกคือความ เวิรคในการใชงานใหคะแนนหาสิบเปอรเซ็นต สวนความสวยเปนสิ่งที่คำนึงรองลงมา เพราะทำ ใหมีความสุน ทรียในผลงาน ใหคะแนนสามสิบเปอรเซ็นต และสุดทาย ผลงานจะมีคุณคาและ แตกตางจากผลงานอื่น ๆ ทั่วไป คือ สามารถสื่อความหมายไดใหคะแนนยี่สิบเปอรเซ็นต มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 92

ขั้นตอนการทำงานออกแบบกราฟก มีตองมีขั้นตอนการทำงานที่สัมพันธ ดังนี้ 1) การ วิเคราะหปญหา 2) การออกแบบแนวคิด 3) กรณีศึกษาและคนหาขอมูล 4) ออกแบบภาพราง 5) ออกแบบคอมพิวเตอร และ 6) เผยแพร การจั ด วางองค ป ระกอบของการออกแบบกราฟ ก เป น การจั ด วางองค ป ระกอบ ขึ้นเพื่อใหงานออกแบบสามารถสื่อความหมายที่ตองการ และสามารถมองเห็นจุดเดนของงาน ได อ ย า งชั ด เจน ซึ ่ ง ภาพรวมของงานส ง เสริ ม ไปในทิ ศ ทางเดี ย วกั น ประกอบด ว ย 1) การใชมาตราสวน 2) การออกแบบ โดยใชกราฟกซ้ำๆ 3) ความสมดุล 4) ความสมมาตร 5) ความโปรงใส 6) จังหวะลีลา 7) การใชกรอบ 8) การใชกริด และ 9) การเคลื่อนไหว

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือข่ายงานกราฟิ ก งานออกแบบกราฟ ก ต า ง ๆ ถู ก สร า งขึ ้ น เพื ่ อ เป น สั ญ ลั ก ษณ แ ทนแก น สารของ ประสบการณสำหรับมนุษย เพื่อใหมนุษยใชเปนสื่อในการคิด และใชในการสื่อสารความ หมายถึงกัน ดวยคุณสมบัติที่ดีของงานกราฟก ทำใหงานกราฟกมีบทบาทสำคัญในการลด ขอจำกัดตาง ๆ ที่เกี่ยวของกับระยะเวลา ประสิทธิภาพของการคิด การบันทึกและการจำ ทำ ใหการสื่อความหมายตอกันของมนุษยเปนไปอยางมีประสิทธิภาพ และดวยความเจริญกาวหนา ทางวิชาการ ความเจริญกาวหนาทางเทคโนโลยี และความแตกตางระหวางบุคคล เปนเหตุผล สำคัญที่ทำใหมนุษยจำเปนตองใหความสำคัญกับงานกราฟกมากขึ้น ซึ่งงานกราฟกไดพัฒนา เพื่อใหเหมาะสมกับการนำไปใชงานดานตาง ๆ หลากหลายรูปแบบ นักออกแบบควรศึก ษา เครือขายงานกราฟกเพื่อนำไปพัฒนาสื่อในรูปแบบตาง ๆ ไดอยางถูกตอง 4.1 สื่อสิ่งพิมพ งานออกแบบสื่อ สิ ่ง พิมพเ ปน พื้น ฐานของงานกราฟ กเริ่ม แรกที ่มี ประวัต ิย าวนาน ความสำคั ญ ในการออกแบบสิ ่ ง พิ ม พ คื อ เพื ่ อ เพิ ่ ม ประสิ ท ธิ ภ าพในการสื ่ อ สาร โดยมี เนื้อหาที่นำมาพิมพ การออกแบบสิ่งพิมพเปนการดำเนินการเพื่อใหเกิดผลลัพธตาง ๆ สิ่งแรก ตองดึงดูดใจใหผูที่พบเห็นเกิดความสนใจในสิ่งพิมพ สามารถถายทอดขอมูลที่ตองการจะสื่อสาร อยางชัดเจน และเหมาะสมกับผูรับสื่อ สรางความประทับใจทำใหขอมูลที่สื่อสารเปนที่จดจำ ผูที่มีความสำคัญ ที่สุดในกระบวนการออกแบบสิ่งพิมพเรียกวาผูกำกับศิลป (Art Director) หรือบางครั้งในสำนักพิมพ เรียกวาบรรณาธิการศิลป (Art Editor) 4.1.1 ความหมายของสื่อสิ่งพิมพ พจนานุกรมฉบับราชบัณฑิตยสถานไดใหความหมายคำที่เกี่ยวกับ “สื่อสิ่งพิมพ” ไวดังนี้ คำวา “สิ่งพิมพ”หมายถึงสมุด แผนกระดาษหรือวัตถุใด ๆ ที่พิมพขึ้น รวมตลอดทั้ง บท เพลง แผนที่ แผนผัง ภาพ ภาพวาด ภาพระบายสี ใบประกาศ แผนเสียง หรือสิ่งอื่นใดอันมี ลักษณะเชนเดียวกัน “สิ่งพิมพ” หมายถึง ขอความ ขอเขียน หรือภาพที่เกี่ยวกับแนวความคิด

การออกแบบกราฟก 94

ข อ มู ล สารคดี บ ั น เทิ ง ซึ ่ ง ถ ายทอดด วยการพิม พ ล งบนกระดาษ ฟ ล  ม หรื อ วั ส ดุ พื ้นเรียบ “สื่อ” หมายถึง การติดตอใหถึง กัน ชักนำใหรูจักกัน หรือตัวกลางที่ทำการติดตอใหถึง กัน “พิ ม พ ” หมายถึ ง ถ า ยแบบ ใช เ ครื ่ อ งจั ก รกดตั ว หนั ง สื อ หรื อ ภาพ ให ต ิ ด บนวั ต ถุ เช น แผนกระดาษ ผา ทำใหเปนตัวหนังสือ โดยการกดหรือการใชพิมพ หินเครื่องกลวิธีเคมี หรือวิธี อื่น ๆ ที่ทำใหเกิดเปนสิ่งพิมพขึ้น ดังนั้น “สื่อสิ่งพิมพ” จึงหมายถึงแผนกระดาษหรือวัตถุใด ๆ ดวยวิธีตาง ๆ อันเกิดเปน ชิ้นงานที่มีลักษณะเหมือนตนฉบับขึ้นหลายสำเนา ในปริมาณมากเพื่อเปนสิ่ง ที่ทำการติ ดตอ หรือชักนำใหบุคคลอื่นใหเห็นหรือทราบขอมูลตาง ๆ สิ่งพิมพมีหลายชนิด ไดแก เอกสารหนังสือ เรียน หนังสือพิมพ นิตยสาร วารสาร บันทึก รายงาน ฯลฯ 4.1.2 วัตถุประสงคของการออกแบบสื่อสิ่งพิมพ เปนการจัดวางองคประกอบ หรือรวบรวมขอมูลเขาไวดวยกันอยางมีระบบใน งานออกแบบสิ่งพิมพ ไมวาจะเปนตัวอักษร ภาพ หรือการจัดวางองคประกอบตาง ๆ เพื่อให การออกแบบสื่อสิ่งพิมพเปนไปตามวัตถุประสงคที่ตองการ ดังนี้ 4.1.2.1 เพื่อใชเปนแนวทางในการผลิตสื่อสิ่งพิมพ ใหทราบถึงรูปแบบ รูปราง ลักษณะ และสวนประกอบในการพิมพ ทำใหเห็นภาพรวมในการผลิตสื่อสิ่งพิมพ 4.1.2.2 เพื่อสรางความสวยงามทางศิลปของสื่อสิ่งพิมพ เปนการสรางความ ประทับใจใหกับผูพบเห็น 4.1.2.3 เพื่อดึงดูดความสนใจของผูพบเห็นและผูอาน การออกแบบกราฟกเปน หนทางที่สามารถสื่อสาร และประชาสัมพันธสงเสริมการขายใหเปนที่รูจัก การใชรูปภาพในการ ออกแบบสามารถสรางการจดจำไดงาย และทำใหมีแรงดึงดูดมากกวา 4.1.2.4 เพื่อเสนอขาวสาร ใหความรู สรางความเขาใจ และงายตอการจดจำ เนื้อหา เชน สิ่งพิมพดานการศึกษา การออกแบบที่สรางความนาสนใจ ประกอบกับการให ขอมูลเนื้อหาที่เปนประโยชน 4.1.2.5 เพื่อนำเสนอจุดเดนในองคกร ที่จะสรางการจดจำโดยนำเสนอสิ่ง ที่เปน จุดนาสนใจ ควรพิจารณาถึงคุณภาพของสื่อที่จะนำเสนอ 4.1.2.6 เพื่อเพิ่มประสิทธิภาพในการสื่อสาร จะชวยใหองคกรสามารถกำหนด เนื้อหาที่เหมาะสม และสรางสรรคสื่อตาง ๆ ที่เขาถึงกลุมเปาหมายไดเปนอยางดี มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 95

4.1.3 หลักการออกแบบสื่อสิ่งพิมพ การออกแบบสื่อสิ่งพิมพใหมีความนาสนใจ และสะดุดตาแกผูอาน สามารถทำ ไดตามหลักการออกแบบสื่อสิ่งพิมพ ดังนี้ 4.1.3.1 ควรออกแบบสื่อสิ่งพิมพใหดึงดูดความสนใจของผูอาน 4.1.3.2 ควรออกแบบสื่อสิ่งพิมพใหเปนที่สังเกตหรือจดจำไดงาย 4.1.3.3 นำเสนอขาวสารไปสูผูอานดวยการออกแบบที่มีลักษณะของการเสนอ เนื้อหาในรูปแบบที่สวยงาม และสะดวกตอการทำความเขาใจในเนื้อหา 4.1.3.4 ใชศิลปะของการออกแบบปดบังความดอยในคุณภาพของวัสดุพิมพ 4.1.3.5 ควรออกแบบสื่อสิ่งพิมพใหผูอานเขาใจเนื้อหาไดงาย และสะดวกขึ้น 4.1.3.6 ควรออกแบบสื่อสิ่งพิมพใหมีลักษณะเหมาะสม ตรงกับความมุงหมาย ตามประโยชนใ ช ส อย มี ค วามกลมกลื น ตามหลั กเกณฑค วามงามของสั ง คม และสามารถ ปรับปรุงเปลี่ยนแปลงได 4.1.3.7 ควรออกแบบสื่อสิ่งพิมพใหมีลักษณะที่ใชงานงาย มีจำนวนผลิตตาม ความตองการ และมีกระบวนการผลิตไมยุงยากซับซอน 4.1.3.8 ควรออกแบบสื ่ อ สิ ่ ง พิ ม พใ ห มี ส ั ด ส ว นที ่ ดี มี ค วามกลมกลื น กันทั้ง สวนรวม เชน รูปแบบ ลักษณะผิว เสน สี เปนตน มีสัดสวนที่เหมาะสมในการใชงาน 4.1.3.9 ควรออกแบบสื่อสิ่ง พิมพใหมีความเหมาะสมกับวัสดุและวิธีการ มี คุณภาพ มีวิธีการใชงายสะดวก 4.1.3.10 ควรออกแบบสื ่ อ สิ ่ ง พิ ม พ ใ ห มี ก ารตกแต ง อย า งพอดี ไม ร กรุ ง รัง จนเกินไป 4.1.3.11 ควรออกแบบสื่อ สิ ่ง พิม พใ หมี โ ครงสร างที่ เหมาะสมกลมกลื น กั บ วัฒนธรรมและความตองการของสังคม 4.1.3.12 ควรออกแบบสื่อสิ่งพิมพใหไมสิ้นเปลืองเวลา สะดวกในการนำไปใช ในเวลาที่เหมาะสม

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 96

ภาพที่ 4.1 สื่อสิ่งพิมพ ที่มา : Bing (2021) จากภาพที่ 4.1 สื่อสิ่งพิมพหลากหลายประเภท ในรูปแบบตางๆ ผานการออกแบบ และจัดวางองคประกอบ ในการผลิตสื่อสิ่งพิมพเพื่อการโฆษณาประชาสัมพันธที่จัดพิมพขึ้นโดย บรรจุเนื้อหาสาระที่ดีมีประโยชน และใหความรูความเขาใจแกกลุมเปาหมาย กอนที่น ักออกแบบตัดสิน ใจผลิต สื่ อสิ่ง พิมพ นักออกแบบจำเปนจะตองพิจ ารณา องคประกอบของการพิมพเปนขอมูลสำคัญตอการออกแบบองคประกอบในการพิมพ ดังนี้ 4.1.4 หลักการพิจารณาองคประกอบในการพิมพ 4.1.4.1 วัตถุประสงคของการพิมพ การกำหนดเปาหมายของสื่อสิ่งพิมพ วา เปนสื่อสิ่งพิมพสำหรับบุคคลวัยใด หนังสือสำหรับเด็กหรือผูใหญ เพศใด สำหรับผูหญิง หรือ ผูชาย การศึกษาระดับใด ลักษณะของสื่อสิ่งพิมพ ไดแก หนังสือทางวิชาการ สารคดี รอยแกว รอยกรอง 4.1.4.2 รู ป ร า งของสื ่ อ สิ ่ ง พิ ม พ ตามปกติ ม ี ร ู ป ร า งมาตรฐานเป น รู ป สี่เหลี่ยมผืน ผาตามลักษณะของกระดาษขนาดมาตรฐาน ดั้ง นั้นการกำหนดสื่อสิ่งพิมพใหมี รู ป ร า งสี ่ เ หลี ่ ย มผื น ผ า จึ ง ไม ท ำให ก ระดาษเสี ย เศษ ซึ ่ ง มี ท ั ้ ง สี ่ เ หลี ่ ย มผื น ผ า แนวตั ้ ง และ สี่เหลี่ยมผืนผาแนวนอน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 97

4.1.4.3 ตำแหนงจุดแหงความสนใจในสื่อสิ่งพิมพ โดยปกตินักออกแบบสื่อ สิ่งพิมพมักจะใหความสำคัญแกปกหนาพิเศษมากกวาสวนอีก ทั้งนี้เพราะเปนจุดดึงดูดสายตา และสามารถสรางความนาสนใจแกผูอาน ในกรณีที่มีการแขงขันกับสื่อสิ่งพิมพอื่น ๆ สำหรับ การจัดหนาภายในหนังสือนั้น เมื่อกอนใหความสำคัญแกหนาขวามือหรือหนาคี่ ไดแก 1,3,5,7 ไปตามลำดับ 4.1.4.4 ขนาดของสื่อสิ่งพิมพ ขึ้นอยูกับขนาดของกระดาษเปนสำคัญจะเห็นได วาหนังสือขนาด 8 หนายก (7.5 นิ้ว*10.25นิ้ว) ที่พิมพในปจจุบันมีขนาดรูปเลมที่แทจริง ไม เทากัน ทั้งนี้เนื่องจากขนาดของกระดาษที่ใชพิมพไมเทากัน ไดแก กระดาษขนาด 31 นิ้ว *43 นิ้ว และกระดาษขนาด 24 นิ้ว *35 นิ้ว

ภาพที่ 4.2 ขนาดของสื่อสิ่งพิมพ ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.2 ขนาดของสื่อสิ่งพิมพบนกระดาษที่มีขนาดใหญสุด คือ A0 ถัดมาเปน ขนาด A1, A2, A3, A4, A5, A6, A7, A8, A9 และขนาดเล็กสุดคือ ขนาด A10 ตามลำดับ 4.1.5 ขั้นตอนการจัดหนา หรือการจัดเลเอาท (Layout) การจัดหนาเลเอาทเปนสวนหนึ่ง ในการจัดทำสื่อสิ่ง พิมพตาง ๆ สามารถใช โปรแกรม Adobe InDesign ชวยในการจัดเลเอาทของสื่อสิ่ง พิมพ และสื่ออิเล็กทรอนิ ก ส ขั้นตอนการจัดทำเลยเอาทแบงเปน 4 ขั้นตอน ดังนี้

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 98

4.1.5.1 เลยเอาทยอขนาด (Thumbnail Sketches Layout) เลยเอาทยอขนาด หรือรางหยาบยอขนาด เปนรูปแบบหรือขั้นตอน ของการจัดทำเลยเอาท โดยมีวัตถุประสงคเพื่อการศึกษา ความเปนไปไดในการจัดองคประกอบ เพื่อใหไดทางเลือกที่มากที่สุด เลยเอาทขนาดเล็กนี้ จะมีลักษณะเปนการรางดวยดินสอ หรือ ปากกาแบบคราว ๆ ในขนาดประมาณ 1 : 8 หรือ 1 : 4 ของขนาดสิ่งพิมพจริง 4.1.5.2 เลยเอาทหยาบ (Rough Layout) เลยเอาทหยาบ หรือรางหยาบเปนพัฒนาการขั้นตอไปของการจัดทำ เลยเอาท โดยมีวัตถุประสงคเพื่อสรุปขนาดตำแหนง และสัดสวนขององคประกอบตาง ๆ โดย เลยเอาทแบบนี้จะมีลักษณะ การรางดวยดินสอหรือปากกา และอาจมีการลงสี หรือนำภาพมา ตัดตอ ขนาดของเลยเอาทจะมีขนาดประมาณครึ่งหนึ่ง หรือเทากับขนาดของสิ่งพิมพจริง เลย เอาทหยาบจะมีประโยชน ในการนำเสนอความคิดใหฝายตาง ๆ ที่ทำงานรวมกันไดแสดงความ คิดเห็น

ภาพที่ 4.3 ภาพเลยเอาทหยาบ (Rough Layout) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.3 ภาพเลยเอาทหยาบ (Rough Layout) เปนการออกแบบรางเพื่อให เห็นภาพคราว ๆ เปนแนวทางของการออกแบบงานในภาพรวมใหเห็นการจัดวางองคประกอบ ของผลิตภัณฑสินคา เพื่อรับฟงความคิดเห็นและขอแนะนำของผูรวมงานกอนลงมือปฏิบัติจริง

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 99

4.1.5.3 เลยเอาทสมบูรณ (Comprehensive Layout) เลยเอาทสมบูรณเปนพัฒ นาการขั้นสุดทายของการจัดทำเลยเอาท โดยมี วัตถุประสงคเพื่อกำหนดขนาด ตำแหนง และสัดสวนที่แนนอนขององคประกอบตาง ๆ โดยเลย เอาทสมบูรณ นี้จะมีลักษณะเปนการวาด หรือเปนการพิมพแบบจากคอมพิวเตอรที่มีลักษณะ ใกลเคียงสื่อสิ่งพิมพฉบับจริงมากที่สุด

ภาพที่ 4.4 เลยเอาทสมบูรณ (Comprehensive Layout) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.4 เลยเอาทสมบูรณ (Comprehensive Layout) เปนการออกแบบ ภาพเลยเอาทที่เสร็จสมบูรณ โดยการเติมสีลงในวัตถุตาง ๆ ใหเห็นถึงมิติและเพิ่มความสวยงาม ทำใหภาพของผลิตภัณฑนาสนใจมากขึ้น 4.1.5.4 ดัมมี่ (Dummy) เปนแบบจำลองที่เกือบเหมือนจริงของสิ่งพิมพซึ่งมีหลายหนา เชน หนังสือ นิตยสาร และหนังสือพิมพ การทำดัมมี่อาจจัดทำในขนาดเทากับสิ่งพิมพนั้น ๆ หรือในขนาดที่ เล็กกวาของจริง ซึ่งประโยชนของดัมมี่ คือ การมองเห็นภาพรวมของสิ่งพิมพ และปองกันการ ผิดพลาด ในขั้นตอนการผลิต

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 100

4.2 ฟอนต (Font) การออกแบบฟอนต (Font) ลั ก ษณะที ่ ใ ช ใ นการออกแบบ เป น การนำตั ว อั ก ษร มาสรางรูปลักษณะที่จำเพาะเจาะจง เพื่อใหเกิดมิติของความสวยงาม และมีเอกลักษณ เชน การออกแบบสัญลักษณ เครื่องหมาย ตัวแทน หรือสื่ออยางใดอยางหนึ่งที่บง บอกประเภท รู ป แบบ หรื อ รู ป พรรณสั ณ ฐานของสิ ่ ง ที ่เ ป น เจ า ของสั ญ ลั กษณ หรื อ โลโก (Logo) นั ้ น ๆ ที ่ ใ ช เ ป น เครื่อ งหมายการค า หรื อ ส ว นหนึ ่ ง ของกลยุ ท ธ ก ารสร า งแบรนด ต  า ง ๆ โดยใชตัวอักษรเปนหลัก ซึ่งเปนสวนหนึ่งของงานออกแบบตัวอักษร 4.2.1 ความหมายของฟอนต (Font) คือ ตัวหนังสือที่มีลักษณะที่แตกตางกัน ขึ้นอยู กับผูออกแบบฟอนต จะสรางสรรค ใหมี ความสวยงาม โดดเดน โดนใจผูใชง าน และสรา ง เอกลักษณใหกับฟอนตของตัวเอง แตตองสามารถอานออกเขาใจได ฟอนตเขามามีบทบาท สำคัญกับการทำงานเปนอยางมาก ไมวาจะเปนการทำรายงานราชการ โปสเตอร ปายโฆษณา อื่น ๆ ฟอนตจะถูกนำมาสื่อสารตามรูปแบบของงาน เพื่อใหผูอานเขาถึงอารมณงานนั้นจริง ๆ จึงมีเทคนิคการใชฟอนตขั้นพื้นฐานใหเขากับงานออกแบบ ที่นักออกแบบกราฟกจำเปนตองรู เพื่อนำไปประยุกตใชกับการทำงาน ใหดูเปนมืออาชีพมากยิ่งขึ้น ในการออกแบบสื่อมิไดมีแตเพียงภาพวาด ภาพถาย หรือภาพเคลื่อนไหวเทานั้นที่ทำ หนาที่สื่อความหมาย แตตัวอักษรและภาพสัญ ลักษณมีบทบาทสำคัญ ในการสื่อความหมาย เชนกัน รวมถึงการสรางการจดจำภาพลักษณ และการสื่อสารแบรนด ของสินคาหรือบริการ ตางๆ ปจจุบันตัวอักษรและภาพสัญลักษณจะใชคอมพิวเตอรในการออกแบบ เพราะมีโปรแกรม ออกแบบเฉพาะทางจำนวนมาก ทำใหสามารถปรับเปลี่ยนแกไขและนำไปใชงาย โดยมีรายละเอีย ดและแนวทางการออกแบบที ่ ส ำคัญ ไดแก รูปแบบ (Form) คือ แนวคิดที่เปนหลักเกณฑ รูปแบบที่ชัดเจน เชน ชิดซาย ชิดขวาจัดกึ่งกลาง ความสมดุลทั้งดาน น้ ำ หนั ก และระยะห า งบรรทั ด ทั ้ ง ในเรื ่ อ งของการสื ่ อ สาร (Communication) คื อ เมื่อออกแบบมาแลว สามารถตีความหมายไดงาย เชน การตัดบรรทัด การเนนน้ำหนักของคำ และความแตกต า ง (Difference) งานออกแบบที่ ม ี ค วามแตกต า ง เช น มี ก ารออกแบบ ที่ไมธรรมดา มีการดัดแปลงหรือเพิ่มองคประกอบอื่นๆ เชน เสน จุด อื่น ๆ เพื่อสรางมิติของ การสรางสรรคที่แตกตาง มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 101

การออกแบบที่ดีนั้นไมใชเพียงแคการเลือกสีและการจัดองคประกอบภาพเทานั้น การ วางตัวอักษรใหสวยงาม และอานงายเปนอีกปจจัยที่จะทำใหงานออกแบบออกมาสวยงาม ดังนั้นถาตองการที่จะไดออกแบบงานใหสวยงาม ตองศึกษาหลักเกณฑการจัดวางตัวอักษร ดังนี้ 4.2.2 หลักเกณฑการใชฟอนตในการออกแบบ ประกอบดวย 4.2.2.1 การใหพื้นที่ตัวอักษร การให พ ื ้ น ที ่ก ั บ ตัว อั ก ษรจะทำให ค นอ า นไม รู  ส ึ กปวดตาหรื ออึ ด อั ด เกิน ไป เปรียบเสมือนเวลาที่เรามองไปโดยรอบ แลวเห็นรถเต็มถนน จะทำใหรูสึกอึดอัด ตัวอักษรก็ เชนเดียวกัน ควรใหพื้นที่กับตัวอักษร จะทำใหงานออกแบบไมอึดอัดจนเกินไป 4.2.2.2 เวนบรรทัดใหพอเหมาะ การเวนบรรทัดใหพอเหมาะเปนอีกจุดที่ตองใหความสำคัญ การเวนระยะหาง ระหวางบรรทัดมีผลตอการอานมาก เพราะถาเวนระยะบรรทัดมากเกินไป คนอานจะตองกวาด สายตาใหมากขึ้น อาจทำใหเกิดอาการปวดตา 4.2.2.3 ไมปรับขนาดมากเกินไป การที่ยอหรือเพิ่มขนาดตัวอักษร แตไมดูขนาดของตัวอักษร บางครั้งยอจนทำให ตัวอักษรบิดเบี้ยวทำใหเสียรูป เวลายอขนาดทุกครั้ง จะตองกดปุม Shift คางไวเพื่อใหเกิดความ เคยชิน หรือหากไมตองการกด Shift ใหใชวิธีเพิ่มตัวเลขขนาดจะดีกวาการยอขยายเอง 4.2.2.4 ทำสีสันใหนาดึงดูด หากตองการใหผลงานเปนที่นาสนใจ จะตองออกแบบและจัดวางตัวอักษรให สามารถอานไดงาย และหลักการงาย ๆ ที่จะชวยใหงานของคุณมีพลังดึงดูดมากขึ้น คือการ เลือกสีสันใหคนอานสามารถอานไดงาย เลือกสีใหตัดกัน จะสามารถทำใหอานไดงายมากขึ้น 4.2.2.5 เลือกฟอนตใหดี ฟอนตบางชนิดไมเหมาะกับขอความจำนวนมาก และไมเหมาะกับการอานเปน ระยะเวลานาน ฟอนตแตละชนิดจะมีคุณสมบัติเฉพาะตัว ดังนั้นจึงตองเลือกที่เหมาะสมกับงาน เพื่อการสื่อสารไดตรงตามวัตถุประสงค 4.2.2.6 จัดการขอความที่ตกหลน ขอความที่ตกหลน เกิดจากการพิมพขอความในหนึ่งบรรทัดแลวไมสามารถจบ ลงดวยขอความที่พอดี มีขอความหลนไปอีกบรรทัด ดังนั้นควรจัดการขอความใหจบลงอยาง มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 102

พอดี อาจจะใชวิธีจัดรูปแบบการจัดวางที่เหมาะสม หรือ การเรียบเรียงขอความประโยคใหม ใหขอความจบไดโดยไมมีขอความตกหลน 4.2.2.7 ไมควรใชฟอนตที่หลากหลาย เพื่อใหงานออกแบบดูไมรกจนเกินไป ไมควรใชฟอนตที่หลากหลายชนิด ควร เลือกฟอนตที่เดนเปนหัวขอ จากนั้นเลือกฟอนตที่มีลักษณะเรียบงาย ใชสำหรับกำหนดขอความ ที่มีจำนวนมาก เพื่อใหอานงายสบายตา 4.2.2.8 ควรเลือกฟอนตใหเขากับงาน การเลื อ กฟอนต ใ ห เหมาะสมกั บงานเป นเรื ่อ งที ่ต  องใส ใ จใหม ากที ่ส ุ ด การ ออกแบบที่ เ ลื อ กฟอนต ผ ิ ด จะทำให เ กิ ด ความเข า ใจที ่ ค ลาดเคลื ่ อ นได และไม เ ป น ไปตาม วัตถุประสงคที่ตองการสื่อสาร 4.2.2.9 ไมควรใชเอฟเฟกตที่มากเกินไป ควรหลีกเลี่ยนการใชเอฟเฟกตใหกับฟอนตที่มากเกินไป หากตองการเนนใหเดน อาจใชวิธีการเนนความหนา หรือ ใชสีใหเดน หากจำเปนตองใช ควรเลือกไมเกินสองรูปแบบ เพราะถาใชเอฟเฟกตมากเกินไป นอกจากจะทำใหงานไมมีความโดดเดน อาจจะทำใหลดความ นาเชื่อถือ 4.2.2.10 ไมปรับขนาดฟอนตสลับกันไปมา หากจะตองปรับขนาดฟอนตใหมีขนาดใหญ ควรเลือกขอความที่ตองการพาดหัว ขาว หรือตองการเนนเปนพิเศษ ถามันขนาดฟอนตเทากันหมดจะทำใหงานไมนาสนใจ ควร ปรับขนาดฟอนตที่มีเนื้อหาจำนวนมากใหมีขนาดเล็กกวาขอความที่พาดหัวขาว แตไมควรสลับ ขนาดกันไปมา 4.2.3 การสรางฟอนต และการติดตั้งเพื่อนำไปใชงาน การเลือกใชฟอนตในการออกแบบนั้น บางองคกรตองการฟอนตที่ไมซ้ำแบบใคร โดย เนนอัตลักษณขององคกรใหมีความแตกตาง ดังนั้นการสรางฟอนต จึงมีความจำเปนในการ นำไปใชงานในการแขงขันทางธุรกิจ เพื่อสรางความจดจำในอัตลักษณขององคกร 4.2.3.1 การสรางฟอนตโดยใชโปรแกรม Adobe Illustraor โปรแกรมที่ใชในการออกแบบฟอนต และไดภาพประเภทไฟลภาพแบบเวกเตอร ไดแก Adobe Illustraor ซึ่งมีความสามารถในการสรางฟอนตใหม ดวยการรางตัวอักษรดวย มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 103

มือ แลวนำภาพไปสแกน ออกแบบใหเปนเวกเตอร แลวปรับแตงจัดระเบียบฟอนตเพื่อใหไ ด รูปลักษณที่ถูกตอง อานงาย และคำนึงถึงสิ่งที่ตองการ จากนั้นเมื่อออกแบบเสร็จแลวใหทำการ บันทึก และสงออกเพื่อนำแบบฟอนตใหมไปใชประโยชนในการออกแบบครั้งตอไป

ภาพที่ 4.5 ตัวอยางงานออกแบบตัวอักษร ที่มา : Pinterest (2021) จากภาพที่ 4.5 เปนภาพตัวอยางงานออกแบบตัวอักษรภาษาอังกฤษ ตั้งแตอักษร A-Z ที่มีลักษณะทันสมัย โดยการลดทอนบางสวนออกไป ทำใหดูแปลกใหม และเปนตัวอักษรที่ ไมมีเชิง เหมาะสำหรับนำไปใชในงานที่ไมเปนทางการ 4.2.3.2 การสรางฟอนตจากเว็บไซต หรือการดาวนโหลดฟอนตใ ชง านฟรี นอกจากการสรางฟอนตขึ้นมาใชเอง ยังมีเว็บไซตที่สรางฟอนตใหใชงานไดฟรี หรือบางเว็บไซต รับออกแบบฟอนตต ามความต องการของผู ใ ชง าน เชน calligraphr.com, birdfont.org, cadsondemark.com, fontcraftstudio.com เปนตน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 104

ภาพที่ 4.6 การสรางฟอนตจากเว็บไซต calligraphr.com ที่มา : Calligraphr (2564) จากภาพที ่ 4.6 เป น ภาพการสร า งฟอนต จ ากเว็ บ ไซต calligraphr.com ซึ ่ ง เปน เว็บไซตที่ใหสรางฟอนตไ ดเอง โดยการเขียนดวยลายมือลงไปบนเทมเพลตที่มีให แลวนำไป สรางเปนตัวอักษร สามารถนำไปติดตั้งใชงานกับโปรแกรมทั่วไป จะไดฟอนตตามรูปแบบที่เรา ตองการเพื่อนำไปใชงานได

ภาพที่ 4.7 ดาวนโหลดฟอนตจากเว็บไซต F0nt.com ที่มา : F0nt (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 105

จากภาพที่ 4.7 เปนภาพตัวอยางเว็บไซตที่ใหดาวนโหลดฟอนต F0nt.com โดยการ เลือกรูปแบบฟอนต ที่ ตองการ ซึ่ง ในเว็บไซตจะมีใหท ดลองพิ มพ ขอ ความภาษาไทย และ ภาษาอังกฤษ เพื่อใหเห็นรูปแบบของฟอนตวามีลักษณะแบบใด หากสนใจสามารถดาวนโหลด เพื่อนำไปใชงานไดฟรี

Download Font

ภาพที่ 4.8 การดาวนโหลดฟอนต (Download Font) ที่มา : Google Fonts (2564) จากภาพที ่ 4.8 ตั ว อย า งการดาวน โ หลดฟอนต (Download Font) จากเว็ บไซต Google Fonts โดยเลือกฟอนตที่ตองการนำไปใช คือ “Anton” จากนั้นคลิกปุม Download Family จะไดเปนไฟลซิป (Zip File) ใหทำการแตกไฟล (Extract File) กอนนำไปใชงาน 4.2.3.3 การติดตั้งเพื่อนำไปใชงาน เมื่อทำการสรางฟอนตดวยตนเอง หรือตองการ นำฟอนตจากเว็บไซตตาง ๆ ที่ใหดาวนโหลดฟรี หรือเสียคาบริการ ผูใชงานสามารถดาวนโหลด จากเว็บไซต แลวนำมาติดตั้งฟอนต (Install Font) เพื่อนำไปใชงาน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 106

Install Font

ภาพที่ 4.9 การติดตั้งฟอนต (Install Font) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.9 เมื่อทำการแตกไฟล (Extract File) เสร็จเรียบรอยแลว ใหทำการ ติ ด ตั ้ ง ฟอนต โดยคลิ ก ที ่ ป ุ  ม Install Font ดั ง ภาพ เพื ่ อ ให ฟ อนต ท ี ่ เ ลื อ กไว ต ิ ด ตั ้ ง ลงบน ระบบปฏิบัติการไมโครซอฟทวินโดวส (Microsoft Window) และระบบปฏิบัติการแมคอิน ทอช (Macintosh) และในที ่ นี้ เ ป น การยกตั ว อย า งจากระบบปฏิ บ ั ต ิ ก ารแมคอิ น ทอช (Macintosh) เลือก Font “Anton”

ภาพที่ 4.10 การนำฟอนตที่ติดตั้งไวนำไปใชงานบนโปรแกรม Adobe Illustrator ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.10 เปนภาพการนำฟอนตที่ติดตั้งไวนำไปใชงานบนโปรแกรม Adobe Illustrator เมื่อติดตั้งฟอนตในระบบปฏิบัติการเรียบรอยแลว จะปรากฏในรายการฟอนตที่มีให เลือก สามารถเลือกฟอนตที่ไดทำการติดตั้งไวแลวนำมาใชงาน ดังตัวอยางเปนการเลือกฟอนต “Anton” และปรับรูปแบบฟอนตไดตามความตองการ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 107

4.3 อินโฟกราฟก ในปจจุบันที่ทุกคนตางอยูในสภาวะที่เรงรีบและกดดัน การอานเอกสารขอมูลที่มี แตตัวหนังสือจำนวนมาก เปน สิ่งที่ไมทัน ใจ และทำใหเราไมสามารถรับขอมูลทั้งหมดไดใน ทีเดียว เนื่องจากการเติบโตของขอมูลในยุคดิจิทัลที่เพิ่มปริมาณมากขึ้น หลายคนอาจจะอาน เนื้อหาไมครบถวน และตองการเนื้อหาทีส่ รุปอยางกระชับ จึงไดมีการนำขอมูลมาคัดกรอง จัด กลุม เพื่อใหงายตอการเขาใจ เชน การแบงเปนกราฟ การจัดแบงเปนสี การจัดแบงเปนขนาด การจัดแบงเปนภาพ หรือมิติตาง ๆ โดยมีการสรุปขอความใหสั้นและกระชับเหลือเพียงใจความ หลักเทานั้น เพื่อตอบโจทยตอสังคมในปจจุบัน 4.3.1 ความหมายของอินโฟกราฟก วิกิพีเดีย (2564) ไดใหความหมายเกี่ยวกับ อินโฟกราฟก (Infographics) หมายถึง การแสดงผลของขอมูลหรือความรูโดยภาพที่อานและเขาใจงาย นิยมใชสำหรับขอมูลที่มีความ ซับซอน ตัวอยางเชน ปาย แผนที่ งานวิจัย โดยอินโฟกราฟกนี้ยัง คงนิยมใชในสายงานดาน วิทยาการคอมพิวเตอร คณิตศาสตร สถิติศาสตร เพื่อใหแสดงถึงขอมูลที่ซับซอนใหงายขึ้น ปจจุบันอินโฟกราฟกปรากฏตามสื่อ ตามปายสาธารณะ หรือแมแตคูมือการใชงานใน หลายอยาง ซึ่งแสดงในลักษณะของตัวอักษร หรือสัญลักษณ ตัวอยางที่มักเห็นไดบอย เชน แผน ที่รถไฟฟา แผนผังอาคาร แผนภาพการพยากรณอากาศ และขอมูลทางดานสถิติ ที่ปรากฏตาม สื่อสาธารณะ อินโฟกราฟก (Infographics) หมายถึง การนำขอมูลหรือความรูมาสรุปเปนสารสนเทศ ในลักษณะของขอมูล และกราฟกที่อาจเปนลายเสน สัญลักษณ กราฟ แผนภูมิ ไดอะแกรม แผนที่ ฯลฯ ที่ออกแบบเปนภาพนิ่ง หรือภาพเคลื่อนไหว ดูแลวเขาใจงายในเวลารวดเร็ว และ ชัดเจน สามารถสื่อใหผูชมเขาใจความหมายของขอมูลทั้งหมดได โดยไมจำเปนตองมีผูน ำเสนอ มาชวยขยายความเขาใจ การออกแบบอินโฟกราฟก เปนการนำขอมูลที่เขาใจยาก หรือขอมูลที่เปนตัวหนังสือ จำนวนมากมานำเสนอในรูปแบบตาง ๆ อยางสรางสรรค ใหสามารถเลาเรื่องไดดวยตัว เอง มีองคประกอบที่สำคัญ คือ หัวขอที่นาสนใจ ภาพและเสียงซึ่งจะตองรวบรวมขอมูลตาง ๆ ใหเพียงพอ แลวนำมาสรุป วิเคราะห เรียบเรียง แสดงออกมาเปนภาพจึงจะดึงดูดความสนใจได ดี และชวยลดเวลาในการอธิบายเพิ่มเติม กราฟกที่ใชอาจเปนภาพ ลายเสน สัญลักษณ กราฟ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 108

แผนภูมิ ไดอะแกรม ตาราง แผนที่ ฯลฯ นำมาจัดทำใหมีความสวยงาม นาสนใจ เขาใจงาย สามารถจดจำไดนาน ทำใหการสื่อสารมีประสิทธิภาพมากขึ้น หลักการออกแบบอินโฟกราฟก (Infographics) แบงเปน 2 สวน ไดแก ดานขอมูล คือขอมูลที่จะนำเสนอตองมีความหมาย มี ความนาสนใจ เรื่องราวเปดเผยเปนขอเท็จจริง มีความถูกตอง และดานการออกแบบตองมี รูปแบบ แบบแผน โครงสราง หนาที่การทำงาน และความสวยงาม 4.3.2 หลักการออกแบบอินโฟกราฟก การสรางอินโฟกราฟกใหดึงดูดความสนใจ ขอมูลสารสนเทศสามารถนำมาจัด ทำให สวยงามและมีประโยชน หากมีการนำเสนอที่ดี ขอมูลสารสนเทศจำนวนมากถูกนำมาจัดกลุม ทำใหไ มน าสนใจ ดัง นั้นการจัดทำขอมูลใหเปนภาพกราฟกจึง เปนที่นิยมในปจจุบัน อินโฟ กราฟกเปนการออกแบบใหเปนภาพที่ชวยอธิบายขอมูลที่ซับซอนใหเขาใจงาย Hyperakt’s Josh Smith ผูเชี่ยวชาญดานการออกแบบ ไดคนพบกระบวนการที่ดใี น การออกแบบอินโฟกราฟก (Infographics) 10 ขั้นตอน ดังนี้ 4.3.2.1 การรวบรวมขอมูล (Gathering data) การคัดเลือกขอมูลดิบที่รวบรวมไว อาจใชโปรแกรม Microsoft Excel เขียนแหลง อางอิงที่มาของขอมูลที่เปนตนฉบับ บันทึกภาพตาง ๆ ที่เกี่ยวของจากแหลงขอมูลที่หลากหลาย ไมควรแยกภาพหรือแผนภาพกับขอมูลออกจากกัน 4.3.2.2 การอานขอมูลทั้งหมด (Reading everything) การอานขอมูลเฉพาะจุดเนน จะทำใหไดขอมูลไมสมบูรณ ขอมูลตางๆ ที่เกี่ยวของจะ ชวยใหเรามองเห็นภาพรวมของประเด็นสำคัญ ผูออกแบบอินโฟกราฟกตองมีทักษะในการ จัดการขอมูล และแนใจวาขอมูลที่สำคัญไมถูกละเลยในการนำมาสนับสนุนเรื่องราวที่ตองการ นำเสนอ 4.3.2.3 การคนหาวิธีการเลาเรื่อง (Finding the narrative) การนำเสนอขอมูลที่มีตัวอักษรหรือตัวเลขจำนวนมากจะทำใหนาเบื่อ นอกจากจะ คน พบการนำเสนอเรื่องราวที่ดึงดูดความสนใจ อินโฟกราฟกจะทำการขยายความขอมูลที่ ซับซอน อธิบายกระบวนการ เนนที่แนวโนมหรือสนับสนุนขอโตแยง ควรหาวิธีการเลาเรื่องที่ นาสนใจ แตถาคุนเคยกับขอมูลที่มีจะทำใหสามารถเลาเรื่องราวได การใสใจกับเนื้อหาที่สำคัญที่ จะชวยใหการนำเสนอขอมูลมีคุณคา มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 109

4.3.2.4 การระบุปญหาและความตองการ (Identifying problems) เมื่อไดขอมูลมาควรนำมาตรวจสอบความถูกตอง อาจมีขอมูลที่ไมสนับสนุนหัวขอหรือ ประเด็นที่ตองการนำเสนอ ควรมีการอภิปรายหาขอสรุปที่แทจริง เพื่อระบุปญหาและความ ตองการ สวนใหญผู ช มตองการข อมู ลที่ มี การจัด การ และมีการออกแบบที ่ดี มิฉะนั้น จะ กลายเปนหลักฐานที่ไมถูกตอง ขอมูลตองถูกตอง และไมผิดพลาด ปรับปรุงขอมูล และเรื่องราว ใหมีเอกลักษณตรงกับหัวขอศึกษาทบทวนหลาย ๆ ครั้ง หาวิธีการนำเสนอขอมูลอยางถูกตอง และมีคุณคา ซึ่งไมใชเรื่องงายในการออกแบบใหชนะใจผูชม นักออกแบบที่ดีตองมีมุมมองและ เห็นคุณคาในรายละเอียดของขอมูลที่ชัดเจน 4.3.2.5 การจัดลำดับโครงสรางขอมูล (Creating a hierarchy) การจัดลำดับชั้นของขอมูลเปนที่นิยมในการสรุปขอมูล เปนการนำผูชมใหมองเห็น ภาพรวมตั้งแตตนจนจบ เปนวิธีการจัดการกับขอมูลในการสรางอินโฟกราฟก การจัดรูปแบบ ขอมูลตามลำดับจะสงเสริมใหผูชมเขาถึงขอมูลเปนชวงระยะของการเลาเรื่อง ซึ่ง กลายเปน วิธีการที่แพรหลายในการออกแบบอินโฟกราฟก 4.3.2.6 การออกแบบโครงสรางขอมูล (Building a wireframe) เมื่อพิจารณาตรวจสอบคัดเลือกขอมูลอยางละเอียดแลว การจัดแบงขอมูลเปนลำดับ ชั้น และออกแบบโครงสรางของขอมูล ผูออกแบบควรทำความเขาใจกับภาพ หรือกราฟกที่เปน ตัวแทนของขอมูลสำคัญที่จัดไวเปนลำดับชั้น แลวนำไปใหผูชมวิพากษวิจารณ การออกแบบที่ ผานการโตเถียงจากบุคคลในหลายมุมมองที่ใหขอเสนอแนะแตกตางกันออกไป จะเปนขอสรุป ของการจัดทำโครงสรางอินโฟกราฟก 4.3.2.7 การเลือกรูปแบบอินโฟกราฟก (Choosing a format) เมื่อสิ้นสุดการกำหนดภาพ หรือกราฟกที่เปนตัวแทนของขอมูลแลว วิธีจัดกระทำ ขอมูลที่ดีที่สุด คือ การนำเสนอขอมูลดวยแผนผัง กราฟตาง ๆ เชน กราฟแทง กราฟเสน กราฟ วงกลม หรืออาจใชไดอะแกรม หรือผังงานเพื่ออธิบายกระบวนการทำงาน อาจนำแผนที่ มา ประกอบในการเลาเรื่อง หรือบางทีการใชตัวเลขนำเสนอขอมูลงาย ๆ อาจเปนวิธีที่ดีที่สุด 4.3.2.8 การกำหนดภาพใหตรงกับหัวขอ (Determining a visual approach) การเลือกใชภาพในการทำใหอินโฟกราฟกใหดูดีมีสองแนวคิด คือ ใชขอมูลดิบมาจัดทำ เปนกราฟ หรือแผนผังใหนาสนใจ ใชสี การพิมพ และการจัดโครงสรางในการออกแบบงานใหมี มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 110

ศิลปะ และใชลายเสน วาดภาพหรือคำอุปมาเปรียบเทียบ ไมแสดงขอมูลตัวเลขออกมาอยาง ชัดเจน จะเห็นเปนภาพแสดงแทน ขอมูลคลายกับกราฟหรือแผนผังเทานั้น 4.3.2.9 การตรวจสอบขอมูลและทดลองใช (Refinement and testing) เมื่อออกแบบอินโฟกราฟกเสร็จแลวเริ่มตรวจสอบขอมูลอยางละเอียด ผูชมจะดูทั้ง ขอมูล และภาพที่เลาเรื่องราว เพื่อใหแนใจวาผลงานที่เสร็จแลวมีคุณภาพตรงกับหัวขอและ เปาหมาย ประเมินทั้งการออกแบบ และจุดเนนจนกระทั่งผลงานชัดเจน และเขาใจงายทดลอง ใหกลุมตัวอยางชมผลงาน และใหขอคิดเห็นวาสามารถเขาใจไดงายหรือไม โดยเฉพาะผูที่ไมเคย เห็นขอมูลมากอน ประเมินกลับไปกลับมาระหวาง ผูชมและกลุมตัวอยางจนกระทั่ง ลงตัวไดขอ ยุติ จึงนำาเสนอเผยแพรสูสาธารณะ 4.3.2.10 การแบงปนความรูบนอินเทอรเน็ต (Releasing it into the world) อินโฟกราฟกสวนใหญเผยแพรแบงปนในอินเทอรเน็ต มีแพรหลายเปนที่นิยม เปนการ ทดสอบ ผลงาน ขอมูลที่มีลักษณะที่นาสนใจจะถูกอานโดยบุคคลทั่วไป ขอมูลที่ถูกตรวจสอบ และพิจารณาจากผูเชี่ยวชาญแลว ไมไดหมายความวาจะเปนผูคนพบวิธีการเลาเรื่องราวนั้น ถึงแมวาผลงานจะเคยถูกเผยแพรมาแลว การวิพากษวิจารณจากอินเทอรเน็ตจะชวยขยายขอ โตแยง และคนพบวิธีการนำเสนอขอมูลวิธี ใหมได ขอคิดเห็นตางๆ จะไดรับการปรับปรุง แกไข ผลงานที่ถูกวิจารณจากผูเชี่ยวชาญมาสูตัวเราเหมือน เปนรางวัลในการทำางานการออกแบบที่ ถูกกลั่นกรองอยางเขมขนเปนสวนหนึ่งที่จะสะกดผูชม

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 111

ภาพที่ 4.11 ตัวอยางอินโฟกราฟก ที่มา : Pinterset (2521) จากภาพที่ 4.11 ตัวอยางงานอินโฟกราฟก ที่นำเสนอบนเว็บไซต เปนการใหขอมูล เกี่ยวกับโรคโควิด -19 เปนวิธีการนำเสนอขอมูล และการจัดโครงสรางในการออกแบบงานใหมี ศิลปะ และใชลายเสน ประกอบดวยภาพที่สัมพันธกับขอมูล และไมแสดงขอมูลตัวเลขออกมา อยางชัดเจน แตจะใชภาพแสดงแทน 4.3.3 การสร า งอิ น โฟกราฟ ก ให ม ี ป ระสิ ท ธิ ภ าพ (Designing Effective Infographics) อินโฟกราฟกเปนที่นิยมแพรหลายในอินเทอรเน็ต เพราะสามารถถายทอดขอมูลจาก การออกแบบที่มีศิลปะอยางแทจริง เปนภาษาสากลที่สามารถเลาเรื่องราวแมวาดูแคภาพที่ นำเสนอ อินโฟกราฟกไมมีขอบเขตและขีดจำกัดในการเลาเรื่องผานภาพ การใชกราฟกชวยเพิ่ม ความสวยงาม แกสิ่งตาง ๆ ทำใหขอมูลนาประทับใจมีคุณคาเพื่อที่จะเผยแพรสูสาธารณะ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 112

4.3.3.1 เนนที่หัวขอหลักหัวขอเดียว (Focus on a single topic) สิ่งแรกที่ตองพิจารณาคือหัวขอหลักในการสรางอินโฟกราฟก ผลงานจะมีประสิทธิภาพ ตองมีวัตถุประสงคและกำหนดหัวขอที่ชัดเจน กำหนดคำถามเฉพาะที่ตองการคำตอบในอินโฟ กราฟก 4.3.3.2 ออกแบบใหเขาใจงาย (Keep it simple) เมื่อเริ่มออกแบบขอมูลคุณตองแนใจวาขอมูลไมอัดแนนซับซอนสับสน เขาใจไดงาย ไม ทำใหผูอาน และผูชมยุงยากภาพที่ซับซอนจะทำใหการตีความผิดพลาดไมมีประสิทธิภาพ 4.3.3.3 ขอมูลเปนสิ่งสำคัญ (Data is important) การสรางอินโฟกราฟกตองคำนึงถึงขอมูลที่เกี่ยวกับหัวขอเปนสำคัญ การออกแบบตอง ไมทำเกินขอบเขตของหัวขอ และตองแนใจวาการออกแบบเนนที่ขอมูล และรูปแบบของอินโฟ กราฟก 4.3.3.4 ตองแนใจวาขอเท็จจริงถูกตอง (Be sure facts are correct) การทำขอมูลใหถูกตองเปนสิ่งสำคัญ ถาหากขอมูลไมถูกตองจะลดความนาเชื่อถือของ อินโฟกราฟก ดังนั้น กอนที่จะสรางอินโฟกราฟกตองแนใจวาขอมูลถูกตอง ศึกษาคนควาหา ขอเท็จจริง และตรวจสอบขอเท็จจริงใหถูกตอง 4.3.3.5 ใหอินโฟกราฟกเปนตัวเลาเรื่อง (Let it tell a story) อิน โฟกราฟกที่มีป ระสิทธิภ าพสามารถเลา เรื ่องราวดวยภาพวาดหรือกราฟก ซึ่ง สามารถบอกบางสิ่งบางอยาง และสามารถถายทอดขอมูลไดถึงแมวาผูชมจะไมไดอานขอมูลมา กอน 4.3.3.6 การออกแบบที่ดีทำใหมีประสิทธิภาพ (Good design is effective) การบรรยายดวยภาพถามีการออกแบบที่ดีจะดึงดูดใจผูชม สิ่ง สำคัญ คือ ออกแบบ อินโฟกราฟกใหเขาใจงาย ใชความคิดสรางสรรคออกแบบใหนาสนใจ การใชภาพ กราฟก สี ชนิด แบบ และชองวาง เปนสิ่งสำคัญในการออกแบบ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 113

4.3.3.7 ใชสีที่ดึงดูดความสนใจ (Choose attractive colors) การใชสีเปนสิ่งจำเปนควรเลือกใชสีที่กระตุนดึงดูดความสนใจผูชม ควรศึกษาทฤษฎีการใชสี ใชสีใหถูกตองเหมาะสมกับหัวขอ คำนึงถึงกลุมเปาหมาย ไ มจำเปนตองทำใหมีสีสันมาก อินโฟ กราฟกบางชิ้นมีสีเพียงเล็กนอยก็มีประสิทธิภาพได 4.3.3.8 ใชคำพูดที่กระชับ (Use short texts) การออกแบบภาพที่ใชในการนำเสนอ จำาเปนตองสรุปขอความใหสั้นกระชับตรงกับ จุดหมายที่ตองการนำาเสนอ อาจใชแผนปายหรือขอมูลสั้น ๆ มาสนับสนุนภาพการทำเรื่องราว ใหดึงดูดความสนใจอาจใชตัวเลขมาสรุปเปรียบเทียบขอมูล และควรใชตัวหนังสือที่อานเขาใจ งาย 4.3.3.9 ตรวจสอบตัวเลขขอมูล (Check your numbers) ถานำเสนอขอมูลดวยตัวเลขผานกราฟ และแผนผัง ตรวจสอบความถูกตองของตัวเลข และภาพวาด วิธีนี้จะทำใหอินโฟกราฟกมีประสิทธิภาพมากขึ้น 4.3.3.10 ทำไฟลอินโฟกราฟกใหเล็ก (Make the file size small) การทำไฟลอินโฟกราฟกใหเล็ก เพื่อใหผูชมเขาถึงและดาวนโหลดขอมูลไดงาย และ นำไปใชตอไดตามจุดประสงคที่ตองการ ดาวนโหลดเร็วและใชเวลานอยในการถายโอนขอมูล สามารถแนบไฟล สงอีเมลไปใหผูอื่น ปจจุบันการใชอินเทอรเน็ตแพรเปนไปอยางแพรหลาย คน สวนใหญจะรับขอมูลที่เขาถึงงายที่สุด ขอมูลจำนวนมหาศาลที่แพรหลายอยูในอินเทอรเน็ต ขอมูลบางสวนออกแบบเปน อิน โฟกราฟกซึ ่ง ถูกตีพิม พ และใชง านดวยอิน โฟกราฟ ก เป น เครื่องมือสำคัญ เชน ในแวดวงทางการศึกษา ทางธุรกิจ เปนแรงบันดาลใจที่มีอิทธิพลในการ นำเสนอ และการสื่อสารขอมูลที่ยุงยากซับซอน ประสิทธิภาพของอินโฟกราฟกนั้นตองอาศัย วิธีการออกแบบ ดังตอไปนี้ 4.3.4 สิ่งที่นักออกแบบตองคำนึงถึงวาไมควรทำ 10 อยาง 4.3.4.1 ไมใชขอมูลมากเกินไป (Don’t use too much text) อินโฟกราฟกเปนการออกแบบโดยใชภาพ ควรมีตัวหนังสือนอยกวาภาพหรือแบง สวน เทา ๆ กัน ซึ่งเหมาะสำหรับผูที่อานนอย และขึ้นอยูภาพขอมูล ถาใสตัวหนังสือมาก และมีภาพ นอยจะไมใชวัตถุประสงคของอินโฟกราฟก มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 114

4.3.4.2 ไมทำขอมูลที่นำเสนอใหยุงยากซับซอน (Don’t make confusing data presentation) การนำเสนอขอมูลที่ยุงยากซับซอนผิดวัตถุประสงคของการออกแบบอินโฟ กราฟก และตองแนใจวาจะสามารถจัดการกับขอมูลใหชัดเจน และเขาใจงาย ซึ่งนิยมการใช กราฟ ภาพวาด และกราฟกอื่น ๆ 4.3.4.3 ไมใชสีมากเกินไป (Don’t overuse color) การออกแบบอินโฟกราฟกโดยใชสีมากเกินไปจะทำใหประสิทธิภาพในการนำเสนอ ขอมูลนอยลง ผูอานจะไมสามารถอาน และเขาใจเนื้อหาไดดี ควรศึกษาจิตวิทยาการใชสีที่ตัด กันดวยเพื่อคำนึงถึงสุขภาพของผูชม 4.3.4.4 ไมควรมีตัวเลขมากเกินไป (Don’t place too much numbers) การใชตัวเลขชวยใหการสรางอินโฟกราฟกมีประสิทธิภาพ แตไมควรใชใหมากเกินไป เพราะจะทำใหผลผลิตออกมาเหมือนเปนใบงานวิชาคณิตศาสตร ตองใชกราฟกนำเสนอจำนวน ตาง ๆ อยาใชตัวเลขทั้งหมดในการทำใหขอมูลยุงยากซับซอน ออกแบบตัวเลขใหงายเทาที่จะ ทำได และแนใจวาขอมูลถูกตองเหมาะสมเขาใจงาย 4.3.4.5 ไมควรละเลยขอมูลที่ไมสามารถระบุแยกแยะได (Don’t leave figures unidentified) อินโฟกราฟกบางเรื่องขาดตัวเลขไมได ขอเท็จจริงบางอยางตองมีตัวเลขขอมูล ทางสถิ​ิติ แตผูชม อาจไมเขาใจทั้งหมด ถึงแมจะมีความชำานาญในการออกแบบถาใสขอมูลโดย ไมระบุคำาอธิบายลงไปดวยก็จะ เปนตัวเลขที่ไมมีประโยชน ดังนั้นตองแนใจวาใสปายระบุ คำอธิบายของขอมูลแตละชุด 4.3.4.6 ไมสรางอินโฟกราฟกใหนาเบื่อ (Don’t make it boring) อินโฟกราฟกสวนมากจะใหความรู ประโยชน และความบันเทิง มีจุดมุงหมายที่การ จัดการขอมูล ใหผูชมเขาใจงาย หากสรางอินโฟกราฟกใหนาเบื่อ จะไมดึงดูดความสนใจของ ผูชม ตองวางแผนสรางแนวทางของเรื่อง และการนำเสนอที่ดี จึงจะสามารถบอกเรื่องราวแก ผูชมตามจุดประสงคที่ตั้งไวไดอยางมีประสิทธิภาพ 4.3.4.7 ไมใชวิธีการพิมพผิด (Don’t misuse typography) หลักการพิมพมีบทบาทที่สำคัญในการออกแบบที่ชวยใหอินโฟกราฟกดูดีขึ้น ทำใหงาย ในการถายทอดขอมูล แตถาใชผิดวิธีจะเปนสิ่ง ที่เปนผลเสียในการออกแบบ ตองรูเทคนิค เพื่อที่จะใชการพิมพที่ดีที่สุดในการนำเสนอ และจะไมทำใหการตีพิมพผิดไป ถาใชวิธีการพิมพ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 115

ถูกตองจะทำใหการตีความ ไมไขวเขว สังเกตการณใชสีที่ดี และพิจารณาขนาดของฟอนตให เหมาะสม 4.3.4.8 ไมนำเสนอขอมูลที่ผิด (Don’t present wrong information) เพื่อใหแนใจควรตรวจสอบขอมูลทุกครั้ง โดยเฉพาะการใชขอมูลทางสถิติ ถาขอมูล ผิดพลาดจะทำใหผูอานเขาใจผิด ขอมูลในอินโฟกราฟกจะตองแมนยำนาเชื่อถือ และถูกตอง 4.3.4.9 ไมเนนการออกแบบ (Don’t focus on design) อินโฟกราฟกไมจำเปนตองเนนการออกแบบใหสวยงาม ควรเนนที่การนำเสนอขอมูลที่ ถูกตอง การออกแบบอยางสวยงาม จะไมมีประโยชนถามีขอมูลผิดพลาด หรือมีประโยชนนอย ดังนั้นกอนสรางอินโฟกราฟก ตองพิจารณาขอมูลที่จำเปนทั้งหมดอยางถูกตอง อินโฟกราฟก เปนการผสมผสานระหวางขอมูล และการออกแบบกราฟกอยางมีประสิทธิภาพ 4.3.4.10 ไมใชแบบเปนวงกลม (Don’t use a circus layout) อิน โฟกราฟกที่ดีจะสามารถชี้นำผูชมดู และเขาใจไดทั้ง หมด ไมควรออกแบบเปน วงกลม ควรพิจารณาวาผูชมจะสนใจจุดไหน ตองแนใจวาผูชมสามารถเขาใจในวิธีการนำเสนอ ตองไมใหผูอานยุงยาก เพราะไมไดใสขอมูลที่ดีไว 4.3.5 วิธีสรางอินโฟกราฟก และการนำไปใชงาน 4.3.5.1 การสรางอินโฟกราฟกโดยใชโปรแกรมกราฟก สามารถใชโปรแกรม ดานออกแบบกราฟก เชน Adobe Photoshop, Adobe Illustraor

ภาพที่ 4.12 การสรางอินโฟกราฟกจากโปรแกรม Adobe Photoshop ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 116

จากภาพที่ 4.12 ตัวอยางงานอิน โฟกราฟก ที่สรางโดยการใช โปรแกรม Adobe Photoshop ซึ่ง มีคุณสมบัติการทำงานโดยแบงการทำงานออกแบบลำดับชั้นของชิ้นงานที่ เรียกวา เลเยอร (Layer ) เหมาะสำหรับใชในการจัดวางองคประกอบตาง ๆ ในการสรางอินโฟ กราฟก

ภาพที่ 4.13 ตัวอยางงานอินโฟกราฟก ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.13 ตัวอยางงานอินโฟกราฟก ที่สรางจากใชโปรแกรม Adobe Photoshop เปนขอมูลที่แสดงถึงวิธีการทำอยางไรใหปลอดจากพลาสติก ออกแบบโดยการใชสี พื้นหลังเขม เพื่อเนนขอความเนื้อหาใหเดนขึ้น และการนำภาพที่สัมพันธกันมาแทนประกอบ คำอธิบาย 4.3.5.2 การสรางอินโฟกราฟกบนเว็บไซต Canva.com นอกจากการสรางอินโฟกราฟกดวยโปรกรมคอมพิวเตอรกราฟกแลว ยังสามารถใชงาน เครื่องมือการออกแบบอินโฟกราฟกบนเว็บไซต Canva.com โดยลงชื่อเขาใชหรือสมัครใชง าน บัญ ชีใหมดวยอีเมล โปรไฟล Google หรือ Facebook จากนั้น คน หา "อินโฟกราฟก" เพื่อ เริ่มตนออกแบบ สามารถเลือกแมแบบอินโฟกราฟก (Template) ตามความตองการดานการ แสดงขอมูล สามารถปรับแตงงานออกแบบอินโฟกราฟก โดยเปลี่ยนขอความ สี ฟอนต และพื้น มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 117

หลังไดตามตองการ เมื่อออกแบบเสร็จแลวสามารถบันทึก แชร และดาวนโหลด เปนไฟล PNG, JPG หรือ GIF แชรบนโซเชียลมีเดีย ฝงลงบนเว็บไซต หรือพิมพเพื่อใชอางอิง

Templates

ภาพที่ 4.14 การสรางอินโฟกราฟกบนเว็บไซต Canva.com ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.14 ตัวอยางการสรางอินโฟกราฟกบนเว็บไซต Canva.com ผูใชตอง ลงทะเบียนเขาใชงาน แลวเลือกประเภทสื่อตาง ๆ ที่ตองการออกแบบ ซึ่งมีหลากหลายประเภท ใหเลือก ในครั้งนี้ใหเลือก Infographic จากนั้นเลือก Templates ที่ตองการนำมาปรั บ แตง โดยการเพิ่มเนื้อหา และรูปภาพตามรูปแบบที่ตองการนำเสนอ แลวสามารถบันทึกเพื่อนำไปใช งานตอไป Upload Media Share/Print

ArtWork

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 118

ภาพที่ 4.15 การสรางอินโฟกราฟกโดยการอัปโหลดขอมูลดวยตัวเอง ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.15 ตัวอยางการสรางอินโฟกราฟกดวยเว็บไซต Canva.com ในกรณีที่ ผูใชไมตองการเลือกจากเทมเพลตที่มีให และตองการสรางใหม โดยการอัปโหลดขอมูล ดวย ตัวเอง ซึ่งสามารถเลือกอัปโหลดสื่อตาง ๆ ที่ตองการออกแบบ โดยคลิกที่ปุม Upload จากนั้น นำสื่อตาง ๆ ที่มีมาปรับแตง สามารถเพิ่มเนื้อหา และรูปภาพตามรูปแบบที่ตองการนำเสนอ แล ว สามารถแบ ง ป น (Share) ดาวนโหลดโดยกดที ่ ล ู ก ศรชี ้ ล ง และสั ่ ง พิ ม พ (Print Infographics) เพื่อนำไปใชงานตอไป 4.4 เว็บไซต งานออกแบบเว็ บ ไซต เ ป น งานออกแบบกราฟ ก อี ก สาขาหนึ ่ ง ที ่ ไ ด ร ั บ ความนิ ย ม แพรหลายมาก ในปจจุบันนักออกแบบเว็บไซตที่ดีมักจะทำงานดวยการนำองคประกอบตาง ๆ มาผสมผสานให เ กิ ด ความสวยงามและก อ ให เ กิ ด ประโยชน ต  อ การใช ง านได อ ย า งลงตั ว อย า งไรก็ ต ามในการออกแบบเว็ บ ไซต จ ะต อ งมี ห ลั ก การพื ้ น ฐานที ่ ด ี ก  อ นจึ ง จะสามารถ ออกแบบมาเปนเว็บไซตที่ดไี ด 4.4.1 ความหมายของเว็บไซต (Web Site) คือ แหลงที่เก็บรวบรวมขอมูลเอกสาร และสื่อประสมตาง ๆ เชน ภาพ เสียง ขอความ ของแตละบริษัทหรือหนวยงาน โดยเรียก เอกสารตาง ๆ เหลานี้วา เว็บเพจ (Web Page) และเรียกเว็บหนาแรกของแตละเว็บไซตวา โฮมเพจ (Home Page) หรืออาจกลาวไดวา เว็บไซตคือเว็บเพจอยางนอยสองหนาที่มีลิงก (Links) ถึงกัน ตามหลักคำวาเว็บไซตจะใชสำหรับผูที่มีคอมพิวเตอรแบบเซิรฟเวอร หรือจด ทะเบียนเปนของตนเองเรียบรอยแลวเชน www.google.co.th ซึ่ง เปนเว็บไซตที่ใหบริการ สืบคนขอมูลเปนตน 4.4.2 องคประกอบในการออกแบบเว็บไซต การออกแบบเว็บไซตเพื่อใหมีประสิทธิภาพ และสามารถดึงดูดความสนใจของผูคนไดดี จะตอง มีองคประกอบในการออกแบบเว็บไซต ดังนี้ 4.4.2.1 ความเรียบงาย เขาใจงาย มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 119

การออกแบบเว็บ ไซต ท ี่ ดี จะต อ งเนน ที ่ค วามเรี ยบง า ยเปน หลั ก โดยเลื อก นำเสนอเฉพาะสิ่งที่ตองการนำเสนอจริง ในรูปแบบที่หลากหลาย โดยอาจจะเปนสีสัน กราฟก ภาพเคลื่อนไหวหรือตัวอักษร ที่สำคัญจะตองมีการนำเสนอที่ไมดูรกหนาเว็บจนเกินไป เพื่อ ไมใหเกิดความรูสึกรกสายตา หรือสรางความเบื่อหนาย นารำคาญใหกับผูที่เขาชมเว็บไซต มี ตั ว อย า งเว็ บ ไซต ท ี ่ ม ี ก ารออกแบบโดยเน น ความเรี ย บง า ยได ดี คื อ Apple, Nokia และ Microsoft เปนตน 4.4.2.2 ความสม่ำเสมอ ควรออกแบบเว็บไซตดวยความสม่ำเสมอ คือจะตองมีรูปแบบกราฟก โทนสีและ การตกแตงตาง ๆ ใหแตละหนาบนเว็บไซตมีความคลายคลึงกัน และเปนแนวเดียวกันไปตลอด ทั้งเว็บไซต ดังตัวอยางเว็บไซตทั่ว ๆ ไปที่จะสังเกตเห็นไดวาทุกหนาของเว็บไซตนั้น จะเนนการ ตกแตงในรูปแบบเดียวกันทั้งหมด ตางกันเพียงการนำเสนอของแตละหนาเทานั้น 4.4.2.3 สรางความโดดเดน เปนเอกลักษณ การออกแบบเว็บไซตเพื่อใหสามารถสื่อถึงจุดประสงคในการนำเสนอเว็บไดดี จะตองมีการสรางความเปนเอกลักษณและจุดเดนใหกับเว็บไซต เพื่อใหสามารถสะทอนถึง ลักษณะขององคกรไดมากที่สุด โดยการสรางเอกลักษณดัง กลาวนั้น อาจใชชุดสี รูปภาพ ตัวอักษรหรือกราฟก นอกจากนี้ก็ตองขึ้นอยูกับวา เปนเว็บไซตแบบบทางการหรือไม เพื่อจะได ออกแบบไดอยางเหมาะสมที่สุด 4.4.2.4 เนื้อหาตองดี มีขอมูลครบถวน เนื้อหาเปนสิ่งที่สำคัญที่สุดของการสรางเว็บไซต เพราะสิ่งที่ทำใหผูคนเกิดความ สนใจ และติดตามเว็บไซตเหลานั้นอยูเสมอ คือเนื้อหาที่มีความสมบูรณและนาสนใจ นอกจากนี้ จะตองมีการปรับปรุง พัฒนาเนื้อหาบนเว็บใหมีความทันสมัยอยูเสมอ รวมถึงขอมูลตองมีความ ถูกตองที่สุด 4.4.2.5 ระบบเนวิเกชั่นที่ใชงานงาย ระบบเนวิเกชั่น เปน เสมือนปายบอกทางเพื่อใหผูใชงาน ไมเกิดความสับสน ในขณะใชงานเว็บไซต ซึ่งการออกแบบเนวิเกชั่นก็จะตองเนนที่ความเรียบงาย ใชงานสะดวก และมีความเขาใจไดงาย ที่สำคัญจะตองมีตำแหนงการวางที่สม่ำเสมอเพื่อใหดูเปนแนวทาง มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 120

เดียวกัน ทำใหผูใชงานหรือผูชมรูสึกประทับใจ และจดจำเว็บไซตไดงายขึ้น สวนการนำกราฟก มาใชในระบบเนวิเกชั่น จะตองเลือกกราฟกที่สามารถสื่อความหมายไดดีเชนกัน 4.4.2.6 คุณภาพของเว็บไซต เว็บไซตที่ดีจะตองมีคุณภาพ ทั้ง สิ่ง ที่ปรากฏใหเห็นบนเว็บไซต ไมวาจะเปน กราฟก ชนิดตัวอักษร รูปภาพหรือสีสันที่ใช เนื้อหาที่นำมาแสดงผล ซึ่งหากเว็บไซตมีคุณภาพก็ จะสรางความนาเชื่อถือ และเปนจุดเดนที่ทำใหผูคนสวนใหญเกิดความสนใจไดดี 4.4.2.7 ความสะดวกในการเขาใชงาน เว็บไซตควรใหความสะดวกสบายแกผูใชงานไดดี คือจะตองมีการแสดงผลไดใน ทุกระบบปฏิบัติการ ไมวาจะเปนเว็บเบราวเซอร คอมพิวเตอร โนตบุคหรือบนโทรศัพทมือถือ ที่ สำคัญจะตองมีความละเอียดของการแสดผลและสามารถใชงานไดโดยไมมีปญหาดวย 4.4.2.8 ความคงที่ของการออกแบบ การออกแบบเว็บไซตควรจะมีความคงที่ในการออกแบบ ดวยการสรางเว็บไซต ดวยแบบแผนเดียวกัน และมีการเรียบเรียงเนื้อหาอยางรอบคอบ ทำใหมีความนาเชื่อถือ และดู มีคุณภาพ ชวยสรางความประทับใจใหกับผูใชงานไดเปนอยางดี 4.4.2.9 ความคงที่ของการทำงาน ระบบการทำงานบนเว็บไซตจะตองมีความคงที่ และสามารถใชง านไดดี ซึ่ง นอกจากการออกแบบระบบการทำงานใหมีความทันสมัยและสรางสรรคแลว จะตองตรวจสอบ อยูเสมอ เพราะหากระบบการใชงานมีความผิดปกติจะชวยแกปญหาไดทัน นอกจากนี้อาจมี การปรับปรุงการออกแบบใหทันสมัย เพื่อใหผูใชงานรูสึกสนุกไปกับการใชงานเว็บไซต 4.4.3 ขั้นตอนการจัดทำเว็บไซต 4.4.3.1 ขั้นตอนการเตรียมการกอนจัดทำเว็บไซต 1) วางแผนการจัดทำเว็บไซต เปนขั้นตอนแรกที่ตองจัดเตรียมขอมูลเพื่อทำ เว็บไซต ตั้งแตการตั้งชื่อของเว็บไซต จุดประสงคของเว็บไซต กำหนดกลุมเปาหมาย จัดเตรียม ขอมูลและเนื้อหาภาพในเว็บไซต และรายละเอียดตาง ๆ ที่ตองการใหปรากฏในเว็ บ ไซต เพื่อใหเห็นมุมมอง แบบคราว ๆ กอนลงมือทำ และควรจัดแบงเนื้อหาใหเปนหมวดหมูที่สัมพันธ กัน มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 121

2) การออกแบบโครงสรางเว็บไซต กอนที่จะกลาวถึง การออกแบบโครงสราง เว็บไซต นักออกแบบตองรูจักแผนผังเว็บไซต (Sitemap) คือแผนที่เว็บไซตที่ทำหนาแนะนำ สวนประกอบของเว็บไซต ซึ่ง มีเว็บเพจตาง ๆ ในหนึ่ง เว็บไซต และมีเว็บเพจใดที่สามารถ เชื่อมโยง (Link) ได เปนการแสดงการทำงานให เห็น ในภาพรวม แผนผัง เว็บไซต ล ั ก ษณะ คลายกับสารบัญของหนังสือ ที่ผูอานหรือผูชมเว็บไซตสามารถใชเปนเครื่องมือในการนำทาง เพื่อไปยังเว็บเพจที่ตองการได Home

Review

Contact

About

Product

Service

History

Product1

Onsite

FB

Committ

Product2

Online

IG

Mission

Product3

Deliverly

Address

Plan

Product4

Map

ภาพที่ 4.16 โครงสรางเว็บไซต ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.16 เปนการออกแบบโครงสรางเว็บไซตประกอบดวยโฮมเพจ (Home) คือหนาแรกของเว็บไซตอยูตำแหนงบนสุด ลำดับถัดมาคือหนาเว็บเพจ หรือเมนูตาง ๆ ที่มีใน เว็บไซต ไดแก About, Product, Service, Review, Contact และสามารถเชื่อมโยงไปยัง หนาอื่น ๆ ที่เปนเว็บเพจยอยได 4.4.3.2 ขั้นตอนการสรางเว็บไซต (Website) 1) การเลื อ กเครื ่ อ งมื อ ในการพั ฒ นาเว็ บ ไซต การเริ ่ ม ต น สร า ง เว็บไซตอาจเริ่มดวยการเขียนโปรแกรมภาษา Hypertext Markup Language หรือเรียกวา ภาษา HTML ซึ่ง เปนภาษาพื้นฐานในการสรางเว็บไซต โดยมีโปรแกรมใหเลือกใชงาน เชน Adobe Dreamweaver, Adobe Muse เป น ต น ควรมี ท ั ก ษะในด า นการออกแบบ และ สามารถใชง านโปรแกรมคอมพิวเตอรกราฟกควบคูกัน เพื่อใหเว็บไซตนั้นออกแบบไดอย าง มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 122

ถู ก ต อ ง และสวยงาม นอกจากนั้ น ยัง มี เ ครื่ อ งมื อที ่ช  วยในการจัด การเนื้ อหาของเว็บไซต Content Management System หรือเรียกวา CMS ซึ่ง เปนระบบที่พัฒ นาขึ้นเพื่อชวยลด ปญ หาในการพัฒ นา และจัดการเว็บไซตโดยไมตองมีความรูทางดานการเขียนโปรแกรมที่ ซับซอน สามารถเลือกใชเครื่องมือชวยพัฒนาเว็บไซตที่ไดรับความนิยมอยางมากในปจจุบัน คือ WordPress ที่ใ ช ง านง า ย และสามารถจั ด การหน า เว็ บ เพจ ได ด  ว ยการเพิ ่ ม ข อ มู ล เพื่ อ นำเสนอขอความ ภาพ วิดีโอ และมัลติมีเดียตาง ๆ ตามรูปแบบที่ตองการ และสามารถบริหาร จัดการเว็บไซตไดดวยตนเอง

ภาพที่ 4.17 การสรางเว็บไซตดวยโปรแกรม Adobe Dreamweaver ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.17 เปน การสรางเว็บไซตดวยโปรแกรม Adobe Dreamweaver คือ โปรแกรมสรางเว็บไซตแบบเสมือนจริง ที่มีเครื่องมือทำใหผูใชสามารถจัดวางขอความ รูปภาพ ตาราง ฟอรม วิดีโอ รวมถึง องคประกอบอื่น ๆ ภายในเว็บเพจไดอยางสวยงามตามที่ผูใช ตองการ โดยไมตองใชภาษาสคริปตที่ยุงยากซับซอน สามารถใชงานไดบนระบบปฏิบัติการแมค อินทอช และไมโครซอฟทวินโดวส

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 123 2.สวนแสดงผล 1. สวนควบคุม

ภาพที่ 4.18 การสรางเว็บไซตดวย WordPress ที่มา : นุจรี บุรีรัตน (2564) จากภาพที ่ 4.18 การสร า งเว็ บ ไซต ด  ว ย Wordpress จากตั ว อย า งเว็ บ ไซต aoeystyle.com ซึ่งสรางเว็บไซตดวย WordPress สามารถจัดการเนื้อหาเว็บไซต โดยใชงาน บนอินเทอรเน็ต และไมจำเปนตองมีความรูในเรื่องของการเขียนโปรแกรม ทำใหสะดวกตอ ผูใชง าน สามารถบริหารจัดการเว็บไซตไ ดดวยตนเองผานสวนควบคุม (Dashboard) และ แสดงผลไดทุกเบราวเซอร 2) ออกแบบโฮมเพจ (Homepage) คือ สวนประกอบหนาแรกของเว็บไซต หรื อ โฮมเพจ จะต อ งใช ช ื่ อ index เท า นั ้ น ไมส ามารถตั ้ง ชื ่อ อื ่น ได เนื ่ อ งจากเป น กฎที่เว็บ เบราวเซอรจะอานไฟล Index เพื่อแสดงผลเปนหนาแรกของเว็บไซต สวนนามสกุลสามารถ บันทึกตามลักษณะของภาษาที่ ใชในการสรางเว็บไซต เชน index.html, index.php เปนตน สวนการตั้งชื่อเว็บเพจของแตละหนานั้น ใหกำหนดชื่อเปนภาษาอังกฤษที่สัมพันธกับเนื้อหา และตามดวยนามสกุลของภาษาที่เราทำการสรางเว็บไซต เชน about.html, history.html เปนตน ในการออกแบบโฮมเพจควรใหเรียบงาย ไมซับซอน และใชงานไดอยางสะดวก สราง ความสม่ำเสมอใหกับเว็บไซตโดยใชรูปแบบเดียวกันตลอดทั้งเว็บไซต การออกแบบตองคำนึงถึง

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 124

ลักษณะขององคกร รูปแบบของเว็บไซตสามารถสะทอนถึงเอกลักษณขององคกร ควรมีเนื้อหา ที่มีประโยชน และมีระบบเนวิเกชันที่ใชงานงาย เมนูไมสับสน

ภาพที่ 4.19 การออกแบบโฮมเพจ (Homepage) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.19 การออกแบบโฮมเพจ (Homepage) บันทึกดวยไฟล index.php ของผูเขียนที่นำเสนอผานเว็บไซตภายใต URL: http://web.rmutp.ac.th/mct/nuchjaree.b /2560/index.php เปนการออกแบบโดยเนนความเรีย บง าย และเนนการใชง าน ลดทอน กราฟกที่ไมจำเปน ใหผูใชงานเขาถึงขอมูลในแตละหนาของเว็บเพจที่ปรากฏบนเมนูตาง ๆ 3) การออกแบบเว็บเพจ (Webpage) การออกแบบเว็บเพจแตละหนาในเว็บไซต มีสวนหลัก ๆ อยู 3 สวนคือ 1. ส ว นหั ว เพจ (Page Header) คื อ ส ว นที ่ อ ยู  ต อนบนสุ ด และเป น ส ว นที่ สำคั ญ ที ่ ส ุ ด ของหน า ในส ว นนี ้ ส ามารถดึ ง ดู ด ผู  ช มให ต ิ ด ตามเนื ้ อ หาภายในเว็ บ ไซต ไ ด ซึ่งโดยปกติจุดนี้็จะประกอบ ดวยโลโก ชื่อเว็บไซต เมนูหลัก หรือลิงก 2. ส ว นกลางเพจ (Page Body) คื อ ส ว นที ่ อ ยู  ต อนกลางของหน า เว็ บ เพจ จะแสดงเนื้อหา ของเว็บไซต ไดแก ขอความ ตารางขอมูล ภาพกราฟก วิดีโอ มัลติมีเดียตาง ๆ เว็ บ ไซต ที่ ดี จ ะต อ งประกอบไปด ว ยสิ ่ ง ต า ง ๆ ได แ ก กราฟ ก ที่ ส วยงาม สื ่ อ สารได ดี

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 125

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

3. Page Footer

ภาพที่ 4.20 สวนประกอบในการออกแบบเว็บเพจ ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.20 เปนการออกแบบเว็บเพจ PORTFOLIO รวบรวมผลงานการออกแบบ ของนักศึกษา ประกอบดวย 3 สวน ไดแก สวนแรกคือ Page Header เปนเมนูหลักแสดง รายการขอมูลทั้ง หมดที่สามารถเชื่อมโยงเขาถึง ได สวนที่สอง คือ Page Body แสดงภาพ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 126

ผลงานการออกแบบเสื้อ และสุดทาย สวนของ Page Footer คือสวนลางสุดที่แสดงระบบนำ ทาง หรือเนวิเกชั่น ที่ประกอบดวยเมนูประเภทผลงานการออกแบบสื่อรูปแบบตาง ๆ 4) การเชื่อ มโยง (Link) การเชื่อมโยงเว็บเพจ หรือ เรียกวาลิง ก (Link) เปนการ เชื ่ อ มโยงในแต ล ะหน า เว็ บ เพจ เพื ่ อ ให ผ ู  ใ ช ง านสามารถคลิ ก ระหว า งเว็ บ เพจต า ง ๆ ได โดยแตละไฟลจะมีความสัมพัน ธกัน เพื่อใหดูรายละเอียดของเมนูนั้น ๆ ได จากการคลิ ก ขอความ หรือรูปภาพที่สรางการเชื่อมโยงไว เมื่อนำเมาสไปวางเคอรเซอรจะเปลี่ยนเปนรูปมือ หมายความวาขอความที่ชี้สามารถคลิก และเชื่อมโยงไปยังเว็บเพจหนาตอไปได

2. Link

1.Click

ภาพที่ 4.21 การเชื่อมโยง (Link) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที ่ 4.21 เป น การแสดงการเชื่ อมโยง (Link) จากโฮมเพจจะมีเ มนู PRIZE ผูใชงานสามารถคลิกที่เมนู แลวขอมูลของหนาเว็บเพจ PRIZE จะเลื่อนมาแสดงที่หนาจอ แสดง รายละเอียดของมูลนี้ซึ่งมีรูปภาพและรายละเอียดเนื้อหาของหนาเว็บเพจ PRIZE 4.4.3.3 ขั ้ น ตอนเผยแพร เ ว็ บ ไซต เป น ขั ้ น ตอนของการเผยแพร เ ว็ บ ไซต สูโลกอิน เทอรเน็ ต โดยการจดโดเมนเนม (Domain Name) และการลงทะเบี ยนขอพื ้ น ที่ เว็บไซตหรือ เว็บโฮสติ้ง (Web Hosting) เพื่อเปดให ผู อื่น สามารถเขา มาชม และใชง าน มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 127

ภายในเว็ บ ไซต การนำเว็ บ ไซต ท ี ่ ส ร า งเสร็ จ แล ว ไปฝากไว ก ั บ ผู  ใ ห บ ริ ก ารพื ้ น ที ่ เ ว็ บ ไซต หรือที่เรียกวาเว็บโฮสติ้ง (Web Hosting) พรอมกับการจดทะเบียนโดเมนเนม (Domain Name) ซึ่งปจจุบันมีหลายบริษัทที่ใหบริการ ดานราคาขึ้นอยูกับประสิทธิการการทำงาน และ พื้นที่การใหบริการอัปโหลดขอมูล

ทำการตรวจสอบ โดเมนเนมที่ตองการ

ภาพที่ 4.22 การจดโดเมนเนม (Domain Name) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.22 เปนภาพการจดโดเมนเนม (Domain Name) จากตัวอยางเว็บไซต z.com ซึ่งเปนเว็บไซตที่ใหบริการจดโดเมนเนมที่นาเชื่อถือเว็บไซตหนึ่ง โดยมีชองใหตรวจสอบ ชื่อโดเมนที่ตองการ จากนั้นใหเลือกชื่อโดเมนที่ตองการ และทำการชำระเงิน เมื่อชำระเงินแลว จะไดชื่อโดเมนที่ไดทำการเลือกไว

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 128

ภาพที่ 4.23 การลงทะเบียนขอพื้นที่เว็บไซต หรือเว็บโฮสติ้ง (Web Hosting) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.23 การลงทะเบียนขอพื้นที่เว็บไซต หรือเว็บโฮสติ้ง (Web Hosting) จากตั ว อย า งของเว็ บ ไซต z.com ที ่ ม ี บ ริ ก ารให เ ช า พื ้ น ที ่ เ ว็ บ ไซต โดยมี ข  อ มู ล แสดงถึ ง ประสิทธิภาพการใหบริการ และอัตราคาบริการเริ่มตนที่ 1.620 บาท/ป หากตองการใชบริการ สามารถสั่งซื้อบริการได นอกจากเว็บไซตนี้ยังมีเว็บไซตอื่น ๆ ที่ใหบริการ ผูใชงานสามารถ พิจารณาตามความเหมาะสม 4.4.4 การอัปโหลด และการประชาสัมพันธเว็บไซต 4.4.4.1 การอัปโหลดเว็บไซต เมื่อทำการสมัครเว็บโฮสติ้งและโดเมนเนมเปนที่เรียบรอยแลว ขั้นตอนตอไปก็ คือการอัปโหลดไฟลเว็บไซตไปยังเว็บไซตที่ใหบริการพื้นที่ ในการฝากเว็บไซตไวบนเซิรฟเวอร (Server) โดยทำการอั ป โหลดผ า นเว็ บ เบราว เ ซอร ข องเว็ บ ไซต ท ี ่ ใ ห บ ริ ก าร หรื อ สามารถ อัปโหลดดวย โปรแกรมอื่น ๆ เชน CuteFTP, Filezilla, WS_FTP, WordPress เปนตน เมื่อ อัปโหลดขอมูลเว็บไซตทังหมดเสร็จสิ้นแลว จะทำใหผูใชงานสามารถคลิกเขาไปดูเว็บไซตไดผาน เครือขายอินเทอรเน็ต

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 129

1.Host

2.Username

เครื่องคอมพิวเตอรของผูใช

3.Password

(Host) ที่ไดทำการเชื่อมตอ (Connect)

ภาพที่ 4.24 การอัปโหลดเว็บไซตโดยใชโปรแกรม Filezilla ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.24 การอัปโหลดเว็บไซต จากตัวอยางเปนการใชโปรแกรม Filezilla ใน การอัปโหลดขอมูลเว็บไซตที่สรางเสร็จแลว สิ่งที่ตองใชในการอัปโหลดไดแก Host คือหมายเลข ระบุ ท ี ่ อ ยู  เ ว็ บ ไซต Username และ Password คื อ รหั ส ผู  ใ ช ง านในการเข า ถึ ง ข อมู ลบน เซิรฟเวอร หรือเว็บโฮสติ้งที่เราไดทำการเลือกใชงาน เมื่อกรอกขอมูลครบตามที่ระบุครบแลวให กดที่ปุม Quick Connect เพื่อเชื่อมตอ และอัปโหลด โดยเลือกขอมูลเว็บไซตที่สรางไวจากฝง ซายที่เครื่องคอมพิวเตอรของผูใช จากนั้นอัปโหลดขึ้นไปบนโฮสต (Host) ดานขวามือจนครบ ทุกไฟล แลวตรวจสอบเว็บไซตไดที่เบราวเซอร 4.4.4.2 การประชาสัมพันธเว็บไซต เมื่อสรางเว็บไซตและอัปโหลดขึ้นบนอินเทอรเน็ ตเรีย บรอยแลว แตไ มไ ด หมายความทุกคนจะรูจักและเขาถึง เว็บไซตได สิ่งหนึ่งที่จะตองทำเปนลำดับตอไปคือ การ ประชาสัมพันธเว็บไซต 1) การประชาสัมพันธเว็บไซตแบบไมเสียคาบริการ โดยทำการประกาศไปยัง เว็ บ ไซต ต  า ง ๆ ที ่ ใ ห บ ริ ก ารฝากประชาสั ม พั น ธ เ ว็ บ ไซต ควรพิ จ ารณาเว็ บ ไซต น ั ้ น ว า มี มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 130

ความสัมพันธหรือกลุมเปาหมายใกลเคียงกับเว็บไซตที่เราสรางขึ้นหรือไม บางเว็บไซตมีบริหาร ใหประชาสัมพันธขอมูลฟรี เชน thaipr.net , sanook.com, Dek-d.com ฯลฯ เปนตน 2) การประชาสัมพันธเว็บไซต แบบเสียคาบริการ โดยการซื้อพื้นที่ปายโฆษณา (Banner) โดยคิดอัตราคาบริการที่แตกตางกันไปตามความนิยมของเว็บไซตนั้น ๆ หรือเลือก วิธกี ารทำ Search Engine Optimization SEO หรือเรียกวา คือ การทำใหเว็บไซตติดหนาแรก ของ Google ชวยใหติดอันดับการคนหาเปนอันดับตน ๆ ทำใหเว็บไซตมีผูเขาชมมากยิ่ง ขึ้น อยางตอเนื่อง จะชวยเพิ่มการขายสินคาและบริการไดมากยิ่งขึ้น เนื่องจากการเขาชมเว็บไซต สวนใหญจะเริ่มมาจากการคนหาผาน Google อาจมีสวนนอยที่เขาชมเว็บไซตโดยตรง 4.5 มัลติมีเดีย มัลติมีเดียเปน ที่น ิยมอยางมากในปจจุบัน ดัง จะเห็นไดจากวงการบันเทิง โฆษณา การตลาด การศึกษา หรือแมแตวงการเเพทยเเละสาธารณสุขที่ใชสื่อมัลติมีเดียในการสื่อสาร ความรูดานสุขภาพ ทั้งนี้เนื่องจากเปนสื่อที่มีตนทุนการผลิตไมสูง และสรางอารมณรวมไดดีและ มีปฏิสัมพันธกับผูใช ซึ่งเปนการสรางเสริมประสบการณใหม และดึงดูดความสนใจ นอกจากนี้ ยังสามารถเผยแพรไดงายดวยความเร็วของอินเทอรเน็ต เทคโนโลยีและอุปกรณการสื่อสารที่ พัฒ นากาวหนาขึ้นอยางรวดเร็ว ทำใหกระบวนการเผยแพรรวดเร็วขึ้น และสามารถเขาถึง กลุมเปาหมายไดจำนวนมาก

ภาพที่ 4.25 มัลติมีเดีย (Multimedia) ที่มา : Cwmediacorp (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 131

จากภาพที่ 4.25 ภาพมัลติมีเดีย (Multimedia) ที่ประกอบดวยสื่อหลากหลายประเภท ซึ่งประกอบดวย ขอความ ภาพนิ่ง ภาพเคลื่อนไหว วิดีโอ เสียง รวมทั้งการโตตอบระหวางผูใช สวนใหญผูใชงานเขาถึงมัลติมีเดียผานโทรศัพทมือถือ (Mobile) 4.5.1 ความหมายของมัลติมีเดีย หมายถึง การนำองคประกอบของสื่อชนิดตางๆ มาผสมผสานรวมกัน ซึ่ง ประกอบดวย ตัวอักษร (Text) ภาพนิ่ง (Image) ภาพเคลื่อนไหว (Animation) เสียง (Sound) และวีดีโอ (Video) โดยผานกระบวนการทางระบบคอมพิวเตอร เพื ่ อ สื ่ อ ความหมายกั บ ผู  ใ ช อ ย า งมี ป ฏิ ส ั ม พั น ธ (Interactive Multimedia) และบรรลุ ตามวัตถุประสงคการใชงาน การออกแบบมัลติมีเดียนั้น มีแนวคิดหลักการที่ใกลเ คียงกับการออกแบบเว็ บ ไซต เพราะเว็บไซตถือเปนงานออกแบบประเภทหนึ่ง ที่ ใ ชสื ่อหลากหลายชนิ ดเชนกัน โดยการ ออกแบบสื่อมัลติมิเดียมีหลักการที่สำคัญ ดังนี้ 4.5.2 หลักการออกแบบมัลติมีเดีย 4.5.2.1 การออกแบบสวนโตตอบ หรือการออกแบบอินเตอรเฟส ควรมีการ ออกแบบกราฟกที่ดีจัดวางองคประกอบที่สวยงาม ใชสีที่เหมาะสมกับกลุมเปาหมายและ สามารถสื่อสารความหมายไดชัดเจน 4.5.2.2 เนื้อหาและโครงสรางงาน ควรมีเนื้อหาที่นาสนใจ และไมนำเสนอ รายละเอียดที่เยอะเกินไป มีการแบงหนาจัดวางและแยกเนื้อหาที่ตองการนำเสนอออกเปน สวน เพื่อใหสามารถคนหาขอมูลไดสะดวก และทำใหการเสนอเนื้อหาดูมีความตอเนื่องสอดคลองกัน นักออกแบบควรเขียนแผนผัง เว็บไซต เพื่อเปนการวางแผนสรุปเนื้อหาทั้ง หมดกอนลงมื อ ออกแบบจริงนอกจากนี้ ยังชวยในการประเมินราคาคาออกแบบอีกดวย 4.5.2.3 การใชระบบนำทาง ควรมีระบบนำทางปรากฏในทุกหนาเพื่อใหผูใช สามารถควบคุมได ต ามต องการในทุก ๆ หนาควรมีล ิง ก ทางออกไปกลั บไปยัง หน าหลั ก ที่ เปรียบเสมือนหนาบาน (Home) และมีลิงกเชื่อมโยงไปยังหนาอื่นได ควรจัดวางระบบนำทาง หรือเมนูใหอยูในตำแหนงที่มองเห็นไดงาย ในระดับสายตาผูชม ไมควรวางสลับตำแหนงไปมา 4.5.2.4 การใชเสียงที่เหมาะสม สอดคลองกับแนวคิดและวัตถุประสงคที่ตั้งไว นักออกแบบไมควรใชเสียงมากเกินไป เพราะเปนการทำลายความนาสนใจของผูใชงานที่มีตอ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 132

ภาพและเนื้อหา จนกลายเปนความนารำคาญได เชนมีเสียงทุกครั้งที่มีการกดปรุงและใสเพลง สลับไปมาระหวางหนาหรือการใสเสียงเพลงที่ดังมากเกินไปขณะเปดมัลติมีเดียเพื่อนำเสนอ ขอมูลสินคา 4.5.2.5 การทำกระดานภาพนิ่ง หรือเรียกวา สตอรี่บอรด (Stryboard) ใน กรณีที่สื่อมัลติมีเดียนั้น มีแอนิเมชัน ประกอบควรตองมีการทำสตอรี่บอรด เพราะจะทำให สามารถลำดับขั้นตอนของเนื้อหาเรื่องราวไดอยางเปนระบบ และสรางความเชื่อมโยงระหวาง ภาพกับเนื้อหาไดดียิ่งขึ้น นอกจากนี้การออกแบบมัลติมีเดียอาจมีผูรวมสรางสรรคผลงานหลาย คน การทำสตอรี่บอรดจะชวยใหผูที่เกี่ยวของทั้งหมดมองเห็นภาพไดชัดเจนขึ้น ซึ่ง ถือเปน กระบวนการมาตรฐานที่นักออกแบบไมควรมองขาม

ภาพที่ 4.26 การทำกระดานภาพนิ่ง (Story Board) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.26 การทำกระดานภาพนิ่ง (Strory Board) จากตัวอยางงานการทำ กระดานภาพนิ่งเพื่อเลาเรื่องจากโครงเรื่องที่ไดเขียนไว โดยมีการแสดงรายละเอียดที่จะปรากฏ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 133

ในแตละฉาก ซึ่งมีลำดับของการปรากฏวาอะไรจะปรากฏขึ้นกอนหลัง เปนการเลาเรื่องของชาย หนุมชื่อแบงคที่เปนเด็กติดเกม ครอบครัวประสบปญหา จึงไดพยายามแกปญหาชีวิตตาง ๆ จน สามารถชำระหนี้ และสรางครอบครัวใหมีความสุข 4.5.3 การสรางงานมัลติมีเดีย การสรางงานมัลติมีเดีย หรือสื่อการเรียนรูประเภทมัลติมีเดีย ซึ่งปจจุบันผูคน นิยมใชกันอยางแพรหลาย ขั้นตอนการสรางจะถูกแบงเปน 3 สวน ดังนี้ 4.5.3.1 ขั้นเตรียมและวางแผน เปนขั้นตอนเตรียมความพรอมในดานขอมูล องคความรู และวางแผนงานกอนเริ่มลงมือถายทำ โดยจะใชสตอรี่บอรดเปนเครื่องมือชวยวาง แผนการทำงาน การหาแนวคิดการสรางสื่อ สิ่งแรกที่ควรคำนึงคือ แนวคิดหลัก และใจความ สำคัญควรมีแนวคิด และใจความสำคัญจะชวยบอกขอบเขต และทิศทาง ดังนั้นทั้งสองอยางนี้ ตองชัดเจนและไมเปลี่ยนแปลง นอกจากนี้อาจจะทำใหสื่อสารองคความรูไดไมดี ดังนั้นกอนการ ทำสื่อควรประชุมหารือเพื่อตัดสินใจใหเรียบรอย และการใชการระดมสมอง (Brainstorming) จะชวยใหคนหาไอเดียไดดี 4.5.3.2 ขั้นตอนการผลิต เปนขั้นตอนลงมือผลิต และตัดตอตามที่วางแผนไว จะประกอบดวย การบันทึกภาพบันทึกเสียง ตัดตอ ตรวจสอบ และแกไขใหเปนไปตามสตอรี่ บอรด โปรแกรมที่ใชในการผลิตมัลติมีเดีย ไดแก Adobe Premiere Pro, Sony Vegas, เปน โปรแกรมที่ใชในการตัดตอภาพ และเสียง ซึ่งโปรแกรมมีความสามารถในการตกแตงและตัดตอ ภาพและเสี ย ง และใส เ อฟเฟกต ใ ห ก ั บ ภาพและเสี ย ง Adobe Premiere Pro คื อ หนึ ่ ง ใน โปรแกรมตัดตอวิดีโอที่ไดรับความนิยมมาก มักใชกันในกลุมนักตัดตอทั้งมือใหม และมืออาชีพ ภายในโปรแกรมมีความสามารถโดดเดนทางดานการตัดตอ สวนใหญจะไดรับความนิยมใชกัน ในกลุมนักเรียนนักศึกษา นอกจากโปรแกรมที่ติดตั้งบนคอมพิวเตอรแลว ยังมีแอปพลิเคชันที่ใช ในการตัดตอวิดีโอฟรี มีใหเลือกดาวโหลดใชผานโทรศัพทมือถือ เชน KineMaster, VivaVideo, Adobe Premiere Clip, iMovie, CapCut เปนตน 4.5.3.3 ขั้นตอนหลังการผลิต เปนขั้นตอนประเมินผลกระบวนการผลิต โดย เปนการประเมินดานความถูกตองของเนื้อหา คุณภาพของเทคนิคการนำเสนอ ความสมบูรณ ของเทคนิคการผลิต โดยผูเชี่ยวชาญดานเนื้อหา ผูเขียนบท ผูกำกับรายการ ทีมงานการผลิต มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 134

และการประเมินผลผลิต ซึ่งจะเปนการประเมินโดยกลุมเปาหมายเปนหลัก โดยจะประเมินใน ดานของความนาสนใจ ความเขาใจในเนื้อหา และสาระที่นำเสนอรวมทั้งการเผยแพร ควรมี รูปแบบที่หลากหลาย เพื่อใหเขาถึงเปาหมายใหไดมากที่สุด เทาที่จะทำได และควรเก็บขอมูล ขอเสนอแนะตาง ๆ ของผูใช เพื่อนำมาแกไขตอไป 4.5.4 ลําดับขั้นตอนของงานตัดตอ 4.5.4.1 การวางแผน คือ การเตรียมการทํางานมีขั้นตอนใดบาง เปนการราง แบบไวในสตอรี่บอรด เพื่อใหเห็นรายละเอียดที่ชัดเจนของงาน 4.5.4.2 การเตรียมวัตถุดิบ คือ การเตรียมไฟลขอมูล เชน ไฟลวิดีโอ ไฟลภาพ ไฟลเสียง เปนตน 4.5.4.3 การตัดตอ คือ การนําขอมูลที่เตรียมไวมาตัดตอเข าดวยกัน ตามที่ วางแผนไว คือ ขั้นตอนการใชโปรแกรมในการตัดตอเพื่อใหเปนไปตามที่ไดรางไวในสตอรี่บอรด 4.5.4.4 การประมวลผล คื อ การประมวลผล หรื อ เรี ย กว า การเรนเดอร (Render) เพื่อใหชิ้น งานเสร็จสมบูรณอยูในรูปไฟลวิดีโอ พรอมที่จะใชง านดวยโปรแกรม แสดงผลวิดีโอ อื่น ๆ 4.5.4.5 การสงออก คือ การนําวิดีโอที่ตัดตอ และประมวลผลเสร็จสมบูรณแลว ไปใชงาน เชน เผยแพรทางอินเทอรเน็ต, หรือออกอากาศไปยังสถานีโทรทัศน เปนตน

ภาพที่ 4.27 การสรางงานมัลติมีเดียโดยใชโปรแกรม Adobe Premiere Pro ที่มา : Bing (2021) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 135

จากภาพที่ 4.27 การสรางงานมัลติมีเดียโดยใชโปรแกรม Adobe Premiere Pro เปนโปรแกรมสำหรับการตัดตอวิดีโอที่มีความสามารถในการปรับและตรวจสอบคาสี โทนสี ความสวางและแสงเงา สามารถผลิตงานคุณภาพสูงไดดี ไมวาจะเปนการสรางไฟลคุณภาพ เชน MPEG2 หรือแปลงไฟลใหไดรูปแบบสื่อวีดิโอที่หลากหลาย

ภาพที่ 4.28 การสรางงานมัลติมีเดียโดยใชแอปพลิเคชัน KineMaster ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.28 การสรางงานมัลติมีเดียโดยใชแอปพลิเคชัน KineMaster เปนแอป พลิ เ คชั น สำหรั บ การตั ด ต อ วิ ด ี โ อที ่ ส ามารถดาวน โ หลดใช ง านได ท ั ้ ง คอมพิ ว เตอร และ โทรศัพทมื อถือ สามารถเพิ ่ม สื่อ ตาง ๆ ไดตามตองการ ผลงานที่ออกแบบมี ลั กษณะเป น แนวนอน เหมาะสำหรับนำเสนอผานสื่อที่เปนแนวนอน และนำเสนอผานอินเทอรเน็ต เชน เว็บไซตยูทูป (Youtube.com) เฟซบุก (Facebook.com) เปนตน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 136

ภาพที่ 4.29 การสรางงานมัลติมีเดียโดยใชแอปพลิเคชัน CapCut ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.29 เปนภาพการสรางงานมัลติมีเดียโดยใชแอปพลิเคชัน CapCut เปน โปรแกรม สามารถเพิ่มสื่อตาง ๆ ไดตามตองการ รวมทั้งการปรับแตงเอฟเฟกต หรือใสฟลเตอร ผลงานที่ออกแบบมีลักษณะเปนตั้ง เหมาะสำหรับนำเสนอผานสื่อที่เปนแนวตั้ง นำเสนอผาน อินเทอรเน็ต เชน ติก๊ ตอก (Tiktok.com) เปนตน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 137

ภาพที่ 4.30 งานออกแบบมัลติมีเดีย (Multimedia) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 4.30 งานมัลติมีเดีย (Multimedia) ที่ผูเขียนจัดทำเปนคลิปวิดีโอ จากการ สัมภาษณนักศึกษาในการเรียนรายวิชาคอมพิวเตอรกราฟกและมัลติมีเดียเพื่องานโฆษณาและ ประชาสัมพันธ เพื่อบันทึกผลการสอน ซึ่งประกอบดวยสื่อประเภท ขอความ ภาพประกอบ วิดีโอ แสะเสียง นำเสนอสื่อมัลติมีเดียผานเว็บไซต https://web.rmutp.ac.th/mct/nuchjaree.b/2560/index.php 4.6 แอนิเมชัน เปน กระบวนการผลิตงานภาพเคลื่อนไหวดวยระบบดิจิทัลโดยใชคอมพิวเตอรเปน อุปกรณหลักในการทํางาน ตั้งแตการวาด การระบายสี การปนโมเดล การทำใหเคลื่อนไหว สรางภาพเคลื่อนไหว ตลอดจนการตัดตอออกมาเปนไฟลภาพยนตรที่สมบูรณ โดยมีทั้ง แอนิเมชันแบบสองมิติ (2D) และสามมิติ (3D) 4.6.1 ความหมายของ แอนิเมชัน (Animation) หมายถึงการสรางภาพเคลื่อนไหว โดยการฉายภาพนิ่งหลายภาพตอเนื่องกันดวยความเร็วสูง การนำภาพนิ่งมาเรียงตอกันโดย การใชคอมพิวเตอรกราฟกในการคำนวณสรางภาพ คำวาแอนิเมชันมาจากคำวา anima ใน ภาษาละติน ซึ่งหมายถึง การทำใหภาพเคลื่อนไหว และมีชีวิตสวน ในทางออกแบบจะเปนการ ใชภาพนิ่งหลาย ๆ ภาพที่มีความตอเนื่องกันมาแสดงภาพดวยระยะเวลาที่เหมาะสม โดยใช หลักการภาพลวงตาเพื่อใหดูเหมือนกับเคลื่อนไหวจริง ในสมัยกอนนั้นเปนการสรางภาพ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 138

แอนิเมชัน เริ่มตนขึ้นจากภาพวาดทีละแผน โดยแตละแผน จะแตกตางจากภาพกอนหนา เล็กนอย จากนั้นจึงดีดหรือพลิก (Flib) ดวยความเร็วสูง ในยุคตอมาไดมีการสรางแอนิเมชัน แบบใหมเรียกวาสต็อปโมชัน (Stop motion) เปนการถายภาพโมเดลที่กำลังคอย ๆ ขยับทีละ เฟรม (Frame) จนมาถึงยุคปจจุบันเปนที่นิยมใชคอมพิวเตอรสรางแอนิเมชัน การใชคอมพิวเตอรออกแบบแอนิเมชันทั้งสองมิติและสามมิตินั้น สวนใหญจะใชในการ อุตสาหกรรมโทรทัศน และภาพยนตร เชนออกแบบเสนรายการ สเปเชียลเอฟเฟกต หรือตัว ละคร โดยผูทำแอนิเมชันไดทำการเสนอแนวทางการสรางแอนิเมชันหลังจากสรางภาพยนตร เรื่องสโนไวท และกลายมาเปนแบบแผนของการทำแอนิเมชันในปจุบัน โดยมีรายละเอียด ดังนี้ (ธรรมปพน ลีอำนวยโชค,2550: 60-69) 4.6.2 รายละเอียดในการทำแอนิเมชัน 4.6.2.1 เวลา (Timing) ถื อ เป น แนวทางสำคั ญ อย า งมากในการออกแบบ แอนิเมชัน เนื่องจากความเร็ว (Speed) ของวัตถุที่เคลื่อนไหวสามารถบอกไดวาวัตถุคืออะไร มี น้ำหนักเทาใด และเพราะเหตุใจจึงเคลื่อนไหว เชนการกระพริบตา หรือตัวละครกะพริบตาเร็วก็ สื่อถึงความตื่นตัว หากพริบตาชาๆ สื่อถึงความออนเพลียหรือเหนื่อย 4.6.2.2 เขาและออกไดงาย (หรือ เขาและออกชา) Ease in and out (or slow in and out) เปนการเพิ่มหรือลดอัตราความเร็วขณะเริ่มเคลื่อนไหวของวัตถุ วัตถุทุก อยางไมสามารถเคลื่อนที่ได ดวยอัตราความเร็วคงที่ตลอดเวลา เมื่อวัตถุเริ่มเคลื่อนที่ความเร็ว จะคอย ๆ เพิ่มขึ้น หรือวัตถุที่กำลังจะหยุดความเร็วจะคอย ๆ ชาลง เชนลูกบอลเวลาเดงขึ้น ความเร็วจะชาลง เนื่องจากแรงดึงดูดของโลก แตขณะลูกบอลตกความเร็วจะเพิ่มขึ้น 4.6.2.3 แนวโคง (Arch) วัตถุเกือบทุกสิ่งที่เคลื่อนไหวจะเคลื่อนไหวเปนแนว เสนโคง และการออกแบบแอนิเมชันใหเคลื่อนไหวอยูในแนวเสนโคงจะมีความเปนธรรมชาติ และสวยงามมากกวา เชน การแกวงของลูกตุมจะอยูในแนวเสนโคง หรือสรีระของมนุษยขณะ ปาลูกบอลจะเคลื่อนที่เปนเสนโคง 4.6.2.4 ความคาดหมาย (Aniticipation) การเกิดแอกชันในแอนิเมชัน จะประกอบดวยสามระยะคือ ระยะเตรียม (Set up for motion) และระยะแอกชัน (Action) และระยะตามหลังแอกชัน (Follow through) โดย Aniticipation คือระยะเตรียม หากนักออกแบบตองการแอกชันที่เร็วและมีพลัง ตองใช มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 139

เวลานานขึ้น เปนการบอกเหตุการณลวงหนากอนที่จะแอกชันจะมาถึง เชน กอนยิงธนูตองงาง สายธนูออกมากอนดานหลัง หรือถาตองการใหตัวละครดวยพลังที่รุนแรง ก็ตองใหเวลาในการ งางนานมากขึ้นไปอีก 4.6.2.5 สิ่งที่เกินจริง (Exaggeration) ถือไดวาเปน สวนสำคัญ ที่เพิ่มเสนหใหกับงานแอนิเมชัน เปนการทำใหการ เคลื่อนไหวดูเกินจริง เชนถาคูชกผูตอสูที่งางหมัดจนตัวเอียงราวกับไมมีจุดศูนยถวง ซึ่งถือเปน ขอไดเปรียบของงานแอนิเมชัน ทำใหการรับชมไดรับอรรถรสมากขึ้น 4.6.2.6 การบี้แบน และการยืดออก (Squash and strech) การบี้แบน และยืดออกของวัตถุ แสดงใหเห็นวาวัตถุนั้นมีความแข็ง หรือออน เพียงใด เชน เมื่อตัวละครเหยียบลงบนลูกเทนนิสจะแบนลง แตมีขอควรระวังคือ การแบนหรือ ยืดออกของวัตถุไมควรเปลี่ยนแปลงปริมาตร แตเปลี่ยนแปลงเฉพาะรูปราง หรือรูปทรงเทานั้น นอกจากนี้การบี้แบน และการยืดออกยังไมถึงตัวละครที่ยอตัวกอนกระโดด และยืดออกขณะ กระโดดดวย 4.6.2.7 แอกชันเสริม (Secondary action) เปนแอกชันเสริมเพื่อเพิ่มความนาสนใจและสมจริงใหกับแอนิเมชัน ทำใหดูมี ความสมบูรณยิ่งขึ้น เชนการเดินของสุนัขเปนแอกชันหลัก และการกระดิกหางเปนแอกชันเสริม อยางไรก็ตามไมควรทำใหดูโดดเดนจนดึงดูดผูชมใหสนใจมากกวาแอกชันหลัก 4.6.2.8 การติ ด ตามการกระทํ า และทั บ ซ อ นกั น (Follow through and overlapping action) เปนระยะตามหลังแอกชัน เชนเมื่อถนนถูกยิงออกไปสายคันธนูจะยังคงสั่นอยู อีกระยะหนึ่ง หรือเมื่อโยนลูกบอลออกไปแลวแขนจะไมหยุดในทันที แตจะยังคงเหวี่ยงตอไป ตามแรง 4.6.2.9 เวที (Staging) คื อ เวที ห รื อ ฉากหลั ง พื ้ น หลั ง (Background) ให ต ั ว ละครปรากฏอยู โ ดยนัก ออกแบบควรคำนึงถึงความกลมกลืนฉากบริเวณพื้นหนาและหลัง การใชสี การสรางรูปรางและ รูปทรง ที่สัมพันธกันภายในฉาก

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 140

4.6.2.10 ความสวยงามในภาพรวม (Appeal) หมายถึง สิ่งใดก็ตามที่คนดูชอบ ซึ่งเปนเรื่องของการออกแบบและความสวยงาม ในภาพรวมของแอนิเมชันทั้งเรื่อง 4.6.2.11 บุคลิกภาพ (Personality) ควรมีการกำหนดกอนวาตัวละครแตละตัวจะมีบุคลิก และลักษณะนิสัยเปน อย า งไรเพราะมี ผ ลตอ รู ปแบบการเคลื ่อ นไหวของตัว ละครนั ้น ๆ เช น อายุ อาชี พ อารมณ ความชอบ 4.6.3 โปรแกรมสำหรับทำแอนิเมชันเลาเรื่อง (Storytelling Animation) 4.6.3.1 Animaker เปนโปรแกรมทำ Animation สรางภาพการตูนเคลื่อนไหว ที่ ใ ช ส ำหรั บ สร า งแอนิ เ มชั ่ น แบบสองมิ ติ (2D), สองจุ ด ห า มิ ติ (2.5D) หรื อ อิ น โฟกราฟก (Infographic) 4.6.3.2 CreateStudio เปนอีกหนึ่งโปรแกรมสรางแอนิเมชันที่สรางการตูน ไดทั้ง แบบสองมิติ (2D) และ สามมิติ (3D) เหมาะสำหรับผูตองการฝกพัฒนาทักษะการทำ แอนิ เ มชั น ขั้ น สู ง ต อ ไป CreateStudio สามารถปรั บ แต ง เนื ้ อ งานได จ ำนวนมาก หน า ตา โปรแกรมลักษณะคลายโปรแกรม Adobe After Effect แตใชงานงายกวา 4.6.3.3 Vyond เปนโปรแกรมทำแอนิเมชันออนไลนที่มีเครื่องมือครบครัน สามารถอัปโหลดไฟลวิดีโอ ไฟลเสียง หรือรูปภาพ และสงออก (Export) วิดีโอไดแบบไมจำกัด 4.6.3.4 Powtoon เปนเว็บไซตสำหรับสรางการตูนแอนิเมชัน และงานนำเสนอ จุดเดนของ Powtoon คือสามารถทำแอนิเมชั่นออนไลนไดฟรี นอกจากนั้นแลวยังมีแอนิเมชัน และเพลงใหเลือกใช 4.6.3.5 Toonly โปรแกรมทําแอนิเมชั่นที่เหมาะสำหรับการสรางแอนิเมชัน การตูนสีสันขยับได โดยไมตองมีพื้นฐานมากอน เพราะกอนใชงานระบบจะสอนวิธีใช อยาง ละเอียด ทุกอยางใน Toonly ถูกวาดมาจากนักออกแบบกราฟกของบริษัทเทานั้นจึงไมมีปญหา ดานลิขสิทธิ์ 4.6.4 โปรแกรมสรางภาพเคลื่อนไหวเพื่อการนำเสนอ (Presenting Animation) 4.6.4.1 Visme เปนโปรแกรมสรางงานนำเสนอแบบการตูนขยับไดบนเว็บไซต ที่มีวัสดุในการสรางแอนิเมชัน หรือภาพการตูนเคลื่อนไหวใหเลือก โดยจุดเดน คือสามารถ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 141

ออกแบบทาทางของตัวการตูนไวหลายแบบ มีใหเลือกใชไดตามสถานการณ เชน ตัวการตูน กำลังพูด กำลังดีใจ กำลังรองไห เปนตน 4.6.4.2 Bannersnack เปนโปรแกรมทำการตูนนำเสนอบนเว็บไซต ใชง าน งายและปรับแตงไดมาก โปรแกรมนี้จะเนนในการทำกราฟกภาพเคลื่อนไหวแบบแบนเนอร โฆษณา โปรแกรมมีใหเลือกเทมเพลต (Template) สามารถปรับแตง ไทมไ ลน (Timeline) เหมือนโปรแกรมตัดตอทั่วไป 4.6.4.3 OnlyMega เปนโปรแกรมทำงานนำเสนอขยับไดบนเว็บ โดยกอน หนานี้เคยใชชื่อโปรแกรม HTML5Maker มากอน โปรแกรมนีเ้ ดนในดานการนำเสนอแบบเขา รายการและออกรายการ (Intro&Outro) ที่นาสนใจ เพราะทำกราฟกและภาพเคลื่อนไหวได สวย และดูเปนมืออาชีพ เหมาะสำหรับทำการตลาดบนสื่อสังคมออนไลน (Social Media) 4.6.4.4 MotionDen เปนโปรแกรมทำกราฟกงานนำเสนอบนเว็บไซตที่ใชงาน ไดง าย เพียงเลือกเทมเพลต (Template) จากนั้น สามารถปรับแตง ไดตามตองการ เหมาะ สำหรับผูที่ตองการทำแอนิเมชันภาพเคลื่อนไหวแบบงาย ๆ 4.6.4.5 Adobe Spark เป น โปรแกรมทำกราฟ ก งานนำเสนอบนเว็ บ ไซต โปรแกรมนี้เหมาะสำหรับการทำวิดีโอแอนิเมชันเพื่อทำการตลาดดิจิทัล (Digital Marketing) เพราะมีเทมเพลต (Template) แบบสำเร็จรูปใหเลือกใชกับสื่อสังคมออนไลนตาง ๆ

ภาพที่ 4.31 งานแอนิเมชัน (Animation) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 142

จากภาพที ่ 4.31 เป น งานแอนิ เ มชั น (Animation) ที ่ ผ ู  เ ขี ย นทำขึ ้ น เพื ่ อ เปนสื่อ ประกอบการเรียนการสอนนักศึกษา เปนเนื้อหาบรรยายเกี่ยวกับวิธีการสอน โดยใชภาพการตูน เปนตัวละครในการเลาเรื่อง ประกอบคำบรรยาย และเผยแพรบนอินเทอรเน็ต นำเสนอผาน ทางเว็บไซต https://web.rmutp.ac.th/mct/nuchjaree.b/2560/index.php 4.6.5 การสรางแอนิเมชัน สามารถแบงได 3 ขั้นตอน ดังนี้ 4.6.5.1 ขั้นตอนเตรียมการ (Pre-production) เปนหัวใจสำคัญสำหรับการ สรางเนื้อหาของภาพยนตรแอนิเมชันเรื่องนั้น ๆ ความสนุก ตื่นเตน และอารมณของตัวละคร ทั้ง หลาย จะถูกกำหนดในขั้นตอนนี้ทั้งหมด ดัง นั้นในสวนนี้จึงมีหลายขั้นตอนและคอนขาง ซับซอน ในขั้นตอนนี้จะแบงเปน 4 ขั้นตอนยอยดวยกัน โดยเรียงตามลำดับดังนี้ คือ 1) เขียนเรื่องหรือบท (Story) เปนสิ่งแรกเริ่มที่สำคัญที่สุดในการผลิตชิ้นงาน แอนิเมชันและภาพยนตรทุกเรื่อง แอนิเมชันจะสนุกหรือไม ลวนขึ้นอยูกับเรื่องหรือบท 2) ออกแบบภาพ (Visual design) หลังจากไดเรื่องหรือบทมาแลว ขั้นตอน ตอไปจะคิดเกี่ยวกับตัวละครวา ควรมีลักษณะหนาตาอยางไร สูงเทาใด ฉากควรจะมีลักษณะ อยางไร สีอะไร ในขั้นตอนนี้ อาจทำกอน หรือทำควบคูไปกับบทภาพ (Storyboard) 3) ทำบทภาพ (Storyboard) คือ การนำบทที่เขียนขึ้นนั้นมาทำการจำแนก มุมภาพตาง ๆ โดยการรางภาพลายเสน ซึ่ง แสดงถึงการดำเนินเรื่องพรอมคำบรรยายอยาง คราวๆ ซึ่งผูบุกเบิกอยางจริงจังในการใชบทภาพ คือ บริษัทเดอะวอลต ดิสนีย ไดริเริ่มขึ้น และ ไดนำมาใชกันอยางแพรหลายจนถึงปจจุบัน ซึ่งแมแตภาพยนตรก็ตองใชวิธีการวาดบทภาพ กอนถายทำดวยเชนกัน 4) รางชวงภาพ (Animatic) คือ การนำบทภาพทั้งหมดมาตัดตอรอยเรียง พร อ มใส เ สี ยงพากยข องตั วละครทั ้ง หมด (ข อ แตกต า งระหว า งภาพยนตรแ อนิเ มชันและ ภาพยนตรทั่วไป เพราะภาพยนตรแอนิเมชันจำเปนตองตัดตอกอนที่จะผลิต เพื่อจะไดรูเวลา และการเคลื่อนไหวในแตละช็อตภาพ (Shot) อยางแมนยำ สวนภาพยนตรที่ใชคนแสดงนั้น จะ ตัดตอภายหลังการถายทำ)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 143

4.6.5.2 ขั้นตอนการทำ (Production) เปนขั้นตอนที่ทำให ภาพตัว ละคร ตางๆ มีความสมบูรณแบบมากยิ่งขึ้น ขั้นตอนนี้เปนขั้นตอนสำคัญที่จะกำหนดวา ภาพยนตร แอนิเมชันเรื่องนั้น จะสวยงามมากหรือนอยเพียงใด ประกอบดวย 1) วางผัง (Layout) คือ การกำหนดมุมภาพ และตำแหนงของตัวละครอยาง ละเอียด รวมทั้งวางแผนในแตละช็อตภาพนั้น ตัวละครจะตองเคลื่อนไหว หรือแสดงสี หนา อารมณอยางไร ซึ่งหากทำภาพยนตรแอนิเมชันกันเปนทีม ก็จะตองประชุมรวมกันเพื่อพิจารณา แตละฉากจะตองมีอะไรบาง เพื่อใหแบงงานกันไดอยางถูกตอง ซึ่งหลังจากเสร็จขั้นตอนนี้แลว จึงสามารถแบงงานใหแกทีมผูทำแอนิเมชัน และทีมฉาก แยกงานไปทำได 2) ทำใหเคลื่อนไหว (Animate) คือ การทำใหตัวละครเคลื่อนไหวตามบท ในแตละฉากนั้น ๆ ในขั้นตอนนี้สำคัญอยางยิ่ง เปรียบเสมือนการกำกับนักแสดงวา จะเลนไดดี หรือไม ซึ่งหากทำขั้นตอนนี้ไดไมดีพอ อาจทำใหผูชมไมรูสึกมีอารมณรวมไปกับตัวละครดวย สวนแอนิเมชันแบบภาพแสดงมิติมีวิธีการทำ โดยวาดภาพลงบนแผนพลาสติกโปรงใสในแตละ ฉากของเรื่อง และเมื่อแบงยอยลงไปอาจประกอบไปดวยสวนตาง ๆ เชน ตัวละคร ตนไม แมน้ำ ภูเขา ดวงอาทิตย ตัวละครแตละตัวหรือสิ่งของแตละชิ้นจะถูกนำไปวาดลงบนแผนใสแตละแผน เมื่อนำแผนใสแตละแผนมาวางซอนกัน แลวถายภาพดวยกลองถายภาพที่ไดรับการออกแบบมา เปนพิเศษ ก็จะไดภาพการตูน 1 ภาพ ที่ประกอบไปดวยตัวละครและฉาก ในการสรางภาพ การตูนใหเคลื่อนไหว ผูทำแอนิเมชัน (Animator) จะตองกำหนดลงไปวา ในแตละวินาที ตัว ละครหรือสิ่งของในฉากหนึ่ง ๆ จะเปลี่ยนตำแหนงหรืออิริยาบถไปอยางไร ทั้งนี้ ผูทำแอนิเมชัน จะตองวาด หรือกำหนดอิริยาบถหลัก หรือคียภาพ (Key) ของแตละวินาที หลังจากนั้นผูทำ แอนิเมชันคนอื่น ๆ จะวาดลำดับการเปลี่ยนแปลงอีกจำนวนหนึ่ง (ซึ่งโดยทั่วไปจะใช 24 ภาพ) เพื่อแสดงใหเห็น ถึง การเคลื่อนไหวจากคียภาพหนึ่ง ไปสูอีกคียภาพหนึ่ง ภาพวาดจำนวน มหาศาลระหวางแตละคียภาพเรียกวา ภาพชวงกลาง (In-Betweens) ในการวาดภาพการตูน ผูวาดภาพที่วาดคียภาพตาง ๆ เรียกวา ผูวาดภาพหลัก (Key animator) ซึ่งตองเปนนักวาด ภาพที่มีฝมือ สวนผูวาดภาพอีกจำนวนหนึ่งที่ทำหนาที่วาดภาพระหวางภาพหลักเรียกวา ผูวาด ภาพชวงกลาง (In-Betweener) นอกจากผูวาดภาพแลว ตองมีผูลงสี (Painter) ซึ่งมีหนาที่ลงสี หรือระบายสีภาพใหสวยงาม

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 144

การสรางภาพยนตรแอนิเมชันมีการใชสีและแสงที่ใหอารมณตางกัน และมีฉากที่ชวยเสริม อารมณความรูสึกของผูชมมากยิ่งขึ้น 3) ฉากหลัง (Background) ฝายฉากเปนฝายที่สำคัญ ไมนอยไปกวาฝาย อื่น ๆ เพราะฉากชวยสื่ออารมณไดเชนเดียวกับตัวละคร เนื่องจากสีและแสงที่ตางกันยอมให อารมณที่ไมเหมือนกัน และฉากยังชวยเสริมอารมณของผูชมไดมากขึ้น 4.6.5.3 ขั้นตอนหลังการทำ (Post-production) เปนขั้นตอนการทำงานขั้นตอนสุดทาย ไดแก 1) การประกอบภาพรวม (Compositing) คือ ขั้นตอนในการนำตัวละครและ ฉากหลังมารวมเปนภาพเดียวกัน ซึ่งใชกระบวนการนี้ทั้งแอนิเมชันแบบภาพสองมิติและภาพ สามมิติ ในกระบวนการนี้ มีการปรับแสงและสีของภาพ ใหมีความกลมกลืนกัน ไมใหสีแตกตาง กัน การนำตัวละครและฉากหลังมารวมเปนภาพเดียวกัน เปนกระบวนการที่จำเปน สำหรับการ ทำแอนิเมชันแบบสองมิติ และแบบสามมิติ 2) ดนตรีแ ละเสียงประกอบ (Music and Sound effects) หมายถึง การ เลือกเสียงดนตรีประกอบ ใหเขากับการดำเนินเรื่อง และฉากตาง ๆ ของการตูน รวมทั้งเสียง ประกอบสังเคราะหดวย ซึ่งวิศวกรเสียงสามารถสรางเสียงประกอบ ใหสอดคลองกับการดำเนิน เรื่องได โดยดูจากเคาโครงเรื่อง ดังนั้นเคาโครงเรื่องถือวามีความสำคัญอยางยิ่ง ในอดีตการสราง เสียงประกอบสามารถทำไดโดยการบันทึกเสียงจากแหลงกำเนิดเสียงจริงที่ใหเสียงไดใกลเคียง ในปจจุบัน ไดนำเทคโนโลยีคอมพิวเตอรเขามาชวยในการสังเคราะหเสียงใหไดเหมือนจริง หรือ เกินกวาความเปนจริง เชน เสียงคลื่น เสียงพายุ เสียงระเบิด ซึ่งวิศวกรเสียงไดเขามามีบทบาท อยางมาก ทั้ง นี้ การตูนภาพเดียวกันแตเสียงประกอบตางกัน เสียงประกอบที่ดีกวา และ เหมาะสมกวา จะชวยเพิ่มอารมณความรูสึก ในการชมภาพยนตรการตูนแอนิเมชันมากขึ้น 4.7 บทสรุป สื่อสิ่งพิมพ หมายถึงแผนกระดาษหรือวัตถุใด ๆ ดวยวิธีตาง ๆ อันเกิดเปนชิ้นงานที่มี ลักษณะเหมือนตนฉบับขึ้นหลายสำเนา ในปริมาณมากเพื่อเปนสิ่งที่ทำการติดตอ หรือชักนำให บุคคลอื่นใหเห็นหรือทราบขอมูลตาง ๆ งานออกแบบสื่อสิ่งพิมพ ความสำคัญในการออกแบบ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 145

สิ่งพิมพคือ การออกแบบเพื่อเพิ่มประสิทธิภาพในการสื่อสาร โดยมีเนื้อหาที่นำมาพิมพ การ ออกแบบสิ่งพิมพเปนการดำเนินการเพื่อใหเกิดผลลัพธตาง ๆ สามารถถายทอดขอมูลที่ตองการ จะสื่อสาร อยางชัดเจน และเหมาะสมกับผูรับสื่อ สรางความประทับใจทำใหขอมูลที่สื่อสารเปน ที่จดจำ วัตถุประสงคของการออกแบบสื่อสิ่งพิมพ 1) เพื่อใชเปนแนวทางในการผลิตสื่อสิ่งพิมพ ใหรูรูปแบบ รูปราง ลักษณะ และสวนประกอบในการพิมพ ทำใหเห็นภาพรวมในการผลิตสื่อ สิ่งพิมพ 2) เพื่อสรางความสวยงามทางศิลปของสื่อสิ่งพิมพ 3) เพื่อดึงดูดความสนใจของผูพบ เห็นและผูอาน 4) เพื่อเสนอขาวสาร ใหความรู สรางความเขาใจ และงายตอการจดจำเนื้อหา 5) เพื่อนำเสนอจุดเดนในองคกร 6) เพื่อเพิ่มประสิทธิภาพในการสื่อสาร หลักการพิจารณาองคประกอบในการพิมพ 1) วัตถุประสงคของการพิมพ 2) รูปราง ของสื่อสิ่งพิมพ 3) ตำแหนงจุดแหงความสนใจในสื่อสิ่งพิมพ 4) ขนาดของสื่อสิ่งพิมพ ขั้นตอนการจัดหนา หรือการจัดเลเอาท การจัดหนาเลเอาทเปนสวนหนึ่งในการจัดทำ สื่อสิ่งพิมพตาง ๆ สามารถใชโปรแกรม Adobe InDesign ชวยในการจัดเลเอาทของสื่อสิ่งพิมพ และสื่ออิเล็กทรอนิกส ขั้นตอนการจัดทำเลยเอาทแบงเปน 4 ขั้นตอน ไดแก 1) เลยเอาทยอ ขนาด 2) เลยเอาทหยาบ 3) เลยเอาทสมบูรณ และ 4) ดัมมี่ ฟอนต (Font) การออกแบบฟอนตลักษณะที่ใชในการออกแบบ เปนการนำตัวอักษร มาสรางรูปลักษณะที่จำเพาะเจาะจง เพื่อใหเกิดมิติของความสวยงาม และมีเอกลักษณ ในการ ออกแบบฟอนตประกอบดวยหลัก เกณฑ ดัง นี้ 1) การใหพื้น ที่ตัวอักษร 2) เวนบรรทัด ให พอเหมาะ 3) ไมปรับขนาดมากเกินไป 4) ทำสีสันใหนาดึงดูด 5) เลือกฟอนตใหดี 6) จัดการ ขอความที่ตกหลน 7) ไมควรใชฟอนตที่หลากหลาย 8) เลือกฟอนตใหเขากับงาน 9) ไมควรใช เอฟเฟกตที่มากเกินไป และ 10) ไมปรับขนาดฟอนตสลับกันไปมา การสรางฟอนต สามารถทำไดโดยใชโปรแกรม Adobe Illustraor หรือการดาวนโหลด ฟอนตจากเว็บไซตที่สรางฟอนตใหใชงานฟรี อินโฟกราฟก การสรางอินโฟกราฟกใหดึงดูดความสนใจ โดยการนำขอมูลสารสนเทศ นำมาจัดทำใหสวยงามและมีประโยชน ดังนั้นการจัดทำขอมูลใหเปนภาพกราฟกจึงเปนที่นิยม ในปจจุบัน อินโฟกราฟกเปนการออกแบบใหเปนภาพที่ชวยอธิบายขอมูลที่ซับซอนใหเขาใจงาย

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 146

Hyperakt’s Josh Smith ผูเชี่ยวชาญดานการออกแบบ ไดคนพบกระบวนการที่ดใี น การออกแบบอินโฟกราฟก (Infographics) 10 ขั้นตอน ประกอบดวย 1) การรวบรวมขอมูล 2) การอานขอมูลทั้งหมด 3) การคนหาวิธีการเลาเรื่อง 4) การระบุปญหาและความตองการ 5) การจัดลำดับโครงสรางขอมูล 6) การออกแบบโครงสรางขอมูล 7) การเลือกรูปแบบอินโฟ กราฟก 8) การกำหนดภาพใหตรงกับหัวขอ 9) การตรวจสอบขอมูลและทดลองใช และ 10) การแบงปนความรูบ นอินเทอรเน็ต การสรางอินโฟกราฟกใหมีประสิทธิภาพ ตองคำนึงถึง 1) เนนที่หัวขอหลักหัวขอเดียว 2) ออกแบบใหเขาใจงาย 3) ขอมูลเปน สิ่ง สำคัญ 4) ตองแนใจวาขอเท็จจริง ถูกตอง 5) ให อินโฟกราฟกเปนตัวเลาเรื่อง 6) การออกแบบที่ดีทำใหมีประสิทธิภาพ 7) ใชสีที่ดึงดูดความ สนใจ 8) ใชคำพูดที่กระชับ 9) ตรวจสอบตัวเลขขอมูล 10) ทำไฟลอินโฟกราฟกใหเล็ก การสรางอิน โฟกราฟก สามารถเลือกใชโ ปรแกรมออกแบบกราฟก เชน Adobe Photoshop, Adobe Illustraor หากไมมีความรูและทักษะในการใชงานโปรแกรมดัง กลาว สามารถสรางอินโฟกราฟกผานเว็บไซตที่ชวยในการออกแบบกราฟกตาง ๆ เชน Canva.com สามารถสมัครใชงานไดฟรี มีเทมเพตใหเลือกใช เมื่อสรางเสร็จแลวสามารถบันทึกไปใชงานได เว็บไซต คือ แหลงที่เก็บรวบรวมขอมูลเอกสารและสื่อประสมตาง ๆ การออกแบบ เว็ บ ไซต เ พื ่ อ ให ม ี ป ระสิ ท ธิ ภ าพ และสามารถดึ ง ดู ด ความสนใจของผู  ค นได ดี จะต อ งมี องคประกอบในการออกแบบเว็บไซต ดังนี้ 1) ความเรียบงาย เขาใจงาย 2) ความสม่ำเสมอ 3) สรางความโดดเดน เปนเอกลักษณ 4) เนื้อหาตองดี มีขอมูลครบถวน 5) ระบบเนวิเกชั่นตองใช งาย 6) คุณภาพของเว็บไซต 7) ความสะดวกในการเขาใชงาน 8) ความคงที่ของการออกแบบ 9) ความคงที่ของการทำงาน ขั้น ตอนการจัดทำเว็บไซต ตองเตรียมการกอนจัดทำเว็บไซต และวางแผนการจัด ทำเว็บไซต เปนการออกแบบโครงสรางเว็บไซต (Sitemap) เพื่อใหเห็นภาพรวมของเว็บไซต จากนั้นเลือกเครื่องมือที่จะใชในการสรางเว็บไซต เพื่อนำไปออกแบบโฮมเพจ และเว็บเพจ ทำ การเชื่อมโยง (Link) ขอมูลที่มีความสัมพันธ และเมื่อสรางเสร็จแลว ใหทำการจดโดเมนและเชา โฮสตเพื่อทำการประชาสัมพันธเว็บไซตตอไป

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

เครือขายงานกราฟก 147

มั ล ติ ม ี เ ดี ย เป น การนำองค ป ระกอบของสื ่อ ชนิ ด ต า งๆ มาผสมผสานรวมกั น ซึ่ง ประกอบดวย ตัวอักษร (Text) ภาพนิ่ง (Image) ภาพเคลื่อนไหว (Animation) เสียง (Sound) และวีดีโอ (Video) โดยผานกระบวนการทางระบบคอมพิวเตอร เพื่อสื่อความหมายกับ ผู ใ ช อยางมี ปฏิสัมพันธ (Interactive Multimedia) และไดบรรลุ ตามวัตถุประสงคการใชงาน การออกแบบมัลติมีเดีย มีหลักการที่สำคัญ ดังนี้ 1) การออกแบบสวนโตตอบหรือการ ออกแบบอินเตอรเฟส 2) เนื้อหาและโครงสรางงาน 3) การใชระบบนำทาง 4) การใชเสียงที่ เหมาะสม สอดคลองกับแนวคิด และวัตถุประสงคที่ตั้ง ไว 5) การทำกระดานภาพนิ่ง หรือ เรียกวาสตอรี่บอรด (Storyboard) การสรางงานมัลติมีเดีย แบงเปน 3 สวน ดังนี้ 1) ขั้นเตรียมและวางแผน เปนขั้นตอน เตรียมความพรอมในดานขอมูล 2) ขั้นลงมือผลิต เปนขั้นตอนผลิต ตัดตอตามที่วางแผนไว ซึ่ง ลําดับขั้นตอนของงานตัดตอ ไดแก การวางแผน การเตรียมวัตถุดิบ การตัดตอ การประมวลผล หรือเรียกวาการเรนเดอร และการสงออก คือการนําวิดีโอที่ตัดตอ และประมวลผลเสร็จสมบูรณ แลวไปใชงาน 3) ขั้นหลังการผลิต เปนขั้นตอนประเมินผลกระบวนการผลิต การประเมินผล ผลิต รวมทั้งการเผยแพรควรมีรูปแบบที่หลากหลาย เพื่อใหเขาถึงเปาหมายใหไดมากที่สุด แอนิ เ มชั น หมายถึ ง การสร า งภาพเคลื ่ อ นไหว โดยการฉายภาพนิ ่ ง หลาย ภาพตอเนื่องกันดวยความเร็วสูง การนำภาพนิ่งมาเรียงตอกันโดยการใชคอมพิวเตอรกราฟกใน การคำนวณสรางภาพ ในทางออกแบบจะเปนการใชภาพนิ่งหลาย ๆ ภาพที่มีความตอเนื่องกัน มาแสดงภาพด ว ยระยะเวลาที ่ เ หมาะสม โดยใช ห ลั ก การภาพลวงตาเพื ่ อ ให ด ู เ หมื อ นกั บ เคลื่อนไหวจริง การสรางแอนิเมชันสามารถแบงขั้นตอนการทำได 3 ขั้นตอน ดังนี้ 1) ขั้นตอน เตรียมการกอนการทำ ไดแก การเขียนเรื่องหรือบท แลวนำไปออกแบบภาพ ทำบทภาพ และ รางชวงภาพ 2) ขั้นตอนการทำแอนิเมชัน เปนขั้นตอนที่ทำใหภาพตัวละครตางๆ มีความ สมบูรณแบบมากยิ่งขึ้น ประกอบดวย การวางผัง การทำใหเคลื่อนไหว และการทำฉากหลัง 3) ขั้นตอนหลังการทำ เปนขั้นตอนการทำงานขั้นตอนสุดทาย ไดแก การประกอบภาพรวม และดนตรีและเสียงประกอบ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

พื้นฐานงานกราฟิ ก กอนที่จะเริ่มออกแบบสรางสรรคง านกราฟกในรูปแบบตาง ๆ นักออกแบบควรศึกษา พื้น ฐานของงานกราฟกเพื่อใหรูจักกับประเภทของภาพ ไฟลภาพกราฟก การกำหนดความ ละเอียดของภาพกราฟก โหมดสีในงานกราฟก รวมถึงตัวอักษรในงานกราฟก ซึ่งเปนตัวอยาง พื้นฐานของการออกแบบกราฟก เพื่อเปนแนวทางในการออกแบบงานกราฟกประเภทตาง ๆ 5.1 ประเภทของภาพกราฟก ในการออกแบบกราฟก ภาพคือสวนประกอบสำคัญ ที่ตองนำมาใชในการออกแบบสื่อ ประเภทตาง ๆ การเลือกใชภาพที่ถูกตองตามคุณสมบัติ จะทำใหไดผลงานการออกแบบกราฟกที่ มีคุณภาพ ซึ่งภาพในงานกราฟกจะแบงออกเปน 2 ประเภท ไดแก 5.1.1 ภาพกราฟกแบบบิตแมพ (Bitmap) การสร า งภาพกราฟ ก ด ว ยคอมพิ ว เตอร ป ระเภทภาพกราฟ ก แบบราสเตอร หรือเรียกอีกอยางหนึ่ง วา บิตแมพ (Bitmap) เปนภาพกราฟกที่เกิดจากการเรียงตัวของจุด สี่เหลี่ยมเล็ก ๆ ที่เรียกวา พิกเซล (Pixel) มีการเก็บคาสีที่เจาะจง ในแตละตำแหนงจนเกิดเปน ภาพในลักษณะตางๆ เชน ภาพถาย ภาพกราฟก ไฟลภาพบิตแมพ ไดแกไฟลที่มีนามสกุล BMP, GIF, JPG และ TIF เปนตน วิกิพีเดีย (2564) ไดใหความหมายเกี่ยวกับพิกเซล (Pixel) หมายถึง หนวยขนาด เล็กของภาพ หรือ จุดภาพบนจอแสดงผล ที่รวมกันเปนภาพขึ้น โดยภาพหนึ่งจะประกอบไปดวย จุดภาพ หรือพิกเซล แตละภาพที่สรางขึ้น จากการถายภาพ หรือภาพวาดตาง ๆ จะมีความ หนาแนนของจุดภาพที่แตกตางกัน ขึ้นอยูกับการกำหนดคา หรือความละเอียดคมชัดของอุปกรณ พิกเซล (Pixel) จึงใชเปนหนวยในการบอกคุณสมบัติของภาพ จอภาพ หรือ อุปกรณแสดงผลภาพ

พื้นฐานงานกราฟก 149

พิกเซล

ภาพที่ 5.1 พิกเซล (Pixel) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 5.1 เปนภาพของพิกเซล (Pixel) คือจุดภาพที่แสดงบนหนาจอแสดงผล หรือ จุดภาพที่รวมกันเปนภาพ ดังภาพดอกไม ถาจำนวนของพิกเซลมีจำนวนมาก ความคมชัดของ ภาพจะเพิ่มขึ้น และเมื่อขยายภาพใหใหญขึ้น ภาพจะแตกมองเห็นเปนภาพของพิกเซลจำนวน มากเรียงตอกันจนทำใหเกิดเปนภาพที่ปรากฏ 5.1.1.1 ภาพบิตแมพ (Bitmap) มีขอดีและขอเสีย ดังนี้ ข อ ดี ข องภาพบิ ต แมพ คื อ เหมาะสำหรั บ ภาพที ่ ต  อ งการความสวยงาม การ กำหนดคาสีทมี่ ีความละเอียด และขอเสีย คือหากมีการขยายขนาดภาพใหมีขนาดใหญขึ้น สงผล ใหภาพนั้นสูญเสียความละเอียด คุณภาพของภาพจะลดลง มองเห็นภาพที่แตกออกเปนพิกเซล ไฟล ภ าพมี ข นาดใหญ และใช เ นื ้ อ ที ่ ใ นการจั ด เก็ บ มาก โปรแกรมที ่ น ิ ย มใช ในการสร า ง ภาพบิตแมพ ไดแก โปรแกรม Adobe Photoshop เปนตน การออกแบบงานกราฟกดวย ภาพบิตแมพ เหมาะสำหรับการนำภาพไปใชในขนาดเทาที่จำเปนตามอัตราสวนที่กำหนด ไม เหมาะสำหรับนำไปขยายใหใหญเพิ่มขึ้นจากไฟลตนฉบับ เชน การพิมพภาพขนาดใหญ เพราะจะ ทำใหภาพแตก ไมคมชัด นิยมนำเสนอผานสื่อรูปแบบออนไลน เชน หนาจอคอมพิวเตอร เว็บไซต สื่อสังคมออนไลน เปนตน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 150

พิกเซล

ภาพที่ 5.2 ภาพบิตแมพ (Bitmap) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที ่ 5.2 เป น ภาพบิ ต แมพ (Bitmap) จากภาพถ า ยดอกไม เ มื ่อ มี การขยาย ขนาดภาพใหมีขนาดใหญขึ้น จะเห็นสวนประกอบของพิกเซลที่เกิดจากการรวมกันหลายพิกเซล พบไดจากกลองดิจิทัลที่คาความละเอียดของพิกเซลมากแคไหน ความคมชัดของภาพจะมากขึ้น ตามไปดวย 5.1.2 ภาพกราฟกเวกเตอร (Vector) การสร า งภาพกร าฟ ก ด ว ย คอมพ ิ ว เตอร ประ เภ ทเวก เตอร (Vector) เป น ภาพกราฟ ก ที ่ เ กิ ด จากการประมวลผลโดยอาศั ย หลั ก การคำนวณทางคณิ ต ศาสตร มี ส ี แ ละตำแหน ง ที ่ แ น น อน ทำให ภ าพมี ค วามเป น อิ ส ระต อ กั น โดยแยกชิ ้ น ส ว นของภาพ ทั้งหมดออกเปนเสนตรง เสนโคง หรือรูปทรง เมื่อขยายภาพความละเอียดของภาพจะไมลดลง เชน ภาพการตูนเมื่อถูกขยายขนาด ภาพที่ไดจะยังคงรายละเอียดและความชัดเจนไวเชน เดิม โปรแกรมที่นิยมใชสรางภาพแบบเวกเตอร ไดแก โปรแกรม Adobe Illustrator โปรแกรม CorelDraw โปรแกรม Flash เปนตน สวนไฟลภาพเวกเตอร ไดแกไฟลที่มีนามสกุล .AI, .SWF .EPS, .CDR เปนตน การออกแบบงานกราฟกดวยภาพเวกเตอร เหมาะสำหรับการนำภาพไปใช มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

พื้นฐานงานกราฟก 151

โดยเนนความละเอียดคมชัดของภาพ เชน โปสเตอร ไวนิล รวมถึงยังสามารถนำไปใชไดกับสื่อทุก รูปแบบ ที่ตองการยอขนาดหรือขยายภาพใหใหญขึ้น แตคุณภาพของภาพยัง คมชัดเทาเดิม ไมทำใหอัตราความคมชัดของภาพลดลงไป

ภาพขยาย

ภาพที่ 5.3 ภาพเวกเตอร (Vector) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 5.3 เปน ภาพเวกเตอร (Vector) จากการวาดภาพตนไม ดว ยโปรแกรม Adobe Illustrator เนื่องจากภาพที่ไดเกิดจาการคำนวณทางคณิตศาสตร เมื่อมีการขยายขนาด ภาพใหมีขนาดใหญขึ้น จะเห็นความคมชัดของภาพที่ชัดเจนขึ้นคาความละเอียดของภาพเทาเดิม 5.1.2.1 ภาพเวกเตอร (Vector) มีขอดีและขอเสีย ดังนี้ ขอดีของภาพเวกเตอร คือ เหมาะสำหรับภาพที่ต องการความคมชัด สวยงาม คุณภาพงานระดับสูง ภาพเวกเตอรจะมีความละเอียดสูง เมื่อทำการขยายภาพใหใหญ จะไมทำให คุ ณ ภาพความคมชั ด ของภาพลดลง และข อ เสี ย คื อ ไฟล ภ าพมี ขนาดใหญ ใช เ นื ้ อ ที ่ ในการ จัดเก็บมาก การแสดงผลภาพผานเว็บไซตอาจตองใชเวลานาน ประเภทของภาพกราฟกมีสองประเภท คือประเภทภาพบิตแมพ และภาพเวกเตอร ซึ่ง ภาพแตละประเภทยังประกอบไปดวยหลากหลายไฟล ที่นักออกแบบควรศึกษาถึงคุณสมบัติ เพื่อ การเลือกใชงานใหเหมาะสม และตรงตามวัตถุประสงค

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 152

5.2 ไฟลภาพกราฟก การสรางภาพกราฟกหรือการตกแตง ภาพกราฟก ประเภทของไฟลภาพกราฟกเปน อีกปจจัยหนึ่งที่มีความสำคัญ เนื่องจากการใชงานแตละประเภทจะตองใชไฟลที่มีคุณสมบั ติที่ เหมาะสมกับงานนั้น ๆ ควรคำนึง ถึง ความละเอียด ความคมชัดของภาพ ขนาดของไฟลภาพ เพราะความละเอียดของไฟลภาพจะสงผลกับขนาดของภาพ เชน ภาพที่นำมาใชงานบนเว็บเพจ ควรจะตองมีขนาดเล็กเพื่ อนำไปเรีย กใชง านบนเว็บ เพจได อยางรวดเร็ว ประเภทของไฟล ภาพกราฟกที่นิยมใชโดยทั่วไป ไดแก 5.2.1 JPEG หรือ JPG (Join Photographic Export Group) เปนรูปแบบไฟลที่เก็บภาพแบบบิต แมพที่ไ ม ตองการคุ ณภาพสูง มากนั ก เชน ภาพถ า ย ภาพจากกล อ งดิ จ ิ ท ั ล ภาพถ า ยจากโทรศั พ ท ม ื อ ถื อ และภาพกราฟ ก สำหรั บ เผยแพร บ นอิ น เทอร เ น็ ต สามารถแสดงสี ไ ด ถ ึ ง 16.7 ล า นสี เป น ไฟล ภ าพชนิ ด หนึ่ ง ที ่ ไ ด ร ั บ ความนิ ย ม เนื ่ อ งจากไฟล ม ี ข นาดเล็ ก สามารถบี บ อั ด ข อ มู ล ได ห ลายระดั บ ดั ง นั้ น นักออกแบบจึงควรเลือกบันทึกเปนไฟลภาพที่เหมาะสมกับงานที่นำไปใชงานใหมากที่สุด

ภาพที่ 5.4 ภาพไฟล JPEG ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

พื้นฐานงานกราฟก 153

จากภาพที่ 5.4 เปนภาพไฟล JPEG การออกแบบกราฟกสื่อประชาสัมพันธงานปจฉิม นิเทศนักศึกษา สำหรับเผยแพรบนอินเทอรเน็ต ไฟลมีขนาดเล็ก แตควรตั้งคาความละเอียดและ ขนาดของงานใหเหมาะสมกับรูปแบบที่ตองการนำเสนอ 5.2.1.1 จุดเดน จุ ด เด น คื อ สามารถสนั บ สนุ น สี ไ ด ถ ึ ง 24 Bit แสดงค า สี ไ ด ถ ึ ง 16.7 ล า นสี สามารถกำหนด คาการบีบอัดไฟลไ ดตามที่ตองการ มีระบบแสดงผลแบบหยาบและคอย ๆ ขยายไปสูความละเอียด มีโปรแกรมสนับสนุนการสรางจำนวนมาก สามารถแสดงผลไดกับทุก เบราวเซอร 5.2.1.2 จุดดอย จุดดอย คือ ไมสามารถทำภาพใหมีพื้นหลังแบบโปรงใส (Transparent) ได และ ไมสามารถทำเปนภาพเคลื่อนไหว (Animation) 5.2.2 GIF (Graphic Interchange Format) เปนไฟลภาพที่สามารถบีบอัดขอมูลใหมีขนาดเล็กไดสวนมากจะนำไปใชบัน ทึก เปน ไฟลภาพเคลื่อนไหว ลายเสน สัญ ลักษณตาง ๆ ที่ไ มตองการความละเอีย ดของสี นิยม ใชในการใชง านออกแบบบนเว็ บ เพจ สามารถสร างไฟลภ าพ GIF ไดดวยโปรแกรม Adobe Photoshop หรือ เว็บไซตสรางภาพเคลื่อนไหว GIF เชน FreeGifMaker.me, picasion.com, และ gifmaker.me หรือสามารถสรางจากแอปพลิเคชัน GIPHY CAM (กิฟฟแคม) แอปพลิเคชัน แตงภาพใหเปนภาพ GIF โดยการใสภาพ วิดีโอ หรือสัญลักษณอื่น ๆ สามารถดาวนโหลดใชงาน ไดฟรีทั้งบน App Store และ Play Store

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 154

ภาพที่ 5.5 ภาพไฟล GIF ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 5.5 เปนการออกแบบการตูนภาพเคลื่อนไหวไฟล GIF โดยการสรางจาก แอปพลิเคชัน GIPHY CAM โดยการนำภาพแปลงเปนไฟล GIF สามารถนำไปประยุกตใชงานบน อินเทอรเน็ต หรือ สื่อสังคมออนไลนได เนื่องจากไฟลมีขนาดเล็ก สามารถดาวนโหลดไดรวดเร็ว 5.2.2.1 จุดเดน จุ ด เด น คื อ สามารถใช ง านข ามระบบไมว า จะเป น ระบบปฏิ บ ัต ิ การวินโดวส (Windows) หรื อ ระบบปฏิ บ ั ต ิ ก ารยู น ิ ก ซ (Unix) สามารถเรี ย กใช ไ ฟล ภ าพสกุ ล นี ้ ไ ด ภาพมีขนาดไฟลต่ำ จากเทคโนโลยีการบีบอัดภาพ ทำใหสามารถสง ไฟลภาพไดอยางรวดเร็ว สามารถทำภาพพื้นหลัง แบบโปรง ใสได มีโปรแกรมสนับสนุนการสรางจำนวนมาก สามารถ นำเสนอภาพเคลื่อนไหว และ แสดงภาพไดทุกเบราวเซอร 5.2.2.2 จุดดอย จุดดอย คือ แสดงสีไ ดเพียง 256 สี ไมเหมาะกับภาพที่ตองการความคมชั ด หรือความสดใสเปนพิเศษ 5.2.3 PNG (Portable Network Graphics) เปนชนิดของไฟลภาพที่นำจุดเดนของไฟลภาพแบบ GIF และแบบ JPG มาพั ฒ นาร ว มกั น ทำให ไ ฟล ภ าพชนิ ด นี ้ แ สดงสี ไ ด ม ากกว า 256 สี และยั ง สามารถทำพื้ น หลังภาพใหโปรงใสได จึงเปนไฟลภาพที่ไดรับความนิยมมากในปจจุบัน เหมาะกับงานที่ตองการ นำเสนอบนอินเทอรเน็ต เชน เว็บไซต และ สื่อสังคมออนไลนตาง ๆ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

พื้นฐานงานกราฟก 155

ภาพที่ 5.6 ภาพไฟล PNG ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 5.6 เปนการออกแบบการตูนภาพไฟล PNG โดยการสรางจากแอปพลิเคชัน MomentCam ซึ่งไฟล PNG จะมีสีสันสดใสมากกวาไฟล GIF และสามารถสรางเปนภาพพื้นหลัง แบบโปรงใสได สามารถนำไปใสลงในวัตถุตาง ๆ ภาพจะผสานไปกับวัตถุนั้น ๆ ไดโดยไมตอง เสียเวลาลบพื้นหลังสีขาวออกไป 5.2.3.1 จุดเดน จุดเดน คือ สนับสนุนสีไดตามคา True color (16 bit, 32 bit หรือ 64 bit) สามารถกำหนดคาการบีบอัดไฟลไดตามที่ตองการ ทำภาพพื้นหลังแบบโปรงใสได 5.2.3.2 จุดดอย จุดดอย คือ หากกำหนดคา การบีบ อั ดไฟลไ ว ส ูง จะใช เวลาในการคลายไฟล ภาพสูงตามไปดวย และไมสนับสนุนกับเบราวเซอรรุนเกา โปรแกรมสนับสนุนในการสรางยังมีไม มากนัก 5.2.4 BMP (Bitmap) เป น รู ป แบบของไฟล ภ าพมาตรฐานที ่ ใ ช ไ ด ใ นระบบปฏิ บ ั ต ิ ก ารวิ น โดวส โดยมีลักษณะการจัดเก็บไฟลภาพเปนจุดสีทีละจุด จึงทำใหภาพดูเสมือนจริง เก็บรายละเอียด ของภาพได ด ี เหมาะสำหรั บ นำไปตกแต ง ภาพ แต ไ ฟล ม ี ข นาดใหญ แ สดงผลภาพได ช า และไมรองรับโหมดสีสิ่งพิมพ CMYK จึงนำไปใชกับงานสื่อสิ่งพิมพไมได

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 156

5.2.4.1 จุดเดน จุดเดน คือ แสดงรายละเอียดสีได 24 bit ไมมีการสูญเสียขอมูลใด ๆ เมื่อมีการยอ หรือขยายภาพ นำไปใชงานไดกับทุกโปรแกรมในระบบปฏิบัติการวินโดวส 5.2.4.2 จุดดอย จุ ด ด อ ย คื อ ภาพมี ข นาดใหญ ม ากจึ ง ใช เ นื ้ อ ที ่ ใ นการจั ด เก็ บ ค อ นข า งมาก ความละเอียดของภาพ อาจจะไมชัดเจนเหมือนตนฉบับ

ภาพที่ 5.7 ภาพไฟล BMP ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 5.7 เปนภาพไฟล BMP สามารถเปดภาพไดทุกโปรแกรม ไฟลภาพมีขนาด ใหญ ใชเวลาในการเปดไฟลชา เนื่องจากใชเนื้อที่ในการจัดเก็บคอนขางมาก 5.2.5 TIF หรือ TIFF (Tagged Image File) เปนไฟลที่ใชเก็บภาพแบบบิตแมพคุณภาพสูง เชน ภาพกราฟกที่นำไปใชงานดาน สื่อสิ่งพิมพ สามารถเก็บขอมูลของภาพไวไดครบถวน ทำใหคุณภาพของสีเหมือนตนฉบับ สามารถ บันทึกเปนเลเยอรเก็บไวเพื่อปรับแตงแกไขในหลายหลังได รองรับโหมดสี CMYK สำหรับนำเสนอ ผานการพิมพ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

พื้นฐานงานกราฟก 157

ภาพที่ 5.8 ภาพไฟล TIFF ที่มา : นุจรี บุรีรัตน (2564) จากภาพที ่ 5.8 เป น การออกแบบโปสเตอร โดยการสร า งจากโปรแกรม Adobe Photoshop ขนาด A3 ออกแบบดวยโหมดสี CMYK เพื่อจัดพิมพเผยแพรประชาสัมพันธ ความ คมชัดของสีเหมือนตนฉบับ และสามารถบันทึกเปนเลเยอรหากตองการแกไขในภายหลัง 5.2.5.1 จุดเดน จุดเดน คือ สามารถใชง านขามระบบ ไมวาจะเปนระบบปฏิบั ติก ารวิน โดวส หรือระบบ ปฏิบัติการยูนิกซ สามารถเรียกใชไฟลภาพชนิดนี้ได แสดงรายละเอียดสีได 48 บิต ไฟลภาพมีความยืดหยุนสูง สามารถเปลี่ยนแปลงแกไขได เมื่อมีการบีบอัดไฟล จะมีการสูญเสีย ขอมูลนอยมาก มีโปรแกรมสนับสนุนการสรางจำนวนมาก

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 158

5.2.5.2 จุดดอย จุดดอย คือ ไฟลภาพมีขนาดใหญ ใชพื้นที่ในการจัดเก็บไฟลภาพสูง ทำใหเปลือง พื้นที่ในการจัดเก็บ 5.2.6 PSD (Photoshop Document) เป น ไฟล ต  น ฉบั บ ของง าน ที ่ ส ร  า งจากโ ปร แกร ม Adobe Photoshop จะทำการบันทึกแบบแยกเลเยอร (Layer) โดยเก็บประวัติการทำงานและรายละเอียดการตกแตง ภาพเอาไวเพื่องายตอการแกไขในภายหลัง เหมาะสำหรับการออกแบบกราฟกแบบบิตแมพ ใช สำหรับตกแตงภาพถายและภาพกราฟกไดอยางมีประสิทธิภาพ ไมวาจะเปนงานดานสิ่ง พิมพ นิตยสาร และงานดานมัลติมีเดีย อีกทั้งยังสามารถตกแตงภาพ และการสรางภาพใสเอฟเฟกต ตาง ๆ ใหกับภาพ ตัวหนังสือ ซึ่งเปนโปรแกรมทีไ่ ดรับความนิยมสำหรับนักออกแบบกราฟก

ภาพที่ 5.9 ภาพไฟล PSD ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 5.9 เปนการออกแบบปกหนังสือ โดยใชโปรแกรม Adobe Photoshop นำ วัตถุตาง ๆ ไดแก ขอความ และภาพกราฟกมาจัดวางองคประกอบ ซึ่งวัตถุแตละชิ้นจัดเก็บเปน เลเยอรสามารถแกไขในภายหลังได แตหากตองการนำไปใชงานสามารถบันทึกเปนไฟลภาพแบบ บิตแมพตาง ๆ ได เชน ไฟล JPG, PNG, GIF เปนตน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

พื้นฐานงานกราฟก 159

5.2.6.1 จุดเดน จุดเดน คือ มีการบัน ทึกไฟลโดยแบง เปน เลเยอร และเก็บประวัติการทำงาน ทุกขั้นตอน สามารถนำ ไฟลภาพมาแกไขไดในภายหลัง เปนที่นิยมในการนำมาออกแบบกราฟก เพื่อผลิตสื่อตางๆ ทั้งในรูปแบบสื่อสิ่งพิมพนำเสนอแบบออฟไลน และสื่อดิจิทัลนำเสนอรูปแบบ ออนไลน 5.2.6.2 จุดดอย จุดดอย คือ ไฟลภาพมีขนาดใหญเมื่อเทียบกับไฟลภาพประเภทอื่น ใชพื้นที่ในการ จัดเก็บจำนวนมาก 5.2.7 AI (Adobe Illustrator) เปนไฟลตนฉบับของงานที่สรางจากโปรแกรม Adobe Illustrator ไฟลกราฟก ออกแบบจากการคำนวณทางคณิตศาสตร โดยใชอัตราสวนการขยายตามสเกลของวัตถุ เมื่อมีการ ขยายภาพใหใหญหรือลดขนาดภาพ จะทำใหขนาดของรูปภาพและความคมชัดขยายหรือลดตาม ขนาดของรูปภาพ ทำใหรูปภาพมีความคมชัด แมจะขยายขนาดใหญไฟลจะไมแตก นิยมนำไปใช งานในการออกแบบกราฟกที่ตองการความคมชัดในทุกขนาดของผลงาน เชน ฉลากสินคา ตรา สินคา นามบัตร สื่อโฆษณาตาง ๆ เปนตน 5.2.7.1 จุดเดน จุดเดน คือ สามารถปรับแกไ ขยืดขยายไดโดยไฟลยัง คงคมชัด เนื่องจากไฟลมี ผลลัพธเปนภาพเวกเตอรเกิดจากการคำนวณทางคณิตศาสตร จึงทำใหไดภาพกราฟกที่มีคุณภาพ สามารถนำไปเผยแพรไดทั้งในรูปแบบออฟไลน โดยการพิมพภาพขนาดใหญ และการเผยแพรใน รูปแบบออนไลนผานทางอินเทอรเน็ต เชน เว็บไซต หรือ สื่อสังคมออนไลนตาง ๆ 5.2.7.2 จุดดอย จุ ด ด อ ย คื อ ไฟล ภ าพมี ข นาดใหญ ต อ งใช อ ุ ป กรณ ค อมพิ ว เตอร ที่ ส ามารถ ประมวลผลไดรวดเร็ว มีประสิทธิภาพรองรับการทำงาน และการจัดเก็บไฟลงานที่มีขนาดใหญ ตองมีคอมพิวเตอรที่มีเนื้อที่เพียงพอ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 160

ภาพที่ 5.10 ภาพไฟล AI ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 5.10 เปนการออกแบบปกหนังสือ โดยใชโปรแกรม Adobe Illustrator โดย การนำวัตถุตาง ๆ ไดแก ขอความ และภาพกราฟกมาจัดวางองคประกอบ จะไดภาพกราฟกที่มี ความคมชัด เปนภาพแบบเวกเตอร ซึ่งวัตถุแตละชิ้นจัดเก็บเปนเลเยอรสามารถแกไ ขในภายหลัง ได ในการออกแบบภาพกราฟก เพื่อการนำภาพไปใชในรูปแบบตาง ๆ นักออกแบบตอง มีความเขาใจและสามารถนำไปใชไดอยางถูกตอง ในเรื่องการการกำหนดความละเอียดของภาพ จึงมีความจำเปนที่จะตองศึกษา เพื่อใหไดคุณภาพของผลงาน สามารถนำไปไดตามวัตถุประสงค 5.3 การกำหนดความละเอียดของภาพกราฟก เพื่อใหไ ดชิ้น งานผลลัพธออกมาดี ภาพคมชัด นักออกแบบจะ ตองรูจักการกำหนด ค า ความละเอี ย ด (Resolution) ของภาพใหเ หมาะสมที่ นำภาพนั้ น ไปใช ดั ง นั ้ น เพื่ อความ เหมาะสมกับการทำงานแตละแบบ จึงมีการกำหนดคาความละเอียดภาพที่เหมาะสม ดังนี้ 5.3.1 การตั้งคาความละเอียดของภาพ 72 พิกเซล/นิ้ว สำหรับการแสดงงานกราฟก บนหนาจอคอมพิวเตอร (Screen) หนาจอโทรศัพท เชน งานออกแบบเว็บไซต เปนตน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

พื้นฐานงานกราฟก 161

ภาพที่ 5.11 การตั้งคาความละเอียด 72 พิกเซล/นิ้ว ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 5.11 เปนการสรางชิ้นงานใหม โดยเลือกประเภทเว็บไซต (Web) จากนั้น เลือกขนาดความกวางของเว็บ สามารถเลือกไดตามความเหมาะสม ในตัวอยางเลือกขนาด 1080x1024 px ซึ ่ ง เป น เว็ บ ไซต ข นาดปานกลาง จากนั ้ น ตั ้ ง ค า ความละเอี ย ดของภาพ 72 พิกเซล/นิ้ว โดยเลือกที่หมวด Raster Effects จากนั้นเลือก Screen (72 ppi) 5.3.2 การตั้งคาความละเอียดของภาพ 150 พิกเซล/นิว้ สำหรับงานสิ่งพิมพที่ตองการ ความละเอียดคมชัดปานกลาง (Medium) ภาพที่นำไปพิมพลงบนกระดาษขนาดตาง ๆ ผาน อุปกรณเครื่องพิมพ เชน พิมพจดหมาย เอกสารตาง ๆ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 162

ภาพที่ 5.12 การตั้งคาความละเอียดของภาพ 150 พิกเซล/นิ้ว ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 5.12 เปนการสรางชิ้นงานใหม โดยเลือกประเภทงานพิมพ (Print) จากนั้น เลือก Letter ขนาด 612 x 792 pt. แลวตั้งคาความละเอียดของภาพ 150 พิกเซล/นิ้ว โดยเลือก ที่หมวด Raster Effects จากนั้นเลือก Medium (150 ppi) 5.3.3 การตั้งคาความละเอียดของภาพ 300 พิกเซล/นิ้ว สำหรับงานสิ่งพิมพที่ตองการ ความละเอียดคมชัดสูง (High) เชน ปกหนังสือ โปสเตอร สื่อสิ่งพิมพตาง ๆ เปนตน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

พื้นฐานงานกราฟก 163

ภาพที่ 5.13 การตั้งคาความละเอียดของภาพ 300 พิกเซล/นิ้ว ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 5.13 เปนการสรางชิ้นงานใหม โดยเลือกประเภทงานพิมพ (Print) จากนั้น เลือก A3 ขนาด 84,189 x 119,055 pt. แลวตั้งคาความละเอียดของภาพ 300 พิกเซล/นิ้ว โดย เลือกที่หมวด Raster Effects จากนั้นเลือก High (150 ppi) นอกจากการตั ้ ง ค า ความละเอี ย ดของภาพกราฟ ก แล ว การผสมสี ใ นงานกราฟ ก มี ความสำคัญ ไม ต างกัน เนื่องจากการสีเ ปน สิ่ง ที ่แ สดงออกถึง อารมณ แ ละความรู ส ึก ในงาน ออกแบบนั้นสีเปนหนึ่งในเรื่องที่มีความสำคัญตอการกระตุนอารมณของผูใชงานเปนอยางมาก และยัง สง ผลตอการรับรูตอแบรนด สีสามารถเพิ่มความสวยงามใหกับงานออกแบบ แตการ เลือกใชสีที่ผิดจะทำลายงานออกแบบ จากงานวิจัยสีมีผลตอการรับรูและการจดจำตอแบรนดมาก ถึง 80% หากออกแบบงานกราฟก และแสดงผลงานไดตรงตามสีที่ตั้ง คาไว จะทำใหง านนั้น สื่อสารไดตรงตามที่ตองการ นักออกแบบควรเขาใจใจการตั้ง คาโหมดสีใหเหมาะสมกับงานที่ ตองการออกแบบ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 164

5.4 โหมดสีในงานกราฟก โหมดสี คื อ รู ป แบบการผสมสี เ พื ่ อ นำไปใช ก ั บ งานประเภทต า ง ๆ โดยโหมดสี แต ล ะชนิ ด เหมาะกั บ งานที ่ แ ตกต า งกั น โหมดสี จ ะมี อ ยู  ห ลากรู ป แบบ โดยมี โ หมดสี หลักที่เกี่ยวของกับงานกราฟก และตองใชอยูเปนประจำมีอยูเพียง 3 ชนิด ดังนี้ 5.4.1 โหมดสีดำขาว (Grayscale) การแสดงผลภาพเปนการไลน้ำหนักสีจากดำ เทา ไปจนถึงสีขาว มักใชสีในโหมดนี้กับงานพิมพสีเดียว เพื่อประหยัดตนทุนการผลิต 5.4.2 โหมดสีสำหรับแสดงผลบนหนาจอ (RGB) เปนโหมดสีที่เกิดจากการผสมของ แมสีทางแสง 3 สี ประกอบไปดวยสีแดง สีเขียว และสีน้ำเงิน นำไปใชในการแสดงผลบน หนาจอ เหมาะสมกับงานบนอิน เทอรเน็ต เว็บไซต และมัลติมีเดียทุกชนิด สีในโหมดนี้จะมีความสด และคาอิ่มตัวสูง แตไมสามารถนำไปใชกับงานสิ่งพิมพได 5.4.3 โหมดสีสำหรับ งานสิ่งพิมพ (CMYK) โหมดสีที่ใหผลลัพธตรงกับสีธรรมชาติ มากที่สุด เพราะเกิดจากการผสมกันของแมสีทางวัตถุ หรือแมสีที่เปนหมึกพิมพจริงๆ ทั้ง 4 สี ได แ ก ฟ า (Cyan) บานเย็ น (Magenta) เหลื อ ง (Yellow) และดำ (Black) ผสมกั น เป น ภาพเหมาะกับงานสิ่งพิมพทุกประเภท

Grayscale Mode

RGB Mode

CMYK Mode

ภาพที่ 5.14 โหมดสี Grayscale Mode (ซาย), RGB Mode (กลาง), CMYK Mode (ขวา) ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 5.14 โหมดสีทั้งสามประเภท ไดแก โหมดสี Grayscale Mode (ซาย) ไดแก สีดำ เทา, ขาว ไลระดับ โหมดสี RGB Mode (กลาง) ไดแกสีแดง เขียว น้ำเงิน , และ โหมดสี CMYK Mode (ขวา) ไดแก สีฟา สีบานเย็น สีเหลือง และสีดำ การเลือกใชในงานออกแบบ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

พื้นฐานงานกราฟก 165

กราฟกขึ้นอยูกับจุดประสงคของการนำไปใชงาน เชน ตองการนำเสนอบนจอภาพ ควรเลือกใช โหมดสี RGB แตหากตองการแสดงผลทางสื่อสิ่งพิมพ ควรเลือกใช โหมดสี CMYK 5.5 ตัวอักษรในงานกราฟก องคประกอบที่สำคัญ ในงานกราฟกที่ขาดไมไดคือตัวอักษรนอกจากจะใชเพื่อสื่อ สาร และสื่อความหมายแลวยังชวยตกแตงชิ้นงานกราฟกใหมีลูกเลนลวดลาย และจุดสนใจไดอีกดวย หรือแมแตการใชตัวอักษรลวน ๆ มาสรางชิ้นงานกราฟกยังไดซึ่งความสวยงาม ความลงตัวในการ ใชงานตัวอักษรนั้นมีสำคัญ นั่นคือการเลือกใชรูปแบบตัวอักษรใหเหมาะกับงาน การใชสีและการ จัดวาง การเลือกใชรูปแบบตัวอักษรที่เปนองคประกอบหนึ่งที่สำคัญ ในการออกแบบกราฟก เพราะนอกจากจะใชสื่อความหมายแลวรูปแบบของตัวอักษรยังบงบอกถึงอารมณความรูสึกใน แบบตางๆรวมถึงจุดประสงคของงานเชน เปนขอความเพื่อเนนใหอานสะดุดตา เนนความสวยงาม และทันสมัย ทำใหเกิดการจดจำผลิตภัณฑสินคา

ภาพที่ 5.15 ตัวอักษรในงานกราฟก ที่มา : Pinterest (2021)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 166

จากภาพที่ 5.15 เปนภาพตัวอักษรในงานกราฟก จะเห็นวาหนึ่งตัวอักษรมีรายละเอียด หลายจุด ซึ่งแตละจุดจะมีความหมายที่แตกตาง ในการนำไปใชงาน นักออกแบบควรเลือกฟอนต ใหกับงาน เพื่อการสื่อความหมายใหไดตามวัตถุประสงค 5.5.1 รูปแบบตัวอักษรในงานกราฟก 5.5.1.1 แบบหัวตัด หรือเรียกวาเปนตัวอักษรแบบ Gothic หรือ San Serif เปน ตัวอักษรแบบเรียบตรง ไมมีลูกเลน เปนแบบตัวอักษรที่นิยมใชกันมากที่สุดใหความรูสึกกลาง ๆ ไมเปน ทางการหรืออิสระมากเกินไป อานงายและดูทันสมัย การใชง านสำหรับภาษาอังกฤษ สามารถใชไ ด ทั ้ง เปน สวนของหั วเรื ่อง และสวนเนื้อ หาที่ม ี ข อความจำนวนมาก แตสำหรั บ ภาษาไทยนิยมใชเปนเฉพาะหัวเรื่องมากกวาเนื้อหาที่จะทำใหอานยาก

ภาพที่ 5.16 ตัวอักษรแบบหัวตัด ที่มา : Google Fonts (2521) จากภาพที่ 5.16 เปนภาพตัวอักษรแบบหัวตัด หรือ San Serif จากเว็บไซต Google Fonts ซึ่งไดทำการแบงประเภทตัวอักษรไวเปนหมวดหมู และผูใชสามารถทดลองพิมพขอความ เพื่อดูรูปแบบตัวอักษรที่เปนภาษาไทย และภาษาอังกฤษ ผูใชสามารถเลือกประเภทตัวอัก ษรที่ ตองการ ตามชื่อตัวอักษรที่ปรากฏ เชน Prompt, Kanit, Sarabun เปนตน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

พื้นฐานงานกราฟก 167

ภาพที่ 5.17 ตัวอยางงานออกแบบที่ใชตัวอักษรแบบหัวตัด ที่มา : Airasia (2521) จากภาพที่ 5.17 เปนภาพตัวอยางงานออกแบบเว็บไซต airasia.com ที่ใชตัวอักษร แบบหัวตัด ดังขอความ “Thai AirAsia” ที่เปนขอความสวนหัวเรื่อง ลักษณะขอความกึ่ง ทางการ ทำใหอานงายและดูทันสมัย รวมทั้งขอความที่เปนรายละเอียดตาง ๆ ใชตัวอักษรแบบหัว ตัด เชนเดียวกัน 5.5.1.2 แบบดั้งเดิม หรือเรียกวาเปนตัวอักษรแบบ Serif แบบโรมันหรือแบบโบราณ ซึ่งมีจุดเดนคือที่ปลายเสนจะมีสวนขยายตอออกไป เรียกวามีหาง มีเทา ที่เรียกวา Serif เหมาะ กับการออกแบบที่เปนทางการ มีความยอนยุควินเทจ ตองการความนาเชื่อถือหรือความขลัง สำหรับภาษาไทยเปรียบไดเปนตัวอักษรที่มีหัวกลมที่คุนเคย และอานออกงายตัวอักษรแบบนี้จึง นำมาจัดวางเปนเนื้อหาที่ตองการใหอานไดยาว ๆ อยางราบรื่นกวาตัวอักษรแบบอื่น ๆ

ภาพที่ 5.18 ตัวอักษรแบบดั้งเดิม ที่มา : Google Fonts (2521) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 168

จากภาพที่ 5.18 เปนภาพตัวอักษรแบบดั้งเดิม หรือ Serif จากเว็บไซต Google Fonts ซึ่ง ไดทำการแบง ประเภทตัวอักษรไวเปน หมวดหมู และผูใชสามารถทดลองพิมพขอความเพื่อดู รูปแบบตัวอักษรที่เปนภาษาไทย และภาษาอังกฤษ ผูใชสามารถเลือกประเภทตัวอักษรที่ตองการ ตามชื่อตัวอักษรที่ปรากฏ เชน Taviraj, Pridi, Trirong เปนตน

ภาพที่ 5.19 ตัวอยางงานออกแบบที่ใชตัวอักษรแบบดั้งเดิม ที่มา : Pinterest (2021) จากภาพที่ 5.19 เปนภาพตัวอยางงานออกแบบนิตยสาร VOGUE ที่ใชตัวอักษรแบบ ดั้งเดิม โดยขอความสวนหัวเรื่องที่เนนขนาดใหญ และใชสีขาวทำงานออกแบบโดดเดน รวมทั้ง การใชตัวอักษรแบบดั้งเดิม ทำใหผลงานดูนาเชื่อถือมีความเปนทางการ 5.5.1.3 แบบลายมื อ หรื อ เรี ย กว า เป น ตั ว อั ก ษรแบบ Handwriting เป น แบบ ตัวเขียน หรือลายมือ เหมาะกับการใชเปนหัวเรื่องขอความตกแตงงานกราฟก เพื่อความสวยงาม เนนเสนสายที่เปนอิสระ ฟรีสไตลไมเปนทางการ ใหความรูสึกสนุกสนาน หรือนารัก แตตัวอักษร บางชุดสามารถทำใหหรูหรา มีราคา และออนชอยไดเชนกัน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

พื้นฐานงานกราฟก 169

ภาพที่ 5.20 ตัวอักษรแบบลายมือ ที่มา : Google Fonts (2521) จากภาพที ่ 5.20 เป น ภาพตั ว อั ก ษรแบบลายมื อ หรื อ Handwriting จากเว็ บ ไซต Google Fonts ซึ่งไดทำการแบงประเภทตัวอักษรไวเปนหมวดหมู และผูใชสามารถทดลองพิมพ ขอความเพื่อดูรูปแบบตัวอักษรที่เปนภาษาไทย และภาษาอังกฤษ ผูใชสามารถเลือกประเภท ตัวอักษรที่ตองการ ตามชื่อตัวอักษรที่ปรากฏ เชน Mali, Itim, Sriracha เปนตน

ภาพที่ 5.21 ตัวอยางงานออกแบบที่ใชตัวอักษรแบบลายมือ ที่มา : Pinterest (2021) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 170

จากภาพที่ 5.21 เปนภาพตัวอยางงานออกแบบที่ใชตัวอักษรแบบลายมือ โดยมีรูปแบบ ตัวอักษรที่นารัก เหมาะสำหรับนำไปใชงานออกแบบสื่อสำหรับกลุมเปาหมาย วัยเด็ก หรือ วัยรุน ที่ไ มเนน ความเปนทางการ งานออกแบบที่ตองการนำเสนอความนารัก สดใส ใหความรู สึ ก สนุกสนาน 5.5.1.4 แบบประดิษฐ หรือเรียกวาเปนตัวอักษรแบบ Display ที่ไดรับการออกแบบ เปนพิเศษที่เปนไปตามรูปแบบที่นักออกแบบตองการโดยเนนใหมีความโดดเดน สะดุดตาหรือ แปลกตา ซึ่งแตละแบบใหอารมณความรูสึก และการสื่อสารที่แตกตางกันอีกดวย เชน ใชตัวอักษร ลายกนก สำหรับงานที่ตองการความเปนไทย ตัวอักษรญี่ปุนสำหรับงานที่ตองการความน ารัก แบบญี่ปุน หรือ ตัวอักษรสำหรับงานออกแบบสื่อที่ใชโฆษณาภาพยนตร เพื่อจะสรางความโดด เดน แสดงความเปนอัตลักษณของตัวละคร ดังนั้นตัวอักษรประเภทนี้จะสะดุดตา แตอานยากกวา แบบดั้งเดิม จึงนิยมนำไปทำเปนหัวเรื่อง ไมนิยมนำมาเปนเนื้อหาที่มีประโยคยาว ๆ ตัวอักษร ประเภทนี้มีนักออกแบบอิสระไดสรางไวและเปดใหดาวนโหลดจำนวนมาก

ภาพที่ 5.22 ตัวอักษรแบบประดิษฐ ที่มา : Google Fonts (2521) จากภาพที่ 5.22 เปนภาพตัวอักษรแบบแบบประดิษฐ หรือ Display จากเว็บไซต Google Fonts ซึ่งไดทำการแบงประเภทตัวอักษรไวเปนหมวดหมู และผูใชสามารถทดลองพิมพขอความ เพื่อดูรูปแบบตัวอักษรที่เปนภาษาไทย และภาษาอังกฤษ ผูใชสามารถเลือกประเภทตัวอักษรที่

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

พื้นฐานงานกราฟก 171

ตองการ ตามชื่อตัวอักษรที่ปรากฏ เชน Chonburi, Srisakdi เปนตน นอกจากเว็บไซต Google Fonts ยังมีเว็บไซตอื่น ๆ อีกหลายเว็บไซตที่มีตัวอักษรใหดาวนโหลดมาใชงานไดฟรี

ภาพที่ 5.23 ตัวอยางงานออกแบบที่ใชตัวอักษรแบบประดิษฐ ที่มา : Pinterest (2021) จากภาพที่ 5.23 เปนภาพตัวอยางงานออกแบบโปสเตอรที่ใชตัวอักษรแบบประดิษฐ หรือ Display โดยมีรูปแบบการออกแบบตามแนวคิดของสื่อที่ตองการนำเสนอ เนนความโดดเดน แปลกตา ดัง ตัวอยางโปสเตอรโฆษณาของ Coca-Cala และ โปสเตอรภาพยนตรเรื่อง Beaty and the Beast ที่สรางอัตลักษณโดยการใชตัวอักษรที่แสดงออกถึงบุคลิกของสินคา และตัว ละคร 5.1.2 ลักษณะของตัวอักษร ลักษณะของตัวอักษรจะขึ้นอยูกับตัวอักษรที่เลือกใช ซึ่งโดยทั่วไปจะมีอยูทั้งหมดสี่ แบบเพื่อกำหนดรูปแบบตัวอักษร แตมีบางชุดที่มีนอยกวาหรือมากกวา โดยลักษณะของตัวอักษร แบบตาง ๆ จะใหความรูสึกแตกตางกันซึ่งโดยสวนใหญนิยมใชดังนี้ 5.1.2.1 Regular หรือ Normal คือตัวอักษรที่ปกติใชกับสวนที่เปนเนื้อหาหรือ ขอความสวนใหญ 5.1.2.2 Italic คือ ตัวอักษรแบบตัวเอียงนิยมใชกับขอความที่เปนคำพูดหรือการ อางอิง มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 172

5.1.2.3 Bold คือตัวอักษรแบบตัวหนาใชกับการเนนบางประโยคที่เปนใจความ สำคัญหรือเปนหัวขอ 5.1.2.4 Bold Italic คือตัวอักษรแบบตัวหนาพรอมกับเอียงไปดวย ใชกับสวนที่ ตองการเนนใหดูสะดุดตาเชนเดียวกับตัวหนา นอกจากลักษณะขางตนแลว นักออกแบบยังไดออกแบบลักษณะพิเศษเพิ่มเติม เพื่อใหผูใชมีทางเลือกในการนำไปใชมากขึ้นอีกหลายระดับ เชน 5.1.2.5 Thin/Light คือตัวอักษรบางเปนพิเศษ 5.1.2.6 SemiBold คือตัวอักษรหนาจากปกติเล็กนอย 5.1.2.7 Extra/Black คือตัวอักษรหนาพิเศษ 5.1.2.8 Extended คือตัวอักษรที่มีลักษณะกวางเปนพิเศษ 5.1.2.9 Narrow/Condensed คือ ตัวอักษรที่มีลักษณะแคเปนพิเศษ 5.1.2.10 Outline คือตัวอักษรที่มีลักษณะเปนกรอบเสนรอบนอก อยางไรก็ตาม สำหรับตัวอักษรที่สามารถโหลดมาใชฟรีนั้น อาจมีลักษณะตัวอักษรให เพียงไมกี่แบบ เชน มีเพียงตัวอักษรแบบปกติ (Regular) เทานั้น แตหากตองการทำใหเปนแบบ ตัวหนาก็ตองหาวิธีปรับเพิ่มเติม เชน ใสเสนขอบเพิ่มเติม หรือทำตัวอักษรซอนกันใหหนาขึ้น 5.1.3 ระยะหางของตัวอักษร ระยะหางของตัว อั กษร หรือที่เรียกกัน ว า ช องไฟ หรือ Kerning เปนระยะหางจาก ตัวอักษรหนึ่งกับอีกตัวอักษรหนึ่งที่อยูติดกัน โดยปกติชองไฟนี้จะถูกกำหนดโดยผูออกแบบฟอนต ตั้งแตแรกวาแตละตัวอักษรจะมีระยะหางเทาไหร โดยคาศูนยคือ คาปกติ คาลบคือ ปรับใหแคบ ลง และ บวกคือ ปรับใหหางขึ้น ตัวอยางการปรับดังภาพ

ภาพที่ 5.24 ระยะหางของตัวอักษร ที่มา : Catedracosga (2021)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

พื้นฐานงานกราฟก 173

จากภาพที่ 5.24 ระยะหางของตัวอักษร จากตัวอยางคำวา “Kerning”ซึ่งมีลักษณะของ ตัวอักษรที่มีขนาดแตกตางกัน การปรับชองไฟจึงไมเทากัน ขึ้นอยูกับความเหมาะสม และความ สวยงาม โดยไมจำเปนจะตองมีระยะหางเทากัน ใชวิธีการพิจารณาจากจุดสิ้นสุดของตัวอักษรไป ยังตัวอักษรตัวถัดไป เชน อักษร K ตัวพิมพใหญ และตัวอักษร e มีระยะหางเปนศูนย เนื่องจากมี ชองไฟของตัวอักษร K ที่มีสวนเวาเขาไป สวนตัวอักษรอื่น ๆ จะมีระยะหางตามรูปแบบของ ตัวอักษรที่อยูใกลกันตามลำดับ 5.6 บทสรุป ประเภทของภาพกราฟกมีสองประเภท คือประเภทภาพบิตแมพ และภาพเวกเตอร ซึ่ง ภาพแตละประเภทมีคุณสมบัติที่แตกตางกัน ภาพกราฟกแบบบิตแมพ เปนการสรางภาพกราฟก ดวยคอมพิวเตอร ที่เกิดจากการเรียงตัวของจุดสี่เหลี่ยมเล็ก ๆ ที่เรียกวา พิกเซล (Pixel) คุณภาพ ของภาพจะถูกลดลงหากทำการขยายภาพใหใหญขึ้น สวนภาพกราฟกแบบเวกเตอร (Vector) เกิดจากการประมวลผลทางคอมพิวเตอร ประเภทของไฟลภ าพกราฟ ก มี 7 ประเภท คือ 1) JPEG หรือ JPG 2) GIF 3) PNG 4) BMP 5) TIF หรือ TIFF 6) PSD และ 7) AI การกำหนดความละเอี ย ดของภาพ เพื ่ อ ความเหมาะสมกั บ การทำงานแต ล ะแบบ จึงมีการกำหนดคาความละเอียดภาพ ที่เหมาะสม ดังนี้ 1) การตั้งคาความละเอียดของภาพ 72 พิกเซล/นิ้ว สำหรับการแสดงงานกราฟกบนหนาจอคอมพิวเตอร (Screen) หนาจอโทรศัพท 2) การตั้งคาความละเอียดของภาพ 150 พิกเซล/นิ้ว สำหรับงานสิ่งพิมพที่ตองการความละเอียด คมชัดปานกลาง (Medium) ภาพที่นำไปพิมพลงบนกระดาษขนาดตาง ๆ ผานอุปกรณเครื่องพิมพ เช น พิ ม พ จ ดหมาย เอกสารต า ง ๆ 3) การตั ้ ง ค า ความละเอี ย ดของภาพ 300 พิ ก เซล/นิ้ ว สำหรับงานสิ่งพิมพที่ตองการความละเอียดคมชัดสูง (High) เชน ปกหนังสือ โปสเตอร สื่อสิ่งพิมพ ตาง ๆ เปนตน ตัวอักษรในงานกราฟกมีใหเลือกใชหลายรูปแบบไดแก แบบหัวตัด, แบบดั้งเดิม, แบบ ลายมือ, แบบประดิษฐ สวนลักษณะของตัวอักษรจะขึ้นอยูกับตัวอักษรที่เลือกใช ซึ่งโดยทั่วไปจะ มีเพื่อกำหนดรูปแบบตัวอักษรใหมีการเนนขอความ หรือประโยคที่ตองการใหสะดุดตา รวมทั้ง การกำหนดระยะหาง หรือชองไฟของตัวอักษรควรออกแบบและจัดวางใหเหมาะสม

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใช้งานโปรแกรมกราฟิ ก การเตรียมไฟล์ และการจัดพิ มพ์ การออกแบบกราฟกในปจจุบันมีโปรแกรมคอมพิวเตอรที่ชวยในออกแบบและพัฒนา สามารถสรางภาพ ตกแตงแกไข การจัดการเกี่ยวกับกราฟก และการใชภาพกราฟกในการ นำเสนอขอมูลตาง ๆ เพื่อใหสามารถสื่อความหมายใหชัดเจน และทำความเขาใจไดงายขึ้น ซึ่ง ในป จ จุ บ ั น มี ก ารใช โ ปรแกรมกราฟ ก กั บ งานหลากหลายด า น ไม ว  า จะเป น งานด า น การศึกษา งานดานธุรกิจ งานดานการออกแบบ งานดานบันเทิง หรืองานดานการแพทย เปน ตน 6.1 การใชงานโปรแกรม Adobe Photoshop โปรแกรม Adobe Photoshop เปนโปรแกรมในตระกูล Adobe ที่ใชสำหรับตกแตง ภาพถาย และภาพกราฟกไดอยางมีประสิทธิภาพ ไมวาจะเปนงานดานสิ่งพิมพ นิตยสาร และ งานดานมัลติมีเดีย อีกทั้งยังสามารถตกแตงภาพ (Retouching) และการสรางภาพ ซึ่งเปน โปรแกรมที่นิยมสูง สามารถใชโปรแกรม Photoshop ในการตกแตงภาพการใสเอฟเฟกต ตาง ๆ ใหกับภาพ และตัวหนังสือ การทำภาพขาวดำ การทำภาพถายเปนภาพเขียน การนำภาพมา รวมกัน การตกแตง ภาพตาง ๆ โปรแกรม Adobe Photoshop สามารถติดตั้ง ใชง านไดบน คอมพิ ว เตอร ท ั ้ ง ระบบปฏิ บ ั ต ิ ก ารไมโครซอฟท ว ิ น โดวส (Microsoft Windows) และ ระบบปฏิบัติการแมคอินทอช (Macintosh)

ภาพที่ 6.1 สัญลักษณโปรแกรม Adobe Photoshop ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 175 Menu Bar Option Bar Panel

Toolbox

Artwork

ภาพที่ 6.2 หนาจอโปรแกรม Adobe Photoshop ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 6.2 เปนภาพหนาจอโปรแกรม Adobe Photoshop เมื่อเปดโปรแกรมขึ้น ใช งานจะปรากฏสวนประกอบของเครื่องมือที่จำเปนในการใชงานไดแก แถบเมนูคำสั่ง (Menu bar) แถบตัวเลือก (Option Bar) กลองเครื่องมือ (Tool Panel) พาเนล (Panel) และพื้นที่ การทำงาน (Artwork)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 176

6.1.1 เครื่องมือและคุณสมบัติของโปรแกรม Adobe Photoshop 6.1.1.1 แถบเมนูคำสั่ง (Menu bar) ประกอบดวยกลุมคำสั่ง ตาง ๆ ที่ใชใน การจัดการไฟล การทำงานกับรูปภาพ และใชการปรับแตงการทำงานของโปรแกรม โดยแบง เมนูตามลักษณะงาน นอกจากนี้ยังมีเมนูยอยออกมาจากเมนูหลัก โดยสังเกตจากการคลิกไปที่ เมนู จะปรากฏเมนูยอยแสดงเพิ่มขึ้นมา 6.1.1.2 แถบตัวเลือก (Option Bar) เปนสวนที่ใชปรับแตงคาการทำงานของ เครื่องมือตาง ๆ โดยรายละเอียดในแถบตัวเลือก จะเปลี่ยนไปตามเครื่องมือที่เลือกจากกลอง เครื่องมือในขณะนั้น เชน เมื่อเราเลือกเครื่องมือพูกัน (Brush) บนแถบตัวเลือก จะปรากฏ ตัวเลือกที่ใชในการกำหนดขนาด และลักษณะหัวแปรง โหมดในการระบาย ความโปรงใสของสี และอัตราการไหลของสี เปนตน 6.1.1.3 พาเนล (Panel) เปนวินโดวยอยที่ใชเลือกรายละเอียด หรือคำสั่งควบคุม การทำงานต าง ๆ ของโปรแกรมใน Photoshop มีพาเนลอยู  เปน จำนวนมาก เชน พาเนล Color ใชสำหรับการเลือกสี พาเนลเลเยอร (Layer) ใชสำหรับการจัดการเลเยอร และพาเนล อินโฟ (Info) ใชแสดงคาสีตรงตำแหนงที่ชี้เมาส รวมถึงขนาด และตำแหนงของพื้นที่ที่เลือกไว 6.1.1.4 ทู ล พาเนล (Tool Panel) หรื อ กล อ งเครื ่ อ งมื อ จะประกอบด ว ย เครื่องมือตาง ๆ ที่ใชในการวาด ตกแตง และแกไขภาพ เครื่องมือเหลานี้มีจำนวนมาก ดังนั้นจึง มีการรวมเครื่องมือที่ทำหนาที่คลาย ๆ กันไวในปุมเดียวกัน โดยจะมีลักษณะรูปสามเหลี่ยมอยู บริเวณมุมดานลาง เพื่อบอกใหรูวาในปุมนี้ยังมีเครื่องมืออื่นอยูดวย ทำการแบงกลุมเครื่องมือได ดังภาพตอไปนี้

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 177

ภาพที่ 6.3 เครื่องมือโปรแกรม Adobe Photoshop ที่มา : Photoshop935 (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 178

6.1.2 การทำงานของเครื่องมือโปรแกรม Adobe Photoshop มีคุณสมบัติดังนี้ Move ใชสำหรับเลือกพื้นที่บนภาพเปนรูปสี่เหลี่ยม วงกลม วงรี หรือเลือกเปนแถวคอลัมน Marquee ใชสำหรับยายพื้นที่ที่เลือกไวของภาพ หรือยายภาพในเลเยอรหรือยายเสนไกด Lasso ใชเลือกพื้นที่บนภาพเปนแนวเขตแบบอิสระ Magic Wand ใชเลือกพื้นที่ดวยวิธีระบายบนภาพ หรือเลือกจากสีที่ใกลเคียงกัน Crop ใชตัดขอบภาพ Slice ใชตัดแบงภาพเพื่อบันทึกไฟลภาพยอย ๆ ที่เรียกวาสไลซ (Slice) สำหรับนำไปสรางเว็บเพจ Eyedropper ใชเลือกสี หรือดูดสีจากสีตาง ๆ บนภาพ เพื่อใหไดโทนสีที่ตรงตามตองการ Healing Brush ใชตกแตงลบรอยตำหนิในภาพ Brush ใชระบายลงบนภาพ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 179

Clone Stamp ใชทำสำเนาภาพ โดยกอปปภาพจากบริเวณอื่นมาระบาย หรือระบายดวยลวดลาย History Brush ใชระบายภาพดวยภาพของขั้นตอนเดิมที่ผานมา หรือภาพของสถานะ เดิมที่บันทึกไว Eraser ใชลบภาพบางสวนที่ไมตองการ Gradient ใชเติมสีแบบไลระดับโทนสีหรือความทึบ Blur ใชระบายภาพใหเบลอ Bern ใชระบายเพื่อใหภาพมืดลง Dodge ใชระบายเพื่อใหภาพสวางขึ้น pen ใชวาดเสนพาธ (Path) Horizontal Type ใชพิมพตัวอักษรหรือขอความลงบนภาพ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 180

Path Selection ใชเลือกและปรับแตงรูปทรงของเสนพาธ Rectangle ใชวาดรูปทรงเรขาคณิตหรือรูปทรงสำเร็จรูป Hand ใชเลื่อนดูสวนตาง ๆ ของภาพ Zoom ใชยอหรือขยายมุมมองภาพ Set Foreground Color, Set Background Color ใชสำหรับกำหนดสี – Foreground Color และ Background Color ทำหนาที่เปดแสดงหนากระดาษ แบบ Full screen นอกจากเครื่องมือเหลานี้ที่แสดงคุณสมบัติ และหนาที่การใชงานของโปรแกรม Adobe Photoshop เพื่อเปนการฝกทักษะการทำงานออกแบบกราฟก ผูเขียนแนะนำใหศึกษาเพิ่มเติม “บทที่ 7 การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop” ซึ่งเปนการแนะนำขั้นตอน วิ ธ ี ก ารออกแบบสื ่ อ ประเภทต า ง ๆ อย า งละเอี ย ด ด ว ยโปรแกรม Adobe Photoshop ไดแก การออกแบบโปสเตอรสินคา การออกแบบปกเฟซบุกแฟนเพจ การออกแบบโฮมเพจ และ การออกแบบภาพเคลื่อนไหวแอนิเมชัน จะแสดงขั้นตอนวิธีการทำงานอยางละเอียด สามารถศึกษาการใชเครื่องมือตาง ๆ ควบคูกับเทคนิคการสรางสรรคสื่อในรูปแบบภาพบิตแมป และนำเสนอผานหนาจอคอมพิวเตอร หนาจอโทรศัพทมือถือ หนาจอแอลซีดี และผานทาง เว็บไซต สื่อสังคมออนไลน เปนตน มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 181

6.2 การใชงานโปรแกรม Adobe Illustrator โปรแกรม Adobe Illustrator เปนอีกหนึ่งโปรแกรมจากคาย Adobe สำหรับหนาที่ หลักของโปรแกรม Adobe Illustrator คือโปรแกรมที่ใชในการวาดภาพ โดยจะสรางภาพที่มี ลักษณะเปนลายเสน หรือที่เรียกวากราฟกเวกเตอร (Vector Graphic) นับไดวาเปนโปรแกรม ระดับมืออาชีพที่ใชกันเปนมาตรฐานในการออกแบบระดับสากล สามารถทำงานออกแบบ ตาง ๆ ไดหลากหลาย ไมวาจะเปนสิ่งพิมพ บรรจุภัณฑ เว็บไซต และ ภาพเคลื่อนไหว ตลอดจน การสรางภาพเพื่อใชเปนภาพประกอบทำงานอื่น ๆ เชน การตูน ภาพประกอบหนังสือ ซึ่งจะให ความคมชัดมากกวาการวาดรูปธรรมดา โปรแกรม Adobe Illustrator เป น โปรแกรมที่ เ หมาะกั บ งานลั ก ษณะที ่ต  องการ ออกแบบทุกประเภท เชน นามบัตร โปรชัวร การดเชิญ โปสเตอร เปนตน มีเครื่องมือการวาด ภาพและเครื่องมือจัดการสรางสีสันพรอมกับฟลเตอรและเอฟเฟกตครบถวน สามารถขยาย หรือยอภาพไดโดยที่ภาพยังคงความคมชัด และไฟลมีขนาดเล็กชวยใหสามารถสรางสรรคงาน ศิลปะที่ มี ความละเอี ยดสูง ได อยางมี ประสิ ทธิภ าพ ซึ่ง โปรแกรม Adobe Illustrator เปน โปรแกรมสรางงานกราฟก ตกแตงรูปภาพและผลิตสื่อสิ่งพิมพที่ไดรับความนิยม

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 182 Menu Bar Option Bar Toolbars Panel

Artboard

ภาพที่ 6.4 เครื่องมือการใชงานโปรแกรม Adobe Illustrator ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 6.4 เปนภาพหนาจอโปรแกรม Adobe Illustrator เมื่อเปดโปรแกรมขึ้นใช งานจะปรากฏสวนประกอบของเครื่องมือที่จำเปนในการใชงานไดแก แถบเมนูคำสั่ง (Menu bar), แถบตัวเลือก (Option Bar), กลองเครื่องมือ (Tool Panel), พาเนล (Panel) และพื้นที่ กระดานทำงาน (Artboard) 6.2.1 เครื่องมือและคุณสมบัติของโปรแกรม Adobe Illustrator 6.2.1.1 แถบเมนู ค ำสั ่ ง (Menu bar) เป น เมนู ค ำสั ่ ง หลั ก ของโปรแกรม Illustrator แบงออกเปนหมวดหมูตาง ๆ แถบตัวเลือก (Option Bar) เปนแถบตัวเลือกสำหรับ กำหนดค า ต า งๆ ของวั ต ถุ เพื่ออำนวยความสะดวกแกผูใชใ หส ามารถกำหนดค าสี ขนาด ตำแหนง และคุณสมบัติตางๆ ของวัตถุที่เลือกไดงายขึ้น 6.2.1.2 กลองเครื่องมือ (Toolbox) เปนสวนที่เก็บรวบรวมเครื่องมือที่ใชในการ สราง การปรับแตง และการแกไขภาพ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 183

6.2.1.3 พี้นที่การทำงาน (Art board) เปนบริเวณที่ใ ชว างวั ตถุเพื่อ สร า ง ชิ้นงาน สวนพื้นที่นอกเหนือจากนั้น (Scratch area) เปนบริเวณที่วางวัตถุ แตไมตองการให แสดงในชิ้นงาน สามารถใชพื้นที่สวนนี้ในการวางวัตถุตาง ๆ ได 6.2.1.4 พาเนล (Panel) ใช เ พื ่ อ พั ก วั ต ถุ หรื อ เผื ่ อ ไว ใ ช ใ นภายหลั ง พาเนล (Panel) เปนหนาตางย อยที่ รวบรวมคุ ณสมบั ติ การทำงานของเครื่ องมื อต างๆ ใหเราเลื อ ก ปรับแตงการใชงานไดงาย ๆ ไมตองเปดหาแถบคำสั่ง ซึ่งพาเนลจะถูกจัดเก็บไวในกรอบจัดเก็บ พาเนลดานขวาของหนาจอ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 184

6.2.2 การทำงานของเครื่องมือโปรแกรม Adobe Illustrator มีคุณสมบัติดังนี้ Selection (ลูกศรสีดำ) ใชเลือกวัตถุทั้งชิ้น Direct-selection (ลูกศรขาว) ใชแกไขโครงสราง ใชเลือกเฉพาะจุด anchor Path Magic wand ใชเลือกวัตถุที่มีสีเดียวกัน Lasso ใชเลือกเฉพาะจุด anchor ที่ตองการโดยการคลิกเมาสลาก Pen สรางเสนพาธ path Curvarture สรางเสนพาธ path แบบโคง Type สำหรับการพิมพตัวอักษร หรือขอความลงบนภาพ Line segment สำหรับวาดเสนตรง Rectangle สรางรูปทรงสี่เหลี่ยม Painbrush แปรงใชวาดเสนพาธ path แบบอิสระ Pencil คลายกับ Painbrush แตมีเครื่องมือยอยใหเรียกใชในการแกไขเสน Eraser ใชตดั ลบชิ้นงาน ทั้งพื้น และเสน Rotate ใชหมุนวัตถุ กดคีย Alt เพื่อกำหนดองศา Scale ยอ หรือขยายวัตถุ Width ใชเพิ่ม หรือลดขนาดเสนพาธ path ของวัตถุ Puppet ชวยในการดัดรูป บิดรูปจากโครงสรางของภาพ Shape Builder รวม หรือตัดสวนของรูปภาพตั้งแต 2 รูปขึ้นไป Perspective Grid สรางตารางมุมมองในลักษณะ 3 มิติ Mesh ใชในการใสสีใหรูปรางอยางละเอียดโดยใชตาขายเปนจุดอางในการลงสี Gradient ใชลงสีแบบไลระดับสี Eyedropper ใชดูดสี ใช copy สีของภาพ Blend ใชไลระดับการเปลีย่ นรูปราง และสี ใหสีกลมกลืน ควบคุมได 3 ระดับ Symbol Sprayer ใชทำงานเกี่ยวกับ Symbol ใชลักษณะคลายการพมสเปรย Column Graph ใชสรางแผนภูมิ หรือกราฟแทงแบบตาง ๆ Artboard ใชกำหนดขนาด และจัดการคุณสมบัติของพื้นทีข่ องชิ้นงาน Slice ใชตัดแบงชิ้นงานออกเปนสวนๆ เพื่อไปใชงานในการออกแบบเว็บไซต Hand เลื่อนดูบริเวณพื้นที่การทำงาน Zoom ใชยอ และขยายที่การทำงาน Switch Color ใชสลับสีพื้น และสีเสน ใชกำหนดสีพื้น Fill Color และสีเสน Stroke Color การแสดงผลของหนาจอ Illustrator

ภาพที่ 6.5 เครื่องมือโปรแกรม Adobe Illustrator ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 185

จากภาพที่ 6.5 เปนภาพกลองเครื่องมือหลักในโปรแกรม Adobe Illustrator ซึ่งมี การทำงานโดยแบงออกเปนหมวดหมู เมื่อผูใชงานตองการเลือกใช สามารถใชเมาสค ลิ กที่ เครื่องมือ และจะปรากฏชุดเครื่องมือยอยที่อยูในหมวดนั้น ซึ่งเปนชุดเครื่องมือที่มีการทำงาน สัมพันธกัน 6.2.2 การทำงานของเครื่องมือโปรแกรม Adobe Illustrator โดยแบงตามกลุมคำสั่ง ดังนี้ กลุมคำสั่งการเลือกวัตถุ Selection (ลูกศรสีดำ) ใชเลือกวัตถุทั้งชิ้น Direct-selection (ลูกศรขาว) ใชแกไขโครงสราง ใชเลือกเฉพาะจุด anchor Path Magic wand ใชเลือกวัตถุที่มีสีเดียวกัน Lasso ใชเลือกเฉพาะจุด anchor ที่ตองการโดยการคลิกเมาสลาก

กลุมคำสั่งการวาดภาพและใสตัวอักษร

Pen สรางเสนพาธ path Curvarture สรางเสนพาธ path แบบโคง Type สำหรับการพิมพตัวอักษร หรือขอความลงบนภาพ Line segment สำหรับวาดเสนตรง Rectangle สรางรูปทรงสี่เหลี่ยม Paint brush แปรงใชวาดเสนพาธ path แบบอิสระ Pencil คลายกับ Paint brush แตมีเครื่องมือยอยใหเรียกใชในการแกไขเสน Eraser ใชตัดลบชิ้นงาน ทั้งพื้น และเสน

กลุมคำสั่งวัตถุพิเศษ Rotate ใชหมุนวัตถุ กดคีย Alt เพื่อกำหนดองศา Scale ยอ หรือขยายวัตถุ Width ใชเพิ่ม หรือลดขนาดเสนพาธ path ของวัตถุ Puppet ชวยในการดัดรูป บิดรูปจากโครงสรางของภาพ Shape Builder รวม หรือตัดสวนของรูปภาพตั้งแต 2 รูปขึ้นไป Perspective Grid สรางตารางมุมมองในลักษณะ 3 มิติ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 186

กลุมคำสั่งการระบายสีและตกแตงภาพ

Mesh ใชในการไลสีใหรูปรางอยางละเอียด โดยใชตาขายเปนจุดอางในการลงสี Gradient ใชลงสีแบบไลระดับสี Eyedropper ใชดูดสี ใชคัดลอก (Copy) สีของภาพ Blend ใชไลระดับการเปลี่ยนรูปราง และสี ใหสีกลมกลืน ควบคุมได 3 ระดับ

กลุมคำสั่งวัตถุพิเศษ Symbol Sprayer ใชทำงานเกี่ยวกับ Symbol ในลักษณะคลายการพนสเปรย Column Graph ใชสรางแผนภูมิ หรือกราฟแทงแบบตาง ๆ

กลุมคำสั่งการมองชิ้นงาน ในรูปแบบตาง ๆ

Artboard ใชกำหนดขนาด และจัดการคุณสมบัติของพื้นที่ของชิ้นงาน Slice ใชตัดแบงชิ้นงานออกเปนสวนๆ เพื่อไปใชงานในการออกแบบเว็บไซต Hand เลื่อนดูบริเวณพื้นที่การทำงาน Zoom ใชยอ และขยายที่การทำงาน

กลุมคำสั่งการเลือกสี และเสนขอบของชิ้นงาน Switch Color ใชสลับสีพนื้ และสีเสน ใชกำหนดสีพื้น Fill Color และสีเสน Stroke Color

กลุมคำสั่งเพิ่มเติมการวาด และการแสดงผลหนาจอ การแสดงผลของหนาจอ Illustrator

นอกจากเครื่องมือเหลานี้ที่แสดงคุณสมบัติ และหนาที่การใชงานของโปรแกรม Adobe Illustrator เพื่อเปนการทักษะฝกทักษะในทำงานออกแบบกราฟก ผูเขียนแนะนำใหศึกษา เพิ่มเติม “บทที่ 8 การฝกปฏิบัตกิ ารใชโปรแกรม Adobe Illustrator” ซึ่งเปนการแนะนำ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 187

ขั้นตอนวิธีการออกแบบสื่อประเภท ตาง ๆ อยางละเอียด ดวยโปรแกรม Adobe Illustrator ไดแก การออกแบบโลโก การออกแบบนามบัตร การออกแบบฉลากสินคา และการออกแบบ โปสเตอรสินคา ซึ่งจะแสดงขั้นตอนวิธีการทำงานอยางละเอียด สามารถศึกษาการใชเครื่องมือ ตาง ๆ ควบคูไปกับเทคนิคการสรางสรรคสื่อในรูปแบบภาพเวกเตอร และสามารถนำไปจัดพิมพ เพื่อใชง านบนสื่อที่ตองการนำเสนอ เชน ติดปายประกาศในหางสรรพสินคา จัดพิมพเพื่อ นำเสนอ และพิ ม พ ต ิ ด ลงบนผลิ ต ภั ณ ฑ เนื ่ อ งจากเป น ภาพแบบเวกเตอร สามารถนำไป ประยุกตใชในสื่อประเภทตาง ๆ เพื่อนำเสนอผานหนาจอคอมพิวเตอร หนาจอโทรศัพทมือถือ หนาจอแอลซีดี และผานทางเว็บไซต สื่อสังคมออนไลน ไดอีกดวย 6.3 การจัดเตรียมไฟลในการจัดพิมพ เมื่อออกแบบกราฟกเสร็จเรียบรอยแลว ขั้นตอนตอไป คือการจัดเตรียมไฟลเพื่อ นำไปใชง าน คือการจัดพิมพ หรือการนำเสนอผานอุป กรณต าง ๆ และขั้นตอนการพิ ม พ ถื อ ว า เป น ขั ้ น ตอนสุด ท า ยของงานออกแบบ แต เ ป น ขั ้ น ตอนที ่นั ก ออกแบบหนา ใหมอาจ ละเลยความใสใ จ ทั้ง ที่เปน ขั้น ตอนที่ แ สดงให เ ห็น ถึง การออกแบบทั ้ง หมด ซึ่ง ตองอาศั ย การพิ จ ารณา ตั ด สิ น ใจ รวมถึ ง การวางแผนการพิ ม พ อ ย า งละเอี ย ด หากการพิ ม พ ไ ด ถู ก พิ จ ารณาอย า งรอบคอบ ทั ้ ง ในเรื ่ อ งของสี ชนิ ด กระดาษ และขั ้ น ตอนการดำเนินการ จะชวยเสริมประสบการณ ระหวางนักออกแบบและผูจัดพิมพ การฝกเทคนิค ที่เกี่ยวของกับ การพิมพเปนหัวใจ สำคัญ ในการกำหนดอารมณ และความรูสึกของผลงาน ที่กำลัง จะถูก สรางขึ้น การวางแผนในการพิมพ เชนการใสสีพิเศษ การจัดการวัตถุดิบ รวมถึงการทำงานที่ มีความรูความสามารถในการพิม พ ชวยทำใหง านลดข อผิดพลาด และทำใหง านมี ค วาม ละเอียดมากยิ่งขึ้น การเตรียมไฟลสำหรับอุตสาหกรรมงานพิมพนั้น จะมีความแตกตางจากการออกแบบ ไฟลเพียงเพื่อใชแสดงผลในคอมพิวเตอร เนื่องจากมีปจจัยที่เกี่ยวกับการผลิตที่เขามาเกี่ยวของ หากตองการเตรียมไฟลเพื่อใชพิมพกับโรงพิมพ จึงควรศึกษารายละเอียด เพื่อใหสามารถเขาใจ จุดเดน หรือขอจำกัดของระบบพิมพ และเตรียมไฟลไดอยางถูกตอง ไดงานพิมพที่ตรงตาม ความตองการ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 188

6.3.1 การเตรียมไฟลงานสำหรับสิ่งพิมพควรคำนึงถึงปจจัย ดังตอไปนี้ 6.3.1.1 โหมดสีและการกำหนดคาสี ไฟลงานจะตองอยูในโหมดสี CMYK และแนะนำใหใชโปรไฟลสี Coated FOGRA39 ซึ่งเปนโปรไฟลมาตรฐานสำหรับระบบพิมพดิจิทัล ทั้งนี้เทคโนโลยีระบบพิมพดิจิทัลออฟเซ็ตใน ปจจุบัน ยังตองอาศัยการพิมพชิ้นงานจริงออกมาเพื่อทำการพรูฟสี ไมสามารเทียบสีจากที่เห็น บนหนาจอที่เ ห็น ได เนื่องจากสีที ่เ ห็น ในหนา จอ อาจมีความแตกตางกับ ชิ ้นงานจริ ง มาก พอสมควร เนื่องจากปจจัยในทางเทคนิคจำนวนมาก สิ่งที่นักออกแบบไฟลงานสำหรับสิ่งพิมพ ในระบบดิจิทัลควรคำนึงถึงปจจัยตาง ๆ ดังตอไปนี้ 1) การกำหนดคาสี ในการกำหนดคาสีของไฟลง านนั้น ใหใชการกำหนดคาสีเ ปน ตัวเลขโดยตรง เชน หากตองการใชสีเหลืองสดที่สุด ใหกำหนดคาสีเปน C-0 M-0 Y-100 K-0 โดยตรงลงใน Color Picker ของโปรแกรม จะทำใหชิ้นงานที่มีสีเหลืองที่สดที่สุด ดังตัวอยาง

ภาพที่ 6.6 กำหนดคาสีโดยตรงโดยใชสีเหลืองบริสุทธิ์ 100% ที่มา : Snowwhite (2564) จากภาพที่ 6.6 งานที่ไดจากการกำหนดคาสีเปนตัวเลขโดยตรง จะไดสีเหลืองสด ที่สุด เนื่องจากการพิมพในระบบดิจิทัลออฟเซ็ตนั้น คาสี CMYK ที่กำหนดในไฟลจะมีผ ล โดยตรงกับปริมาณหมึกที่ใช แตไมควรเลือกสีจากการคาดคะเนทางสายตา เพราะจะทำใหไดสี ที่ผิดเพี้ยนไป ทำใหการพิมพไมตรงกับสีที่ตองการ 6.3.1.2 ระยะหางจากขอบชิ้นงาน (Margin) และระยะตัดตก (Bleed) ในระบบงานพิมพขนาดใหญนั้นผลงานจะถูกเรียงลงบนกระดาษแผนใหญ แลวนำไป เขาเครื่องตัดกระดาษ และในการตัดกระดาษนั้น จะเกิดความคลาดเคลื่อนในการตัดไดไมเกิน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 189

3 มิลลิเมตร ซึ่งความคลาดเคลื่อนในการตัดกระดาษ จะมีผลตอการเตรียมผลงานใหเหมาะสม ดังตอไปนี้ 1) ระยะหางจากขอบชิ้นงาน (Margin) การออกแบบควรวางตัวอักษร หรือองคประกอบสำคัญอื่นๆ ในผลงาน เชน ภาพประกอบ โลโก ตราสัญลักษณ ใหหางจากขอบชิ้นงานไมนอยกวา 3 มม. เนื่องจากในกรณีที่เครื่องตัด กระดาษตัดชิ้นงานเขามา องคประกอบที่สำคัญเหลานี้จะไมถูกตัดขาด

ภาพที่ 6.7 ระยะหางจากขอบชิ้นงาน (Margin) ที่มา : Snowwhite (2564) จากภาพที่ 6.7 เปนภาพการตั้งระยะหางจากขอบชิ้นงาน (Margin) จะเห็นไดจาก เสนประสีเขียว เปนการระยะหางจากขอบชิ้นงาน (Margin) เมื่อทำการพิมพและตัดงานจะทำ ใหไมกินพื้นที่ของเนื้องานที่ออกแบบไว ดังภาพดานขวามือ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 190

2) ระยะตัดตก (Bleed) ผลงานที่มีพื้นหลังเปนพื้นสี จำเปนจะตองทำสีพื้นหลัง เกินออกไปจากขอบชิ้นงานอีก 3 มม. เพราะในกรณีที่เครื่องตัดกระดาษตัดเกิน ชิ้นงานออกไป หากมีการเทสีพื้นรอไว ชิ้นงานจะไมมีสีขาวของเนื้อกระดาษแทรกเขามา ทำใหงานออกมา เรียบรอย ไมมีพื้นสีที่แตกตาง

ภาพที่ 6.8 การตั้งคาระยะตัดตก (Bleed) ที่มา : Snowwhite (2564) จากภาพที่ 6.8 การตั้งคาระยะตัดตก (Bleed) จากตัวอยางผลงานมีพื้นหลัง เปนสีสม จะตองทำสีพื้นหลังสีสมเกินพื้นที่ออกแบบงานเลยออกไปจากขอบชิ้นงานอีก 3 มม. จะเห็นไดจากเสนประสีแดง เมื่อทำการพิมพและตัดงาน จะไดเผื่อพื้นที่ตัดตกออกไปและทำให ไดพื้นหลังสีเดียวกัน 6.3.1.3 ความละเอียดของไฟล ขอมูลกราฟกในระบบคอมพิวเตอรนั้น อาจใชวิธีแบงประเภทเปนขอมูลแบบบิตแมป (Bitmap) หรือขอมูลแบบเวกเตอร (Vector) โดยความแตกตางของขอมูลกราฟกสองแบบนี้คือ กราฟกแบบบิตแมป จะประกอบขึ้นจากหนวยของภาพที่มีขนาดเล็กประกอบขึ้นมาเปนภาพ ที่ เรียกวา พิกเซล (Pixels) สวนขอมูลแบบเวกเตอร จะเปนชุดคำสั่งอยูเบื้องหลัง เชนคำสั่งให วาดวงกลมพื้นหลังสีแดงเปนตน การขยายภาพแบบบิตแมปจะทำใหภาพแตก และไมคมชัด สวนกราฟกแบบเวกเตอรนั้นจะคมชัดหนึ่งรอยเปอรเซ็นต ไมวาจะยอหรือขยายขนาดใหใหญ จะยังคมความคมชัดเชนเดิม มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 191

1) กราฟกแบบบิตแมป (Bitmap Images) การออกแบบงานกราฟกสวนใหญจะพบขอมูลแบบบิตแมปทั้งสิ้น เชน ไฟลที่ไดจากกลอง ถายรูป ไฟลกราฟกที่ใชตกแตงเว็บไซต หรือไฟลนามสกุล JPG, PNG, BMP, TIFF ลวนเปนไฟล ชนิดบิตแมปทั้งสิ้น เมื่อนำไฟลชนิดนี้มาใชในการพิมพ ไฟลจะตองมีความละเอียดไมนอยกวา 300 PPI หากไฟลมีความละเอียดไมเพียงพอ จะมีผลโดยตรงกับความคมชัดของงานพิมพที่ได

ภาพที่ 6.9 ตัวอยางไฟลแบบบิตแมปความละเอียด 72 PPI (ภาพซาย) และความละเอียด 300 PPI (ภาพขวา) ที่มา : Snowwhite (2564) จากภาพที่ 6.9 เปนภาพตัวอยางไฟลแบบบิตแมปที่กำหนดคาความละเอียด 72 PPI (ภาพซาย) เมื่อตองการนำมาใชพิมพจะไมคมชัด แตหากตองการพิมพจะตองกำหนดคาความ ละเอียด 300 PPI (ภาพขวา) ขึ้นไป จะทำใหภาพมีความคมชัด 2) กราฟกแบบเวกเตอร (Vector Images) หากตองการสรางไฟลกราฟกแบบเวกเตอร จำเปนจะตองใชโปรแกรม และเครื่องมือ เฉพาะ เชน โปรแกรม Adobe Illustrator ขอควรระวังเมื่อมีการนำไฟลภาพแบบบิ ตแมป เชนไฟล JPG, PNG, BMP, TIFF นำมาประกอบในงาน ใหตรวจสอบวาไฟลแบบบิตแมปนั้น มี ความละเอียดไมนอยกวา 300 PPI วิธีการตรวจสอบในโปรแกรม Adobe Illustrator วาไฟล ชนิดบิตแมปที่น ำมาใช ในงานว ามี ความละเอียดเพี ยงพอหรื อไม ใหไ ปที่เมนู Windows> Links โปรแกรมจะเปดพาเลท Links ขึ้นมาพรอมรายชื่อไฟลบิพแมปที่มีอยูในงานทั้งหมด ให ตรวจสอบใหครบทุกไฟลวาไฟลแบบบิตแมปเหลานี้ มีคา PPI ไมต่ำกวา 300 pixels per inch

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 192

ภาพที่ 6.10 การตรวจสอบวาไฟลแบบบิตแมปมีความละเอียดไมนอยกวา 300 PPI ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 6.10 เปนภาพตัวอยางไฟลแบบบิตแมปความละเอียด PPI ไมต่ำกวา 300 pixels per inch จากการตรวจสอบโดยไปที่เมนู Window>Links จากนั้นตรวจสอบภาพที่ นำมาใชงาน หากตองการพิมพใหมีความคมชัดจะตองกำหนดคา PPI ไมต่ำกวา 300 pixels per inch 6.3.1.4 ฟอนต ฟอนตตาง ๆ ที่ใชในผลงานจะแสดงผลถูก ต องเมื ่อเปดไฟลในคอมพิ วเตอร ท ี ่ ใ ช ออกแบบ แตเมื่อนำไปเปดในคอมพิวเตอรเครื่องอื่น ๆ ถาหากคอมพิวเตอรเครื่องนั้นไมมีฟอนต แบบเดี ย วกัน จะทำให ฟ อนตแ สดงผลผิ ดแปลกออกไปจากเดิม เพราะฉะนั้ น เมื่ อทำการ ออกแบบชิ้นงาน รวมถึงตรวจพรูฟการสะกดคำตาง ๆ ในผลงานอยางถูกตองแลว กอนจะสง ไฟลงานเขาสูกระบวนการพิมพ จำเปนจะตองทำการแปลงฟอนตใหอยูในรูปแบบของเวกเตอร (Vector) เพื่อใหไฟลแสดงผลขอความไดถูกตองในคอมพิวเตอรทุกเครื่องแมจะไมมีฟอนตแบบ เดียวกันติดตั้งไว

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 193

1) การแปลงฟอนตเปนเวกเตอร ในโปรแกรม Adobe Illustrator วิธีการแปลงฟอนตเปนเวกเตอร ในโปรแกรม Adobe Illustrator ทำไดโดยเลือกตัวอักษร ขอความทั้งหมดในผลงานแลวทำการแปลงใหเปนเวกเตอร เพื่อใหขอความมีความคมชัด เมื่อ นำไปใชงานไมวาจะมีขนาดเล็กหรือขนาดใหญ เมื่อทำการพิมพแลวจะไดคุณภาพที่คมชัด ภาพ จะไมแตก

ภาพที่ 6.11 การแปลงฟอนตเปนเวกเตอร ในโปรแกรม Adobe Illustrator ที่มา : นุจรี บุรีรัตน (2564) จากภาพที ่ 6.11 เป น ภาพการแปลงฟอนต เ ป น เวกเตอร ในโปรแกรม Adobe Illustrator โดยทำการเลื อ กข อ ความทั ้ ง หมด แล ว ไปที ่ เ มนู Select>Object>All Text Objects จากนั้นไปที่เมนู Type >Create Outlines เพียงเทานี้ตัวอักษรทั้งหมดในผลงานจะ ถูกแปลงจากรูปแบบฟอนตไปเปนเวกเตอร 2) การแปลงฟอนตเปนเวกเตอรในโปรแกรม Adobe Photoshop วิ ธ ี ก ารแปลงฟอนต เ ป น เวกเตอร ในโปรแกรม Adobe Photoshop ทำได โ ดยเลื อ ก ตัวอักษรขอความทั้งหมดในผลงานแลวใหไปที่พาเลท Layers เลือกฟลเตอรเปน Kind จากนั้น กดที่ไอคอน T ตัวพาเลทจะแสดงผลเฉพาะเลเยอรที่เปนตัวอักษร ใหกดปุม Shift คางไวแลว เลื อ กเลเยอร ต ั ว อั ก ษรให ค รบทุ ก เลเยอร เมื ่ อ เลื อ กเลเยอรจ นครบแล วให ค ลิ ก ขวา แล ว

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 194

เลือก “Convert to Shape” โปรแกรมจะทำการแปลงเลเยอรตัวอักษรทั้งหมดใหอยู ในรูป ของเวกเตอร

ภาพที่ 6.12 การแปลงฟอนตเปนเวกเตอรในโปรแกรม Adobe Photoshop ที่มา : นุจรี บุรีรัตน (2564) จากภาพที ่ 6.12 เป น ภาพการแปลงฟอนต เ ป น เวกเตอร ในโปรแกรม Adobe Photoshop ไปที่พาเลท Layersg เลือก Kind จากนั้นกดที่ไอคอน T แลวเลือก “Convert to Shape”เพียงเทานี้ตัวอักษรทั้งหมดในผลงานจะถูกแปลงจากรูปแบบฟอนตไปเปนเวกเตอร เมื่อทำการพิมพแลวจะไดคุณภาพคมชัด ภาพจะไมแตก 6.3.1.5 การเตรียมไฟลสำหรับงานพิมพปกติ งานพิมพปกติ เชน การดเชิญ นามบัตร ใบปลิว แผนพับ โปสเตอรนั้น ใหเตรียมไฟล ตามเงื่อนไขตางๆ เมื่อออกแบบดีไซนจนเสร็จเรียบรอยแลว ควรตรวจสอบคุณภาพไฟลใ ห พรอมที่จะทำการพิมพ หากมีการนำไฟล JPG, PNG, BMP, TIFF มาใชประกอบในชิ้นงาน จะตองตรวจสอบความละเอียดกอน โดยไปที่เมนู Windows>Links โปรแกรมจะเปดพาเลท Links ที่มีรายชื่อไฟลบิตแมป ทั้งหมดที่ใชในผลงาน ใหตรวจสอบจนครบทุกไฟลวามีคา PPI ไมต่ำกวา 300 จากนั้นจะทำการ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 195

ฝงไฟลบิตแมปเหลานี้ไวในไฟล AI โดยการกด Shift แลวเลือกไฟลในหนาตาง Links ใหครบ ทุกไฟลแลว คลิกที่ดานมุมขวาบนของพาเลทแลวเลือก Embed Image(s) โปรแกรมก็จะทำ การฝงไฟลภาพตาง ๆ เหลานี้ไวในไฟล AI หากมีการใชไฟลบิตแมปแตไมทำการ Embed ไฟล ผูทำหนาพิมพงานจะไมเห็นรูปภาพเหลานี้ในผลงาน

ภาพที่ 6.13 การฝงไฟลภาพตาง ๆ ไวในไฟล AI ที่มา : นุจรี บุรีรัตน (2564) จากภาพที่ 6.13 เปนการฝง ไฟลภาพต าง ๆ ไวในไฟล AI โดยเลือกไฟลทั้ ง หมด แลวคลิกที่ม ุม ขวาบนแลว เลื อก Embed Image(s) ไฟลที่ถูก Embed เรียบรอยแล ว จะมี ไอคอนสี่เหลี่ยมปรากฎหลังชื่อไฟล โปรแกรมจะทำการฝงไฟลภาพตาง ๆ เหลานี้ไวในไฟล AI 6.3.1.6 การเตรียมไฟลสำหรับงานสติ๊กเกอร สำหรับการเตรียมไฟลเพื่อใชในการผลิตสติ๊กเกอร มีเพียงความแตกตางเพียงเล็กนอย กับการเตรียมไฟลแบบปกติจากเดิมที่เราจะใช Margin และ Bleed อยางละ 3 มิลลิเมตร จะ เปลี่ยนเปน Margin 1.5 มิลลิเมตร และ Bleed 1 มิลลิเมตร เมื่อทำการออกแบบเสร็จสิ้น ขั้นตอนสุดทายคือการแปลงตัวอักษรขอความทั้งหมดใหอยูในรูปแบบเวกเตอร สำหรับงาน ไดคัทที่มีมุมแหลม เชนรูปทรงสี่เหลี่ยม ใหปรับมุมใหมนลงจะชวยใหเมื่อนำงานไปติดบนวัสดุ แลวจะติดไดถาวรมั่นคงมากกวา

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 196

6.3.2 การเลือกใชกระดาษและการเก็บงาน กระดาษเปนองคประกอบสำคัญ สำหรับรูปถาย ชวยใหรูปโดดเดน หรือหมองลงได กระดาษที่เลือกใช มี หลากหลายชนิ ด ให เ ลือ ก ทั้ง นำหนัก สี พื้นผิว การเลือกใชกระดาษ ที่ถูกตองยอมใหผลิตภัณฑดูดีมากที่สุด การสรางตนแบบเปนวิธีที่ดีที่สุด ที่จะชวยใหเห็น ว า กระดาษที ่ เ ลื อ กใช น ั ้ น เหมาะกั บ งานนั ้ น ๆ หรื อ ไม อี ก ทั ้ ง ควรศึ ก ษาคุ ณ สมบั ต ิ ข อง กระดาษแตละชนิด รวมถึง ความเหมาะสมของกระดาษที่เลือกใชในงาน กระดาษนั้นผลิต จากเยื่อไม คอตตอน หรือกระดาษรีไซเคิล 6.3.2.1 คุณสมบัติของกระดาษ สามารถแบงได 7 คุณสมบัติดังนี้ 1) น ำหนัก เปน สิ่ง ที่บอกความหนาของเยื่อกระดาษที่ม าทำเปน แผน หนวยเปน ปอนด หรือกรัมตอตารางเมตร กระดาษซองจดหมายอาจมีนำหนัก 24 ปอนดหรือหนา ปก เอกสาร อาจมีนำหนักถึง 140 ปอนด 2) ความหนา วัดไดโดยใชเครื่องคาลิปเปอร (Caliper) หนวยเปนนิ้วหรือมิลลิเมตร อยางไรก็ตามกระดาษที่หนากวาไมไดหมายความวาจะใหคุณภาพการพิมพที่ดีกวา 3) พื้นผิว ขึ้นอยูกับขนาด และคุณภาพของเยื่อกระดาษ รวมถึงการวางโครงสราง ของเยื่อการกดอัดเยื่อกระดาษที่ละเอียดกวา จะใหกระดาษที่เรียบเนียนสวนใหญใชกับการ เขียนหรือพิมพ สวนเยื่อกระดาษที่หยาบ และกดอัดนอยสวนใหญนำไปใชผลิตแผนกระดาษ 4) ความแข็งแรง (ความตึง และยืดหยุน) เปนผลที่เกิดจากพื้นผิว ความหนาแนน นำหนัก และความหนารวมกัน 5) ความโปรงใส ขึ้นกับความหนาแนนและความหนาของกระดาษ เปนสิ่งที่บอกวา ขอความ หรือรูปที่พิมพบนกระดาษนั้นจะทะลุไปอีกดานหนึ่งของกระดาษไดมากนอยเพียงใด กระดาษเวลลัม (Vellum Paper) เปนกระดาษที่มีความโปรงใสมากที่สุด ผลิตไดโดยการนำ กระดาษคุณภาพสูงไปแชลงในกรด 6) ความสวาง ขึ้นกับวาเยื่อกระดาษไดฟอกขาวกอนนำมากดอัด เปนแผนมากนอย เพียงไร กระดาษที่สว างกว า คื อกระดาษที ่ม ีก ารสะท อนแสง ใหความรู  สึก สดใสมากกว า การเก็บรักษาสง ผลต อความสวาง หากเก็บกระดาษในสภาพแวดลอมที่ไ ม มีก ารควบคุ ม ความสวางจะลดลงตามกาลเวลา 7) สีของกระดาษ เกิดจากการใสสียอมลงไปในเยื่อกระดาษกอนจะกดอัดกระดาษสี จะมีคาใชจายในการผลิตสูงกวากระดาษขาว มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 197

กระดาษคุณภาพตางกันยอมสงผลตอการพิมพที่ตางกัน แนนอนวาพื้นผิวที่แตกตาง เชน ผิวดานหรือเงามัน ยอมใหผลลัพธการพิมพที่ไ มเหมือนกัน เมื่อหมึกซึมลงไปในเนื้ อ แบบดาน หมึกจะถูกดูดซับลงบนกระดาษและไมสะทอนแสงกลับมา ผิวแบบดาน จึงเหมาะ กับการพิมพเอกสาร เนื่องจากสบายตาในการอาน สวนหมึกที่พิมพลงบนกระดาษมันเงา จะสะท อ นแสงกลั บ มามากกว า ให ค วามเป น ประกายสี ส ั น สดใส ซึ ่ ง เหมาะต อ การ ใช พ ิ ม พ ห น า ปกหนั ง สื อ นิ ต ยสาร โบรชั ว ร และบรรจุ ภ ั ณ ฑ ส ว นกระดาษแบบซาติ น เป น กระดาษ ที ่ ม ี ก ารเคลื อ บแบบผ า ต ว น มี ค ุ ณ สมบั ติ อยู  ก ึ ่ ง กลางระหว า งกระดาษ สองชนิดกอนหนา ใหสีสันที่ไมสดใสมากนัก มีความเปนมันเงา แตไมสะทอนแสงมากนัก 6.3.2.2 การใสเทคนิคพิเศษและการเคลือบผิว เทคนิคพิเศษและการเคลือบผิวสามารถนำไปใชกับสิ่งพิมพทั้งแผนหรือเฉพาะบางจุด แบงไดเปน 5 รูปแบบ ดังนี้ 1) การเคลือ บวานิช (Varnish) เปนการเคลือบในระหวางการพิมพโดยจะเกิ ด เปนชั้นฟลมเคลือบพื้นผิว แตจะไมผสมเปนเนื้อเดียวกับหมึก สามารถเคลือบไดทั้งแบบดาน ซาติน และมันเงา หรือสามารถใชในการยอมสีโดยการเติมสีเขาไปในระหวางการเคลือบ 2) การอาบ UV คือการอาบน้ำยาลงบนพื้นผิว และทำใหเปนชั้นฟลมดวยการใช แสงอั ล ตราไวโอเล็ ต สามารถเคลื อ บได ท ั ้ ง แบบด า นและมั น เงา ระบุ เ ฉพาะบริ เ วณ ที่ตองการไดอีกดวย 3) การพนสีที่ใ ชน้ำเปนตัวทำละลาย (Aqueous coathing) สามารถเคลื อ บ ได ท ั ้ ง แบบด า น ซาติ น และมั น เงา มี ค  า ใช จ  า ยสู ง ยากต อ การควบคุ ม พื ้ น ที ่ เหมาะต อ การพนเคลือบทั้งแผนมากกวา 4) การใช ล ามิ เ นต (Laminate) ใช แ ผ น พลาสติ ก ใสหรื อ ของเหลวใส เพื่อเปนเนื้อเดียว กับกระดาษ ซึ่งจะชวยปกปองเนื้อกระดาษ 5) การปมนูน (Emboss) กระดาษสามารถปมตัวอักษรหรือโลโกใหนูนออกมาได อีกทั้ง ยัง นำไปปมศรีโลหะ โดยการใชแผน ฟอยลหรือเพิ่มความมันเงา สีสะทอนแสง เอฟ เฟกต พ ิ เ ศษต า ง ๆ หรื อ ใช เ ลเซอร ฉ ลุ ล วดลาย เทคนิ ค เหล า นี ้ จ ะสร า งความประทั บ ใจ ใหกับชิ้นงานแตสวนใหญจะมีคาใชจายสูง ดังนั้น อยาลืมประเมินงบประมาณใหเหมาะสม กับเทคนิคที่จะเลือกใชดวย

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 198

6.4 การจัดพิมพ การพิมพแบบออฟเซตมีมานานกวาศตวรรษ สวนการพิมพดิจิทัลเริ่มเขามา มีบทบาท ในชวงของตนทศวรรษที่ 1990 ซึ่งเปนการพิมพโดยตรงจากไฟลดิจิทัล เปดโลกของการพิมพให กวางมากยิ่งขึ้น เครื่องพิมพดิจิทัลใหม ๆ จะใชเทคโนโลยีลาสุด เพื่อตอบสนองการพิมพใหมี ความยืดหยุนในดานความเร็ว และราคามากกวาการพิมพแบบออฟเซ็ต ปจจุบันดวยเทคโนโลยีการพิมพที่ทันสมัยมากขึ้นทั้งการพิมพออฟเซ็ท (Offset) และ พิมพดิจิทัล (Digital) จึงตองตัดสินใจวาจะเลือกงานพิมพระบบไหน จึงจะคุมคาที่สุดกับงาน พิมพที่ตองการ ดังนั้นการศึกษาความแตกตางของการพิมพออฟเซ็ท (Offset) และพิมพดิจิทัล (Digital) วามีความแตกตางกันอยางไร เพื่อเปนขอมูลที่ในการตัดสินใจ 6.4.1 ประเภทการพิมพ 6.4.1.1 การพิมพออฟเซ็ท (Offset Printing) การพิมพออฟเซ็ท คือ การพิมพที่ใชหลักการน้ำกับน้ำมันไมรวมตัวกัน เปนแบบ การพิมพที่อาศัยแมพิมพ (Plate) โดยใชเพลตที่ผลิตขึ้นจะอาบดวยน้ำยาเคมีที่ทำให เพลตอม หมึกแตไมอมน้ำเครื่องพิมพยังมีหลายขนาด มีทั้งเครื่องพิมพ 1 สี 2 สี 4 สี 5 สี หรีือมากกวา นั้น การพิมพออฟเซตจะไดงานที่มีคุณภาพสูง ละเอียด ภาพสวย คมชัด และสามารถสั่งพิมพ ในปริมาณมาก ทั้งนี้ออฟเซตยังสามารถพิมพไดบนวัสดุหลากหลายชนิด ไมวาจะเปน กระดาษ พลาสติก ผา ผาแคนวาส กระดาษสติกเกอร เปนตน ขอดีของการพิมพออฟเซต พิมพไ ด จำนวนครั้งละมาก ใชเวลารวดเร็วพิมพสีพื้นบริเวณภาพที่กวางไดสีที่เรียบ เมื่อเทียบกับระบบ อื่น ๆ มีคุณภาพสูง ละเอียด คมชัด พิมพไดเกือบทุกพิ้นผิว สั่งพิมพมาก คาใชจายจะถูกลง คุมคากับคุณภาพงาน

ภาพที่ 6.14 การพิมพออฟเซ็ท (Offset Printing) ที่มา : Riccoprint (2564) จากภาพที่ 6.14 เปนภาพตัวอยางงานพิมพที่เหมาะกับการพิมพออฟเซ็ท เชน ใบปลิว แผนพับ โบรชัวร หนังสือ วารสาร นิตยสาร แคตตาล็อก งานพิมพใชในสำนักงาน เปนตน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 199

6.4.1.2 การพิมพดิจิทัล (Digital Printing) การพิมพดิจิทัล คือ การพิมพที่ใชการตอพวงเครื่องพิมพกับคอมพิวเตอร โดย เครื่องพิมพจะรับขอมูลภาพจากคอมพิวเตอรแลวพิมพออกมา สามารถพิมพไดจำนวนมาก แต มีขอจำกัดในเรื่องของคุณภาพ ปริมาณ และเวลาที่ถือไดวาไมคุมคาเมื่อเปรียบเทียบกับระบบ การพิมพแบบออฟเซ็ต (Offset Printing) ดังนั้น ไดมีการพัฒนาเครื่องพิมพ Digital Press ขึ้น เพื่อตอบสนองการพิมพงานคุณภาพในปริมาณ และเวลาที่คุมคาใกลเคียงกับการพิมพแ บบ ออฟเซ็ต สามารถใชวัสดุในการพิมพงานไดหลากหลายไมวาจะเปน กระดาษอารตมัน กระดาษ ปอนด แผน ใส โฮโลแกรม สติ๊กเกอร PVC เปนตน ขอดีของการพิมพด ิจ ิท ั ล คือช ว ยให ประหยัดเวลาในการทำงาน มีความสะดวกรวดเร็ว เหมาะกับงานเรงดวน แกไขงานไดงายเพียง แคสงไฟลใหมมาแทนไฟลเดิม ขอมูลจะเปนขอมูลใหม แกไขไดทันที มาตรฐานงานพิมพ มี ระบบควบคุมคุณภาพงานพิมพที่เทากันในทุกหนา ผลิตตามจำนวนที่ตองการ มีความยืนหยุน ในการพิมพ แมจะพิมพนอยก็สามารถพิมพไดประหยัดทรัพยากร เหมาะกับงานพิมพจำนวน นอย ลดของเสียในกระบวนการผลิต

ภาพที่ 6.15 การพิมพดิจิทัล (Digital Printing) ที่มา : Riccoprint (2564) จากภาพที่ 6.15 เปนภาพตัวอยางงานพิมพดิจิทัล (Digital Printing) งานออกแบบ สื่อที่เหมาะกับการพิมพดิจิทัล เชน นามบัตร แผนพับ ใบปลิว สติ๊กเกอร ปายแท็กสินคา การด เชิญ หนังสือ เปนตน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 200

ทั้งหมดคือความแตกตางของการพิมพออฟเซ็ท และการพิมพดิจิทัล ที่จะชวย ใหสามารถเลือกใชระบบการพิมพใหเหมาะสมกับงานพิมพมากที่สุด การพิ ม พ ด ิ จ ิ ท ั ล เปน การพิ ม พ โ ดยการใช ผ งหมึ ก หรื อโทนเนอร และอาศัย แมเหล็กไฟฟาสรางไฟฟาสถิต เพื่อนำผงหมึกไปปรากฏบนกระดาษ เปนหลักการทำงาน เกี ่ ย วกั บ เครื ่ อ งเลเซอร ป ริ ้ น เตอร วิ ธ ี น ี ้ ไ ม เ พี ย งเพิ ่ ม ความเร็ ว ในการทำงาน ยั ง สามารถ ลดความผิดพลาดและควบคุมงบประมาณไดแมนยำ โดยทั่วไปงานพิมพที่มีจำนวนต่ำกวาหนึ่ง พันชุด สวนมากเลือกใชการพิมพแบบดิจิทัลมากกวาออฟเซ็ท เนื่องจากมีราคาตอชุด ที่ต่ำกวา สามารถใชไฟลงานที่หลากหลาย หรือสวนใหญใชกับสิ่งพิมพที่มี การอัพเดท เนื้อหาบอยครั้ง ในป จ จุ บ ั น การพิ ม พ ห นัง สื อตามความต อ งการมี อั ต ราเติ บ โตที ่ ส ู ง ขึ ้ น ทำให ก ารพิ ม พที่ มีความยืดหยุนสูง การพิมพดิจิทัลไดรับความนิยมมากขึ้น สำนักพิมพบางแหง มีบริการที่ ครอบคลุม เชน ทำหนังสือออนไลน และพิมพตามจำนวนที่ตองการ ระบบพิมพแบบสกรีน ทำให ส ามารถเลื อ กการพิ ม พ ใ ห เ หมาะสม กั บ งาน รวมถึ ง งบประมาณได อ ย า งแม น ยำ จึง ควรตรวจสอบตนฉบับดิจิทัลเพื่อลดความผิดพลาด รวมหรือปรึกษากับทางสำนักพิมพ เพื่อหาทางเลือกที่เหมาะสมที่สุด 6.4.2 นำหมึกและผงหมึก ในการพิมพดิจิทัลที่ใชผงหมึก ผงหมึกจะไมซึมทะลุกระดาษเหมือนน้ำหมึก แตผงหมึกจะไปสรางเปน ชั้น ฟลมบาง ๆ บนผิวกระดาษ นักออกแบบและโรงพิมพบางที่ เชื ่ อ ว า การพิ มพ แ บบดิ จ ิ ท ั ล ทำให ส ี ท ี ่ส ดกวา เนื ่ อ งจากแสงที ่ ต กกระทบผงหมึ กจะไมถูก ดูดซับดวยกระดาษ ตางกับน้ำหมึกที่จงอยูในเนื้อกระดาษ ทำใหเสียแสงไปสวนหนึ่ง แตสีที่สด กวาอาจไมไดดีกวาเสมอไป เพราะบางครั้งจะดูเจิดจาเกินไป ดังนั้นไมควรลืมปรับคาความสด ของสีใหตรงกับความตองการ กอนเริ่มพิมพจริงเสมอ

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 201

ภาพที่ 6.16 สีผงหมึก ที่มา : Pngtree (2560) จากภาพที่ 6.16 เปน ภาพสีผงหมึก บางครั้ง การใชผงหมึกกับเครื่องพิมพดิ จ ิ ทั ล บางรุ  น อาจมี ป  ญ หาเรื ่ อ งแถบสี ป ระหลาด จากการผสมหรื อ ซ อ นทั บ กั น ของผงหมึ ก ดังนั้นอาจขอใหทางสำนักพิมพพิมพตนฉบับขึ้นมาสักหนึ่งชุดเพื่อตรวจสอบวา ถูกตองตรง ตามความตองการหรือไม 6.4.3 ขบวนการกอนการพิมพ (Prepress Process) ขบวนการกอนพิมพไดถูกพัฒนาอยางตอเนื่องตั้งแตมีการนำเครื่องคอมพิวเตอร มาใชในการออกแบบและควบคุมขบวนการทำแมพิมพ ในปจจุบันตนฉบับที่ถูกสงโรงพิมพสวน ใหญเปนรูปแบบของไฟลดิจิทัล ขบวนการกอนการพิมพที่กลาวในที่นี้จะใชระบบดิจิทัลในการ ทำงาน 6.4.3.1 การแปลงเปนขอมูลดิจิทัล (Digitization) ในกรณีที่ผลงานผลิตมา เปนภาพลายเสน ภาพถาย หรือ ภาพวาดมาเปนฟลมสไลด จำเปนตองแปลงภาพเหลานี้ใหเปน ขอมูลดิจิทัล ซึ่งทำไดโดยใชเครื่องสแกนเนอร (Computer Scanner) และเพื่อใหไดภาพที่ดีมี คุณภาพควรใชเครื่องสแกนเนอรที่มีคุณภาพสูง (High-end Scanner) เมื่อไดเปนภาพดิจิทัลให ทำการประกอบหนาในคอมพิวเตอร โดยใชโปรแกรมที่ใชจัดหนา เชน Adobe Indesign, Illustrator, Pagemaker เปนตน 6.4.3.2 การตรวจสอบไฟลขอ มูล (Preflight) เพื่อปองกันความผิดพลาดที่จะ เกิดขึ้นในชิ้นงานพิมพอันจะกอใหเกิดความเสียหาย และสิ้นเปลืองคาใชจาย จำเปนตองมีการ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 202

ตรวจสอบรายละเอียดของไฟลงาน ซอฟตแวรที่ใชในการตรวจสอบดังกลาวมี FlightCheck, PreFlight Pro เปนตน เปนการตรวจสอบวาไฟลภาพมีครบหรือไม แบบตัวอักษรถูกตอ ง หรือไม ขนาดหนาของชิ้นงานถูกตองหรือไม มีการเผื่อตัดตกเพียงพอหรือไม การกำหนดสี ถูกตองหรือไม ฯลฯ 6.4.3.3 การจัดวางหนาสำหรับทำแมพิมพ (Imposition) เนื่องจากแมพิมพ ที่ใชพิมพสวนใหญมีขนาดใหญกวาชิ้นงาน แมพิมพหนึ่งชุดสามารถวางชิ้นงานไดหลายชิ้น เชน วางหนาหนังสือได 8 หนา วางฉลากได 40 ชิ้น เปนตน ขั้นตอนนี้จะเปนการจัดวางหนาสำหรับ ทำแมพิมพแตละชุด อนึ่งในการวางหนาหนังสือตองจัดวางหนาใหถูกตอง เมื่อนำไปพับแลว หนาตาง ๆ จะไดเรียงอยางถูกตอง ซอฟตแวรที่ใชในการจัดวางหนาหนังสือ ไดแก Prep, InPosition, Impostrip เปนตน 6.4.3.4 การทำปรูฟดิจิทัล (Digital Proofing) กอนที่จะทำเปนแมพิมพจริง ตองมีการทำตัวอยางงานพิมพขึ้นเพื่อตรวจดูรายละเอียดตาง ๆ ตลอดจนสีสันวาถูกตองหรือไม การทำตัวอยางหรือปรูฟในขั้นนี้ เปนการพิมพจากเครื่องพิมพคอมพิวเตอร หรือพริ้นเตอร โดยทั่วไปจะใชพริ้นเตอรระบบอิงคเจ็ท (Inkjet Printer) ขนาดใหญ และพิมพตัวอยางงานได ขนาดกับการจัดวางหนาเหมือนบนแมพิมพจริง จึง เรียกการทำปรูฟดิจิทัล (Digital Proof) การทำปรูฟดิจิทัลจะประหยัดกวาการทำแมพิมพจริง แลวทำปรูฟจากแมพิมพ หากมีการแกไข ไมตองเสียคาใชจายมาก ในปจจุบันสีสันบนปรูฟดิจิทัลใกลเคียงกับการพิมพบนเครื่องพิมพ มี งานจำนวนมากที่ทำเฉพาะปรูฟดิจิทัล โดยไมทำปรูฟจากแมพิมพ และใชปรูฟดิจิทัลในการ เปรียบเทียบสีสันเวลาพิมพงานจริง 6.4.3.5 การทำฟลมแยกสี (Process Film Making) เปนการทำฟลมที่แยก เปนสี สำหรับทำแมพิมพชุดหนึ่ง หลักการของการทำฟลมแยกสี คือการแยกภาพในไฟลงาน ออกมาเปนภาพสีโดด ๆ โดยมาตรฐานจะไดภาพแมสีสี่ภาพ ซึ่งเปนภาพสีของ CMYK โดยไฟล งานจะถู กส ง เป นไฟลใ นรูป แบบโพสคริป ต (PostScript File) แล ว แปลงเปน ไฟลร ูป แบบ บิตแมป จากนั้นจะสงไปเครื่องยิง หรือเครื่องพิมพฟลมที่มีชื่อเรียกวา เครื่องอิมเมจเซ็ทเตอร (Imagesetter) ซึ่งเปนเครื่องพริ้นเตอรแบบหนึ่งที่ใชลำแสงสรางภาพแบบฮาฟโทน (Halftone) บนแผนฟลมไวแสง ไดฟลมที่มีภาพขาวดำตามภาพของสีแตละสีที่แยกไว และเรียกฟลมชุดนี้วา ฟลมแยกสี

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 203

6.4.3.6 การทำแมพิมพ (Plate Making) เมื่อไดฟลมแยกสีจะนำฟลมของแต ละสีมาทาบกับแมพิมพที่เคลือบดวยสารไวแสง ทำการฉายแสง สวนที่โดนแสงจะทำปฏิกิริยา กับสารไวแสง เมื่อนำไปลางน้ำยาก็จะเกิดภาพบนแมพิมพ สำหรับใชในการพิมพตอไป ใน ปจจุบันมีการสรางเครื่องทำแมพิมพโดยตรงจากคอมพิวเตอร โดยไมตองทำฟลมแยกสีกอน เครื่องดังกลาวมีลักษณะการทำงานคลายเครื่องอิมเมจเซ็ทเตอร แตเปลี่ยนวัสดุที่จะรับลำแสง เพื่อสรางภาพจากฟลมไวแสงเปนแมพิมพไวแสง เครื่องทีใชทำแมพิมพจากคอมพิวเตอรใน ระบบออฟเซ็ทเรียกวา เครื่องเพลทเซ็ทเตอร (Platesetter) ประโยชนที่ไดคือทำใหลดขั้นตอน และคาใชจาย ตลอดจนไดแมพิมพที่มีคุณภาพคมชัดขึ้น แมนยำขึ้น ขอเสียคือเพลทชนิดนี้ยังมี ราคาสูงอยู หากมีการแกไขหรือแมพิมพชำรุด คาใชจายในการทำแมพิมพใหมจะสูงกวา 6.4.3.7 การทำปรูฟ แทน หรือ ปรูฟ แมพ ิมพ (Plate Proofing) ในกรณีที่ ตองการตัวอยางงานพิมพที่มีรายละเอียดและสีสันที่ถูกตองยิ่งขึ้นไวใชเปรียบเทียบกับงานใน ขบวนการพิมพ จำเปนตองทำตัวอยาง หรือปรูฟจากแมพิมพจริง ซึ่งอาจทำโดยใชเครื่องปรูฟที่ จำลองการพิมพจากเครื่องพิมพจริงหรือใชเครื่องพิมพจริงเลยก็ได ประเภทงานที่ตองทำปรูฟ แทนคือ งานโบรชัวร แคตตาล็อก นิตยสาร แผนพับบางรายการ บรรจุภัณฑกระดาษ และงาน พิมพที่ตองการคุณภาพสูง ฯลฯ 6.4.4 ขบวนการการพิมพ (Press/Printing Process) เมื่อไดแมพิมพที่สมบูรณ เริ่มเขาสูขบวนการพิมพ ขบวนการพิมพมีความสำคัญ มาก ชิ้นงานที่ออกมาดีหรือไมขึ้นอยูกับการพิมพเปนหลักใหญ และจะพบวาปญหาสวนใหญที่ เกิดระหวางลูกคากับโรงพิมพ สวนใหญมาจากการพิมพ เชน สีไมเหมือน พิมพเหลื่อม ขอความ ไมชัด ฯลฯ ดังนั้นการควบคุมการพิมพจึงเปนเรื่องสำคัญ 6.4.4.1 การเตรียมพิมพ (Print Preparation) ไดแกการเตรียมวัสดุใชพิมพ เตรียมชนิดของวัสดุใหถูกตอง คำนวนจำนวนที่ตองการพิมพ ทำการตัดเจียนขนาดวัสดุใชพิมพ สำหรับเขาเครื่องพิมพใหถูกตอง เตรียมหมึกที่ใชพิมพ หากเปนหมึกสีอื่น ที่ไมใชแมสี ตองสั่งผู จำหนายหมึกจัดทำขึ้นมาหรือผสมเตรียมไว ในขณะเดียวกันตองตรวจแมพิมพวาสมบูรณ หรือไม ศึกษาปรูฟเพื่อปองกันปญหาที่อาจเกิดขึ้น หากเปนการพิมพสองดานใหจับคูแมพิมพให ถูกตอง

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 204

6.4.4.2 การพิมพ (Printing) หลักการพิมพในระบบตาง ๆ สวนใหญเปนการ พิมพทีละสีลงบนวัสดุใชพิมพ แมพิมพที่ทำขึ้นถูกทำสำหรับสีแตละสี หลักการของการพิมพ โดยทั่วไปจะมีระบบปอนวัสดุใชพิมพเขาไปในเครื่องพิมพ ผานการพิมพทีละสี โดยการรับโอน ภาพหมึกจากแมพิมพซึ่งรับหมึกมาจากระบบจายหมึกมากอน เมื่อพิมพเสร็จก็สงวัสดุใชพิมพ ไปเก็บพักไว เครื่องพิมพแตละเครื่องอาจมีหนวยพิมพ 1 สี 2 สี 4 สี หรือมากกวานั้น การพิมพ หลากสีจึงอาจถูกนำเขาเครื่องพิมพหลายเที่ยว เชน งานพิมพ 4 สีหนาเดียว เมื่อพิมพบนเครื่อง ที่มีหนวยพิมพสีเดียวตองพิมพทั้งหมด 4 เที่ยวพิมพ เครื่องพิมพบางประเภทอาจมีสวนตอทาย หลังจากผานหนวยพิมพแลว เชน มีหนวยเคลือบผิวดวยน้ำยาเคลือบ มีหนวยอบแหงเพื่อให หมึกแหงเร็วขึ้น มีหนวยพับ หนวยตัดซอย หนวยไดคัท ฯลฯ เพื่อลดขั้นตอนการทำงานหลัง การพิมพ เมื่อผานการพิมพครบถวนแลว ตองรอพักใหหมึกแหงสนิทจึงนำไปดำเนินการขั้นตอน ตอไป สำหรับการพิมพระบบดิจิทั ล จะไมมีข บวนการทำฟ ลมแยกสี หรือแมพิมพ สามารถสงคำสั่งพิมพโดยตรงจากเครื่องคอมพิวเตอรไดเลย ทำใหประหยัดคาใชจาย และเวลา ที่ใชไปกับการทำแมพิมพ แตมีขอเสียคือ คาพิมพตอแผนเทียบกับการพิมพแบบปกติคอนขาง สูง หากพิมพจำนวนมากจะทำใหตนทุนสูงกวาแบบปกติ 6.4.5 ขบวนการหลังการพิมพ (After Press Process) งานพิมพที่พิมพเสร็จสิ้นแลว โดยทั่วไปยังไมสมบูรณเปนชิ้นงานตามที่ตองการ จึงตอง ผานขบวนการตาง ๆ ดังนี้ 6.4.5.1 การตกแตงผิวชิ้นงาน (Surface Decoration) งานพิมพบางงาน ตองการการเคลือบผิวเพื่อจุดประสงคตางกัน เชน เพื่อปองกันการขีดขวน ปองกันความชื้น ตองการความสวยงาม เปนตน การตกแตงผิวมีดังนี้ 1) การเคลือบผิว (Coating) การเคลือบผิวมีหลายวิธีเชนการเคลือบวานิช วา นิชดาน วานิชแบบใชน้ำเปนตัวทำละลาย (Water based varnish) การเคลือบยูวี ยูวีดาน การเคลือบพีวีซีเงา พีวีซีดาน การเคลือบเงาเฉพาะจุด (Spot UV) การเคลือบวานิชจะใหความ เงานอยที่สุด ในขณะที่การเคลือบพีวีซีเงาจะใหความเงามากที่สุด 2) การรีด/ปมแผนฟอยล (Hot Stamping) ไดแกการปมดวยความรอนให แผนฟอยลไปติดบนชิ้นงานเปนรูปตามแบบปม มีทั้งการปมฟอยลเงิน/ทอง ฟอยลสีตาง ๆ ฟอยลลวดลายตางๆ ฟอยลโฮโลแกรม เปนตน มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 205

3) การปมนูน/ปมลึก (Embossing/Debossing) คือการปมใหชิ้นงานนูนขึ้น หรือลึกลงจากผิวเปนรูปรางตามแบบปม เชนการปมนูนตัวอักษร สัญลักษณ 6.4.5.2 การขึ้นรูป (Forming) ไดแก การตัดเจียน เชนงานทำฉลาก การขึ้น เสนสำหรับพับ การปมเปนรูปทรง หรือการไดคัท เชน งานทำกลอง งานเจาะหนาตางเปนรูป ตาง ๆ การพับ การมวน เชน งานทำกระปอง การทากาวหรือทำใหติดกัน เชน งานทำกลอง งานทำซอง การหุมกระดาษแข็ง เชน งานทำปกแข็ง งานทำฐานปฏิทิน 6.4.5.3 การทำรูปเลม (Book Making) เปนขบวนการสำหรับทำงานประเภท สมุด หนังสือ ปฏิทิน กระดาษกอน ฯลฯ มีขั้นตอนคือ 1) การตัดแบง เพื่อแบงงานพิมพที่ซ้ำกันในแผนเดียวกัน 2) การพับ เพื่อพับแผนพิมพเปนหนายก 3) การเก็บเลม เพื่อเก็บรวมแผนพิมพที่พับแลวหรือหนายกมาเรียงใหครบเลม หนังสือ 4) การเขาเลม เพื่อทำใหหนังสือยึดติดกันเปนเลม มีวิธีตาง ๆ คือ การเย็บดวย ลวด เย็บมุงหลังคา การใสสันทากาว การเย็บกี่ทากาว การเย็บกี่หุมปกแข็ง การเจาะรูรอยหวง เมื่อผานการยึดเลมติดกัน ก็นำชิ้นงานมาตัดเจียนขอบสามดานใหเรียบเสมอกัน และไดขนาดที่ ตองการ 6.4.5.4 การบรรจุหีบหอ (Packing) เมื่อไดชิ้นงานสำเร็จตามที่ตองการ ทำ การตรวจสอบชิ้นงาน แลวบรรจุหีบหอพรอมสงไปยังจุดหมายปลายทางตอไป 6.5 การนำเสนอแบบออนไลน การนำเสนองานผานสื่อออนไลนเปนสิ่ง สำคัญที่จะชวยใหธุรกิจประสบความสำเร็จ เพราะปจจุบันเห็นไดชัดจากสถานการณที่ทำใหธุรกิจตองปรับตัวในการทำงาน รวมถึงรูปแบบ การใชชีวิตที่เปลี่ยนไป จึง สง ผลใหสื่อออนไลนเขามามีบทบาททั้งในการทำงานและการใช ชีวิตประจำวัน การแสดงผลงานออนไลน คือการแสดงภาพตัวอยาง หรือผลงานที่จะชวยสะทอน ความสามารถในการออกแบบกราฟก การแสดงผลงานออนไลน คลายกับการทำโปรเจค คือตองตอบโจทย และตอบสนองความตองการของกลุมเปาหมาย ผูวาจาง สวนใหญมีตัวเลือก

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 206

จำนวนมาก แต ก ารแสดงผลงานจะช วยให พวกเขา ได เ ห็ น ทั ก ษะ ประสบการณ ทำงาน รวมถึงลักษณะของผลงาน หรือแนวทางของนักออกแบบ 6.5.1 องคประกอบในการนำเสนอผลงานออนไลน เพื่อใหการนำเสนอผลงานมีประสิทธิภาพ จะตองมีองคประกอบในการนำเสนอที่ สำคัญ แบงออกเปน 5 องคประกอบ ดังนี้ 6.5.1.1 ผูนำเสนอ เปนผูที่มีบทบาทสำคัญที่สุดในการนำเสนอ ผูนำเสนอที่ดี จะตองวิเคราะหผูรับขอมูล ศึกษางานหรือขอมูลนั้น ตลอดจนสรางหรือใชสื่อและโพรโตคอล ที่มีคุณภาพ เพื่อใหการนำเสนองานนั้นบรรลุวัตถุประสงคที่กำหนดไว 6.5.1.2 ผูรับขอมูล เปนผูรับขอมูลจากผูนำเสนอ ถามีการนำเสนอที่ด ีผู รับ ขอมูลจะมีพฤติกรรมเปลี่ยนแปลงไปในทิศทางที่ผูนำเสนอตองการ 6.5.1.3 ผลงาน เปนสิ่งที่ผูนำเสนอตองการถายทอดใหแกผูรับขอมูลผ านสื่อ และโพรโตคอลตาง ๆ 6.5.1.4 สื่อ เปน เครื่องมือสำคัญ ที่จะนำขอมูลตาง ๆ ไปยัง ผูรับขอมูล สื่อ พื้นฐานในการนำเสนองาน คือ อากาศ เชน การนำเสนอสินคาของพนักงานดวยการพูดคุย กับผูซื้อสินคา ปจจุบันสื่อที่ใชในการนำเสนอมีพัฒนาการมากขึ้น ดวยการนำเทคโนโลยีตาง ๆ มาชวย เชน การนำเสนอสินคาผานทางขอความในโทรศัพทเคลื่อนที่ 6.5.1.5 โพรโตคอล เปนวิธีการที่ผูนำเสนอใชถายทอดงานใหแกผูรับขอมูล โพรโตคอลมีทั้งแบบเฉพาะเจาะจง คือ ผูรับขอมูลจะรับขอมูลจากการนำเสนองานนั้น โดยตรง เชน การเขารวมสัมมนา การอบรม การใชเว็บไซตสงเสริมการศึกษา และโพรโตคอลแบบไม เฉพาะเจาะจง คือโพรโตคอลที่ผูนำเสนอแฝงขอมูลที่ตองการนำเสนอไวในสื่ออื่น ๆ และผูรับ ขอมูลไมตั้ง ใจที่จะรับขอมูลนั้น แตถูกผูนำเสนอโนมนาวใหเกิดตามวัตถุประสงคของการ นำเสนองานนั้น เชน การโฆษณาสินคาในรูปแบบตาง ๆ การแสดงผลงานออนไลน ค วรมี ค วามชั ด เจน ไม แ บ ง กลุ  ม ประเภทงาน และสามารถเข า ถึ ง ได โ ดยง า ย ด ว ยผลงานที ่ แ สดงควรพู ด ถึ ง แนวคิ ด ในการทำงาน มี ค ำอธิ บ ายประกอบ รวมถึ ง ชื ่ อ เจ า ของผลงาน ลั ก ษณะของงานที ่ ท ำอยู  พื ้ น ที ่ ร ั บ งาน แลวการทำงานในปจจุบัน ควรสรุปทุกสิ่งทุกอยางที่เกี่ยวของ และชักชวนผูที่อยูในสายอาชีพ หรือบริษัทที่สนใจในผลงาน เพื่อเพิ่มชองทางการสื่อสารทางธุรกิจ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 207

6.5.2 การนำเสนอผลงานออนไลนบนเว็บไซต การทำเว็บไซตอยางไรใหคุมคานั้น อันดับแรกสิ่งที่สำคัญที่สุดคือ การออกแบบ ตองดูโดดเดน และสื่อสารไดอยางมีประสิทธิภาพ และเว็บไซตที่ดีนั้นตองรองรับการทำ SEO (Search Engine Optimization) หรือการทำใหติดหนาแรกของ google ถือเปนสิ่งสำคัญใน การทำเว็บไซต การกาวขามจากนักออกแบบฝกหัดไปสูนักออกแบบมืออาชีพ ควรเริ่มตนจาก การสร า งชื่ อโดเมน (Domain) และบั ญ ชี ส ำหรั บผู  บ ริก ารฝากเว็บ ไซต (Web Hosting) ชื่อโดเมนเปรียบไดกับการเชารถ โดยผูบริการรับฝากเว็บไซตเปนเหมือนผูใหบริการที่จอดรถ ดังนั้นตองมีทั้ง 2 สวนเพื่อใหสามารถแสดงผลงานออนไลนได 6.5.2.1 ประโยชนของการทำเว็บไซต ประโยชนของการทำเว็บไซต ไมเพียงแตมีประโยชนในการนำเสนอขอมูล ใหกับ ผูใชงานไดทราบเทานั้น แตยังมีประโยชนอื่น ๆ อีกมากมาย ไดแก 1) ขยายชองทางในการขายสินคาและบริการ ซึ่งสามารถเขาถึง กลุมลูก คา ที่ ตองการไดมากขึ้น และไมตองเสียคาใชจายที่สูงเกินไป 2) สำหรับการทำธุรกิจรานคาออนไลน หรือขายของบนเว็บไซต จะทำใหมีหนา รานเปนของตนเอง คือโฮมเพจ และเปนการเปดตัวสินคาสูตลาดโลก 3) เปน การเสริมสรางภาพลักษณขององคการ รานคาและบริษัทใหมีความ นาเชื่อถือและทันสมัยมากยิ่งขึ้น 4) มีความเป น สากล ดวยชองทางการติ ด ต อ ลูก ค าที่ ห ลากหลาย ทั้ง อี เ มล Facebook Line และอื่น ๆ 5) เพิ่มความสะดวกใหกับกลุมผูบริโภค โดยสามารถซื้อสินคาหรือบริการผาน ทางเว็บไซตไดตลอดเวลา 6) ชวยโฆษณาบริษัท องคกรและสินคาใหเปนที่รูจักอยางแพรหลาย ทั้ง ใน ประเทศและตางประเทศ 7) ทำหนาที่ในการสงเสริมการขาย และบริการของบริษัท

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 208

8) ช ว ยยกระดั บ มาตรฐานในการซื ้ อ ขายระหว า งประเทศ และสามารถ เสริมสรางธุรกิจใหมีความแข็งแรงไดดี นักออกแบบเว็บไซตมืออาชีพจะใหความสำคัญกับการแสดงผลงาน (Portfolio) แบบออนไลน เพราะเปนสิ่งที่ผูอื่นสามารถเขาถึงไดโดยงาย และสรางความไดเปรียบมากกวา นักออกแบบคนอื่นๆ ที่ไมมีผลงานใหติดตาม หรือแสดงผลงานออนไลน กำหนดจำนวนผลงานตัวอยางที่จะถูกจัดแสดงบนหนาเว็บไซต โดยตัวอยาง ที่เลือกมานั้น ควรสะทอนถึง ความสามารถในดานต าง ๆ และอาจมี การถายรูป ในแตล ะ ขั้นตอนในการออกแบบ นักออกแบบหนาใหม จะมีปญหาในการเลือกตัวอยางที่นำมาแสดง แนะนำวา ควรใหค วามสำคั ญ ที ่ผ ลงานกำลั ง ทำอยู ใ นป จ จุบ ั น และผลงานที ่ แสดงใหเห็น การใชหลัก การออกแบบอยางชัดเจน หากเปนไปไดตัวอยางงานควรสอดคลองกับความ ตองการของบริษัทที่วาจาง รูปภาพที่ใชในเว็บไซตลักษณะนี้ควรมีขนาดที่เทา ๆ กันทุก ๆ รูป โดยทั่วไป สวนใหญมีขนาด 800 x 600 พิกเซล ความละเอียด 72 ppi และถูกปรับแตงรูป ใหเหมาะสม ต อ การแสดงผลบนหน า เว็ บ รู ป ตั ว อย า งขนาดเล็ ก อาจทำได โ ดยการนำภาพ ตัวอยางมายอลงในอัตราสวนคงเดิม หรืออาจครอบตัดรูป ตัวอยางใหเหลือเฉพาะสวนสำคัญ เพื ่ อ ดึ ง ดู ดความสนใจของผู ช มใหค ลิ ก ดูร ายละเอี ยดเพิ่ ม เติ ม การออกแบบเว็ บ ไซต สวน ใหญจะทำพอดีกับขนาดของหนาตางเว็บเบราวเซอร

ภาพที่ 6.17 การนำเสนอผลงานออนไลนบนเว็บไซต ที่มา : Aoeystyle (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 209

จากภาพที่ 6.17 เป น ภาพของการนำเสนอผลงานออนไลน บ นเว็ บ ไซต aoeystyle.com ซึ่งผูเขียนไดจัดทำเว็บไซตเพื่อการนำเสนอสินคา เปนกรณีศึกษาสำหรับการ ทำธุรกิจรานคาออนไลน นอกจากนำเสนอผานสื่อสังคมออนไลนแลว การสรางเว็บไซตจะชวย เพิ่มความนาเชื่อถือ และทันสมัยมากยิ่งขึ้น 6.5.3 การนำเสนอผลงานออนไลนบนเว็บไซตสาธารณะ กรณี น ั ก ออกแบบที ่ อ าจไม ถ นั ด ในการสร า งเว็ บ ไซต เ พื ่ อ อั ป โหลดผลงาน สามารถเลือกเว็บไซตที่ใหบริการรับฝากผลงาน รูปภาพ และรับฝากลิงกของรูปนั้นๆ หากมี ผูสนใจ ติดตอ ขอดูผลงานตัวอยาง นักออกแบบสามารถแนบลิงกดังกลาว ไปในอีเมลไดทันที โดยไมตองแนบรูปไปในอีเมลทุก ๆ ครั้ง วิธีนี้ไดรับความนิยมในกลุมผูที่ไมไดเปนนักออกแบบ เว็บไซต ลิง กของรูปภาพสามารถนำผูชมไปยังขอมูลที่เกี่ยวของ รวมถึง ชองทางการติดตอ กับนักออกแบบ

ภาพที่ 6.18 เว็บไซต Flickr.com ที่มา : Flickr (2021) จากภาพที่ 6.18 Flickr.com เปนหนึ่งเว็บไซตยอดนิยมในการแสดงผลงานตัวอยาง สามารถแบงหมวดของรูปภาพในแกลอรี่ของฟลิคเกอร โดยไมจำเปนวารูปจะตองถูกจัดเรียง ตามลำดับเวลาที่อัปโหลดหนาตางการใชงานของฟลิคเกอรนั้นงายและเปนมิตรกับผูใช

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 210

การนำเสนอผลงานออนไลนบนเว็บไซตสาธารณะ ซึ่งมีจำนวนมาก และเปนที่นิยม ไดแก Dribbble.com, Behance.net, Flickr.com และ Ducked.com เปนเหมือน Social Network ขนาดยอม ที่สามารถติดตามนักออกแบบทานอื่น หรือผูอื่นมาติดตามก็สามารถทำ ได ชวยใหสามารถอัปโหลดผลงานตัวอยางทางเว็บไซต จะจัดรูปแบบใหสวยงามสะอาดตา พร อ มนำเสนอออนไลน ใ ห โ ดยอั ต โนมั ต ิ Ducked.com เป น เว็ บ ไซต ใ นแบบเดี ย วกั บ Behance.net ซึ ่ ง สามารถปรั บ แต ง การแสดงผลงานตั ว อย า งเพิ ่ ม เติ ม ได Tumblr.com เปนเว็บบล็อกที่เนนการแชรรูปภาพ ลิงก และขอความสั้นๆ ในเว็บไซตไดทำเบอรนักแสดง ผลงานตามลำดับเวลา และมีธีมใหเลือกใชในการแสดงผลงาน อีกทั้ง ยังงายตอการอัพเดท ผลงานที่จะนำมาแสดง 6.5.4 ตัวอยางการอัปโหลดผลงานเพื่อนำเสนอบนเว็บไซต issuu.com เมื่อนักออกแบบไดสรางสรรคผลงานแลว สิ่งสำคัญคือการนำเสนอใหผูรับสาร ไดสามารถนำไปใช และไดประโยชนจากสิ่งที่จัดทำมา หากนักออกแบบไมมีความรูดานการ ออกแบบเว็บไซตดวยตนเอง ปจจุบันมีเว็บไซตสาธารณะจำนวนมากที่เปดใหบริการในการฝาก ผลาน เพียงผูใชงานลงทะเบียนสมัครใชงาน และอัปโหลดผลงานขึ้นบนเว็บไซต จะสามารถ นำเสนอ บันทึกเก็บไว ดาวนโหลดมาใชงาน และแบงปน (Share) ผลงานได ตัวอยางเว็บไซตที่ ใหบริการอัปโหลดไฟลสื่อ เพื่อเผยแพรผลงานในรูปแบบดิจิทัล เชน งานนำเสนอ สื่อสิ่งพิมพ อิเล็กทรอนิกส ดวยรูปแบบไฟล PDF โดยการนำเสนอผลงานผานชองทาง ออนไลนดวยเว็บไซต เชน slideshare.net, fliphtml5.com, flipsnack.com, issuu.com เปนตน ในที่นี้จะเป น การยกตัวอยางการอับโหลดไฟลสื่อสิ่งพิมพอิเล็กทรอนิกสบนเว็บไซต issuu.com ซึ่งมีขั้นตอน ดังนี้ 6.5.4.1 เตรียมงานสื่อสิ่งพิมพอิเล็กทรอนิกส (e-Book) ที่ตองการอัปโหลด ลงเว็บไซต โดยบันทึกเปนไฟล .pdf แบบหนาเดี่ยว และเปดเว็บไซต issuu.com

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 211

Log in

ภาพที่ 6.19 ตัวอยางการเขาใชงานเว็บไซต issuu.com ที่มา : Issuu (2021) จากภาพที่ 6.19 เปนภาพของการเปดเว็บไซต และแสดงหนาโฮมเพจ issuu.com ซึ่ง ประกอบดวยเมนูตาง ๆ ใหผูใชง านเขาถึง เมื่อตองการเขาไปอานเนื้อหาในเว็บไซต หรือ อัปโหลดผลงานขึ้นไปเผยแพร ใหเลือกที่ Login ลงทะเบียนเชื่อมตอเพื่อใชงาน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 212

6.5.4.2 ขั้นตอนการ Log in เขาสูระบบ ผูใชสามารถเลือกรูปแบบการเชื่อมตอ ดังภาพ

เลือกรูปแบบการเชื่อมตอ

ภาพที่ 6.20 การเลือกรูปแบบการเชื่อมตอ ที่มา : Issuu (2021) จากภาพที่ 6.20 เปนภาพของการ Log in เขาสูระบบ ผูใชสามารถเลือกรูปแบบการ เชื่อมตอ ซึ่งมีรายการใหเลือก ไดแก Log in ผาน Facebook, Log in ผาน GMAIL หรือ Log in ผาน Username Password หากเลือกสวนนี้ใหทำการกด SIGN IN เพื่อเขาใชงาน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 213

6.5.4.3 คลิก UPLOAD เพื่อทำการเลือกไฟลที่ตองการนำขึ้นไปเผยแพร

UPLOAD

ภาพที่ 6.21 การอัปโหลด (UPLOAD) ที่มา : Issuu (2021) จากภาพที่ 6.21 เปนภาพของหนาจอที่ไดทำการลงทะเบียน (SIGN IN) เขามา จะ ปรากฏชื่อผูใชงาน และรายการเมนูใหเลือกใชงาน เมื่อตองการอัปโหลด (UPLOAD) ไฟลงาน ใหคลิกที่ปุม UPLOAD เพื่อทำการเลือกไฟลที่ตองการนำขึ้นไปเผยแพร

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 214

6.5.4.4 คลิกเลือกไฟลที่จะอัปโหลด (Select file to Upload) จากนั้นจะปรากฏรายการ ชองทางที่จะเลือกไฟลเพื่ออัปโหลด ดังภาพ

เลือกชองทางการ อัปโหลดไฟล

ภาพที่ 6.22 ชองทางที่จะเลือกไฟลเพื่ออัปโหลด ที่มา : Issuu (2021) จากภาพที่ 6.22 เปนภาพของหนาจอที่ไดทำการลงทะเบียน (SIGN IN) จะปรากฏชื่อ ผูใชงาน และรายการเมนูใหเลือกใชงาน เมื่อตองการอัปโหลด (UPLOAD) ไฟลงานใหคลิกที่ปุม UPLOAD เพื่อทำการเลือกไฟลที่ตองการนำขึ้นไปเผยแพร โดยเลือกชองทางที่จะอัปโหลดไฟล งานเขามา เชน จากอุปกรณของพิวเตอรของผูใช (Your device) จากดรอปบ็อก (Dropbox) หรือจากกูเกิลไดรฟ (Google Drive)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 215

6.5.4.5 ทำการเลือกไฟลที่ตองการนำไปเผยแพร โดยเลือกไฟลรูปแบบ PDF ดังภาพ เลือกไฟล

ภาพที่ 6.23 การเลือกไฟลเพื่ออัปโหลด ที่มา : Issuu (2021) จากภาพที่ 6.23 เปนภาพของหนาจอใหทำการเลือกไฟลที่ตองการนำไปเผยแพร โดย เลือกไฟลรูปแบบ PDF ที่เตรียมไว ในที่น ี้เปนสื่อสิ่งพิมพอิเล็กทรอนิกส (e-Book) ชื่อไฟล e-Book.pdf เมื่อเลือกไฟลที่ตองการแลว จากนั้นคลิกที่ปุม Open

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 216

6.5.4.6 เมื่ออัปโหลดเสร็จแลวใหตั้ง ชื่อไฟล และกรอกรายละเอียดตาง ๆ ใหครบถวน แลวกดปุม Publish now เพื่อทำการเผยแพร ดังภาพ

Publish now

กรอกรายละเอียดใหครบถวน

ภาพที่ 6.24 การกรอกรายละเอียด ที่มา : Issuu (2021) จากภาพที่ 6.24 เปนภาพของหนาจอเมื่อทำการอัปโหลดเสร็จเรียยรอยแลว ใหกรอก รายละเอียดของสื่อสิ่งพิมพที่ตองการเผยแพร เชน ชื่อเรื่อง (Title) รายละเอียด (Description) ประเภทสื่อ(Type) เมื่อกรอกขอมูลครบถวนแลว ใหคลิกที่ปุม Publish now เพื่อทำการ เผยแพร

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 217

6.5.4.7 หนาจอเมื่อกรอกรายละเอียดตาง ๆ ครบถวนแลวกดปุม Publish Now จะ ปรากฏผลงานที่อัปโหลดเสร็จเรียบรอยแลว ดังภาพ

ภาพที่ 6.25 ผลงานที่อัปโหลดเสร็จเรียบรอยแลว ที่มา : Issuu (2021) จากภาพที่ 6.25 เปนภาพของผลงานสื่อสิ่งพิมพอิเล็กทรอนิกส (e-Book) ที่อัปโหลด เสร็จเรียบรอยแลว จะปรากฏรายการใหเลือกดำเนินการตอ เชน เผยแพรผลงานบนเว็บไซต issuu.com แบงปนบนสื่อสังคมออนไลน (Share on social) และ เพิ่มไปยังเว็บไซต

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 218

6.5.4.8 หนาจอเมื่อคลิกเผยแพรผลงานบนเว็บไซต issuu.com จะปรากฏ ดังภาพ

ภาพที่ 6.26 เผยแพรผลงานบนเว็บไซต issuu.com ที่มา : Issuu (2021) จากภาพที่ 6.26 เปนภาพของหนาจอเมื่อคลิกเผยแพรผลงานบนเว็บไซต issuu.com สามารถอัปโหลดใหมอีก ครั้ง โดยคลิกที่ Re-upload หากตองการนำไปใชง าน ใหคลิ ก ที่ Dowload และหากตองการชมผลงาน ใหคลิกที่ View live

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การใชงานโปรแกรมกราฟก การเตรียมไฟลและการจัดพิมพ 219

6.5.4.9 หนาจอการแสดงผลงาน หลังจากคลิกที่ View live และเปดแบบเต็มหนาจอ (Full Screen) จะปรากฏดังภาพ

ภาพที่ 6.27 หนาจอการแสดงผลงานแบบเต็มหนาจอ ที่มา : Issuu (2021) จากภาพที่ 6.27 เปนภาพของหนาจอการแสดงผลงานสื่อสิ่งพิมพอิเล็กทรอนิกส (e-Book) แบบเต็มหนาจอ (Full Screen) ผูใชสามารถเปดชมผลงานไดแตละหนา โดยคลิกที่ ลูกศร > และคลิกยอนกลับไดโดยคลิกที่ลูกศร < หรือเลื่อนไปอานยังหนาที่ตองการได

6.6 บทสรุป การใชงานโปรแกรม Adobe Photoshop ซึ่งเปนโปรแกรมพื้นฐานในการออกแบบ กราฟก ที่ใชสำหรับตกแตงภาพถาย และภาพกราฟกไดอยางมีประสิทธิภาพ ไมวาจะเปนงาน ดานสิ่งพิมพ นิตยสาร และงานดานมัลติมีเดีย อีกทั้งยังสามารถตกแตงภาพ (Retouching) และการสรางภาพ ซึ่งเปนที่นิยมสูงมากในขณะนี้ สามารถศึกษาวิธีการใชงานโปรแกรมจาก เครื่องมือและคุณสมบัติ แตเพื่อเปนการฝกทักษะการใชโปรแกรม และฝกทักษะในทำงาน ออกแบบกราฟก ผูเขียนแนะนำใหศึกษาเพิ่มเติม บทที่ 7 การฝกปฏิบัติการ ใชโปรแกรม Adobe Photoshop ซึ่งเปนการแนะนำขั้นตอนกวิธีการออกแบบสื่อประเภทตาง ๆ ใหไ ด ทดลองปฏิบัติ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 220

การใชง านโปรแกรม Adobe Illustrator คือโปรแกรมที่ใชในการวาดภาพ โดยจะ สรางภาพที่มีลักษณะเปนลายเสน หรือที่เรียกวากราฟกเวกเตอร (Vector Graphic) นับไดวา เปนโปรแกรมระดับมืออาชีพที่ใชกันเปนมาตรฐานในการออกแบบระดับสากล สามารถศึกษา วิธีการใชงานโปรแกรมจากเครื่องมือและคุณสมบัติ แตเพื่อเปนการฝกทักษะการใชโปรแกรม และฝกทักษะในทำงานออกแบบกราฟก ผูเขียนแนะนำใหศึกษาเพิ่มเติม บทที่ 8 การฝก ปฏิบัติการ ใชโปรแกรม Adobe Illustrator ซึ่งเปนการแนะนำขั้นตอนวิธีการออกแบบสื่อ ประเภทตาง ๆ ใหไดทดลองปฏิบัติ การจัดเตรียมไฟลในการจัดพิมพ ควรคำนึงถึงปจจัย ดังนี้ โหมดสีและการกำหนดคาสี ระยะหางจากขอบชิ้นงาน และระยะตัดตก ความละเอียดของไฟล เชน ถาเปนภาพกราฟก แบบบิตแมป ตองตั้งคาความละเอียด 300 PPI ขึ้นไป ภาพที่จะนำมาพิมพจึงจะคมชัด แตถา ออกแบบกราฟ ก ด ว ยโปรแกรม Adobe Illustrator หากต อ งนำภาพบิ ต แมปมาใช ควร ตรวจสอบวาไฟลแบบบิตแมปนั้นมีความละเอียดไมนอยกวา 300 PPI รวมทั้งตัวอักษรหรือ ฟอนตควรทำการแปลงฟอนตเปนเวกเตอรกอนนำไปเขาสูขบวนการจัดพิมพ ซึ่งมีประเภทการ พิมพออฟเซ็ท และพิมพดิจิทัลใหพิจารณาเลือกใชตามความเหมาะสม นอกจากการนำเสนอ งานจากการจัดพิมพแลว สามารถเลือกการนำเสนอแบบออนไลน โดยมีการนำเสนอผลงาน ออนไลนบนเว็บไซต และการนำเสนอผลงานออนไลนบนเว็บไซตสาธารณะ ผูใชงานสามารถ ตัดสินใจเลือกวิธีการนำเสนอแบบออนไลน ไดตามความเหมาะสม

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝึ กปฏิ บตั ิ การใช้โปรแกรม Adobe Photoshop โปสเตอร (Poster) เปนสื่อสิ่งพิมพ ที่มีบทบาทตอการประชาสัมพันธมากสื่ อหนึ่ง ทั ้ ง นี้ เพราะโปสเตอร เ ป น สื ่ อ ที ่ ส ามารถเผยแพร ไ ด ส ะดวกกว า งขวาง สามารถเข า ถึ ง กลุมเปาหมายไดทุกพื้นที่ สื่อสารกับผูบริโภคไดทุกเพศ ทุกวัย ทุกระดับการศึกษา มีความ ยืดหยุนในตัวของสื่อเปนอยางดี โปสเตอรนำมาใชในการประชาสัมพันธ โดยมีจุดประสงคเพื่อ บอกกลาว เผยแพร ใหผูดูมีความรูความเขาใจ และปฏิบัติตาม นอกจากนี้ ยังมีการใชเพื่อย้ำ เตือนใจใหรับรูขาวสารที่ตองการสื่อสารไปยังกลุมเปาหมาย 7.1 การออกแบบโปสเตอรขนาด A4 (Poster Design) โปสเตอรเปนสื่อสิ่งพิมพที่มีบทบาทมากในการประชาสัมพันธสามารถเผยแพรไ ด สะดวก และกวางขวาง เขาถึงกลุมบุคคลไดทุกเพศทุกวัย สรางความจดจำใหแกกลุมเปาหมาย ไดเปนอยางดี อีกทั้งยังผลิตงาย ใชงานสะดวก จึงเปนที่นิยมตลอดมา

ภาพที่ 7.1.1 ตัวอยางการออกแบบโปสเตอร ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 222

7.1.1 ความสำคัญของโปสเตอร โปสเตอรเปนใบปดประกาศเพื่อแจงขาวประกาศประชาสัมพันธของขอมูลขาวสาร เพื่อนำเสนอสูสาธารณะ ดังนั้นโปสเตอรจึงเปนงานพิมพดานเดียว ความสำคัญของโปสเตอร มีบทบาทจากอดีต จนถึงปจจุบัน โดยเฉพาะในวงการโฆษณาสินคา ทำใหเกิดความประทับใจ เกิดความเชื่อ ศรัทธา และนำไปสูการแสวงหาขอมูลเพิ่มเติมในเวลาตอไป นอกจากวงการ โฆษณาแลว โปสเตอรยังเปนประโยชนกับวงการอื่นๆ เปนอยางมาก เชน วงการการเมือง การกุศล มูลนิธิตาง ๆ เปนตน 7.1.2 ประโยชนของโปสเตอร สามารถแบงตามลักษณะการนำไปใชงาน ดังนี้ 7.1.2.1 ใช เ ป นเครื ่อ งมื อ ในการโฆษณาและประชาสัม พั นธ ไม ว  า จะเปนการ โฆษณาสินคาหรือบริการตาง ๆ หรือการประชาสัมพันธขาวสารเพื่อใหเกิดการรับรูรวมกัน 7.1.2.2 ใชใ นแวดวงทางการศึกษา เปนสื่อที่ใชในการสื่อสารเพื่อใหเกิดความรู ความเขาใจ ในการอธิบายเนื้อหาประกอบการเรียนรู 7.1.2.3 ใชเปนสื่อการสอนอธิบายเรื่องราวตาง ๆ เพื่อใหเห็นรายละเอียดที่ชัดเจน เปนรูปแบบ การทำโปสเตอรจะชวยเปนสื่อการสอนที่สามารถอธิบายเรื่องราวตาง ๆ ไดเปน อยางดี หากมีการออกแบบที่เหมาะสม 7.1.2.4 ใชนำเสนอผลงานทางวิชาการ เชน การนำเสนองานวิจัยตาง ๆ เพื่อใหผูที่ สนใจสามารถเขาถึง และเขาใจผลงานทางวิชาการไดอยางรวดเร็วและเห็นภาพที่ชัดเจน มากกวาตัวอักษร 7.1.3 ประเภทของโปสเตอร โปสเตอร ม ี ห ลายประเภท ซึ ่ ง แต ล ะประเภทใช ว ิ ธ ี ก ารสื ่ อ สารที ่ แ ตกต า งกั น เพื่อใหเหมาะสมกับสภาพการนำไปใชในจุดประสงคตาง ๆ โดยประเภทของโปสเตอรมี 3 ประเภท ดังนี้ 7.1.3.1 โปสเตอรที่มีเฉพาะภาพ เปนโปสเตอรที่ตองการโฆษณา เพื่อสราง ความสงสั ย ดึ ง ดู ด ความสนใจแก ผ ู  พ บเห็ น ต อ งคิ ด ตาม เนื ่ อ งจากยั ง ไม ก ระจ า ง ในตัวของโปสเตอร ที่โฆษณาภาพยนตรใหม โฆษณาสินคาหรือผลิตภัณฑใหม มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 223

7.1.3.2 โปสเตอรที่มีทั้งภาพและขอความ เปนโปสเตอรที่ตองการโฆษณาเรงเรา ชั ก นำ หรื อ เนน จุด สนใจ หรื อ มี วั ต ถุป ระสงค ท ี ่จ ะใหผ ู  พบเห็ น ทำอะไร ที ่ ไ หน เวลาใด และเมื่อดูแลวทำแลวจะเกิดผลอยางไรตามมา.โปสเตอรลักษณะนี้สามารถแบงออกเปน 2 แบบ คือ 1) แบบเชิญชวนใหปฏิบัติตาม ไดแก โปสเตอรรณรงค การจัดงาน การจัดนิทรรศการ โฆษณาสินคา 2) แบบใหผูดูเกิดอาการตอตาน หรือขัดแยง ไดแก โปสเตอรปลุกระดมมวลชน เพื ่ อ การรวมพลั ง การปฏิ ว ั ต ิ เมื ่ อ เห็ น โปสเตอร แ ล ว จะเกิ ด ความคิ ด เห็ น ต า ง ๆ ขึ้ น ไมวาจะทางบวกหรือลบ สุดทายจะเกิดการรวมพลังตอสู ฝายที่มีพลังมากกวาจะชนะ 3) โปสเตอร ท ี ่ ม ี แ ต ข  อ ความ เป น โปสเตอร ท ี ่ ม ี ล ั ก ษณะคล า ยกั บ การแจ ง ข า ว การแจ ง ความ หรื อ ประกาศ เพื ่ อ ให ร ู  ว  า ใคร จะทำอะไร ที่ ใ ด เมื ่ อ ไหร และจะมี ผ ล อยางไรเทานั้น เชน โปสเตอรงานแสดงนิทรรศการ ละคร ดนตรี เปนตน 7.1.4 ขนาดกระดาษ และกระดาษที่ใชพิมพโปสเตอรมาตรฐาน โปสเตอรมีหลายขนาดขึ้นอยูกับวัตถุประสงค และการออกแบบ เพื่อใหการใชพื้นที่ ของกระดาษเกิดความคุมคาที่สุด โดยที่ไมตองเขียนกระดาษทิ้งใหเสียประโยชน นักออกแบบ จะออกแบบใหรองรับกับกระดาษขนาดมาตรฐานที่ใชพิมพมากที่สุด 7.1.4.1 ขนาดกระดาษ ที่นิยมใชพิมพโปสเตอร ดังนี้ 1) ขนาด 210x297 มิลลิเมตร (A4) 2) ขนาด 297x420 มิลลิเมตร (A3) 3) ขนาด 420x594 มิลลิเมตร (A2) 4) ขนาด 594x840 มิลลิเมตร (A1) 7.1.4.2 ชนิดของกระดาษที่นิยมใชพิมพโปสเตอร ดังนี้ 1) กระดาษอารตมัน 130x160 แกรม 2) กระดาษอารตมัน 190x310 แกรม 3) กระดาษปอนด 80-120 แกรม

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 224

7.1.5 องคประกอบสำคัญของโปสเตอร โปสเตอรโดยทั ่วไปไมว  าขนาดเล็ก หรือขนาดใหญ จะมาจากประเทศใดก็ ต าม สวนใหญจะมีองคประกอบสำคัญ ดังนี้ 7.1.5.1 พาดหัว หัวเรื่องหลัก ตองโดดเดน ชัดเจนที่สุด ในประเภทของขอความ โฆษณา มี ไ ว เ พื ่ อ สร า งความสะดุ ด ตา สะกิ ด ใจชวนให ต ิ ด ตามเรื ่ อ งราวต อ ไป ลั ก ษณะการพาดหั ว ที ่ ดี ต อ งมี ข นาดตั ว อั ก ษรที ่ ใ หญ โดดเด น เป น ข อ ความสั้ น กระทัดรัดชวนใหนาติดตาม 7.1.5.2 รูปภาพ เปนแนวคิด หรือลูกเลนที่ตองการสื่อใหตัวสินคา หรือบริการนั้น ทำใหเกิดความสนใจ สื่อความหมาย และเกิดความประทับใจ 7.1.5.3 เนื้อหา เปนตัวอักษรถอยคำประกอบ ทำหนาที่บอกรายละเอียดของสิน คา เพื ่ อ ให เ กิ ด คว ามเข า ใจก ั บ ผู  พ บเห็ น โดยมากจะเป น ข อ คว าม ที ่ เ หม าะ สม สื่อสารตรงไปตรงมาชัดเจน 7.1.5.4 ชื ่ อ ผู  ส นั บ สนุ น หรื อ ผู  ที่ ผ ลิ ต โปสเตอร เป น ส ว นที ่ แ สดงรู ป สิ น ค า เครื่องหมายการคา (Trade Mark) สำหรับโปสเตอรโฆษณา หรือผูสนับสนุน และผูผลิต โปสเตอร น ั ้ น ๆ ส ว นนี ้ จ ะสร า งความน า เชื ่ อ ถื อ มากยิ ่ ง ขึ ้ น ทำให ผ ู  พ บเห็ น ได ร ู  ถ ึ ง ที ่มา ใครสนับสนุน ใครเปนผูผลิต และรับผิดชอบ 7.1.6 ขั้นตอนการออกแบบโปสเตอร ขั้นตอนการออกแบบโปสเตอรใหประสบความสำเร็จ สื่อสารไดดีภาพสวย สะดุดตา สรางความประทับใจแรกเห็น ตั้งแตขั้นตอนการออกแบบจนถึงสงพิมพนั้นมีขั้นตอน ดังนี้ 7.1.6.1 ศึกษารายละเอียด และวิเคราะหขอมูลเบื้องตน นักออกแบบตองสามารถ สรุป จุดประสงคของการออกแบบโปสเตอรวาเปนประเภทใด ทำเพื่ออะไร ใครคือกลุ ม เปาหมาย นำไปใชที่ไหน เชน ทำขึ้นเพื่อประกาศเชิญชวนรวมกิจกรรม แนะนำผลิตภัณฑ หรือบริการ สรุปขนาดของโปสเตอรที่จะออกแบบ 7.1.6.2 นำขอมูลที่ไดมาสรุปเปนแนวคิดการออกแบบ นำขอมูลมาตั้งเปนโจทย และวิ เ คราะห โ จทยใ ห อ อกมาเป น แนวคิ ด การออกแบบ กำหนดเรื ่ อ งราวที ่ จ ะบรรจุลง ไปในโปสเตอร วางแนวทางการออกแบบใหสอดคลองกัน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 225

7.1.6.3 ออกแบบราง นำสวนประกอบตาง ๆ ลองวาดรูปลงในกระดาษ ตองการ เพิ ่ ม เติ ม ส ว นใด หรื อ ต อ งการคิ ด อะไรออกมา ดู ค วามเข า กั น ของส ว นประกอบ ทั้งหมดโดยใชองคประกอบศิลปชวยในการจัด และกำหนดลักษณะของสวนประกอบตาง ๆ ของงานที่เหมาะสม เชน แบบ ขนาดตัวอักษรที่ใชในสวนตาง ๆ ของเนื้อหา 7.1.6.4 ออกแบบบนเครื ่ อ งคอมพิ ว เตอร เป น การทำอาร ต เวิ ร  ค (Artwork) หรื อ เหมื อ นจริ ง โดยนำแบบร า งที ่ ล งตั ว แล ว มาทำให เ ป น ขนาดเท า ของจริ ง ทั ้ ง ภาพ และตัวอักษร ชองไฟ และงานกราฟกทุกอยาง 7.1.6.5 ตรวจทาน และแกไข ตรวจดูความถูกตองของภาษา และความเหมาะสม ของรูปภาพ การจัดวาง และแกไขรายละเอียด และปรับแตงใหถูกตอง 7.1.6.6 เตรียมไฟลเพื่อจัดพิมพ เมื่อจัดอารตเวิรคตนฉบับเปนที่เรียบรอยแลว ก็สามารถสงไฟลงาน และสงโรงพิมพดำเนินตามขั้นตอนการพิมพไดตอไป 7.1.7 การฝกปฏิบัติออกแบบโปสเตอรขนาด A4 (Poster Design) แบงออกเปน 3 ขั้นตอน ดังนี้ 7.1.7.1 ขั้นตอนเตรียมการผลิต (Pre-Production) หนาที่นักออกแบบเมื่อไดรับขอมูลเบื้องตนจากการวิเคราะหปญหา ใหนำขอมูลที่ ไดมาตอบคำถามทั้ง 4 ขอ เพื่อออกแบบแนวคิด ดังนี้ 1) อะไร (What) โจทยใหออกแบบโปสเตอรโฆษณาสินคารานพิซซา ในรูปแบบ ไฟลดิจิทัลนำเสนอบนหนาจอ LCD โดยใชโปรแกรม Adobe Photoshop 2) ที่ใด (Where) โปสเตอรโฆษณาสินคารานพิซซา ขนาด A4 ใชสำหรับ นำเสนอบนหนาจอ LCD ในรานพิซซา หรือหางสรรพสินคา เปนการโฆษณาเชิญชวนใหลูกคา ที่มีความสนใจตองการสั่งพิซซาแบบ Deliverly สามารถสั่งชื้อไดตามหมายเลขโทรศัพ ท ที่ ปรากฏ 3) ใคร (Who) กลุมเปาหมายสำหรับวัยรุน นักศึกษา และบุคคลทั่วไปที่สนใจ รับประทานอาหารจานดวน เชน พิซซา 4) อยางไร (How) ออกแบบโปสเตอรขนาด A4 มีภาพหลักคือพิซซา ขนาด ใหญใหเปนจุดเดน และเห็นไดอยางชัดเจน จัดวางแนวเอียงเพื่อใหดูไมนาเบื่อ ใชตัวอักษรสี ขาวจะทำใหขอความเดนขึ้น เพื่อดึงดูดลูกคา เลือกโทนสีแดงไลเฉดสีไปยังสีเหลือง ใชสีแดง มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 226

เพื่อใหเปนจุดสนใจ และใชสีเหลืองชวยกระตุนการอยากอาหาร ประกอบดวยพาดหัวหลัก ขอความ “PIZZA” สวนเนื้อหาใชตัวอักษรสีแดงบนพื้นหลังสีเหลือง และชื่อผูสนับสนุนคือ โลโกของรานอยูตำแหนงมุมซายดานบน 7.1.7.2 ขั้นตอนการผลิต (Production) เปนการแสดงขั้นตอนและวิธีการ ออกแบบโปสเตอร (Poster Design) อยางละเอียด ดังนี้ 1. ขั้นตอนแรก เปดโปรแกรม Adobe Photoshop ขึ้นมา เริ่มสรางชิ้นงานใหม โดยไปที่เมนู File>New จากนั้น เลือกประเภทไฟลที่เคยเปด (Recent) (ดัง ขอ 1) เลือก ขนาด A4 (ดั ง ข อ 2) ตั ้ ง ชื ่ อ ไฟล ง าน Ad-Pizza เลื อ กลั ก ษณะแนวตั ้ ง (ดั ง ข อ 3) กำหนดคาความละเอียด Resolution เทากับ 300 Pixel/Inch, Color Mode RGB Color (ดังขอ 4) จากนั้นคลิกที่ Create เพื่อสรางงาน (ดังขอ 5) 1

3 2

4

5

ภาพที่ 7.1.2 การสรางชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 227

2. เมื่อคลิกที่ Create จะไดชิ้นงานใหม (ดังขอ 6) จากนั้นใหเลือกเมนู Window แล ว เลื อ กเครื ่ อ งมื อ ในการทำงาน (Tools) (ดั ง ข อ 7) เลื อ กเลเยอร (Layers) แสดงลำชั้นของวัตถุ (ดังขอ 8)

8 6

7

ภาพที่ 7.1.3 ชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564) 3. ทำการเลือกสีพื้นหนา โดยการคลิกที่เครื่องมือสีพื้นหนา (Foreground Color) (ดัง ขอ 9) จากนั้นเลือกสีแดงเลือดหมู (ดังขอ 10) แลวคลิก OK 10

9

ภาพที่ 7.1.4 การเลือกสีพื้นหนา (Foreground Color) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 228

4. ทำการเลือกสีพื้นหลัง โดยการคลิกที่เครื่องมือสีพื้นหลัง (Background Color) (ดังขอ 11) จากนั้นเลือกสีเหลือง (ดังขอ 12) แลวคลิก OK 12

11

ภาพที่ 7.1.5 การเลือกสีพื้นหลัง (Background Color) ที่มา : นุจรี บุรีรัตน (2564) 5. เลื อ กเครื ่ อ งมื อ การไล เ ฉดสี (Gradient Tool) (ดั ง ข อ 13) จากนั้ น เลือกรูปแบบการไลเฉดสี (ดังขอ 14) 14

13

ภาพที่ 7.1.6 การเลือกเครื่องมือการไลเฉดสี (Gradient Tool) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 229

6. เลื อ กรู ป แบบการไล เ ฉดสี จ ากสี พ ื ้ น หน า ไปสี พ ื ้ น หลั ง (Foreground to Background) (ดังขอ 15) 15

ภาพที่ 7.1.7 การเลือกรูปแบบการไลเฉดสี (Gradient Tool) ที่มา : นุจรี บุรีรัตน (2564) 7. เลือกทิศทางการไลเฉดสีแบบสะทอน

(Reflected Gradient) (ดังขอ 16)

16

ภาพที่ 7.1.8 การเลือกทิศทางการไลเฉดสีแบบสะทอน (Reflected Gradient) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 230

8. ลากตำแหนงจากบนสุดไลลงมาลางสุดเพื่อทำการไลเฉดสีจากบนลงลาง (ดังขอ 17) 17

ภาพที่ 7.1.9 การไลเฉดสีจากบนลงลาง ที่มา : นุจรี บุรีรัตน (2564) 9. ภาพที่ไดจากไลเฉดสีจากบนลงลาง จะไดสีแดงเลือดหมูจากระดับเขมสุดอยู ดานบน และคอย ๆ จางลงมาผสมกับสีเหลืองแบบจางไปหาเหลืองเขมลางสุด (ดังขอ 18)

18

ภาพที่ 7.1.10 ภาพที่ไดจากไลเฉดสีจากบนลงลาง ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 231

10. เปดภาพพิซซาที่เตรียมไวขึ้นมาโดยไปที่เมนู File>Open จากนั้นเลือกไฟลที่ ตองการ (ดังขอ 19) แลวคลิก Open (ดังขอ 20) 19

20

ภาพที่ 7.1.11 การเปดไฟลภาพ ที่มา : นุจรี บุรีรัตน (2564) 11. นำภาพพิ ซ ซ า ที ่ เ ตรี ย มไว เ พื่ อ นำมาใช ต ั ด ต อ ให ท ำการย า ยภาพ โดยคลิ ก เครื่องมือเคลื่อนยาย (Move Tool) (ดังขอ 21) จากนั้นทำการยายภาพ โดยใชเมาสลาก ภาพมาวางบนชิ้นงานที่เตรียมไว 21

ภาพที่ 7.1.12 การใชเครื่องมือเคลื่อนยาย ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 232

12. เมื่อทำการยายภาพ โดยคลิกเครื่องมือเคลื่อนยาย (Move Tool) (ดังขอ 22) แลวลากมาวางในชิ้นงาน (ดังขอ 23) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 24) 22 23

24

ภาพที่ 7.1.13 การยายภาพมาวางในชิ้นงาน ที่มา : นุจรี บุรีรัตน (2564) 1 3 . จาก น ั ้ น ปร ั บ ขน า ดภ าพ ใ ห เห ม าะ ส ม โ ดย ไ ปที ่ เม นู แล ว เ ล ื อ ก Edit>FreeTransform หรือใชคียลัด โดยกดปุม Ctrl+T แลวปรับภาพตามตองการ (ดังขอ 25)

25

ภาพที่ 7.1.14 การปรับขนาดภาพใหเหมาะสม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 233

14. เมื่อปรับขนาดภาพไดตามตองการ แลวใหคลิกเครื่องมือเลือกพื้นที่โดยเลื อก จากสีที่ใกลเคียงกัน (Magic Wand Tool) เพื่อทำการเลือกบริเวณที่มีพื้นที่สีขาว (ดังขอ 26)

26

ภาพที่ 7.1.15 การใชเครื่องมือเลือกพื้นที่โดยเลือกจากสีที่ใกลเคียงกัน ที่มา : นุจรี บุรีรัตน (2564) 15. คลิกเมาสบริเวณที่มีพื้นที่สีขาว เพื่อทำการเลือกพื้นที่ซึ่งเปนสีที่ใกลเคียงกัน (ดังขอ 27)

27

ภาพที่ 7.1.16 การเลือกบริเวณพื้นที่สีขาว ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 234

16. เมื ่ อ เลื อ กบริ เ วณพื ้ น ที ่ ส ี ข าวแล ว ให ท ำการลบ โดยกดปุ  ม ลบ (Delete) จะทำใหพื้นที่สีขาวหายไป (ดังขอ 28)

28

ภาพที่ 7.1.17 การลบบริเวณพื้นที่สีขาว ที่มา : นุจรี บุรีรัตน (2564) 17. ภาพที่ไดจากการลบบริเวณพื้นที่สีขาวแลว (ดังขอ 29)

29

ภาพที่ 7.1.18 ภาพที่ไดจากการลบบริเวณพื้นที่สีขาว ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 235

18. สังเกตวาจะยังคงมีบริเวณพื้นที่สีขาวอยูสวนลาง ใหคลิกเครื่องมือเลือกพื้นที่ดวย การเลือกจากสีที่ใกลเคียงกัน (Magic Wand Tool) อีกครั้ง เพื่อทำการลบอีกครั้ง (ดังขอ 30)

30

ภาพที่ 7.1.19 การใชเครื่องมือเลือกพื้นที่ดวยการเลือกจากสีที่ใกลเคียงกัน ที่มา : นุจรี บุรีรัตน (2564) 19. คลิกเมาสบริเวณที่มีพื้นที่สีขาวเพิ่มเติม เพื่อทำการเลือกพื้นที่จากสีที่ใกลเคียงกัน จากนั้นกดปุมลบ (Delete) จะทำใหพื้นที่สีขาวหายไป (ดังขอ 30)

30

ภาพที่ 7.1.20 การใชเครื่องมือเลือกพื้นที่จากสีที่ใกลเคียงกัน ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 236

20. ภาพที่ไดจากการลบบริเวณพื้นที่สีขาวแลว (ดังขอ 31)

31

ภาพที่ 7.1.21 ภาพที่ไดจากการลบบริเวณพื้นที่สีขาวเพิ่มเติม ที่มา : นุจรี บุรีรัตน (2564) 21. เลื อ กเครื ่ อ งมื อ เพื ่ อ ปรั บ ขนาดภาพให เ หมาะสม โดยไปที ่ เ มนู แล ว เลื อ ก Edit>Free Transform หรื อ ใช ค ี ย  ล ั ด โดยกดปุ  ม Ctrl+T แล ว ปรั บ ขนาดและ หมุนภาพใหเอียงตามองศาที่ตองการ (ดังขอ 32)

32

ภาพที่ 7.1.22 การหมุนภาพ ที่มา : นุจรี บุรรี ัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 237

22. ภาพที ่ ไ ด จ ากการหมุ น ตามที ่ ต  อ งการ (ดั ง ข อ 33) จากนั ้ น ให ค ลิ ก ที่ เคร ื ่ อ ง หมายบว ก (+ ) เพ ื ่ อ ทำก าร เพ ิ ่ ม เลเ ย อร  (Cre a te a ne w la y e r ) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 34)

34

33

ภาพที่ 7.1.23 การหมุนรูปภาพ และการเพิ่มเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 23. คลิ ก เครื ่ อ งมื อ สร า งข อ ความแบบแนวนอน (Horizontal Type Tool) เพื่อพิมพขอความ (ดังขอ 35)

35

ภาพที่ 7.1.24 การสรางขอความแบบแนวนอน ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 238

24. พิมพขอความ “PIZZA” กำหนดรูปแบบตัวอักษร และขนาดใหสวยงาม (ดังขอ 36) จากนั้นคลิกที่เครื่องมือสีพื้นหนา (Foreground Color) เพื่อเลือกสีตัวอักษรเปนสีขาว (ดังขอ 37) จากนั้นคลิก OK 36

37

ภาพที่ 7.1.25 การสรางขอความและกำหนดรูปแบบตัวอักษร ที่มา : นุจรี บุรีรัตน (2564) 25. ขอความที่ไดจากการพิมพ จากนั้นใหไปที่เมนู แลวเลือก Edit>Free Transform หรือใชคียลัด โดยกดปุม Ctrl+T เพื่อหมุนขอความใหเอียงตามองศาที่ตองการ (ดังขอ 38) 38

ภาพที่ 7.1.26 การหมุนขอความ ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 239

26. การสร า งเอฟเฟกต ต ั ว อั ก ษร ให ด ั บ เบิ ้ ล คลิ ก ที ่ เ ลเยอร ข อ ความ ที ่ ต  อ งการสร า งเอฟเฟกต (ดั ง ข อ 39) จากนั ้ น ให ค ลิก เครื ่อ งหมายถู กหน า คำวา Drop Shadow (ดั ง ข อ 40) แล ว กำหนดรูป แบบพร อมทั้ ง กำหนดคา ต า ง ๆ ให เ กิ ด เอฟเฟกต กับขอความตามที่ตองการ (ดังขอ 41) จากนั้นคลิกปุม OK 39

41

40

ภาพที่ 7.1.27 การสรางเอฟเฟกตตัวอักษร ที่มา : นุจรี บุรีรัตน (2564) 27. ภาพที่ไดจากการสรางเอฟเฟกตตัวอักษร (ดังขอ 42) 42

ภาพที่ 7.1.28 เอฟเฟกตตัวอักษร ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 240

28. สรางเลเยอรใหมขึ้นมา โดยคลิกที่เครื่องหมายบวก (+) (Create a new layer) จะปรากฏเลเยอรใหมเพิ่มขึ้น (ดังขอ 43)

43

ภาพที่ 7.1.29 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 29. คลิ ก เครื ่ อ งมื อ สร า งข อ ความแบบแนวนอน (Horizontal Type Tool) เพื่อพิมพขอความ (ดังขอ 44)

44

ภาพที่ 7.1.30 การสรางขอความแบบแนวนอน (Horizontal Type Tool) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 241

30. เลือกขอความที่ตองการกำหนดสี (ดังขอ 45) จากนั้นคลิกที่เครื่องมือสีพื้น หนา (Foreground Color) (ดังขอ 46) แลวเลือกสีเหลืองใหแกตัวอักษร (ดังขอ 47) แลวคลิก OK 45

46

47

ภาพที่ 7.1.31 การใสสีใหแกขอความ ที่มา : นุจรี บุรีรัตน (2564) 31. เลื อ กเครื ่ อ งมื อ ปรั บ ขนาดข อ ความให เ หมาะสม โดยไปที ่ เ มนู แล ว เลื อ ก Edit>Free Transform หรือใชคียลัด โดยกดปุม Ctrl+T แลวหมุนขอความใหเอียงตาม องศาที่ตองการ (ดังขอ 48)

48

ภาพที่ 7.1.32 การหมุนขอความ ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 242

32. สรางเลเยอรใหม (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 49) 49

ภาพที่ 7.1.33 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 33. เปดไฟลตัวอยางโลโกที่เตรียมไว โดยไปที่เมนู แลวเลือก File>Open เลือกไฟล ที่ตองการ (ดังขอ 50) จากนั้นคลิก Open 50

ภาพที่ 7.1.34 การเปดไฟลภาพ ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 243

34. ทำการย า ยภาพ โดยคลิ ก เครื่ องมื อเคลื่ อนยา ย (Move Tool) (ดั ง ข อ 51) จากนั้นทำการยายภาพ โดยการลากมาวางในชิ้นงาน 51

ภาพที่ 7.1.35 การยายภาพมาวางในชิ้นงาน ที่มา : นุจรี บุรีรัตน (2564) 35. นำภาพมาวางในชิ้นงาน ในตำแหนงมุมขวาบน จากนั้นไปที่เมนู แลวเลือก Edit> Free Transform หรือใชคียลัด โดยกดปุม Ctrl+T (ดังขอ 52) 52

ภาพที่ 7.1.36 การยายภาพมาวางในชิ้นงาน ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 244

36. ไปที่เมนู เลือก Image>Adjustments>Hue/Saturation เพื่อทำการปรับสีของ ภาพ (ดังรูปที่ 53) 53

ภาพที่ 7.1.37 การปรับสีของภาพ ที่มา : นุจรี บุรีรัตน (2564) 37. เปลี่ยนสีของภาพโดยการเพิ่มคาความเขมของแสง Lightness ใหมีคา +100 (ดังรูป 54) ภาพจะเปลี่ยนจากสีดำเปนสีขาว (ดังรูป 55)

54

55

ภาพที่ 7.1.38 การเปลี่ยนสีภาพ ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 245

38. สรางเลเยอรใหมขึ้นมา (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังรูป 56)

56

ภาพที่ 7.1.39 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 39. คลิกเครื่องมือสรางขอความแบบแนวนอน (Horizontal Type Tool) เพื่อพิมพ ขอความ (ดังขอ 57)

57

ภาพที่ 7.1.40 การสรางขอความแบบแนวนอน (Horizontal Type Tool) ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 246

40. พิมพขอความ “Your Logo” (ดังขอ 58) จากนั้นเลือกสีตัวอักษร โดยการคลิกที่ เครื่องมือสีพื้นหนา (Foreground Color) (ดังขอ 59) เลือกสีขาวใหแกตัวอักษร (ดังขอ 60) แลวคลิก OK 58 60 59

ภาพที่ 7.1.41 การพิมพและการใสสีใหแกขอความ ที่มา : นุจรี บุรีรัตน (2564) 41. ปรับขนาดขอความใหเหมาะสม โดยไปที่เมนู แลวเลือก Edit>Free Transform หรือใชคียลัด โดยกดปุม Ctrl+T แลวปรับขนาดใหไดตามที่ตองการ (ดังขอ 61) 61

ภาพที่ 7.1.42 การปรับขนาดขอความ ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 247

42. สรางเลเยอรใหมขึ้นมา (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 62)

62

ภาพที่ 7.1.43 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 43. คลิกเครื่องมือสรางขอความแบบแนวนอน (Horizontal Type Tool) เพื่อพิมพ ขอความ (ดังขอ 63)

63

ภาพที่ 7.1.44 การเลือกเครื่องมือสรางขอความแบบแนวนอน ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 248

44. พิมพขอความ “For Deliverly” เลือกสีและปรับขนาดขอความใหไดขนาดตาม ที่ตองการ (ดังขอ 64)

64

ภาพที่ 7.1.45 การสรางขอความแบบแนวนอน ที่มา : นุจรี บุรีรัตน (2564) 45. สรางเลเยอรใหม (Create a new layer) โดยคลิกที่เครื่ องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 65)

65

ภาพที่ 7.1.46 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 249

46. คลิกเครื่องมือสรางขอความแบบแนวนอน (Horizontal Type Tool) เพื่อพิมพ ขอความ (ดังขอ 66)

66

ภาพที่ 7.1.47 การสรางขอความแบบแนวนอน ที่มา : นุจรี บุรีรัตน (2564) 47. พิ ม พ ข  อ ความ “089-000-0000” กำหนดรู ป แบบตั ว อั ก ษร และขนาดให สวยงาม (ดังขอ 67)

67

ภาพที่ 7.1.48 การสรางขอความและกำหนดรูปแบบตัวอักษร ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 250

48. เปดภาพโทรศัพทที่เตรียมไวขึ้นมา โดยไปที่เมนู File>Open จากนั้นเลือกไฟลที่ ตองการ (ดังขอ 68) แลวคลิก Open

68

ภาพที่ 7.1.49 การเปดไฟลภาพที่ตองการ ที่มา : นุจรี บุรีรัตน (2564) 49. ทำการยายภาพ โดยคลิกเครื่องมือเคลื่อนยาย (Move Tool) (ดังขอ 69) จาก นั้นทำการยายภาพ โดยการลากมาวางในชิ้นงาน 69

ภาพที่ 7.1.50 การเลือกเครื่องมือเคลื่อนยาย ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 251

50. ทำการปรั บ ขนาดภาพให เ หมาะสม โดยไปที ่ เ มนู แล ว เลื อ ก Edit>Free Transform หรือใชคียลัด โดยกดปุม Ctrl+T (ดังขอ 70)

70

ภาพที่ 7.1.51 การปรับขนาดภาพใหเหมาะสม ที่มา : นุจรี บุรีรัตน (2564) 51. สรางเลเยอรใหมขึ้นมา (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 71)

71

ภาพที่ 7.1.52 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 252

52. คลิ ก เครื ่ อ งมื อ สร า งข อ ความแบบแนวนอน (Horizontal Type Tool) เพื่อพิมพขอความ (ดังขอ 72)

72

ภาพที่ 7.1.53 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 53. คลิกที่เครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectagle Tool) (ดังรูปที่ 73) จากนั้น วาดรูปทรงสี่เหลี่ยมผืนผา (ดังรูปที่ 74)

73

74

ภาพที่ 7.1.54 การวาดรูปทรงสี่เหลี่ยม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 253

54. สรางเลเยอรใหมขึ้นมา (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 75)

75

ภาพที่ 7.1.55 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 55. คลิ ก เครื ่ อ งมื อ สร า งข อ ความแบบแนวนอน (Horizontal Type Tool) เพื่อพิมพขอความ (ดังขอ 76)

76

ภาพที่ 7.1.56 การสรางขอความแบบแนวนอน ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 254

56. ทำการเลือกสีพื้นหนา โดยการคลิกที่เครื่องมือสีพื้นหนา (Foreground Color) (ดังขอ 77) จากนั้นเลือกสีเลือดหมู (ดังขอ 78) แลวคลิก OK

78 77

ภาพที่ 7.1.57 การเลือกสีพื้นหนา (Foreground Color) ที่มา : นุจรี บุรีรัตน (2564) 57. พิมพขอความ “Order Now” กำหนดรูปแบบตัวอักษร และขนาดใหสวยงาม (ดังขอ 79)

79

ภาพที่ 7.1.58 การสรางขอความและกำหนดรูปแบบตัวอักษร ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 255

58. ภาพที่ไดจากการจัดวางขอความเรียบรอยแลว (ดังขอ 80)

80

ภาพที่ 7.1.59 การจัดวางขอความ ที่มา : นุจรี บุรีรัตน (2564) 59. เสร็ จ เรี ย บร อ ยแล ว ให ท ำการบั น ทึ ก ไฟล ใ นกรณี ท ี ่ ต  อ งการแก ไ ขภายหลั ง ใหบัน ทึกเปนไฟลน ามสกุล .psd ซึ่ง เปน ไฟลง านที่ตองเปดแกไ ขดวยโปรแกรม Adobe Photoshop ในครั้งนี้ บันทึกไฟลชื่อ Ad-Pizza.psd (ดังขอ 81) จากนั้นคลิกที่ปุม Save (ดังขอ 82) 81

82

ภาพที่ 7.1.60 การบันทึกไฟลงานสำหรับแกไขได ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 256

7.1.7.3 ขั้นตอนหลังการผลิต (Post-Production) เมื่อออกแบบโปสเตอร และ บันทึกไฟลเพื่อแกไขในภายหลังเสร็จแลว เปนขั้นตอนเตรียมความพรอมสำหรับการนำเสนอ ผลงาน การจัดการฟอนตภ าพใหเ ปน เวกเตอร เพื่อปองกันฟอนตผ ิด ปกติ จ ากที่ ท ำการ ออกแบบไว และการบันทึกไฟลเพื่อนำเสนอผานจอ LCD สามารถใชไฟล Ad-Pizza.jpg และ นอกจากนั้นสามารถบันทึกไฟล (Save a copy) และสงออกไฟล (Export) ไดหลายประเภท เปนภาพแบบบิตแมป เหมาะสำหรับการนำเสนอผานหนาจอคอมพิวเตอร โทรศัพทมือถือ หรือหนาจอ LCD 1. การจั ด การฟอนต ภ าพให เ ป น เวกเตอร ด ว ยโปรแกรม Adobe Photoshop วิธีการแปลงฟอนตเปนเวกเตอร ทำไดโดยเลือกตัวอักษรขอความทั้งหมดในผลงาน แลวไปที่ Layers เลือกฟลเตอรเปน Kind จากนั้น กดที่ไ อคอน T จะแสดงผลเฉพาะเลเยอร ที ่ เ ป น ตัวอักษร ใหกดปุม Shift คางไวแลวเลือกเลเยอรตัวอักษรใหครบทุกเลเยอร เมื่อเลือกเลเยอร จนครบใหคลิกขวา แลวเลือก “Convert to Shape” (ดังขอ 83)

83

ภาพที่ 7.1.61 การแปลงฟอนตเปนเวกเตอร ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 257

2. ทำการล็ อ คข อ ความเพื ่ อป องการขยับ โดยไม ต ั้ ง ใจ ทำได โ ดยเลื อ กตั วอักษร ขอความทั้งหมดในผลงานแลวใหไปที่พาเลท Layers เลือกฟลเตอรเปน Kind จากนั้นกดที่ ไอคอน T ตัวพาเลทจะแสดงผลเฉพาะเลเยอรที่เปนตัวอักษร ใหกดปุมล็อคที่เปนรูปกุญแจ (ดังขอ 84) โปรแกรมจะทำการล็อคขอความไวทั้งหมดทุกเลเยอร

84

ภาพที่ 7.1.62 การล็อคขอความ ที่มา : นุจรี บุรีรัตน (2564) 3. การสงออกไฟล (Export) เพื่อนำไปใชในงานตาง ๆ โดยไปที่เมนู File>Export> Export as… (ดังขอ 85)

85

ภาพที่ 7.1.63 การสงออกไฟล (Export) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 258

4. เลือกรูปแบบไฟลงานที่ตองการนำไปใช โดยเลือกนามสกุลไฟลที่ตองการในชอง Format เชน เลือกไฟลนามสกุล .JPG (ดังขอ 86) จากนั้นคลิกที่ปุม Export (ดังขอ 87) 86

87

ภาพที่ 7.1.64 การเลือกรูปแบบไฟลงานที่ตองการสงออก ที่มา : นุจรี บุรีรัตน (2564) 5. ส ง ออกไฟล ง านโปสเตอร ส ิ น ค า ด ว ยชื ่ อ ไฟล Ad-Pizza.jpg (ดั ง ข อ 88) จากนั้นคลิกที่ปุม Save (ดังขอ 89) 88

89

ภาพที่ 7.1.65 การสงออกไฟลงาน Ad-Pizza.jpg ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 259

6. ผลงานการออกแบบโปสเตอร ข นาด A4 ในลั ก ษณะแนวตั ้ ง ที ่ จ ั ด ทำเสร็ จ เรี ย บร อ ยแล ว สามารถนำไฟล Ad-Pizza.jpg ไปใช ใ นการนำเสนอผ า นทางหน า จอคอมพิวเตอร หรือหนาจอ LCD ซึ่งในตัวอยางไดออกแบบตามรูปทรงของหนาจอ LCD ที่ เปนแนวตั้ง ขนาดหนาจอ 32 นิ้ว (ดังขอ 90) 90

ภาพที่ 7.1.66 ภาพโปสเตอร และตัวอยางการนำเสนอบนหนาจอ LCD ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 260

เฟซบุกแฟนเพจ (Facebook Fanpage) เปนสวนหนึ่งของเฟซบุก (Facebook) ที่ เพิ่มขึ้น มาเพื่อใหผูใชเฟซบุก (Facebook) สรางเพจในสิ่งที่ชื่นชอบ เชน แฟนเพจดารา นักรอง นักแสดง กีฬา ขาวสาร ภาพถาย สื่อสิ่งพิมพ กลุมที่มีความชื่นชอบเหมือนกัน หรือ แฟนเพจประชาสัมพัน ธสิน คา แฟนเพจขายสินคา บริการตาง ๆ เชน ขายสินคาอุปโภค บริโภค และอื่น ๆ อีกมากมาย เพื่อเปนชองทางใหบุคคลที่ใชเฟซบุก (Facebook) ไดรูจักกับ กลุมที่มีความชื่นชอบเหมือนกัน หรือเพื่อขายสินคานั่นเอง ถือเปนชองทางการสื่อสารระหวาง แบรนดกับลูกคาอีกชองทางหนึ่ง 7.2 การออกแบบปกเฟซบุกแฟนเพจ (FaceBook Fanpage Cover Design) Facebook Fanpage เป น หน า เพจ (Page) ที ่ ท าง Facebook พั ฒ นาขึ ้ น มา เพื่อใหสามารถนำไปใชในการประชาสัมพันธ หรือถายทอดเรื่องราวตาง ๆ ที่ตองการ เชน แจงขอมูลขาวสาร กิจกรรม แนะนำผลิตภัณฑ สินคา บริการ หรือเผยแพรขอมูล ความรูตางๆ ใหแกผูที่สนใจ หรือกำลังมองหาในสิ่งตาง ๆ นั้น สามารถใชเฟซบุกแฟนเพจ ไดทั้งในเชิงธุรกิจ การตลาด การบริการ การศึกษา ใหความรู บันเทิง ฯลฯ

ภาพที่ 7.2.1 ตัวอยางการออกแบบปกเฟซบุกแฟนเพจ ที่มา : นุจรี บุรีรัตน (2564) 7.2.1 ความสำคัญของเฟซบุกแฟนเพจ สามารถชวยใหสงเสริมธุรกิจมากขึ้น เชน ขาย ของ ขายอาหาร สถานที ่ ท  อ งเที ่ ย ว ร า นค า กี ฬ า และยั ง มี ธ ุ ร กิ จ อี ก มากมายที ่ ส ร า ง เฟซบุกแฟนเพจเปนของตัวเอง ทำใหเกิดความนาสนใจและคนติดตามแฟนเพจมากยิ ่ง ขึ้น สรางโอกาสเพิ่มลูกคา ผูที่อยากรวมงาน ผูที่สนใจ อีกทั้งยังมีโอกาสที่เฟซบุกแฟนเพจถูกนำไป มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 261

โฆษณาจากเว็บอื่นหรือคนที่ชื่น ชอบนำไปบอกตอกัน ซึ่ง ไมตองเสีย คา โฆษณา นอกจาก นี้เฟซบุกแฟนเพจยังมีเครื่องมือการใชงานที่รองรับการใชงานในเชิงธุรกิจ เชน ระบบรานคา ระบบบริการ ระบบชำระเงินออนไลน ตัดบัตรเครดิต ระบบแชทผาน Messenger ระบบตอบ กลับอัตโนมัติ ระบบจัดการ Admin ระบบสถิติ ระบบโฆษณา ฯลฯ ทั้งนี้เพื่อเปนชองทางหนึ่ง ที่ชวยใหธุรกิจของคุณไดทำการตลาดอยางแข็งแกรง บนทำเลคุณภาพระดับโลกบนเครือขาย สังคมผูใชงานเฟซบุก 7.2.2 หมวดหมูของเฟซบุกแฟนเพจ สามารถแบงออกเปน 6 หมวดหมูใหญๆ ดังนี้ 7.2.2.1 Local Business or Place of interest เปนหมวดหมูที่เกี่ยวกับ รานคา ธุรกิจ หรือ สถานที่สำคัญ ๆ 7.2.2.2 Company, Organization or Institution เปนหมวดหมูที่เกี่ยวกับ บริษัท องคกร หรือ สถาบันตาง ๆ หรือ SME 7.2.2.3 Brand or Product เปนหมวดหมูที่เกี่ยวกับ แบรนดสินคา หรือ ชนิดของ สินคา 7.2.2.4 Artist, Band or Public Figure เปนหมวดหมูที่เกี่ยวกับ ศิลปน ดารา วง ดนตรี และตัวบุคคล 7.2.2.5 Entertainment เปนหมวดหมูที่เกี่ยวกับ ประเภท ธุรกิจความบันเทิง 7.2.2.6 Cause of Topic เปนหมวดหมูที่เกี่ยวกับ เรืองที่นาสนใจ เชน เหตุการณ ใหญ อยาง คนไทยรักชาติ, ตอตานยาเสฟติด เปนตน 7.2.3 เคล็ดลับที่จะชวยใหแฟนเพจดูดี 7.2.3.1 ใชรูปภาพปกที่บงบอกวาธุรกิจของเราคืออะไร เพราะภาพปกจะเปนสิ่งแรก ที่คนที่เขามาในเพจของคุณจะเห็น ยิ่งลูกคาเขาใจไดงายเทาไหร ก็ยิ่งดีตอคุณเทานั้น 7.2.3.2 ใชโลโกเปนรูปโปรไฟลเพื่อใหคนจดจำแบรนดของเราไดงายขึ้น 7.2.3.3 ชองทางติดตอควรใสใหครบ ยิ่งมีชองทางติดตอหลายชองทาง ลูกคาก็จะ ติดตอคุณไดงายขึ้น 7.2.3.4 คำอธิบายรานคาควรสั้น กระทัดรัดและเขาใจงาย 7.2.3.5 กอนที่จะเผยแพรหรือเชิญชวนใหคนมากดไลค ควรโพสเนื้อหาลงบนเพจสัก 2-3 โพสตกอน โดยโพสตแรกอาจจะเปนการทักทายเปดตัวแฟนเพจ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 262

7.2.4 ขนาดหนาปกเฟซบุกแฟนเพจ 7.2.4.1 การออกแบบเพื่อแสดงผลบนคอมพิวเตอร ควรมีขนาดความกวาง เทากับ 820 px. และความสูงเทากับ 312 px.

7.2.4.2 ขนาดหนาปกบนโทรศัพทมือถือ ควรมีขนาดความกวาง เทากับ 560 px. และความสูงเทากับ 312 px.

7.2.5 ขอดีของการมีเฟซบุกแฟนเพจ ในปจจุบันนั้นเรียกไดวาเปนยุคของโซเชียล และถือไดวาจะเปนสิ่ง ที่ ขาด ไมไดสำหรับการใชชีวิตประจำวันของหลาย ๆ คน เชน ใชในการดูหนัง ฟงเพลง ทำธุรกิจ ติดตามขาวสาร และอีกมากมาย สำหรับผูที่มองเห็นโอกาสและนำสิ่งเหลานี้มาใชใหเปน ประโยชน และสรางโอกาส สรางประโยชนใหแกตัวเอง ดวยการใชโลกโซเชียลที่เขาถึงไดงาย ไมยุงยาก เพียงสรางเฟซบุกแฟนเพจที่สามารถทำไดงาย และยังมีประโยชนหลายดาน ดังนี้ 7.2.5.1 สรางชองทางในการทำธุรกิจ เฟซบุกแฟนเพจสามารถชวยใหโปรโมทธุรกิจตาง ๆ เชน ขายของ ขายอาหาร สถานที่ทองเที่ยว รานคา กีฬา และยังมีธุรกิจอีกมากมายที่สรางเฟซบุกแฟนเพจเปน ของ ตัวเอง ทำใหเกิดความนาสนใจและผูติดตามแฟนเพจมากยิ่งขึ้นสรางโอกาสเพิ่มลูกคา ผูที่ อยากรวมงาน ผูที่สนใจ อีกทั้งยังมีโอกาสที่เฟซบุกแฟนเพจของเราถูกนำไปโฆษณาจากเว็บ อื่น ๆ หรือผูที่ชื่นชอบนำไปบอกตอ ๆ กัน เปนการประชาสัมพันธที่ไมเสียคาบริการ 7.2.5.2 จำนวนผูเขาชมเว็บไซตมากขึ้น การที่มีแฟนเพจจะสามารถนำลิงกเว็บไซตประชาสัมพันธลงไปได หากผูที่เขาชมหนา แฟนเพจสนใจอยากดูรายละเอียดตาง ๆ เพิ่มขึ้น สามารถคลิกลิงกเขาเยี่ยมชมเว็บไซตไดทันที และในเว็บไซต ควรจะมี facebook widget คือสวนที่มีไวสำหรับจัดการในสวนของเจาของ รานที่ตองการจะโฆษณาแฟนเพจของราน สามารถนำไปใสในระบบไดโดยนำลิงกมาใส เมื่อ ลูกคาเขามาหนาเว็บไซตจะสามารถคลิกไปดูแฟนเพจได ถือวาเปนการสงเสริมการขายอีก ชองทางหนึ่ง ซึ่งจะชวยใหผูที่เยี่ยมชมเว็บไซตสามารถกดไลกหนาแฟนเพจไดเชนกัน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 263

7.2.5.3 เพิ่มโอกาสใหเว็บไซตติดอันดับการคนหา การมีเนื้อหาเกี่ยวกับบริษัทกระจายอยูในหลากหลายเว็บไซต จะชวยทำใหการคนหา ตามหลั ก การทำงานของระบบค น หาขอ มู ล เสิ ร ช เอนจิ น (Search engine) ผ า นกู เ กิ ้ ลมี ประสิทธิภาพมากยิ่งขึ้น และเมื่อมีผูสนใจสินคา หรือ เว็บไซต จะทำใหเกิดการคนหาจากกลุม ผูที่ไมทราบชองทางการรับขอมูลไดอีกดวย นอกจากนี้โซเซียลเสิรซ (Social search) บริการ ใหมจากกูเกิ้ล เปนการคนหาผานสื่อสังคมออนไลน ชวยใหผูคนหาสามารถอานความเห็นที่ เกี่ยวของกับสินคาหรือบริการของเราไดทันทีจากหนาแสดงผลการคนหา การลิงกแฟนเพจ เขากับเว็บไซตหลักจึงเปนวิธีทมี่ ีประสิทธิภาพในการชวยตอยอดจำนวนผูเขาชมเว็บไซตไดอีก ทางหนึ่ง 7.2.5.4 ไดเปรียบทางการแขงขัน การทำธุรกิจตาง ๆ นั้นยอมมีคูแขงอยูเสมอ หากคูแขงมีจำนวนแฟนเพจที่มาก ควร สรางแฟนเพจใหเกิดประโยชน ดวยการจัดกิจกรรมตาง ๆ และสรางความสัมพันธกับลูกคา 7.2.5.5 การเขาถึงกลุมลูกคาไดโดยตรง ในบางครั้งมีการจัดกิจกรรมตามสถานที่ตาง ๆ สามารถสงขอความถึงลูกคา โดยตรง ซึ่ง สามารถเลือกไดวาจะสง ใหใ ครบาง เชน หากคุณทำกิจกรรมในจัง หวั ด หนึ่ ง สามารถเลือกสงขอความเชิญชวนใหเฉพาะแฟนที่อยูในจังหวัดนั้น ๆ ใหมารวมกิจกรรมชิง รางวัลกับสินคาหรือบริการของเราได และไมใชแคพื้นที่เทานั้น แตอายุ หรือ เพศ สามารถ กำหนดไดเชนกัน 7.2.5.6 สรางกลุมลูกคาไดงาย ไมเสียคาใชจาย การสรางแฟนเพจสามารถอัปเดตขอมูลขาวสาร โพสตขอความ รูปภาพ วีดีโอ เพื่อแชรใหแฟนเพจ และคนอื่นไดเขาชม และรวมแสดงความคิดเห็นโดยที่ไมเสียคาใชจาย ใด ๆ ทำใหสามารถนำขอมูลจากลูกคาไปพัฒนาธุรกิจใหดียิ่งขึ้น 7.2.5.7 สรางความความสัมพันธกับลูกคา การสรางแฟนเพจถือเปนชองทางในการติดตอสื่อสารที่สะดวก และรวดเร็ว ทำใหสามารถพูดคุยโตตอบกับลูกคาไดตลอดเวลา ดังนั้นควรนำขอดีในสวนนี้มาใชในการ ติดตามสนทนากับลูกคาเพื่อแสดงถึงความใสใจตอลูกคาไดทุกเวลา

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 264

7.1.6 การฝกปฏิบัติออกแบบปกเฟซบุกแฟนเพจ (FaceBook Fanpage Cover Design) แบงออกเปน 3 ขั้นตอน ดังนี้ 7.1.6.1 ขั้นตอนเตรียมการผลิต (Pre-Production) หนาที่นักออกแบบเมื่อไดรับขอมูลเบื้องตนจากการวิเคราะหปญหา ใหนำขอมูลที่ ไดมาตอบคำถามทั้ง 4 ขอ เพื่อออกแบบแนวคิด ดังนี้ 1) อะไร (What) โจทย ใ ห อ อกแบบปกเฟซบุ  ก แฟนเพจ โดยใช โ ปรแกรม Adobe Photoshop เพื่อในไปใชทำหนาปกแฟนเพจ 2) ที่ใด (Where) ใชในการนำเสนอผานเฟซบุกแฟนเพจ บนเครือขาย อินเทอรเน็ต สามารถแสดงผลไดทุกที่ที่มีสัญญาณอินเทอรเน็ต 3) ใคร (Who) กลุมเปาหมายสำหรับผูใหญ วัยทำงาน ที่สนใจสั่งสินคาออนไลน ผานเฟซบุกแฟนเพจ และเปนสินคาสำหรับเด็กผูหญิง 4) อยางไร (How) ออกแบบปกดวยขนาด 820x312 Pixels ใชโทนสีสดใสเพื่อ ดึงดูดความสนใจ และใชการตูนเด็กผูหญิงสวมชุดเดรสสีสดใส สื่อถึงสินคาที่ขายคือ ชุดเดรส สำหรับเด็กผูหญิง และมีชื่อราน “The Little Dress Shop” ใชตัวอักษรสีขาวเปนขอความ หลัก บนพื้น หลัง สีมวง สวนรายละเอียดการติดตอผานชองทางตาง ๆ แทนดวยรูปภาพ สัญ ลักษณของชองทางนั้น ๆ โดยใชชื่อที่เหมือนกันทุกชองทาง พรอมทั้ง เบอรโทรศัพท สำหรับติดตอซื้อขายสินคา

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 265

7.1.7.2 ขั้นตอนการผลิต (Production) เปนการแสดงขั้นตอนและวิธีการ ออกแบบปกเฟซบุกแฟนเพจ (FaceBook Fanpage Cover Design) อยางละเอียด ดังนี้ 1. ขั้นตอนแรก เปดโปรแกรม Adobe Photoshop ขึ้นมา เริ่มสรางชิ้นงานใหม โดยไปที่เมนู File>New จากนั้นเลือกประเภทงานนำเสนอผานทางเว็บไซต (Web) (ดังขอ 1) จากนั้นตั้งชื่อไฟลงาน Cover FB และกำหนดขนาดของปกแฟนเพจเฟซบุก ซึ่งมีขนาด ความกว า ง (Width) เท า กั บ 820 Pixels ความสู ง (Height) เท า กั บ 312 Pixels กำหนดกระดาษเปนแนวนอน (ดังขอ 2) กำหนดคาความละเอียด Resolution เทากับ 72 Pixels/Inch (ดังขอ 3) จากนั้นคลิกที่ Create เพื่อสรางงาน (ดังขอ 4) 1 2

3

4

ภาพที่ 7.2.2 การสรางชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 266

2. เมื ่ อ คลิ ก ที ่ Create จะได ช ิ ้ น งานใหม (ดั ง ข อ 5) ให เ ลื อ กเมนู Window จากนั ้ น เลื อกเครื ่ องมื อในการทำงาน (Tools) (ดั ง ข อ 6) และเลื อ กเลเยอร (Layers) แสดงลำชั้นของวัตถุ (ดังขอ 7)

6 7

5

ภาพที่ 7.2.3 ชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564) 3. ทำการเลือกสีพื้นหนา โดยการคลิกที่เครื่องมือสีพื้นหนา (Foreground Color) (ดังขอ 8) จากนั้นเลือกสีชมพู (ดังขอ 9) แลวคลิก OK

9

8

ภาพที่ 7.2.4 การเลือกสีพื้นหนา (Foreground Color) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 267

4. สรางเลเยอรใหมขึ้นมา (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 10)

10

ภาพที่ 7.2.5 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 5. เลือกเครื่องมือเติมสี (Paint Bucket Tool) (ดังขอ 11) เพื่อเติมสีในลำดับตอไป

11

ภาพที่ 7.2.6 การเลือกเครื่องมือเติมสี ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 268

6. เติมสี โดยการคลิกเทสีชมพูลงในพื้นที่บริเวณสีขาวบนเลเยอรที่ตองการ (ดังขอ 12)

12

ภาพที่ 7.2.7 การเติมสีใหแกวัตถุ ที่มา : นุจรี บุรีรัตน (2564) 7. สรางเลเยอรใหมขึ้นมา (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 13)

13

ภาพที่ 7.2.8 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 269

8. คลิกที่เครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectagle Tool) (ดังรูปที่ 14)

14

ภาพที่ 7.2.9 การเลือกเครื่องมือวาดรูปทรงสี่เหลี่ยม ที่มา : นุจรี บุรีรัตน (2564) 9. ทำการเลือกสีพื้นหนา โดยการคลิกที่เครื่องมือสีพื้นหนา (Foreground Color) (ดังขอ15) จากนั้นเลือกสีมวง แลวคลิก OK

15

ภาพที่ 7.2.10 การเลือกสีพื้นหนา (Foreground Color) ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 270

10. เลื อ กรู ป แบบของรู ป ทรงสี ่เ หลี ่ย มโดยกำหนดค า การเติ มสี (Fill) คื อ สี มวง และเสนขอบ(Stroke) ไมตองกำหนดคาสี (ดังขอ 16 ) 16

ภาพที่ 7.2.11 การกำหนดคาสีพื้นหนาและเสนขอบ ที่มา : นุจรี บุรีรัตน (2564) 11. วาดรูปทรงสี่เหลี่ยมสีมวง ดวยขนาดเทาที่ตองการ (ดังขอ17) 17

ภาพที่ 7.2.12 การวาดรูปทรงสี่เหลี่ยม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 271

12. สรางเลเยอรใหมขึ้นมา โดยคลิกที่เครื่องหมายบวก (+) (Create a new layer) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 18)

18

ภาพที่ 7.2.13 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 13. ทำการเลือกสีพื้นหนา โดยการคลิกที่เครื่องมือสีพื้นหนา (Foreground Color) (ดังขอ 19) จากนั้นเลือกสีเหลือง (ดังขอ 20) แลวคลิก OK

20

19

ภาพที่ 7.2.14 การเลือกสีพื้นหนา (Foreground Color) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 272

14. คลิกที่เครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectagle Tool) (ดังรูปที่ 21)

21

ภาพที่ 7.2.15 การเลือกเครื่องมือวาดรูปทรงสี่เหลี่ยม ที่มา : นุจรี บุรีรัตน (2564) 15. วาดรู ป ทรงสี ่ เ หลี ่ ย มสี เ หลื อ ง ด ว ยขนาดเท า ที ่ ต  อ งการ (ดั ง ข อ 22) โดยกำหนดคาการเติมสี (Fill) คือสีเหลือง และเสนขอบ (Stroke) ไมตองกำหนดคาสี (ดังขอ 23) 23

22

ภาพที่ 7.2.16 การกำหนดคาสีพื้นหนาและเสนขอบ ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 273

16. ภาพที่ไดจากการวาดรูปทรงสี่เหลี่ยมสีมวง และสีเหลือง (ดังขอ 24) 24

ภาพที่ 7.2.17 รูปทรงสี่เหลี่ยมสีมวง และสีเหลือง ที่มา : นุจรี บุรีรัตน (2564) 17. สรางเลเยอรใหมขึ้นมา (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 25)

25

ภาพที่ 7.2.18 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 274

18. เปดภาพเด็กผูหญิงที่เตรียมไวขึ้นมา โดยไปที่เมนู File>Open จากนั้นเลือกไฟลที่ ตองการ (ดังขอ 26) แลวคลิก Open (ดังขอ 27)

26

27

ภาพที่ 7.2.19 การเปดไฟลภาพที่ตองการ ที่มา : นุจรี บุรีรัตน (2564) 19. ทำการยายภาพ โดยคลิกเครื่องมื อเคลื่อนย า ย (Move Tool) (ดัง ขอ 28) จากนั้นทำการยายภาพ โดยการลากภาพเด็กผูหญิงมาวางในหนาชิ้นงาน (ดังขอ 29) 28

29

ภาพที่ 7.2.20 การเลือกเครื่องมือเคลื่อนยาย ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 275

20. เมื่อนำภาพที่ไดจากการยายมาวางในหนาชิ้นงานแลว ใหปรับขนาด ภาพให เหมาะสม โดยไปที่เมนู แลวเลือก Edit>Free Transform หรือใชคียลัด โดยกดปุม Ctrl+T (ดังขอ 30) 30

ภาพที่ 7.2.21 การยายภาพมาวางในหนาชิ้นงาน ที่มา : นุจรี บุรีรัตน (2564) 21. สรางเลเยอรใหมขึ้นมา (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 31)

31

ภาพที่ 7.2.22 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 276

22. คลิ ก เครื ่ อ งมื อ สร า งข อ ความแบบแนวนอน (Horizontal Type Tool) เพื่อพิมพขอความ (ดังขอ 32)

32

ภาพที่ 7.2.23 การสรางขอความแบบแนวนอน (Horizontal Type Tool) ที่มา : นุจรี บุรีรัตน (2564) 23. พิมพขอความ “The Little Dress Shop” (ดังขอ 33) จากนั้นทำการเลือกสี ตัวอักษร โดยการคลิกที่เครื่องมือสีพื้นหนา (Foreground Color) เพื่อเลือกสีตัวอักษร เปนสีขาว (ดังขอ 34) แลวคลิก OK 33

34

ภาพที่ 7.2.24 การพิมพและการใสสีใหแกขอความ ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 277

24. การสร า งเอฟเฟกต ต ั ว อั ก ษร ให ด ั บ เบิ ้ ล คลิ ก เลเยอร ข อ ความที ่ ต  อ งการ สรางเอฟเฟกต (ดังขอ 35) จากนั้นใหคลิกเครื่องหมายถูกหนาคำวา Drop Shadow (ดังขอ 36) โดยเลือก Blend Mode : Normal คลิกเลือกสีเงาตัวอักษรเปน สีชมพู (ดัง ขอ 37) แลวกำหนดรูปแบบ พรอมทั้งกำหนดคาตาง ๆ ใหเกิดเอฟเฟกตกับขอความตามที่ตองการ (ดังขอ 38) จากนั้นคลิกปุม OK

35

37 38

36

ภาพที่ 7.2.25 การสรางเอฟเฟกตตัวอักษร ที่มา : นุจรี บุรีรัตน (2564) 25. ภาพที่ไดจากการสรางเอฟเฟกตตัวอักษร (ดังขอ 39)

39

ภาพที่ 7.2.26 ตัวอักษรที่สรางเอฟเฟกต ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 278

26. สรางเลเยอรใหมขึ้นมา (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 40)

40

ภาพที่ 7.2.27 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 27. เป ด ภาพไอคอนโซเชี ย ลมี เ ดีย ที ่เ ตรีย มไว ข ึ้ นมา โดยไปที ่ เ มนู File>Open จากนั้นเลือกไฟลที่ตองการ (ดังขอ 41) แลวคลิก Open (ดังขอ 42) 41 42

ภาพที่ 7.2.28 การเปดไฟลภาพที่ตองการ ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 279

28. ทำการยายภาพ โดยคลิกเครื่องมื อเคลื่อนย า ย (Move Tool) (ดัง ขอ 43) จากนั้นทำการยายภาพ โดยการลากภาพไอคอนโซเชียลมีเดียมาวางในหนาชิ้นงาน (ดังขอ 44) 43

44

ภาพที่ 7.2.29 การเลือกเครื่องมือเคลื่อนยาย ที่มา : นุจรี บุรีรัตน (2564) 29. เมื่อนำภาพที่ไดจากการยายมาวางในหนาชิ้นงานแลว ใหปรับขนาดภาพ ให เหมาะสม โดยไปที่เมนู แลวเลือก Edit>Free Transform หรือใชคียลัด โดยกดปุม Ctrl+T (ดังขอ 45)

45

ภาพที่ 7.2.30 การยายภาพมาวางในหนาชิ้นงาน ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 280

30. สรางเลเยอรใหมขึ้นมา (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 46)

46

ภาพที่ 7.2.31 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 31. พ ิ ม พ  ข  อ ค ว า ม “TheLittleDressShop” ก ำ ห น ด ร ู ป แ บ บ ต ั ว อ ั ก ษ ร และขนาดใหสวยงาม (ดังขอ 47)

47

ภาพที่ 7.2.32 การสรางขอความและกำหนดรูปแบบตัวอักษร ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 281

32. สรางเลเยอรใหมขึ้นมา โดยคลิกที่เครื่องหมายบวก (+) (Create a new layer) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 48)

48

ภาพที่ 7.2.33 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 33. คลิกเครื่องมือสรางรูปทรงวงรี (Ellipse Tool) เพื่อสรางรูปทรงวงรี (ดังขอ 49)

49

ภาพที่ 7.2.34 การใชเครื่องมือสรางรูปทรงวงรี ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 282

34. ทำการเลือกสีพื้นหนา โดยการคลิกที่เครื่องมือสีพื้นหนา (Foreground Color) (ดังขอ 50) จากนั้นเลือกสีฟา (ดังขอ 51) แลวคลิก OK

50

51

ภาพที่ 7.2.35 การเลือกสีพื้นหนา (Foreground Color) ที่มา : นุจรี บุรีรัตน (2564) 35. ทำการปรั บ รู ป ทรงของวงกลม โดยการคลิ ก ที ่ เ ครื ่ อ งมื อ สร า งเส น พาธ ตามการลากเมาสอิสระ (Freeform Pen Tool) (ดัง ขอ 52) จากนั้นคลิกที่จุดตำแหน ง สี่เหลี่ยมเล็กๆ เพื่อทำการปรับรูปทรงของวงกลม (ดังขอ 53)

53 52

ภาพที่ 7.2.36 การเลือกเครื่องมือสรางเสนพาธตามการลากเมาสอิสระ ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 283

36. ทำการปรับรูปทรงของวงกลม โดยการบิดใหเ สนพาธ โคง มนตามรูป ทรงที่ ตองการ (ดังขอ 54)

54

ภาพที่ 7.2.37 การปรับรูปทรงของวงกลมดวยเสนพาธ ที่มา : นุจรี บุรีรัตน (2564) 37. ภาพวงกลมที่ปรับรูปทรงใหโคงมนตามที่ตองการ (ดังขอ 55)

55

ภาพที่ 7.2.38 ภาพวงกลมที่ปรับรูปทรงใหโคงมน ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 284

38. เมื ่ อ ได ภ าพวงกลมที ่ ป รับ รู ป ทรงให โค ง มนตามที ่ต  อ งการแล ว (ดั ง ข อ 56) ทำการคัดลอกเลเยอร โดยคลิกขวาเลเยอรที่ตองการใหเปนตนฉบับ คือเลเยอร Ellipse1 จากนั้นเลือก Duplicate Layer”.. (ดังขอ 57)

56

57

ภาพที่ 7.2.39 การคัดลอกเลเยอร (Duplicate Layer) ที่มา : นุจรี บุรีรัตน (2564) 39. เลเยอร Ellipse1 ที่ทำการคัดลอก จะใหบันทึกชื่อเลเยอรใหม (ดัง ขอ 58) เมื่อตั้งชื่อแลวใหคลิกที่ปุม OK (ดังขอ 59)

59 58

ภาพที่ 7.2.40 การบันทึกชื่อเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 285

40. เมื่อไดภาพที่ทำการคัดลอกแลว ใหใชเครื่องมือเคลื่อนยาย (Move Tool) เพื ่ อ ทำการ ย า ยตำแหน ง ภาพที ่ ไ ด จ ากการคั ก ลอกไปทางฝ  ง ซ า ย ด า น ล  าง และหมุนภาพโดยใชคียลัด Crtl+T หมุนไปตามองศาที่ตองการใหภาพวาง (ดังขอ 60)

60

ภาพที่ 7.2.41 การเคลื่อนยายและหมุนภาพ ที่มา : นุจรี บุรีรัตน (2564) 41. เมื่อคัดลอกภาพเสร็จแลว จะสังเกตเห็นภาพทับไอคอนโซเชียลมีเดีย (ดังขอ 61) ทำไดโดยการคลิกขวาเลเยอรที่ตองการ คือ Layer5 จากนั้นคลิกเมาสคางไว แลวลากไป วางตำแหนงบนสุดของเลเยอร (ดังขอ 62)

62 61

ภาพที่ 7.2.42 การยายเลเยอร ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 286

42. เมื ่ อ ย า ยเลเยอร ไ ปไว บ นสุ ด (ดั ง ข อ 63) จะทำให ภ าพไม ท ั บ และสามารถ มองเห็นไอคอน โซเชียลมีเดีย (ดังขอ 64)

63

64

ภาพที่ 7.2.43 ภาพที่ไดจากการยายเลเยอร ที่มา : นุจรี บุรีรัตน (2564) 43. ทำการคั ด ลอกเลเยอร ภ าพ โดยคลิ ก ขวาเลเยอร ท ี ่ ต  อ งการให เ ป นต น ฉบับ จากนั้นเลือก Duplicate Layer”.. (ดังขอ 65) ทำการคัดลอกตามจำนวนที่ตองการ

65

ภาพที่ 7.2.44 การคัดลอกเลเยอร ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 287

44. เมื่อทำการคัดลอกเลเยอรภาพได ตามจำนวนที่ ตองการ ใหทำการเปลี ่ ย นสี และหมุนภาพปรับขนาดรูปทรงใหไ ดตามตองการ จากนั้นใหสรางเลเยอรใหม (ดังขอ 66) โดยทั้งหมดสามารถทบทวนการใชเครื่องมือไดจากการทำงานกอนหนานี้

66

ภาพที่ 7.2.45 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 45. เป ด ภาพไอคอนไลน ท ี ่ เ ตรี ย มไว ข ึ ้ น มา โดยไปที ่ เ มนู File>Open จากนั้นเลือกไฟลที่ ตองการ (ดังขอ 67) แลวคลิก Open (ดังขอ 68) 67 68

ภาพที่ 7.2.46 การเปดไฟลภาพ ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 288

46. ทำการย า ยภาพมาวางในหนา ชิ้ นงาน และปรั บ ขนาดให เหมาะสม จากนั้น สรางเลเยอรใหม (ดังขอ 69)

69

ภาพที่ 7.2.47 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 47. คลิ ก เครื ่ อ งมื อ สร า งข อ ความแบบแนวนอน (Horizontal Type Tool) เพื ่ อ พิ ม พ ข  อ ความ (ดั ง ข อ 70) จากนั ้ น พิ ม พ ห มายเลขโทรศั พ ท “089-000-0000” กำหนดรูปแบบตัวอักษร และขนาดใหสวยงาม (ดังขอ 71) โดยการคลิกที่เครื่องมือสีพื้น หนา (Foreground Color) เพื่อเลือกสีตัวอักษรเปนสีเขียว (ดังขอ 72) จากนั้นคลิก OK

72

70

71

ภาพที่ 7.2.48 การกำหนดรูปแบบตัวอักษร ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 289

48. เมื่อกำหนดรูปแบบตัวอักษรไดตามตองการแลว (ดังขอ 73) ใหสรางเลเยอร ใหม ข ึ ้ น มา (Create a new layer) โดยคลิ ก ที ่ เครื่ องหมายบวก (+) จะปรากฏเลเยอร ใหมเพิ่มขึ้นมา (ดังขอ 74)

74

73

ภาพที่ 7.2.49 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 49. คลิกที่เครื่องมือที่ใชในการสรางรูปทรงอิสระ (Custom Shape tool) (ดังขอ 75)

75

ภาพที่ 7.2.50 การใชเครื่องมือสรางรูปทรงอิสระ ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 290

50. เลือกรูปทรงอิสระ (Shape) เปนรูปดอกไม (Shape 44) (ดังขอ 76) 76

ภาพที่ 7.2.51 การเลือกประเภทรูปทรงอิสระ ที่มา : นุจรี บุรีรัตน (2564) 51. เมื่อเลือกประเภทรูปทรงอิสระเปนรูปดอกไมแลว จะขึ้นกลองขอความใหระบุ ขนาดความกวาง (Width) และ ความสูง (Height) ของรูปดอกไม กำหนดขนาดตามที่ตองการ (ดังขอ 77)

77

ภาพที่ 7.2.52 การกำหนดขนาดของรูปดอกไม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 291

52. ภาพที่ไดจากการกำหนดขนาดรูปดอกไม ปรับขนาดและจัดวาง ในตำแหนง ที่ เหมาะสม (ดังขอ 78)

78

ภาพที่ 7.2.53 ภาพที่ไดจากการกำหนดขนาดรูปดอกไม ที่มา : นุจรี บุรีรัตน (2564) 53. ทำการบันทึกไฟลใน (ดังขอ 79) จากนั้นคลิกที่ปุม SAVE (ดังขอ 80) 79

80

ภาพที่ 7.2.54 การบันทึกไฟลงานสำหรับแกไขได ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 292

7.1.7.3 ขั้นตอนหลังการผลิต (Post-Production) เปนขั้นตอนเตรียมความพรอม ในการนำไปใชง าน ไดแกการตรวจสอบไฟลง าน ขนาดของปกที่สรางไว ในที่นี้เปนการ แสดงผลทางหนาจอคอมพิวเตอรผานเว็บไซตเฟซบุกแฟนเพจ เปนลักษณะการนำเสนอสื่อใน รูปแบบแนวนอน เนื่องจากไดกำหนดคาตั้งแตเริ่มสรางชิ้นงานที่ถูกตอง จึงสามารถนำงานไป ใชไดอยางถูกตอง แตหากตองการนำไปสื่อกับสื่ออื่น ๆ สามารถทำการสงออกไฟลได ดังนี้ 1. การสงออกไฟลเพื่อนำไปใชในงานตาง ๆ (Export) โดยไปที่เมนู File>Export> Export as… (ดังขอ 81)

81

ภาพที่ 7.2.55 การสงออกไฟลงาน (Export) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 293

2. เลือกรูปแบบไฟลงานที่ตองการนำไปใช โดยเลือกนามสกุลไฟลที่ตองการในชอง Format เชน เลือกไฟลนามสกุล .JPG (ดังขอ 82) จากนั้นคลิกที่ปุม Export (ดังขอ 83) 82

83

ภาพที่ 7.2.56 การเลือกรูปแบบไฟลงานที่ตองการนำไปใชเมื่อตองการสงออก ที่มา : นุจรี บุรีรัตน (2564) 3. ส ง ออกไฟล ง านปกเฟซบุ กแฟนเพจดว ยชื ่อ ไฟล Cover FB.jpg (ดั ง ข อ 84) จากนั้นคลิก ที่ปุม Save (ดังขอ 85)

84

85

ภาพที่ 7.2.57 การสงออกไฟลงาน Cover FB.jpg ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 294

4. ผลงานการออกแบบปกเฟซบุกแฟนเพจ ที่จัดทำเสร็จเรียบรอยแลว (ดังขอ 86) 86

ภาพที่ 7.2.58 ผลงานการออกแบบปกเฟซบุกแฟนเพจ ที่มา : นุจรี บุรีรัตน (2564) 5. การนำผลงานการออกแบบปกเฟซบุกแฟนเพจ ไปใชงานโดยการสรางแฟนเพจ ขึ้นมา ตั้งชื่อแฟนเพจใหสัมพันธธุรกิจ หรือสินคาที่ตองขาย จากนั้นเลือกภาพปกจากไฟลที่ สรางไว คือ ไฟล Cover FB.jpg และนำรูปโปรไฟลที่สรางไว เมื่อกำหนดคาของขนาดหนาปก และรู ป โปรไฟล ถู ก ตอ ง จะทำให ภ าพที ่ น ำมาตั ้ง ค า เป น หน า ปกลงตั วได พ อดี เ หมาะสม ดังตัวอยาง facebook.com/Thelittledressshop2021

ภาพที่ 7.2.59 ตัวอยางการนำปกเฟซบุกแฟนเพจไปใชงาน ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 295

ในปจจุบันอินเทอรเน็ตมีบทบาทและมีความสำคัญตอชีวิตประจำวันเปนอยางมาก เพราะทำใหวิถีชีวิตเราทันสมัยและทันเหตุการณอยูเสมอ เนื่องจากอินเทอรเน็ตมีการเสนอ ขอมูลขาวปจจุบัน และสิ่งตาง ๆ ที่เกิดขึ้นใหผูใชทราบเปลี่ยนแปลงไปทุกวัน สารสนเทศที่ เสนอในอินเทอรเน็ตมีมากมายหลายรูปแบบ เพื่อสนองความสนใจ และความตองการของ ผูใชทุกกลุม อินเทอรเน็ตจึงเปนแหลงสารสนเทศสำคัญสำหรับทุกคน เพราะสามารถคนหา สิ่งที่สนใจไดในทันที โดยไมตองเสียเวลาเดินทางไปคนควาในหองสมุด หรือแมแตการรับรู ขาวสารทั่วโลกก็สามารถอานไดในอินเทอรเน็ตจากเว็บไซตตาง ๆ 7.3 การออกแบบโฮมเพจ (Homepage Design) โฮมเพจ คือคำที่ใชเรียกหนาแรกของเว็บไซต โดยเปนทางเขาหลักของเว็บไซต เมื่อ เปดเว็บไซตนั้นขึ้นมา โฮมเพจ เปรียบเสมือนกับเปนสารบัญ และคำนำที่เจาของเว็บไซตนั้น ไดสรางขึ้น เพื่อใชประชาสัมพันธองคกรของตน นอกจากนี้ ภายในโฮมเพจจะมีเอกสารหรือ ขอความที่เชื่อมโยงตอไปยังเว็บเพจอื่นๆ อีกดวย

ภาพที่ 7.3.1 ตัวอยางการออกแบบโฮมเพจ ที่มา : นุจรี บุรีรัตน (2564) 7.3.1 ความสำคัญของโฮมเพจ มีความสำคัญตอองคกรหรือเว็บไซตที่มีการสราง โฮมเพจนั้นขึ้นมา เนื่องจากเปนหนาแรกของเว็บเพจที่ผูใชทั่วไป จะเขามาเยี่ยมชม ถาการ ออกแบบโฮมเพจเปนที่นาดึงดูดความสนใจ มีสาระความรูที่เปนประโยชน โฮมเพจนั้นจะ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 296

ไดรับการเยี่ยมชมมากขึ้น แตถามีการออกแบบโฮมเพจไมดี นาเบื่อ ไมมีความรูที ่ เ ป น ประโยชน โฮมเพจนั้นก็จะไมมีคนสนใจกลับเขามาเยี่ยมชม 7.3.2 สิ่งสำคัญในการออกแบบเว็บใหตรงกับเปาหมายทำได ดังนี้ 7.3.2.1 เนื้อหา ควรจัดเนื้อหาใหเหมาะสมอานแลวเปนจุดเดนไมมีขอ โตแยงที่จะทำใหเกิดปญหาตามมา 7.3.2.2 รูปแบบ ควรเปนรูปแบบที่เรียบงายดูแลวสบายตา ไมมีลูกเลนมาก เกินไปหรือควรเปนลูกเลนที่ทำใหไมดูมากเกินไป 7.3.2.3 กราฟก ในการทำกราฟกควรทำใหไมดตู าลายมากจนเกินไป ทำใหผู เขามาชมเว็บไซตเกิดการเบื่อไดงาย ถาเว็บไซตมีรูปภาพหรือสิ่งที่ไมจำเปนอยูในเว็บไซต 7.3.3 สวนประกอบที่สำคัญในหนาโฮมเพจ 7.3.3.1 โลโก (logo) เปนสิ่งสำคัญที่จะทำใหผูที่เขามาชมจดจำเว็บไซต อาจ ทำโลโกใหเปนเอกลักษณเฉพาะตัวและวางโลโกไวทางดานซายมุมบน สามารถมองเห็นโลโก หรือสัญลักษณของเราและจดจำเว็บไซตของเราได ควรออกแบบโลโกที่ไมซับซอนกันมีความ เรียบงายและสวยงาม 7.3.3.2 เมนูหลัก (Link menu) จะเปนสิ่ง เชื่อมโยงขอมู ล ที่ ส ำคัญ เป น ที่ รวบรวมของเมนูตาง ๆ หรือขอความ โดยอยูภายใตความสนใจของผูชมเว็บไซต 7.3.3.3 ป า ยโฆษณา (Banner) เว็ บ ไซต ต  า ง ๆ ที ่ น ำโฆษณาไว บ นหน า โฮมเพจ จะตองไดรับความนาเชื่อถือจากโฆษณาที่นำมาวางไว จะชวยกระตุนความสนใจของ ผูอานมากยิ่งขึ้น มีการใชภาพเคลื่อนไหวมาประกอบ การลงโฆษณาภาพเคลื่อนไหวไมควรมี มากจนเกินไป อาจทำใหหนาโฮมเพจรกและไมนาอานควรจัดวางตำแหนงใหเหมาะสม 7.3.3.4 ภาพประกอบและเนื้อหา (Content) เพื่อใหผูที่มาเขาชมอยากจะ เข า มาเยี ่ ม ชมเว็ บ ไซต อ ย า งสม่ ำ เสมอ ควรอั ป เดตเนื ้ อ หาและภาพประกอบให ใ หม อ ยู ตลอดเวลา ควรจัดวางเนื้อหาใหเหมาะสมกับผูที่เขามาชม เนื้อหาไมควรจะสั้น หรือยาว จนเกินไป ภาพประกอบควรสวยงาม ไมเปนภาพที่เสี่ยง หรือลอแหลม เพราะผูที่ชมเว็บไซต อาจเปนเด็ก หรือวัยรุน ควรใชภาพที่เหมาะสม สวนขนาดของตัวหนังสือควรอานงาย และไม เล็กหรือใหญจนเกินไป

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 297

7.3.3.5 การใชสีใหเหมาะสมกับหนาโฮมเพจ (Color) ควรใชสีที่ไมฉูดฉาด จนเกินไป ดูแลวสบายตา หรือดูแลวมีความสุขทำใหผูที่พบเห็นรูสึกอยากจะเขามาชมเว็บอีก ครั้ง 7.3.4 ขนาดของเว็บไซต ขนาดของเว็บไซตที่นิยมในปจจุบันเทากับ 1024 X 768 pixels เนื่องจากผูใชนิยมใชจอคอมพิวเตอรขนาดใหญขึ้น เนื่องมาจากราคาจอคอมพิวเตอรที่ ถูกลง การออกแบบเว็บเพจที่ดีนั้น ตองคำนึงถึงกลุมผูชมเปาหมายสวนใหญวาใชจอภาพที่มี ความละเอียด (Resolution) กี่พิกเซล และกำหนดวาจะใหเว็บเพจแสดงผลไดดีบนจอความ ละเอียดเทาใด หากออกแบบเว็บเพจสำหรับหนาจอความละเอียดเทากับเทากับ 1024 × 768 พิกเซล ผูชมที่ใชจอความละเอียดเทากันนี้จะสามารถชมเนื้อหาทั้งหมดไดพอดีเต็ม จอภาพ แต ถ  า ผู  ช มใช จ อความละเอี ย ดเท า กั บ 1280 × 1024 ขนาดของเว็ บ เพจและ องคประกอบตาง ๆ จะเล็กลง และแสดงไมเต็มจอภาพ แตถาออกแบบเว็บเพจสำหรับหนาจอ ความละเอียดเทากับ 1280 × 1024 พิกเซล ผูชมที่ใชจอความละเอียดเทานี้ จะชมไดพอดี เต็มจอภาพ สำหรับผูชมที่ใชจอความละเอียดเทากับ 1024 × 768 หนาเว็บเพจนี้จะลนจอ โดยประเด็นสำคัญที่สุดอยูที่ความกวางของเว็บเพจ ซึ่งไมควรออกแบบใหกวางเกินจอภาพ ของผูชม เพราะจะทำใหตองเลื่อนหนาจอในแนวนอนเพื่อดูเนื้อหาที่ตกไป ซึ่งไมสะดวกเปน อยางยิ่ง สวนทางความสูงนั้นไมเปนปญหานัก ควรใหเนื้อหาที่สำคัญสามารถมองเห็นไดทันที โดยผูชมไมตองเลื่อนหนาจอ 7.3.5 การฝกปฏิบัติออกแบบปกเฟซบุกแฟนเพจ (FaceBook Fanpage Cover Design) แบงออกเปน 3 ขั้นตอน ดังนี้ 7.3.5.1 ขั้นตอนเตรียมการผลิต (Pre-Production) หนาที่นักออกแบบเมื่อไดรับขอมูลเบื้องตนจากการวิเคราะหปญหา ใหนำ ขอมูลที่ไดมาตอบคำถามทั้ง 4 ขอ เพื่อออกแบบแนวคิด ดังนี้ 1) อะไร (What) โจทยใหออกแบบโฮมเพจของเว็บไซต LOVE DOG โดย ใชโปรแกรม Adobe Photoshop ในการออกแบบ 2) ที่ใด (Where) ออกแบบโฮมเพจเพื่ออัปโหลดขึ้นบนเว็บไซต นำเสนอ ผานเครือขายอินเทอรเน็ต สามารถแสดงผลไดทุกที่ที่มีสัญญาณอินเทอรเน็ต มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 298

3) ใคร (Who) กลุมเปาหมายสำหรับบุคคลทั่วไปที่รักสุนัข หรือชอบใน การเลี้ยงดูสุนัข 4) อย า งไร (How) ออกแบบโฮมเพจขนาด 1024x768 pixels ซึ ่ ง เป น ขนาดที่ไดรับความนิยมมากที่สุดในปจจุบัน โดยออกแบบดวยรูปแบบที่เรียบงาย ใชรูปหนา สุนัขขนาดใหญ เพื่อใหเปนจุดเดนและเห็นไดอยางชัดเจน จัดวางมุมลางซาย และใชพื้นหลังสี น้ำตาล เพื่อตองการใหสัมพันธใกลเคียงกับสีขนของสุนัข ใชตัวอักษรสีขาวเปนขอความหลัก ของชื่อราน “LOVE DOG” จะทำใหขอความเดนขึ้น เพื่อดึงดูดใจลูกคา สวนเมนูจัดวางใน ตำแหนงดานบนโดยเรียงลำดับ เวนระยะหางใหเหมาะสม ใชตัวอักษรสีน้ำตาลออนบนพื้น หลังสีขาว โดยเนนที่ขอความ “Home” เพื่อเนนใหแตกตาง เนื่องจากเปนหนาหลัก และชื่อ ผูสนับสนุนคือโลโกของรานที่อยูมุมซายดานบน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 299

7.1.7.2 ขั้นตอนการผลิต (Production) เปนการแสดงขั้นตอนและวิธีการ ออกแบบปกเฟซบุกแฟนเพจ (FaceBook Fanpage Cover Design) อยางละเอียด ดังนี้ 1. ขั้นตอนแรก เปดโปรแกรม Adobe Photoshop ขึ้นมาเริ่มสรางชิ้นงานใหม โดยไปที่เมนู File>New จากนั้นเลือกประเภทงานนำเสนอผานทางเว็บไซต (Web) (ดังขอ 1) จากนั ้ น เลื อ กขนาด Web Minimum (ดั ง ข อ 2) แล ว ตั ้ ง ชื ่ อ ไฟล ง าน Homepage เลือกเปนแนวนอน (ดังขอ 3) กำหนดคาความละเอียด Resolution เทากับ 72 Pixels/Inch (ดังขอ 4) จากนั้นคลิกที่ Create เพื่อสรางงาน (ดังขอ 5) 1 2

3 4

5

ภาพที่ 7.3.2 การสรางชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 300

2. เมื ่ อ คลิ ก ที ่ Create จะได ช ิ ้ น งานใหม (ดั ง ข อ 6) ให เ ลื อ กเมนู Window จากนั ้ น เลื อกเครื ่ องมื อในการทำงาน (Tools) (ดั ง ข อ 7) และเลื อ กเลเยอร (Layers) แสดงลำดับชั้นของวัตถุ (ดังขอ 8)

6

8

7

ภาพที่ 7.3.3 ชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564) 3. ทำการเลือกสีพื้นหนา โดยการคลิกที่เครื่องมือสีพื้นหนา (Foreground Color) (ดังขอ 9) จากนั้นเลือกสีเหลือง (ดังขอ 10) แลวคลิก OK

10

9

ภาพที่ 7.3.4 การเลือกสีพื้นหนา (Foreground Color) ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 301

4. เลือกเครื่องมือเติมสี (Paint Bucket Tool) (ดังขอ 11) เพื่อเติมสีในลำดับตอไป

11

ภาพที่ 7.3.5 การเลือกเครื่องมือเติมสี ที่มา : นุจรี บุรีรัตน (2564) 5. ภาพที่ไดจากการเติมสี (ดังขอ 12) จากนั้นสรางเลเยอรใหม (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 13)

12 13

ภาพที่ 7.3.6 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 302

6. คลิกเครื่องมือสรางรูปทรงวงรี (Ellipse Tool) เพื่อสรางรูปทรงวงรี (ดังขอ 14)

14

ภาพที่ 7.3.7 การใชเครื่องมือสรางรูปทรงวงรี ที่มา : นุจรี บุรีรัตน (2564) 7. สรางรูปทรงวงรี โดยใชเมาสวาดตามขนาดที่ตองการ (ดังขอ 15)

15

ภาพที่ 7.3.8 การสรางรูปทรงวงรี ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 303

8. ปรับรูปทรงวงรีใหเอียงและอยูตำแหนงเยื้องริมบนขวาเพื่อเตรียมนำเมนูมาวางใน ตำแหนงนี้ โดยไปที่เมนู แลวเลือก Edit>Free Transform หรือใชคียลัด โดยกดปุม Ctrl+T แลวหมุนภาพใหเอียงตามองศาที่ตองการ (ดังขอ 16)

16

ภาพที่ 7.3.9 การปรับรูปทรงวงรี ที่มา : นุจรี บุรีรัตน (2564) 9. ปรับรูปทรงวงรีใหเอียงตามองศาที่ตองการ (ดังขอ 17) โดยกำหนดคาการเติมสี (Fill) คือสีขาว และเสนขอบ (Stroke) ไมตองกำหนดคาสี (ดังขอ 18) 17 18

ภาพที่ 7.3.10 การกำหนดคาสีพื้นหนาและเสนขอบ ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 304

10. สร า งเลเยอร ใ หม (Create a new layer) โดยคลิ ก ที ่ เ ครื ่ อ งหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 19)

19

ภาพที่ 7.3.11 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 11. คลิกเครื่องมือสรางขอความแบบแนวนอน (Horizontal Type Tool) เพื่อพิมพ ขอความ (ดังขอ 20)

20

ภาพที่ 7.3.12 การสรางขอความแบบแนวนอน ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 305

12. จากนั้นทำการเลือกสีตัวอักษรโดยการคลิกที่เครื่องมือสีพื้นหนา (Foreground Color) (ดังขอ 21) เพื่อเลือกสีตัวอักษรเปนสีเหลือง (ดังขอ 22) แลวคลิก OK

22

21

ภาพที่ 7.3.13 การใสสีใหแกขอความ ที่มา : นุจรี บุรีรัตน (2564) 13. ทำการคัดลอกเลเยอรขอความ เพื่อใหไดรูปแบบขอความเดียวกัน โดยคลิกขวา เลเยอรที่ตองการใหเปนตนฉบับ คือเลเยอร Home จากนั้นเลือก Duplicate Layer”.. (ดังขอ 23)

23

ภาพที่ 7.3.14 การคัดลอกเลเยอร (Duplicate Layer) ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 306

14. เลเยอร Home ที ่ ท ำการคั ด ลอก จะให บ ั น ทึ ก ชื ่ อ เลเยอรใ หม (ดั ง ข อ 24) เมื่อตั้งชื่อแลวใหคลิกที่ปุม OK (ดังขอ 25)

25

24

ภาพที่ 7.3.15 การบันทึกเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 15. คลิ ก ที ่ เ ครื ่ อ งมื อ เคลื ่ อ นย า ย (Move Tool) ให ค ลิ ก เมาส ค  า งไว เ พื ่ อ ย า ย ขอความที่คัดลอกเลื่อนไปดานขวา โดยการกดปุม Shift เพื่อใหเลื่อนไปในทิศทางตรง (ดังขอ 26)

26

ภาพที่ 7.3.16 การใชเครื่องมือเคลื่อนยาย ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 307

16. เมื ่ อ ย า ยข อ ความที ่ ค ั ด ลอกเลื ่ อ นไปด า นขวาในตำแหน ง ที่ เ หมาะสมแล ว ใหคลิกที่เครื่องมือ สรางขอความแบบแนวนอน (Horizontal Type Tool) (ดัง ขอ 27) เพื่อทำการแกไขขอความ จากคำวา “Home” เปน “Info” (ดังขอ 28)

28

27

ภาพที่ 7.3.17 การแกไขขอความ ที่มา : นุจรี บุรีรัตน (2564) 17. ใหใชการคัดลอกขอความเมนู โดยใชคำสั่ง เชนเดียวกัน ทำการคัดลอกเมนู และเกไขขอความใหครบตามตัวอยางของหนาโฮมเพจ โดยมีขอความของเมนูดังนี้ Home Info Gallery Contact และ FAQ (ดังขอ 29)

29

ภาพที่ 7.3.18 การคัดลอกขอความเมนู ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 308

18. สรางเลเยอรใหม (Create a new layer) โดยคลิกที่เครื่ องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 30)

30

ภาพที่ 7.3.19 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 19. คลิกที่เครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectagle Tool) (ดังรูปที่ 31)

31

ภาพที่ 7.3.20 การเลือกเครื่องมือวาดรูปทรงสี่เหลี่ยม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 309

20. วาดรูปทรงสี่เหลี่ยมลอมรอบขอความ “Home” กำหนดขนาดที่เหมาะสม (ดังรูปที่ 32)

32

ภาพที่ 7.3.21 การวาดรูปทรงสี่เหลี่ยมลอมรอบขอความ ที่มา : นุจรี บุรีรัตน (2564) 21. กำหนดคุณสมบัติของรูปทรงสี่เหลี่ยม โดยกำหนดคาการเติมสี (Fill) คือสีเหลือง และเสนขอบ (Stroke) ไมตองกำหนดคาสี (ดังขอ 33) จะไดรูปทรงสี่เหลี่ยม ดังที่ปรากฏ (ดังขอ 34)

34

33

ภาพที่ 7.3.22 การกำหนดคุณสมบัติของรูปทรงสี่เหลี่ยม ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 310

22. เมื่อกำหนดคุณสมบัติของรูปทรงสี่เหลี่ยมไดตามที่ตองการแลว จะสังเกตเห็นวา ขอความ และสีของสี่เหลี่ยมเปนสีเดียวกัน ทำใหไมสามารถมองเห็นขอความได (ดังขอ 35) จึงตองเปลี่ยนสีขอความใหม โดยการคลิกที่เครื่องมือสีพื้นหนา (Foreground Color) (ดังขอ 36) เพื่อเลือกสีตัวอักษรเปนสีขาว (ดังขอ 37) แลวคลิก OK แตเนื่องจากเลเยอร Home อยูในตำแหนงที่รูปทรงสี่เหลี่ยมทับอยู (ดังขอ 38) จึงตองเลื่อนเลเยอรขึ้นเปนลำดับตอไป

35 37 36

38

ภาพที่ 7.3.23 การเปลี่ยนสีขอความใหม ที่มา : นุจรี บุรีรัตน (2564) 23. การเลื ่ อ นเลเยอร ข ึ้ น ทำได โ ดยการคลิ ก ขวาเลเยอรท ี ่ ต อ งการ คื อ Home จากนั้นคลิกเมาสคางไวแลวลากไปวางตำแหนงบนสุดของเลเยอร (ดังขอ 39) 39

ภาพที่ 7.3.24 การเลื่อนเลเยอรขึ้น ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 311

24. สรางเลเยอรใหม (Create a new layer) โดยคลิกที่เครื่ องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 40)

40

ภาพที่ 7.3.25 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 25. เปดภาพสุน ัขที่เตรียมไวขึ้นมา โดยไปที่เมนู File>Open จากนั้นเลือกไฟล ที่ตองการ (ดังขอ 41) แลวคลิก Open (ดังขอ 42)

41 42

ภาพที่ 7.3.26 การเปดไฟลภาพที่ตองการ ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 312

26. ทำการยายภาพ โดยคลิกเครื่องมื อเคลื่อนย า ย (Move Tool) (ดัง ขอ 43) จากนั้นทำการยายภาพ โดยการลากภาพสุนัขมาวางในหนาชิ้นงาน (ดังขอ 44) 43

44

ภาพที่ 7.3.27 การเลือกเครื่องมือเคลื่อนยาย ที่มา : นุจรี บุรีรัตน (2564) 27. เมื่อนำภาพที่ไดจากการยายมาวางในหนาชิ้นงานแลว ใหปรับขนาดภาพให เหมาะสม สามารถใช ค ี ย  ล ั ด โดยกดปุ  ม Ctrl+T เมื ่ อ กำหนดขนาดภาพที่ เ หมาะสม แลวใหนำมาวางตำแหนงซายลาง (ดังขอ 45)

45

ภาพที่ 7.3.28 การยายภาพมาวางในหนาชิ้นงาน ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 313

28. ภาพที่ไ ดจากการวางในหนาชิ้นงาน (ดัง ขอ 46) จากนั้นใหสรางเลเยอรใหม (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 47)

47 46

ภาพที่ 7.3.29 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 29. เป ด ภาพโลโก ส ุ น ั ข ที ่ เ ตรี ย มไว ข ึ ้ น มา โดยไปที ่ เ มนู File>Open จากนั้นเลือกไฟลที่ตองการ (ดังขอ 48) แลวคลิก Open (ดังขอ 49)

48

49

ภาพที่ 7.3.30 การเปดไฟลภาพที่ตองการ ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 314

30. ทำการยายภาพ โดยคลิกเครื่องมื อเคลื่อนย า ย (Move Tool) (ดัง ขอ 50) จากนั้นทำการยายภาพ โดยการลากภาพโลโกสุนุขมาวางในหนาชิ้นงาน (ดังขอ 51) 50

51

ภาพที่ 7.3.31 การยายภาพมาวางในหนาชิ้นงาน ที่มา : นุจรี บุรีรัตน (2564) 31. ทำการสร า งเอฟเฟกต ใ ห แ ก ว ั ต ถุ ให ด ั บ เบิ ้ ล คลิ ก ที ่ เ ลเยอร ข  อ ความ ที่ตองการสรางเอฟเฟกต (ดัง ขอ 52) จากนั้นใหคลิกเครื่องหมายถูกหนาคำวา Stroke เพื่อสรางเสนขอบใหแกวัตถุ (ดัง ขอ 53) แลวกำหนดรูปแบบ พรอมทั้ง กำหนดคาตาง ๆ ใหเกิดเอฟเฟกตตามที่ตองการ (ดังขอ 54) เลือกสีขอบ โดยคลิกที่ชอง Color แลวเลือกสีขาว (ดังขอ 55) จากนั้นคลิกปุม OK 52 54 53 55

ภาพที่ 7.3.32 การสรางเอฟเฟกตใหแกวัตถุ ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 315

32. สรางเลเยอรใหม (Create a new layer) โดยคลิกที่เครื่ องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 56)

56

ภาพที่ 7.3.33 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 33. คลิ ก เครื ่ อ งมื อ สร า งข อ ความแบบแนวนอน (Horizontal Type Tool) เพื่อพิมพขอความ (ดังขอ 57)

57

ภาพที่ 7.3.34 การสรางขอความแบบแนวนอน ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 316

34. พิมพขอความ “Your Logo” เลือกสีและปรับขนาดขอความใหไดตามที่ตองการ (ดัง ขอ 58) สรางเลเยอรใหม (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 59) 58

59

ภาพที่ 7.3.35 การพิมพขอความ “Your Logo” ที่มา : นุจรี บุรีรัตน (2564) 35. พิมพขอความ “LOVE DOG” เลือกสีและปรับขนาดขอความใหไดตามที่ตองการ (ดัง ขอ 60) สรางเลเยอรใหม (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 61) 61 60

ภาพที่ 7.3.36 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 317

36. คลิกเครื่องมือสรางรูปทรงหลายเหลี่ยม (Polygon Tool) (ดังขอ 62)

62

ภาพที่ 7.3.37 การใชเครื่องมือสรางรูปทรงหลายเหลี่ยม (Polygon Tool) ที่มา : นุจรี บุรีรัตน (2564) 37. ทำการเลือกสีพื้นหนา โดยการคลิกที่เครื่องมือสีพื้นหนา (Foreground Color) (ดังขอ 63) จากนั้นเลือกสีสม (ดังขอ 64) แลวคลิก OK

64 63

ภาพที่ 7.3.38 การเลือกสีพื้นหนา (Foreground Color) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 318

38. วาดรูปทรงหลายเหลี่ยม

ตำแหนงดานลางขวา (ดังขอ 65)

65

ภาพที่ 7.3.39 การวาดรูปทรงหลายเหลี่ยม ที่มา : นุจรี บุรีรัตน (2564) 39. ทำการปรั บ รู ป ทรงหลายเหลี ่ ย ม โดยการคลิ ก ที ่ เ ครื ่ อ งมื อ สร า งเส น พาธ ตามการลากเมาสอิสระ (Freeform Pen Tool) (ดัง ขอ 66) จากนั้นคลิกที่จุดตำแหน ง สี่เหลี่ยมเล็กๆ เพื่อทำการปรับรูปทรงหลายเหลี่ยม (ดังขอ 67)

66

67

ภาพที่ 7.3.40 การปรับรูปทรงของวงกลมดวยเสนพาธ ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 319

40. ทำการปรับรูปทรงหลายเหลี่ยม โดยหมุนแกนเสนพาธใหโคงมนตามที่ตองการ (ดัง ขอ 68) ใหสรางเลเยอรใหม (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 69)

69

68

ภาพที่ 7.3.41 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 41. เปดภาพไอคอนโซเชียลมีเดียที่เตรียมไวขึ้นมา (ดัง ขอ 70) แลวใชเครื่องมือ เคลื่อนยาย (Move Tool) เพื่อยายภาพมาวางในหนาชิ้นงาน (ดังขอ 71) 71

70

ภาพที่ 7.3.42 การยายภาพมาวางในหนาชิ้นงาน ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 320

42. เมื่อนำภาพมาวางในหนาชิ้นงานแลว ใหปรับขนาดภาพใหเหมาะสม (ดังขอ 72) สรางเลเยอรใหม (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอร ใหมเพิ่มขึ้นมา (ดังขอ 73)

73

72

ภาพที่ 7.3.43 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 43. ไปที ่ เ มนู เลื อ ก Image>Adjustments>Hue/Saturation เพื ่ อ ทำการปรั บ สีของภาพ (ดังรูปที่ 74) 74

ภาพที่ 7.3.44 การปรับสีของภาพ ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 321

44. เปลี่ยนสีของภาพโดยการเพิ่มคาความเขมของแสง Lightness ใหมีคา +100 (ดังรูป 48) ภาพจะเปลี่ยนจากสีดำเปนสีขาว (ดังรูป 75)

75

ภาพที่ 7.3.45 การเปลี่ยนสีภาพ ที่มา : นุจรี บุรีรัตน (2564) 45. สรางเลเยอร ใหม (Create a new layer) โดยคลิกที่ เ ครื่ องหมายบวก (+) จะปรากฏ เลเยอรใหมเพิ่มขึ้นมา (ดังรูป 76)

76

ภาพที่ 7.3.46 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 322

46. พิ ม พ ข  อ ความ “www.youtsite.com” เลื อ กสี แ ละปรั บ ขนาดข อ ความ ใหไ ดตามที ่ต องการ (ดัง ขอ 77) สรางเลเยอร ใ หม (Create a new layer) โดยคลิ ก ที่ เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 78)

78

77

ภาพที่ 7.3.47 การพิมพขอความ “www.youtsite.com” ที่มา : นุจรี บุรีรัตน (2564) 47. พิมพขอความ “LOVE DOG” เลือกสีและปรับขนาดขอความใหไดตามที่ตองการ (ดัง ขอ 79) สรางเลเยอรใหม (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 80)

79

80

ภาพที่ 7.3.48 การพิมพขอความ “LOVE DOG” ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 323

48. คลิกเครื่องมือสรางรูปทรงวงรี (Ellipse Tool) เพื่อสรางรูปทรงวงรี (ดังขอ 81)

81

ภาพที่ 7.3.49 การใชเครื่องมือสรางรูปทรงวงรี ที่มา : นุจรี บุรีรัตน (2564) 49. ทำการเลือกสีพื้นหนา โดยการคลิกที่เครื่องมือสีพื้นหนา (Foreground Color) (ดังขอ 82) จากนั้นเลือกสีขาว (ดังขอ 83) แลวคลิก OK

82

83

ภาพที่ 7.3.50 การเลือกสีพื้นหนา (Foreground Color) ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 324

50. ทำการวาดรูปทรงกลม โดยใชเมาสวาดเสนวงกลมตามขนาดที่ตองการ (ดังขอ 84) จากนั้นกำหนดคารูปแบบ โดยไมตองกำหนดคาการเติมสี (Fill) และเสนขอบ (Stroke) คือสีขาว (ดังขอ 85)

85 84

ภาพที่ 7.3.51 การวาดรูปทรงกลม ที่มา : นุจรี บุรีรัตน (2564) 51. ทำการคลิกที่เครื่องมือสรางเสนพาธตามการลากเมาสอิสระ (Freeform Pen Tool) (ดั ง ข อ 86) จากนั ้ น คลิ ก ที ่ จ ุ ด ตำแหน ง สี ่ เ หลี ่ ย มเล็ ก ๆ เพื ่ อ ทำการปรั บ รู ป ทรง ตามที่ตองการ (ดังขอ 87)

86

87

ภาพที่ 7.3.52 การปรับรูปทรงของวงกลมดวยเสนพาธ ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 325

52. ทำการปรับรูปทรงวงกลม ใหมีลักษณะคลายอุงเทาสุนัข โดยหมุนแกนเสนพาธ ใหโคงมนตามที่ตองการ (ดังขอ 88) ใหสรางเลเยอรใหม (Create a new layer) โดยคลิกที่ เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 89)

89

88

ภาพที่ 7.3.53 การปรับรูปทรงวงกลมดวยเสนพาธ และสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 53. คลิกเครื่องมือสรางรูปทรงวงรี (Ellipse Tool) เพื่อสรางรูปทรงวงรี ใหมีลักษณะ เรี ย วคล า ยรอยเท า สุ น ั ข โดยใช ค ี ย  ล ั ด Ctrl+T ปรั บ ขนาดตามที ่ ต  อ งการ (ดั ง ข อ 91) โดยไมตองกำหนดคาสี (Fill) (ดังขอ 91) และเสนขอบ (Stroke) คือสีขาว (ดังขอ 92)

92

91 90

ภาพที่ 7.3.54 การใชเครื่องมือสรางรูปทรงวงรี และกำหนดคุณสมบัติ ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 326

54. เมื่อไดภาพวงรีมีที่ลักษณะเรียวคลายรอยเทาสุนัขตามที่ตองการแลว (ดังขอ 93) ให ท ำการคั ด ลอกเลเยอร ใ ห ค รบ 4 อั น โดยคลิ ก ขวาเลเยอร ท ี ่ ต  อ งการให เ ป น ต นฉบับ คือเลเยอร Ellipse3 จากนั้นเลือก Duplicate Layer”.. (ดังขอ 94) 93 94

ภาพที่ 7.3.55 การคัดลอกเลเยอร (Duplicate Layer) ที่มา : นุจรี บุรีรัตน (2564) 55. เมื่อไดภาพวงรีมีที่ลักษณะเรียวคลายรอยเทาสุนัขจำนวน 4 อันตามที่ตองการ แลว (ดังขอ 95) แลวใหทำการเลือกเลเยอรที่เปนรอยเทาทั้งหมด จากนั้นคลิกที่สรางกลุมใหม Create a new group (ดังขอ 96)

96

95

ภาพที่ 7.3.56 การสรางกลุมใหม (Create a new group) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 327

56. ภาพที่ไดจากการรวมกลุมของรอยเทาสุนัข (ดังขอ 97) เพื่อใหสามารถคัดลอก เลเยอรและเคลื่อนยายไปดวยกันไดทั้งกลุม (ดังขอ 98)

98

97

ภาพที่ 7.3.57 ภาพที่ไดจากการรวมกลุม ที่มา : นุจรี บุรีรัตน (2564) 57. ทำการคัดลอกเลเยอรของกลุม (Group) ที่สรางไวใหไดจำนวนตามที่ตองการ (ดังขอ 99) แลววางตำแหนงรอยเทาสุนัขรอบขางขอความ “LOVE DOG” (ดังขอ 100)

99

100

ภาพที่ 7.3.58 การคัดลอกเลเยอรของกลุม (Group) ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 328

58. ทำการบันทึกไฟลในกรณีที่ตองการแกไขภายหลัง ใหบันทึกเปนไฟลนามสกุล .psd ซึ่งเปนไฟลงานที่ตองเปดแกไขดวยโปรแกรม Adobe Photoshop ในครั้งนี้บันทึกไฟล ชื่อ Homepage.psd (ดังขอ 101) จากนั้นคลิกที่ปุม Save (ดังขอ 102) 101

102

ภาพที่ 7.3.59 การบันทึกไฟลงานสำหรับแกไขได ที่มา : นุจรี บุรีรัตน (2564) 7.3.5.3 ขั้นตอนหลังการผลิต (Post-Production) เปนขั้นตอนเตรียมความพรอม ในการนำไปใชงาน ไดแกการตรวจสอบไฟลงาน ขนาดไฟลที่สรางไว ในที่นี้เปนการแสดงผล ทางหนาจอคอมพิวเตอรผานเว็บไซต สำหรับหนาจอความละเอียด เทากับ 1024 × 768 พิก เซล เนื่องจากไดกำหนดคาตั้งแตเริ่มสรางชิ้นงานที่ถูกตอง จึงสามารถนำงานไปใชไดอยาง ถูกตอง สามารถบันทึก และทำการสงออกไฟลได ดังนี้

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 329

1. การสงออกไฟลเพื่อนำไปใชในงานตาง ๆ (Export) โดยไปที่เมนู File>Export> Export as… (ดังขอ 103)

103

ภาพที่ 7.3.60 การสงออกไฟลงาน (Export) ที่มา : นุจรี บุรีรัตน (2564) 2. เลือกรูปแบบไฟลงานที่ตองการนำไปใช โดยเลือกนามสกุลไฟลที่ตองการในชอง Format เชน เลือกไฟลนามสกุล .JPG (ดังขอ 104) จากนั้นคลิกที่ปุม Export (ดังขอ 105) 104

105

ภาพที่ 7.3.61 การเลือกรูปแบบไฟลงานที่ตองการนำไปใชเมื่อตองการสงออก ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 330

3. ส ง ออกไฟล ง านโฮมเพจเว็บ ไซต ด ว ยชื ่อ ไฟล Homepage.jpg (ดั ง ข อ 106) จากนั้นคลิกที่ปุม Save (ดังขอ 107) 106

107

ภาพที่ 7.3.62 การสงออกไฟลงาน Homepage.jpg ที่มา : นุจรี บุรีรัตน (2564) 4. ผลงานการออกแบบโฮมเพจ และทำการสงออกไฟลเรียบรอย (ดังขอ 108) 108

ภาพที่ 7.3.63 ผลงานการออกแบบโฮมเพจ ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 331

5. ผลงานการออกแบบโฮมเพจ และตั ว อย า งการอั ป โหลดขึ ้ น บนเว็ บ ไซต web.rmutp.ac.th/mct/mct64_temp20/dog (ดังขอ 109) 109

ภาพที่ 7.3.64 ภาพโฮมเพจที่อัปโหลดขึ้นบนเว็บไซต ที่มา : นุจรี บุรีรัตน (2564) การสรางภาพเคลื่อนไหว โดยการฉายภาพนิ่งหลายภาพตอเนื่องกัน ดวยความเร็วสูง การนำภาพนิ่งมาเรียงตอกันโดยการใชคอมพิวเตอรกราฟกในการคำนวณสรางภาพ เรียกวา แอนิเมชัน ซึ่งหมายถึง การทำใหภาพเคลื่อนไหว และมีชีวิตสวนในทางออกแบบจะเปนการใช ภาพนิ่งหลาย ๆ ภาพที่มีความตอเนื่องกันมาแสดงภาพดวยระยะเวลาที่เหมาะสม ซึ่งเนื้อหา รายละเอียดเกี่ยวกับแอนิเมชันไดกลาวไวในบทที่ 4 หัวขอที่ 4.6 ในบทนี้จึงเปนการนำเสนอ ขั้น ตอนและวิธีการจัดทำแอนิเมชันอยางงาย ดวยการฝกปฏิบัติการใชโปรแกรม Adobe Photoshop เพื่อเรียนรูหลักการทำงานของการสรางงานแอนิเมชัน แลวนำไปประยุกตใช เพื่อพัฒนางานแอนิเมชันตอไป 7.4 การออกแบบแอนิเมชัน (Animation Design) 7.4.1 ความหมายของแอนิเมชัน หมายถึงการสรางภาพเคลื่อนไหว โดยการฉาย ภาพนิ่ง หลายภาพตอ เนื ่องกัน ดว ยความเร็ว สูง การนำภาพนิ่ง มาเรียงตอกันโดยการใช คอมพิวเตอรกราฟกในการคำนวณสรางภาพ เริ่มตนขึ้นจากภาพวาดทีละแผน โดยแตละแผน จะแตกตางจากภาพกอนหนาเล็กนอย จากนั้นจึงดีดหรือพลิก (Flib) ดวยความเร็วสูง ในยุค ตอมาไดมีการสรางแอนิเมชันแบบใหมเรียกวาสต็อปโมชัน (Stop motion) เปนการถายภาพ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 332

โมเดลที่กำลังคอย ๆ ขยับทีละเฟรม (Frame) จนมาถึงยุคปจจุบันเปนที่นิยมใชคอมพิวเตอร สรางแอนิเมชัน

ภาพที่ 7.4.1 ภาพแมวที่วาดเพื่อนำมาสรางแอนิเมชัน (Animation) ที่มา : นุจรี บุรีรัตน (2564) 7.4.2 การฝกปฏิบัติออกแบบแอนิเมชัน (Animation Design) แบงออกเปน 3 ขั้นตอน ดังนี้ 7.4.2.1 ขั้นตอนเตรียมการผลิต (Pre-Production) หนาที่นักออกแบบเมื่อไดรับขอมูลเบื้องตนจากการวิเคราะหปญหา ใหนำขอมูลที่ ไดมาตอบคำถามทั้ง 4 ขอ เพื่อออกแบบแนวคิด ดังนี้ 1) อะไร (What) โจทย ใ ห อ อกแบบแอนิ เ มชั น อย า งงา ย โดยใช โ ปรแกรม Adobe Photoshop เพื่อนำเสนอบนเว็บไซต 2) ที่ใด (Where) ออกแบบแอนิเมชันอยางงาย เพื่ออัปโหลดขึ้นบนเว็บไซต นำเสนอผานเครือขายอินเทอรเน็ต สามารถแสดงผลไดทุกที่ที่มีสัญญาณอินเทอรเน็ต หรือ นำเสนอบนหนาจอคอมพิวเตอรแบบออฟไลน 3) ใคร (Who) กลุมเปาหมายสำหรับวัยเรียน วัยรุน นักเรียน นักศึกษา 4) อยางไร (How) ออกแบบแอนิเมชันอยางงาย เริ่มจากการวาดรูปแมวที่มี ความเปลี่ยนแปลงอยางนอยสามภาพ แลวนำมาทำใหเกิดการเคลื่อนไหว ดวยการเปลี่ยน ภาพในแตละเฟรม และกำหนดเวลาหนวงเฟรมใหภาพเกิดความเคลื่อนตามระยะเวลาที่ ตองการ จากนั้นสามารถนำไปใชบนอินเทอรเน็ต หรือนำเสนอผานหนาจอคอมพิวเตอร

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 333

7.4.2.2 ขั ้ น ตอนการผลิ ต (Production) เป น การแสดงขั ้ น ตอนและวิ ธ ี ก าร ออกแบบแอนิเมชัน (Animation Design) อยางละเอียด ดังนี้ 1. ขั้นตอนแรก เปดโปรแกรม Adobe Photoshop ขึ้นมา เริ่มสรางชิ้นงานใหม โดยไปที่เมนู File>New จากนั้นเลือกประเภทงานนำเสนอผานทางเว็บไซต (Web) (ดังขอ 1) จากนั้นตั้งชื่อไฟลงาน Animation และกำหนดขนาดของผลงาน ซึ่งมีขนาด ความกวาง ( W i d t h ) เ ท  า ก ั บ 3 0 0 Pixels ค ว า ม ส ู ง ( H e i g h t ) เ ท  า ก ั บ 4 0 0 Pixels กำหนดกระดาษเปนแนวตั้ง (ดัง ขอ 2) กำหนดคาความละเอียด Resolution เทากับ 72 Pixels/Inch (ดังขอ 3) จากนั้นคลิกที่ Create เพื่อสรางงาน (ดังขอ 4) 1 2

3

4

ภาพที่ 7.4.2 การสรางชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 334

2. เมื ่ อ คลิ ก ที ่ Create จะได ช ิ ้ น งานใหม (ดั ง ข อ 5) ให เ ลื อ กเมนู Window จากนั้น เลือกเครื่องมือในการทำงาน (Toolbars) (ดัง ขอ 6) และเลือกเลเยอร (Layers) แสดงลำดับชั้นของวัตถุ (ดังขอ 7)

6

5

7

ภาพที่ 7.4.3 ชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564) 3. คลิกที่เมนูแลวเลือก Window>Timeline เพื่อเปดเครื่องมือไทมไลน (ดังขอ 8)

8

ภาพที่ 7.4.4 การเปดใชเครื่องมือไทมไลน ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 335

4. เมื ่ อ เป ด ใช เ ครื ่ อ งมื อ ไทม ไ ลน แ ล ว จะได ภ าพดั ง ที ่ ป รากฏ (ดั ง ข อ 9) จากนั้นใหทำเครื่องหมายถูกหนาเพื่อเลือกใชเครื่องมือสรางเฟรมแอนิเมชัน (Create Frame Animation) (ดังขอ 10)

9 10

ภาพที่ 7.4.5 การเลือกเครื่องมือสรางเฟรมแอนิเมชัน (Create Frame Animation) ที่มา : นุจรี บุรีรัตน (2564) 5. เปดไฟลภาพแมวที่ว าดไว แ ลว (ภาพที่ 1) โดยไปที่เมนู เลือก File>Open จากนั้นเลือกไฟลที่ตองการ (ดังขอ 11) แลวคลิกที่ปุม Open (ดังขอ 12)

11 12

ภาพที่ 7.4.6 การเปดไฟลภาพ ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 336

6. ทำการคลิกเลือกเครื่องมือเคลื่อนยายวัตถุ (Move Tool) (ดังขอ 13) จากนั้นใชเมาส ลากรูปแมวมาวางไวในชิ้นงาน (ดังขอ 14) 13 14

ภาพที่ 7.4.7 การยายภาพ ที่มา : นุจรี บุรีรัตน (2564) 7. เมื่อยายภาพแมว (ภาพที่ 1) มาวางไวในชิ้นงาน จะไดภาพดังที่ปรากฏ (ดังขอ 15)

15

ภาพที่ 7.4.8 ภาพที่ไดจากการยายมาวางไวในชิ้นงาน ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 337

8. เปดไฟลภาพแมวที่ว าดไว แ ลว (ภาพที่ 2) โดยไปที่เมนู เลือก File>Open จากนั้นเลือกไฟลที่ตองการ (ดังขอ 16) แลวคลิกที่ปุม Open (ดังขอ 17)

16 17

ภาพที่ 7.4.9 การเปดไฟลภาพ ที่มา : นุจรี บุรีรัตน (2564) 9. ทำการคลิ ก เลื อ กเครื ่ อ งมื อ เคลื ่ อ นย า ยวั ต ถุ (Move Tool) (ดั ง ข อ 18) จากนั้นใชเมาสลาก รูปแมวมาวางไวในชิ้นงาน (ดังขอ 19) 18 19

ภาพที่ 7.4.10 การยายภาพ ที่มา : นุจรี บุรรี ัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 338

10. เมื่อยายภาพแมว (ภาพที่ 2) มาวางไวในชิ้นงาน จะไดภาพดังที่ปรากฏ (ดังขอ 20)

20

ภาพที่ 7.4.11 ภาพที่ไดจากการยายมาวางไวในชิ้นงาน ที่มา : นุจรี บุรีรัตน (2564) 11. เปดไฟลภาพแมวที่วาดไวแลว (ภาพที่ 3) โดยไปที่เมนู เลือก File>Open จากนั้นเลือกไฟลที่ตองการ (ดังขอ 21) แลวคลิกที่ปุม Open (ดังขอ 22)

21 22

ภาพที่ 7.4.12 การเปดไฟลภาพ ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 339

12. ทำการคลิ ก เลื อ กเครื ่ อ งมื อ เคลื ่ อ นย า ยวั ต ถุ (Move Tool) (ดั ง ข อ 23) จากนั้นใชเมาสลากรูปแมวมาวางไวในชิ้นงาน (ดังขอ 24) 23 24

ภาพที่ 7.4.13 การยายภาพ ที่มา : นุจรี บุรีรัตน (2564) 13. เมื่อยายภาพแมว (ภาพที่ 3) มาวางไวในชิ้นงาน จะไดภาพดังที่ปรากฏ (ดังขอ 25) รวมภาพแมวทั้งหมด 3 ภาพ 3 เลเยอร (ดังขอ 26)

25

26

ภาพที่ 7.4.14 ภาพที่ไดจากการยายมาวางไวในชิ้นงาน ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 340

14. คลิกที่เครื่องมือ Timeline เพื่อสรางเฟรมที่ 1 (ดังขอ 27) ใหคลิกเปด ตาที่ เลเยอรที่ 1 เพื่อใหแสดง นอกนั้นใหทำการปดตา เพื่อทำการซอนไมใหแสดง (ดังขอ 28)

28

27

ภาพที่ 7.4.15 การสรางเฟรมที่ 1 ที่มา : นุจรี บุรีรัตน (2564) 15. คลิ ก ที ่ เ ครื ่ อ งหมายบวก (+) ของ Timeline เพื ่ อ ทำการคั ด ลอกเฟรม (Duplicates Selected frames) เฟรมที่ 1 (ดังขอ 29)

29

ภาพที่ 7.4.16 การคัดลอกเฟรมที่ 1 ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 341

16. เมื่อทำการคัดลอกเฟรมที่ 1 เสร็จแลว จะไดเฟรมที่ 2 ดังภาพที่ปรากฏ (ดังขอ 30) จากนั้นใหคลิกเปดตาที่เลเยอรที่ 2 เพื่อใหแสดงนอกนั้นใหทำการปดตาที่เลเยอร 1 และ เลเยอร 3 เพื่อทำการซอนไมใหแสดง (ดังขอ 31)

31

30

ภาพที่ 7.4.17 การสรางเฟรมที่ 2 ที่มา : นุจรี บุรีรัตน (2564) 17. คลิ ก ที ่ เ ครื ่ อ งหมายบวก (+) ของ Timeline เพื ่ อ ทำการคั ด ลอกเฟรม (Duplicates Selected frames) เฟรมที่ 2 (ดังขอ 32) จะไดเฟรมที่ 3 เพิ่มขึ้นมา (ดังขอ 33) จากนั้นใหคลิกเปดตาที่เลเยอรที่ 3 เพื่อใหแสดง นอกนั้นใหทำการปดตาที่เลเยอร 1 และเลเยอร 2 เพื่อทำการซอนไมใหแสดง (ดังขอ 34)

34

33 32

ภาพที่ 7.4.18 การคัดลอกเฟรมที่ 2 ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 342

18. คลิกที่เครื่องหมายมุมลางของเฟรม (() เพื่อเลือกเวลาหนวงเฟรม (Selects frame delay time) (ดังขอ 35) จากนั้นเลือกเวลาที่ตองการหนวงเฟรมกี่วินาที (ดังขอ 36)

36 35

ภาพที่ 7.4.19 การเลือกเวลาที่ตองการหนวงเฟรม ที่มา : นุจรี บุรีรัตน (2564) 19. เมื่อเลือกเวลาที่ตองการหนวงเฟรมเสร็จแลว สามารถกดปุมแสดงผลแอนิเมชัน (Play Animation) (ดังขอ 37) ภาพแมวจะเคลื่อนไหว จากภาพที่ 1 เปลี่ยนไปถึงภาพที่ภาพ 3 จะเปนภาพเคลื่อนไหวลักษณะแมวกวักมือขึ้นลง

37

ภาพที่ 7.4.20 การกดปุมแสดงผลแอนิเมชัน (Play Animation) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 343

20. กดปุมหยุ ดแอนิ เมชัน (Stops Animation) (ดัง ขอ 38) ภาพแมวจะหยุ ด เคลื่อนไหว

38

ภาพที่ 7.4.21 การกดปุมหยุดแอนิเมชัน (Play Animation) ที่มา : นุจรี บุรีรัตน (2564) 21. ทำการบันทึกไฟลในกรณีที่ตองการแกไขภายหลัง โดยที่เมนู File>Save as.. ใหบัน ทึกเปนไฟลน ามสกุล .psd ซึ่ง เปน ไฟลง านที่ตองเปดแกไ ขดวยโปรแกรม Adobe Photoshop ในครั้งนี้บันทึกไฟลชื่อ Animation.psd (ดังขอ 39) จากนั้นคลิกที่ปุม SAVE (ดังขอ 40) 39

40

ภาพที่ 7.4.22 การบันทึกไฟลงานสำหรับแกไขได ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 344

7.4.2.3 ขั้นตอนหลังการผลิต (Post-Production) เปนขั้นตอนเตรียมความพรอม ในการนำไปใช ง าน ได แ ก ก ารตรวจสอบไฟล ง าน ในที ่ น ี ้ เ ป น การแสดงผลทางหน า จอ คอมพิวเตอรผานเว็บไซต เนื่องจากไดกำหนดคาตั้งแตเริ่มสรางชิ้นงานที่ถูกตอง จึงสามารถนำ งานไปใชไดอยางถูกตอง สามารถบันทึก และทำการสงออกไฟลได ดังนี้ 1. ทำการบั น ทึ ก ไฟล ใ นกรณี ต  อ งการนำไปใช ง านเป น แอนิ เ มชั น (Animation) ใหเลือกประเภทไฟล .GIF (ดังขอ 41) จากนั้นคลิกที่ปุม SAVE (ดังขอ 42)

41

42

ภาพที่ 7.4.23 การเลือกไฟลภาพแอนิเมชัน ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 345

2. เมื่อทำการบันทึกไฟล จะขึ้นกลองขอความแสดงรายละเอียด จากนั้นใหคลิกที่ปุม OK (ดังขอ 43) 43

ภาพที่ 7.4.24 การบันทึกไฟลงานเปนแอนิเมชัน ที่มา : นุจรี บุรีรัตน (2564) 3. ตั ว อย า งการนำไฟล ภ าพแอนิ เ มชั น (Animation) ไปเผยแพร บ นเว็ บ ไซต giphy.com (ดังขอ 44) เมื่อเปดเว็บไซตแลวใหกดปุมเพื่อเลือกไฟล (Choose File) (ดังขอ 45) 44

45

ภาพที่ 7.4.25 การนำไฟลภาพแอนิเมชันไปเผยแพรบนเว็บไซต ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 346

4. ทำการเลือกไฟลแอนิเมชันที่สรางเสร็จแลว ชื่อไฟล Animation.gif (ดังขอ 46) แลวคลิกปุม Open (ดังขอ 47) 46 47

ภาพที่ 7.4.26 การเลือกไฟลแอนิเมชัน ที่มา : นุจรี บุรีรัตน (2564) 5. เมื่อเลือกไฟลแลวใหทำการอัปโหลด โดยกดที่ปุม Upload to GIPHY (ดังขอ 48)

48

ภาพที่ 7.4.27 การอัปโหลดไฟลแอนิเมชัน ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 347

6. ขั้นตอนระหวางการอัปโหลดไฟล จะขึ้นรูปแถบสีเขียว Uploading รอจนกระทั่ง อัปโหลดเสร็จสิ้น (ดังขอ 49)

49

ภาพที่ 7.4.28 ขั้นตอนระหวางการอัปโหลดไฟล ที่มา : นุจรี บุรีรัตน (2564) 7. เมื่ออัปโหลดเสร็จแลว จะไดภาพดังที่ปรากฏ (ดังขอ 50) และสามารถนำไฟล ภาพไปแชรในสื่อออนไลนตางๆ ได (ดังขอ 51)

50 51

ภาพที่ 7.4.29 การอัปโหลดไฟลแอนิเมชันเสร็จสิ้น ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การออกแบบกราฟก 348

8. ตัวอยางการนำลิงกไปใชงาน สามารถคลิกที่หัวขอคัดลอกลิงก (Copy Link) (ดังขอ 52) จะปรากฏลิงกของภาพเคลื่อนไหวที่สามารถนำไปใชงานได (ดังขอ 53) GIF Link : https://media.giphy.com/media/W9zcr4Ws7kGkyfEjU3/giphy.gif

53 52

ภาพที่ 7.4.30 ตัวอยางการนำลิงกไปใชงาน ที่มา : นุจรี บุรีรัตน (2564) 9. กรณีตองการดาวนโหลดไฟลประเภทตาง ๆ สามารถคลิกที่หัวขอมีเดีย (Media) (ดังขอ 54) จะปรากฏลิงกใหดาวนโหลดไฟลประเภทตาง ๆ ไดตามตองการ (ดังขอ 55)

55 54

ภาพที่ 7.4.31 การดาวนโหลดไฟลประเภทตาง ๆ ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Photoshop 349

10. กรณีตองการนำไปใชบนเว็บไซต สามารถคลิกที่หัวขอฝง (Embed) (ดังขอ 56) แลวสามารถคัดลอกโคดจากชอง GIF Embed Code (ดังขอ 57) แลวนำไปวางบนเว็บไซต ในหนาเว็บเพจที่ตองการได

56

57

ภาพที่ 7.4.32 การนำแอนิเมชันไปใชบนเว็บไซต ที่มา : นุจรี บุรีรัตน (2564) 11. ผลงานการออกแบบแอนิเมชัน (Animation) ที่จัดทำเสร็จเรียบรอย (ดังขอ 58) 58

ภาพที่ 7.4.33 การออกแบบแอนิเมชันทีแ่ สดงผลบนอินเทอรเน็ต ที่มา : นุจรี บุรีรัตน

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝึ กปฏิ บตั ิ การใช้โปรแกรม Adobe Illustrator ปจจุบันจะเห็นสัญลักษณ หรือ รูปภาพเล็ก ๆ ถูกนำไปใชกับสิ่งตาง ๆ ไมวาจะเปน บรรจุภัณฑ อาหาร ของใช เว็บไซตตาง ๆ สิ่งนั้นคือ โลโก หรือตราสินคาที่ถูกสรางขึ้นมาเพื่อ บงบอกความเปนตัวแทนของบริษัทตาง ๆ จะเห็นโลโกเหลานี้อยูรอบ ๆ ตัวเรา ตามปาย โฆษณาบนทองถนน หนวยงาน บริษัทตาง ๆ หรือแมแตในหางสรรพสินคา เมื่อเราจะเลือก ซื้อ หรือเลือกชมอะไรจะเห็นโลโกติดอยู ทำใหเราสามารถจดจำสิ่งเหลานั้นไดงายขึ้น และ แสดงถึงความนาเชื่อถือของบริษัทนั้น ๆ 8.1 การออกแบบโลโก (Logo Design) โลโก เ ป น ภาพสั ญ ลั ก ษณ ข องผลิ ต ภั ณ ฑ องค กรหรื อ บริ ษ ั ท ที่ ผ ู  บ ริโ ภคมองเห็น เปนภาพสะทอนระหวางผูบริโภคกับบริษัท สรางความนาเชื่อถือใหแกองคกรไดอยางรวดเร็ว ในทางตรงขามหากโลโกออกแบบมาไมดี ยอมสง ผลเสียไปยัง ภาพลักษณของผลิตภั ณ ฑ องคกร หรือบริษัท

ภาพที่ 8.1.1 ภาพโลโกฟารม LOVE ORGANIC ที่นำไปติดบนวัสดุตาง ๆ ที่มา : นุจรี บุรีรัตน (2564)

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 351

โลโก คือ ชื่อสัญลักษณ เครื่องหมายการคาขององคกร หรือบริษัท อาจจะออกแบบ ในลักษณะเปนตัวอักษรลวนมีรูปแบบเฉพาะตัว หรือเปนภาพที่สื่อถึง สัญลักษณความเปน ตัวตน ขององคกร หรือบริษัท นอกจากนั้นยังสามารถออกแบบไดโดยนำภาพ และตัวอักษร มาผสมผสานกันเปนสัญลักษณที่ผูบริโภคสามารถจดจำบริษัทไดงาย ความสำคัญของโลโกสะทอนภาพลักษณขององคกรหรือบริษัทออกมาในรูปแบบสื่อ ทำใหผูบริโภคสามารถสัมผัสไดถึงสิ่งที่เปนตัวตนขององคกร หรือบริษัท การออกแบบโลโก จึงเปนสวนหนึ่งที่มีความสำคัญตอการสรางตราผลิตภัณฑ 8.1.1 ประโยชนของโลโก โลโกที่ผานการคิดวิเคราะหรวมถึงการออกแบบที่ดีจะสรางผลประโยชนตอ ธุรกิจ ดังนี้ 8.1.1.1 ทำใหผูบ ริโภคจดจำไดงาย จากการออกแบบที่นำตัวอักษร หรือ ภาพ และสีที่ไมมากเกินไป เมื่อผูบริโภคมองเห็นแลวสามารถจดจำไดงาย 8.1.1.2 สื่อถึงความมีเอกลักษณทางธุรกิจ โดยการนำความเปนตัวตนของ องคกรสะทอนออกมาใหผูบริโภคไดเห็นถึงความแตกตางในทางธุรกิจ 8.1.1.3 สื่อถึงเอกลักษณทางธุรกิจดานเทคโนโลยี เปนการแสดงใหเห็นถึง การนำเอาเทคโนโลยีมาสรางเอกลักษณทางธุรกิจ เพื่อความทันสมัย 8.1.1.4 สามารถเปนตราผลิตภัณฑทางการตลาด ชวยใหผูบริโภครู จัก ตัว ผลิตภัณฑมากขึ้น ไดแก ชื่อตราผลิตภัณฑท ำใหผ ูบริโภคสามารถระบุ ผ ลิต ภั ณฑท ี ่ จ ะมี ประโยชนตอเขาได 8.1.1.5 สรางภาพลักษณที่ดีตอธุรกิจที่ทำได เชน ผูบริโภคมีความภูมิใจ มีความรูสึกดีกับสินคาและบริษัท 8.1.2 สิ่งที่ตองคำนึงในการออกแบบโลโก โลโก ท ี ่ อ อกแบบจะมี ค วามโดดเด น สวยงาม และมี ค ุ ณ ภาพที ่ สุ ด เมื่อนักออกแบบ คำนึงถึงสิ่งตาง ๆ ในการออกแบบโลโก ดังนี้

การออกแบบกราฟก 352

8.1.2.1 เนนความเรียบงาย โลโกสวนหนึ่งของการสื่อ ความหมายของธุรกิจ เนื่องจากโลโก ไมสามารถอธิบายแผนงานหรือธุรกิ จทั้ง หมดได ในขั ้นตอนเดียว ไมควร ใสรายละเอียดมาก 8.1.2.2 สื่อความหมายไดในตัวเอง โลโกที่ดีตองสามารถสื่อความหมายที่ ตองการออกมาได ในตัวเองและดูไมยากเกินไป 8.1.2.3 ดึงดูดใจผูพบเห็น มองแลวอยากมองอีก และควรมีที่วางใหผูพบเห็น คนหาความหมายที่ตองการสื่อออกมา 8.1.2.4 มี เ อกลั ก ษณ เ ฉพาะตน เพื ่ อ ให ท ราบถึ ง ลั ก ษณะของธุ ร กิ จ รูปแบบเฉพาะตัว ไมคลายคลึงกับบริษัทอื่น 8.1.2.5 สามารถใชงานโลโกไดในระยะยาว ไมวากาลเวลาจะผานไปนานแค ไหน โลโกยังตองสื่อสารไดดี โดดเดนและมีประสิทธิภาพ ไมควรเปลี่ยนแปลงโลโกบอยครั้ง เพราะจะทำใหผูบริโภคเกิดความสับสนในการจดจำ 8.1.2.6 ควรใชภาพลายเสนที่ชัดเจน เพราะหากใชเสนบางเกินไป เวลายอ ขนาดให เ ล็ ก ลง รายละเอี ย ดของภาพจะขาด ควรใช ภ าพแบบเวกเตอร เนื ่ อ งจากภาพ จะไม แ ตก หรื อ ไม ค มชั ด เวลาย อ ขยายก็ ย ั ง มี ค วามคมชั ด สู ง ปรั บ แก ไ ขได ง  า ยกว า ภาพแบบพิกเซล 8.1.2.7 ควรใชสีไมมากเกินไป เนื่องจากจำนวนสีที่มาก การนำไปใชจะเพิ่ม ความยุง ยาก เชน เมื่อนำโลโกไ ปใช บนพื ้น ที ่ต  างๆ หรือพื้นกราฟก ที ่ม ี ลวดลายหลากสี โลโกจะจมหายไป ไมเกิดการจดจำ ควรใชสีไมควรเกินสามสี เลือกสีอยางสรางสรรค ควรใชสี ใหสื่อความหมายและสัมพันธกับผลิตภัณฑ และเหมาะสมกับกลุมเปาหมาย 8.1.2.8 จดจำได และงายตอ การนำไปใช ควรจัดองคประกอบที่ชัดเจน และเปน กลุมเดียวกัน ไมควรมีรายละเอียดที่มากเกินไปเพื่อใหจดจำได และการนำไปใชใน วัสดุตาง ๆ 8.1.2.9 สอดคล อ งกั บ ผลิ ต ภั ณ ฑ โลโก จ ะต อ งทำให ผ ู  บ ริ โ ภคสามารถ จินตนาการถึงผลิตภัณฑ หรือบริการได โดยการสื่อสารดวยภาพ ตัวอักษร และสีที่สัมพันธกับ ผลิตภัณฑ 8.1.2.10 ยืดหยุนไดในทุกลักษณะ โลโกที่ดีควรใชไดในทุกรูปแบบ เชน ปาย ประชาสัมพันธ หัวกระดาษจดหมาย นามบัตร ผลิตภัณฑสินคา เสื้อผา หรือเว็บไซต ไมวาจะ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 353

นำเสนอผานสื่อใดก็ตาม จะไมเปลี่ยนแปลงไปจากตนฉบับ คงความคมชัดและยืดหยุนไดกับ ทุกอุปกรณ 8.1.3 ขั้นตอนการออกแบบโลโก เริ่มจากการเก็บขอมูลเบื้องตนจากการสอบถามผูบริโภคโดยตรง คนหาขอมูล เพิ่มเติมจากสิ่งที่มีอยู แลวทำภาพรางออกแบบดวยคอมพิวเตอร จนถึงการทำใหผูบริโภค มั่นใจในการใชโลโก การทำงานเปนระบบนั้นจะชวยใหสามารถตอบโจทยที่ตรงใจผูบริโภค ไดมากที่สุด ทั้งยังประหยัดเวลา การออกแบบโลโก มีขั้นตอน ดังนี้ 8.1.3.1 ศึกษาคนหาขอมูล เริ่มตนที่ตองการใชในการออกแบบจากผูบริโภค และตองมั่นใจวาไดขอมูล ที่จำเปนจากผูบริโภค ควรทำเปนแบบสอบถามสงใหผูบริโภคกรอก หรือเช็คลิ ส ต เชน ชื่อบริษัท ประเภทของธุรกิจ สีหลักที่ ตองการ กลุมเปาหมาย ฯลฯ คำตอบของผูบริโภคนั้นจะเปนขอมูลตั้งตนใหทำงานไดงายขึ้น 8.1.3.2 การหาข อ มู ล วิ จ ั ย และตี โ จทย เ พื ่ อ สรุ ป แนวคิ ด งานออกแบบ หาขอมูลกิจกรรม ของบริษัทผูบริโภค แนวทางการตลาด คูแขง แรงบันดาลใจจากผูบริโภค ขอมูลเหลานี้เปน ประโยชนตอการออกแบบโลโก ทำใหเกิดการสอดคลองกับผลิต ภั ณ ฑ ตรงกลุมเปาหมาย เกิดความตางจากคูแขง เปนเอกลักษณที่ไมซ้ำ พรอมกับรวบรวมขอมูล ที่ไดทั้งหมดมาตีโจทย ปญหา และสรุปมาเปนแนวคิดงานออกแบบ 8.1.3.3 ออกแบบภาพร า ง แนวคิ ด จะเกิ ด ได ม ากขณะที ่ ใ ช ป ากกา และ กระดาษแทนการใชเมาส และจอภาพ เปนการถายทอดแนวคิด ออกมาเปนภาพบนกระดาษ ไมจำเปน ตองสวยงามมาก เพียงแตใหดูแลวเขาใจ อยูตรงไหน อยางไร ในการรางภาพ ควรจะร า งภาพออกมาหลาย ๆ แบบ แล ว ค อ ยคิ ด วิ เ คราะห ว  า แบบไหนตอบโจทย แนวคิดการออกแบบมากที่สุด เพื่อนำไปออกแบบตอในคอมพิวเตอร ขั้นตอนนี้ควรนำให ผูบริโภคไดเห็นถึงแนวคิดกอน 8.1.3.4 เริ่มขั้นตอนการออกแบบจริง เปลี่ยนภาพรางโลโกใหเปน ลายเสน สวยงาม สีสันสดใสในโปรแกรมคอมพิว เตอร การออกแบบโลโก ควรเลือ กใชโ ปรแกรม Adobe Illustrator เพื่อใหไดภาพเวกเตอร สามารถยอขยายไดโดยไมเสียความคมชัด อีกทั้ง สามารถปรับเปลี่ยนแกไขสีไดงาย เมื่อออกแบบโลโกเสร็จ ใหลองนำไปจัดวางบนงานอื่น ๆ

การออกแบบกราฟก 354

เชน นามบัตร ของที่ระลึก ปายสินคา เปนตน เพื่อดูความลงตัวของโลโก และปรับโลโก ใหลงตัวมากที่สุด 8.1.3.5 สงงาน และทำใหผูบริโภคมั่นใจ จำเปนตองใหแนวคิด ใชเปนแนว ทางในการอธิ บายถึ ง การนำโลโกไ ปใชใ นส วนต า งๆ ของการสื่ อสารของธุร กิ จ ผลงาน ที ่ ผ  า นการวิ เ คราะห อ ย า งครบถ ว น และสมบู ร ณ จะทำให ผ ู  บ ริ โ ภคยอมรั บ ในผลงาน โลโกทอี่ อกแบบ 8.1.4 การฝกปฏิบัติออกแบบโปสเตอร ขนาด A3 (Poster Design) แบงออกเปน 3 ขั้นตอน ดังนี้ 8.1.4.1 ขั้นตอนเตรียมการผลิต (Pre-Production) หนาที่นักออกแบบเมื่อไดรับขอมูลเบื้องตนจากการวิเคราะหปญหา ใหนำขอมูลที่ไดมาตอบคำถามทั้ง 4 ขอ เพื่อออกแบบแนวคิด ดังนี้ 1) อะไร (What) โจทย ใ ห อ อกแบบโลโก ป ระชาสั ม พั น ธ ส ิ นคา ภายในฟารม LOVE ORGANIC โดยใชโปรแกรม Adobe Illustrator 2) ที่ใด (Where) เพื่อใชเปนสื่อสิ่งพิมพ โดยจัดพิมพลงบนกระดาษ สติกเกอร เปนโลโกทใี่ ชในการประชาสัมพันธใหรูจักแหลงที่มาของสินคา โดยการติดลงบนถุง ผา หรือถุงพลาสติก รวมทั้งวัสดุตาง ๆ ที่เปนสินคาภายในฟารม LOVE ORGANIC 3) ใคร (Who) กลุมเปาหมายสวนใหญสำหรับวัยทำงาน หรือบุคคล ทั่วไปที่สนใจสินคาออรแกนิค 4) อยางไร (How) จัดทำเปนสติกเกอรขนาด ความกวางเทากับ 8 นิ้ว ความสูงเทากับ 8 นิ้ว โดยมีภาพสัญลักษณของใบไม อยูตรงกลาง และออกแบบ ใหมีลักษณะคลายใบไม ซึ่งถามองเปนตัวอักษร จะเปนตัวอักษร “L” และตัวอักษร “O” ซึ่ง เปนตัวอักษรตัวแรกที่น ำหนา ของชื ่อราน “LOVE ORGANIC” และขอความดานล า ง “GARDEN&FARM” ใหเปนจุดเดนและเห็นไดอยางชัดเจน จัดวางขอความเปน แนวโคง เพื่อใหเขากับรูปทรงของโลโกที่ออกแบบเปนรูปทรงกลม เพื่อใหความรูสึกเปนมิตรกับลูกคา และใหสีเขียวแทนตนไม ใบไม ความเปนธรรมชาติ และความปลอดภัย เมื่อจัดพิมพ แ ลว สามารถนำไปติดลงบนวัสดุตาง ๆ เปนรูปทรงกลม ลดการเกิดมุมเพื่อชวยใหเมื่อนำงานไปติด บนวัสดุจะติดไดถาวรมั่นคงมากกวา มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 355

8.1.4.2 ขั้นตอนการผลิต (Production) เปนการแสดงขั้นตอนและวิธีการ ออกแบบโลโก (Logo Design) อยางละเอียด ดังนี้ 1. ขั้นตอนแรก เปดโปรแกรม Adobe Illustrator ขึ้นมา เริ่มสรางชิ้นงานใหม โดยไปที ่ เ มนู File>New จากนั ้ น เลื อ กประเภทงานสิ ่ ง พิ ม พ (Print) (ดั ง ข อ 1) จากนั้นตั้งชื่อไฟลงาน Logo กำหนดขนาดของงานซึ่งมีขนาด ความกวาง (Width) เทากับ 8 นิ้ว (Inches) ความสูง (Height) เทากับ 8 นิ้ว (Inches) กำหนดคาระยะตัดตก (Bleed) เทากับ 1 มิลลิเมตร (Millimeters) (ดังขอ 2) กำหนดโหมดสี (Color Mode) เปน CMYK Color (ดังขอ 3) จากนั้นคลิกที่ Create เพื่อสรางงาน (ดังขอ 4) (หมายเหตุ : เมื่อปรับหนวย คาตัดตกเปนนิ้ว หนวยขนาดของงาน จากเดิมกำหนดหนวยเปนนิ้ว จะปรับคาตัวเลขใหหนวย เปนมิลลิเมตรทั้งหมด) 1 2

3 4

ภาพที่ 8.1.2 การสรางชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 356

2. เมื ่ อ คลิ ก ที ่ Create จะได ช ิ ้ น งานใหม (ดั ง ข อ 5) ให เ ลื อ กเมนู Window จากนั้น เลือกเครื่องมือในการทำงาน (Toolbars) (ดัง ขอ 6) และเลือกเลเยอร (Layers) แสดงลำชั้นของวัตถุ (ดังขอ 7) 5

7

6

ภาพที่ 8.1.3 ชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564) 3. เมื่อสรางชิ้นงานใหม ใหคลิกที่เมนู View แลวทำเครื่องหมายถูกหนาขอ ความ Smart Guides (ดังขอ 8) เลือก Snap to Grid (ดังขอ 9) และ Show Grid (ดังขอ 10)

8

9

10

ภาพที่ 8.1.4 การแสดงตาราง ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 357

4. คลิกเครื่องมือสรางรูปทรงวงรี (Ellipse Tool) (ดังขอ 11)

11

ภาพที่ 8.1.5 การใชเครื่องมือสรางรูปทรงวงรี (Ellipse Tool) ที่มา : นุจรี บุรีรัตน (2564) 5. คลิกเลือกที่ จะไม เติม สี (Fill) (ดัง ขอ 12) เพื่อใหเกิ ดเปน เสนรอบวงสีเ ขี ย ว ใหกำหนดสีของเสนขอบ (Stroke) เปนสีเขียว (ดังขอ 13) แลวคลิกปุม OK

13 12

ภาพที่ 8.1.6 การกำหนดสีเสนขอบ (Stroke) ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 358

6. ทำการวาดเสนรูปวงกลมเพื่อใหเกิดเปนเสนรอบวงกลม ใหคลิกเมาสและกดปุม Shift คางไว แลวลากเสนตามขนาดวงกลมที่ตองการ (ดังขอ 14) กำหนดขนาดของเสน ขอบ (Stroke) เทากับ 10 Point (ดังขอ 15)

14

15

ภาพที่ 8.1.7 การวาดรูปเสนรอบวงกลม ที่มา : นุจรี บุรีรัตน (2564) 7. เมื่อวาดรูปเสนรอบวงกลมสีเขียวเสร็จแลว จะไดดังภาพที่ปรากฏ (ดังขอ 18) สรางเลเยอรใหม (Create new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอร ใหมเพิ่มขึ้นมา (ดังขอ 19) 19 18

ภาพที่ 8.1.8 เสนรอบวงกลมสีเขียว และการสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 359

8. ทำการคัดลอกวงกลม โดยใชคียลัด Ctrl+C เพื่อทำการคัดลอก และ Ctrl+V เพื่อทำการวางภาพ แลวยายภาพ โดยคลิกเครื่องมือเคลื่อนยาย (Move Tool) (ดังขอ 20) จากนั้นทำการยายภาพ โดยการลากมาวางแยกออกเปนสองชิ้น (ดังขอ 21) 20 21

ภาพที่ 8.1.9 การคัดลอก และยายภาพวงกลม ที่มา : นุจรี บุรีรัตน (2564) 9. ปรั บ ขนาดภาพวงกลมให เ หมาะสม โดยไปที ่ เ มนู แล ว เลื อ ก Edit>Free Transform หรือใชคียลัด โดยกดปุม Ctrl+T ปรับขนาดใหไ ดตามตองการ (ดัง ขอ 22) กำหนดขนาดของเสนขอบ (Stroke) เทากับ 2 Point (ดังขอ 23)

22

ภาพที่ 8.1.10 การปรับขนาดภาพวงกลม ที่มา : นุจรี บุรีรัตน (2564)

23

การออกแบบกราฟก 360

10. เมื่อปรับขนาดวงกลมเสร็จแลว จะไดภาพดังที่ปราฏ (ดังขอ 24) จากนั้นใหคลิกที่ เครื ่ อ งหมายบวก (+) เพื ่ อ ทำการเพิ ่ ม เลเยอร (Create a new layer) จะปรากฏ เลเยอรใหมเพิ่มขึ้นมา (ดังขอ 25) 25 24

ภาพที่ 8.1.11 ภาพวงกลมที่ไดจากการปรับขนาด และการสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 11. คลิกที่เครื่องมือปากกาวาดเสนอิสระ (PenTool) (ดังขอ 26) 26

ภาพที่ 8.1.12 การใชเครื่องมือปากกาวาดเสนอิสระ (PenTool) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 361

12. ทำการวาดเสนอิสระ โดยการใชเมาสคลิกใหเปนรูปสามเหลี่ยม (ดังขอ 27)

27

ภาพที่ 8.1.13 การวาดเสนอิสระ ที่มา : นุจรี บุรีรัตน (2564) 13. คลิกที่เครื่องมือปรับเสนพาธอยางอิสระ (Anchor Point Tool) (ดังขอ 28)

28

ภาพที่ 8.1.14 การเครื่องมือปรับเสนพาธอยางอิสระ (Anchor Point Tool) ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 362

14. ทำการปรั บ เส น พาธ โดยใช เ มาส ค ลิ ก ที ่ จ ุ ด สี ่ เ หลี ่ ย มแล ว ดั ด เส น ให เ ป น รูป เสนโคงมน โดยหมุนแขนใหเปนเสนตรงแนวนอน (ดังขอ 29)

29

ภาพที่ 8.1.15 การปรับเสนพาธ ที่มา : นุจรี บุรีรัตน (2564) 15. เมื่อไดรูปทรงของเสน พาธที่ตองการแลว ใหคลิกที่เครื่องมือพิมพขอ ความ ตามเสนพาธ (Type on a Path Tool) (ดังขอ 30)

30

ภาพที่ 8.1.16 การใชเครื่องมือพิมพขอความตามเสนพาธ (Type on a Path Tool) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 363

16. จากนั้นพิมพขอความ “LOVE ORGANIC” ปรับสีตัวอักษรโดยเลือกขอ ความ กำหนดรูปแบบตัวอักษร แลวคลิกที่เครื่องมือเติมสี (Fill) เลือกสีเขียว (ดังขอ 31) แลวคลิกปุม OK (ดังขอ 32)

32 31

ภาพที่ 8.1.17 การพิมพขอความ “LOVE ORGANIC” ที่มา : นุจรี บุรีรัตน (2564) 17. เมื่อพิมพขอความและกำหนดรูปแบบเสร็จแลว จะไดดังภาพที่ปรากฏ (ดังขอ 33) สรางเลเยอรใหม (Create new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอร ใหมเพิ่มขึ้นมา (ดังขอ 34)

34

33

ภาพที่ 8.1.18 การกำหนดรูปแบบขอความ และการสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 364

18. คลิ ก ที ่ เ ครื ่ อ งมื อ พิ ม พ ข  อ ความ (Type Tool) (ดั ง ข อ 35) พิ ม พ ข  อ ความ “GARDEN & FARM” คลิกที่เครื่องมือเติมสี (Fill) เลือกสีเขียว ไมกำหนดเสนขอบ (ดังขอ 36) จากนั้นเลือกที่คำสั่ง Make Envelope (ดังขอ 37) เลือกรูปแบบ (Style) เปน Arch กำหนดคาตาง ๆ ตามตองการ (ดังขอ 38) แลวคลิกปุม OK 35

37

38

36

ภาพที่ 8.1.19 การพิมพขอความและกำหนดรูปแบบตัวอักษร ที่มา : นุจรี บุรีรัตน (2564) 19. เมื่อพิมพขอความและกำหนดรูปแบบตัวอักษรเสร็จแลว จะไดภาพดังที่ปรากฏ (ดั ง ข อ 39) สร า งเลเยอร ใ หม (Create new layer) โดยคลิ ก ที ่ เ ครื ่ อ งหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 40) 40

39

ภาพที่ 8.1.20 ขอความที่กำหนดรูปแบบแลว และการสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 365

20. คลิกที่เครื่องมือวาดรูปทรงกลม (Ellipse Tool) (ดังขอ 41)

41

ภาพที่ 8.1.21 การใชเครื่องมือวาดรูปทรงกลม (Ellipse Tool) ที่มา : นุจรี บุรีรัตน (2564) 21. วาดรูปทรงกลม ใหคลิกเมาสและกดปุม Shift คางไว แลวลากเสนตามขนาด วงกลมที่ตองการ (ดังขอ 42) กำหนดขนาดของเสนขอบ (Stroke) เทากับ 6 Point (ดังขอ 43)

42

43

ภาพที่ 8.1.22 การวาดรูปทรงกลมและกำหนดรูปแบบ ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 366

22. เมื่อวาดรูปทรงกลมและกำหนดรูปแบบเสร็จแลว จะไดภาพดังที่ปรากฏ (ดังขอ 44) จากนั้นคลิกที่เครื่องมือวาดเสนตรง (Line Segment Tool) (ดังขอ 45)

45

44

ภาพที่ 8.1.23 การใชเครื่องมือวาดเสนตรง (Line Segment Tool) ที่มา : นุจรี บุรีรัตน (2564) 23. ทำการวาดเสนตรง โดยใชเมาสวาดเสนตามขนาดที่ตองการ (ดังขอ 46)

46

ภาพที่ 8.1.24 การวาดเสนตรง ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 367

24. ทำการวาดเสนตรงเพิ่มในวงกลมวงใน โดยจัดวางแนวเฉียง จำนวน 4 เสน ใหมีลักษณะคลายใบไม และในอีกมิติหนึ่ง ซึ่งถามองเปนตัวอักษร จะเห็นสีแดงเปนตัวอักษร “L” และสีสมเปนตัวอักษร “O” ซึ่งเปนคำหนาของชื่อราน “LOVE ORGANIC” (ดังขอ 47) อักษรแอล (L)

อักษรโอ (O)

47

ภาพรวมเปนใบไม

ภาพที่ 8.1.25 การวาดเสนตรง และวางในแนวเฉียง ที่มา : นุจรี บุรีรัตน (2564) 25. เมื ่ อ วาดเส น ตรง และวางในแนวเฉี ย งเสร็ จ แล ว ทำการซ อ นเส น ตาราง เพื่อใหมองไดชัดเจน โดยไปที่เมนู View>Hide Grid จะไดดังภาพที่ปรากฏ (ดังขอ 48)

48

ภาพที่ 8.1.26 การซอนเสนตาราง (Hide Grid) ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 368

26. ทำการบันทึกไฟลในกรณีที่ตองการแกไขภายหลัง ใหไปที่เมนู File>Save As.. (ดังขอ 49)

49

ภาพที่ 8.1.27 การบันทึกไฟลในกรณีที่ตองการแกไข ที่มา : นุจรี บุรีรัตน (2564) 27. ทำการบันทึกไฟลในกรณีที่ตองการแกไขภายหลัง ใหบันทึกเปนไฟลนามสกุล .ai ซึ่งเปนไฟลงานที่ตองเปดแกไขดวยโปรแกรม Illustrator ในครั้งนี้บันทึกไฟลชื่อ Logo.ai (ดังขอ 50) แลวคลิกที่ปุม Save (ดังขอ 51)

50 51

ภาพที่ 8.1.28 การบันทึกไฟลนามสกุล .ai ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 369

28. เมื ่ อ ทำการบั น ทึ ก ไฟล จะขึ ้ น กล อ งข อ ความแสดงเวอร ช ั น ของโปรแกรม จากนั้นให คลิกที่ปุม OK (ดังขอ 52)

52

ภาพที่ 8.1.29 การบันทึกไฟลในกรณีที่ตองการแกไขภายหลัง ที่มา : นุจรี บุรีรัตน (2564) 8.1.4.3 ขั้นตอนหลังการผลิต (Post-Production) เมื่อออกแบบโลโกเสร็จเรียบ รอยแลว สิ่งที่ตองทำเปนขั้นตอนตอไปคือ การจัดเตรียมไฟลเพื่อนำไปใชงาน การจัดการ ฟอนตภาพใหเปนเวกเตอร เพื่อปองกันฟอนตผิดปกติจากที่ทำการออกแบบไว และการ บันทึกไฟลเพื่อสงพิมพ หากเตรียมไฟลไดอยางถูกตอง จะทำใหไดงานพิมพที่ตรงตามความ ตองการ 1. วิธีการแปลงฟอนตเปนเวกเตอร ในโปรแกรม Adobe Illustrator โดยทำการ เลือกขอความทั้งหมด แลวไปที่เมนู Select>Object>All Text Objects (ดังขอ 53) จากนั้น ไปที่เมนู Type >Create Outlines (ดัง ขอ 54) ตัวอักษรทั้งหมดจะถูกแปลงจากรูปแบบ ฟอนตไปเปนเวกเตอร

การออกแบบกราฟก 370

54 53

ภาพที่ 8.1.30 การแปลงฟอนตเปนเวกเตอร ที่มา : นุจรี บุรีรัตน (2564) 2. การรวมกลุม (Group) เพื่อใหวัตถุที่สรางขึ้น รวมเปนกลุมเดียวกัน เพื่อความ สะดวกหากตองทำการเคลื่อนยาย วัตถุทุกชิ้นจะไมกระจัดกระจาย และรวมเปนกลุมเดียวกัน สามารถทำไดโดยคลิกที่เมนู Object> Group (ดังขอ 55) หรือกดปุม Ctrl+G 55

ภาพที่ 8.1.31 การรวมกลุม (Group) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 371

3. การส ง ออกไฟล เ พื ่ อ นำไปใช ใ นงานต า ง ๆ (Export) โดยไปที ่ เ มนู File> Export>Export As… (ดังขอ 56)

56

ภาพที่ 8.1.32 การสงออกไฟลงาน (Export) ที่มา : นุจรี บุรีรัตน (2564) 4. เลือกรูปแบบไฟลงานที่ตองการนำไปใช โดยเลือกนามสกุลไฟลที่ตองการในชอง Format เชน เลือกไฟลนามสกุล .PNG ตั้งชื่อไฟล Logo.png (ดังขอ 57) จากนั้นคลิกที่ปุม Export (ดังขอ 58) 57

58

ภาพที่ 8.1.33 การเลือกรูปแบบไฟลงานที่ตองการนำไปใชเมื่อตองการสงออก ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 372

5. เมื่อทำการสงออก (Export) แลว จะขึ้นกลองขอความใหเลือกความละเอียด (Resolution) ตามที่ตองการ แลวคลิกที่ปุม OK (ดังขอ 59)

59

ภาพที่ 8.1.34 การกำหนดคาความละเอียด (Resolution) ที่มา : นุจรี บุรีรัตน (2564) 6. ผลงานการออกแบบโลโกที่จัดทำเสร็จเรียบรอยแลว (ดัง ขอ 60) เมื่อตองการ จัดพิมพ ควรสงไฟลใหโรงพิมพสองไฟล ไดแกไฟล Logo.png สำหรับใหโรงพิมพเพื ่อเปน ตัวอยางในการเปรียบเทียบกับไฟลจริง วาเหมือนกับงานจริง หรือไม และ สง ไฟลภาพที่ สามารถแกไขได คือไฟล Logo.ai แนบไปดวยเพื่อนำไปใชในงานพิมพ และในกรณีหากมีการ แกไข เพื่อลดขอผิดพลาดไมควรสงไฟลงานจริงเพียงไฟลเดียว แตในกรณีที่ตองการนำไปใชใน การนำเสนอผานทางหนาจอคอมพิวเตอร ควรปรับขนาดใหพอดีกับสื่อที่ตองการนำไปใช ตัวอยางการนำโลโกไปจัดพิมพดวยขนาด 8x8 นิ้ว และนำมาติดลงบนวัสดุที่ใชบรรจุสินคา เชน ถุงผา หรือถุงพลาสติก ดังภาพ

60

ภาพที่ 8.1.35 ผลงานการออกแบบโลโก และตัวอยางการนำไปใชงาน ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 373

ในยุคดิจิทัลทีม่ ีชองทางในการติดตอที่หลากหลาย เชน โทรศัพท อีเมล ไลน เฟซบุก ตลอดจนแอปพลิเคชันอื่น ๆ ที่ทำใหติดตอสื่อสารไดรวดเร็ว และสะดวกสบาย เขาถึงงาย เเมวาโลกจะเปลี่ยนแคไหน แตนามบัตรก็ยังคงมีความสำคัญแบบดั้งเดิมกับโลกธุรกิจ เมื่อ ตองการติดตอลูกคาบางกลุม การเจรจาทางธุรกิจในยุคปจจุบัน สามารถคุยกัน ผานโทรศัพท ได แตถาเปนในกรณีที่เราไมไดรูจักกับคน ๆ นั้นอยางสนิมสนม การพูดคุยผานทางโทรศัพท อยางเดียวเปนเพียงขั้นตอนแรกในการติดตอกันเทานั้น เพราะความสัมพันธทางการคา หรือ การลงทุน จะเริ่มตนไดดกี ็ตอเมื่อไดพูดคุยกันตอหนาไดสบตากัน ดูพฤติกรรมทาทางของคน ที่เรากำลังคุยดวย และทายสุดจะจบลงดวยการแลกนามบัตร โดยในนามบัตรจะตองมีขอมูล ที่ทำใหสามารถไดติดตอบุคคลนั้นไดงายขึ้น 8.2 การออกแบบนามบัตร (Business Card Design) นามบัตร คือ เอกสารตัวที่ขนาดเล็ก พกติดตัวไดงายที่สุด เปนเอกสาร ชิ้นแรกที่ สามารถให ข อมู ล ของเจ าของนามบัตร ไมวาจะเปนชื่อ ตำแหนง เบอรโทรศัพ ท อีเ มล และในยุคนี้มีจำนวนไมน อยที่เขียนขอมูลอื่นๆ เพิ่ม เชน Line ID, Facebook ID และ Twitter ID เปนตน

ภาพที่ 8.2.1 ภาพนามบัตรที่เผยแพรในรูปแบบสื่อสิ่งพิมพ ที่มา : นุจรี บุรีรัตน (2564) 8.2.1 เทคนิ ค ออกแบบนามบั ต ร ภาวะธุ ร กิ จ ที ่ แ ข ง ขั น กั น สู ง มาก ในป จ จุ บั น ทำให ก ารสร า งความน า เชื ่ อ ถื อ เป น เรื ่ อ งสำคั ญ สำหรั บ องค ก ร หรื อ บริ ษ ั ท นามบั ต ร

การออกแบบกราฟก 374

จึ ง ถู ก ออกแบบมาเพื ่ อ การประชาสั ม พั น ธ ต ั ว ตนให เ ป น ที ่ ร ู  จ ั ก แก ล ู ก ค า ทั ้ ง ยั ง สร า ง ความน า เชื ่ อ ถื อ ได ม ากไม แ พ ก ารประชาสั ม พั น ธ แ บบอื ่ น ๆ ถ า ให เ ปรี ย บเที ย บง า ยๆ นามบัตรก็เปรียบเสมือนเปนบัตรประชาชนทางธุรกิจ 8.2.2 ความสำคั ญ ของนามบั ต ร สามารถบ ง บอกให เ ห็ น ถึ ง ความเป น ตั ว ตน ของเจาของนามบัตรหรือตัวบริษัทเจาของบัตรวาเปนคนอยางไร จริงจรัง ขี้เลน เปนนักธุรกิจ หรือนักคิดอีกทั้งชวยสรางความประทับใจแรก เมื่อลูกคาไดเห็น ไดสัมผัส ไมวาจะเปนเรื่อง ของการออกแบบ รู ป แบบการจั ด วางตั ว อั ก ษร สี ส ั น ที ่ ใ ช ซึ ่ ง ถ า มองอี ก มุ ม หนึ่ ง นามบัตรก็เหมือนกับสื่อโฆษณาที่อยูในรูปแบบของกระดาษแผนเล็ก 8.2.3 ประโยชนของนามบัตร หลายวัฒนธรรมของการทำธุรกิจในการ พบปะพูดคุย กัน ครั้ง แรกๆ ของบริษัทผู ค า มักจะมีการแลกเปลี ่ยนนามบั ตรกัน กอ น ที่จะเริ่ม ลงมื อ พู ด คุ ย เจรจาธุ ร กิ จ นามบั ต รจึ ง เป น สิ ่ ง สำคั ญ และกลายเป น สิ ่ ง จำเป น ที ่ ท ุ ก ๆ ธุ ร กิ จ และมีประโยชนหลักๆ ของนามบัตร ดังนี้ 8.2.3.1 สะดวกในการหยิ บ ยื ่ น จั ด เก็ บ เหมาะแก ก ารพกพาเพราะเป น เอกสารขนาดเล็ก สามารถพกติดไวในกระเปาเงินได 8.2.3.2 สร า งความน า เชื ่ อ ถื อ ต อ ธุ ร กิ จ เนื ่ อ งจากนามบั ต รส ว นใหญ จะบอกรายละเอียดเกี่ยวกับบุคคล รานคา ที่ตั้ง เบอรโทรศัพทไวอยางชัดเจน 8.2.3.3 คาใชจายไมสูง เมื่อเทียบกับการประชาสัมพันธดวยวิธีการอื่น 8.2.3.4 เพิ ่ ม โอกาสเชิ ง ธุ ร กิ จ เนื ่ อ งจากการพบปะกั น ในช ว งเวลาหนึ่ ง อาจไมเอื้ออำนวย การแลกนามบัตรจึงเปนการเพิ่มโอกาสในการเจรจาครั้งตอไปไดอยางดี 8.2.4 สวนประกอบสำคัญของนามบัตร นามบั ต รที ่ ด ี ส ามารถสร า งความสำเร็ จ ให แ ก ธ ุ ร กิ จ มานั บ ไม ถ  ว น แนน อนวานามบั ตรที่ ดี ต องมี ขอ มู ล ที่ก ระชั บ และถูกตอง แลวขอมูล ที่ม ี ส วนประกอบ ตามมาตรฐาน พิจารณาในการออกแบบนามบัตร เพื่อความเปนมืออาชีพ และไดรับการ ยอมรับจากภายนอก โดยหลักสากลนั้นมีสวนประกอบสำคัญ ดังนี้ 8.2.4.1 ชื่อ นามสกุลตองชัดเจน สวนประกอบสำคัญอันดับแรกของนามบัตร ทั ้ ง ภาษาไทย และภาษาอั ง กฤษวางอย า งโดดเด น ชั ด เจน ข อ ควรระวั ง ต อ งสะกดชื่ อ และนามสกุลใหถูกตอง เนื่องจากถาผิดพลาดทำใหความหลายของชื่อ นามสกุลเปลี่นไปได

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 375

รายแรงกวานั้นหากคูคาทางธุรกิจนำชื่อที่ไดจากนามบัตรไปเขียนทำธุรกรรมสัญญาทางธุรกิจ ทำใหตองเสียเวลาแกไข 8.2.4.2 ตำแหน ง หน า ที่ เป น ส ว นสำคั ญ ถั ด มาที ่ ต  อ งให ค วามสำคั ญ เนื่องจากบงบอกถึงตำแหนงหนาที่ความรับผิดชอบของเจาของนามบัตร เพื่อติดตอไดสะดวก 8.2.4.3 ที ่ อ ยู  ข องธุ ร กิ จ และช อ งทางการติ ด ต อ เป น อี ก หนึ ่ ง ส ว นที ่ มี ความสำคัญ ตองระบุที่อยูของบริษัทอยางชัดเจนวาบริษัทชื่ออะไร ตั้ง อยูเลขที่เทาไหร แขวงเขตไหน จั ง หวั ด อะไร รหั ส ไปรษณี ย  รวมถึ ง เบอร โ ทรศั พ ท ต ิ ด ต อ ป จ จุ บั น ใชเบอรโทรศัพทมือถือ อีเมล รวมถึงชองทางอื่นๆ ที่สามารถติดตอได 8.2.4.4 โลโก ข องธุ ร กิ จ ปกติ แ ล ว โลโก ข องธุ ร กิ จ ต อ งมี ข นาดใหญ และโดดเดนมากที่สุด โดยมีสีสันตามโลโกจริงทั้งหมดแสดงอยูบนนามบัตรอาจจะจัดวางอยู เนื่องจากในมุมใดมุมหนึ่งโดยไมตองมีสวนอื่นเขาไปเกี่ยวของ 8.2.4.5 ขนาดของนามบั ต ร ตามรู ป แบบสากลมี ค วามกว า ง และยาว 9 เซนติเมตร x 5.5 เซนติเมตร สามารถแกไขขนาดได ความกวาง และความยาวเพิ่มขึ้นไมเกิน 0.5 เซนติเมตร และสามารถปรับแตงนามบัตรใหมีลักษณะที่โคงมนได หรือมีรูปทรงอิสระ ไดคัตเปนรูปแบบตางๆ แตขอควรระวัง คือ ไมควรออกแบบรูปทรง ใหมีลักษณะที่แปลกประหลาดมากจนเกินไป เนื่องจากคอนขางลำบากในการพกพา 8.2.4.6 สีพื้นหลัง เลือกสีตามชอบใจ แตแนะนำใหใชสีพื้นๆ และออนแทน เนื่องจากสามารถอานตัวอักษรไดสะดวกกวาสีเขม เมื่อจัดองคประกอบตางๆ เขาดวยกันอยางลงตัวแลว แนะนำใหเขียนอยาง กระชั บ ตรงตั ว ไม ย ื ด ยาวจนจั บ ใจความไม ไ ด แต ก ็ ไ ม ค วรน อ ยจนเกิ น ไป ดั ง นั้ น ผูออกแบบตองพยายามจัดสรรเนื้อที่บนนามบัตรไดอยางลงตัว 8.2.5 สิ่งที่ตองคำนึงในการออกแบบนามบัตร นามบัตรจะสรางความพึงพอใจ และประทับใจ สรางความหนาเชื่อถือแกคูคา ทางธุรกิจมากขึ้น ถานามบัตรนั้นทำหนาที่ของมันไดถูกตอง ทั้งทางขอมูล และการออกแบบ อีกทั้งยังเสริมภาพลักษณที่ดูดีนาเชื่อถือกับผูใชนามบัตร สะทอนใหเห็นถึงภาพลักษณที่ ดี ของบริษัท ดังนี้

การออกแบบกราฟก 376

8.2.5.1 ออกแบบให ง  า ยเข า ไว นามบั ต รที ่ ด ี ค วรมี ข  อ มู ล พื ้ น ฐานครบ ไมวาจะเปนชื่อ นามสกุล ที่อยู เบอรโทรศัพทที่ใชในการติดตอ ตำแหนงงาน โลโกของธุรกิจ อีเมล หรือเว็บไซต เปน ตน รวมถึง บริการของธุรกิ จ ควรจัดสรรพื้นที่ บนนามบัตรให ดี นอกจากขอมูลครบถวนแลวนามบัตรตองสวยดวย 8.2.5.2 ใชแ บบอักษรใหชัดเจน ในดานธุรกิจภาพลักษณความนาเชื่อถือ เป น สิ ่ ง ที ่ ส ำคั ญ การเลื อ กใช ต ั ว อั ก ษรก็ ค วรใช อ ย า งมื อ อาชี พ ดู แ ล ว น า เชื ่ อ แนะนำ ไมควรใชตัวอักษรเกินกวา 2 แบบ 8.2.5.3 เน น ในส ว นที ่ ค วรเน น การเพิ ่ ม ขนาดตั ว อั ก ษรให ใ หญ ขึ้ น ตัวหนากวาปกติ หรือจะใสเทคนิคพิเศษตางๆ เชน พิมพนูนต่ำ นูนสูง เคลือบเฉพาะจุด ทั้งหมดนี้ทำใหสวนที่เปนจุดสำคัญมีความโดดเดนขึ้น ทำใหรูสึกสะดุดตา และนาสนใจ 8.2.5.4 ใช พ ื ้ น ที ่ ว  า ง และพื ้ น ที ่ ด  า นหลั ง ของนามบั ต รให ม ี ป ระโยชน การมีพื้น ที่วางในนามบัตรเปน สิ่ง ที่ด ี ทำใหเกิดความรูส ึกสบายตา มีระเบียบ อานงาย และมี เ สน ห  ระวั ง อย า ใส อ งค ป ระกอบดี ไ ซน หรื อ ตั ว อั ก ษรมากเกิ น ไป จะทำให ด ู ร ก และไมสบายตา สวนพื้นที่ดานหลังของนามบัตรก็เปนพื้นที่สำคัญใสเปนสโลแกน โลโก หรือ QR Code 8.2.5.5 ตกแต ง ให ด ู ด ี เ ป น เอกลั ก ษณ เ ฉพาะตั ว เนื ่ อ งจากความเป น เอกลักษณเฉพาะตัว ทำใหเกิดการจดจำกับผูที่พบเห็น ใสภาพประกอบ ใสกราฟก สโลแกน หรื อ ข อ ความสั ้ น ๆ ที ่ ล ู ก ค า จะจำธุ ร กิ จ ได เช น อาจจะนำสี ห ลั ก ของธุ ร กิ จ ลวดลาย บางสวนของโลโกมาทำเปนกราฟกบนพื้นหลัง หรือสีพื้น เปนตน 8.2.5.6 เพิ ่ ม ภาษาอื ่ น ๆ นอกจากภาษาไทยแล ว ควรมี ภ าษาอั ง กฤษใน นามบัตรดวย เชน ดานหนึ่งภาษาไทย อีกดานหนึ่งเปนภาษาอังกฤษ เพื่อรองรับกับลูกคา หลากหลายกลุม 8.2.5.7 เลื อ กวั ส ดุ ท ี่ ใ ช ใ นการพิ ม พ นามบั ต ร กระดาษที ่ใ ชม ี พื้ นผิวสวย จะสร า งความประทั บ ใจเมื ่ อ ลู ก ค า ได ร ั บ หรื อ หยิ บ มาดู การเลื อ กซื ้ อ พื ้ น ผิ ว กระดาษ ที่สวยงามนั้น จะสรางความแตกตางใหเกิดขึ้นมาก มีราคาแพง แตรับรองวาคงทนใชไดนาน 8.2.5.8 ไมควรขอ มูลมากจนเกินจำเปน จงใสชอมูลที่จำเปนลงไปเท านั้น นามบัตรจะกลายเปนโบรชัวรในทันที หากพยายามใสขอมูลทุกอยางลงไปในนามบัตร

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 377

8.2.5.9 การตัด ไดคัต นามบัตร เลือกทำมุมของนามบัตรใหเปนแบบโคงมน ลดความเสียหายของมุมนามบัตรมากกวาแบบเหลี่ยม หรือตัดเปนนามบัตรรูปทรงตาง ๆ ได เพื่อสรางความแตกตางจากนามบัตรอื่น ๆ แตใหคำนึงถึงความนาเชื่อถือ และความสะดวก ตอการพบใสกระเปาเงินดวย 8.2.5.10 เตรียมไฟลเพื่อพิมพ ตรวจสอบความถูกตอง ไดแก ขอความ โลโก กราฟ ก ต า งๆ รวมทั ้ ง ตรวจสอบขนาดความกว า งยาวของนามบั ต รให เ รี ย บร อ ย รวมถึ ง นามสกุ ล ของไฟล เวลาพิ ม พ น ามบั ต รจะต อ งเผื ่ อ ขนาดออกมาอี ก เพื ่ อ ให เครื่องพิมพไมสามารถพิมพบริเวณขอบของกระดาษได 8.2.6 ชนิดของกระดาษที่นิยมทำนามบัตร ก าร เลื อ ก ก ร ะ ดาษให เ หม าะสม จะ เพิ ่ ม ความ งาม ดู ดี ม ี คุ ณค า สร า งความประทั บ ใจให แ ก ผ ู  ร ั บ นามบั ต ร และสามารถดึ ง ดู ด ความสนใจได ม ากขึ้ น โดยมีกระดาษที่แตกตางกันหลากหลายประเภท โดยกระดาษที่ไดรับความนิยมทำนามบัตร ดังนี้ 8.2.6.1 กระดาษอาร ต เป น กระดาษที ่ น ิ ย มนำมาทำนามบั ต รมากที ่ สุ ด มีทั้งแบบมัน และแบบดาน 8.2.6.2 กระดาษลินิน เปนกระดาษที่มีพื้นผิวคลายกับการถักทอของผาลินิน เหมาะสมกับนามบัตรที่มีตัวอักษรไมมาก และสีพื้นเปนสีเรียบ เนื่องจากเห็นลายกระดาษ ไดชัดเจน ทำใหดูสวยงาม และเรียบหรู 8.2.6.3 กระดาษแข็ ง งาช า ง เป น กระดาษแข็ ง ที ่ ม ีพ ื ้น ผิ วเรีย บ แข็ ง แรง และผิวมีความสวางสีครีมเหมือนงาชาง เหมาะสำหรับสิ่งพิมพธุรกิจและบัตรเชิญ 8.2.6.4 Angus Paper เป น กระดาษที ่ ม ี ล วดลายเฉพาะในตั ว กระดาษ เมื่อพิมพออกมาเปนงานพิมพจะเห็นลายกระดาษไดชัดเจนมาก เหมาะสมกับผูที่ตองการ ความแปลกใหม ดูมีคา ไมซ้ำใคร 8.2.6.5 Synthetic Paper เป น ว ั สดุ ที ่ ไ ม  ไ ด ผลิ ตม าจาก ก ร ะ ด า ษ มี ค ุ ณ สมบั ต ิ เ หมื อ นกั บ กระดาษ ความพิ เ ศษเหนื อ กระดาษ คื อ คงทนถาวร กั น น้ ำ ได ทนทานตอการฉีกขาด และสารเคมี มีผิวเรียบมาก จึง ทำใหสีที่ไ ดในการพิมพแสดงออก มาไดชัดเจน มีสีสันสดใส

การออกแบบกราฟก 378

8.2.6.6 Thin Textured เปนกระดาษที่มี ลวดลายเฉพาะ รูสึกถึง พื้ น ผิ ว ที่ไ มเรียบ ดวยลวดลายทำใหเกิดพื้น ผิวบนนามบั ตรที่ไ ม เหมือนใคร เปนตัวเพิ่มคุ ณ ค า ของงานพิมพ 8.2.6.7 Gloss Laminate เ ป  น ก ร ะ ด า ษ ท ี ่ เ ค ล ื อ บ น ้ ำ ย า แ บบเง า มีทั้งแบบเคลือบ 1 ดาน และ 2 ดาน ทำใหนามบัตรมีความหรูหรา ดูดี มีคุณคา และยังชวย ยกระดับเจาของนามบัตรใหดูดีขึ้น ขอเสีย คือ ตองระวังการขูดขีดเนื่องจากเปนรอยไดงาย 8.2.6.8 Matte Laminate เป น กระดาษที ่ เ คลื อ บน้ ำ ยาแบบด า นให ความรูสึกแปลก มีสไตล ยกระดับใหเจาของนามบัตรดูดี 8.2.6.9 Star Vision Paper เป น กระดาษชนิ ด พิ เ ศษที ่ เ คลื อ บมี ล ั ก ษณะ คลายกับโลหะ หรืออลูมิเนียม มีความหนาถึง 285 GSM เหมาะอยางยิ่งสำหรับงานพิม พ ที ่ ต  อ งการความทนทานสู ง หรื อ งานพิ มพ ท ี ่ต  อ งการประหยั ด ค า ใช จ  า ย ไม จ ำเป น ตอง สั่งทำปายโลหะซึ่งมีราคาสูง 8.2.6.10 Striation Paper เป น กระดาษที ่ ท ำลวดลายเป น ทางยาว ลักษณะคลายกับลายลูกฟูก เพื่อเพิ่มความแปลกใหมใหแกงานพิมพ กระดาษมีความหนา 240 GSM จึงนิยมใชพิมพนามบัตร และการดเชิญชนิดตาง ๆ 8.2.6.11 Wove Paper เปนกระดาษาที่มีลวดลายเหมือนกับ ผ าละเอี ย ด หรือตาขาย จะเห็นชัดมากขึ้นเมื่อสง กับแสง กระดาษมีความหนา 240 GSM นิยมมาก สำหรับงานพิมพภาพถายที่ตองการเพิ่มลูกเลน หรือนามบัตร และการดที่แปลกไมเหมือนใคร 8.2.6.12 Wave Paper กระดาษลวดลายคล า ยลู ก คลื ่ น นิ ย มกั น อย า ง แพรหลายในงานพิมพสำหรับทำแกวกระดาษ มีความคงทน และสัมผัสที่ไมเรียบจนทำใหลื่น กระดาษหนา 220 GSM และเริ่มนิยมใชพิมพนามบัตร เนื่องจากจะไดลายแปลกใหม 8.2.6.13 Clear Frosted เปนพลาสติกโปรง แสงแบบขุนคลายกระจกฝ า พื้น ผิวไมเรียบ มีความคมชัดทุกตัวอักษร และภาพ ทนทานตอน้ำ และสารเคมีบางชนิด และฉีกขาดไดยาก 8.2.6.14 Frosted เปนกระดาษเคลือบลายแบบดาน ซึ่งอาจจะมีลวดลาย เฉพาะของธุรกิจ เมื่อสัมผัสจะใหความรูสึกคลายๆ กับเม็ดทรายที่มีความละเอียดมากๆ ตั ว กระดาษจะมี ค วามด า น มั ก จะนิ ย มใช ร  ว มกั บ Spot UV เคลื อ บเงาเฉพาะจุ ด ซึ่งจะเพิ่มความโดดเดนใหแกตัวงานมากยิ่งขึ้น นิยมใชกับงานนามบัตร มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 379

8.2.6.15 Soft Touch Laminate เปนกระดาษแบบเคลือบดาน ซึ่งจะเปน การเคลือบแบบพิเศษ มีสัมผัสออนนุม เมื่อสัมผัสแตกตางจากการเคลือบแบบปกติ 8.2.7 ขั้นตอนสำคัญในการออกแบบนามบัตร สำหรับขั้น ตอนการออกแบบนามบัต ร เพื่อความสวยงาม และเกิด ความ ประทับใจแกลูกคา มีดังนี้ 8.2.7.1 สรุปสิ่งที่เราตองการใชในการอกแบบจากลูกคา ขอรายละเอียดของ เจาของนามบัตร แนะนำใหทำแบบสอบถาม หรือรายการตรวจสอบ เชน ชื่อ นามสกุ ล ตำแหน ง หน า ที ่ ท ั ้ ง ภาษาไทย และภาษาอั ง กฤษ ชื ่ อ ที ่ อ ยู  บ ริ ษ ั ท สี ท ี ่ ต  อ งการพาะ กระดาษที ่ ต  อ งการเฉพาะ และขอไฟล โ ลโก ข องลู ก ค า คำตอบและข อ มู ล ของลู ก ค า จะทำมาออกแบบนามบัตรตอไป 8.2.7.2 ตีโจทยขอมูลมาเปฯแนวคิดงานออกแบบ เมื่อไดขอมูลเบื้องตนจาก ลูกคาแลว ตองจับประเด็นสำคัญของโจทยใหไดกอน ใชคำสำคัญมาเปนจุดกำเนิดในการคิด ลองพูดไปเรื่อย ๆ และจดเก็บไว จากนั้นนำสิ่งที่เขียนมาพิจารณา สรางความคิดเชื่อ มโยง แบบอุปมาอุปไมยเปนภาพคราวๆ และสรุปออกมาเปนแนวคิดงานออกแบบ 8.2.7.3 ออกแบบภาพราง หลังจากไดแนวคิดการออกแบบมาเรียบรอยแลว เราจะนำความคิดทีไ่ ดทั้งหมดมารางออกมาเปนภาพหลายๆ แบบ เพื่อเลือกแบบที่ตอบโจทย แนวคิดมากที่สุดเพื่อออกแบบในโปรแกรมคอมพิวเตอร 8.2.7.4 ออกแบบงานจริ ง ในโปรแกรมคอมพิ ว เตอร ขยายแนวคิ ด การ ออกแบบภาพร า ง มาเป น ภาพจริ ง ที ่ โ ปรแกรมคอมพิ ว เตอร ให ส วยงาม และส ง อี เ มล ตั ว อย า งงานให ล ู ก ค า เพื ่ อ แลกเปลี ่ ย นความคิ ด เห็ น เพิ ่ ม เติ ม จากลู ก ค า เพื ่ อ ปรั บ ปรุ ง แกไขนามบัตร 8.2.7.5 ตรวจสอบความถู ก ต อ ง นามบั ต รสะท อ นไปถึ ง ภาพลั ก ษณ ของผู  ถ ื อ นามบั ต ร และความน า เชื ่ อ ถื อ ของธุ ร กิ จ ความถู ก ต อ งจึ ง เป น สิ ่ ง ที ่ ส ำคั ญ ผู  อ อกแบบต อ งตรวจทานอย า งละเอี ย ด ถ า ไม เ ป น การรบกวนลู ก ค า ควรส ง ให ล ู ก ค า ไดตรวจสอบความถูกตองกอนการพิมพนามบัตร

การออกแบบกราฟก 380

8.2.7.6 เตรี ย มไฟล ส  ง พิ ม พ ทำตั ด ตก Crop Mark หรื อ มาร ค ไดคั ต กรณีที่ตองการตัดเจาะนามบัตรเปนรูปทรงแปลกๆ ใหเรียบรอย บันทึกไฟลพรอมระบุชื่อ หรือสงตัวอยางกระดาที่ตองการพิมพใหแกโรงพิมพ 8.2.8 การฝกปฏิบัติออกแบบนามบัตร (Business Card Design) แบงออกเปน 3 ขั้นตอน ดังนี้ 8.2.8.1 ขั้นตอนเตรียมการผลิต (Pre-Production) หนาที่นักออกแบบเมื่อไดรับขอมูลเบื้องตนจากการวิเคราะหปญ หา ใหนำ ขอมูลที่ไดมาตอบคำถามทั้ง 4 ขอ เพื่อออกแบบแนวคิด ดังนี้ 1) อะไร (What) โจทย ใ ห อ อกแบบนามบั ต รแนะนำข อ มู ล ของ เจาของนามบัตร โดยใชโปรแกรม Adobe Illustrator 2) ที่ใด (Where) เพื่อใชเปนสื่อสิ่งพิมพ จัดพิมพลงบนกระดาษขนาด 5.5x9 เซนติเมตร ใชสำหรับแนะนำตัว และแนะนำหนวยงาน หรือบริษัทที่สังกัด เมื่อพบปะบุคคลที่ ตองการเชื่อมความสัมพันธ สามารถแลกเปลี่ยนนามบัตรไดทุกที่เมื่อมีโอกาส 3) ใคร (Who) กลุมเปาหมายสำหรับวัยผูใหญ บุคคลที่อยูในชวงวัยทำงาน 4) อย า งไร (How) ออกแบบด ว ยขนาด 5.5x9 เซนติ เ มตร มี ส องด า น ดานหนามีพื้นหลังสีขาว และมีโลโกคืออักษรเอ (A) ซึ่งเปนอักษรตัวแรกของชื่อ AoeyStyle ลักษณะของอักษรเอ มีความโคงมน แสดงออกถึงความเปนมิตร และเมื่อมองสลับดาน จะ เปนรูปหัวใจ หมายถึงการทำงานดวยหัวใจ และใชโทนสีสม เปนสีที่สื่อถึงความคิดสรางสรรค ในการผลิตผลงาน และประกอบดวยขอความสีดำซึ่งเปนขอมูลเจาของนามบตร สวนดานหลัง มีพื้นหลังสีสม และเพิ่มคิวอารโคด (QR CODE) สามารถสแกนเขาถึงขอมูลไดสะดวก และ รวดเร็วมากขึ้น

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 381

8.2.8.2 ขั้นตอนการผลิต (Production) เปนการแสดงขั้นตอนและวิธีการ นามบัตร (Business Card Design) อยางละเอียด ดังนี้ 1. ขั้นตอนแรก เปดโปรแกรม Adobe Illustrator เริ่มสรางชิ้นงานใหมโดยไปที่เมนู File>New จากนั้น เลือกประเภทงานสิ่งพิมพ (Print) (ดัง ขอ 1) จากนั้น ตั้งชื่อไฟลงาน Card และกำหนดขนาดของนามบัตรซึ่งมีขนาด ความกวาง (Width) เทากับ 5.5 เซนติเมตร (Centimeters) ความสู ง (Height) เท า กั บ 9 เซนติ เ มตร (Centimeters) กำหนดกระดาษเปนแนวตั้ง (ดังขอ 2) ตั้งคาเผื่อพื้นที่ตัดตก (Bleed) เทากับ 0.3 เซนติเมตร (ดัง ขอ 3) กำหนดโหมดสี (Color Mode) เปน CMYK Color (ดัง ขอ 4) จากนั้นคลิกที่ Create เพื่อสรางงาน (ดังขอ 5) 1

2

3

4

5

ภาพที่ 8.2.2 การสรางชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 382

2. เมื่อคลิกที่ Create จะไดชิ้นงานใหม (ดังขอ 6) ใหเลือกเมนู Window จากนั้น เลือกเครื่องมือในการทำงาน (Toolbars) (ดังขอ 7) และเลือกเลเยอร(Layers) แสดงลำดับ ชั้นของวัตถุ (ดังขอ 8) 7

6

6

8

ภาพที่ 8.2.3 ชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564) 3. คลิ ก ที ่ เ ครื ่ อ งมื อ วาดรู ป ทรงสี ่ เ หลี ่ ย ม (Rectagle Tool) (ดั ง รู ป ที ่ 9) เพื่อวาดรูปทรงสี่เหลี่ยมผืนผา 9

ภาพที่ 8.2.4 การใชเครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectangle Tool) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 383

4. คลิกที่เครื่องมือการเติมสี (Fill) เลือกสีสม (ดังขอ 10) แลวคลิกปุม OK

11

10

ภาพที่ 8.2.5 การเติมสี (Fill) ที่มา : นุจรี บุรีรัตน (2564)

5. ทำการวาดรูปสี่เหลี่ยมใหเต็มกรอบสี่เหลี่ยม และไมตองกำหนดคาสีเสนขอบ (Stroke) (ดังขอ 11) 13

12

13

ภาพที่ 8.2.6 การวาดรูปสี่เหลี่ยม ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 384

6. รูปสี่เหลี่ยมสีสมที่ไดจากการวาดเสร็จแลว จะไดภาพดังที่ปรากฏ (ดัง รูป 14) จากนั้นสรางเลเยอรใหมโดยคลิกที่เครื่องหมายบวก (+) (Create new layer) จะปรากฏ เลเยอรใหมเพิ่มขึ้นมา (ดังขอ 15) 14 15

ภาพที่ 8.2.7 การเพิ่มเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 7. คลิกที่เครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectagle Tool) (ดัง รูปที่ 9) เพื่อวาดรูปทรงสี่ เหลี่ยมผืนผา 16

ภาพที่ 8.2.8 การใชเครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectangle Tool) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 385

8. ทำการวาดรูปสี่เหลี่ยมผืนผา (ดัง ขอ 17) คลิกเลือกเครื่องมือการเติมสี (Fill) โดยเลือกสีสม และไมตองกำหนดคาสีเสนขอบ (Stroke) (ดังขอ 18)

17

18

ภาพที่ 8.2.9 การเติมสี (Fill) ที่มา : นุจรี บุรีรัตน (2564) 9. รูปสี่เหลี่ย มผืน ผา ที ่ท ำการวาดเสร็ จแลว จะไดภาพดัง ที่ปรากฏ (ดัง ขอ 19) ใหทำการคัดลอกรูปสี่เหลี่ยมผืนผาโดยใชคียลัด โดยกดปุม Ctrl+C เพื่อทำการคัดลอก และ Ctrl+V เพื่อวางรูปในตำแหนงดานลาง (ดังขอ 20)

19

20

ภาพที่ 8.2.10 รูปสี่เหลี่ยมผืนผาที่ทำการวาดเสร็จแลว ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 386

10. ท ำ ก า ร ค ั ด ล อ ก ร ู ป ส ี ่ เ ห ล ี ่ ย ม ผ ื น ผ  า เ พ ิ ่ ม อ ี ก ค ร ั ้ ง ( ด ั ง ข  อ 2 1 ) แล ว เลื อ กเครื ่ อ งมื อ การเติ ม สี (Fill) โดยเลื อ กสี ข าว (ดั ง ข อ 22) เพื ่ อ เตรี ย มนำไปวาง ตำแหนงชิ้นงานฝงขวา

21

22

ภาพที่ 8.2.11 การคัดลอกรูปสี่เหลี่ยมผืนผา ที่มา : นุจรี บุรีรัตน (2564) 11. เมื ่ อ ทำการคั ด ลอกรู ป สี ่ เ หลี ่ ย มผื น ผ า และกำหนดค า การเติ ม สี เ สร็ จ แล ว ให ป รั บ ตำแหน ง โดยวางไว ด  า นบนของชิ ้ น งานฝ  ง ขวา (ดั ง ข อ 23) จากนั ้ น ทำการ คัดลอกเพิ่มอีกครั้ง นำมาวางดานลางขวา (ดังขอ 24) 123

24

ภาพที่ 8.2.12 การคัดลอกรูปสี่เหลี่ยมผืนผาเสร็จแลว และการเติมสี (Fill) ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 387

12. รูปสี่เหลี่ยมสีสมที่ไดจากคัดลอกและจัดวางเสร็จแลว จะไดภาพดังที่ปรากฏ (ดังขอ 25) จากนั้นสรางเลเยอรใหมโดยคลิกที่เครื่องหมายบวก (+) (Create new layer) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 26) 25

26

ภาพที่ 8.2.13 การเพิ่มเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 13. คลิ ก ที ่ เ ครื ่ อ งมื อ ดู ด สี (Eyedropper Tool) (ดั ง ข อ 27) จากนั ้ น คลิ ก ที่บริเวณพื้นที่สีสม (ดังขอ 28)

27

28

ภาพที่ 8.2.14 การใชเครื่องมือดูดสี (Eyedropper Tool) ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 388

14. เมื่อทำการดูดสีเสร็จแลว ใหคลิกเลือกเครื่องมือปากกา (Pen Tool) (ดังขอ 29) เพื่อเตรียมวาดรูปทรงอิสระ 29

ภาพที่ 8.2.15 การใชเครื่องมือปากกา (Pen Tool) ที่มา : นุจรี บุรีรัตน (2564) 15. จากนั้นไมตองเติมสี (Fill) แตใหกำหนดคาสีเสนขอบ (Stroke) เปนสีสม (ดังขอ 30) แลวใชปากกาวาดเสนรูปทรงที่ตองการ โดยมีลักษณะคลายอักษร A (ดังขอ 31)

31

30

ภาพที่ 8.2.16 การใชปากกาวาดเสนรูปภาพที่ตองการ ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 389

16. คลิกที่เครื่องมือเพิ่มจุดแองเคอรและแกไขจุด (Anchor Point Tool) (ดังขอ 32) ใหใชเมาสปรับเสนพาธในจุดที่ตองการใหมีความโคงมนตามรูปทรงที่ตองการ (ดังขอ 33)

33 32

ภาพที่ 8.2.17 การใชเครื่องมือเพิ่มจุดแองเคอรและแกไขจุด (Anchor Point Tool) ที่มา : นุจรี บุรีรัตน (2564) 17. ตั ว ย า งของการปรั บ จุ ด ของเส นพาธให มี ค วามโค ง มน เป น รู ป ทรงลั กษณะ คลายตัวอักษร A (ดังขอ 34) แลวปรับทุกจุดใหมีความโคงมนตามรูปทรงที่เราตองการ

34

ภาพที่ 8.2.18 ตัวอยางการปรับจุดของเสนพาธใหมีความโคงมน ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 390

18. เมื ่ อ ปรั บ จุ ด ของเส น พาธให ม ีค วามโค ง มนตามรู ป ทรงที ่ ต  อ งการเสร็ จ แลว จะไดภาพดังที่ปรากฏ (ดังขอ 35) จากนั้นสรางเลเยอรใหมโดยคลิกที่เครื่องหมายบวก (+) (Create new layer) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 36)

36 35

ภาพที่ 8.2.19 การเพิ่มเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 19. คลิกเลือกเครื่องมือพิมพขอความ (Type Tool) เพื่อพิมพขอความตอไป (ดังขอ 37) จากนั้นคลิกเลือกเครื่องมือเติมสี (Fill) (ดังขอ 38) โดยเลือกสีดำใหแกตัวอักษร (ดังขอ 39) แลวคลิกปุม OK

37

39

38

ภาพที่ 8.2.20 การพิมพขอความ และกำหนดสีใหแกขอความ ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 391

20. เมื่อพิมพขอความทั้งหมดและกำหนดสีเสร็จแลว จะไดภาพดังที่ปรากฏ (ดังขอ 40)

40

ภาพที่ 8.2.21 ภาพที่ไดจากการพิมพขอความ และกำหนดสีใหแกขอความ ที่มา : นุจรี บุรีรัตน 21. กำหนดสี ใ ห ข  อ ความคำว า “AOEY” ให ม ี ส ี ส  ม เพื ่ อ เน น สี ใ ห แ ตกต า ง โดยลากแถบสีขอความที่ตองการ (ดังขอ 41) จากนั้นเลือกเครื่องมือการเติมสี (Fill) (ดังขอ 42) เลือกสีสมใหแกตัวอักษร (ดังขอ 43) แลวคลิกปุม OK

43 41 42

ภาพที่ 8.2.22 การกำหนดสีขอความบางสวน ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 392

22. เมื่อไดขอความและกำหนดสีตามที่ตองการแลว จะไดภาพดังที่ปรากฏ (ดังขอ 44) จากนั้นใหทำการคัดลอกรูปทรงที่มีลักษณะคลายอักษร A เพิ่มขึ้นมา (ดังขอ 45)

44

45

ภาพที่ 8.2.23 การคัดลอกรูปทรงที่มีลักษณะคลายอักษร A ที่มา : นุจรี บุรีรัตน (2564) 23. ทำการเปลี ่ ย นสี ต ั ว อั ก ษรโดยเลื อ กเครื ่ อ งมื อ การเติ ม สี (Fill) (ดั ง ข อ 46) เลือกสีขาว (ดังขอ 47) แลวคลิกปุม OK

47 46

ภาพที่ 8.2.24 การเติมสี (Fill) ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 393

24. ภาพที่ไดจากการเปลี่ยนสีขอความ และปรับขนาดใหเหมาะสมตามที่ตองการ (ดังขอ 48) จากนั้นใหทำการคัดลอกขอความ “AOEYSTYLE” เพิ่มขึ้นมา (ดังขอ 49)

48 49

ภาพที่ 8.2.25 การคัดลอกขอความ ที่มา : นุจรี บุรีรัตน 25. ภาพที ่ ไ ด จ ากการคั ด ลอกข อ ความ “AOEYSTYLE” แต ใ ห ท ำการเปลี ่ ย น สีขอความ “AOEY” ใหเปนสีขาว (ดังขอ 50)

50

ภาพที่ 8.2.26 การเปลี่ยนสีขอความ ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 394

26. ทำการสราง QR CODE โดยคัดลอก URL จากเพจที่ตองการ นำมาวางบน เว็ บ ไซต ท ี ่ ใ ห บ ริ ก ารสร า ง QR CODE (ดั ง ข อ 51) ในที ่ น ี ้ ใ ช เ ว็ บ ไซต the-qrcodegenerator.com จากนั้นทำการบันทึก QR CODE ที่ได นำมาใชในการออกแบบตอไป (ดังขอ 52)

51

52

ภาพที่ 8.2.27 การสราง QR CODE ที่มา : นุจรี บุรีรัตน 27. เมื่อสราง QR CODE แลวใหปรับขนาดโดยใชคียลัด Ctrl+T และวางในตำแหนง ที่ตองการ จะไดภาพดังที่ปรากฏ (ดังขอ 53)

53

ภาพที่ 8.2.28 การปรับขนาดและวาง QR CODE ในตำแหนงที่ตองการ ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 395

28. สร า งเลเยอร ใ หม โ ดยคลิ ก ที ่ เ ครื ่ อ งหมายบวก (+) (Create new layer) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 54)

54

ภาพที่ 8.2.29 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน 29. คลิกเลือกเครื่องมือพิมพขอความ (Type Tool) (ดังขอ 55) เพื่อพิมพขอความ ตอไป (ดัง ขอ 56) จากนั้น คลิกเลือกเครื่องมือ เติม สี (Fill) (ดัง ขอ 57) โดยเลือกสี ข าว ใหแกตัวอักษร (ดังขอ 58) แลวคลิกปุม OK

55 58 57

56

ภาพที่ 8.2.30 การพิมพขอความและกำหนดสี ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 396

30. เมื่อพิมพขอความและกำหนดสีเสร็จเรียบรอยแลว จะไดภาพดังที่ปรากฏ (ดังขอ 59)

59

ภาพที่ 8.2.31 ภาพที่ไดจากการพิมพขอความและกำหนดสีใหแกขอความ ที่มา : นุจรี บุรีรัตน 31. ทำการบันทึกไฟลในกรณีที่ตองการแกไขภายหลัง ใหบันทึกเปนไฟลนามสกุล .ai ซึ่ง เปนไฟลงานที่ตองเปดแกไขดวยโปรแกรม Adobe Illustraor ในครั้ง นี้บันทึกไฟลชื่อ Card.ai (ดังขอ 60) จากนั้นคลิกที่ปุม SAVE (ดังขอ 61) 60 61

ภาพที่ 8.2.32 การบันทึกไฟลนามสกุล .ai ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 397

32. เมื่อทำการบันทึกไฟล จะขึ้นกลองขอความแสดงเวอรชันของโปรแกรม จากนั้น ใหคลิกที่ปุม OK (ดังขอ 62)

62

ภาพที่ 8.2.33 การบันทึกไฟลงานสำหรับแกไขได ที่มา : นุจรี บุรีรัตน (2564) 8.2.8.3 ขั้นตอนหลังการผลิต (Post-Production) เมื่อออกแบบนามบัตรเสร็จ เรียบรอยแลว สิ่งที่ตองทำเปนขั้นตอนตอไปคือ การจัดเตรียมไฟลเพื่อนำไปใชงาน การจัดการ ฟอนตภาพใหเปนเวกเตอร เพื่อปองกันฟอนตผิดปกติจากที่ทำการออกแบบไว และการ บันทึกไฟลเพื่อสงพิมพ หากเตรียมไฟลไดอยางถูกตอง จะทำใหไดงานพิมพที่ตรงตามความ ตองการ

การออกแบบกราฟก 398

1. ทำการจั ด การฟอนต เ ป น ภาพเวกเตอร เพื ่ อ ป อ งกันฟอนตเ ปลี ่ย นแปลงเมื่อ นำไปพิมพ เพื่อความรวดเร็วใหกดปุม Ctrl+A เปนการเลือกขอความทั้งหมด แลวกดปุม Shift+Ctrl+O เพื่อจัดการฟอนตทั้งหมดใหเปนภาพเวกเตอร (ดังขอ 63-64) และทำการ รวมกลุม โดยกดปุม Ctrl+G

63

64

ภาพที่ 8.2.34 การจัดการฟอนตเปนภาพเวกเตอร ที่มา : นุจรี บุรีรัตน (2564) 2. การส ง ออกไฟล เ พื ่ อ นำไปใช ใ นงานต า ง ๆ (Export) โดยไปที ่ เ มนู File> Export>Export As… (ดังขอ 65)

65

ภาพที่ 8.2.35 การสงออกไฟลงาน (Export) ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 399

3. เลือกรูปแบบไฟลงานที่ตองการนำไปใช โดยเลือกนามสกุลไฟลที่ตองการในชอง Format เชน เลือกไฟลนามสกุล .jpg ตั้งชื่อไฟล Card.jpg (ดังขอ 66) จากนั้นคลิกที ่ ปุม Export (ดังขอ 67) 66 67

ภาพที่ 8.2.36 การเลือกรูปแบบไฟลงานที่ตองการนำไปใชเมื่อตองการสงออก ที่มา : นุจรี บุรีรัตน (2564) 4. ส ง ออกไฟล ง านด ว ยประเภทโหมดสี (Color Model) CMYK เนื ่ อ งจาก ตองนำเสนอ ดวยการพิมพ (ดังขอ 68) จากนั้นคลิกที่ปุม OK (ดังขอ 69) 68

69

ภาพที่ 8.2.37 การกำหนดโหมดสีในการสงออกไฟล ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 400

5. ผลงานการออกแบบนามบัตรที่จัดทำเสร็จเรียบรอยแลว (ดังขอ 70) เมื่อตองการ จัดพิมพ ควรสง ไฟลใหโรงพิมพสองไฟล ไดแกไ ฟล Card.jpg สำหรับใหโรงพิมพเพื่อเปน ตัวอยางในการเปรียบเทียบกับไฟลจริงวาเหมือนกับงานจริงหรือไม และสงไฟลภาพที่สามารถ แกไขได คือไฟล Card.ai แนบไปดวยเพื่อนำไปใชในงานพิมพ และในกรณีหากมีการแกไ ข เพื่อลดขอผิดพลาดไมควรสงไฟลงานจริงเพียงไฟลเดียว ตัวอยางการนำนามบัตรไปจัดพิมพดวยขนาด 5.5x9 เซนติเมตร โดยนามบัตร 1 ใบ ประกอบดวย 2 ดาน คือดานหนา และดานหลัง ดังภาพ ดานหนา 70

ดานหลัง

ภาพที่ 8.2.38 ผลงานการออกแบบนามบัตร และตัวอยางการนำไปใชงาน ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 401

สิ่งที่เราสามารถพบเห็นไดในชีวิตประจำวัน และสามารถพบเห็นไดทั่วไป ไมวาจะ เปน ฉลากอาหาร ฉลากเครื่องดื่ม ฉลากเครื่องสำอาง ฉลากเครื่องใชไฟฟา หรือฉลากสินคา อื่น ๆ อีกมากมาย ฉลากสินคาคืออะไร มีความสำคัญกับผูบริโภคอยางไร 8.3 การออกแบบฉลากสินคา (Label Design) ฉลากสิน คา คือ รูป รอยประดิษฐ กระดาษหรือสิ่งอื่นใดที่ทำใหปรากฏขอความ เกี่ยวกับสินคา เมื่อผลิตสินคาเพื่อจำหนายขึ้นมา สติกเกอร หรือ ฉลากสินคา เปนสวนสำคัญ ที ่ จ ะช ว ยสร า งความจดจำให แ ก ต ั ว สิ น ค า และให ล ู ก ค า กลั บ มาซื ้ อ ใหม ไ ด ถ ู ก ต อ ง มี ผ ลในเรื ่ อ งการตั ด สิ น ใจ จะสั ง เกตได ว  า สิ น ค า บางชนิ ด รสชาติ ก ็ ธ รรมดาทั ่ ว ไป แต เ มื ่ อ มี ฉ ลากสิ น ค า ที ่ ส วยงาม ทำให ส ิ น นค า นั ้ น มี ค วามน า เชื ่ อ ถื อ ดู น  า ซื ้ อ มากขึ้ น อีกทั้งยังเปนสวนหนึ่งของการเพิ่มมูลคาของผลิตภัณฑ และการแขงขันทางการคา

ภาพที่ 8.3.1 ภาพฉลากสินคาที่นำไปติดลงบนแกวน้ำพลาสติก ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 402

8.3.1 ประโยชนของฉลากสินคา ช ว ยให ล ู ก ค า ทราบถึ ง รายละเอี ย ดของสิ น ค า จดจำสิ น ค า ได ง  า ย สร า งความแตกต า ง ให ส ิ น ค า จากคู  แ ข ง และเมื ่ อ ต อ งการจะเพิ ่ ม เติ ม ผลิ ต ภั ณ ฑ เขามาในสายผลิตภัณฑเดิมก็สามารถเพิ่มเติมจากยี่หอเดิมไดงายสามารถนำไปจดทะเบียนคุม ครองการลอกเลียนแบบได มีความเปนสากล พรอมที่ขยายตลาด 8.3.2 ขนาดของฉลากสินคา เรื่องของขนาดฉลากสินคาจะขึ้นอยูกับลักษณะของบรรจุภัณฑวาเปนแบบใด เปน กลอง เปนซอง วางบนขวดแกว หรือแผนภาชนะรูปทรงของฉลาก จะถูกออกแบบ ให เ หมาะสมกั บ บรรจุ ภ ั ณ ฑ น ั ้ น ๆ ที ่ ส ำคั ญ ตั ว หนั ง สื อ ที ่ อ ยู  บ นฉลากจะต อ งอ า นง า ย เห็นไดชดั เจน 8.3.3 องคประกอบบนฉลากสินคา องคประกอบการบนตัวฉลากสินคาใน Workshop จะประกอบไปดวย ชื่อ หรือเครื่องหมายการคา เบอรโทรศัพท หรือสถานที่ตั้งที่สามารถติดตอไดจริง 8.3.3.1 ชื่อ สินคา เปนตัวหนัง สือที่มีขนาดใหญ โดดเดนวางอยูตำแหน ง ที่ชัดเจน เห็นไดงาย 8.3.3.2 ภาพประกอบ เป น ภาพถ า ย ภาพวาดกราฟ ก สิ ่ ง สำคั ญ คื อ ภาพประกอบ ตองสวยงาม โดดเดน ดึงดูดใจ 8.3.3.3 ที่อยู หรือเบอรโทรศัพ ท ที ่ส ามารถติ ด ตอได ตองเปนขอมู ล จริ ง ที่สามารถติดตอได อาจจะเปนที่อยูของสถานที่ประกอบการ เบอรโทรศัพท หรือเปนชองทาง ติดตอทางอินเทอรเน็ตตามยุคสมัย เชน เฟซบุก ไลน เปนตน 8.3.4 ขั้นตอนการออกแบบฉลากสินคา ขั้นตอนการออกแบบฉลากสินคา ใหมีความสวยงาม จดจำไดงาย มีขั้นตอน การออกแบบ ตั้งแตตนจนถึงสั่งพิมพ ดังนี้ 8.3.4.1 ศึ ก ษารายละเอี ยด และวิ เ คราะหข  อ มู ลดั ้ ง เดิ ม เป น โจทยหลัก ที ่ น ั ก ออกแบบจะต อ งทราบก อ น ประกอบด ว ยตราสิ น ค า หรื อ ตั ว อย า งรู ป แบบที่ ลูกคาตองการ (ถามี) ตัวอยางบรรจุภัณฑ เพื่อดูบริเวณที่ฉลากสินคาติดอยู เปนตัวกำหนด รูปแบบ และขนาดของฉลากสินคา มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 403

8.3.4.2 นำขอ มูลที่ไ ด มาสรุป เปนแนวคิ ดการออกแบบ นำขอมูลตั ้ ง แต ขั ้ น ตอนการตี โ จทย ก ารออกแบบเพื ่ อ สรุ ป แนวคิ ด สำหรั บ ฉลากสิ น ค า ที่ ออกแบบให ผลิตภัณฑใหม ที่ผลิตและขายแบบครัวเรือน ลูกคาตองการฉลากสินคา ที่มีออกแบบสวยงาม 8.3.4.3 ออกแบบราง ดวยลักษณะพื้นที่ของฉลากสินคาตองไปอยูบนฝา บรรจุภัณฑ ขนม ที่มีบริเวณขอฉลากสติกเกอรเปนรูปแบบวงกลมขนาดเสนผา ศูนยกลาง 3 เซนติเมตร แลวสงภาพรางใหลูกคาดูกอนเพื่อฟงคอมเมนต เพื่อปรับปรุง กอนจะออกแบบ จริงในคอมพิวเตอร 8.3.4.4 ออกแบบในคอมพิวเตอร โดยนำแบบรางที่ลงตัวแลวนำมาออกแบบ ฉลากสิน ค าในคอมพิวเตอร โดยใชโปรแกรม Illustrator วาดรูป และจัดวาง Layout ทั้ง รูปภาพ และขอความทั้ง หมดขั้น มา จากนั้นจะสง ใหล ูกคา ดูง านอีกรอบ วาควรเพิ่ ม ลดหรื อ ปรั บ แต ง อะไรเพิ ่ ม หรื อ ไม เมื ่ อ ปรั บ แต ง เรี ย บร อ ยจะส ง ให ล ู ก ค า ดู อ ี ก ครั้ ง ในขั้นตอนตอไป 8.3.4.5 ตรวจทาน และแกไข ตรวจดูความถูกตองทั้งหมดบนฉลากสินคา เชน ชื่อตัวหนังสือ ภาพประกอบ ตัวหนังสือขอความตางๆ สถานที่ตั้ง เบอรโทรศัพท เปนตน 8.3.4.6 เตรี ย มไฟล เ พื ่ อ จั ด พิ ม พ จั ด การตั ว อั ก ษรให เ รี ย บร อ ย สงไฟลงานไปยังรานพิมพฉลากสินคา ดำเนินตามขั้นตอนการพิมพ และตัดตอได 8.3.5 การฝกปฏิบัติออกแบบนามบัตร (Business Card Design) แบงออกเปน 3 ขั้นตอน ดังนี้ 8.3.5.1 ขั้นตอนเตรียมการผลิต (Pre-Production) หนาที่นักออกแบบเมื่อไดรับขอมูลเบื้องตนจากการวิเคราะหปญ หา ใหนำ ขอมูลที่ไดมาตอบคำถามทั้ง 4 ขอ เพื่อออกแบบแนวคิด ดังนี้ 1) อะไร (What) โจทยใหออกแบบฉลากสินคาประชาสัมพันธสินคาร าน กาแฟ โดยใชโปรแกรม Adobe Illustrator 2) ที่ใด (Where) เพื่อใชเปนสื่อสิ่งพิมพ จัดพิมพลงบนกระดาษขนาด 5x5 เซนติเมตร ใชประชาสัมพันธภายในรานกาแฟ โดยติดลงบนวัสดุตาง ๆ ที่เปนสินคาภายใน รานกาแฟ 3) ใคร (Who) กลุมเปาหมายสำหรับวัยรุน นักศึกษา และบุคคลทั่วไปที่นิยม ดื่มกาแฟ หรือนั่งพักผอนรานคาเฟ

การออกแบบกราฟก 404

4) อยางไร (How) ออกแบบฉลากสินคาเปนรูปทรงกลม เพื่อแสดงออกถึง ความเปนมิตร เขาถึงไดงาย มีรูปถวยกาแฟ และควันอยูตรงกลาง เพื่อเปนจุดสนใจ ใชสี น้ำตาลเขม ซึ่งเปนสีของกาแฟ ลอมรอบดวยกรอบสีเขียว ที่สื่อถึงรานกาแฟที่หอมลอมดวย ธรรมชาติ และคาดดวยชื่อราน “GOOD CAFE” ใชตัวอักษรสีขาว พื้นหลังสีเหลือง เพื่อใหชื่อ รานเดนขึ้นมา 8.3.5.2 ขั ้ น ตอนการผลิ ต (Production) เป น การแสดงขั ้ น ตอนและวิ ธ ี ก าร ออกแบบฉลากสินคา (Label Design) อยางละเอียด ดังนี้ 1. ขั้นตอนแรก เปดโปรแกรม Adobe Illustrator ขึ้นมา เริ่มสรางชิ้นงานใหม โดยไปที ่ เ มนู File>New จากนั ้ น เลื อ กประเภทงานสิ ่ ง พิ ม พ (Print) (ดั ง ข อ 1) จากนั้นตั้งชื่อไฟลงาน Label และกำหนดขนาดของฉลากซึ่งมีขนาด ความกวาง (Width) เท า กั บ 5 เซนติ เ มตร (Centimeters) ความสู ง (Height) เท า กั บ 5 เซนติ เ มตร (Centimeters) กำหนดกระดาษเปนแนวตั้ง กำหนดคาระยะตั ด ตก (Bleed) เทากับ 1 มิลลิเมตร (Millimeters) (ดัง ขอ 2) กำหนดโหมดสี (Color Mode) เปน CMYK Color (ดังขอ 3) จากนั้นคลิกที่ Create เพื่อสรางงาน (ดังขอ 4) 1 2

3

4

ภาพที่ 8.3.2 การสรางเอกสารใหม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 405

2. เมื ่ อ คลิ ก ที ่ Create จะได ช ิ ้ น งานใหม (ดั ง ข อ 5) ให เ ลื อ กเมนู Window จากนั ้ น เลื อก เครื ่ อ งมื อในการทำงาน (Toolbars) (ดั ง ข อ 6) และเลื อ กเลเยอรแสดง ลำชั้นของชิ้นงาน (Layers) (ดังขอ 7) 6

5 7

ภาพที่ 8.3.3 การสรางชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564) 3. คลิกเครื่องมือสรางรูปทรงวงรี (Ellipse Tool) เพื่อสรางรูปทรงวงรี (ดังขอ 8)

8

ภาพที่ 8.3.4 การใชเครื่องมือสรางรูปทรงวงรี ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 406

4. ทำการเลือกสีพื้นหนา โดยการคลิกที่เครื่องมือสีพื้นหนา (Forground Color) (ดังขอ 9) จากนั้นเลือกสีเขียว (ดังขอ 10) แลวคลิก OK

10 9

ภาพที่ 8.3.5 การเลือกสีพื้นหนา (Forground Color) ที่มา : นุจรี บุรีรัตน (2564) 5. สรางเลเยอรใหมขึ้นมา (Create new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏ เลเยอรใหมเพิ่มขึ้นมา (ดังขอ 11) 11

ภาพที่ 8.3.6 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 407

6. คลิกที่เครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectagle Tool) (ดังรูปที่ 12) เพื่อวาด รูปทรงสี่เหลี่ยมผืนผา 12

ภาพที่ 8.3.7 การใชเครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectangle Tool) ที่มา : นุจรี บุรีรัตน (2564) 7. วาดรูปทรงสี่เหลี่ยม โดยใชเมาสลากเสนสี่เหลี่ยมตามขนาดที่ตองการ (ดังรูปที่ 13) จากนั้นสรางเลเยอรใหมขึ้นมา (Create new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 14) 14

13

ภาพที่ 8.3.8 การวาดรูปทรงสี่เหลี่ยม และสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 408

8. ทำการคัดลอกวงกลมสีเ ขียวโดยใช คีย ลัด Ctrl+C เพื่อคัดลอก และ Ctrl+V เพื่อวางภาพในเลเยอรที่สรางขึ้นมาใหม (ดังขอ 16) 16 15

ภาพที่ 8.3.9 การคัดลอกวงกลม ที่มา : นุจรี บุรีรัตน (2564) 9. ทำการเปลี่ยนสีวงกลม โดยการคลิกที่เครื่องมือสีพื้นหลัง (Background Color) (ดังขอ 17) จากนั้นเลือกสีขาว (ดังขอ 18) แลวคลิก OK (ดังขอ 19)

18 17

19

ภาพที่ 8.3.10 การเปลี่ยนสีวงกลม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 409

10. ทำกรอบวงกลมสี ข าว โดยในรู ป วงกลมไม ต อ งเติ ม สี (Fill) ที ่ (ดั ง ข อ 20) และเสนขอบ (Stroke) เลือกสีขาว (ดังขอ 21) 20

21

20

ภาพที่ 8.3.11 การทำกรอบวงกลมสีขาว ที่มา : นุจรี บุรีรัตน (2564) 11. ทำการยายกรอบวงกลม โดยใชคียล ัด Ctrl+T ปรับขนาดและเลื่ อนวางใน ตำแหนงวงกลมสีเขียวตามที่ตองการ (ดังขอ 22)

22

ภาพที่ 8.3.12 การยายกรอบวงกลมสีขาว ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 410

12. ทำการลบสวนเกินสีเหลืองที่เลยกรอบสีขาวออกมา โดยคลิกที่เครื่องมือยางลบ (Eraser Tool) (ดังขอ 23) เพื่อลบบริเวณสวนที่ไมตองการออกไป (ดังขอ 24)

23

24

24

ภาพที่ 8.3.13 การลบสวนสวนเกินสีเหลือง ที่มา : นุจรี บุรีรัตน (2564) 13. เมื่อทำการลบสวนเกิน สีเหลืองออกแลว จะไดภาพดัง ที่ปรากฏ (ดัง ขอ 25) จากนั้น สรางเลเยอร ใ หมข ึ้น มา โดยคลิกที ่เ ครื่ องหมายบวก (+) (Create new layer) จะปรากฏ เลเยอรใหมเพิ่มขึ้นมา (ดังขอ 26) 26

25

25

ภาพที่ 8.3.14 การลบสวนเกินสีเหลือง และการเพิ่มเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 411

14. คลิกเลือกเครื่องมือพิมพขอความ (Type Tool) เพื่อพิมพขอความตอไป (ดังขอ 27) 27

ภาพที่ 8.3.15 การใชเครื่องมือพิมพขอความ (Type Tool) ที่มา : นุจรี บุรีรัตน (2564) 15. พิมพขอความ “GOOD CAFE” (ดังขอ 27) จากนั้นคลิกเลือกเครื่องมือเติม สี (Fill) (ดังขอ 28) เลือกสีขาวใหแกตัวอักษร (ดังขอ 28) แลวคลิกปุม OK

29 28

27

ภาพที่ 8.3.16 การพิมพขอความและการกำหนดสีตัวอักษร ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 412

16. เมื่อพิมพขอความเสร็จแลวปรับขนาดใหเหมาะสม จะไดดังภาพที่ปรากฏ (ดังขอ 30) จากนั้นสรางเลเยอรใหมขึ้นมา (Create new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 31) 31 1

30

ภาพที่ 8.3.17 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 17. คลิกเลือกเครื่องมือพิมพขอความ (Type Tool) เพื่อพิมพขอความตอไป (ดังขอ 32) 32

ภาพที่ 8.3.18 การเลือกเครื่องมือพิมพขอความ ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 413

18. พิ ม พ ข  อ ความ “IG:GOODCAFE FB: GOODCAFE” (ดั ง ข อ 33) จากนั้ น คลิกเลือกเครื่องมือเติมสี (Fill) (ดังขอ 33) เลือกสีขาวใหแกตัวอักษร (ดังขอ 33) แลวคลิก ปุม OK 33

32

ภาพที่ 8.3.19 การพิมพขอความและการกำหนดสีตัวอักษร ที่มา : นุจรี บุรีรัตน (2564) 19. ทำการสร า งเอฟเฟกต ใ ห แ ก ข  อ ความ โดยเลื อ กข อ ความที ่ ต  อ งการ กำหนดแลวคลิกที่คำสั่งสำหรับปรับแตงรูปทรงของวัตถุแบบสำเร็จรูป (Warp) (ดังขอ 34) จากนั้น ใหเลือกรูปแบบ (Style) ที่ตองการ ในที่นี้เลือก Arch และกำหนดคาตาง ๆ ตามที่เราตองการ (ดังขอ 35) จากนั้นคลิกปุม OK 35

ภาพที่ 8.3.20 การสรางเอฟเฟกตใหแกขอความ ที่มา : นุจรี บุรีรัตน (2564)

34

การออกแบบกราฟก 414

20. เมื่อสรางเอฟเฟกตใหแกขอความไดตามที่ตองการ จะไดภาพดังที่ปรากฏ (ดังขอ 36) จากนั้นสรางเลเยอรใหมขึ้นมา (Create new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 37) 37

36

ภาพที่ 8.3.21 การสรางเอฟเฟกตใหแกขอความ และการสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 21. พิมพขอความ “TEL.&LINE:089-000-0000” เลือกสีปรับขนาดและกำหนด เอฟเฟกตขอความใหไดตามที่ตองการ (ดังขอ 38) จากนั้นสรางเลเยอรใหมขึ้นมา (Create new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 39) 38

39

ภาพที่ 8.3.22 การพิมพขอความสรางเอฟเฟกต และการสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 415

22. คลิกเครื่องมือสรางรูปวงรี (Ellipse Tool) (ดังขอ 40)

40

ภาพที่ 8.3.23 การใชเครื่องมือสรางรูปวงรี (Ellipse Tool) ที่มา : นุจรี บุรีรัตน (2564) 23. วาดรูปทรงกลม โดยใชเมาสลากพรอมกับกด Shift คางไวเพื่อใหเปนรูปทรงกลม และใชคียลัด Ctrl+T ปรับขนาดตามที่ตองการ (ดังขอ 40) จากนั้นเติมสี (Fill) โดยเลือกสีขาว และไมตองกำหนดคาสีเสนขอบ (Stroke) (ดังขอ 41) แลวคลิกปุม OK

40

ภาพที่ 8.3.24 การวาดรูปวงกลมและกำหนดสี ที่มา : นุจรี บุรีรัตน (2564)

41

การออกแบบกราฟก 416

24. เมื่อวาดรูปวงกลมและกำหนดสีเสร็จแลว จะไดภาพดังที่ปรากฏ (ดัง ขอ 42) จากนั้น สรางเลเยอร ใ หมข ึ้น มา โดยคลิกที ่เ ครื่ องหมายบวก (+) (Create new layer) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 43) 43 42

ภาพที่ 8.3.25 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 25. คลิกเครื่องมือสรางรูปวงรี (Ellipse Tool) เพื่อเตรียมวาดรูปถวยกาแฟ (ดังขอ 44)

44

ภาพที่ 8.3.26 การใชเครื่องมือสรางรูปวงรี (Ellipse Tool) ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 417

26. ทำการวาดรูปวงรี โดยใชเมาสลากเสนเปนรูปวงรีตามขนาดที่ตองการ (ดังขอ 45) แลวเติมสี (Fill) เลือกสีน้ำตาลเขม (ดังขอ 46) และไมตองกำหนดสีเสนขอบ (Stroke) จากนั้นคลิกปุม OK

45

46

ภาพที่ 8.3.27 การวาดรูปวงรีและเติมสี ที่มา : นุจรี บุรีรัตน (2564) 27. คลิกเลือกเครื่ องมือยางลบ (Eraser Tool) เพื่อเตรียมลบสวนเกิน ด า นบน ออกไปใหเปนรูปถวยกาแฟ (ดังขอ 47) 47 1

ภาพที่ 8.3.28 การใชเครื่องมือยางลบ (Eraser Tool) ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 418

28. ทำการลบโดยใช เ มาส ล ากบริ เ วณด า นบนที ่ ต  อ งการลบออก จะได ภ าพดัง ที่ปรากฏ (ดังขอ 48)

48

ภาพที่ 8.3.29 การลบรูปวงรี ที่มา : นุจรี บุรรี ัตน (2564) 29. เมื ่ อ ทำการลบรู ป วงรี เ สร็ จ เรี ย บร อ ยแล ว จะได ร ู ป ทรงคล า ยถ ว ยกาแฟ ดัง ภาพที่ปรากฎ (ดัง ขอ 49) ) จากนั้น สร างเลเยอร ใหม ขึ ้น มา (Create new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 50)

50 49

ภาพที่ 8.3.30 การลบรูปวงรี และการสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 419

30. คลิกเลือกเครื่องมือแปรงทาสี (Paintbrush Tool) เพื่อเตรียมวาดรูปหูถวยกาแฟ (ดังขอ 51)

51

ภาพที่ 8.3.31 การใชเครื่องมือแปรงทาสี (Paintbrush Tool) ที่มา : นุจรี บุรีรัตน (2564) 31. ทำการวาดเสนโดยการใชแปรงทาสีวาดรูปเสนขางถวยกาแฟ เพื่อใหมีรูปทรง หูถวยกาแฟ (ดังขอ 52)

52

ภาพที่ 8.3.32 การใชเครื่องมือแปรงทาสีวาดรูปหูถวยกาแฟ ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 420

32. เมื ่ อ วาดรู ป หู ถ  ว ยกาแฟเสร็ จ แล ว จะได ภ าพดั ง ที ่ ป รากฏ (ดั ง ข อ 53) จากนั้น สรางเลเยอร ใ หมข ึ้น มา (Create new layer) โดยคลิกที ่เ ครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 54)

54 53

ภาพที่ 8.3.33 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 33. คลิกเลือกเครื่องมือแปรงทาสี (Paintbrush Tool) เพื่อเตรียมวาดรูปควั น (ดังขอ 55) 55

ภาพที่ 8.3.34 การใชเครื่องมือแปรงทาสี (Paintbrush Tool) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 421

34. ทำการวาดรูปโดยใชแปรงทาสีลากเมาสเปนเสนหยัก ใหมีลักษณะคลายควัน กาแฟ (ดังขอ 56)

56

ภาพที่ 8.3.35 การใชแปรงทาสีลากเมาสเปนเสนหยัก ที่มา : นุจรี บุรีรัตน (2564) 35. ทำการคัด ลอกควัน ใหไ ด จ ำนวน 3 รูป โดยใชคีย  ลั ด Ctrl+C และ Ctrl+V และปรับขนาดและจัดวางใหเหมาะสม (ดังขอ 57) จากนั้นสรางเลเยอรใหมขึ้นมา (Create new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมขึ้นมา (ดังขอ 58) 58 57

ภาพที่ 8.3.36 การคัดลอกภาพ และการสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 422

36. คลิกเลือกเครื่องมือพิมพขอความ (Type Tool) เพื่อพิมพขอความตอไป (ดังขอ 59) 59

ภาพที่ 8.3.37 การใชเครื่องมือพิมพขอความ (Type Tool) ที่มา : นุจรี บุรีรัตน (2564) 37. พิมพขอความ “ที่นี่..มอบแตสิ่งดีๆ” (ดังขอ 60) จากนั้นคลิกเลือกเครื่องมือเติมสี (Fill) (ดังขอ 61) เลือกสีเหลืองใหแกตัวอักษร (ดังขอ 28) แลวคลิกปุม OK

60

61

ภาพที่ 8.3.38 การพิมพขอความและการเติมสี ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 423

38. ภาพที ่ ไ ด จ ากการพิ ม พ ข  อ ความ กำหนดสี และจั ด วางให ส วยง าม จะไดภาพดังที่ปรากฏ (ดังขอ 62) 62

ภาพที่ 8.3.39 การพิมพขอความ กำหนดสี และจัดวางใหสวยงาม ที่มา : นุจรี บุรีรัตน (2564) 39. ทำการบัน ทึกไฟลในกรณีที่ตองการแกไขภายหลัง โดยไปที่ File>Save As.. ให บ ั น ทึ ก เปน ไฟลน ามสกุล .ai ซึ ่ ง เป น ไฟล ง านที ่ต  องเปด แกไ ขด วยโปรแกรม Adobe Illustrator ในครั้งนี้บันทึกไฟลชื่อ Label.ai (ดังขอ 63) จากนั้นคลิกที่ปุม SAVE (ดังขอ 64) 63 64

ภาพที่ 8.3.40 การบันทึกไฟลนามสกุล .ai ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 424

40. เมื ่ อ ทำการบั น ทึ ก ไฟล จะขึ ้ น กล อ งข อ ความแสดงเวอร ช ั น ของโปรแกรม จากนั้นใหคลิกที่ปุม OK (ดังขอ 65)

65

ภาพที่ 8.3.41 การบันทึกไฟลงานสำหรับแกไขได ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 425

8.3.5.3 ขั้นตอนหลังการผลิต (Post-Production) เมื่อออกแบบฉลากสินคาเสร็จ เรียบรอยแลว สิ่งที่ตองทำเปนขั้นตอนตอไปคือ การจัดเตรียมไฟลเพื่อนำไปใชงาน การจัดการ ฟอนตภาพใหเปนเวกเตอร เพื่อปองกันฟอนตผิดปกติจากที่ทำการออกแบบไว และการ บันทึกไฟลเพื่อสงพิมพ หากเตรียมไฟลไดอยางถูกตอง จะทำใหไดงานพิมพที่ตรงตามความ ตองการ 1. ทำการจั ด การฟอนต เ ป น ภาพเวกเตอร เพื ่ อ ป อ งกันฟอนตเ ปลี ่ย นแปลงเมื่อ นำไปพิมพ เพื่อความรวดเร็วใหกดปุม Ctrl+A เปนการเลือกขอความทั้งหมด แลวกดปุม Shift+Ctrl+O เพื่อจัดการฟอนตทั้งหมดใหเปนภาพ (ดังขอ 66) และทำการรวมกลุม โดยกด ปุม Ctrl+G

66

ภาพที่ 8.3.42 การจัดการฟอนตเปนภาพเวกเตอร ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 426

2. การส ง ออกไฟล เ พื ่ อ นำไปใช ใ นงานต า ง ๆ (Export) โดยไปที ่ เ มนู File> Export>Export As… (ดังขอ 67)

67

ภาพที่ 8.3.43 การสงออกไฟลงาน (Export) ที่มา : นุจรี บุรีรัตน (2564) 3. เลือกรูปแบบไฟลงานที่ตองการนำไปใช โดยเลือกนามสกุลไฟลที่ตองการในชอง Format เชน เลือกไฟลนามสกุล .jpg ตั้งชื่อไฟล Label.jpg (ดังขอ 68) จากนั้นคลิกที่ปุม Export (ดังขอ 69) 68 69

ภาพที่ 8.3.44 การบันทึกไฟลนามสกุล .jpg ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 427

4. ส ง ออกไฟล ง านด ว ยประเภทโหมดสี (Color Model) CMYK เนื ่ อ งจาก ตองนำเสนอผานการพิมพ (ดังขอ 70) จากนั้นคลิกที่ปุม OK (ดังขอ 71) 70

71

ภาพที่ 8.3.45 การเลือกประเภทโหมดสีในการสงออกไฟล ที่มา : นุจรี บุรีรัตน (2564) 5. ผลงานการออกแบบฉลากสินคาที่จัดทำเสร็จเรียบรอยแลว (ดัง ขอ 72) เมื่อ ตองการจัดพิมพ ควรสงไฟลใหโรงพิมพสองไฟล ไดแกไฟล Label.jpg สำหรับใหโรงพิมพเพื่อ เปนตัวอยางในการเปรียบเทียบกับไฟลจริงวาเหมือนกับงานจริงหรือไม และ สงไฟลภาพที่ สามารถแกไขได คือไฟล Label.ai แนบไปดวยเพื่อนำไปใชในงานพิมพ และในกรณีหากมีการ แกไข เพื่อลดขอผิดพลาดไมควรสงไฟลงานจริงเพียงไฟลเดียว

การออกแบบกราฟก 428

ตัวอยางการนำฉลากสินคาไปจัดพิมพดวยขนาด 5x5 เซนติเมตร แลวติดประชาสัมพันธลงบนแกวน้ำพลาสติก หรือผลิตภัณฑอื่น ๆ ดังภาพ 72

ภาพที่ 8.3.46 ผลงานการออกแบบฉลากสินคา และตัวอยางการนำไปใชงาน ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 429

8.4 การออกแบบโปสเตอรขนาด A3 (Poster Design) โดยมีรายละเอียดเนื้อหาดังบทที่ 7.1 ซึ่งเปนการออกแบบโปสเตอร แตแตกตางที่ ขนาดของผลงาน และการนำไปใชงาน ในบทที่ 7.1 เปนการออกแบบโปสเตอรดวยขนาด A4 และเปนการออกแบบเพื่อใชในการนำเสนอผานจอคอมพิวเตอร หรือจอ LCD เทานั้น โดยได กำหนดคาใหเหมาะสมกับการนำไปใชงาน คือกำหนด Color Mode เปน RGB ดังนั้นการ กำหนดรายละเอียดจะมีความแตกตางกับหัวขอนี้ ซึ่งเปนการออกแบบโปสเตอร ดวยกระดาษ ขนาด A3 เพื่อจะนำไปใชในการจัดพิมพ จะตองมีการกำหนดคา Color Mode เปน CMYK ดังจะแสดงในขั้นตอนวิธีการทำงานอยางละเอียดตอไป

ภาพที่ 8.4.1 ภาพโปสเตอรสินคาที่นำไปใชงาน ที่มา : นุจรี บุรีรัตน (2564) 8.4.1 การฝกปฏิบัติออกแบบโปสเตอรขนาด A3 (Poster Design) แบงออกเปน 3 ขั้นตอน ดังนี้ 8.4.1.1 ขั้นตอนเตรียมการผลิต (Pre-Production) หนาที่นักออกแบบเมื่อไดรับขอมูลเบื้องตนจากการวิเคราะหปญหา ใหนำ ขอมูลที่ไดมาตอบคำถามทั้ง 4 ขอ เพื่อออกแบบแนวคิด ดังนี้ 1) อะไร (What) โจทยใหออกแบบโปสเตอรประชาสัมพันธสินคา รานอาหารไทย โดยใชโปรแกรม Adobe Illustrator

การออกแบบกราฟก 430

2) ที่ใด (Where) เพื่อใชเปนสื่อสิ่งพิมพ จัดพิมพบนกระดาษขนาด A3 โดยใชประชาสัมพันธภายในรานอาหารไทย โดยติดประกาศ หรือแขวนบนปายขนาด A3 ใน หางสรรพสินคา เปนการเชิญชวนใหลูกคาที่มีความสนใจตองการสั่งอาหารไทย สามารถสั่งชื้อ และจัดสงฟรี ตามหมายเลขโทรศัพทที่ปรากฏ 3) ใคร (Who) กลุมเปาหมายสำหรับบุคคลทั่วไป ทั้งคนไทย และ ชาวตางชาติที่สนใจรับประทานอาหารไทย 4) อยางไร (How) โปสเตอรขนาด A3 มีภาพหลักคืออาหารไทย ขนาด ใหญอยูตรงกลางใหเปนจุดเดน และเห็นไดอยางชัดเจน ใชตัวอักษรสีขาวจะทำใหขอความ เดนขึ้น เพื่อดึงดูดใจลูกคา ใชพื้นหลังสีทำ เพื่อทำใหภาพอาหารและชื่อรานอาหารเดน ใช อาหารที่มีโทนสีสม หรือสีเหลืองเพื่อชวยกระตุนการอยากอาหาร ประกอบดวยพาดหัวหลัก ขอความ “THAIFOOD” สวนเนื้อหารองใชตัวอักษรสีขาว และมีชื่อผูสนับสนุนคือโลโกของ รานอยูดานมุมบนซาย โดยมีชื่อรานคือ “ZAP”

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 431

8.4.1.2 ขั ้ น ตอนการผลิ ต (Production) เป น การแสดงขั ้ น ตอนและวิ ธี กออกแบบโปสเตอร (Poster Design) อยางละเอียด ดังนี้ 1. ขั้นตอนแรก เปดโปรแกรม Adobe Illustrator ขึ้นมา เริ่มสรางชิ้นงานใหม โดยไปที ่ เ มนู F ile>Newจากนั ้ น เลื อ กประเภทงานสิ ่ ง พิ ม พ (Print) (ดั ง ข อ 1) จากนั้ น ตั้งชื่อไฟลงาน Poster และกำหนดขนาดของโปสเตอรซึ่งมีขนาด A3 แนวตั้ง กำหนดคา ระยะตัดตก (Bleed) เทากับ 3 มิลลิเมตร (Millimeters) (ดังขอ 2) กำหนดโหมดสี (Color Mode) เปน CMYK Color (ดังขอ 3) จากนั้นคลิกที่ Create เพื่อสรางงาน (ดังขอ 4)

1

2

2 3

4

ภาพที่ 8.4.2 การสรางชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 432

2. เมื่อคลิกที่ Create จะไดชิ้นงานใหม (ดังขอ 5) ใหเลือกเมนู Window จากนั้น เลือกเครื่องมือในการทำงาน (Toolbars) (ดังขอ 6) และเลือกเลเยอรแสดงชั้นของชิ้นงาน (Layers) (ดังขอ 7) 7

5

6

ภาพที่ 8.4.3 ชิ้นงานใหม ที่มา : นุจรี บุรีรัตน (2564) 3. เป ด ไฟล ภ าพพื ้ น หลั ง สี ด ำที ่ เ ตรี ย มไวแ ล ว โดยไปที ่ เ มนู เลื อ ก File>Open จากนั้นเลือกไฟลที่ตองการ (ดังขอ 8) แลวคลิกที่ปุม Open (ดังขอ 9)

8 9

ภาพที่ 8.4.4 การเปดไฟลภาพ ที่มา : นุจรี บุรีรัตน (2564) 4. ทำการคลิกเลือกเครื่องมือเคลื่อนยายวัตถุ (Move Tool) (ดังขอ 10) จากนั้น ใชเมาสลากรูปพื้นหลังสีดำมาวางไวในชิ้นงาน (ดังขอ 11) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 433

10

11

ภาพที่ 8.4.5 การยายภาพ ที่มา : นุจรี บุรีรัตน (2564) 5. เมื่อทำการยายภาพมาวางไวในชิ้นงานแลว ใหใชคียลัด Ctrl+T (ดังขอ 12) เพื่อ ปรับขนาดและจัดวางใหเต็มชิ้นงาน

12

ภาพที่ 8.4.6 การยายภาพมาวางไวในชิ้นงาน ที่มา : นุจรี บุรีรัตน (2564) 6. เมื ่ อ นำภาพพื ้ น หลั ง สี ด ำมาวางและปรั บ ขนาดให ไ ด ต ามที ่ ต  อ งก าร จะได ภ าพดั ง ที ่ ป รากฏ (ดั ง ข อ 13) สร า งเลเยอร ใ หม ข ึ ้ น มา (Create new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 14)

การออกแบบกราฟก 434

13

14

ภาพที่ 8.4.7 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 7. เป ด ไฟล ภ าพต ม ยำกุ  ง ที ่ เ ตรี ย มไว แ ล ว โดยไปที ่ เ มนู เลื อ ก File>Open จากนั้นเลือกไฟลที่ตองการ (ดังขอ 15) แลวคลิกที่ปุม Open (ดังขอ 16) 15

16

ภาพที่ 8.4.8 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 8. คลิ ก ที ่ เ ครื ่ องมือ เคลื่ อ นย า ย (Move Tool) (ดั ง ข อ 17) คลิ ก เม า ส ล ากภาพ เพื่อยายภาพตมยำกุงมาวางบนพื้นหลังสีดำ (ดังขอ 18)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 435

17

18

ภาพที่ 8.4.9 การใชเครื่องมือเคลื่อนยาย ที่มา : นุจรี บุรีรัตน (2564) 9. คลิ ก เครื ่ อ งมื อ สร า งรู ป วงรี (Ellipse Tool) (ดั ง ข อ 19) จากนั ้ น คลิ ก เม า ส ลากเสนโดยกดปุม Shift คางไวเพื่อใหเปนรูปทรงกลม (ดังขอ 20)

19

20

ภาพที่ 8.4.10 การใชเครื่องมือสรางรูปวงรี (Ellipse Tool) ที่มา : นุจรี บุรีรัตน (2564) 10. ปรั บ เส น วงกลมให ม าอยู  ใ นตำแหน ง ตรงกลางของภาพ (ดั ง ข อ 21 ) แลวคลิกเมาสขวาที่ภาพเลือกคำสั่งที่ใชในการตัดภาพเฉพาะสวน (Make Clipping Mask) จากนั้นคลิกสวนที่ตองการตัดภาพออกไป คือบริเวณนอกเสนวงกลม (ดังขอ 22 )

การออกแบบกราฟก 436

21

22

ภาพที่ 8.4.11 การคำสั่งที่ใชในการตัดภาพเฉพาะสวน (Make Clipping Mask) ที่มา : นุจรี บุรีรัตน (2564) 11. เมื ่ อ ตั ด ภาพเฉพาะส วนออกไปแล ว จะได ภ าพต ม ยำกุ ง ในรู ป ทรงสี ่เ หลี่ยม ดังที่ปรากฏ (ดังขอ 23)

23

ภาพที่ 8.4.12 ภาพที่ไดจากการตัดภาพเฉพาะสวน (Make Clipping Mask) ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 437

12. สรางเลเยอรใหมขึ้นมา (Create new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 24)

24

ภาพที่ 8.4.13 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 13. เป ด ไฟล ภ าพผั ด ไทยที ่ เ ตรี ย มไว แ ล ว โดยไปที ่ เ มนู เลื อ ก File>Open จากนั้นเลือกไฟลที่ตองการ (ดังขอ 25) แลวคลิกที่ปุม Open (ดังขอ 26) 25

26

ภาพที่ 8.4.14 การเปดไฟลภาพที่ตองการ ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 438

14. คลิ ก เครื ่ อ งมื อ สร า งรู ป วงรี (Ellipse Tool) (ดั ง ข อ 27) จากนั้ น คลิ ก เม า ส ล ากเส น โดยกดปุ  ม Shift ค า งไว เ พื ่ อ ให เ ป น รู ป ทรงกลม (ดั ง ข อ 28) แลวคลิกเมาสขวาที่ภาพเลือกคำสั่งที่ใชในการตัดภาพเฉพาะสวน (Make Clipping Mask) จากนั้นคลิกสวนที่ตองการตัดภาพออกไป คือบริเวณนอกเสนวงกลม (ดังขอ 29 ) 27 28

29

ภาพที่ 8.4.15 การคำสั่งที่ใชในการตัดภาพเฉพาะสวน (Make Clipping Mask) ที่มา : นุจรี บุรีรัตน (2564) 15. คลิกเมื่อตัดภาพเฉพาะสวนออกไปแลว จะไดภาพผัดไทยในรูปทรงสี่เหลี่ยม ดังที่ปรากฏ (ดังขอ 30)

30

ภาพที่ 8.4.16 ภาพที่ไดจากการตัดภาพเฉพาะสวน (Make Clipping Mask) ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 439

16. เปดไฟลภาพเมี่ยงที่เตรียมไวแลว โดยไปที่เมนู เลือก File>Open จากนั้น เลือกไฟลที่ตองการ (ดังขอ 31) แลวคลิกที่ปุม Open (ดังขอ 32) 31

32

ภาพที่ 8.4.17 การเปดไฟลภาพที่ตองการ ที่มา : นุจรี บุรีรัตน (2564) 17. คลิ ก เครื ่ อ งมื อ สร า งรู ป วงรี (Ellipse Tool) (ดั ง ข อ 34) จากนั้ น คลิกเมาสลากเสน โดยกดปุม Shift คางไวเพื่อใหเปนรูปทรงกลม (ดัง ขอ 35) แลวคลิ ก เมาส ข วาที ่ ภ าพเลื อ กคำสั ่ ง ที ่ ใ ช ใ นการตั ด ภาพเฉพาะส ว น (Make Clipping Mask) จากนั้นคลิกสวนที่ตองการตัดภาพออกไป คือ บริเวณนอกเสนวงกลม (ดังขอ 36 ) 34 35 36

ภาพที่ 8.4.18 การคำสั่งที่ใชในการตัดภาพเฉพาะสวน (Make Clipping Mask) ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 440

18. เมื ่ อ ตั ด ภาพเฉพาะส วนออกไปแล ว จะได ภ าพต ม ยำกุ ง ในรู ป ทรงสี ่เ หลี่ยม ดังที่ปรากฏ (ดังขอ 37) จะไดภาพทั้งหมด 3 ภาพ 3 เลเยอร (ดังขอ 38 )

37 38

ภาพที่ 8.4.19 ภาพที่ไดจากการตัดภาพ 3 ภาพ ที่มา : นุจรี บุรีรัตน (2564) 19. คลิกที่เครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectagle Tool) (ดังขอ 39) เพื่อทำการ ตั ด ภาพบางส ว นเปน แนวตั้ ง 3 ของทั ้ ง 3 ภาพ ให ท ำการตั ด ภาพบางสว นที ล ะเลเยอร จนครบทั้ง 3 เลเยอร (ดังขอ 40)

39

40

ภาพที่ 8.4.20 การใชเครื่องมือวาดรูปทรงสี่เหลี่ยม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 441

20. คลิกเมาสลากเสนสี่เหลี่ยมแนวตั้งลอมรอบบริเวณภาพที่ตองการ (ดังขอ 41) แลวคลิกเมาสขวาที่ภาพเลือกคำสั่งที่ใชในการตัดภาพเฉพาะสวน (Make Clipping Mask) จากนั้นคลิกสวนที่ตองการตัดภาพออกไป คือบริเวณนอกเสนสี่เหลี่ยม (ดังขอ 42 )

42

41

ภาพที่ 8.4.21 การคำสั่งที่ใชในการตัดภาพเฉพาะสวน (Make Clipping Mask) ที่มา : นุจรี บุรีรัตน (2564) 21. เมื ่ อ ตั ด ภาพสี ่ เ หลี ่ ย มแนวตั ้ ง เฉพาะส ว นออกไปครบทั ้ ง 3 ภาพแล ว จะได ภ าพเมี ่ ย ง ต ม ยำกุ  ง และผั ด ไทย ในรู ป วงกลมดั ง ที ่ ป รากฏ (ดั ง ข อ 43) จากนั้น สรางเลเยอรใ หม ขึ ้น มา (Create new layer) โดยคลิกที่ เ ครื ่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 44)

43

44

ภาพที่ 8.4.22 ภาพที่ไดจากการตัดภาพเฉพาะสวน และการสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 442

22. คลิกเลือกเครื่องมือพิมพขอความ (Type Tool) (ดังขอ 45) เพื่อพิมพขอความ “THAI FOOD” (ดั ง ข อ 46) จากนั ้ น คลิ ก เลื อ กเครื ่ อ งมื อ เติ ม สี (Fill) (ดั ง ข อ 47) กำหนดรูปแบบตัวอักษร ขนาดและสีขาวใหแกตัวอักษร 45 46 47

ภาพที่ 8.4.23 การพิมพขอความและกำหนดรูปแบบขอความ ที่มา : นุจรี บุรีรัตน (2564) 23. คลิกเลือกเครื่องมือ Make Envelope Options (ดังขอ 48) แลวเลือก Style: Wave และกำหนดคาตาง ๆ เพื่อปรับเอฟเฟกตใหตัวอักษรมีลักษณะคลื่น (ดังขอ 49) 48 49

ภาพที่ 8.4.24 การสรางเอฟเฟกตตัวอักษร ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 443

24. ภาพที่ไ ดจากการสรางเอฟเฟกตตัวอักษร (ดัง ขอ 50) จากนั้นสรางเลเยอร ใหมขึ้น มา (Create new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหม เพิ่มขึ้นมา (ดังขอ 51)

51

50

ภาพที่ 8.4.25 ภาพที่ไดจากการสรางเอฟเฟกตตัวอักษร และการสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 25. พิมพขอความ “Enjoy Eating” กำหนดรูปแบบขอความ แลวคลิกเลือกเครื่องมือ Make Envelope Options (ดังขอ 52) แลวเลือก Style: Arch และกำหนดคาตาง ๆ เพื่อ ปรับเอฟเฟกตใหตัวอักษรมีลักษณะโคงขึ้น (ดังขอ 53) 1

52 53

ภาพที่ 8.4.26 การสรางเอฟเฟกตตัวอักษร ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 444

26. พิมพขอความ “SUPER Delicious Food” ไวดานบน และ “ORDER NOW” ไว ด  า นล า ง จากนั ้ น กำหนดรู ป แบบตั ว อั ก ษร ขนาดและสี ต ามที ่ ต  อ งการ (ดั ง ข อ 54) สร า งเลเยอร ใ หม ข ึ ้ น มา (Create new layer) โดยคลิ ก ที ่ เ ครื่ อ งหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 55)

54

55 54

ภาพที่ 8.4.27 การกำหนดรูปแบบตัวอักษร และสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564) 27. คลิ ก ที ่ เ ครื ่ อ งมื อ วาดรู ป ทรงสี ่ เ หลี ่ ย ม (Rectagle Tool) (ดั ง ข อ 56) เพื่ อ วาดรูปทรงกรอบสี่เหลี่ยมไวใตขอความ “ORDER NOW” 56

ภาพที่ 8.4.28 การใชเครื่องมือวาดรูปทรงสี่เหลี่ยม (Rectagle Tool) ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 445

28. จากนั้นคลิกเลือกเครื่องมือเติมสี (Fill) (ดังขอ 57) กำหนดขนาดและเลือกสีสม ใหแกกรอบสี่เหลี่ยม (ดังขอ 58) แลวคลิกปุม OK 58

57

ภาพที่ 8.4.29 การกำหนดขนาดและเลือกสีใหแกกรอบสี่เหลี่ยม ที่มา : นุจรี บุรีรัตน (2564) 29. เมื ่ อ กำหนดขนาดและเลื อ กสี ใ ห แ ก ก รอบสี ่ เ หลี ่ ย มเสร็ จ แล ว จะได ภ าพ ดั ง ที ่ ป รากฏ (ดั ง ข อ 59) สร า งเลเยอร ใ หม ข ึ ้ น มา (Create new layer) โดยคลิ ก ที่ เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 60)

60

59

ภาพที่ 8.4.30 ภาพกรอบสี่เหลี่ยม และการสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 446

30. พิมพขอความ “Free Delivery” กำหนดรูปแบบตัวอักษร ขนาดและสีขาว ใหแกตัวอักษร (ดังขอ 61)

61

ภาพที่ 8.4.31 การพิมพขอความและกำหนดรูปแบบตัวอักษร ที่มา : นุจรี บุรีรัตน (2564) 31. เปดภาพโทรศัพทที่เตรียมไว แลวนำมาวางในหนาชิ้นงานมุมลางซาย (ดังขอ 62)

62

ภาพที่ 8.4.32 การเปดภาพโทรศัพทแลวนำมาวางในหนาชิ้นงาน ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 447

32. สรางเลเยอรใหมขึ้นมา (Create a new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 63) คลิกเลือกเครื่องมือพิมพขอความ (Type Tool) (ดังขอ 64) 64

63

ภาพที่ 8.4.33 การสรางเลเยอรใหม และการใชเครื่องมือพิมพขอความ ที่มา : นุจรี บุรีรัตน (2564) 33. พิมพขอความ “087-000-0000” กำหนดรูปแบบตัวอักษร ขนาดและสีขาว ใหแกตัวอั กษร (ดัง ขอ 65) สรางเลเยอรใ หม ขึ ้นมา (Create new layer) โดยคลิ ก ที่ เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 64)

66

65

ภาพที่ 8.4.34 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 448

34. เปดภาพโลโกที่เตรียมไวแลวนำมาใสในหนาชิ้นงาน (ดังขอ 67)

67

ภาพที่ 8.4.35 เปดภาพโลโกที่เตรียมไวแลวนำมาใสในหนาชิ้นงาน ที่มา : นุจรี บุรีรัตน (2564) 35. สรางเลเยอรใหมขึ้นมา (Create new layer) โดยคลิกที่เครื่องหมายบวก (+) จะปรากฏเลเยอรใหมเพิ่มขึ้นมา (ดังขอ 68)

68

ภาพที่ 8.4.36 การสรางเลเยอรใหม ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 449

36. พิ ม พ ข  อ ความชื ่ อ ร า น “Zap” กำหนดรู ป แบบตั ว อั ก ษร ขนาดและสี ข าว ใหแกตัวอักษร (ดังขอ 69) จากนั้นคลิกเลือกเครื่องมือ Make Envelope Options (ดังขอ 70) แลวเลือก Style Shell Lower และกำหนดคาตางๆ เพื่อปรับเอฟเฟกตใหตัวอักษร มีลักษณะหอยคว่ำ 70

69

ภาพที่ 8.4.37 การพิมพขอความชื่อราน “Zap” ที่มา : นุจรี บุรีรัตน (2564) 37. เมื่อพิมพขอความและกำหนดรูปแบบเสร็จแลว จะไดภาพดังที่ปรากฏ (ดังขอ 71) 71

ภาพที่ 8.4.38 การพิมพขอความและกำหนดรูปแบบ ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 450

38. ทำการบันทึกไฟลในกรณีที่ตองการแกไขภายหลัง ใหบันทึกเปนไฟลนามสกุล .ai ซึ่ง เปนไฟลงานที่ตองเปดแกไขดวยโปรแกรม Adobe Illustraor ในครั้ง นี้บันทึกไฟลชื่อ Poster.ai (ดังขอ 72) จากนั้นคลิกที่ปุม SAVE (ดังขอ 73) 72 73

ภาพที่ 8.4.39 การบันทึกไฟลนามสกุล .ai ที่มา : นุจรี บุรีรัตน (2564) 39. เมื่อทำการบันทึกไฟล จะขึ้นกลองขอความแสดงเวอรชันของโปรแกรม จากนั้น ใหคลิกที่ปุม OK (ดังขอ 74)

74

ภาพที่ 8.4.40 การบันทึกไฟลงานสำหรับแกไขได ที่มา : นุจรี บุรีรัตน (2564) มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 451

8.4.1.3 ขั้นตอนหลังการผลิต (Post-Production) เมื่อออกแบบโปสเตอรสินคา เสร็จเรียบรอยแลว สิ่งที่ตองทำเปนขั้นตอนตอไปคือ การจัดเตรียมไฟลเพื่อนำไปใชงาน การ จัดการฟอนตภาพใหเปนเวกเตอร เพื่อปองกันฟอนตผิดปกติจากที่ทำการออกแบบไว และ การบันทึกไฟลเพื่อสงพิมพ หากเตรียมไฟลไดอยางถูกตอง จะทำใหไดงานพิมพที่ตรงตาม ความตองการ 1. ทำการจั ด การฟอนต เ ป น ภาพเวกเตอร เพื ่ อ ป อ งกันฟอนตเ ปลี ่ย นแปลงเมื่อ นำไปพิมพ เพื่อความรวดเร็วใหกดปุม Ctrl+A เปนการเลือกขอความทั้งหมด แลวกดปุม Shift+Ctrl+O เพื่อจัดการฟอนต ทั ้ง หมดให เปนภาพเวกเตอร (ดัง ขอ 75) และทำการ รวมกลุม โดยกดปุม Ctrl+G

75

ภาพที่ 8.4.41 การจัดการฟอนตเปนภาพเวกเตอร ที่มา : นุจรี บุรีรัตน (2564)

การออกแบบกราฟก 452

2. การส ง ออกไฟล เ พื ่ อ นำไปใช ใ นงานต า ง ๆ (Export) โดยไปที ่ เ มนู File> Export>Export As… (ดังขอ 76)

76

ภาพที่ 8.4.42 การสงออกไฟลงาน (Export) ที่มา : นุจรี บุรีรัตน (2564) 3. เลือกรูปแบบไฟลงานที่ตองการนำไปใช โดยเลือกนามสกุลไฟลที่ตองการในชอง Format เชน เลือกไฟลนามสกุล . jpg ตั้งชื่อไฟล Poster.jpg (ดังขอ 77) จากนั้นคลิกที่ปุม Export (ดังขอ 78) 77 78

ภาพที่ 8.4.43 การเลือกรูปแบบไฟลงานที่ตองการนำไปใชเมื่อตองการสงออก ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

การฝกปฏิบัติการใชโปรแกรม Adobe Illustrator 453

4. สงออกไฟลงานออกแบบโปสเตอร ดวยประเภทโหมดสี (Color Model) CMYK เนื่องจากตองนำเสนอผานการพิมพ (ดังขอ 79) จากนั้นคลิกที่ปุม OK (ดังขอ 79)

79

80

ภาพที่ 8.4.44 การกำหนดรายละเอียดใหแกภาพที่ตองการสงออก ที่มา : นุจรี บุรีรัตน (2564) 5. ผลงานการออกแบบโปสเตอร ที่จัดทำเสร็จเรียบรอยแลว (ดังขอ 81) เมื่อตองการ จัดพิมพ ควรสงไฟลใหโรงพิมพสองไฟล ไดแกไฟล Poster.jpg สำหรับใหโรงพิมพเพื่อเปน ตัวอยางในการเปรียบเทียบกับไฟลจริงวาเหมือนกับงานจริงหรือไม และสงไฟลภาพที่สามารถ แกไขได คือไฟล Poster.ai แนบไปดวยเพื่อนำไปใชในงานพิมพ และในกรณีหากมีการแกไข เพื่อลดขอผิดพลาดไมควรสงไฟลงานจริงเพียงอยางเดียว แตในกรณีที่ตองการนำไปใชในการ นำเสนอผานทางหนาจอคอมพิวเตอร ควรปรับขนาดใหพอดีกับสื่อที่ตองการนำไปใช เพื่อลด ขนาดไฟลงานใหเล็กลง และจะชวยเพิ่มความเร็วในการแสดงผล

การออกแบบกราฟก 454

ตัวอยางการนำโปสเตอรไปจัดพิมพดวยกระดาษ ขนาด A3 และนำเสนอโดยการแขวน ปายโฆษณา ณ จุดขาย เชน รานอาหาร หรือหางสรรพสินคา เปนตน 81

ภาพที่ 8.4.45 ผลงานการออกแบบโปสเตอร และตัวอยางการนำไปใชงาน ที่มา : นุจรี บุรีรัตน (2564)

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

บรรณานุกรม เกรียงศักดิ์ เจริญวงศศักดิ์. (2545). การคิดสรางสรรค. กรุงเทพฯ: ซัคเซสมีเดีย. จรุงยศ อรุณยะนาค. (2560). หลักการออกแบบนิเทศศาสตรดวยคอมพิวเตอร. กรุงเทพฯ: โรงพิมพแหงจุฬาลงกรณมหาวิทยาลัย. นวลนอย บุญวงษ. (2539). หลักการออกแบบ. กรุงเทพฯ: สำนักพิมพจุฬาลงกรณมหาวิทยาลัย. ปาพจน หนุนภักดี. (2555). Graphic Design Principles 2nd ed. นนทบุรี: ไอดีซี. ปยะบุตร สุทธิดารา. (2560). Graphic Design The New Basic. นนทบุรี: ไอดีซี. รุจิรัตน บัวลา. (2546). การพัฒนาโปรแกรมฝกอบรมครู เรื่อง การประยุกตใชผลงานวิจัยทาง สมองในการจัดการเรียนการสอน. กรุงเทพฯ: สำนักพิมพแหงจุฬาลงกรณมหาวิทยาลัย. วิกิพีเดีย. (2564, 12 สิงหาคม). การออกแบบ. สืบคนจาก https://th.wikipedia.org/wiki/การออกแบบ ศุภกรณ ดิษฐพันธ. (2558). ประวัติศาสตรการออกแบบกราฟก. กรุงเทพฯ: โรงพิมพแหงจุฬาลงกรณมหาวิทยาลัย. ศุภรา อรุณศรีมรกต. (2561). วารสาร Veridian-E-Journal ฉบับภาษาไทย สาขามนุษยศาสตร สังคมศาสตรและศิลปะ, มกราคม-เมษายน 2561. เสาวนีย พิสิฐานุสรณ. (2553, 15 ธันวาคม). สหรัฐฯ เผชิญวิกฤติความคิดสรางสรรค. สืบคนจาก http://info.gotomanager.com อโณทัย เชี่ยวชาญ. (2554, 25 ธันวาคม). แผนพับคือ. สืบคนจาก http://anothai573.blogspot.com/2011/06/blogpost_20.html อนัน วาโชะ. (2558). Graphic Design for Printing & Publishing. นนทบุรี: ไอดีซีฯ. อนัน วาโชะ. (2561). Graphic Design for Printing & Publishing. นนทบุร:ี ไอดีซีฯ. อารยะ ศรีกัลยาณบุตร. (2541). การออกแบบตราสัญลักษณ. กรุงเทพฯ: โรงพิมพแหงจุฬาลงกรณมหาวิทยาลัย.

Cezzar, J. (2020). Teaching the Designer of Now: A New Basis for Graphic and Communication Design Education. She Ji: The Journal of Design, Economics, and Innovation, 6(2), 213–227.

การออกแบบกราฟก 456

Edustyles. (2564, 12 สิงหาคม). การออกแบบกราฟก. สืบคนจาก https://lms.edustyles.com/courses/computer-graphics-desing Elkhonon, G., Kenneth, P. & Mark L. (1994). Lateralization of frontal lobe functions and cognitive novelty. Journal Of Neuropsychiatry,6(4), 371-378.

Google Fonts. (2021, August 12). Anton. Retrieved from http://fonts.google.com/specimen/Anton?

Grigg, J. (2020). Materials and tools as catalysts of invention in graphic design ideation. Design Studies, 70.

Guo, J. Z. (. (2001). The Influence of Post Modernism Graphic Design On Chinese Graphic Design (Order No. H007524). Available from ProQuest Dissertations & Theses Global. (1027133187). Retrieved from https://www.proquest.com/dissertations-theses/influence-postmodernism-graphic-design-on/docview/1027133187/se-2?accountid=44806 Kotler, P., & Armstrong, G. (2014). Principles of Marketing : Global Edition 15th ed. Harlow, England : Pearson Education Limited.

Laing, S., Apperley, M., & Masoodian, M. (2017). Investigating the effects of client imagery on the ideation process of graphic design.

Design Studies, 53, 78–98.

Li, Z. (2019). Application Research of Digital Image Technology in Graphic Design.

Journal of Visual Communication and Image Representation.

Martin, D. (2012). The cooperative use of material resources and contextual features in graphic design work. Design Studies, 33(6), 589–610.

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

บรรณานุกรม 457

Nikolova, O. N. (2005). Graphic dissertation, academic design (graphic design, modern poetry, and academic writing) (Order No. 3173993). Available from ProQuest Dissertations & Theses Global. (3 0 5 0 0 2 0 8 4 ) . Retrieved from https://www.proquest.com/dissertations-theses/graphic-dissertationacademic-design-modern/docview/305002084/se-2?accountid=44806 NRRU. (2021, 22 สิงหาคม). คูมือการใชงานโปรแกรม Adobe illustrator cc. สืบคนจาก https://www.nrru.ac.th/computer/admin/pages/Upload /server/php/files/Illustrator2020.pdf Photoshop935. (2564, 20 สิงหาคม). Photoshop. สืบคนจาก https://photoshop935.wordpress.com/เครื่องมือ/ Pngtree. (2560, 21 สิงหาคม). สีผงหมึก. สืบคนจาก https://th.pngtree.com Radhi, A., Lacobellis, V., & Behdinan, K. (2021). Manipulation of topologically optimized structures using graphic statics. Materials & Design, 198.

Wang, T. (2020). Graphic Art Design Based on Computer Graphics Software.

Journal of Physics: Conference Series, 1533.

มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร

458

ประวัติผู้เขียน ประวัติส่วนตัว ชื่อ นางนุจรี นามสกุล บุรีรัตน์ เกิดวันที่ 21 เดือน ธันวาคม พ.ศ. 2520 อีเมล nuchjaree.b@rmutp.ac.th หน่วยงานที่สังกัด สาขาวิชาเทคโนโลยีมัลติมีเดีย คณะเทคโนโลยีสื่อสารมวลชน มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร ประวัติการศึกษา ปริญญาเอก ปร.ด. (เทคโนโลยีเทคนิคศึกษา) มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าพระนครเหนือ 2561 ปริญญาโท วท.ม. (เทคโนโลยีสารสนเทศ) มหาวิทยาลัยสยาม 2549 ปริญญาตรี วท.บ. (วิทยาการคอมพิวเตอร์) สถาบันราชภัฏ พระนครศรีอยุธยา (ปัจจุบันเปลี่ยนเป็นมหาวิทยาลัยราชภัฏ พระนครศรีอยุธยา) 2543 ประวัติการทำงาน - ปี 2545-2550 อาจารย์ประจำสาขาวิชาระบบสารสนเทศ คณะบริหารธุรกิจ มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร (พณิชยการพระนคร) - ปี 2551 อาจารย์ประจำสาขาวิชาเทคโนโลยีมัลติมีเดีย คณะเทคโนโลยีสื่อสารมวลชน มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร - ปี 2551 - 2555 หัวหน้างานฝ่ายประชาสัมพันธ์ - ปี 2555 - 2561 หัวหน้าสาขาวิชาเทคโนโลยีมัลติมีเดีย - ปี 2561 - ปัจจุบัน รองคณบดีฝ่ายกิจการนักศึกษา คณะเทคโนโลยีสื่อสารมวลชน มหาวิทยาลัยเทคโนโลยีราชมงคลพระนคร