การออกแบบตัวอักษร

เรื่อง การออกแบบและพัฒนาฟอนต์ลายมือ จากโปรแกรม Font Creator รายวิชา ARTD 2304 ออกแบบตัวอักษรเพื่อการพิมพ์ กลุ่มเรียน 102

จัดทำ�โดย นาย ทศพร บรรณทอง รหัส 5411302036 ออกแบบนิเทศศิลป์ปี 2

เสนอ ผู้ช่วยศาสตราจารย์ประชิด ทิณบุตร สาขาวิชาศิลปกรรม มหาวิทยาลัยราชภัฏจันทรเกษม

คำ�นำ� รายงานนี้เป็นส่วนหนึ่งของวิชา ARTD2304 การออกแบบตัวอักษรเพื่อการพิมพ์ เพื่อจัดสร้างและพัฒนาฟอนต์ลายมือของตัวเองด้วยโปรแกรม Font Creator ให้เป็นที่เผยแพร่แกผู้ที่สนใจ หากผิดพลาดประการใด ขออภัยมา ณ ที่นี้

นายทศพร บรรณทอง ผู้จัดทำ�

กระบวนการทำ�งาน Goal ( เป้าหมาย ) เป้าหมายของรายงานฉบับนี้คือ ฟอนต์ที่ได้จากการพัฒนาจากฟอนต์ลายมือ ภาษาไทย - อังกฤษที่เรา ได้ทำ�ไว้ โดยมีคอนเซปจากสมุดสเก็ตช์บุ๊คที่เราใช้ใน วิชาเรียนหรือวาดเล่นต่างๆ Tools ( เครื่องมือหลัก ) - ฟอนต์ลายมือที่เราออกแบบไว้ ได้แก่ฟอนต์ชื่อ CRU-Todsaporn-Hand-Written

- โปรแกรม FontCreator

- โปรแกรม Adobe illustrator

Do Did Done Do : มีขั้นตอนและหลักฐานแสดง ขั้นตอนการออกแบบฟ้อนต์ลายมือ ทั้งภาษาไทย - อังกฤษ จากโปรแกรม FontCreator - ขั้นตอนที่ 1 เปิดฟอนต์ลายมือที่เราทำ�ไว้ด้วยโปรแกรม อิลลาส

- ขั้นตอนที่ 2 คลิกขวาและเลือก Create Outline

- ขั้นตอนที่ 3 คลิกขวา Ungrop จากนั้นเลือกตัวอักษรที่เราต้องการ

- ขั้นตอนที่ 4 เลือกเมนู Object > Path > OffsetPath

- ขั้นตอนที่ 5 ปรับค่า OffsetPath ตามต้องการ

- ขั้นตอนที่ 6 ใส่สีแดงลงไปข้างในของตัวฟอนต์

- ขั้นตอนที่ 7 สร้างเส้นเฉียงจากเครื่องมือ Line Segment Tool

- ขั้นตอนที่ 8 ปรับ Brush ตามที่เราต้องการ

- ขั้นตอนที่ 9 เลือกตัวอักษรสีแดงมาวางบนแพทเทิร์นที่เราเตรียมเอาไว้

- ขั้นตอนที่ 10 คลิกขวาเลือก Arrange > Sendtoback

- ขั้นตอนที่ 11 เลือกทั้ง 2 เลเยอร์ จากนั้นเปิดเครืองมือ Pathfinder เลือก Divide

- ขั้นตอนที่ 12 รอโปรแกรมประมวลผล

- ขั้นตอนที่ 13 ใช้เครื่องมือ Magic wand Tool เลือกที่ตัวอักษรสีแดง

- ขั้นตอนที่ 14 ก๊อปปี้และนำ�มาวางบนเอาท์ไลน์ตัวอักษรสีดำ�ที่เราทำ�ไว้ตอนแรก

- ขั้นตอนที่ 15 เปลี่ยนสีแดงให้เป็นสีขาว ก็จะได้ตามแพทเทิร์นที่เราต้องการ

- ขั้นตอนที่ 16 ทำ�จนครบทุกตัวอักษร

- ขั้นตอนที่ 17 เปิดโปรแกรม FontCreator เลือก File > Open > Font File

- ขั้นตอนที่ 18 เลือก Font CRU-Todsaporn-Hand-Written แล้ว Save As ให้เป็นชื่อของเรา โดยในที่นี้เป็น CRU-Todsaporn-sketch-book

- ขั้นตอนที่ 19 เปิดไฟล์ที่เป็นชื่อเราขึ้นมา แล้วเลือกตัวอักษรที่เราจะทำ�

- ขั้นตอนที่ 20 จากนั้นกลับไปที่โปรแกรม AI นั้นกดCtrl + c หรือ Edit ->Copy ในตัวอักษรที่ เราจะทำ�

- ขั้นตอนที่ 21 กลับมาที่โปรแกรม FontCreator จากนั้นกด Ctrl + v หรือ คลิกขวา Paste ตัว อักษรที่เราเลือกไว้ก็จะปรากฏ จากนั้นก็ปรับขนาด ย่อขยาย ให้พอดีกับสัดส่วนตามมาตรฐานของอักษร

- ขั้นตอนที่ 22 ดัดตัวอักษรที่เราได้มาให้สวยงามตามความเหมาะสม อาจคลิกเพิ่มหรือลบ จุด Point หรือ จุดOff Curve เพื่อทำ�เส้นให้โค้งมน

- ขั้นตอนที่ 23

- ปรับขนาดให้เข้าทีโดยดูจากค่าต่างๆ - Cap height คือ ความสูงของตัวอักษรพิมพ์ใหญ่ - Median คือ ความสูงของตัวอักษรพิมพ์เล็ก - X-height คือ ระยะห่างระหว่างเส้นฐานจนถึงเส้น Median ซึ่งเป็นช่วงของตัว พิมพ์เล็ก - Baseline คือ เส้นฐาน

- ขั้นตอนที่ 24 จัดระยะช่องไฟของอักษร ได้โดยเลือนตัวอักษรเข้าใกล้เส้นประสีแดงแล้วดึงเส้นประ ด้านหลังตาม หรือ คลิกขวาแล้วเลือก Properties จากนั้นปรับระยะตรง Glyph Metrics ให้มีค่าตรง ตามความเหมาะสมของแต่ละอักษร ควรกด F5 เพื่อทำ�การตรวจระยะห่าง ช่องไฟและความสูง

- ขั้นตอนที่ 25 การจัดวางช่องไฟแบบหลายๆตัวพร้อมกันทำ�ได้โดยการกดเลือกฟอนต์ที่เราต้องการจะ ทำ�จากนั้นเลือก Tool ->Glyph Transformer

- ขั้นตอนที่ 26 เลือกที่ Metrics ->Bearings จากนั้นปรับค่าด้านล่างตามความเหมาะสม

- ขั้นตอนที่ 27 เมื่อเราจัดวางช่องไฟ ตำ�แหน่งระยะห่าง หน้า - หลัง ความสูง ของตัวอักษรครบทุก ตัวแล้วให้คลิกไปที่ Font > Test หรือกด F5 เพื่อทดสอบการพิมพ์ ตรวจสอบระยะช่องไฟของแต่ละอักษร

Did : ผลที่ได้รับคือ ฟ้อนต์ลายมือ ภาษาไทย - อังกฤษ จากโปรแกรม FontCreator จะได้ฟ้อนต์ชื่อ CRU-Todsaporn-sketch-book

การออกแบบตัวอักษรชุด CRU-Todsaporn-sketch-book ชื่อต้นแบบกลุ่มตัวอักษร(Font Family/font Identifier) : CRU ชื่อแบบตัวอักษร(Font Name) : CRU-Todsaporn-sketch-book ชื่อผู้ออกแบบ(Font Designer) : นาย ทศพร บรรณทอง ที่มาและแนวคิดในการออกแบบ(Design Concept) เป็นการออกแบบพัฒนาต่อจากแบบตัวอักษร CRU-Todsaporn-Hand-Written ซึ่งเดิมที่เป็น แพทเทิร์นฟอนต์ที่ ผศ.ประชิด ทิณบุตร ได้ออกแบบและอนุญาติให้นักศึกษานำ�ไปออกแบบและแก้ไขได้โดยมี วัตถุประสงค์หลักคือให้ใช้เป็นฟอนต์ลายมือทั้งภาษาไทย-ภาษาอังกฤษเพื่อใช้เป็นตัวอักษรในการทำ�การ์ด อวยพรและสื่อสิ่งพิมพ์ชนิดต่างๆ จากนั้น จึงได้นำ�มาพัฒนาต่อจนเกิดฟอนต์แบบใหม่เพื่อใช้ในการออกแบบใน สื่อสิ่งพิมพ์ต่างๆ แบบภาพตัวอักษรภาษาไทย-ภาษาอังกฤษ-ตัวเลข-เครื่องหมาย-สัญลักษณ์-วรรคตอน ภาพชุ ดอักขระ(Character set) ของ AAA-Watin-Todsaporn-2012 font :แสดงความสูง 10 พ้อยท์ ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 abcdefghijklmnopqrstuvwxyz!@#%^&*()_+|{}[]:"<>?;'",./\*-.=;'กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮ๐๑๒๓๔๕๖๗๘๙ ๆๅ฿อะอาอุึอูอิอีอึอือ่อ้อ๊อ๋อ์อำ�เแโใไ?

ภาพชุดอักขระ(Character set) ของ AAA-Watin-Todsaporn-2012 font :แสดงความสูง 12 พ้อยท์ ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 abcdefghijklmnopqrstuvwxyz!@#%^&*()_+|{}[]:"<>?;'",./\*-.=;'กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮ๐๑๒๓๔๕๖๗๘๙ ๆๅ฿อะอาอุึอูอิอีอึอือ่อ้อ๊อ๋อ์อำ�เแโใไ?

ภาพชุดอักขระ(Character set) ของ AAA-Watin-Todsaporn-2012 font :แสดงความสูง 14 พ้อยท์ ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 abcdefghijklmnopqrstuvwxyz!@#%^&*()_+|{}[]:"<>?;'",./\*-.=;'กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮ๐๑๒๓๔๕๖๗๘๙ ๆๅ฿อะอาอุึอูอิอีอึอือ่อ้อ๊อ๋อ์อำ�เแโใไ?

ภาพชุดอักขระ(Character set) ของ AAA-Watin-Todsaporn-2012 font :แสดงความสูง 16 พ้อยท์ ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 abcdefghijklmnopqrstuvwxyz!@#%^&*()_+|{}[]:"<>?;'",./\*-.=;'กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬ อฮ๐๑๒๓๔๕๖๗๘๙ ๆๅ฿อะอาอุึอูอิอีอึอือ่อ้อ๊อ๋อ์อำ�เแโใไ?

ภาพชุดอักขระ(Character set) ของ AAA-Watin-Todsaporn-2012 font :แสดงความสูง 18 พ้อยท์ ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 abcdefghijklmnopqrstuvwxyz!@#%^&*()_+|{}[]:"<>?;'",./\*-.=;'กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬ อฮ๐๑๒๓๔๕๖๗๘๙ ๆๅ฿อะอาอุึอูอิอีอึอือ่อ้อ๊อ๋อ์อำ�เแโใไ?

ภาพชุดอักขระ(Character set) ของ AAA-Watin-Todsaporn-2012 font :แสดงความสูง 24 พ้อยท์ ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 abcdefghijklmnopqrstuvwx yz!@#%^&*()_+|{}[]:"<>?;'",./\*-.=;'กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษ สหฬอฮ๐๑๒๓๔๕๖๗๘๙ ๆๅ฿อะอาอุึอูอิอีอึอือ่อ้อ๊อ๋อ์อำ�เแโใไ? ภาพชุดอักขระ(Character set) ของ AAA-Watin-Todsaporn-2012 font :แสดงความสูง 36 พ้อยท์

ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 abcdefghijklmnopqrstuvwxyz!@#%^&*()_+|{} []:"<>?;'",./\*-.=;'กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภ มยรฤลฦวศษสหฬอฮ๐๑๒๓๔๕๖๗๘๙ ๆๅ฿อะอาอุึอูอิอีอึอือ่อ้อ๊อ๋อ์อำ�เแโใไ

ภาพชุดอักขระ(Character set) ของ AAA-Watin-Todsaporn-2012 font :แสดงความสูง 48 พ้อยท์

ABCDEFGHIJKLMNOPQRSTUVWX YZ0123456789 abcdefghijklmnopqrstuvwx

yz!@#%^&*()_+|{}[]:"<>?;'",./\*-.=;'กขฃคฅฆง จฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษ สหฬอฮ๐๑๒๓๔๕๖๗๘๙ ๆๅ฿อะอาอุึอูอิอีอึอือ่อ้อ๊อ๋อ์อำ�เแโใไ

ตัวอย่างขนาดและการเรียงพิมพ์เนื้อหาภาษาไทย-ภาษาอังกฤษ จัดแถวเสมอหน้า(Type Arranging:Left) ตัวอย่างการเรียงพิมพ์ด้วยแบบตัวอักษรเอกลักษณ์เฉพาะ(Corporated Identifier Font Family )ชื่อ ทริปเปิ้ลเอ-วาทิน-ทศพร-2012 ชื่อผู้ออกแบบ ผศ.ประชิด ทิณบุตรออกแบบและแก้ไขโดยนาย ทศพร บรรณ ทอง สาขาวิชาศิลปกรรม มหาวิทยาลัยราชภัฏจันทรเกษม กรุงเทพมหานครขนาดความสูงตัวอักษร12พ้อยท์

จัดแถวเสมอหลัง(Type Arranging:Right) ตัวอย่างการเรียงพิมพ์ด้วยแบบตัวอักษรเอกลักษณ์เฉพาะ(Corporated Identifier Font Family ) ชื่อ ทริปเปิ้ลเอ-วาทิน-ทศพร-2012 ชื่อผู้ออกแบบ ผศ.ประชิด ทิณบุตรออกแบบและแก้ไขโดยนาย ทศพร บรรณทอง สาขาวิชาศิลปกรรม มหาวิทยาลัยราชภัฏจันทรเกษมกรุงเทพมหานครขนาดความสูงตัวอักษร 14พ้อยท์

จัดแถวกึ่งกลาง(Type Arranging:Center) ตัวอย่างการเรียงพิมพ์ด้วยแบบตัวอักษรเอกลักษณ์เฉพาะ(Corporated Identifier Font Family )ชื่อ ทริปเปิ้ลเอ-วาทิน-ทศพร-2012 ชื่อผู้ออกแบบ ผศ.ประชิด ทิณบุตรออกแบบและแก้ไขโดยนาย ทศพร บรรณ ทอง สาขาวิชาศิลปกรรม มหาวิทยาลัยราชภัฏจันทรเกษม กรุงเทพมหานครขนาดความสูงตัวอักษร 16 พ้อ ยท์

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

ตัวอย่างการเรียงพิมพ์ข้อความขนาดความสูงตัวอักษรหลายขนาดจัดวางในโปรแกรม Illustrator

ข้อความสำ�หรับการทดสอบการพิมพ์รับคำ�สั่งพิมพ์ และเพื่อแสดงตำ�แหน่งการพิมพ์รูปอักขระที่ ออกแบบ - จัดช่องว่าง ช่องไฟระหว่างรูปอักขระและระหว่างคำ� ทั้งชุดคือภาษาอังกฤษกับภาษาไทย 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) อักษรภาษาไทย ภาษาอังกฤษ คำ�กลอนไทยสำ�หรับใช้พิมพ์ทดสอบผลการออกแบบ แสดงโครงสร้างของตัวอักษร การจัดระดับตำ�แหน่ง รูปพยัญชนะ สระ วรรณยุกต์ เครื่องหมายวรรคตอน การจัดระยะช่องไฟรอบรูปอักขระหรือฟ้อนต์ส่วน ภาษาไทย ที่สร้าง บันทึก ติดตั้ง และหรือทดสอบในโปรแกรมฟ้อนต์ครีเอเตอร์และัหรือด้วยโปรแกรมประ ยุกต์อื่นๆในระบบ เขามักใช้คำ�กลอนนี้ ให้นักศึกษาคัดลอกไปวาง เปลี่ยนเป็นฟ้อนต์ที่เราทำ� ตรวจสอบระยะ ช่องไฟกั้นหน้า-หลัง การประสมคำ�ตำ�แหน่งสระและวรรณยุกต?ว่าตรงตำ�แหน่งตามหลักไวยกรณ์ของไทย หรือใหม่และบันทึกเป็นหลักฐานแสดงในรายงาน ภาษาอังกฤษให้ตรวจสอบดูด้วยตาเองว่าระยะเป็นอย่างไร แล้วไปแก้ไขในตารางฟ้อนต์ และทดสอบใหม่ ซ้ำ�ๆ จนแน่ใจว่าเป็นระยะและตำ�แหน่งที่ถูกต้องแล้ว

คำ�กลอนตรวจสอบแบบตัวอักษร ตำ�แหน่งพิมพ์ผสมคำ�ไทย "เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน จงฝ่าฟันพัฒนาวิชาการ อย่าล้างผลาญ ฤๅเข่นฆ่าบีฑาใคร ไม่ถือโทษโกรธแช่งซัด ฮึดฮัดด่า หัดอภัยเหมือนกีฬา อัชฌาสัย ปฏิบัติประพฤติกฎ กำ�หนดใจ พูดจาให้จ๊ะๆจ๋า น่าฟังเอยฯ"

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