Round 1 (2)

หนว่ ยที.2 หลักการของภาพกราฟก แบบเวกเตอร์

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

ภาพกราฟกแบบเวกเตอรจ์ ะใชก้ ารคํานวณทางคณติ ศาสตรใ์ นการ กําหนดโครงรา่ ง และจดั เก็บไฟล์ภาพในลักษณะของตัวแปรทาง คณติ ศาสตรเ์ ปนผลให้ไฟล์มขี นาดเล็ก สว่ นโครงรา่ งประกอบขนึ จาก เสน้ ตรงและเสน้ โค้ง เรยี กวา่ ภาพลายเสน้ (Draw type graphics)

02 ลักษณะของภาพกราฟก แบบเวกเตอร์ ลักษณะเดน่ ของไฟล์ภาพนคี ือ เมอื ภาพถกู พมิ พอ์ อกทีเครอื งพมิ พจ์ ะมขี อบภาพที คมชดั มากภาพแบบเวกเตอรน์ ยิ มใชใ้ นการออกแบบงานโลโก้ อักษรศิลป งาน ภาพเขยี น ซงึ คณุ ภาพของภาพนนั จะไมข่ นึ อยูก่ ับอัตราการขยาย (Resolution - independent) หมายถึง เมอื ภาพถกู ขยายใหใ้ หญข่ นึ คณุ ภาพของภาพจะ ยงั คงเดมิ แต่ลักษณะของภาพจะดเู ปนภาพวาด ซงึ แบง่ ออกไดด้ งั นี Presentations are tools that can be used as lectures, speeches, reports, and more.

ภาพโลโก้ ภาพโลโก้ทวติ เตอรจ์ ากเวบ็ ไซต์ทวติ เตอร์ เปนบรกิ ารเครอื ขา่ ยสงั คมออนไลนจ์ าํ พวกไมโครบล็อก เมอื พจิ ารณาพบวา่ ขนาดของภาพเวกเตอร์ 100% ภาพมคี วามคมชดั ปกติ เมอื มี การขยายขนาดเพมิ ขนึ จาก 100% เปน 300% ภาพก็ยงั มี ความคมชดั เหมอื นเดิมไมเ่ ปลียนแปลง

ภาพจากโปรแกรม Adobe Photoshop เมอื พจิ ารณาภาพกระต่ายจากโปรแกรม ADOBE PHOTOSHOP ทีสรา้ งขนึ จากเครอื งมอื CUSTOM SHAPE TOOL พบวา่ ขนาดภาพของกระต่ายทีใหญ่ ขนึ มคี วามคมชดั ปกติ เมอื คลิกทีตัวกระต่ายโปรแกรมจะแสดงจุด และเสน้ ทีได้ จากการคํานวณทางคณติ ศาสตรซ์ งึ ตรงกับหลักการของภาพกราฟกแบบเวก เตอร์ จงึ ถือวา่ ภาพกระต่ายเปนภาพกราฟกแบบเวกเตอร์

ชุดแบบตัวอักษรในคอมพวิ เตอร์ จากภาพชุฟดแบบตัวอักษรในคอมพวิ เตอรช์ อื TAHOMAมขี นาด 10 POINT, 100 POINT และ 200 POINT จะเห็นวา่ ตัวอักษร “ก” ไมว่ า่ จะมี ขนาดใดก็ตามก็มคี วามคมชดั ไมเ่ ปลียนแปลง ดังนนั ชุดแบบตัวอักษรใน คอมพวิ เตอรจ์ งึ ถือวา่ เปนภาพเวกเตอร์

รูปภาพวาดโลโก้ จากภาพวาดบลดู ็อกโลโก้ พบวา่ ภาพทีมขี นาดใหญข่ นึ นนั ยงั คงคม ชดั เมอื สงั เกตขอบภาพทีเปนสดี ําจะเห็นถึงความคมชดั สงู หากนาํ ไปพมิ พเ์ ปนสติกเกอรห์ รอื โลโก้ปายรา้ นจะมคี วามคมชดั สงู มาก จงึ ถือวา่ ภาพวาดบลดู ็อกโลโก้นีเปนภาพกราฟกแบบเวกเตอร์

แผนทีในโปรแกรม GOOGLE MAP แบบ 2 มติ ิ แผนทีในโปรแกรม Google Map มแี บบ 2 มติ ิเมอื มกี ารขยายแผนทีใหใ้ หญ่ หรอื ยอ่ ให้ เล็กลงแผนทีก็ยงั คงความคมชดั ปกติ เนอื งจากตัวแผนทีมกี ารแยกชนิ สว่ นของภาพเปน เสน้ เมอื ขยายภาพความละเอียดของภาพจงึ ไมล่ ดลง เปนหลักการของภาพกราฟกแบบ เวกเตอร์ ดงั นนั แผนทีในโปรแกรมGoogle Map จงึ เปนภาพกราฟกแบบเวกเตอร์

03 โปรแกรมทีใช้ สรา้ งหรอื แก้ไข ไฟล์แบบเวกเตอร์ ปจจุบนั มโี ปรแกรมทีใชส้ รา้ งหรอื แก้ไขไฟล์แบบเวกเตอร์ ใหม่ ๆ เกิดขนึ อยา่ งมาก ซงึ ต้องใชเ้ วลาในการศึกษาและ ใชง้ าน แต่ทีนยิ มใชก้ ันมาก เชน่ โปรแกรม “Inkscape”, “Corel Draw”, “FontCreator”, “Adobe Illustrator” ซงึ โปรแกรม AdobePhotoshop ก็สรา้ ง หรอื แก้ไขไฟล์แบบเวกเตอรไ์ ด้

ตัวอยา่ งการสรา้ งหรอื แก้ไขไฟล์แบบเวกเตอร์ 1.แสดงการวาดรถ FERRARI จากโปรแกรม INKSCAPE 3.ภาพแสดงการตัดภาพเวกเตอรบ์ างสว่ นเพอื นาํ ไป ใชง้ านจรงิ ในโปรแกรม ADOBE ILLUSTRATOR 2.แสดงการวาดภาพกราฟกจากโปรแกรม COREL DRAW

04 นามสกลุ ไฟล์ภาพ กราฟกแบบเวกเตอร์ ปจจุบนั มโี ปรแกรมทีใชส้ รา้ งหรอื แก้ไขไฟล์แบบเวกเตอรใ์ หม่ ๆ เกิดขนึ อยา่ งมาก ซงึ ต้องใชเ้ วลาในการศึกษาและใชง้ าน แต่ที นยิ มใชก้ ันมาก เชน่ โปรแกรม “Inkscape”, “Corel Draw”, “FontCreator”, “Adobe Illustrator” ซงึ โปรแกรม AdobePhotoshop ก็สรา้ งหรอื แก้ไขไฟล์แบบเวกเตอรไ์ ด้

1. 2. นามสกลุ ai ไฟล์นามสกลุ ai หรอื Adobe นามสกลุ eps ไฟล์นามสกลุ eps หรอื Illustrator File ใชส้ าํ หรบั งานทีต้องการ Encapsulated PostScript File เปนไฟล์มาตรฐานกลางใชง้ านไดก้ ับทกุ ความละเอียดของภาพมาก เชน่ การสรา้ ง โปรแกรม ถ้าเปดบนโปรแกรมทีรองรบั การต์ นู การสรา้ งโลโก้ ตัวอยา่ งซอฟต์แวรท์ ี สามารถแก้ไข และบนั ทึกทับไดเ้ ลย ตัวอยา่ ง ใชส้ รา้ ง คือ โปรแกรม Illustrator ซอฟต์แวรท์ ีใชส้ รา้ ง คือโปรแกรม Illustrator

3. 5. นามสกลุ wmf ไฟล์นามสกลุ wmf หรอื นามสกลุ psd ไฟล์ Windows Metafile Format เปน นามสกลุ psd หรอื ไฟล์มาตรฐานของโปรแกรม Microsoft Office ตัวอยา่ งซอฟต์แวรท์ ีใชส้ รา้ ง คือ Photoshop Document เปน โปรแกรม CorelDraw ไฟล์ทีมคี ณุ สมบตั ิ ยดื หยุน่ มาก สามารถ 4. เก็บตัวอักษรทําพนื ใส นามสกลุ svg ไฟล์นามสกลุ svg หรอื ได้ ทําภาพเคลือนไหว Scalable Vector Graphics เปนรูป ได้ แยกเลเยอรไ์ ด้ แบบหนงึ ของกราฟกทีใชแ้ สดงผลบนหนา้ ฯลฯ ขนาดของไฟล์จะ เวบ็ โดยกราฟกแบบ SVG มลี ักษณะเด่น ขนึ อยูก่ ับขอ้ มูลทีจดั ตรงทีเปนกราฟกแบบ Vector ตัวอยา่ ง เก็บ ตัวอยา่ ง ซอฟต์แวรท์ ีใชส้ รา้ ง คือ โปรแกรม ซอฟต์แวรท์ ีใชส้ รา้ ง Illustrator, โปรแกรม Inkscape คือ โปรแกรม Adobe Photoshop, GIMP, Paint.NET