1

วัตถุประสงค์ 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 ส าหรับเขียนฟอ้นต์ลายมือ ปริ๊น และเขียนตัวอักษรลในตาราง

2

ภาพที่ 1 แสดงตารางเทมเพลตส าหรับปริ๊น เพื่อนน ามาเขียนตัวอักษร

ที่มา https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWF

pbnxhcnRpMjMwNXxneDo0OTM5MDAzZWFlNTAxMjc

ขั้นตอนที่ 2 สแกนภาพที่เขียนลงในคอมพิวเตอร์

3

ภาพที่ 2 แสดงภาพเทมเพลดตัวอกัษรที่แสกนแล้ว

ที่มา น.ส.ชลธิชา อุปลี ,2556

ขั้นตอนที่ 3 เปิดไฟลส์แกนในโปรแกรม Photoshop เลือกเครื่องมอื Crop Tool เพื่อครอบตัดตัวอักษรท่ีต้องการ ไปที่ Select > Color Range เลือกพื้นที่สีขาวกด OK แล้วกด Ctrl + Shift + I แล้วกด Ctrl + x เพื่อตัดโครงสร้างตัวอักษรออกมา

4

ภาพที่ 3 แสดงวิธีการครอบตัดเทมเพจตัวอักษร

ที่มา น.ส.ชลธิชา อุปล,ี2556

ขั้นตอนที่ 4 น าไปวางในโปรแกรม FontCreator ที่เลือกเปิดไฟล์ท่ีเราต้องการจะแก้ไขไว้ซึ่งก็คือฟอนต์ AAA-Watin-new แล้วดัดแปลง ย่อ-ขยายให้ตัวอักษรได้ตามขนาด และรูปแบบท่ีต้องการ ท าจนครบทุกตัวอักษรตามตารางรหัสรูปอักขระมาตรฐานยูนิโค้ดประจ าตัวอกัษรภาษาไทย และภาษาอังกฤษ ดังนี ้

notdef space # numbersigh $ dollar % pencent & ampersand ' quotesingle ( parenleft ) parenright * asterisk + plus , comma - hyphen . period / slash 0 zero

5

1 one 2 two 3 three 4 four 5 five 6 six 7 seven 8 eight 9 nine : colon ; semicolon < less = equal > greater ? question @ at A A B B C C D D E E F F G G H H I I J J K K L L M M N N O O P P Q Q R R S S T T

6

U U V V W W X X Y Y Z Z [ bracketleft \ backslash ] bracketright ^ asciicircum _ underscore ` grave a a b b c c d d e e f f g g h h i i j j k k l l m m n n o o p p q q r r s s t t u u v v w w x x

7

y y z 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

8

ง 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

9

ห 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

11

กฺ uni0E3A.alt1 ฎ uni0E0E.alt1 ฏ uni0E0F.alt1 ฬ uni0E2C.alt1

uni0E4F.liga ฤๅ uni0E24.liga ฤๅ uni0E26.liga

.notdef AAA_Logo

.notdef € Euro ÷ divide X multiply ¥ yen | bar fi fi fl fl

ภาพที่ 4 แสดงการวางตัวอักษรหลังจากมีการตัดออกมาจาโปรแกรม Photoshop

ที่มา น.ส.ชลธิชา อุปลี ,2556

12

ภาพที่ 5 แสดงตัวอักษรท่ีดัดเรียบร้อยสมบูรณ ์

ที่มา น.ส.ชลธิชา อุปล,ี2556

ขั้นตอนที่ 5 เมื่อท าจนครบทุกตัวอักษรแล้ว ก็ตรวจเช็คช่องว่าง ระยะห่างของตัวอักษรโดยการกดปุ่ม F5 แล้วทดลองพิมพ์ข้อความต่างๆลงไป

ภาพที่ 6 แสดงภาพตัวอักษรต่างๆ ที่ดัดแล้วในโปรแกรม FontCerater

ที่มา น.ส.ชลธิชา อุปลี ,2556

13

ภาพที่ 7 แสดงการเรียงพิมพ์ตัวอกัษรที่ดัดเสร็จแล้ว ด้วยอักษรขนาด 16

ที่มา น.ส.ชลธิชา อุปล,ี2556

ภาพที่ 8 แสดงการเรยีงพิมพ์ตัวอักษรภาษาไทยที่ดัดเสรจ็แล้ว ด้วยอกัษรขนาด 75

ที่มา น.ส.ชลธิชา อุปล,ี2556

14

ภาพที่ 9 แสดงการเรียงพิมพ์ตัวอกัษรภาษาอังกฤษที่ดัดเสร็จแล้ว ดว้ยอักษรขนาด 75

ที่มา น.ส.ชลธิชา อุปลี ,2556

ภาพที่ 10 ซึ่งจากรูปภาพข้างต้น จะเห็นได้ว่าตัวอักษรต่างๆท้ังภาษาอังกฤษและภาษาไทยนั้น ยงัมีความหนาและบางไม่เท่ากัน จึงต้องท าการปรับแก้ให้ตักอักษรมีความถูกต้อง โดยการเลอืกฟอนต์ตัวท่ีเราต้องการไปที่เครื่องมือ Tool > Glyph Transformer จากนั้นกดเลือกท่ีMetrich > Bearings กดปุ่มลูกศรเพื่อ Add feature to script แล้ว

ปรับตั้งค่าตามความเหมาะสม

ที่มา น.ส.ชลธิชา อุปล,ี2556

15

ภาพที่ 11 แสดงหน้าต่าง Transform wrizard ที่มา น.ส.ชลธิชา อุปล,ี2556

ภาพที่ 12 เป็นการปรบัความห่่างของตัวอักษรแบบงา่ยๆโดยการปรับเส้นแดงข้างหลัง Right Bearing ตามความเหมาะสม

ที่มา นางสาว ชลธิชา อุปล,ี2556

16

ภาพที่ 13 เป็นการแสดงการจัดเรยีงตัวอักษรท่ีได้ท าการปรับปรุงแลว้ จะเห็นว่าตัวอักษรเรียงกันเรียบรอ้ยที่มา

นางสาว ชลธิชา อุปล,ี2556

ขั้นตอนที่ 6. เมื่อได้ฟอนต์ท่ีสวยงามแล้ว กเ็ปลี่ยนชื่อ และปรับเปลี่ยนข้อมูลต่างๆโดยคงข้อมูลเดิมของผู้ถือลิขสิทธิ์ไว้ โดยไปที่ Format > Naming แล้วแก้ไขข้อมูลต่างๆโดยเพิ่มชื่อเราข้าไป ทั้งเพลตฟอร์มแบบ Windows Uincode Unicode BMP (UCS-2) และ Macintosh Roman

ภาพที่ 14 แสดงข้อมูลต่างๆ ก่อนการเปลี่ยนแปลง ที่มา น.ส.ชลธชิา อุปล,ี2556

17

ภาพที่ 15 แสดงข้อมูลต่างๆ หลังการการเปลี่ยนแปลง ที่มา น.ส.ชลธิชา อุปล,ี2556

ภาพที่ 16 แสดงข้อมูลต่างๆ หลังการการเปลี่ยนแปลงขั้น Advanced….

ที่มา น.ส.ชลธิชา อุปล,ี2556

18

ภาพที่ 17 แสดงตัวอักษร CRU-conticha-Hand-Written

ที่มา น.ส.ชลธิชา อุปล,ี2556

Did : ผลที่ได้รับ

จะได้ฟอนต์ลายมือภาษาไทยและภาษาอังกฤษของเราเอง

Done : น าไปทดสอบ และใช้ประโยชน์ การน ามาติดตั้งไดรฟ์ C > WINDOWS > Fonts เพื่อใช้เปน็แบบพิมพ์ในรายงานของวิชาการออกแบบตัวอักษรเพื่อการพิมพ์ในโปรแกรมสร้างเอกสารต่างๆ

ภาพที่ 18 แสดงโฟลเดอร์ท่ีจะติดตั้งฟอนต์ลายมือลงในเครื่อง

ที่มา น.ส.ชลธิชา อุปล,ี2556

19

ภาพที่ 19แสดงการน าฟอนต์ท่ีท าเสร็จแล้วไปเรียงพมิพ์ในโปรแกรม

ที่มา น.ส.ชลธิชา อุปล,ี2556

20

ข้อมูลแบบตัวพิมพ์ (Font Information)

ชื่อแบบตัวพิมพ์ (Typeface/Font Name)

ชื่อ CRU-Chonticha-Hand-Written

ประเภทของไฟล์ตัวพิมพ์ OpenType Layout, TrueType Outlines

ออกแบบโดย นางสาว ชลธิชา อปุลี รหัสนักศึกษา

5411301632

วิชาการออกแบบตัวอักษรเพื่อการพมิพ์ ARTD2304 กลุ่มเรียน 101

สาขาวิชาศิลปกรรม มหาวิทยาลัยราชภัฏจันทรเกษม กรุงเทพมหานคร

เมื่อวันที่ 13 เดอืน มกราคม พศ. 2556

21

ตัวอย่างรูปแบบตัวอักขระภาษาลาติน (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) อักษรภาษาไทย ภาษาอังกฤษ

22

ค ากลอนไทยส าหรับใช้พิมพ์ทดสอบผลการออกแบบแสดงโครงสร้างของตัวอักษร การจัดระดบัต าแหนง่รูปพยัญชนะ สระ วรรณยุกต์ เครื่องหมายวรรคตอนการจัดระยะช่องไฟรอบรูปอักขระหรือฟ้อนต์ส่วนภาษาไทย และหรือทดสอบในโปรแกรมฟ้อนต์ครีเอเตอร์และ ัหรือด้วยโปรแกรมประยุกต์อื่นๆในระบบ

เขามักใช้ค ากลอนนี้ ให้นักศึกษาคัดลอกไปวาง

เปลี่ยนเปน็ฟ้อนต์ท่ีเราท า ตรวจสอบระยะช่องไฟกั้นหน้า-หลัง การประสมค าต าแหน่งสระและวรรณยุกต์ ว่าตรงต าแหน่งตามหลักไวยกรณ์ของไทยหรือใหม่และบันทึกเป็นหลักฐานแสดงในรายงานภาษาอังกฤษให้ตรวจสอบดูด้วยตาเองว่าระยะเปน็อยา่งไร แล้วไปแก้ไขในตารางฟ้อนต์ และทดสอบใหม ่ซ ้าๆจนแน่ใจว่าเป็นระยะและต าแหน่งที่ถูกต้องแล้ว

ค ากลอนตรวจสอบแบบตัวอักษร ต าแหน่งพิมพ์ผสมค าไทย

"เป็นมนุษย์สุดประเสริฐเลิศคุณค่า

กว่าบรรดาฝูงสัตว์เดรัจฉาน

จงฝ่าฟันพฒันาวิชาการ

อย่าล้างผลาญ ฤๅเข่นฆ่าบีฑาใคร

ไม่ถือโทษโกรธแช่งซัด ฮดึฮัดด่า

หัดอภัยเหมือนกีฬา อัชฌาสัย

ปฏิบัติประพฤติกฎ ก าหนดใจ

พูดจาให้จ๊ะๆจา๋ นา่ฟังเอยฯ"

ค าที่ควรน ามาทดสอบคือ วิญูชน ภูปเตมี กตัญญู เกลื่อน เกลื้อน โหมโรง กระโปรง น ้าใจ

23

ตัวแสดงลักษณะต่างๆของตัวอักษร

ลายมอื Bold

ลายมือ Italic

ลายมอื Bold Italic

ลายมือ regula

24

อ้างองิ

- https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWFpbnxhcnRpMj

MwNXxneDo0OTM5MDAzZWFlNTAxMjc

- http://thaifont.info/?p=71

- http://en.wikipedia.org/wiki/ASCII