งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

บทที่ 2 ประเภทของงานกราฟิกส์ BUC222 Computer Graphics for Business.

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "บทที่ 2 ประเภทของงานกราฟิกส์ BUC222 Computer Graphics for Business."— ใบสำเนางานนำเสนอ:

1 บทที่ 2 ประเภทของงานกราฟิกส์ BUC222 Computer Graphics for Business

2 การสร้างงานกราฟิกส์

3 การสร้างภาพกราฟิกส์ด้วยคอมพิวเตอร์ มีวิธีการสร้าง 2 แบบคือ – แบบ Bitmap (Raster) – แบบ Vector (Stroked) 3

4 กราฟิกส์แบบ Bitmap เกิดจากจุดสีที่เรียกว่า pixels ประกอบกันเปนรูปรางบนพื้นที่ที่มีลักษณะเปนเสน ตาราง มีคาของตําแหนง และคาสีของตัวเอง เหมาะสมตอการแสดงภาพที่มีเฉด และสีสันจํานวน มาก เชนภาพถาย หรือ ภาพวาด 4

5 กราฟิกส์แบบ Bitmap ภาพแบบ Bitmap เปนภาพที่ขึ้นอยูกับ ความละเอียด หรือความคมชัด (Resolution) 5

6 กราฟิกส์แบบ Bitmap 1.1 พิกเซล (Pixel) เทียบไดกับ "จุดภาพ" 1 จุด ที่บรรจุคาสี และถูกกําหนดตําแหนงไวบน เสนกริดของแนวแกน x และแกนy ภาพบิตแมปจะประกอบดวย พิกเซลหลายๆ พิกเซล 6 พิกเซลของภาพเฉดสีขาว / ดํา พิกเซลของภาพสี

7 กราฟิกส์แบบ Bitmap จํานวนพิกเซลของภาพแตละภาพ จะเรียกวา ความละเอียด หรือ Resolution โดยจะเทียบจํานวนพิกเซลกับความยาวตอนิ้ว ดังนั้นจะมีหนวย เปนพิกเซลตอนิ้ว (ppi: pixels per inch) หรือจุดตอนิ้ว (dpi; dot per inch) 7

8 กราฟิกส์แบบ Bitmap 1.2 เอสเปกเรโซของภาพ (Image Aspect Ratio) แอสเปกเรโชของภาพ คือ อัตราสวนระหวางจํานวนพิกเซลทางแนว ขวางและจํานวนพิกเซลทางแนวดิ่งที่ใชในการสรางภาพ 8 ขนาดของภาพและมักจะเขียนใน รูปของ 800 x 600

9 กราฟิกส์แบบ Bitmap 1.3 รีโซลูชัน (Resolution) หมายถึง รายละเอียดที่อุปกรณแสดงกราฟกชนิดหนึ่งมีอยู่ มักระบุ เปนจํานวนพิกเซลในแนวนอนคือแนวแกน X และจํานวนพิกเซลในแนวตั้ง คือแนวแกน Y 9 ผูผลิตอุปกรณแสดงกราฟกส์บางรายจะระบุคารีโซลูชัน เป็น ระดับสูง (High Resolution) ปานกลาง (Medium Resolution) และระดับต่ำ (Low Resolution)

10 กราฟิกส์แบบ Bitmap 1.4 ไฟล์ภาพแบบ Bitmap คือ ไฟล์ที่มีนามสกุล.BMP (Bitmap sequence) ถูกสร้างขึ้นมาเพื่อใช้เพื่อแสดงผลภาพกราฟฟิคสำหรับ ระบบปฏิบัติการวินโดวส์ เป็นไฟล์ที่ไม่ค่อยมีประโยชน์ในด้านการใช้งาน มากนัก จะใช้สำหรับเก็บกราฟฟิคไฟล์ที่เป็นต้นแบบเสียส่วนใหญ่ ไฟล์นามสกุล.TIF (Tagged Image File Format) เป็นกราฟฟิคไฟล์ที่สร้างมาเพื่อ โปรแกรมประเภทจัดหน้าหนังสือ (Desktop Publishing) สามารถเก็บข้อมูล รายละเอียดของภาพได้ ค่อนข้างมาก ใช้ได้ทั้งใน Mac และ PC 10

11 กราฟิกส์แบบ Bitmap 1.4 ไฟล์ภาพแบบ Bitmap คือ ไฟล์ที่มีนามสกุล. GIF (compu surve Graphic Interchange File) ถูกสร้างขึ้นมาโดยบริษัท Compu surve ซึ่งเป็นบริษัทที่ ให้บริการด้านเครือข่ายของสหรัฐ เหมาะกับการเก็บไฟล์รูปภาพขนาดเล็ก และมีจำนวนของสีน้อย มีขนาดไฟล์เล็กเพราะสร้างขึ้นมาเพื่อใช้ในระบบ เครือข่าย ไฟล์ที่มีนามสกุล.JPG (Joint Photographic Experts Group) เป็นไฟล์ที่ถูกสร้างขึ้นมาเพื่อบีบอัดข้อมูลภาพ เพื่อให้มีขนาด กระทัดรัด เพื่อนำใช้งานในระบบอินเตอร์เนต นิยมมาใช้ในการแสดงผล รูปภาพบนเครือข่ายอินเตอร์เนตเช่นเดียวกับ GIF แต่มีวัตถุประสงค์ในการ ใช้งานแตกต่างกัน 11

12 กราฟิกส์แบบ Bitmap 1.4 ไฟล์ภาพแบบ Bitmap คือ ไฟล์ที่มีนามสกุล. PSD คือ กราฟฟิคไฟล์ ของโปรแกรมตกแต่งรูปภาพ (Retouching) Adobe Photoshop ไฟล์ PSD นี้จะใช้กับโปรแกรม Adobe Photoshop เพื่อการแก้ไขตกแต่งรูปภาพ ไฟล์ที่มีนามสกุล.PNG เป็นกราฟฟิคไฟล์ชนิดล่าสุด ที่นำมาใช้แสดงผลภาพบนเวบเพจ 12

13 กราฟิกส์แบบ Bitmap 1.4 ไฟล์ภาพแบบ Bitmap คือ ไฟล์ที่มีนามสกุล. PDF ไฟล์ PDF เป็นไฟล์เอกสารของ Adobe Acrobat ที่ใช้ในการแสดง เอกสารในรูปแบบของกราฟฟิค ซึ่งจะต้องใช้ โปรแกรม Adobe Acrobat Reader ในการอ่าน สำหรับโปรแกรมที่ใช้สร้างกราฟิกแบบ Bitmap คือ โปรแกรม Paint ต่างๆ เช่น Paintbrush, PhotoShop, Photostyler เป็นต้น 13

14 กราฟกส์แบบ Vector สรางดวยสวนประกอบของเสนลักษณะตางๆ และคุณสมบัติเกี่ยวกับสี ของเสนนั้นๆ ซึ่งสรางจากการคํานวณทางคณิตศาสตร์ เมื่อมีการแกไขภาพ ก็จะเปนการแกไขคุณสมบัติของเสน ทําใหภาพไม สูญเสียความละเอียด เช่น ภาพ.wmf ซึ่งเปน clipart ของ Microsoft Office,Adobe Illustrator หรือ Macromedia Freehand 14

15 กราฟกส์แบบ Vector 2.1 ไฟล์ภาพแบบ Vector คือ ไฟล์ที่มีนามสกุล. EPS (Encapsulated PostScript) เป็นไฟล์ที่ถูกสร้างขึ้นมาเพื่อใช้ในงานออกแบบสื่อสิ่งพิมพ์ (Desktop Publishing) เป็นไฟล์ Vector มาตรฐาน ใช้งานได้กับโปรแกรม หลายโปรแกรม สามารถทำการแยกสีเพื่องานพิมพ์ได้ นอกจากนี้ยังใช้ใน การบันทึก Vector ไฟล์ จากโปรแกรมหนึ่งเพื่อนำไปโหลดใช้งาน ในอีก โปรแกรมหนึ่งอีกด้วย ไฟล์ชนิดนี้จะมีขนาดใหญ่กว่าไฟล์ vector ชนิดอื่นๆ 15

16 กราฟกส์แบบ Vector 2.1 ไฟล์ภาพแบบ Vector คือ ไฟล์ที่มีนามสกุล. AI (Adobe Illustrator sequence) AI เป็นไฟล์ของ Adobe Illustrator จึงควรรแก้ไขไฟล์ AI บน โปรแกรม Illustrator เท่านั้น ไฟล์ที่มีนามสกุล. FH (FreeHand) คือ ไฟล์ของโปรแกรม vector ที่ชื่อว่าโปรแกรม FreeHand ไฟล์ที่มีนามสกุล. DWG (DraWinG file) คือ drawing file ของโปรแกรม AutoCAD 16

17 กราฟกส์แบบ Vector 2.1 ไฟล์ภาพแบบ Vector คือ ไฟล์ที่มีนามสกุล. FLA (FLASH) เป็นไฟล์ Vector ของโปรแกรม Adobe Flash ใช้ในการสร้างอนิ เมชั่นบนเวบเพจ ไฟล์ที่มีนามสกุล. SWF (Shock Wave Flash) เป็นไฟล์ Vector ของโปรแกรม Adobe Flash ใช้ในการแสดงผล Flash อนิเมชั่นบนเวบเพจ 17

18 กราฟกส์แบบ Vector 2.2 ออบเจ็กต (Object) ออบเจ็กตงายๆ (เชน วงกลม เสนตรง ทรงกลม ลูกบาศก และอื่นๆ เรียกวารูปทรงพื้นฐาน) สามารถใชในการสรางออบเจ็กตที่ซับซอนขึ้น กราฟกแบบเวกเตอรใชคําสั่งงายๆ เพื่อสรางออบเจ็กตพื้นฐาน เช่น "ลาก เสนตรงจากจุด A ไปยังจุด B" หรือ "ลากวงกลม รัศมี R โดยมีจุดศูนย กลางอยูที่จุด P" 18

19 เปรียบเทียบคุณสมบัติของกราฟกส์ แบบบิตแมปและภาพแบบ เวกเตอร  1. ในดานความเร็วของการแสดงภาพที่จอภาพ กราฟกแบบบิตแมปสามารถแสดงใหเห็นที่จอภาพไดเร็วกวาภาพ แบบเวกเตอร์ 2. ความสามารถในการเปลี่ยนขนาดภาพ ภาพแบบบิตแมปจะทําไดไมมาก นอกจากนั้นยังอาจจะทําให ลักษณะของภาพผิดเพี้ยนไปจากเดิมดวย 3. เนื้อที่ในการจัดเก็บ ภาพแบบเวคเตอร์ ใช้เนื้อที่ในการจัดเก็บน้อยกว่าภาพแบบบิตแมป 19

20 ประโยชนของคอมพิวเตอรกราฟก ใช้แสดงผลงานดวยภาพแทนการแสดงดวยขอความ ใชแสดงแผนที่ แผนผัง และภาพของสิ่งตางๆ ใช้ในการออกแบบทางดานตางๆ ไดมีการนําคอมพิวเตอรกราฟกมาชวยทางการดานเรียนการสอน คอมพิวเตอรกราฟกถูกนํามาใชในการจําลองสถานการณ์ คอมพิวเตอรกราฟกสามารถนํามาสรางภาพนิ่ง ภาพสไลด ภาพยนตร และรายการวิดีโอ คอมพิวเตอรกราฟกที่มีผูรูจัก และนิยมใชกันมากคงจะไดแก เกมส์ 20

21 รายละเอียดเพิ่มเติมของไฟล์ภาพ แบบต่างๆ ที่ใช้ในการออกแบบ เว็บไซต์ 21

22 ไฟล์สกุล GIF(Graphics Interlace File) ภาพกราฟิกส์สกุล GIF จัดเป็นไฟล์ภาพสำหรับการเผยแพร่ผ่านทางอินเตอร์เน็ต ตั้งแต่ยุคแรกๆ ข้อดี สามารถใช้งานข้ามระบบ (Cross Platform) ได้ มีขนาดไฟล์ต่ำ จากเทคโนโลยีการบีบอัดภาพ สามารถส่งไฟล์ภาพได้รวดเร็ว ทำพื้นของภาพให้โปร่งใสได้ (Transparent) มีโปรแกรมสนับสนุนการสร้างจำนวนมาก เรียกดูได้กับ Graphics Browser ทุกตัว มีความสามารถด้านการนำเสนอภาพเคลื่อนไหว (GIF Animation) ข้อเสีย สามารถแสดงสีได้เพียง 256 สี ไม่เหมาะกับการนำเสนอภาพที่ต้องการความ คมชัด หรือภาพสดใส 22

23 ไฟล์สกุล JPG (Joint Photographer’s Expert Group) เป็นอีกไฟล์หนึ่งที่นิยมใช้บนระบบอินเตอร์เน็ต มักใช้ในกรณีภาพที่ต้องการ นำเสนอมีความละเอียดสูง (24 bit color) ต้องการบีบไฟล์ตามความต้องการของผู้ใช้ ไฟล์ชนิดนี้มักจะใช้กับภาพถ่ายที่นำมาสแกน และต้องการนำไปใช้บนระบบอินเตอร์เน็ต ข้อดี สนับสนุนสีได้ถึง 24 bits สามารถกำหนดค่าการบีบอัดไฟล์ได้ตามต้องการ มีโปรแกรมระบบสนับสนุนจำนวนมาก เรียกดูได้กับ Graphics Browser ทุกตัว ข้อเสีย ทำให้พื้นของรูปโปร่งใสไม่ได้ 23

24 ไฟล์สกุล PNG (Portable Network Graphics) ไฟล์สกุลล่าสุดที่นำจุดเด่นของไฟล์ GIF และ JPG มาพัฒนาร่วมกัน จึงเป็นที่ นิยมอีกสกุลหนึ่งในปัจจุบัน สามารถใช้งานข้ามระบบ ขนาดไฟล์เล็ก มีคุณสมบัติในการทำภาพโปร่งใส แสดงภาพแบบสอดประสานเช่นเดียวกับ GIF โดยมีความคมชัดที่ดีกว่า มีคุณสมบัติ Gamma ทำให้สามารถปรับตัวเองได้ตามจอภาพ และปรับระดับ ความสว่างที่แท้จริงตามที่ควรจะเป็น ข้อดี สนับสนุนสีได้ถึงตามค่า True Color (16 bits,32bits หรือ 64 bits) สามารถกำหนดค่าการบีบอัดไฟล์ได้ตามต้องการ สามารถทำภาพโปร่งใสได้ 24

25 ไฟล์สกุล PNG (Portable Network Graphics) ข้อเสีย หากกำหนดค่าการบีบไฟล์ไว้สูง จะใช้เวลาในการคลายไฟล์สูงตามไปด้วย แต่ ขนาดไฟล์จะมีขนาดต่ำ ไม่สนับสนุน Graphics Browser รุ่นเก่า ความละเอียดของภาพ และจำนวนสี ขึ้นอยู่กับ Video Card โปรแกรมสนับสนุนในการสร้างมีน้อย 25

26 Computer Animation คือ การสร้างภาพเคลื่อนไหวด้วยคอมพิวเตอร์โดยอาศัยเครื่องมือ ที่สร้าง จากแนวคิดทางคอมพิวเตอร์กราฟิกส์ช่วยในการสร้าง ดัดแปลง และให้ แสงและเงาเฟรมตลอดจนการประมวลผลการเคลื่อนที่ ต่าง ๆ แอนิเมชั่น 2 มิติ (2D animation) แอนิเมชั่น 3 มิติ (3D animation) 26

27 วิธีการสร้าง Animation Frame by Frame Tween Animation Action Script 27

28 Frame by Frame 1. นำภาพมาใส่ไว้ในเฟรม 2. ทำการกำหนด Key Frame – Key frame=frame ที่ถูกกำหนดให้มีการเปลี่ยนแปลงของวัตถุเพื่อ สร้างการเคลื่อนไหว – การกำหนดคีย์เฟรมที่มีช่องว่างห่างกัน ภาพที่เปลี่ยนแปลงอาจ กระตุกได้ 3. เหมาะกับภาพที่มีการเปลี่ยนแปลงอย่างรวดเร็วและซับซ้อน 28

29 Frame by Frame Frame 1 Frame 2 Frame 3Frame 4 29

30 Tween Animation เป็นการสร้างภาพโดยกำหนดคีย์เฟรมเริ่มต้นและคีย์เฟรมสุดท้ายแล้ว ปล่อยให้โปรแกรมสร้างความเปลี่ยนระหว่างเฟรมโดยอัตโนมัติ มี 2 แบบ – Motion Tween : เคลื่อนไหวโดยรูปทรงวัตถุไม่เปลี่ยนแปลง – Shape Tween : เคลื่อนไหว โดยรูปทรงวัตถุเปลี่ยนแปลง ไปเป็นอีก รูปหนึ่ง ไฟล์มีขนาดเล็ก การเคลื่อนไหวนุ่มนวลมากกว่า Frame by Frame 30

31 Tween Animation 31

32 Action Script เป็นภาษาโปรแกรมที่นำใช้เพิ่มประสิทธิภาพการทำงาน สามารถทำการตอบโต้กับผู้ใช้ได้(Interactive) Action script ถูกนำมาใช้เมื่อมีการกระทำเกิดขึ้น(Event) 32

33 การใช้คอมพิวเตอร์กราฟิกส์สำหรับงานภาพยนต์ในปัจจุบัน Motion Capture หรือเรียกสั้นๆว่า Mocap คือ เทคโนโลยีระบบอุปกรณ์ที่ใช้ใน อุตสาหกรรมเช่น TV Commercial, Animations, Games, อุตสาหกรรมภาพยนตร์ หรือแม้กระทั่งในวงการแพทย์ เพื่อใช้ในการ ติดตามและบันทึกการเคลื่อนไหวคนจริงๆหรือสัตว์จริงๆ โดยกำหนดจุด สะท้อนแสง(Marker) ที่กระดูกข้อต่อเพื่อให้ซอฟต์แวร์อ่านโครงสร้าง ท่าทางการเคลื่อนที่ได้อย่างเป็นธรรมชาติและสมจริง 33

34 Motion Capture แอนดี้ เซอร์กิส ผู้ให้ชีวิตแก่ กอลลัม ใน The Lord of The Ring Tom Hank เป็น the conductor ใน The Polar Express 34

35 Motion Capture  จะมีกล้องถ่ายการเคลื่อนไหว  นักแสดงซึ่งใส่ชุดแนบเนื้อสีเดียวกับบลูสกรีนหรือสีดำ ติด retro-reflective marker ติดไว้ตามตำแหน่งต่างๆ  กล้องจะทำหน้าที่ยิงไปที่จุดเซ็นเซอร์ เป็นจังหวะ และทำการจับภาพสะท้อนที่ได้จาก marker ไว้  ข้อมูลจากกล้องก็จะส่งไปยังคอมพิวเตอร์ ซึ่งจะไป match กับ skeleton ที่เป็นเหมือน โครงกระดูกของตัวละคร CG อีกที ซึ่งจะทำให้เราได้การเคลื่อนไหวที่สมจริงของตัวละคร เหมือนกับการเคลื่อนที่ของมนุษย์ 35

36 แหล่งที่มา NECTEC’s Web Based Learning : Learn on the Internet by NECTEC – Thailand. เอกสารประกอบการสอน Multimedia อ.อุกฤษณ์ มารังค์ 36


ดาวน์โหลด ppt บทที่ 2 ประเภทของงานกราฟิกส์ BUC222 Computer Graphics for Business.

งานนำเสนอที่คล้ายกัน


Ads by Google