CRU-Teerapong-Hand Written

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 สดงตารางทมพลตส าหรับปริๆน พืไอนน ามาขียนตัวอักษร

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

OTM5MDAzZWFlNTAxMjc

4

ขัๅนตอนทีไ 2 สกนภาพทีไขียนลง฿นคอมพิวตอร์

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

ทีไมา นาย ธีระพงษ์ ชมชืไน 2556

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

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


5

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

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

6

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 [ 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

7

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 ’ quoteright ‚ quotedblleft ‛ quotedblright diresis

© copyright ® registered ™ trademark • bullet – endash — emdash ‚ quotesinglbase „ quotedblbase uni007F NULL nonmarkingreturn า uni0E33 ก๎ uni0E4E.alt1 ¼ onequarter ½ oneharf

8

¾ 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

9

ว 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

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 กฺ uni0E3A.alt1 ฎ uni0E0E.alt1 ฏ uni0E0F.alt1 ฬ uni0E2C.alt1

11

uni0E4F.liga ฤแ uni0E24.liga ฤแ uni0E26.liga

.notdef AAA_Logo

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

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


12

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


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

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


13

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


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


14

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


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

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


15

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


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


16

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


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


17

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


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


18

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


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


19

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


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


20

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


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


21

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


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


22

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


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


23

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

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


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


24

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


ภาพทีไ 30 สดงตัวอักษร SRU-Teerapong-Hand-Written


25

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

26

27

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

ภาพทีไ 31 สดงฟลดอร์ทีไจะติดตัๅงฟอนต์ลายมือลง฿นครืไอง


28

ภาพทีไ 32 สดงฟอนต์ทีไติดตัๅงลง฿นครืไองล้ว


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


29

ข้อมูลบบตัวพิมพ์ (Font Information) ชืไอบบตัวพิมพ์ (Typeface/Font Name) ชืไอ CRU-Teerapong-Hand-Written

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

ออกบบดย นาย ธีระพงษ์ ชมชืไน รหัสนักศึกษา 5411307100

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

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

มืไอวันทีไ 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. ฿นทางวงการพิมพ์นัๅนกล่าวถึงฟ้อนต์ดยทัไวเปว่า หมายถึงตัวอักษรทีไ฿ช้ป็นบบตัวรียงพิมพ์นืๅอหา ทีไมีขนาดละรูปบบป็นชุดดียวกัน ยกตัวอย่างช่นบบตัวอักษรทีไ฿ช้฿นการรียงพิมพ์นืๅอหาทีไท่านก าลังอ่านอยู่

30

นีๅ มีชืไอบบตัวอักษรชุดนีๅว่า บางพูด( Bangpood) ทีไประกอบด้วยรูปอักขระ( Glyphs) ของตัวพยัญชนะ (Consonants) สระ(Vowels) วรรณยุกต์ ( Tones) ครืไองหมายสัญลักษณ์( Signs and Symbols) วรรคตอน(Punctuation) อักษรภาษาเทย ภาษาอังกฤษ

ค ากลอนเทยส าหรับ฿ช้พิมพ์ทดสอบผลการออกบบ สดงครงสร้างของตัวอักษร การจัดระดับต าหน่งรูปพยัญชนะ สระ วรรณยุกต์ ครืไองหมายวรรคตอน การจัดระยะช่องเฟรอบรูปอักขระหรือฟ้อนต์ส่วนภาษาเทย ทีไสร้าง บันทึก ติดตัๅง ละหรือทดสอบ฿นปรกรมฟ้อนต์ครีอตอร์ละ ัหรือด้วยปรกรมประยุกต์อืไนโ฿นระบบ ขามัก฿ช้ค ากลอนนีๅ ฿ห้นักศึกษาคัดลอกเปวาง ปลีไยนป็นฟ้อนต์ทีไราท า ตรวจสอบระยะช่องเฟกัๅนหน้า-หลัง การประสมค าต าหน่งสระละวรรณยุกต?ว่าตรงต าหน่งตามหลักเวยกรณ์ของเทยหรือ฿หม่ละบันทึกป็นหลักฐานสดง฿นรายงาน ภาษาอังกฤษ฿ห้ตรวจสอบดูด้วยตาองว่าระยะป็นอย่างเร ล้วเปก้เข฿นตารางฟ้อนต์ ละทดสอบ฿หม่ ซ ๅาโ จนน่฿จว่าป็นระยะละต าหน่งทีไถูกต้องล้ว

ค ากลอนตรวจสอบบบตัวอักษร ต าหน่งพิมพ์ผสมค าเทย "ป็นมนุษย์สุดประสริฐลิศคุณค่า กว่าบรรดาฝูงสัตว์ดรัจฉาน จงฝ่าฟ๎นพัฒนาวิชาการ

อย่าล้างผลาญ ฤแข่นฆ่าบีฑา฿คร เม่ถือทษกรธช่งซัด ฮึดฮัดด่า หัดอภัยหมือนกีฬา อัชฌาสัย ปฏิบัติประพฤติกฎ ก าหนด฿จ พูดจา฿ห้จ๊ะโจ๋า น่าฟ๎งอยฯ"

ค าทีไควรน ามาทดสอบคือ วิํูชน ภูปตมี กตัญํู กลืไอน กลืๅอน

หมรง กระปรง น ๅา฿จ

31

อ้างอิง

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

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

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

Documents

CRU-Teerapong-Hand Written