1
2
วัตถุประสงค์ 1. พืไอพัฒนาฟอนต์ AAA-Watin-new พิไมติม 2. พืไอออกบบสร้างสรรค์ฟ้อนต์฿หม่ ด้วยลายมือของตนอง 3. พืไอสร้างทักษะ฿นการออกบบละดัดปลงฟ้อนต์฿ห้สวยงาม 4. นาฟ้อนต์ทีไสรใจสมบูรณ์เป฿ช้฿นการรียงพิมพ์ตัวอักษรเด้จริง 6. พืไอรียนรู้วิธีการสร้างฟ้อนต์อย่างละอียด ละสามารถทาเด้จริง
3
กระบวนการทางาน Goal ( ป้าหมาย ) พัฒนาอักษรชุด AAA-Watin-new ต่อจากดิมดยทา฿ห้ป็นฟอนต์ลายมือของตนอง
Tools ( ครืไองมือหลัก ) - ทมพลตส้น Grid สาหรับขียนฟอนต์ลายมือ - ปากกาหมึกดา - ครืไองคอมพิวตอร์ - ครืไองกราดภาพ - ปรกรม High-Logic FontCreator - ปรกรม Adobe Photoshop
Do Did Done Do : มีขัๅนตอนละหลักฐานสดง ขัๅนตอนการออกบบฟอนต์ลายมือ ทัๅงภาษาเทย - อังกฤษ ละทาด้วยปรกรม High-Logic FontCreator ขัๅนตอนทีไ 1. ดาวน์หลดทมพลตทีไป็น Grid สาหรับขียนฟ้อนต์ลายมือ ปริๆน ละขียนตัวอักษรล฿น ตาราง
ภาพทีไ 1 สดงตารางทมพลตสาหรับปริๆน พืไอนนามาขียนตัวอักษร ทีไมา https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWFpbnxhcnRpMj MwNXxneDo0OTM5MDAzZWFlNTAxMjc
4
ขัๅนตอนทีไ 2 สกนภาพทีไขียนลง฿นคอมพิวตอร์
ภาพทีไ 2 สดงภาพทมพลดตัวอักษรทีไสกนล้ว ทีไมา นาย ธีระพงษ์ ชมชืไน 2556 ขัๅนตอนทีไ 3 ปิดเฟล์สกน฿นปรกรม Photoshop ลือกครืไองมือ Crop Tool พืไอครอบตัดตัวอักษร ทีไต้องการ เปทีไ Select > Color Range ลือกพืๅนทีไสีขาวกด OK ล้วกด Ctrl + Shift + I ล้วกด Ctrl + x พืไอตัดครงสร้างตัวอักษรออกมา
ภาพทีไ 3 สดงวิธีการครอบตัดทมพจตัวอักษร ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
5
ขัๅนตอนทีไ 4 นาเปวาง฿นปรกรม FontCreator ทีไลือกปิดเฟล์ทีไราต้องการจะก้เขเว้ซึไงกใคือฟอนต์ AAA-Watin-new ล้วดัดปลง ย่อ -ขยาย฿ห้ตัวอักษรเด้ตามขนาด ละรูปบบทีไต้องการ ทาจนครบทุก ตัวอักษรตามตารางรหัสรูปอักขระมาตรฐานยูนิค้ดประจาตัวอักษรภาษาเทย ละภาษาอังกฤษ ดังนีๅ
# $ % & ' ( ) * + , . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D
notdef space numbersigh dollar pencent ampersand quotesingle parenleft parenright asterisk plus comma hyphen period slash zero one two three four five six seven eight nine colon semicolon less equal greater question at A B C D
6
E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l
E F G H I J K L M N O P Q R S T U V W X Y Z bracketleft backslash bracketright asciicircum underscore grave a b c d e f g h i j k l
7
m n o p q r s t u v w x y z { } ~ ‚ ! ¿ ‘ ’ ‚ ‛ © ® ™ • – — ‚ „
า ก๎ ¼ ½
m n o p q r s t u v w x y z braceleft braceright asciitilde quotedbl exclam questiondown quoteleft quoteright quotedblleft quotedblright diresis copyright registered trademark bullet endash emdash quotesinglbase quotedblbase uni007F NULL nonmarkingreturn uni0E33 uni0E4E.alt1 onequarter oneharf
8
¾ ก ข ฃ ค ฅ ฆ ง จ ฉ ช ซ ฌ ญ ฎ ฏ ฐ ฑ ฒ ณ ด ต ถ ท ธ น บ ป ผ ฝ พ ฟ ภ ม ย ร ฤ ล ฦ
threequarters uni0E00 uni0E01 uni0E02 uni0E03 uni0E04 uni0E05 uni0E06 uni0E07 uni0E08 uni0E09 uni0E0A uni0E0B uni0E0C uni0E0D uni0E0E uni0E0F uni0E10 uni0E11 uni0E12 uni0E13 uni0E14 uni0E15 uni0E16 uni0E17 uni0E18 uni0E19 uni0E1A uni0E1B uni0E1C uni0E1D uni0E1E uni0E1F uni0E20 uni0E21 uni0E22 uni0E23 uni0E24 uni0E25 uni0E26
9
ว ศ ษ ส ห ฬ อ ฮ ฯ ะ กั า า กิ กี กึ กื กุ กู กฺ ฿ เ แ โ กใ ก่ ก้ ก๊ ก๋ ก์ ก ก๎ ๏ ๐ ๑ ๒
uni0E27 uni0E28 uni0E29 uni0E2A uni0E2B uni0E2C uni0E2D uni0E2E uni0E2F uni0E30 uni0E31 uni0E32 uni0E33 uni0E34 uni0E35 uni0E36 uni0E37 uni0E38 uni0E39 uni0E3A uni0E3F uni0E40 uni0E41 uni0E42 uni0E43 uni0E44 uni0E45 uni0E46 uni0E47 uni0E48 uni0E49 uni0E4A uni0E4B uni0E4C uni0E4D uni0E4E uni0E4F uni0E50 uni0E51 uni0E52
10
๓ ๔ ๕ ๖ ๗ ๘ ๙ ๚ ๛ กิ กี กึ กื ก่ ก้ ก๊ ก๋ ก์ ก่ ก้ ก๊ ก๋ ก์ กั ก กใ ก่ ก้ ก๊ ก๋ ก์ กุ กู กฺ ฎ ฏ ฬ
uni0E53 uni0E54 uni0E55 uni0E56 uni0E57 uni0E58 uni0E59 uni0E5A uni0E5B zerowidthnonjoiner uni0E10.alt1 uni0E34.alt1 uni0E35.alt1 uni0E36.alt1 uni0E37.alt1 uni0E48.alt1 uni0E49.alt1 uni0E4A.alt1 uni0E4B.alt1 uni0E4C.alt1 uni0E48.alt2 uni0E49.alt2 uni0E4A.alt2 uni0E4B.alt2 uni0E4C.alt2 uni0E0D.alt1 uni0E31.alt1 uni0E4D.alt1 uni0E47.alt1 uni0E48.alt3 uni0E49.alt3 uni0E4A.alt3 uni0E4B.alt3 uni0E4C.alt3 uni0E38.alt1 uni0E39.alt1 uni0E3A.alt1 uni0E0E.alt1 uni0E0F.alt1 uni0E2C.alt1
11
uni0E4F.liga uni0E24.liga uni0E26.liga .notdef AAA_Logo .notdef Euro divide multiply yen bar fi fl
ฤแ ฤแ
€ ÷ X ¥ | fi fl
ภาพทีไ 4 สดงการวางตัวอักษรหลังจากมีการตัดออกมาจาปรกรม Photoshop ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
12
ภาพทีไ 5 สดงตัวอักษรทีไดัดรียบร้อยสมบูรณ์ ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
ขัๅนตอนทีไ 5 มืไอทาจนครบทุกตัวอักษรล้ว กใตรวจชใคช่องว่าง ระยะห่างของตัวอักษรดยการกดปุ่ม F5 ล้วทดลองพิมพ์ข้อความต่างโลงเป
ภาพทีไ 6 สดงภาพตัวอักษรต่างโ ทีไดัดล้ว฿นปรกรม FontCerater ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
13
ภาพทีไ 7 สดงการรียงพิมพ์ตัวอักษรทีไดัดสรใจล้ว ด้วยอักษรขนาด 16 ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
ภาพทีไ 8 สดงการรียงพิมพ์ตัวอักษรภาษาเทยทีไดัดสรใจล้ว ด้วยอักษรขนาด 50 ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
14
ภาพทีไ 9 สดงการรียงพิมพ์ตัวอักษรภาษาอังกฤษทีไดัดสรใจล้ว ด้วยอักษรขนาด 70 ทีไมา นาย ธีระพงษ์ ชมชืไน 2556 ซึไงจากรูปภาพข้างต้น จะหในเด้ว่าตัวอักษรต่างโ ทัๅงภาษาอังกฤษละภาษาเทยนัๅน ยังมีความหนาละ บางเม่ท่ากัน จึงต้องทาการปรับก้ ฿ห้ตักอักษรมีความถูกต้อง ดยการลือกฟอนต์ตัวทีไราต้องการ เปทีไครืไองมือ Tool > Glyph Transformer จากนัๅนกดลือกทีไ Metrich > Bearings กดปุ่มลูกศรพืไอ Add feature to script ล้วปรับตัๅงค่าตามความหมาะสม
ภาพทีไ 10 สดงหน้าต่าง Transform wrizard ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
15
ภาพทีไ 11 สดง฿ห้หในว่าตัว m มีระยะห่างของชาญด้านหลังน้อยกินเป ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
ภาพทีไ 12 หลังจากก้เขดยการปรับช่องว่างระหว่างชาญหลัง฿ห้ลดลง ทา฿ห้ ตัวอักษรดูอ่านง่าย ละ มีระยะห่างทีไพอดีมากขึๅน ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
16
ภาพทีไ 13 สดง฿ห้หในว่า ตักอักษรภาษาอังกฤษบางตัว คือตัว L a ละ q นัไน มีชาญหลังทีไห่างจาก ตัวอักษรอืไนโมากกินเป ทา฿ห้ตัวอักษรอ่านยาก ละเม่สวยงาม ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
ภาพทีไ 14 สดงการปรับปรุงก้เขตัวอักษร ทา฿ห้ช่องว่างต่างโ ลดน้อยลง ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
17
ภาพทีไ 15 สดง฿ห้หในว่าตัวอักษรภาษาอังกฤษบางตัวมีขนาดความหนา -บาง เม่ท่ากัน ทา฿ห้เม่ สวยงาม ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
ภาพทีไ 16 สดง฿ห้หในการก้ ละจัดรียงตัวอักษรภาษาอังกฤษ฿หม่ ทา฿ห้มีความสวยงาม ละอ่าน ง่ายมากยิไงขึๅน ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
18
ภาพทีไ 17 สดงตัวลข ละสัญลักษณ์ต่างโ ซึไงมีขนาดบาง ละหนาเม่ท่ากัน ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
ภาพทีไ 18 สดง฿ห้หในว่า มืไอก้ตัวลข ตัวอักษร ละสัญลักษณ์ต่างโล้ว มีความห่างของชาญหน้า ชาญหลัง ละมีความท่ากันของส้นมากขึๅน ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
19
ภาพทีไ 19 สดงตัวอักษรภาษาเทย ซึไงอังษรบางตัวยังมีขนาดเม่ท่ากัน ทา฿ห้เม่สวยงาม฿นการ รียงพิมพ์ ช่น ด ต ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
ภาพทีไ 20 สดงอักษร ด ก่อนการก้เข
20
ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
ภาพทีไ 21 สดงอักษร ด หลังการก้เขปรับต่งรูปร่าง ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
ภาพทีไ 22 สดงอักษร ต ก่อนการก้เขปรับต่งรูปร่าง ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
21
ภาพทีไ 23 สดงตัวอักษรภาษาเทยหลังจากปรับต่งล้ว ทา฿ห้ตัวอักษรมีความสวยงาม อ่านง่าย มากยิไงขึๅน ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
ภาพทีไ 24 สดงภาพการรียงพิมพ์ตัวอักษรภาษาเทยทีไชาญหน้า ละชาญหลังมีการจัดรียงทีไเม่ ท่ากัน ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
22
ภาพทีไ 25 สดงภาพการรียงพิมพ์ตัวอักษรภาษาเทยทีไมีการจัดรียง฿หม่ด้วยฟอนต์ขนาด 50 ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
ภาพทีไ 26 สดงภาพการรียงพิมพ์ตัวอักษรภาษาเทยทีไมีการจัดรียง฿หม่ด้วยฟอนต์ขนาด 16 ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
23
ขัๅนตอนทีไ 6. มืไอเด้ฟอนต์ทีไสวยงามล้ว กใปลีไยนชืไอ ละปรับปลีไยนข้อมูลต่างโดยคงข้อมูลดิมของผู้ ถือลิขสิทธิ์เว้ ดยเปทีไ Format > Naming ล้วก้เขข้อมูลต่างโ ดยพิไมชืไอราข้าเป ทัๅงพลตฟอร์มบบ Windows Uincode Unicode BMP (UCS-2) ละ Macintosh Roman
ภาพทีไ 27 สดงข้อมูลต่างโ ก่อนการปลีไยนปลง ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
ภาพทีไ 28 สดงข้อมูลต่างโ หลังการการปลีไยนปลง ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
24
ภาพทีไ 29 สดงข้อมูลต่างโ หลังการการปลีไยนปลงขัๅน Advanced…. ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
ภาพทีไ 30 สดงตัวอักษร CRU-Teerapong ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
25
Did : ผลทีไเด้รับ จะเด้ฟอนต์ลายมือภาษาเทยละภาษาอังกฤษของราอง
26
27
Done : นาเปทดสอบ ละ฿ช้ประยชน์ การนามาติดตัๅงเดรฟ์ C > WINDOWS > Fonts พืไอ฿ช้ป็นบบพิมพ์฿นรายงานของวิชาการออกบบ ตัวอักษรพืไอการพิมพ์฿นปรกรมสร้างอกสารต่างโ
ภาพทีไ 31 สดงฟลดอร์ทีไจะติดตัๅงฟอนต์ลายมือลง฿นครืไอง ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
28
ภาพทีไ 32 สดงฟอนต์ทีไติดตัๅงลง฿นครืไองล้ว ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
ภาพทีไ 33 สดงการนาฟอนต์ทีไทาสรใจล้วเปรียงพิมพ์฿นปรกรม ทีไมา นาย ธีระพงษ์ ชมชืไน 2556
29
ข้อมูลบบตัวพิมพ์ (Font Information) ชืไอบบตัวพิมพ์ (Typeface/Font Name) ชืไอ CRU-Teerapong-Hand-Written ประภทของเฟล์ตัวพิมพ์ OpenType Layout, TrueType Outlines ออกบบดย นาย ธีระพงษ์ ชมชืไน รหัสนักศึกษา 5411307100 วิชาการออกบบตัวอักษรพืไอการพิมพ์ ARTD2304 กลุ่มรียน 102 สาขาวิชาศิลปกรรม มหาวิทยาลัยราชภัฏจันทรกษม กรุงทพมหานคร มืไอวันทีไ 13 ดือน มกราคม พศ. 2556
ตัวอย่างรูปบบตัวอักขระภาษาลาติน (Latin Characters) ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 abcdefghijklmnopqrstuvwxyz!@#%^&*()_+|{}[]:"<>?;'",./\*-.=;'
ตัวอย่างรูปบบตัวอักขระภาษาเทย (Thai Characters) กขฃคฅฆงจฉชซฌญฎฏฐฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮ๐๑๒๓๔๕๖๗๘๙ โแอะอาอุึอูอิอีอึอือ่อ้อ๊อ๋อ์อา฿เ?
ข้อความสาหรับการทดสอบการพิมพ์รับคาสัไงพิมพ์ ละพืไอสดงตาหน่งการ พิมพ์รูปอักขระทีไออกบบ - จัดช่องว่าง ช่องเฟระหว่างรูปอักขระละระหว่างคา ทัๅงชุดคือภาษาอังกฤษกับภาษาเทย In typography, a font is traditionally defined as a quantity of sorts composing a complete character set of a single size and style of a particular typeface. For example, the complete set of all the characters for ‚9-point Bulmer‛ is called a font, and the ‚10-point Bulmer‛ would be another separate font, but part of the same font family, whereas ‚9point Bulmer boldface‛ would be another font in a different font family of the same typeface. One individual font character might be referred to as a ‚piece of font‛ or a ‚piece of type‛.Font nowadays is frequently used synonymously with the term typeface, although they had clearly understood different meanings before the advent of digital typography and desktop publishing.
30
฿นทางวงการพิมพ์นัๅนกล่าวถึงฟ้อนต์ดยทัไวเปว่า หมายถึงตัวอักษรทีไ฿ช้ป็นบบตัวรียงพิมพ์นืๅอหา ทีไ มีขนาดละรูปบบป็นชุดดียวกัน ยกตัวอย่างช่นบบตัวอักษรทีไ฿ช้฿นการรียงพิมพ์นืๅอหาทีไท่านกาลัง อ่านอยู่นีๅ มีชืไอบบตัวอักษรชุดนีๅว่า บางพูด( Bangpood) ทีไประกอบด้วยรูปอักขระ( Glyphs) ของตัว พยัญชนะ ( Consonants) สระ(Vowels) วรรณยุกต์ ( Tones) ครืไองหมายสัญลักษณ์( Signs and Symbols) วรรคตอน(Punctuation) อักษรภาษาเทย ภาษาอังกฤษ คากลอนเทยสาหรับ฿ช้พิมพ์ทดสอบผลการออกบบ สดงครงสร้างของตัวอักษร การจัด ระดับตาหน่งรูปพยัญชนะ สระ วรรณยุกต์ ครืไองหมายวรรคตอน การจัดระยะช่องเฟรอบรูปอักขระ หรือฟ้อนต์ส่วนภาษาเทย ทีไสร้าง บันทึก ติดตัๅง ละหรือทดสอบ฿นปรกรมฟ้อนต์ครีอตอร์ละัหรือ ด้วยปรกรมประยุกต์อืไนโ฿นระบบ ขามัก฿ช้คากลอนนีๅ ฿ห้นักศึกษาคัดลอกเปวาง ปลีไยนป็นฟ้อนต์ทีไ ราทา ตรวจสอบระยะช่องเฟกัๅนหน้า-หลัง การประสมคาตาหน่งสระละวรรณยุกต ?ว่าตรงตาหน่ง ตามหลักเวยกรณ์ของเทยหรือ฿หม่ละบันทึกป็นหลักฐานสดง฿นรายงาน ภาษาอังกฤษ฿ห้ตรวจสอบดู ด้วยตาองว่าระยะป็นอย่างเร ล้วเปก้เข฿นตารางฟ้อนต์ ละทดสอบ฿หม่ ซๅาโ จนน่฿จว่าป็นระยะละ ตาหน่งทีไถูกต้องล้ว
คากลอนตรวจสอบบบตัวอักษร ตาหน่งพิมพ์ผสมคาเทย "ป็นมนุษย์สุดประสริฐลิศคุณค่า กว่าบรรดาฝูงสัตว์ดรัจฉาน จงฝ่าฟ๎นพัฒนาวิชาการ อย่าล้างผลาญ ฤแข่นฆ่าบีฑา฿คร เม่ถือทษกรธช่งซัด ฮึดฮัดด่า หัดอภัยหมือนกีฬา อัชฌาสัย ปฏิบัติประพฤติกฎ กาหนด฿จ พูดจา฿ห้จ๊ะโจ๋า น่าฟ๎งอยฯ"
คาทีไควรนามาทดสอบคือ วิํูชน ภูปตมี กตัญํู กลืไอน กลืๅอน หมรง กระปรง นๅา฿จ
31
อ้างอิง https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWFpbnxhcnRpMj MwNXxneDo0OTM5MDAzZWFlNTAxMjc http://thaifont.info/?p=71 http://en.wikipedia.org/wiki/ASCII