Hand written

Hand written projactCRU-Boonmee Font

Visual communication design tcchnology

การสร้างฟอนต์ลายมอืด้วยโปรแกรม High-Logic.FontCreator

จัดท�ำโดยบุญมี เมืองนารหัส 5321300153 กลุ่มเรียน 201ศิลป์กรรม แขนงออกแบบนิเทศศิลป์คณะมนุษย์ศาสตร์และสังคมศาสตร์บล๊อก : http://boonmee-arti2305.blogspot.com/

เสนอผู้สอน ผู้ช่วยศาสตราจารย์ประชิด ทิณบุตร

รายงานนี้เป็นส่วนหนึ่งของ วิชา ARTI2305 การออกแบบตัวอักษรเพื่อการพิมพ์ภาคเรียนที่ 2 ปีการศึกษา 2554มหาวิทยาลัยราชภัฏจันทรเกษม

บทน�ำ ฟอนต์คือตัวอักษรตั้งแต่อดีตจนมาถึงปัจุบันได้ใช้ฟอนต์ต่างๆ มากมายในการสื่อสารกันและใช้แทนการพูดก็ว่าได้ฟอนต์เป็นสัญลักณ์ใช้พิมม์ติดต่อสื่อสาร และเขียนแทนการพูดและการอ่านจนในปัจุบันฟอนต์ได้เป็นส่วนหนึ่งของเทคโนโลยี ไม่ว่าจะใช้เป็นสื่อในหนังสือต่างๆและใช้พิมพ์ในคอมพิวเตอร์ เครื่องพิมพ์ดีด และต่างๆ อีกมากมาย ทั้งในปัจจุบันได้มีคอมพิวเตอร์เข้ามามีส่วนในการสร้างฟอนให้ง่ายมากยิ่งขึ้น ร่วมทั้งโปรแกรมในการสร้างก็ยังมีหลายบริษัทจัดท�าขึ้น เพื่อให้เราสะดวกในการสร้างฟอนต์ขึ้นมาใช้งานอย่าง เช่น โปรแกรม High-Logic.FontCreator หรือ fontsefl เป็นต้น

2

Hand writtenHand written projact

ARTI2305

ขั้นตอนและวิธีการสร้างฟอนต์ ในตวัอย่างนีเ้ราจะพดูถงึขัน้ตอนการออกแบบฟอนต์กนัก่อน เราจะใช้เทมเพลตของฟอนต์ตระกูล CRU-Lanchan โดยได้เทมเพลตมาจากการคิดค้นของอาจารย์จากมหาลัยวิทยาราชภัฏจันทร์เกษม โดย ผู้ช่วยศาสตราจารย์ประชิด ทิณบุตร ผู้คิดค้นเทมเพลตนี้

ตัวอย่ำงเทมเพลตตระกูล CRU

ภำพที่ 1 ตัวอย่ำง Template ภำษำไทย

3

ภำพที่ 2 ตัวอย่ำง Template ภำษำอังกฤษ

4

Hand writtenHand written projact

ARTI2305

ขั้นตอนที่ 1

1. หลังจากได้เทมเพลตมาแล้วให้ปริ้นออกมา แล้วเขียนตัวอักษรลายมือลงในไปใน เทมเพลตทั้ง ไทย-อังกฤษ ดังรูปตัวอย่า

ภำพที่ 1 ตัวอย่ำง Template ที่เขียนด้วยลำยมือภำษำไทย

5

ภำพที่ 2 ตัวอย่ำง Template ที่เขียนด้วยลำยมือภำษำอังกฤษ

6

Hand writtenHand written projact

ARTI2305

2. จากนั้นให้เอาเทมเพลตที่เขียนด้วยลามมือไปสแกนความละเอียด1000dpi ขึ้นไป ให้ save เป็นนามสกุล JPG หรือ PNG

3. ให้เปิดโปรแรกม Photoshop ขึ้นมา แล้วเปิดไฟล์ที่สแกนเสร็จแล้วขึ้นมาด้วยเพื่อที่เรา จะต้อง copy เอาเฉพาะตัวอักษรไปยังโปรแกรม FontCreator ต่อไป

ขั้นตอนที่ 2

1. ให้ดาวน์โหลดโปรแกรม High-Logic.FontCreator มาติดตั้งบนเครื่องคอมพิวเตอร์ของ เราก่อนการท�างาน แล้วติดตั้งโปรแกรมให้เรียบร้อย

2. เมื่อติดตั้งโปรแกรมเสร็จแล้วให้เปิดโปรแกรม High-Logic.FontCreator ขึ้นมา

7

3. ให้เปิดไฟล์ต้นแบบของฟอนต์ตระกูล CRU-LanChand.ttf ข้ึนมา เพื่อใช้เป็นต้นแบบ ในการสร้างฟอนต์ลายมือของเราเอง

8

Hand writtenHand written projact

ARTI2305

ขั้นตอนที่ 3

1. ให้กับไปที่หน้าต่างโปรแกรม Photoshop อีกครั้ง ให้เลือกเครื่องมือตามตัวอย่าง แล้ว ลากครอบเลือตัวอักษรที่ตัวการคัดลอกตัวอักษรที่ละตัวไปใส่ใน โปรแกรม Photoshop ไปว่างไว้ที่ FontCreator ให้กดปุ่ม Ctrl+C คือ copy และ Ctrl+V คือ copy การวาง

2. กดปุ่ม Ctrl+C เพื่อ copy ตัว ก.ไก่ ที่เราได้ท�าการเลือกเอาไว้

9

3. มาที่หน้าต่างโปรแกรม FontCreator คลิกเลือกช่องที่ตัว ก.ไก่ แล้วกด Ctrl+V วางตัว ก.ไก่ ที่ copy มาจากโปรแกรม Photoshop ให้ท�าแบบนี้จนครบทุกตัวอักษร

ขั้นตอนที่ 4

หลังจากเราได้ copy ตัวอักษรจนคบแล้วเราก็จะมาดูว่าตัวอักษรสรของเราใช้ได้หรือไม่และเป็นไงกันบ้าง

1. ใหดับเบิ้ลคลิกที่ตัว ก.ไก่ เพื่อขยายไปยังหนังต่างตบแต่ง

10

Hand writtenHand written projact

ARTI2305

2. เมื่อดับเบิ้ลคลิกแล้วก็จะได้ดังตัวอย่าง

3. ให้กดปมุ F8 บนคบีอร์ดเพือ่สดงตวัอย่างตวัอกัษรทีเ่ราสร้างขึน้ ให้พมิพ์ในช่อง Kerning ก-ฮ ลองดูตัวอย่างตัวอักษร

11

4. กดปุ่ม F5 หรือเข้าไปตามตัวอย่าง test ดูตัวอักษรอีกแบบหนึ่ง ผลลัพย์ที่ได้ดังรูป ตัวอย่างถัดไป

ตัวอย่ำงจำกกำร test front

12

Hand writtenHand written projact

ARTI2305

ขั้นตอนที่ 5

การปรับแต่งระยะห่างช่องไฟฃองตัวอักษรก็สามารถท�าได้

1. ปรับแต่งระยะห่างช่องหไฟฃองตัวอักษรก เส้นปรับระยะห่างกลั้นหน้า-หลัง ตาม

2. ให้สังเกตุความห่างได้จากตัวอักษรในช่องแสงตัวอย่าง (preview) ถ้าหน้าต่างนี้ ไม่ขึ้นให้กดปุ่ม F8 เมื่อปรับอแต่งเสร็จแล้วก็ให้ลองพิมพ์ข้อความลงไป ในหน้าต่าง Preview เพื่อทดสอบว่าการจักดว่างเป็นยังไงบ้าง

13

3. เมื่อปรับอแต่งเสร็จแล้วก็ให้ลองพิมพ์ข้อความลงไป ในหน้าต่าง Preview (F5) เพื่อทดสอบว่าการจักดว่างเป็นยังไงบ้าง

14

Hand writtenHand written projact

ARTI2305

15

16

Hand writtenHand written projact

ARTI2305

Font InformationCRU-Boonmee LanChand RegularVersion 1.00 June 8, 2009True Type FontCreator: boonmeer. Arts Division,Chandrakasem Rajabhat University.ContactEmail:boonmee.cru@.com .Mobile Phone:0846470203Copyright © 2010 by Assistant Professor Prachid Tinnabutr.Fine and Applied ArtsDivision.Chandrakasem Rajabhat University.Bangkok,Thailand. All rights reserved.

Text Sample

����������������������� �����������������

�

������������ ­��� �������� �������������� �

�Basic Latin

Latin-1 Supplement

0020 0021 0022 0023 0024 0025 0026 0027 0028 0029 002A 002B 002C 002D 002E

002F 0030 0031 0032 0033 0034 0035 0036 0037 0038 0039 003A 003B 003C 003D

003E 003F 0040 0041 0042 0043 0044 0045 0046 0047 0048 0049 004A 004B 004C

004D 004E 004F 0050 0051 0052 0053 0054 0055 0056 0057 0058 0059 005A 005B

005C 005D 005E 005F 0060 0061 0062 0063 0064 0065 0066 0067 0068 0069 006A

006B 006C 006D 006E 006F 0070 0071 0072 0073 0074 0075 0076 0077 0078 0079

007A 007B 007C 007D 007E

� � � � � � � � � � � � � ¡

¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ±

² ³ ´ � � � � � � � � � �

� � � � � � � � � � � � � µ

¶ · ¸ ¹ º � � � � � � � � � �

� � � �   � � � � � � � ­ � �

� » ¼ ½ ¾

0080 0081 0082 0083 0084 0085 0086 0087 0088 0089 008A 008B 008C 008D 008E

¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í

17

18

Hand writtenHand written projact

ARTI2305

19

20

Hand writtenHand written projact

ARTI2305

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

ผู้สอน ผศ.ประชิด ทิณบุตร

ฟ้อนต์ต้นแบบCRU-LanChand โดย ผศ.ประชิด ทิณบุตร

ศึกษาเพิ่มเติมtypefaceความส�าคัญของฟอนต์ค�าแนะน�าส�าหรับคนที่อยากท�าฟอนต์สัดส่วนและโครงสร้างมาตรฐาน แบบตัวอักษรและตัวพิมพ์ ภาษาอังกฤษ-ไทย ของ CRU-Font Familyรวมบทความเกี่ยวกับฟอนต์http://www.font.com

21