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