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