คำนำ รำยงำนนี้เป็นส่วนหนึง่ ของวิชำ ARTD2304 เพื่อใช้ในกำรรวบรวมและเผยแพร่ Typography Design ใน Project handwritten ออกแบบโดยใช้โปรแกรม Font creator ในกำรออกแบบฟอนต์ลำยมือของตัวเอง ถ้ำผิดพลำด ประกำรใดขออภัย ณ ที่นี้ด้วย
นำงสำว ชลธิชำ อุปลี
รำยงำน Typography Design (ออกแบบฟอนต์ลำยมือภำษำไทยและอังกฤษ) กลุ่มเรียน101 วิชำ กำรออกแบบเพื่อกำรพิมพ์ (ARTD2304) จัดทำโดย นำงสำว ชลธิชำ อุปลี 5411301632 เสนอ ผู้ช่วยศำสตรำจำรย์ ประชิด ทิณบุตร สำขำวิชำ ศิลปกรรม มหำวิทยำลัยรำชภัฏจันทรเกษม
วัตถุประสงค์ 1. เพื่อพัฒนำฟอนต์ AAA-Watin-new เพิ่มเติม 2. เพื่อออกแบบสร้ำงสรรค์ฟ้อนต์ใหม่ ด้วยลำยมือของตนเอง 3. เพื่อสร้ำงทักษะในกำรออกแบบและดัดแปลงฟ้อนต์ให้สวยงำม 4. นำฟ้อนต์ที่เสร็จสมบูรณ์ไปใช้ในกำรเรียงพิมพ์ตัวอักษรได้จริง 6. เพื่อเรียนรู้วิธีกำรสร้ำงฟ้อนต์อย่ำงละเอียด และสำมำรถทำได้จริง กระบวนกำรทำงำน Goal ( เป้ำหมำย ) พัฒนำอักษรชุด AAA-Watin-new ต่อจำกเดิมโดยทำให้เป็นฟอนต์ลำยมือของตนเอง Tools ( เครื่องมือหลัก ) - เทมเพลตเส้น Grid สำหรับเขียนฟอนต์ลำยมือ - ปำกกำหมึกดำ - เครื่องคอมพิวเตอร์ - เครื่องกรำดภำพ - โปรแกรม High-Logic Font Creator - โปรแกรม Adobe Photoshop
Do Did Done Do : มีขั้นตอนและหลักฐำนแสดง ขั้นตอนกำรออกแบบฟอนต์ลำยมือ ทั้งภำษำไทย - อังกฤษ และทำด้วยโปรแกรม High-Logic FontCreator ขั้นตอนที่ 1. ดำวน์โหลดเทมเพลตที่เป็น Grid สำหรับเขียนฟ้อนต์ลำยมือ ปริ๊น และเขียนตัวอักษรล ในตำรำง
ภำพที่ 1 แสดงตำรำงเทมเพลตสำหรับปริ๊น เพื่อนนำมำเขียนตัวอักษร ที่มำ https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWF pbnxhcnRpMjMwNXxneDo0OTM5MDAzZWFlNTAxMjc ขั้นตอนที่ 2 สแกนภำพที่เขียนลงในคอมพิวเตอร์
ภำพที่ 2 แสดงภำพเทมเพลดตัวอักษรที่แสกนแล้ว ที่มำ น.ส.ชลธิชำ อุปลี ,2556 ขั้นตอนที่ 3 เปิดไฟล์สแกนในโปรแกรม Photoshop เลือกเครื่องมือ Crop Tool เพื่อครอบตัด ตัวอักษรที่ต้องกำร ไปที่ Select > Color Range เลือกพื้นที่สีขำวกด OK แล้วกด Ctrl + Shift + I แล้วกด Ctrl + x เพื่อตัดโครงสร้ำงตัวอักษรออกมำ
ภำพที่ 3 แสดงวิธีกำรครอบตัดเทมเพจตัวอักษร ที่มำ น.ส.ชลธิชำ อุปลี,2556 ขั้นตอนที่ 4 นำไปวำงในโปรแกรม Font Creator ที่เลือกเปิดไฟล์ที่เรำต้องกำรจะแก้ไขไว้ซึ่งก็คือ ฟอนต์ AAA-Watin-new แล้วดัดแปลง ย่อ-ขยำยให้ตัวอักษรได้ตำมขนำด และรูปแบบที่ต้องกำร ทำ จนครบทุกตัวอักษรตำมตำรำงรหัสรูปอักขระมำตรฐำนยูนิโค้ดประจำตัวอักษรภำษำไทย และภำษำอังกฤษ ดังนี้
# $ % & ' ( ) * + ,
notdef space numbersigh dollar pencent ampersand quotesingle parenleft parenright asterisk plus comma
. / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I
hyphen period slash zero 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 U V W X Y Z [ \ ] ^ _ ` a b c d e f
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 m n o p q r s t u v w x y z { } ~ “ ! ¿ ‘ ’ “
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 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 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 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 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
X 짜 | fi fl
multiply yen bar fi fl
ภำพที่ 4 แสดงกำรวำงตัวอักษรหลังจำกมีกำรตัดออกมำจำโปรแกรม Photoshop ที่มำ น.ส.ชลธิชำ อุปลี ,2556
ภำพที่ 5 แสดงตัวอักษรที่ดัดเรียบร้อยสมบูรณ์ ที่มำ น.ส.ชลธิชำ อุปลี,2556 ขั้นตอนที่ 5 เมื่อทำจนครบทุกตัวอักษรแล้ว ก็ตรวจเช็คช่องว่ำง ระยะห่ำงของตัวอักษรโดยกำรกดปุ่ม F5 แล้วทดลองพิมพ์ข้อควำมต่ำงๆลงไป
ภำพที่ 6 แสดงภำพตัวอักษรต่ำงๆ ที่ดัดแล้วในโปรแกรม FontCerater ที่มำ น.ส.ชลธิชำ อุปลี ,2556
ภำพที่ 7 แสดงกำรเรียงพิมพ์ตัวอักษรที่ดัดเสร็จแล้ว ด้วยอักษรขนำด 16 ที่มำ น.ส.ชลธิชำ อุปลี,2556
ภำพที่ 8 แสดงกำรเรียงพิมพ์ตัวอักษรภำษำไทยที่ดัดเสร็จแล้ว ด้วยอักษรขนำด 75 ที่มำ น.ส.ชลธิชำ อุปลี,2556
ภำพที่ 9 แสดงกำรเรียงพิมพ์ตัวอักษรภำษำอังกฤษที่ดัดเสร็จแล้ว ด้วยอักษรขนำด 75 ที่มำ น.ส.ชลธิชำ อุปลี ,2556
ภำพที่ 10 ซึ่งจำกรูปภำพข้ำงต้น จะเห็นได้ว่ำตัวอักษรต่ำงๆทั้งภำษำอังกฤษและภำษำไทยนั้น ยังมี ควำมหนำและบำงไม่เท่ำกัน จึงต้องทำกำรปรับแก้ให้ตักอักษรมีควำมถูกต้อง โดยกำรเลือกฟอนต์ตัวที่เรำ ต้องกำรไปที่เครื่องมือ Tool > Glyph Transformer จำกนั้นกดเลือกทีM่ etrich > Bearings กด ปุ่มลูกศรเพื่อ Add feature to script แล้วปรับตั้งค่ำตำมควำมเหมำะสม ที่มำ น.ส.ชลธิชำ อุปลี,2556
ภำพที่ 11 แสดงหน้ำต่ำง Transform wrizard ที่มำ น.ส.ชลธิชำ อุปลี,2556
ภำพที่ 12 เป็นกำรปรับควำมห่่ำงของตัวอักษรแบบง่ำยๆโดยกำรปรับเส้นแดงข้ำงหลัง Right Bearing ตำมควำมเหมำะสม ที่มำ นำงสำว ชลธิชำ อุปลี,2556
ภำพที่ 13 เป็นกำรแสดงกำรจัดเรียงตัวอักษรที่ได้ทำกำรปรับปรุงแล้ว จะเห็นว่ำตัวอักษรเรียงกัน เรียบร้อยที่มำ นำงสำว ชลธิชำ อุปลี,2556
ขั้นตอนที่ 6. เมื่อได้ฟอนต์ที่สวยงำมแล้ว ก็เปลี่ยนชื่อ และปรับเปลี่ยนข้อมูลต่ำงๆโดยคงข้อมูลเดิม ของผู้ถือลิขสิทธิ์ไว้ โดยไปที่ Format > Naming แล้วแก้ไขข้อมูลต่ำงๆโดยเพิ่มชื่อเรำข้ำไป ทั้งเพลต ฟอร์มแบบ Windows Uincode Unicode BMP (UCS-2) และ Macintosh Roman
ภำพที่ 14 แสดงข้อมูลต่ำงๆ ก่อนกำรเปลี่ยนแปลง ที่มำ น.ส.ชลธิชำ อุปลี,2556
ภำพที่ 15 แสดงข้อมูลต่ำงๆ หลังกำรกำรเปลี่ยนแปลง ที่มำ น.ส.ชลธิชำ อุปลี,2556
ภำพที่ 16 แสดงข้อมูลต่ำงๆ หลังกำรกำรเปลี่ยนแปลงขั้น Advanced…. ที่มำ น.ส.ชลธิชำ อุปลี,2556
ภำพที่ 17 แสดงตัวอักษร CRU-conticha-Hand-Written ที่มำ น.ส.ชลธิชำ อุปลี,2556 Did : ผลที่ได้รับ จะได้ฟอนต์ลำยมือภำษำไทยและภำษำอังกฤษของเรำเอง Done : นำไปทดสอบ และใช้ประโยชน์ กำรนำมำติดตั้งไดรฟ์ C > WINDOWS > Fonts เพื่อใช้ เป็นแบบพิมพ์ในรำยงำนของวิชำกำรออกแบบตัวอักษรเพื่อกำรพิมพ์ในโปรแกรมสร้ำงเอกสำรต่ำงๆ
ภำพที่ 18 แสดงโฟลเดอร์ที่จะติดตั้งฟอนต์ลำยมือลงในเครื่อง ที่มำ น.ส.ชลธิชำ อุปลี,2556
ภำพที่ 19แสดงกำรนำฟอนต์ที่ทำเสร็จแล้วไปเรียงพิมพ์ในโปรแกรม ที่มำ น.ส.ชลธิชำ อุปลี,2556
ข้อมูลแบบตัวพิมพ์ (Font Information) ชื่อแบบตัวพิมพ์ (Typeface/Font Name) ชื่อ CRU-Chonticha ประเภทของไฟล์ตัวพิมพ์ OpenType Layout, TrueType Outlines ออกแบบโดย นำงสำว ชลธิชำ อุปลี รหัสนักศึกษำ 5411301632 วิชำกำรออกแบบตัวอักษรเพื่อกำรพิมพ์ ARTD2304 กลุ่มเรียน 101 สำขำวิชำศิลปกรรม มหำวิทยำลัยรำชภัฏจันทรเกษม กรุงเทพมหำนคร เมื่อวันที่ 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 “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) อักษรภำษำไทย ภำษำอังกฤษ
คำกลอนไทยสำหรับใช้พิมพ์ทดสอบผลกำรออกแบบแสดงโครงสร้ำงของตัวอักษร กำรจัดระดับ ตำแหน่งรูปพยัญชนะ สระ วรรณยุกต์ เครื่องหมำยวรรคตอนกำรจัดระยะช่องไฟรอบรูปอักขระหรือ ฟ้อนต์ส่วนภำษำไทย และหรือทดสอบในโปรแกรมฟ้อนต์ครีเอเตอร์และัหรือด้วยโปรแกรมประยุกต์อื่นๆ ในระบบ เขำมักใช้คำกลอนนี้ ให้นักศึกษำคัดลอกไปวำง เปลี่ยนเป็นฟ้อนต์ที่เรำทำ ตรวจสอบระยะช่องไฟกั้นหน้ำ-หลัง กำรประสมคำตำแหน่งสระและ วรรณยุกต์ ว่ำตรงตำแหน่งตำมหลักไวยกรณ์ของไทยหรือใหม่และบันทึกเป็นหลักฐำนแสดงในรำยงำน ภำษำอังกฤษให้ตรวจสอบดูด้วยตำเองว่ำระยะเป็นอย่ำงไร แล้วไปแก้ไขในตำรำงฟ้อนต์ และทดสอบใหม่ ซ้ำๆจนแน่ใจว่ำเป็นระยะและตำแหน่งที่ถูกต้องแล้ว คำกลอนตรวจสอบแบบตัวอักษร ตำแหน่งพิมพ์ผสมคำไทย "เป็นมนุษย์สุดประเสริฐเลิศคุณค่ำ กว่ำบรรดำฝูงสัตว์เดรัจฉำน จงฝ่ำฟันพัฒนำวิชำกำร อย่ำล้ำงผลำญ ฤๅเข่นฆ่ำบีฑำใคร ไม่ถือโทษโกรธแช่งซัด ฮึดฮัดด่ำ
หัดอภัยเหมือนกีฬำ อัชฌำสัย ปฏิบัติประพฤติกฎ กำหนดใจ พูดจำให้จ๊ะๆจ๋ำ น่ำฟังเอยฯ" คำที่ควรนำมำทดสอบคือ วิญูชน ภูปเตมี กตัญญู เกลื่อน เกลื้อน โหมโรง กระโปรง น้ำใจ
ตัวแสดงลักษณะต่ำงๆของตัวอักษร ลำยมือ
Bold
ลำยมือ ลำยมือ
Italic Bold Italic
ลำยมือ
regula
อ้ำงอิง https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWFpbnxhcnRp Mj MwNXxneDo0OTM5MDAzZWFlNTAxMjc - http://thaifont.info/?p=71 - http://en.wikipedia.org/wiki/ASCII