1
2
วัตถุประสงค์ 1. เพื่อพัฒนาฟอนต์ AAA-Watin-new เพิ่มเติม 2. เพื่อออกแบบสร้างสรรค์ฟ้อนต์ใหม่ ด้วยลายมือของตนเอง 3. เพื่อสร้างทักษะในการออกแบบและดัดแปลงฟ้อนต์ให้สวยงาม 4. นาฟ้อนต์ที่เสร็จสมบูรณ์ไปใช้ในการเรียงพิมพ์ตัวอักษรได้จริง 6. เพื่อเรียนรู้วิธีการสร้างฟ้อนต์อย่างละเอียด และสามารถทาได้จริง กระบวนการทางาน Goal ( เป้าหมาย ) พัฒนาอักษรชุด AAA-Watin-new ต่อจากเดิมโดยทาให้เป็นฟอนต์ลายมือของตนเอง Tools ( เครื่องมือหลัก ) - เทมเพลตเส้น Grid สาหรับเขียนฟอนต์ลายมือ - ปากกาหมึกดา - เครื่องคอมพิวเตอร์ - เครื่องกราดภาพ - โปรแกรม High-Logic FontCreator - โปรแกรม Adobe Photoshop Do Did Done Do : มีขั้นตอนและหลักฐานแสดง ขั้นตอนการออกแบบฟอนต์ลายมือ ทั้งภาษาไทย - อังกฤษ และทาด้วยโปรแกรม High-Logic FontCreator ขั้นตอนที่ 1. ดาวน์โหลดเทมเพลตที่เป็น Grid สาหรับเขียนฟ้อนต์ลายมือ ปริ๊น และเขียนตัวอักษรลในตาราง
3
ภาพที่ 1 แสดงตารางเทมเพลตสาหรับปริ๊น เพื่อนนามาเขียนตัวอักษร ที่มา https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWF pbnxhcnRpMjMwNXxneDo0OTM5MDAzZWFlNTAxMjc ขั้นตอนที่ 2 สแกนภาพที่เขียนลงในคอมพิวเตอร์
4
ภาพที่ 2 แสดงภาพเทมเพลดตัวอักษรที่แสกนแล้ว ที่มา น.ส.ชลธิชา อุปลี ,2556 ขั้นตอนที่ 3 เปิดไฟล์สแกนในโปรแกรม Photoshop เลือกเครื่องมือ Crop Tool เพื่อครอบตัดตัวอักษรที่ต้องการ ไปที่ Select > Color Range เลือกพื้นที่สีขาวกด OK แล้วกด Ctrl + Shift + I แล้วกด Ctrl + x เพื่อตัดโครงสร้างตัวอักษรออกมา
5
ภาพที่ 3 แสดงวิธีการครอบตัดเทมเพจตัวอักษร ที่มา น.ส.ชลธิชา อุปลี,2556 ขั้นตอนที่ 4 นาไปวางในโปรแกรม FontCreator ที่เลือกเปิดไฟล์ที่เราต้องการจะแก้ไขไว้ซึ่งก็คือฟอนต์ AAA-Watin-new แล้วดัดแปลง ย่อ-ขยายให้ ตัวอักษรได้ตามขนาด และรูปแบบที่ต้องการ ทาจนครบทุกตัวอักษรตามตารางรหัสรูปอักขระมาตรฐานยูนิโค้ดประจาตัวอักษรภาษาไทย และ ภาษาอังกฤษ ดังนี้
# $ % & ' ( ) * + , . / 0
notdef space numbersigh dollar pencent ampersand quotesingle parenleft parenright asterisk plus comma hyphen period slash zero
6
1 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
one 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
7
U V W X Y 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
U V W X Y 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
8
y z { } ~ “ ! ¿ ‘ ’ “ ” © ® ™ • – — ‚ „
า ก๎ ¼ ½ ¾ ก ข ฃ ค ฅ ฆ
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 threequarters uni0E00 uni0E01 uni0E02 uni0E03 uni0E04 uni0E05 uni0E06
9
ง จ ฉ ช ซ ฌ ญ ฎ ฏ ฐ ฑ ฒ ณ ด ต ถ ท ธ น บ ป ผ ฝ พ ฟ ภ ม ย ร ฤ ล ฦ ว ศ ษ ส
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 uni0E27 uni0E28 uni0E29 uni0E2A
10
ห ฬ อ ฮ ฯ ะ กั า า กิ กี กึ กื กุ กู กฺ ฿ เ แ โ ใ ไ ๅ ๆ ก็ ก่ ก้ ก๊ ก๋ ก์ ก ก๎ ๏ ๐ ๑ ๒
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
11
๓ ๔ ๕ ๖ ๗ ๘ ๙ ๚ ๛ กิ กี กึ กื ก่ ก้ ก๊ ก๋ ก์ ก่ ก้ ก๊ ก๋ ก์ กั ก ก็ ก่ ก้ ก๊ ก๋ ก์ กุ กู
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
12
กฺ ฎ ฏ ฬ ฤๅ ฤๅ
€ ÷ X ¥ | fi fl
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
ภาพที่ 4 แสดงการวางตัวอักษรหลังจากมีการตัดออกมาจาโปรแกรม Photoshop ที่มา น.ส.ชลธิชา อุปลี ,2556
13
ภาพที่ 5 แสดงตัวอักษรที่ดัดเรียบร้อยสมบูรณ์ ที่มา น.ส.ชลธิชา อุปลี,2556 ขั้นตอนที่ 5 เมื่อทาจนครบทุกตัวอักษรแล้ว ก็ตรวจเช็คช่องว่าง ระยะห่างของตัวอักษรโดยการกดปุ่ม F5 แล้วทดลองพิมพ์ข้อความต่างๆลงไป
ภาพที่ 6 แสดงภาพตัวอักษรต่างๆ ที่ดัดแล้วในโปรแกรม FontCerater ที่มา น.ส.ชลธิชา อุปลี ,2556
14
ภาพที่ 7 แสดงการเรียงพิมพ์ตัวอักษรที่ดัดเสร็จแล้ว ด้วยอักษรขนาด 16 ที่มา น.ส.ชลธิชา อุปลี,2556
ภาพที่ 8 แสดงการเรียงพิมพ์ตัวอักษรภาษาไทยที่ดัดเสร็จแล้ว ด้วยอักษรขนาด 75 ที่มา น.ส.ชลธิชา อุปลี,2556
15
ภาพที่ 9 แสดงการเรียงพิมพ์ตัวอักษรภาษาอังกฤษที่ดัดเสร็จแล้ว ด้วยอักษรขนาด 75 ที่มา น.ส.ชลธิชา อุปลี ,2556
ภาพที่ 10 ซึ่งจากรูปภาพข้างต้น จะเห็นได้ว่าตัวอักษรต่างๆทั้งภาษาอังกฤษและภาษาไทยนั้น ยังมีความหนาและบางไม่เท่ากัน จึงต้องทาการปรับแก้ ให้ตักอักษรมีความถูกต้อง โดยการเลือกฟอนต์ตัวที่เราต้องการไปที่เครือ่ งมือ Tool > Glyph Transformer จากนั้นกดเลือกที่Metrich > Bearings กดปุ่มลูกศรเพื่อ Add feature to script แล้วปรับตั้งค่าตามความเหมาะสม ที่มา น.ส.ชลธิชา อุปลี,2556
16
ภาพที่ 11 แสดงหน้าต่าง Transform wrizard ที่มา น.ส.ชลธิชา อุปลี,2556
ภาพที่ 12 เป็นการปรับความห่่างของตัวอักษรแบบง่ายๆโดยการปรับเส้นแดงข้างหลัง Right Bearing ตามความเหมาะสม ที่มา นางสาว ชลธิชา อุปลี,2556
17
ภาพที่ 13 เป็นการแสดงการจัดเรียงตัวอักษรที่ได้ทาการปรับปรุงแล้ว จะเห็นว่าตัวอักษรเรียงกันเรียบร้อยที่มา นางสาว ชลธิชา อุปลี,2556
ขั้นตอนที่ 6. เมื่อได้ฟอนต์ที่สวยงามแล้ว ก็เปลี่ยนชื่อ และปรับเปลีย่ นข้อมูลต่างๆโดยคงข้อมูลเดิมของผูถ้ ือลิขสิทธิ์ไว้ โดยไปที่ Format > Naming แล้วแก้ไขข้อมูลต่างๆโดยเพิ่มชื่อเราข้าไป ทั้งเพลตฟอร์มแบบ Windows Uincode Unicode BMP (UCS-2) และ Macintosh Roman
ภาพที่ 14 แสดงข้อมูลต่างๆ ก่อนการเปลี่ยนแปลง ที่มา น.ส.ชลธิชา อุปลี,2556
18
ภาพที่ 15 แสดงข้อมูลต่างๆ หลังการการเปลี่ยนแปลง ที่มา น.ส.ชลธิชา อุปลี,2556
ภาพที่ 16 แสดงข้อมูลต่างๆ หลังการการเปลี่ยนแปลงขั้น Advanced…. ที่มา น.ส.ชลธิชา อุปลี,2556
19
ภาพที่ 17 แสดงตัวอักษร CRU-conticha-Hand-Written ที่มา น.ส.ชลธิชา อุปลี,2556 Did : ผลที่ได้รับ จะได้ฟอนต์ลายมือภาษาไทยและภาษาอังกฤษของเราเอง Done : นาไปทดสอบ และใช้ประโยชน์ การนามาติดตั้งไดรฟ์ C > WINDOWS > Fonts เพื่อใช้เป็นแบบพิมพ์ในรายงานของวิชาการออกแบบ ตัวอักษรเพื่อการพิมพ์ในโปรแกรมสร้างเอกสารต่างๆ
ภาพที่ 18 แสดงโฟลเดอร์ที่จะติดตั้งฟอนต์ลายมือลงในเครื่อง ที่มา น.ส.ชลธิชา อุปลี,2556
20
ภาพที่ 19แสดงการนาฟอนต์ที่ทาเสร็จแล้วไปเรียงพิมพ์ในโปรแกรม ที่มา น.ส.ชลธิชา อุปลี,2556
21
ข้อมูลแบบตัวพิมพ์ (Font Information) ชื่อแบบตัวพิมพ์ (Typeface/Font Name) ชื่อ CRU-Chonticha-Hand-Written ประเภทของไฟล์ตัวพิมพ์ OpenType Layout, TrueType Outlines ออกแบบโดย นางสาว ชลธิชา อุปลี รหัสนักศึกษา 5411301632 วิชาการออกแบบตัวอักษรเพื่อการพิมพ์ ARTD2304 กลุ่มเรียน 101 สาขาวิชาศิลปกรรม มหาวิทยาลัยราชภัฏจันทรเกษม กรุงเทพมหานคร เมื่อวันที่ 13 เดือน มกราคม พศ. 2556
22
ตัวอย่างรูปแบบตัวอักขระภาษาลาติน (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. ในทางวงการพิมพ์นั้นกล่าวถึงฟ้อนต์โดยทั่วไปว่า หมายถึงตัวอักษรที่ใช้เป็นแบบตัวเรียงพิมพ์เนื้อหาที่มีขนาดและรูปแบบเป็นชุดเดียวกัน ยกตัวอย่างเช่นแบบตัวอักษรที่ใช้ในการเรียงพิมพ์เนื้อหาที่ท่านกาลังอ่านอยู่นี้ มีชื่อแบบตัวอักษรชุดนี้ว่า บางพูด(Bangpood) ที่ประกอบด้วยรูป อักขระ(Glyphs) ของตัวพยัญชนะ (Consonants) สระ(Vowels) วรรณยุกต์ (Tones) เครื่องหมายสัญลักษณ์(Signs and Symbols) วรรคตอน (Punctuation) อักษรภาษาไทย ภาษาอังกฤษ
23
คากลอนไทยสาหรับใช้พิมพ์ทดสอบผลการออกแบบแสดงโครงสร้างของตัวอักษร การจัดระดับตาแหน่งรูปพยัญชนะ สระ วรรณยุกต์ เครือ่ งหมาย วรรคตอนการจัดระยะช่องไฟรอบรูปอักขระหรือฟ้อนต์ส่วนภาษาไทย และหรือทดสอบในโปรแกรมฟ้อนต์ครีเอเตอร์และัหรือด้วยโปรแกรมประยุกต์ อื่นๆในระบบ เขามักใช้คากลอนนี้ ให้นักศึกษาคัดลอกไปวาง เปลี่ยนเป็นฟ้อนต์ที่เราทา ตรวจสอบระยะช่องไฟกั้นหน้า-หลัง การประสมคาตาแหน่งสระและวรรณยุกต์ ว่าตรงตาแหน่งตามหลักไวยกรณ์ของไทย หรือใหม่และบันทึกเป็นหลักฐานแสดงในรายงานภาษาอังกฤษให้ตรวจสอบดูด้วยตาเองว่าระยะเป็นอย่างไร แล้วไปแก้ไขในตารางฟ้อนต์ และทดสอบ ใหม่ ซ้าๆจนแน่ใจว่าเป็นระยะและตาแหน่งที่ถูกต้องแล้ว คากลอนตรวจสอบแบบตัวอักษร ตาแหน่งพิมพ์ผสมคาไทย "เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน จงฝ่าฟันพัฒนาวิชาการ อย่าล้างผลาญ ฤๅเข่นฆ่าบีฑาใคร ไม่ถือโทษโกรธแช่งซัด ฮึดฮัดด่า หัดอภัยเหมือนกีฬา อัชฌาสัย ปฏิบัติประพฤติกฎ กาหนดใจ พูดจาให้จ๊ะๆจ๋า น่าฟังเอยฯ" คาที่ควรนามาทดสอบคือ วิญูชน ภูปเตมี กตัญญู เกลื่อน เกลื้อน โหมโรง กระโปรง น้าใจ
24
ตัวแสดงลักษณะต่างๆของตัวอักษร
ลายมือ
Bold
ลายมือ
Italic
ลายมือ
Bold Italic
ลายมือ
regula
25
อ้างอิง - https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWFpbnxhcnRpMj MwNXxneDo0OTM5MDAzZWFlNTAxMjc - http://thaifont.info/?p=71 - http://en.wikipedia.org/wiki/ASCII