1 / 32

บทที่ 2 ตัวอักษร และชุดตัวอักษร Character and Fonts

บทที่ 2 ตัวอักษร และชุดตัวอักษร Character and Fonts. เรื่องทั่วไปเกี่ยวกับตัวอักษรและชุดตัวอักษร. ในอดีตมนุษย์ได้มีการใช้ข้อความหรือตัวอักษรเป็นภาษาสื่อกลางติดต่อระหว่างกัน โดยผ่านทางการอ่านหรือบันทึกเรื่องราวต่างๆ

noelle
Download Presentation

บทที่ 2 ตัวอักษร และชุดตัวอักษร Character and Fonts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. บทที่ 2 ตัวอักษรและชุดตัวอักษรCharacter and Fonts

  2. เรื่องทั่วไปเกี่ยวกับตัวอักษรและชุดตัวอักษรเรื่องทั่วไปเกี่ยวกับตัวอักษรและชุดตัวอักษร • ในอดีตมนุษย์ได้มีการใช้ข้อความหรือตัวอักษรเป็นภาษาสื่อกลางติดต่อระหว่างกัน โดยผ่านทางการอ่านหรือบันทึกเรื่องราวต่างๆ • ต่อมาได้มีการนำตัวอักษรมาประยุกต์ใช้ร่วมกับคอมพิวเตอร์ด้วยกระบวนการเรียบเรียง ประมวลผล จัดเก็บและนำมาใช้งาน ซึ่งได้ก่อให้เกิดประโยชน์ในทุกแวดวงธุรกิจ หรือแม้แต่การสื่อสารด้วยข้อความที่เป็นเท็กซ์ (Text Messaging)

  3. เรื่องทั่วไปเกี่ยวกับตัวอักษรและชุดตัวอักษรเรื่องทั่วไปเกี่ยวกับตัวอักษรและชุดตัวอักษร • จนกระทั่ง ได้มีการเริ่มนำตัวอักษรมาใช้ และเผยแพร่ผ่านช่องทางการสื่อสารบนระบบเครือข่ายอินเทอร์เน็ตในรูปแบบภาษา Html (Hypertext Markup Language) ซึ่งปัจจุบันกำลังได้รับความนิยมใช้งานกันอย่างแพร่หลาย

  4. ข้อความภาษาเอชทีเอ็มแอลในโปรแกรมโน้ตแพดข้อความภาษาเอชทีเอ็มแอลในโปรแกรมโน้ตแพด

  5. มาตรฐาน (Standard) ของตัวอักษร • มาตรฐานตัวอักษรแบ่งออกเป็น 2 ชนิด คือ • แอสกี (Ascii) • ยูนิโค้ด (Unicode) แอสกี (ASCII-American Standard Code For Information) • เป็นรหัสขนาด 7 บิต รองรับได้ 128 รหัส • ต่อมาได้รับการพัฒนามาเป็นมาตรฐาน ISO646 • ในการเก็บข้อมูล 1 ไบต์ จะมีการใช้งานขนาด 8 บิต แต่รหัสแอสกีจะใช้งานเพียง 7 บิต ทำให้สามารถทำงานได้กี่รหัส ................... • ซึ่งต่อมาได้มีการพัฒนาการใช้งานรหัสแบบ 8 บิตนี้ โดยแบ่งเป็น 2 กลุ่ม กลุ่มแรก (0-127) ยังคงเป็นรหัสแอสกีแบบเดิม กลุ่มที่สอง (128-25

  6. แอสกี (ASCII) (ต่อ) • มาตรฐานรหัส 8 บิต ในช่วงปี ค.ศ. 1980 จะมีการใช้มาตรฐาน ISO 8859 โดยแยกตามกลุ่มของภาษาในกลุ่มแรกจะเป็นมาตรฐาน ISO 8859-1 เป็นการอ้างถึงภาษาในกลุ่ม ISO Latin1 และครอบคลุมรวมไปถึงภาษาของประเทศทางตะวันตกของยุโรป (Western European) ส่วนมาตรฐาน ISO 8859 สำหรับภาษาของประเทศทางตะวันออกของยุโรป เช่น Czech, Slovak และ Croatian จะใช้มาตรบาน ISO 8859-2 หรือ Latin2 โดยแต่ละประเทศจะมีมาตรฐานของภาษาที่แตกต่างกัน เช่น Cyrillic จะใช้มาตรฐาน ISO 8856-5 Greek จะใช้มาตรฐาน ISO 8859-7 และ Hebrew จะใช้มาตรฐาน ISO 8859-8 เป็นต้น • จากข้อบกพร่องของมาตรฐาน ISO 8859 ที่ถูกแบ่งออกเป็นหลายประเภทดังกล่าวข้างต้นและมาตรฐานนี้ไม่สนับสนุนระบบปฏิบัติการและซอฟต์แวร์ต่างๆ อย่างครอบคลุม เป็นผลให้มาตรฐาน ISO 8859 ไม่สามารถใช้งานได้อย่างทั่วถึงและไม่เพียงพอที่จะรองรับกับรหัสของทุกชาติทุกภาษาได้ ดังนั้นเพื่อแก้ไขปัญหาจึงได้มีการพัฒนาพื้นที่ในการเก็บตัวอักษรเป็น 16 บิต (65536 รหัส) โดยมีการจัดกลุ่มของรหัสแบบ 8 บิตออกเป็น 256 กลุ่ม ในทำนองเดียวกันเมื่อจัดกลุ่มของรหัสแบบ 16 บิตออกเป็น 256 กลุ่ม จะได้รหัสแบบ 24 บิต จากนั้น จัดกลุ่มรหัสแบบ 24 บิต เพิ่มอีก 256 กลุ่ม ก็จะพัฒนาไปสู่ ISO 10646 หรือ รหัสแบบ 32 บิต

  7. ตัวอย่างตารางรหัสแอสกี (ASCII)

  8. ยูนิโค้ด( Unicode) • เป็นรหัสขนาด 16 บิต จึงสามารถรองรับตัวอักษรได้มากถึง 65,536 (รหัส) ในรูปแบบของ “Code Point” แสดงยูนิโค้ด (Unicode) ของตัวอักษรภาษาไทย

  9. แสดงยูนิโค้ด (Unicode) ของตัวอักษรภาษาไทย

  10. ยูนิโค้ด( Unicode) (ต่อ) • ปัจจุบันในหลายๆ ประเทศได้มีการนำเอายูนิโค้ดมาใช้ประโยชน์ร่วมกัน โดยการสร้างมาตรฐานของตนเองขึ้นมา ตัวอย่างเช่น มาตรฐาน “ซีเจเค (CJK)” ซึ่งเกิดขึ้นจากการรวมตัวของ 3ประเทศ ได้แก่ จีน (Chinese) ญี่ปุ่น (Japan) และเกาหลี (Korean) ตัวอย่างรหัสยูนิโคดของซีเจเค

  11. ยูนิโค้ด( Unicode) (ต่อ) • ในการนำรหัส ISO 10646 มาใช้งานให้สามารถส่งข้อมูลผ่านระบบเครือข่าย (ในระบบเครือข่ายส่งข้อมูลได้ครั้งละ 8 บิต) จะต้องทำการเข้ารหัส (Encoding) ตัวอักษรซึ่งการเข้ารหัสแบบนี้ จะรู้จักกันในชื่อ “ยูซีเอส (UCS)” แบ่งออกเป็น UCS-2 และ UCS-4 จากนั้นรหัสยูนิโค้ดจะนำไปใช้ในการแปลงเป็นรูปแบบของ UCS (UCS Transformation Formats : UTS-8 จะใช้สำหรับเข้ารหัส UCS-2 เป็นต้น • สำหรับภาษาที่ยูนิโค้ดสามารถรองรับได้ มีดังนี้ Latin, Greek, Cyrillic, American, Hebrew, Arabic, Devanagari, Bengali, Gurmukhi, Gujarati, Oriya, Tamil, Telugu, Kannada, Malayalam, Thai, Lao, Georgian, Tibetan, Chinese, Japanese และ Korean

  12. รูปแบบและลักษณะของตัวอักษรรูปแบบและลักษณะของตัวอักษร • รูปแบบตัวอักษร (Fonts) สามารถจัดแบ่งประเภทตัวอักษรออกเป็นหมวดหมู่ได้ 3 ระดับ ได้แก่ • ประเภท (Category) • ตระกูล (Family) • ชื่อเฉพาะ (Face)

  13. ประเภท (Category) • เป็นที่รวมของตระกูล (Family) และชื่อเฉพาะ (Face) ของแต่ละตัวอักษร (Font) สามารถแบ่งออกได้ดังนี้ • Serif: เป็นแบบอักษรที่ใช้เป็นมาตรฐาน ในแต่ละตัวอักษรจะมีเส้นคล้ายๆ ขีดเหลี่ยม • Sans-Serif: เป็นแบบอักษรที่คุ้นเคยมากกว่า Serif เพราะเป็นที่นิยมของผู้เขียนเว็บ มีรูปร่างมนกลม และดูสวยงาม • Monospaced: เป็นแบบอักษรที่มีขนาดความกว้างของทุกตัวอักษรเท่ากันหมด บางทีเรียกว่า Typewriter Font เนื่องจากมีลักษณะคล้ายตัวอักษรที่ได้จากเครื่องพิมพ์ดีด • Script: เป็นแหล่งรวมของแบบอักษรทุกชนิด ที่มีลักษณะพิเศษต่างๆ เช่น มีจุด มีหาง เป็นต้น และมีลักษณะของตัวอักษรที่คล้ายกับลายมือ

  14. ตระกูล (Family) • เป็นหมวดที่ย่อยลงไปจาก Category แต่ตัวอักษรที่อยู่ในตระกูลเดียวกันจะมีบรรพบุรุษร่วมกัน • ตารางแสดงความสัมพันธ์ระหว่าง Category และ Family

  15. ชื่อเฉพาะ (Face) • เป็นตัวอักษรที่ย่อยลงไปจาก Family ตารางแสดงความสัมพันธ์ระหว่าง Family และ Face

  16. การกำหนดลักษณะของตัวอักษร (ต่อ) • ตัวอักษรมีให้เลือกใช้มากมายหลายรูปแบบ เช่น รูปแบบอักษรที่เหมาะสำหรับข้อความภาษาไทย / อังกฤษ ได้แก่ MS Sans Serif, Microsoft Sans Serif, Thonburi เป็นต้น ส่วนรูปแบบอักษรที่เหมาะสำหรับข้อความภาษาอังกฤษได้แก่ Arial, Helvetica, Sans-Serif เป็นต้น โดยสามารถแสดงรูปแบบของตัวอักษรเป็น AngsanaUPC ที่มีลักษณะเป็น ตัวอักษรธรรมดา ตัวอักษรหนา ตัวอักษรเอียง ตัวอักษรธรรมดาขีดเส้นใต้ ตัวอักษรหนาขีดเส้นใต้ ตัวอักษรเอียงหนา และตัวอักษรเอียงหนาขีดเส้นใต้ และมีขนาดของตัวอักษรให้เลือกใช้ตั้งแต่ 8-72 จุดต่อหนึ่งตัวอักษร (หนึ่งจุดเท่ากับ 0.138 นิ้ว)

  17. ตัวอักษรธรรมดา ตัวอักษรหนาตัวอักษรเอียงตัวอักษรธรรมดาขีดเส้นใต้ แสดงตัวอักษร Cordia New ลักษณะต่างๆ

  18. ขนาด 12 จุด ขนาด 66 จุด ขนาด 72 จุด ขนาด 14 จุด ขนาด 16 จุด ขนาด 60 จุด ขนาด 18 จุด ขนาด 20 จุด ขนาด 54 จุด ขนาด 24 จุด ขนาด 48 จุด ขนาด 28 จุด ขนาด 44 จุด ขนาด 32 จุด ขนาด 40 จุด ขนาด 36 จุด แสดงตัวอักษรขนาดต่างๆ

  19. โครงสร้างของตัวอักษรภาษาอังกฤษโครงสร้างของตัวอักษรภาษาอังกฤษ • Serif คือ เส้นที่กำหนดส่วนบนสุดของตัวอักษร • Mean Lineคือ เส้นที่กำหนดความสูงของอักษรตัวพิมพ์เล็ก • Base Lineคือ เส้นที่กำหนดขอบล่างของตัวอักษร • Point Sizeคือ ช่วงความสูงทั้งหมดที่ตัวอักษรต้องใช้ • Cap Heightคือ ความสูงของตัวอักษรตัวพิมพ์ใหญ่ • Shoulderคือ ช่องว่างที่เผื่อไว้สำหรับเว้นบรรทัด • Set Widthคือ ความกว้างของตัวอักษร • X - Height คือ ความสูงของตัวอักษรพิมพ์เล็ก • Ascender คือ ส่วนที่เลยเส้น Mean Line ขึ้นไปด้านบน ใช้กับอักษรตัวพิมพ์เล็ก • Descender คือ ส่วนที่เลยเส้น Baseline ลงมาด้านล่าง ใช้กับอักษรตัวพิมพ์เล็กเช่นกัน แสดงโครงสร้างของตัวอักษรภาษาอังกฤษ

  20. การใช้งานตัวอักษรและรูปแบบตัวอักษรในมัลติมีเดียการใช้งานตัวอักษรและรูปแบบตัวอักษรในมัลติมีเดีย • ในการใช้ตัวอักษรที่มีขนาดเล็กจะต้องชัดเจนและอ่านง่าย • ข้อความที่ต้องการจะเน้นควรจะมีลักษณะที่แตกต่างจากข้อความธรรมดา เช่น มีการขีดเส้นใต้ ทำเป็นอักษรตัวเอียง หรือตัวหนา เป็นต้น • จัดช่องว่างของบรรทัดให้เหมาะสมและอ่านง่าย • จัดขนาดของตัวอักษรตามความสำคัญของข้อความ • หัวข้อที่ใช้ตัวอักษรขนาดใหญ่ควรมีระยะช่องไฟของตัวอักษรที่ให้ความรู้สึกที่ดี ไม่ติด หรือห่างกันเกินไป • จัดสีของข้อความให้อ่านง่าย มีความแตกต่างจากสีของพื้นหลัง เช่น ตัวอักษรสีดำบนพื้นขาว • ควรใช้วิธีการ Anti-Aliasing กับหัวข้อที่เป็นอักษรกราฟิกขนาดใหญ่ (อักษรกราฟิกขนาดใหญ่จะมีรอยหยักบริเวณขอบของตัวอักษรเกิดขึ้น การปรับรอยหยักดังกล่าวให้เรียบดูสวยงามเรียกว่า Anti-Aliasing

  21. ตัวอักษรแบบธรรมดา ตัวอักษรที่ใช้การขจัดรอยหยัก ความแตกต่างระหว่างตัวอักษรแบบธรรมดากับตัวอักษรที่ใช้การขจัดรอยหยัก

  22. การใช้งานตัวอักษรและรูปแบบตัวอักษรในมัลติมีเดีย (ต่อ) • หากต้องการจัดข้อความให้อยู่กึ่งกลางบรรทัด ไม่ควรทำติดต่อกันหลายบรรทัดจะดูไม่สวยงาม • ในภาษาอังกฤษควรใช้อักษรพิมพ์ใหญ่ และพิมพ์เล็กอย่างเหมาะสม • เน้นความน่าสนใจของข้อความด้วยการใส่แสงเงาให้ตัวอักษร หรือวางหัวข้อหลักๆ บนพื้นที่ว่าง ซึ่งเป็นจุดสนใจที่มองเห็นได้อย่างชัดเจน • สรรหาข้อคิด คำเสนอแนะ หรือคำติชมจากหลายๆ ความคิดมาสรุปเพื่อเลือกใช้ตัวอักษรที่เหมาะสมที่สุดกับข้อความที่ต้องการ • ใช้คำศัพท์ที่มีความหมายน่าสนใจและเข้าใจง่าย เพื่อเชื่อมโยงหัวข้อกับเนื้อความเข้าด้วยกัน • ข้อความสำหรับเชื่อมโยงบนหน้าเว็บเพ็จ (Text Link) ควรมีลักษณะตัวอักษรที่เน้นข้อความ เช่น ใส่สีสัน ขีดเส้นใต้ข้อความ และควรหลีกเลี่ยงการเน้นด้วยสีเขียวบนพื้นสีแดง เพราะจะทำให้ตัวอักษรมีสีสันที่ไม่น่าอ่าน • เน้นเนื้อความที่เป็นจุดสำคัญด้วยการทำแถบสีที่ข้อความนั้นๆ แต่ไม่ควรให้เหมือน Text Link หรือข้อความบนปุ่มกด (Button)

  23. การจัดวางข้อความสำหรับการอ่าน (Fields For Reading) • จัดวางข้อความสำคัญๆ แต่ละหัวข้อให้อยู่บนจอภาพเดียวกัน • แบ่งเนื้อความอธิบายเป็นส่วนๆ แยกย่อยกันไปในแต่ละย่อหน้า • ใช้ตัวอักษรที่อ่านง่าย และมีขนาดของตัวอักษรไม่ใหญ่หรือเล็กจนเกินไป • เชื่อมโยงความสัมพันธ์ของข้อความให้ง่ายต่อการเข้าถึงข้อมูลที่ต้องการได้อย่างรวดเร็ว

  24. สัญลักษณ์และภาพสัญลักษณ์ (Symbols And Icon) • สัญลักษณ์ (Symbols) เป็นการสร้างภาพแทนข้อความต่างๆ เพื่อบ่งบอกการทำงานของคอมพิวเตอร์ในขณะนั้นหรือใช้เตือนเพื่อบอกสิ่งที่ควรกระทำ ตัวอย่างเช่น เมื่อมีรูปนาฬิกาทรายปรากฏบนจอภาพคอมพิวเตอร์ • สำหรับงานด้านมัลติมีเดียมักจะใช้สัญลักษณ์ร่วมกับข้อความ เพื่อบอกความหมายของสัญลักษณ์นั้นๆ ส่วน “ไอคอน (Icon)” หมายถึงภาพสัญลักษณ์ที่ใช้ใส่คอมพิวเตอร์ เช่น รูปถังขยะ และรูปนาฬิกาทราย เป็นต้น • สัญลักษณ์ในงานด้านมัลติมีเดียจะมีรูปแบบและความหมายประจำตัว ซึ่งบางสัญลักษณ์มีการใช้กันอย่างแพร่หลายจนทุกคนเข้าใจความหมายได้เป็นอย่างดี

  25. แสดงสัญลักษณ์และภาพสัญลักษณ์ (ไอคอน) ที่ใช้ทั่วไป แสดงสัญลักษณ์ 12 ราศี

  26. ภาพสัญลักษณ์ • งานด้านมัลติมีเดียยังมีการใช้งานสัญลักษณ์ไม่มากนัก ซึ่งสัญลักษณ์ที่ถูกนำไปใช้ส่วนใหญ่จะมีความหมายเป็นสากล ดังตัวอย่างในตารางแสดงให้เห็นถึงสัญลักษณ์ในรูปแบบต่างๆ ตามแต่วัตถุประสงค์ของการใช้งาน

  27. เครื่องมือสำหรับสร้างและแก้ไขรูปแบบของตัวอักษรเครื่องมือสำหรับสร้างและแก้ไขรูปแบบของตัวอักษร • เครื่องมือที่ใช้ในการสร้างรูปแบบและลักษณะของตัวอักษรนั้น จะใช้สำหรับสร้างลักษณะพิเศษที่เป็นเอกลักษณ์เฉพาะของแต่ละงานที่ผลิตหรือสร้างเครื่องหมายการค้า ซึ่งมีมากมายหลายโปรแกรม เช่น ResEdit, Fontographer และ FontMonger เป็นต้น สำหรับใช้งานบนเครื่องแมคอินทอช Type-Designer สำหรับใช้งานบนวินโดว์ และ FontChameleon ที่สามารถใช้งานบนเครื่องแมคอินทอชและระบบปฏิบัติการวินโดว์ได้

  28. การออกแบบตัวอักษรด้วยโปรแกรม Fontographer

  29. เครื่องมือสำหรับสร้างและแก้ไขรูปแบบของตัวอักษร (ต่อ) • ในการสร้างตัวอักษรให้สวยงาม จะต้องใช้เครื่องมือที่มีความสามารถในการย่อขยาย ปรับเฉดสี ปรับแสงเงา และสามารถปรับขอบของตัวอักษรให้เรียบ ซึ่งการสร้างตัวอักษรด้วยโปรแกรมกราฟิกต่างๆ สามารถเลือกเอารูปแบบอักษรที่โปรแกรมได้จัดเตรียมไว้ มาดัดแปลงใช้งานและปรับปรุงเป็นตัวอักษรกราฟิกที่สวยงามได้ • โปรแกรมเกี่ยวกับงานทางด้านกราฟิกมากมาย ตัวอย่างเช่น โปรแกรม Photoshop สำหรับใช้สร้างและปรับแต่งตัวอักษรให้เกิดความสวยงามได้อย่างง่ายดาย ไม่ว่าจะเป็นเรื่องของการจัดแต่งรูปลักษณ์ แสงเงา หรือแม้แต่เฉดสีบนพื้นต่างๆ

  30. การปรับแต่งข้อความด้วยโปรแกรม Photoshopและ Cool 3D

  31. เครื่องมือสำหรับสร้างและแก้ไขรูปแบบของตัวอักษร (ต่อ) • ยังมีโปรแกรมสำหรับออกแบบอีกประเภทหนึ่งทีสามารถทำให้ตัวอักษรมีความลึก และมุมมองกระทบของแสงได้หลายทิศทางในลักษณะของภาพ 3 มิติ ได้แก่โปรแกรม Broderbund’s TypeStyler, RayDream’s Adddepth 2, Cool 3d, Vertigo 3d และ Plug-Ins ของโปรแกรม Photoshop เป็นต้น ซึ่งโปรแกรมเหล่านี้นอกจากจะมีคุณสมบัติในการปรับแต่งข้อความหรือตัวอักษรให้เกิดความสวยงามและน่าสนใจมากยิ่งขึ้นแล้วยังได้เพิ่มขีดความสามารถในการปรับแต่งพื้นผิว เฉดสี แสงตกกระทบ และการหมุนรอบได้ทั่วทิศทางได้อีกด้วย เหมาะสำหรับการนำเสนอชิ้นงานที่ต้องการความละเอียดสูงด้านการโฆษณาสินค้าและบริการ หรือจัดทำเป็นสื่อการเรียนการสอนในลักษณะเสมือนจริง (Virtual Reality)

  32. แบบฝึกหัดท้ายบท • หาเว็บไซต์ที่ใช้ข้อความแปลกๆ สวยงาม • ให้สร้างข้อความแปลกๆ เป็นชื่อตัวเอง เลขที่ เอก หมู่ ด้วยโปรแกรม Photoshop • ให้สร้างข้อความเหมือนตัวอย่างด้านขวามือ เป็นชื่อตัวเอง ด้วย WordArt ของโปรแกรม Word • ทำลงไมโครซอฟต์เวิร์ด พิมพ์เลขที่และชื่อตนเองไว้บรรทัดแรก ตั้งชื่อไฟล์ว่า (เลขท้ายรหัส นศ.4 ตัว)(ชื่อ) เช่น 1023สมชาย • ส่งอีเมล์แนบไฟล์เวิร์ดไปที่ faasppp@ku.ac.thในหัวเรื่อง “งาน2” • ผู้ใดไม่ทำตามนี้ จะไม่ตรวจให้ นายบังคม นิลรักษ์ เลขที่ 9 เอกคอมพิวเตอร์

More Related