บทที่ 2 ประเภทของงานกราฟิกส์ BUC222 Computer Graphics for Business This template can be used as a starter file for presenting training materials in a group setting. Sections Right-click on a slide to add sections. Sections can help to organize your slides or facilitate collaboration between multiple authors. Notes Use the Notes section for delivery notes or to provide additional details for the audience. View these notes in Presentation View during your presentation. Keep in mind the font size (important for accessibility, visibility, videotaping, and online production) Coordinated colors Pay particular attention to the graphs, charts, and text boxes. Consider that attendees will print in black and white or grayscale. Run a test print to make sure your colors work when printed in pure black and white and grayscale. Graphics, tables, and graphs Keep it simple: If possible, use consistent, non-distracting styles and colors. Label all graphs and tables.

การสร้างงานกราฟิกส์ This is another option for an Overview slides using transitions.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

รายละเอียดเพิ่มเติมของไฟล์ภาพแบบต่างๆ ที่ใช้ในการออกแบบเว็บไซต์ This is another option for an Overview slides using transitions.

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

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

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

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

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

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

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

Frame by Frame Frame 1 Frame 2 Frame 3 Frame 4

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

Tween Animation

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

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

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

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

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