Transcript ppt
บทที่ 2 ประเภทของงานกราฟิกส์ BUC222 Computer Graphics for Business การสร้างงานกราฟิกส์ การสร้างงานกราฟิกส์ • การสร้างภาพกราฟิกส์ด้วยคอมพิวเตอร์ มีวิธีการสร้าง 2 แบบคือ – แบบ Bitmap (Raster) – แบบ Vector (Stroked) 3 กราฟิกส์แบบ Bitmap • เกิดจากจุดสีที่เรียกว่า pixels • ประกอบกันเปนรูปรางบนพื้นที่ที่มีลักษณะเปนเสน ตาราง • มีคาของตําแหนง และคาสีของตัวเอง • เหมาะสมตอการแสดงภาพที่มีเฉด และสีสันจํานวน มาก เชนภาพถาย หรือ ภาพวาด 4 กราฟิกส์แบบ Bitmap • ภาพแบบ Bitmap เปนภาพที่ขึ้นอยูกับ ความละเอียด หรือความคมชัด (Resolution) 5 กราฟิกส์แบบ Bitmap 1.1 พิกเซล (Pixel) เทียบไดกับ "จุดภาพ" 1 จุด ที่บรรจุคาสี และถูกกําหนดตําแหนงไวบน เสนกริดของแนวแกน x และแกนy ภาพบิตแมปจะประกอบดวย พิกเซลหลายๆ พิกเซล พิกเซลของภาพเฉดสี ขาว/ดํา 6 พิกเซลของภาพสี กราฟิกส์แบบ Bitmap • จํานวนพิกเซลของภาพแตละภาพ จะเรียกวา ความละเอียด หรือ Resolution • โดยจะเทียบจํานวนพิกเซลกับความยาวตอนิ้ว ดังนั้นจะมีหนวย • เปนพิกเซลตอนิ้ว (ppi: pixels per inch) หรือจุดตอนิ้ว (dpi; dot per inch) 7 กราฟิกส์แบบ Bitmap 1.2 เอสเปกเรโซของภาพ (Image Aspect Ratio) แอสเปกเรโชของภาพ คือ อัตราสวนระหวางจํานวนพิกเซลทางแนว ขวางและจํานวนพิกเซลทางแนวดิ่งที่ใชในการสรางภาพ ขนาดของภาพและมักจะเขียนใน รูปของ 800 x 600 8 กราฟิกส์แบบ Bitmap 1.3 รีโซลูชัน (Resolution) หมายถึง รายละเอียดที่อุปกรณแสดงกราฟกชนิดหนึ่งมีอยู่ มักระบุ เปนจํานวนพิกเซลในแนวนอนคือแนวแกน X และจํานวนพิกเซลในแนวตั้ง คือแนวแกน Y ผูผลิตอุปกรณแสดงกราฟกส์บางรายจะระบุคารีโซลูชัน เป็น ระดับสูง (High Resolution) ปานกลาง (Medium Resolution) และระดับต่ํา (Low Resolution) 9 กราฟิกส์แบบ Bitmap 1.4 ไฟล์ภาพแบบ Bitmap คือ • ไฟล์ที่มีนามสกุล .BMP (Bitmap sequence) ถู ก สร้ า งขึ้ น มาเพื่ อ ใช้ เ พื่ อ แสดงผลภาพกราฟ ฟิ ค สํ า หรั บ ระบบปฏิบัติการวินโดวส์ เป็นไฟล์ที่ไม่ค่อยมีประโยชน์ในด้านการใช้งาน มากนัก จะใช้สําหรับเก็บกราฟฟิคไฟล์ที่เป็นต้นแบบเสียส่วนใหญ่ • ไฟล์นามสกุล .TIF (Tagged Image File Format) เป็นกราฟฟิคไฟล์ที่สร้างมาเพื่อ โปรแกรมประเภทจัดหน้าหนังสือ (Desktop Publishing) สามารถเก็บข้อมูล รายละเอียดของภาพได้ ค่อนข้างมาก ใช้ได้ทั้งใน Mac และ PC 10 กราฟิกส์แบบ Bitmap 1.4 ไฟล์ภาพแบบ Bitmap คือ • ไฟล์ที่มีนามสกุล . GIF (compu surve Graphic Interchange File) ถูกสร้างขึ้นมาโดยบริษัท Compu surve ซึ่งเป็นบริษัทที่ ให้บริการด้านเครือข่ายของสหรัฐ เหมาะกับการเก็บไฟล์รูปภาพขนาดเล็ก และมีจํานวนของสีน้อย มีขนาดไฟล์เล็กเพราะสร้างขึ้นมาเพื่อใช้ในระบบ เครือข่าย • ไฟล์ที่มีนามสกุล .JPG (Joint Photographic Experts Group) เป็ น ไฟล์ ที่ ถู ก สร้ า งขึ้ น มาเพื่ อ บี บ อั ด ข้ อ มู ล ภาพ เพื่ อ ให้ มี ข นาด กระทัดรัด เพื่อนําใช้งานในระบบอินเตอร์เนต นิยมมาใช้ในการแสดงผล รูปภาพบนเครือข่ายอินเตอร์เนตเช่นเดียวกับ GIF แต่มีวัตถุประสงค์ในการ ใช้งานแตกต่างกัน 11 กราฟิกส์แบบ Bitmap 1.4 ไฟล์ภาพแบบ Bitmap คือ • ไฟล์ที่มีนามสกุล . PSD คือ กราฟฟิ คไฟล์ ของโปรแกรมตกแต่ง รู ปภาพ (Retouching) Adobe Photoshop ไฟล์ PSD นี้จะใช้กับโปรแกรม Adobe Photoshop เพื่อการแก้ไขตกแต่งรูปภาพ • ไฟล์ที่มีนามสกุล .PNG เป็นกราฟฟิคไฟล์ชนิดล่าสุด ที่นํามาใช้แสดงผลภาพบนเวบเพจ 12 กราฟิกส์แบบ Bitmap 1.4 ไฟล์ภาพแบบ Bitmap คือ • ไฟล์ที่มีนามสกุล . PDF ไฟล์ PDF เป็นไฟล์เอกสารของ Adobe Acrobat ที่ใช้ในการแสดง เอกสารในรูปแบบของกราฟฟิค ซึ่งจะต้องใช้ โปรแกรม Adobe Acrobat Reader ในการอ่าน สําหรับโปรแกรมที่ใช้สร้างกราฟิกแบบ Bitmap คือ โปรแกรม Paint ต่างๆ เช่น Paintbrush, PhotoShop, Photostyler เป็นต้น 13 กราฟกส์แบบ Vector • สรางดวยสวนประกอบของเสนลักษณะตางๆ และคุณสมบัติเกี่ยวกับสี ของเสนนั้นๆ ซึ่งสรางจากการคํานวณทางคณิตศาสตร์ • เมื่อมีการแกไขภาพ ก็จะเปนการแกไขคุณสมบัติของเสน ทําใหภาพไม สูญเสียความละเอียด • เช่น ภาพ .wmf ซึ่งเปน clipart ของ Microsoft Office ,Adobe Illustrator หรือ Macromedia Freehand 14 กราฟกส์แบบ Vector 2.1 ไฟล์ภาพแบบ Vector คือ • ไฟล์ที่มีนามสกุล . EPS (Encapsulated PostScript) เป็ น ไฟล์ ที่ ถู ก สร้ า งขึ้ น มาเพื่ อ ใช้ ใ นงานออกแบบสื่ อ สิ่ ง พิ ม พ์ (Desktop Publishing) เป็นไฟล์ Vector มาตรฐาน ใช้งานได้กับโปรแกรม หลายโปรแกรม สามารถทําการแยกสีเพื่องานพิมพ์ได้ นอกจากนี้ยังใช้ใน การบันทึก Vector ไฟล์ จากโปรแกรมหนึ่งเพื่อนําไปโหลดใช้งาน ในอีก โปรแกรมหนึ่งอีกด้วย ไฟล์ชนิดนี้จะมีขนาดใหญ่กว่าไฟล์ vector ชนิดอื่นๆ 15 กราฟกส์แบบ Vector 2.1 ไฟล์ภาพแบบ Vector คือ • ไฟล์ที่มีนามสกุล . AI (Adobe Illustrator sequence) AI เป็นไฟล์ของ Adobe Illustrator จึงควรรแก้ไขไฟล์ AI บน โปรแกรม Illustrator เท่านั้น • ไฟล์ที่มีนามสกุล . FH (FreeHand) คือ ไฟล์ของโปรแกรม vector ที่ชื่อว่าโปรแกรม FreeHand • ไฟล์ที่มีนามสกุล . DWG (DraWinG file) คือ drawing file ของโปรแกรม AutoCAD 16 กราฟกส์แบบ Vector 2.1 ไฟล์ภาพแบบ Vector คือ • ไฟล์ที่มีนามสกุล . FLA (FLASH) เป็นไฟล์ Vector ของโปรแกรม Adobe Flash ใช้ในการสร้างอนิ เมชั่นบนเวบเพจ • ไฟล์ที่มีนามสกุล . SWF (Shock Wave Flash) เป็นไฟล์ Vector ของโปรแกรม Adobe Flash ใช้ในการแสดงผล Flash อนิเมชั่นบนเวบเพจ 17 กราฟกส์แบบ Vector 2.2 ออบเจ็กต (Object) • ออบเจ็กตงายๆ (เชน วงกลม เสนตรง ทรงกลม ลูกบาศก และอื่นๆ เรียกวารูปทรงพื้นฐาน) สามารถใชในการสรางออบเจ็กตที่ซับซอนขึ้น • กราฟกแบบเวกเตอรใชคําสั่งงายๆ เพื่อสรางออบเจ็กตพื้นฐาน เช่น "ลาก เสนตรงจากจุด A ไปยังจุด B" หรือ "ลากวงกลม รัศมี R โดยมีจุดศูนย กลางอยูที่จุด P" 18 เปรียบเทียบคุณสมบัติของกราฟกส์ แบบบิตแมปและภาพแบบ เวกเตอร 1. ในดานความเร็วของการแสดงภาพที่จอภาพ กราฟกแบบบิตแมปสามารถแสดงใหเห็นที่จอภาพไดเร็วกวาภาพ แบบเวกเตอร์ 2. ความสามารถในการเปลี่ยนขนาดภาพ ภาพแบบบิ ต แมปจะทํ า ไดไมมาก นอกจากนั้ น ยั ง อาจจะทํ า ให ลักษณะของภาพผิดเพี้ยนไปจากเดิมดวย 3. เนื้อที่ในการจัดเก็บ ภาพแบบเวคเตอร์ ใช้เนื้อที่ในการจัดเก็บน้อยกว่าภาพแบบบิตแมป 19 ประโยชนของคอมพิวเตอรกราฟก • • • • • • ใช้แสดงผลงานดวยภาพแทนการแสดงดวยขอความ ใชแสดงแผนที่ แผนผัง และภาพของสิ่งตางๆ ใช้ในการออกแบบทางดานตางๆ ไดมีการนําคอมพิวเตอรกราฟกมาชวยทางการดานเรียนการสอน คอมพิวเตอรกราฟกถูกนํามาใชในการจําลองสถานการณ์ คอมพิวเตอรกราฟกสามารถนํามาสรางภาพนิ่ง ภาพสไลด ภาพยนตร และรายการวิดีโอ • คอมพิวเตอรกราฟกที่มีผูรูจัก และนิยมใชกันมากคงจะไดแก เกมส์ 20 รายละเอียดเพิ่มเติมของไฟล์ภาพ แบบต่างๆ ที่ใช้ในการออกแบบ เว็บไซต์ 21 ไฟล์สกุล GIF(Graphics Interlace File) ภาพกราฟิกส์สกุล GIF จัดเป็นไฟล์ภาพสําหรับการเผยแพร่ผ่านทางอินเตอร์เน็ต ตั้งแต่ยุคแรกๆ ข้อดี • สามารถใช้งานข้ามระบบ (Cross Platform) ได้ • มีขนาดไฟล์ต่ํา จากเทคโนโลยีการบีบอัดภาพ สามารถส่งไฟล์ภาพได้รวดเร็ว • ทําพื้นของภาพให้โปร่งใสได้ (Transparent) • มีโปรแกรมสนับสนุนการสร้างจํานวนมาก • เรียกดูได้กับ Graphics Browser ทุกตัว • มีความสามารถด้านการนําเสนอภาพเคลื่อนไหว (GIF Animation) ข้อเสีย สามารถแสดงสีได้เพียง 256 สี ไม่เหมาะกับการนําเสนอภาพที่ต้องการความ คมชัด หรือภาพสดใส 22 ไฟล์สกุล JPG (Joint Photographer’s Expert Group) เป็นอีกไฟล์หนึ่งที่นิยมใช้บนระบบอินเตอร์เน็ต มักใช้ในกรณีภาพที่ต้องการ นําเสนอมีความละเอียดสูง (24 bit color) ต้องการบีบไฟล์ตามความต้องการของผู้ใช้ ไฟล์ชนิดนี้มักจะใช้กับภาพถ่ายที่นํามาสแกน และต้องการนําไปใช้บนระบบอินเตอร์เน็ต ข้อดี • สนับสนุนสีได้ถึง 24 bits • สามารถกําหนดค่าการบีบอัดไฟล์ได้ตามต้องการ • มีโปรแกรมระบบสนับสนุนจํานวนมาก • เรียกดูได้กับ Graphics Browser ทุกตัว ข้อเสีย ทําให้พื้นของรูปโปร่งใสไม่ได้ 23 ไฟล์สกุล PNG (Portable Network Graphics) ไฟล์สกุลล่าสุดที่นําจุดเด่นของไฟล์ GIF และ JPG มาพัฒนาร่วมกัน จึงเป็นที่ นิยมอีกสกุลหนึ่งในปัจจุบัน สามารถใช้งานข้ามระบบ • ขนาดไฟล์เล็ก • มีคุณสมบัติในการทําภาพโปร่งใส • แสดงภาพแบบสอดประสานเช่นเดียวกับ GIF โดยมีความคมชัดที่ดีกว่า • มีคุณสมบัติ Gamma ทําให้สามารถปรับตัวเองได้ตามจอภาพ และปรับระดับ ความสว่างที่แท้จริงตามที่ควรจะเป็น ข้อดี • สนับสนุนสีได้ถึงตามค่า True Color (16 bits,32bits หรือ 64 bits) • สามารถกําหนดค่าการบีบอัดไฟล์ได้ตามต้องการ • สามารถทําภาพโปร่งใสได้ 24 ไฟล์สกุล PNG (Portable Network Graphics) ข้อเสีย • หากกําหนดค่าการบีบไฟล์ไว้สูง จะใช้เวลาในการคลายไฟล์สูงตามไปด้วย แต่ ขนาดไฟล์จะมีขนาดต่ํา • ไม่สนับสนุน Graphics Browser รุ่นเก่า • ความละเอียดของภาพ และจํานวนสี ขึ้นอยู่กับ Video Card • โปรแกรมสนับสนุนในการสร้างมีน้อย 25 Computer Animation คือ การสร้างภาพเคลื่อนไหวด้วยคอมพิวเตอร์โดยอาศัยเครื่องมือ ที่สร้าง จากแนวคิดทางคอมพิวเตอร์กราฟิกส์ช่วยในการสร้าง ดัดแปลง และให้ แสงและเงาเฟรมตลอดจนการประมวลผลการเคลื่อนที่ ต่าง ๆ • แอนิเมชั่น 2 มิติ (2D animation) • แอนิเมชั่น 3 มิติ (3D animation) 26 วิธีการสร้าง Animation • Frame by Frame • Tween Animation • Action Script 27 Frame by Frame 1. นําภาพมาใส่ไว้ในเฟรม 2. ทําการกําหนด Key Frame – Key frame=frame ที่ถูกกําหนดให้มีการเปลี่ยนแปลงของวัตถุเพื่อ สร้างการเคลื่อนไหว – การกําหนดคีย์เฟรมที่มีช่องว่างห่างกัน ภาพที่เปลี่ยนแปลงอาจ กระตุกได้ 3. เหมาะกับภาพที่มีการเปลี่ยนแปลงอย่างรวดเร็วและซับซ้อน 28 Frame by Frame Frame 1 29 Frame 2 Frame 3 Frame 4 Tween Animation • เป็นการสร้างภาพโดยกําหนดคีย์เฟรมเริ่มต้นและคีย์เฟรมสุดท้ายแล้ว ปล่อยให้โปรแกรมสร้างความเปลี่ยนระหว่างเฟรมโดยอัตโนมัติ • มี 2 แบบ – Motion Tween : เคลื่อนไหวโดยรูปทรงวัตถุไม่เปลี่ยนแปลง – Shape Tween : เคลื่อนไหว โดยรูปทรงวัตถุเปลี่ยนแปลง ไปเป็นอีก รูปหนึ่ง • ไฟล์มีขนาดเล็ก การเคลื่อนไหวนุ่มนวลมากกว่า Frame by Frame 30 Tween Animation 31 Action Script • เป็นภาษาโปรแกรมที่นําใช้เพิ่มประสิทธิภาพการทํางาน • สามารถทําการตอบโต้กับผู้ใช้ได้(Interactive) • Action script ถูกนํามาใช้เมื่อมีการกระทําเกิดขึ้น(Event) 32 การใช้ คอมพิวเตอร์ กราฟิ กส์ สาหรับงานภาพยนต์ ในปัจจุบัน • Motion Capture หรือเรียกสั้นๆว่า Mocap คือ เทคโนโลยีระบบอุปกรณ์ที่ใช้ใน อุตสาหกรรมเช่น TV Commercial, Animations, Games, อุตสาหกรรมภาพยนตร์ หรือแม้กระทั่งในวงการแพทย์ เพื่อใช้ในการ ติดตามและบันทึกการเคลื่อนไหวคนจริงๆหรือสัตว์จริงๆ โดยกาหนดจุด สะท้อนแสง(Marker) ที่กระดูกข้อต่อเพื่อให้ซอฟต์แวร์อ่านโครงสร้าง ท่าทางการเคลื่อนที่ได้อย่างเป็นธรรมชาติและสมจริง 33 Motion Capture แอนดี้ เซอร์กิส ผู้ให้ชีวิตแก่ กอลลัม ใน The Lord of The Ring 34 Tom Hank เป็น the conductor ใน The Polar Express Motion Capture จะมีกล้องถ่ายการเคลื่อนไหว นักแสดงซึ่งใส่ชุดแนบเนื้อสีเดียวกับบลูสกรีนหรือสีดา ติด retro-reflective marker ติดไว้ตามตาแหน่งต่างๆ กล้องจะทาหน้าที่ยิงไปที่จุดเซ็นเซอร์ เป็นจังหวะ และทาการจับภาพสะท้อนที่ได้จาก marker ไว้ ข้อมูลจากกล้องก็จะส่งไปยังคอมพิวเตอร์ ซึ่งจะไป match กับ skeleton ที่เป็นเหมือน โครงกระดูกของตัวละคร CG อีกที ซึ่งจะทาให้เราได้การเคลื่อนไหวที่สมจริงของตัวละคร 35 เหมือนกับการเคลื่อนที่ของมนุษย์ แหล่งที่มา • NECTEC’s Web Based Learning : Learn on the Internet by NECTEC – Thailand. • เอกสารประกอบการสอน Multimedia อ.อุกฤษณ์ มารังค์ • http://samet.skru.ac.th/~ntaweera/cg/ 36