รายงานFont ARTD2304

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 แล้วดัดแปลง ย่อ-ขยายให้ตัวอักษรได้ตามขนาด และรปูแบบที่ต้องการ ท าจนครบทุกตัวอักษรตามตารางรหัสรูปอักขระมาตรฐานยูนิโค้ดประจ าตัวอักษรภาษาไทย และภาษาอังกฤษ ดังนี ้

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

6

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 U U V V W W X X Y Y

7

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

ก้ 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 multiply ¥ yen | bar fi fi fl fl

12

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

ที่มานายสุทธิชัย อุดมทรัพย,์2556

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


13

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

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


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


14

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

ที่มานาย สุทธิชัย อุดมทรัพย,์2556

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


15

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

ภาพที่ 10 แสดงหน้าต่าง Transform wrizard


ภาพที่ 11 แสดงให้เห็นว่าตัว U มีระยะห่างของชาญดา้นหลังมากเกินไป

16

ที่มานายสุทธิชัย อุดมทรัพย์ ,2556

ภาพที่ 12 หลังจากแก้ไขโดยการปรับช่องว่างระหว่างชาญหลังให้ลดลง ท าให้ ตัวอักษรดูอ่านง่าย และมีระยะหา่งที่พอดีมากข้ึน


ภาพที่ 13 แสดงให้เห็นว่า ตักอักษรภาษาอังกฤษบางตัว คอืตัว L a และ q นั่น มีชาญหลังที่ห่างจากตัวอักษรอื่นๆมากเกินไป ท าให้ตัวอักษรอ่านยาก และไม่สวยงาม

17


ภาพที่ 14 แสดงการปรับปรุงแก้ไขตัวอักษร ท าให้ช่องว่างตา่งๆ ลดน้อยลง


18

ภาพที่ 15 แสดงให้เห็นว่าตัวอักษรภาษาอังกฤษบางตัวมีขนาดความหนา-บาง ไม่เท่ากนั ท าให้ไม่สวยงาม


ภาพที่ 16 แสดงให้เห็นการแก้ และจัดเรียงตัวอักษรภาษาอังกฤษใหม่ ท าให้มีความสวยงาม และอา่นง่ายมากยิ่งข้ึน


19

ภาพที่ 17 แสดงตัวเลข และสัญลักษณ์ต่างๆ ซ่ึงมีขนาดบาง และหนาไมเ่ท่ากัน


ภาพที่ 18 แสดงให้เห็นว่า เมื่อแกต้ัวเลข ตัวอักษร และสัญลักษณ์ต่างๆแล้ว มคีวามห่างของชาญหนา้ ชาญหลัง และมคีวามเทา่กันของเส้นมากข้ึน

ที่มาสุทธิชัย อุดมทรัพย,์2556

20

ภาพที่ 19 แสดงตัวอักษรภาษาไทย ซ่ึงอังษรบางตัวยังมีขนาดไม่เท่ากนั ท าให้ไมส่วยงามในการเรียงพิมพ์ เช่น ด ต


ภาพที่ 20 แสดงอักษร ด ก่อนการแกไ้ข

ที่มา นายสุทธิชัย อุดมทรัพย,์2556

21

ภาพที่ 21 แสดงอักษร ด หลังการแก้ไขปรับแต่งรูปรา่ง


ภาพที ่22 แสดงอักษร ต กอ่นการแก้ไขปรับแต่งรูปรา่ง


22

ภาพที่ 23 แสดงตัวอักษรภาษาไทยหลังจากปรบัแต่งแล้ว ท าให้ตัวอักษรมีความสวยงาม อา่นง่ายมากยิ่งข้ึน


ภาพที่ 24 แสดงภาพการเรียงพิมพ์ตัวอักษรภาษาไทยที่ชาญหน้า และชาญหลังมีการจัดเรียงที่ไม่เท่ากัน

23


ภาพที่ 25 แสดงภาพการเรียงพิมพ์ตัวอักษรภาษาไทยที่มีการจัดเรียงใหม่ด้วยฟอนต์ขนาด 50


ภาพที่ 26 แสดงภาพการเรียงพิมพ์ตัวอักษรภาษาไทยที่มีการจัดเรียงใหม่ด้วยฟอนต์ขนาด 16


24

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

ภาพที่ 27 แสดงข้อมูลต่างๆ ก่อนการเปลี่ยนแปลง


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

25


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


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


26

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

27

28

29

Done : น าไปทดสอบ และใช้ประโยชน์

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

30

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


ภาพที่ 32 แสดงฟอนต์ที่ติดต้ังลงในเครื่องแล้ว


31

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


ข้อมูลแบบตัวพิมพ์ (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=ZGVmYXVsdGRvbWFpbnxhcnRpMjMwNXxneDo0OTM5MDAzZWFlNTAxMjc

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

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

35

Documents

รายงานFont ARTD2304