ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
Interactive Design Modified from Krich Sintanakul’s
Department of Computer Education KMUTNB
2
บรรทัดฐานในการออกแบบ
ตอบสนองประโยชน์ใช้สอย ความสวยงามพึงพอใจ (Aesthetic) การสื่อความหมาย (Memory Unit) 724401
3
Graphic Design Workflow
วิเคราะห์โจทย์ (Program Analysis) What Where Who How สร้างแนวความคิดในการออกแบบ (Conceptual Design) ต้องคำนึงถึง Design Criteria ศึกษางานหรือกรณีตัวอย่างที่มีอยู่ (Case Study) ออกแบบร่าง (Perliminary Design) ออกแบบจริง (Design) 724401
4
การพิจารณาภาพของมนุษย์
การมองภาพของมนุษย์มีเรื่องหลักคือ การมองเพื่อหาความหมายของภาพ เพื่อหาสารในสื่อภาพ (Meaning) การมองลึกเข้าไปเพื่อพิจารณารายละเอียดขององค์ประกอบของภาพ (Elements) 724401
5
Basic Elements of Picture
จุด (Dot) เส้น (Line) ระนาบ (Plane) วงกลม (Circle) สี่เหลี่ยม (Square) สามเหลี่ยม (Triangle) หกเหลี่ยม (Hexagon) รูปร่างธรรมชาติ (Organic) 724401
6
Dot เป็นองค์ประกอบที่มีขนาดเล็ก มีความกว้างและยาวใกล้เคียงกัน
คุณสมบัติเด่นในการจัดวางทำให้เกิดการเรียกร้องความสนใจ บอกและกำหนดตำแหน่งของภาพ การวางจุด 2 จุด ทำให้ได้พื้นที่ระหว่างจุดที่ให้ความรู้สึกดึงดูดระหว่างกัน ขนาดของจุดต้องพิจารณาร่วมกับองค์ประกอบแวดล้อม 724401
7
Dot 724401
8
Line เป็นองค์ประกอบที่มีขนาดยาว เกิดจากการนำจุดมาเคลื่อนที่ หรือนำมาวางเรียงต่อกัน คุณสมบัติเด่นในการนำสายตา เป็นแนวแบ่งภาพ กำหนดทิศทาง และความต่อเนื่อง 724401
9
Line ความรู้สึก อารมณ์ของเส้นต่างๆ ในภาพ
เส้นตรง ให้ความรู้สึกมั่นคงเป็นระเบียบ เส้นนอน ให้ความสงบ นิ่ง เรียบร้อย เส้นเฉียง ให้ความรู้สึกถึงการเคลื่อนใหว ความไม่หยุดนิ่ง พลังขับเคลื่อน เส้นโค้ง ให้ความรู้สึกนิ่มนวล พลิ้วไหว เส้นหยัก ให้ความรู้สึกถึงความไม่เป็นระเบียบ การไม่อยู่ในกรอบ ความอิสระ หรือความสับสนวุ่นวาย ขึ้นอยู่กับความหยักมากหรือน้อย เส้นเล็กและบาง ให้ความรู้สึก เบาและเฉียบคม ในขณะที่เส้นหนาให้ความหนักแน่นในการนำสายตา 724401
10
Line 724401
11
Plane ระนาบเป็นองค์ประกอบที่เกิดจากเส้นที่ขยายตัว หรือกลุ่มของจุดที่เกิดความกว้างและความยาว เป็นองค์ประกอบที่เป็น 2 มิติ แสดงขอบเขตของพื้นที่ในภาพ ระนาบมีหลายรูปร่าง Shape แตกต่างกัน ซึ่งให้ความรู้สึกที่แตกต่างกัน 724401
12
Circle ให้ความรู้สึกเป็นศุนย์กลาง เป็นที่รวมความสนใจ หรือการปกป้องคุ้มครอง เมื่อมองไปยังเส้นขอบแล้วมีความคาดหวังว่าจะบรรจบที่เดิม มีความคงเส้นคงวาในการดำเนินเส้นขอบ 724401
13
Square ให้ความรู้สึกสงบ มั่นคง เป็นระเบียบ
เมื่อวางในแนวตั้งฉากให้ความรู้สึกเคลื่อนไหว เมื่อวางแนวทแยงสร้างจุดสนใจได้ดี จัดวางง่าย เป็นกลุ่มก้อน 724401
14
Triangle ให้ความรู้สึกหยุดนิ่ง มั่นคง
ส่วนปลายของมุม ให้ความรู้สึกทิศทาง ความเฉียบคม มีแรงผลักดัน 724401
15
Hexagon ให้ความรู้สึกถึงการเชื่อมโยง
การเป็นหน่วย Modular อย่างไม่มีขอบเขตสิ้นสุด ความเข้ากันได้อย่างลงตัว สร้างทิศทางการมองให้แตกต่างจากปกติที่มีระดับและดิ่งเท่านั้น 724401
16
Organic ให้ความรู้สึกถึงความอิสระ การเลื่อนไหล การไม่มีกฎเกณฑ์ที่แน่นอนตายตัว 724401
17
Colour เป็นองค์ประกอบที่สำคัญในการออกแบบ
มีอิทธิพลในเรื่องอารมณ์ การสื่อความหมายที่เด่นชัด การกระตุ้นการรับรู้ของมนุษย์ ให้เกิดความสวยงาม การสื่อความหมายทางอ้อม 724401
18
คุณสมบัติ 3 ประการ Colour
เนื้อสี สี (Hue) ความแตกต่างของสีบริสุทธิ์แต่ละสี โดยแบ่งเป็น สีของแสง Coloured Light (Additive Color Mixing) RGB สีของสาร Coloured Pigment (Subtractive Color Mixing) CMYK น้ำหนักสี (Value Brightness) ความสดของสี (Intensity Saturation) 724401
19
Colour Wheel สีปฐมภูมิ Primary Colours สีทุติยภูมิ Secondary Colours
คือสีที่ไม่สามารถสร้างขึ้นด้วยการผสมสีอื่นใด Red, yellow, blue สีทุติยภูมิ Secondary Colours คือสีที่เกิดจากการผสมสีปฐมภูมิเข้าด้วยกัน Green, orangle, purple สีตติยภูมิ Tertiary Colours คือสีที่เกิดจากการผสมสีปฐมภูมิเข้ากับสีทุติยภูมิ Yellow-orange, red-orange, red-purple, blue-purple, blue-green & yellow-green 724401
20
สีโทนร้อน สีโทนเย็น สีถูกแบ่งออกเป็นสองกลุ่มตามอุณหภูมิสี
สีโทนร้อน ให้ความรู้สึกมีพลัง อบอุ่น สนุกสนาน ดึงดูด มีความน่าสนใจดี สีโทนเย็น ให้ความรู้สึกเรียบ สงบ เยือกเย็น ลึกลับ มีระดับ Warm colors are often said to be hues from red through yellow, browns and tans included; Cool colors are often said to be the hues from blue green through blue violet, most grays included. 724401
21
น้ำหนักของสี (Value) ความสว่างของสี Brightness
หรือการเพิ่มขาว เติมดำ ให้กับสี เพิ่มมิติ มีความลึก มีโทน สร้างความสมจริง Low Value High Value Low Brightness High Brightness 724401
22
ความสดของสี (Intensity)
คือการเพิ่มลดปริมาณสีให้กับภาพ หากปรับลดมาก ๆ จะเป็นภาพขาวดำ หากเพิ่มมาก ๆ เป็นภาพสีฉูดฉาด 724401
23
การเลือกเนื้อสีจากความหมาย
สีแดง อ้างอิงมาจากดวงอาทิตย์และไฟ ซึ่งให้ความสว่าง ความร้อน พลัง พลังงาน ความแรง ชาวจีน ถึงว่าสีแดงเป็นสีมงคล ความเป็นผู้นำ 724401
24
การเลือกเนื้อสีจากความหมาย
สีเหลือง ให้อารมณ์ของความสดใส ปลอดโปร่ง ดึงดูดสายตา มองเห็นได้แต่ไกล 724401
25
การเลือกเนื้อสีจากความหมาย
สีน้ำเงิน ให้ความหมายของความสงบเรียบ ความสุขุม ความมีราคา ให้อารมณ์หรูหรามีระดับ มีความสุภาพ หนักแน่น สีของผู้ชาย 724401
26
การเลือกเนื้อสีจากความหมาย
สีส้ม ให้ความรู้สึก ดึงดูด ทันสมัย สดใส กระฉับกระเฉง มีพลัง 724401
27
การเลือกเนื้อสีจากความหมาย
สีเขียว มาจากสีของต้นไม้ ให้ความหมายเป็นสีที่มาจากธรรมชาติ ให้ความรู้สึก เย็นสบาย ชุ่มชื่น สบายตา 724401
28
การเลือกเนื้อสีจากความหมาย
สีม่วง ให้ความรู้สึก อารมณ์หนักแน่น มีเสน่ห์ ความลับ สิ่งที่ปกปิด 724401
29
การเลือกเนื้อสีจากความหมาย
สีชมพู ให้ความรู้สึก ความอ่อนหวาน นุ่มนวล ความรัก วัยรุ่น ผู้หญิง 724401
30
การเลือกเนื้อสีจากความหมาย
สีน้ำตาล ให้ความรู้สึก ความสงบ ความเรียบ ความเป็นผู้ใหญ่ ความเก่าแก่ โบราณ บางครั้งก็สื่อถึงไม้ แผ่นไม้ อิฐ 724401
31
การเลือกเนื้อสีจากความหมาย
สีฟ้า ให้ความรู้สึก โปร่งโล่งสบายตา สืบเนื่องมาจากท้องฟ้าที่เราเห็น ความนุ่มนวล ความสุขสบาย 724401
32
การเลือกเนื้อสีจากความหมาย
สีเงิน ได้จากวัสดุมันวาว เช่น อลูมิเนียม เป็นวัสดุที่มียุคหลัง ไม่ได้มีตั้งแต่โบราณ ราคาแพง ให้ความรู้สึกสิ่งใหม่ ๆ ทันสมัย มีคุณค่า มีราคา ดูแข็งแกร่ง 724401
33
การเลือกเนื้อสีจากความหมาย
สีทอง ได้จากแร่ทองคำ จะต้องมีประกาย ทองเป็นตัวแทนของความมีคุณค่า ให้ความรู้สึกความมีราคา หรูหรา แพง 724401
34
การเลือกเนื้อสีจากความหมาย
สีขาว สื่อถึงความบริสุทธิ์ ให้ความรู้สึกความสะอาด เรียบง่าย ความโล่ง ความไม่มี 724401
35
การเลือกเนื้อสีจากความหมาย
สีเทา ให้ความเศร้า หม่นหมอง ไร้ชีวิตชีวา บางครั้งสื่อถึงความเป็นกลาง 724401
36
การเลือกเนื้อสีจากความหมาย
สีดำ ให้ความมืด ความไม่เห็น ซ่อนความไม่รู้ ความน่ากลัว การออกแบบสีดำเป็นพื้น หรือสีเข้ม เพื่อใช้ขับสิ่งที่อยู่ภายในให้เด่นชัดขึ้น 724401
37
การเลือกน้ำหนักสี จากสีแท้ให้ความสดใสมากที่สุด
เมื่อผสมขาว ทำให้ได้สีอ่อน เมื่อผสมสีดำทำให้ลดความสดใส 724401
38
การเลือกจากความสดของสี
สีที่มีความสดสูง ให้ความรู้สึกรุนแรง ตื่นตัว สะดุดตา สีที่มีความสดปานกลาง ให้ความรู้สึกผ่อนคลาย สบายตา สีที่มีความสดน้อย ให้ความรู้สึกหม่น ความสงบ ไม่โดดเด่น เศร้า 724401
39
การวางโครงสี การใช้วงจรสี โดยการเลือก 3 คู่สี มุมละ 120 องศา เป็นสามเหลี่ยมด้านเท่า สามารถเลือกแบบ สามเหลี่ยมหน้าจั่วได้ด้วย ควรให้มีสีใดสีหนึ่งเป็นพระเอกเสมอ 724401
40
การวางโครงสี การใช้สีเดียว โดยการเลือก ใช้เพียงสีเดียว (Monochrome) ที่เหลือโดยการเปลี่ยน Value และ Brightness 724401
41
การวางโครงสี การใช้สีข้างเคียง (Analogous) โดยการหยิบสีที่อยู่ข้างเคียงกันในวงจรสี สี 724401
42
การวางโครงสี การใช้สีคู่ตรงข้าม Complementary Colour
ช่วยกันเกิดการกระตุ้นสะดุดตาได้ดี กระตุ้นการรับรู้ ขัดแย้งได้ดี ควรมีการเลือกใช้ปริมาณสี 70:30 เพื่อให้มีสีใดสีหนึ่งเด่นสะดุดตา 724401
43
การวางโครงสี การใช้สี 4 สีในวงจรสี ในรูป สี่เหลี่ยมด้านเท่า หรือจตุรัส
และแบบ สี่เหลี่ยมผื่นผ้า 724401
44
Color Voodoo Publications
Color Context Red appears more brilliant against a black background and somewhat duller against the white background. In contrast with orange, the red appears lifeless; in contrast with blue-green, it exhibits brilliance. Notice that the red square appears larger on black than on other background colors. 724401 Color Voodoo Publications
45
Color Voodoo Publications
Color Context Small purple rectangle on the left appears to have a red-purple tinge when compared to the small purple rectangle on the right. Both are the same color. So, this demonstrates how three colors can be perceived as four colors. 724401 Color Voodoo Publications
46
การจัดองค์ประกอบภาพ มีหลักในการจัดองค์ประกอบใหญ่ 2 ประการคือ
การสร้างเอกภาพ (Unity) การสร้างจุดเด่น เน้นจุดสำคัญ (Emphasize) 724401
47
เอกภาพ 1. การสร้างความใกล้ชิดให้กับองค์ประกอบ (Proximity) โดยการใช้ระยะห่างระหว่าง วัตถุ ให้มีความรู้สึกการเป็นกลุ่มก้อน พวกพ้องเดียวกัน 724401
48
เอกภาพ 2. การสร้างความซ้ำกันขององค์ประกอบภาพ (Repetition) 724401
49
เอกภาพ 3. การสร้างความต่อเนื่องขององค์ประกอบ (Continuation)
ความต่อเนื่องที่มาจาก เส้น ทิศทางขององค์ประกอบที่อยู่ในภาพ ซึ่งนำสายตาไปในทางที่ผู้ออกแบบนำไป ให้เป็นเอกภาพ 724401
50
เสริมจุดเด่น เน้นจุดสำคัญ
หลักในการสร้างสุดสนใจมี 3 วิธีคือ การวางตำแหน่งจุดสนใจในงาน (Focus Point) การสร้างความแตกต่างในงาน (Contrast) การวางแยกองค์ประกอบให้โดดเด่น (Isolation) 724401
51
Focus Point ต้องทราบว่า ในหน้าจอนั้น ๆ เน้นอะไร ตามลำดับ
มองงานเป็นตาราง 9 ช่อง 0-4 แสดงลำดับความสำคัญของพฤติกรรมของคนส่วนใหญ่ 4 1 2 3 724401
52
Focus Point ตำแหน่งหมายเลข 0
เป็นตำแหน่งที่มีควรวางองค์ประกอบที่ไม่ต้องการเน้น เพราะเป็นตำแหน่งที่สายตาคนส่วนใหญ่ไม่ให้ความสำคัญ 4 1 2 3 724401
53
Focus Point ตำแหน่งหมายเลข 1
มนุษย์ส่วนใหญ่อ่านหนังสือจากมุมบนซ้ายลงขวาล่าง จึงเป็นจุดอันดับแรกในภาพ 4 1 2 3 724401
54
Focus Point ตำแหน่งหมายเลข 2
เป็นตำแหน่งที่มีพลังในการดึงดูดสายตา มีความเฉียบ เนื่องจากเรียกร้องความสนใจได้ดี 4 1 2 3 724401
55
Focus Point ตำแหน่งหมายเลข 3
เป็นตำแหน่งที่สำคัญที่สืบเนื่องมาจากตำแหน่งที่ 1 เพราะเป็นแหน่งสุดท้ายที่คนส่วนใหญ่กวาดสายตามอง 4 1 2 3 724401
56
Focus Point ตำแหน่งหมายเลข 4
เป็นตำแหน่งที่สำคัญที่คนส่วนใหญ่มองก่อนกำหนดอื่น ๆ และเป็นจุดรวมสายตาจากจุดอื่น ๆ 4 1 2 3 724401
57
Contrast การสร้างความน่าสนใจให้กับภาพด้วยการเพิ่มความแตกต่างสามารถใช้ได้หลายวิธี การสร้างขนาดที่แตกต่างขององค์ประกอบ รุปร่างที่แตกต่างกันขององค์ประกอบ รุปลักษณ์หรือลักษณ์ที่แตกต่างกัน 724401
58
Isolation การวางแยกองค์ประกอบให้โดดเด่น โดยใช้หลัก
ขนาดและสัดส่วนในการจัดองค์ประกอบ ที่ว่างในเพื่อที่แสดงการแบ่งแยก ความสมดุลในงาน สมดุล 2 ข้างเหมือนกัน สมดุล 2 ข้างไม่เหมือนกัน จังหวะของภาพ เทคนิคในการออกแบบ 724401
งานนำเสนอที่คล้ายกัน
