การออกแบบคอมพิวเตอร์กราฟิก

1. GRAPHICS BASIC
อาจารย์นงคราญ คาวิชัย สาขาวิชาเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ มหาวิทยาลัยแม่โจ้
Email: it.nongkran@gmail.com
วิชา ทส105การออกแบบคอมพิวเตอร์กราฟิก
ComputerGraphicsDesign

2. กราฟิก

3. ความหมายของกราฟิก
•กราฟิก (Graphic)
คาว่า กราฟิก มาจากคาในภาษากรีก2คา คือ
Graphikosแปลว่า “การวาดเขียนและเขียนภาพ”
Grapheinแปลว่า “การเขียน”
กราฟิกรวมถึง งานศิลปะ การวาด การพิมพ์ เป็นรูปแบบการสื่อสาร รูปแบบหนึ่ง ที่ใช้ศิลปะมาเกี่ยวข้อง เพื่อสร้างสัญลักษณ์ ที่เข้าใจง่ายและตรงกัน ระหว่างผู้สื่อสาร กับผู้รับสาร ให้เข้าใจความหมายได้ทันที ตรงตามที่ผู้สื่อสาร ต้องการ

4. ประวัติความเป็นมาของกราฟิก
กราฟิก (Graphic) เริ่มมีมาตั้งแต่สมัยก่อนประวัติศาสตร์
เป็นรูปภาพ ภาพเขียน ตามผนังถ้้า
ใช้เครื่องมือที่เป็น ดินที่มีสี หรือกระดูกคมๆ
ในยุคประวัติศาสตร์ อียิปต์เป็นต้นแบบของอารยธรรมตะวันตก
มีการเล่าเรื่องราวโดยใช้ Graphic Art เขียนตามก้าแพงปิระมิด
กรีกรับอารยธรรมอียิปต์มาใช้ปรับปรุงให้เข้ากับ เรขาคณิต
ในสมัยกรีกจะเน้นเป็นรูปวาด และน้าไปใช้ในการเขียนต้ารา
ศิลปะทางด้านนี้ได้รับความนิยมมากในยุคฟื้นฟูศิลปะวิทยาการ
ปัจจุบันกราฟิกได้รับการพัฒนาและเจริญมากขึ้นเรื่อยๆ
มีการขยายขอบเขตงานให้กว้างมากขึ้น เช่น งานโฆษณาประชาสัมพันธ์ งานการศึกษา การแสดง ธุรกิจ
ฯลฯ

5. ความหมายคอมพิวเตอร์กราฟิก
•คอมพิวเตอร์กราฟิก
คอมพิวเตอร์กราฟิก หมายถึง การใช้คอมพิวเตอร์เพื่อดาเนินการเกี่ยวกับ กราฟิก ตั้งแต่ขั้นตอนการเตรียมการออกแบบ นาเสนอ และนากราฟิกไปใช้งาน
เป็นสื่อกลางในการสื่อความหมาย
เกิดการเรียนรู้ การศึกษา
เกิดความน่าสนใจ ประทับใจ และน่าเชื่อถือ
กระตุ้นความคิด
ก่อให้เกิดความคิดสร้างสรรค์
ส่งเสริมความก้าวหน้าทางความคิด

6. SOME OF HISTORICAL PICTURE (1/2)
First truly interactive graphics system, Sketchpad, pioneered at MIT by Ivan Sutherland for his 1963 Ph.D. thesis.
Sketchpad, A Man-Machine Graphical Communication System:
Sketchpad in 1963. Note the use of a CRT monitor, light pen and function- key panel.

7. SOME OF HISTORICAL PICTURE (2/2)
http://ei.cs.vt.edu/~history/VonNeumann.html
http://www.man.ac.uk/Science_Engineering/CHSTM/nahc.htm
Mark I
John VonNeuman

8. งานกราฟิก
งานกราฟิก หมายถึง งานการวางแผนทางศิลปะและการทาหัว เรื่อง โดยรู้ขนาดสัดส่วน และหลักในการออกแบบ รวมถึงการใช้สี ประกอบเพื่อเน้นและดึงดูดความสนใจให้มากขึ้น และเป็นการให้ รายละเอียดที่เพิ่มขึ้นด้วย

9. ขอบข่ายงานกราฟิก
งานกราฟิกไม่ใช่เพียงแค่งานพิมพ์เท่านั้น เพราะโดยทั่วๆ ไปงานต่างๆ ก็ ได้น้างานกราฟิกไปใช้ด้วย โดยยังเน้นจุดเด่นคือ มุ่งให้ผู้ดูรับรู้ได้โดยทาง สายตาเช่น
•งานประชาสัมพันธ์ (ภาพ + เนื้อหา)
•งานโทรทัศน์ (Title , Slide , ภาพประกอบ)
•งานจัดฉาก
•งานสิ่งพิมพ์ต่าง (หนังสือพิมพ์ วารสาร นิตยสาร)
•งานออกแบบ (แบบบ้าน แบบอาคาร)
•ฯลฯ

10. คุณค่าของงานกราฟิก
1. เป็นสื่อกลางให้เกิดความเข้าใจตรงกัน
2. สามารถทาหน้าที่เป็นสื่อ เพื่อให้เกิดการเรียนรู้
3. ช่วยให้งานมีความน่าสนใจ
4. ช่วยให้เกิดการกระตุ้นทางความคิด และการตัดสินใจ
5. ก่อให้เกิดความคิดสร้างสรรค์
6. ทาให้ผู้พบเห็นเกิดการเปลี่ยนแปลงพฤติกรรม ทั้งการกระทาและความคิด

11. การออกแบบกราฟิก (GRAPHIC DESIGN)
งานกราฟิกเป็นงานที่มีอิทธิพลต่อชีวิตประจาวันของคนเราเป็นอย่าง มาก ส่งที่เรามองเห็นด้วยตาจะโน้มน้าวจิตใจได้ดีกว่าการรับรู้ประเภท อื่นๆ ดังนั้นงานกราฟิกที่ดีต้องขึ้นอยู่กับการออกแบบที่ดีด้วย ตั้งแต่การ ออกแบบเบื้องต้น การลงสี การจัดวางองค์ประกอบต่างๆ
Graphic Designer จะใช้วิธีการทางศิลปะและหลักการออกแบบ ร่วมกันสร้างสรรค์รูปแบบต่างๆ ออกมาเพื่อ ให้เกิดศักยภาพสูงสุดใน การที่จะเป็นตัวกลางในการสื่อความหมายระหว่างผู้ส่งสารและผู้รับสาร

12. การออกแบบกราฟิก (GRAPHIC DESIGN)
วิธีการออกแบบและวิธีแก้ปัญหาการออกแบบโดยนาเอารูปภาพ ประกอบ (Illustration)ภาพถ่าย (Photography) สัญลักษณ์ (Symbol) รูปแบบ และขนาดของตัวอักษร (Typography) มา จัดวางเพื่อให้เกิดการนาเสนอข้อมูลอย่างชัดเจน เกิดผลดีต่อ กระบวนการสื่อความหมายและแสดงคุณค่าทางการออกแบบ อย่างตรงไปตรงมา

13. หลักการออกแบบ
ความคิดสร้างสรรค์ (Creativity)
คือ การผนวกส่วนของความคิดลึกๆ ภายในใจประยุกต์ใช้แก้ไขปัญหา แก้ไขโจทย์และเงื่อนไขต่างๆ ที่มีอยู่ โดยมีรูปแบบค่อนข้างใหม่ ไม่ซ้้ากับสิ่งที่มีอยู่ แล้ว และมีคุณค่าในการตอบโจทย์เป้าหมาย หรือสิ่งที่เราต้องการได้เป็นอย่างดี
โดยปกติ เมื่อพูดถึงความคิดสร้างสรรค์ หลายๆ คนอาจจะประสบ ปัญหา คือ คิดอะไร ท้าอะไร ไม่ต่างกับสิ่งที่เห็นอยู่ สิ่งที่มีอยู่
ทางออกของความคิดสร้างสรรค์ ก็คือ การพยายามคิดออกมานอกกรอบ ความคิดที่มีอยู่(Think out of box) แต่ไม่ใช่คิดเลยออกทะลุแล้วไม่สามารถ กลับมาตอบโจทย์ของเราได้

14. ค้นหาจุดยืน
โดยปกติแต่ละคนจะมีจุดยืนในเรื่องของกราฟิกที่แตกต่างกัน
ไม่ต้องกลัวว่าการออกแบบนั้นจะต้องมีความรู้ในเรื่องของศิลปะ ทุกๆ คนมี ศิลปะอยู่ในตัวอยู่แล้วทุกๆ คน ขึ้นอยู่กับว่าจะเป็นระดับไหนเท่านั้นเอง

15. ค้นหาจุดยืน
1. คนในระดับทั่วไป
คนแต่ละคนมีความมีศิลปะอยู่ภายในอยู่แล้ว ใครๆ ก็สามารถ ตัดสินงาน หรือวิจารณ์งานได้ คนทุกคนอาจมองไม่เหมือนกัน แต่ก็มี แนวโน้มที่จะมองเห็นไปในทางเดียวกันมากกว่า
2. คนที่มองงานเป็น วิจารณ์ได้
เป็นคนที่ให้ความสนใจงานกราฟิกมากขึ้น มีความเข้าใจในภาพ ใน องค์ประกอบต่างๆ ที่อยู่ในภาพ สามารถคิด วิเคราะห์ และวิจารณ์งานได้

16. ค้นหาจุดยืน
3. คนที่สามารถออกแบบงานกราฟิกได้
คือคนที่สามารถคิดสังเคราะห์โจทย์ แนวความคิด เข้าใจใน องค์ประกอบพื้นฐาน และองค์ประกอบสี และควบคุมองค์ประกอบใน ภาพได้ สามารถจัดองค์ประกอบภายในภาพได้อย่างลงตัว
4. คนที่ออกแบบงานกราฟิกได้ดี
คือคนระดับที่ 3ที่ได้รับการฝึกฝน เรียนรู้ และหาความรู้ เพิ่มเติมอย่างสม่้าเสมอ เพราะว่างานกราฟิกมีการเปลี่ยนตามยุคตาม สมัยเสมอ

17. ค้นหาจุดยืน
เราจะเป็นจุดไหน???
ลองพิจารณาให้ดีๆ ถ้าต้องการไปสู่ระดับบนสุด ต้องมีความ พยายามและฝึกฝนดีๆ โดยทั่วไปงานทางด้านออกแบบกราฟิก ประกอบด้วย 2ศาสตร์คือ
ศิลปะ + การออกแบบ
ศิลปะ คือ ศาสตร์แห่งการแสดงออกจากจินตนาการและอารมณ์ เพื่อ ความสุขทางใจ
การออกแบบคือ ศาสตร์แห่งความคิด การแก้ไขปัญหาที่มีอยู่ เพื่อสนองต่อ จุดมุ่งหมาย และนากลับมาใช้งานได้อย่างพึงพอใจ

18. หลักการออกแบบ
1. การตอบสนองต่อประโยชน์ใช้สอย (Benefit)
2. ความสวยงามพึงพอใจ (Aesthetic) หรือ สุนทรียะ
3. การสื่อความหมาย (Meaning)
“หนึ่งต้องเวิร์ก
สองต้องสวย
สามต้องสื่อ”

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

20. หลักการออกแบบ
2. ความสวยงามพึงพอใจ (Aesthetic)
ในงานที่มีประโยชน์ใช้สอยดีพอๆ กัน ความงาม จะเป็นเกณฑ์ ตัดสินคุณค่าของงานโดยเฉพาะงานออกแบบกราฟิก ซึ่งถือเป็นงาน ออกแบบที่มีประโยชน์ใช้สอยน้อยกว่างานออกแบบด้านอื่น อย่างงาน ออกแบบผลิตภัณฑ์ งานออกแบบสถาปัตยกรรมต่างๆ ความสวยงามจึง เป็นเรื่องสาคัญและมีอิทธิพลในการออกแบบกราฟิกอย่างมาก

21. หลักการออกแบบ
3. การสื่อความหมาย (Meaning)
งานศิลปะนั้นจะมีคุณค่าก็ต่อเมื่อมันสื่อความหมายออกมา ได้ “ งานกราฟิก ก็คือ งานศิลปะเช่นกัน ” การสื่อความหมายจึงเป็น สิ่งที่นักออกแบบขาดเสียไม่ได้ในการออกแบบ ต่อให้งานที่ได้ สวยงามอย่างไรแต่ไม่สามารถตอบโจทย์ของงานออกแบบหรือสื่อ สิ่งที่ผู้ออกแบบคิดเอาไว้ได้ งานกราฟิกนั้นก็จะมีคุณค่าลดน้อยลง ไป

22. เทคโนโลยีสื่อประสม

23. ความหมายของเทคโนโลยีสื่อประสม
"มัลติมีเดีย (Multimedia)หรือ สื่อหลายแบบ"
•เป็นเทคโนโลยีที่ช่วยให้คอมพิวเตอร์ สามารถ ผสมผสานกันระหว่าง ข้อความ ข้อมูลตัวเลข ภาพนิ่ง ภาพเคลื่อนไหว และเสียง ไว้ด้วยกัน ตลอดจน การนาเอาระบบโต้ตอบกับผู้ใช้ (Interactive)มาผสมผสานเข้าด้วยกัน
นอกจากนี้ มีผู้ให้นิยามศัพท์ไว้ หลายท่าน ดังนี้

24. ความหมายของเทคโนโลยีสื่อประสม
Robert Aston, Joyce Schwarz
•การจัดการควบคุมการทางานของคอมพิวเตอร์ โดยการผสมผสาน ระหว่าง ข้อความ (text) กราฟิก (graphics) เสียง (audio) วีดีโอ (video) และ ภาพเคลื่อนไหวต่าง ๆ
Joyce Schwarz

25. ความหมายของเทคโนโลยีสื่อประสม
TayVaughan
Multimedia คือการผสมผสานระหว่าง ข้อความ กราฟิก ศิลปะ เสียง ภาพเคลื่อนไหว และ วีดีโอ ซึ่งถูกจัดการโดย คอมพิวเตอร์ซึ่งอาจจะเป็นมัลติมีเดียแบบที่มีการตอบโต้กัน ระหว่างผู้ใช้กับคอมพิวเตอร์ (interactive multimedia)หรือ การรวมสื่อหลาย ๆ ตัวเข้าด้วยกัน (hypermedia)
Nicholas Negroponte
มัลติมีเดียที่แท้จริงคือ ข้อมูลที่เป็นดิจิตอล ที่มีการโต้ตอบกัน และ สามารถดูได้จากหลาย ๆ วิธีโดยผู้ใช้นอกจากนั้นใน มัลติมีเดีย ไม่มีการ trade-offระหว่าง depthและ breadthผู้ใช้สามารถดูหัวข้อต่าง ๆ ได้อย่างเป็นอิสระ

26. ประเภทของเทคโนโลยีสื่อประสม
เนื่องจากมัลติมีเดีย เป็นเทคโนโลยีของสื่อหลากหลายสื่อ ซึ่งสามารถแบ่งได้ ดังนี้
•เทคโนโลยีเกี่ยวกับเสียง (Audio Technology)ซึ่งรวมทั้งเสียงพูด และเสียงดนตรี ตั้งแต่ การประมวลผล การแสดงผล การจัดการต่างๆ เช่น การบีบอัดสัญญาณ การสื่อสาร และการ ส่งสัญญาณ
•เทคโนโลยีเกี่ยวกับวีดิโอ (Video Technology)อันได้แก่ การจัดเก็บ การประมวลผล การปรับแต่ง การใช้งาน การเรียกหา สืบค้น การส่งกระจาย มาตรฐานการบีบอัดสัญญาณ การเข้าและถอดรหัส การส่งข้อมูล การท้างานร่วมกับสื่ออื่นๆ
•เทคโนโลยีรูปภาพ (Image Technology)เป็นการพัฒนา และประยุกต์ใช้ภาพ การ จัดการฟอร์แมต คลังภาพ การค้นหา การสร้าง และตกแต่งภาพ
•เทคโนโลยีข้อความ (Text Technology)เกี่ยวกับข้อความหรือ ตัวอักษร ทั้งการใช้ และ ลักษณะรูปแบบของ ข้อความแบบต่างๆ

27. ประเภทของเทคโนโลยีสื่อประสม (ต่อ)
•เทคโนโลยีภาพเคลื่อนไหว และภาพสามมิติ
(Animation & 3D Technology)เป็นเทคโนโลยีเกี่ยวกับการแสดงผล ด้านภาพเคลื่อนไหว ทั้งแบบ 2มิติ และ 3มิติ การสร้างภาพเสมือนจริง (VR -Visual Reality) การสร้าง ตกแต่ง ประมวลผล การใช้งาน
•เทคโนโลยีสาหรับการพัฒนาระบบ (Authoring System Technology) คือ เทคโนโลยีที่ ได้พัฒนา เพื่อสร้างเครื่องมือส้าหรับ งานพัฒนามัลติมีเดีย ในรูปของ ซอฟต์แวร์ช่วย ในการน้า ข้อมูล เนื้อหา (Content) เข้าไปเก็บตามสื่อรูปแบบต่างๆ ที่วางไว้ เพื่อน้าเสนอ เช่น การใช้ เครื่องมือต่างๆ หรือการสร้างเครื่องมือใหม่ ๆ
•เทคโนโลยีกับระบบการศึกษาเป็นการศึกษาเพื่อน้าเอา เทคโนโลยีมัลติมีเดีย มาประยุกต์ใช้ กับ ระบบการศึกษา ในรูปของ CAI -Computer Aided Instruction, CBT-Computer Based Training ตลอดจนงานประชาสัมพันธ์ โฆษณา สร้างภาพยนตร์

28. ประเภทของเทคโนโลยีสื่อประสม (ต่อ)
•เทคโนโลยีการผลิต (Publishing Technology)เป็นการน้าเอามัลติมีเดีย มา ใช้ด้านงานพิมพ์ เพื่อเพิ่มชีวิตชีวาให้กับงานพิมพ์ มีรูปแบบที่โดดเด่น และ น้าเสนอ หรือพิมพ์ลงสื่อได้หลากรูปแบบ เช่น งาน DTP -Desktop Publishing, CD-ROM Title & Publishing
•เทคโนโลยีการสื่อสารและการสนทนา (Broadcasting & Conferencing) เกี่ยวข้องกับการเผยแพร่ข้อมูล เผยแพร่สัญญาณ เช่น Conference, Multicasting Backbone เป็นต้น
•เทคโนโลยีการจัดเก็บข้อมูล (Storage Technology)เนื่องด้วยข้อมูลด้าน มัลติมีเดีย มักจะมีขนาดโต ท้าให้ต้องเกี่ยวข้องกับสื่อบันทึกข้อมูลอย่างหลีกเลี่ยง ไม่ได้ ทั้งเกี่ยวกับรูปแบบของสื่อ รูปแบบการบีบอัดข้อมูล รูปแบบการบันทึก ข้อมูล

29. ประเภทของเทคโนโลยีสื่อประสม (ต่อ)
•เทคโนโลยี WWW & HyperTextโดยจะช่วยให้เกิดการเผยแพร่สื่อมัลติมีเดียใน รูปแบบที่นิยมมากที่สุด และเร็วที่สุด ผ่านระบบ WWW และมีระบบโต้ตอบด้วย เทคโนโลยี HyperText & HyperMedia
•เทคโนโลยีคลังข้อมูล (Media Archives)ซึ่งเกี่ยวกับการจัดเก็บข้อมูลปริมาณ มากๆ และการเรียกค้นภายหลัง เช่น Photo & Image Server, AVI archives

30. บทบาทของสื่อมัลติมีเดีย
ประสิทธิภาพของสื่อมัลติมีเดีย ที่สามารนาเสนอเนื้อหาได้ทั้งข้อความ ภาพนิ่ง ภาพเคลื่อนไหว เสียง วีดีทัศน์ และอื่น ๆ ที่จะเกิดขึ้นในอนาคต ประจวบเหมาะสมระบบติดต่อผู้ใช้ (GUI: Graphics User Interface) ที่ทาให้ผู้ใช้มีความสะดวกในการใช้งาน สร้างสรรค์ งาน ทาให้บทบาทของสื่อฯ มีมากขึ้นตามลาดับ
มีการนาสื่อมัลติมีเดีย มาประยุกต์ใช้กับงานต่าง ๆ มากมาย เช่น การเรียนการสอน การ ถ่ายทอดความรู้ การนาเสนอข้อมูล การประชาสัมพันธ์ เป็นต้น
ปัจจุบันเทคโนโลยีเครือข่ายและการสื่อสาร ยิ่งส่งเสริมให้การประยุกต์ใช้สื่อมัลติมีเดียได้รับการ พัฒนาอย่างกว้าง สามารถเผยแพร่ข้อมูลได้กว้างไกล และรวดเร็ว มีผู้คนตอบสนองการใช้ สื่อมัลติมีเดียมากขึ้น
ไม่ว่าจะเป็น สื่อการเรียนการสอนระบบมัลติมีเดียผ่านเว็บ, ระบบประชาสัมพันธ์ออนไลน์ ได้รับ การพัฒนาอย่างต่อเนื่อง พร้อม ๆ กับเทคโนโลยีที่ก้าวเกินกว่าจะคาดได้ถึง หรือไม่น่าเชื่อว่าจะ เกิดขึ้นได้

31. บทบาทของสื่อมัลติมีเดีย

32. GRAPHICS APPLICATIONS
Entertainment: Cinema(บันเทิง : ภาพยนตร์)
Square: Final Fantasy

33. GRAPHICS APPLICATIONS
Entertainment: Cinema
Pixar: Geri’s Game
Universal: Jurassic Park
A bug’s Life
Antz

34. GRAPHICS APPLICATIONS
Medical Visualization (ภาพทางการแพทย์)
MIT: Image-Guided Surgery Project
The Visible Human Project
http://www.ercim.org/publication/Ercim_News/enw44/koenig.html

35. GRAPHICS APPLICATIONS
Everyday Use
•Microsoft’s Whistler OS will use graphics seriously
•Graphics visualizations and debuggers
•Visualize complex software systems

36. EVERYDAY USE
Window system and large-screen interaction metaphors (François Guimbretière)

37. GRAPHICS APPLICATIONS
Scientific Visualization(การแสดงทางวิทยาศาสตร์)

38. SCIENTIFIC VISUALIZATION
Airflow around a Harrier Jet (NASA Ames)

39. GRAPHICS APPLICATIONS
Computer Aided Design (CAD) (คอมพิวเตอร์ช่วยในการออกแบบ)

40. GRAPHICS APPLICATIONS
Training
Designing Effective Step-By-Step Assembly Instructions (ManeeshAgrawalaet. al)

41. GRAPHICS APPLICATIONS
Entertainment: Games
GT Racer 3
Polyphony Digital: Gran Turismo3, A Spec

42. 42
GRAPHICS APPLICATIONS
Entertainment: Games
Quake III
Aki Ross : Final Fantasy
Star Wars Jedi Outcast: Jedi Knight II

43. การพัฒนาของเทคโนโลยีสื่อประสม
•Audio Technology
•Video
•Image
•Text
•2D/3D
•Authoring, Development Environments
•Education
•Publishing
•Broadcasting
•Conferencing
•Storage Technology
•Hypertext, Hypermedia WWW
•Media Archives
•Virtual Reality
•Etc.

44. AUDIO TECHNOLOGY
การพัฒนาระบบการจัดเก็บ การแสดงผล การประมวลผล ตลอดจน การสร้างมาตรฐานการบีบอัด การส่งสายสัญญาณแบบต่าง ๆ
•Audio file format
•MIDI Technology
•Music Synthesizer
•Speech and True Speech
•Broadcast System
•Real Audio, Audio live

45. VIDEO TECHNOLOGY
พัฒนาการเน้นด้านการประมวลผลการจัดเก็บ การส่ง การกระจายข้อมูลและ มาตรฐานการใช้งานสัญญาณวิดีโอ
•Video file format
•DVD
•MPEG
•CODEC Technology
•Multimedia Video Editing and Processing

46. IMAGE TECHNOLOGY
เป็นเทคโนโลยีว่าด้วยการพัฒนาการประยุกต์ใช้ภาพ การประมวลผลภาพ การ บีบอัด การจัดเก็บภาพ และ การค้นหาภาพ
•Digital Camera
•Scanning Technology
•JPEG
•GIF
•PNG (Portable Network Graphic)

47. TEXT
เทคโนโลยีการประมวลผล การแสดงผล การจัดเก็บข้อความ ข่าวสารต่าง ๆ
•Fonts
•Text Processing
•Text Retrieval
•Text Storage and Archive

48. 2D/3D GRAPHIC, ANIMATION, VR
เทคโนโลยีการแสดงผลภาพเคลื่อนไหวแบบสามมิติ การทาให้เหมือนจริง การประยุกต์ใช้งานด้านต่าง ๆ เช่น งานฝึกอบรม การจาลองระบบเป็นต้น
•Computer Vision
•3D Engines
•Animation
•Game
•VRML(Virtual Reality Modeling Language)
•3D Graphics file format
•Computer Graphic Technology

49. AUTHORING, DEVELOPMENT ENVIRONMENTS
เป็นเทคโนโลยีช่วยในการสร้างระบบมัลติมีเดีย ซึ่งเป็นซอฟต์แวร์ช่วยในการ นาเอาเนื้อหาต่าง ๆ เข้าไปเก็บไว้ตามรูปแบบที่วางไว้ เพื่อนาเสนอในโอกาส ต่อไป
•Macromedia Authorware
•Script X
•Director
•Tool Book

50. EDUCATION VS. MULTIMEDIA
การประยุกต์ใช้มัลติมีเดียในการศึกษา ซึ่งรวมถึงการศึกษาในรูปแบบต่าง ๆ
•CAI (Computer Assisted Instruction )
•CBT (Computer Base Training)
•งานประชาสัมพันธ์ โฆษณา
•การสร้างภาพยนตร์

51. PUBLISHING TECHNOLOGY
งานพิมพ์ในปัจจุบัน ถือว่าเป็นการสร้างงานด้านมัลติมีเดีย ซึ่งงานพิมพ์ต้องการ ความสวยงาม มีชีวิตชีวา แล รูปแบบที่โดดเด่น สามารถพิมพ์บนสื่อต่าง ๆ ได้
•Desktop Publishing
•CD-RomPublishing
•Photo CD
•Music CD
•DVD

52. BROADCASTING AND CONFERENCING
เป็นการกระจายข่าวสาร หรือข้อมูลต่าง ๆ ไปสู่กลุ่มบุคคลต่าง ๆ ซึ่งปัจจุบันถือ ว่าเป็น มัลติมีเดียประเภทหนึ่ง
•Video Conferencing
•Multicast Backbone
•PointCast
•Real Audio
•Video live
•Satellite TV

53. STORAGE TECHNOLOGY
การจัดเก็บข้อมูลมัลติมีเดีย ในสื่อตัวกลางต่าง ๆ โดยเฉพาะเทคนิคการ จัดเก็บข้อมูลจานวนมาก การเรียกค้น และ การแสดงผล
•CD Rom
•DVD
•CDI
•Photo CD

54. HYPERTEXT, HYPERMEDIA, WWW
การนาเสนอข้อมูลบนอินเตอร์เน็ตได้รับความนิยมมาก ในปัจจุบัน โดย เป็นแบบมัลติมีเดียที่เรียกดูในระยะทางไกลได้ผลดี
•HTML
•WWW
•HTTP
•SGML
•Web Object
•Interactive Web
•JAVA

55. MEDIA ARCHIVES
เป็นการเรียกข้อมูลข่าวสารจานวนมาก ๆ เพื่อการเรียกใช้ภายหลัง
•Acoustic Music Server
•Photo and Image Server
•Art
•AVI Archive

56. VIRTUAL REALITY
Virtual Reality เป็นอีกรูปแบบหนึ่งที่ทาให้การสร้างContentน่าสนใจ มากขึ้น โดยภาพที่ได้จะมีลักษณะสมจริง และมีลักษณะเป็น 3 Dimension
สิ่งต่างๆ ที่สร้างขึ้นในลักษณะของVirtual Realityไม่ว่าจะเป็นภาพและ เสียงจะทาในลักษณะของการเลียนแบบของจริงเพื่อให้ User เกิดความรู้สึก เหมือนจริง

57. ภาพกราฟิก
ภาพกราฟิกเป็นสื่อในการนาเสนอที่ดี เนื่องจากมีสีสัน มีรูปแบบที่น่าสนใจ สามารถสื่อความหมายได้กว้างกว่าข้อความ
ประเภทของภาพกราฟิก
-บิตแมพกราฟิก (Bitmap Graphic)
-เวกเตอร์กราฟิก (Vector Graphic)

58. บิตแมพกราฟิก
เป็นภาพที่มีการเก็บข้อมูลแบบพิกเซล หรือจุดเล็ก ๆ ที่แสดงค่าสี ดังนั้นภาพหนึ่ง ๆ จึงเกิดจากจุดเล็ก ๆ หลาย ๆ จุดประกอบกัน
ทาให้รูปภาพแต่ละภาพใช้หน่วยความจามากในการ จัดเก็บ ขนาดของไฟล์ข้อมูลจะมีขนาดใหญ่ เช่น .BMP, .PCX, .GIF, .JPG, .TIF
เมื่อทาการขยายภาพบิตแมพจะทาให้ภาพนั้นไม่ คมชัด

59. เวกเตอร์กราฟิก
ภาพเวกเตอร์เป็นภาพที่สร้างด้วยส่วนประกอบของเส้นลักษณะต่างๆ และคุณสมบัติเกี่ยวกับสีของเส้นนั้นๆ ซึ่งสร้างจากการคานวณทาง คณิตศาสตร์
เช่น .wmfใน clipart ของ MS Office
สามารถสร้างโดย โปรแกรม Adobe Illustrator และ Macromedia Freehand
เมื่อขยายภาพจะยังคมชัดอยู่
basic shapes: square, diamond, triangle, circle...
lines, polygons, polylines and paths.
simple style: color, stroke width and opacity.
transformations: rotation, translation, scaling...

60. ภาพเปรียบเทียบค่าคุณสมบัติ
1 bit, 2 color, 2 KB.
8 bit, 256 color, 53 KB.
4 bit, 16 color, 21 KB.
24 bit, 16.7 M color, 24 KB.

61. การรับรู้เกี่ยวกับสีของมนุษย์

62. COLOR OPTIMIZED
254 color
64 color
16 color
4 color

63. COLOR
Color Wheel

64. RGB MODEL

65. RGB AND CMYK COLOR
The RGBcolor model is typically used when dealing with color viewed on a computer monitor.
The CMYKcolor model, on the other hand, is used on print material when printing in full color.
CMYK
RGB
Colors
Cyan, Magenta, Yellow, Black
Red, Green, Blue
Color Model
Reflective
light comes from a source, hits an object, and reflects from the object into the eye.
Non-reflective light comes straight from the light source to our eyes.
Values
Images are separated into various values of the four colors.
ภาพจะแบ่งออกเป็นค่าต่างๆในสี่สี
แต่ละสีแต่ละ (แดง, เขียวและน้าเงิน) มีค่าหรือความเข้ม, 0-255 ชุดค่าผสม ต่างๆของค่าผลิตสีที่ต่างกัน

66. RGB MODEL

67. RGB VALUE
Code ของสี RGB จะอยู่ในรูปแบบของเลขฐาน 16 (hexadecimal-hex) โดยรวมค่าของสี Red, Green, and Blue (RGB) ตามลาดับ
ค่า Code ของสีจะอยู่ระหว่าง0 (hex 00) ถึง 255 (hex FF).
การแสดงค่าของสีแบบ Hex values จะเริ่มด้วยเครื่องหมาย#

68. ตัวอย่างค่าสี RGB ใน HTML
color: rgb(127, 16, 80); background-color: rgb(255, 64, 2);
color: rgb(50%, 6%, 31%); background-color: rgb(100%, 25%, 1%);
color: #7f1050; background-color: #ff4002;
color: #715; background-color: #f40;
color: purple; background-color: orange;
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
A
B
C
D
E
F
ฐาน 10
ฐาน 16
ฐาน 10
ฐาน 16

69. HTML COLOR NAME

70. WEB-SAFE COLOR

71. MODE สีอื่นๆ
HSB = Hue/Saturation/Brightness
Hue
•0 degrees(Red)
•120 degrees (Green)
•240 degrees (Blue)
•360 degrees (Red)
Saturation
•0% (Greysor White)
•100% (Full Colour)
Brightness
•0% (Black)
•50% (Mid Grey)
•100% (White)
HSL = Hue/Saturation/LuminescenceHue
•0 degrees(Red)
•120 degrees(Green)
•240 degrees(Blue)
•360 degrees(Red)
Saturation
•0% (Greys)
•100% (Full Colour)
Luminescence
•0% (Black)
•50% (Mid Grey)
•100% (White)

72. Q&A