Font CRU-Nonthawat

รายงานการสร้าง Font

High-Logic FontCreator 

ภาพที่ 1 โลโก้ High-Logic

(ที่มา : httpblog.fastncheap.comwp-contentuploads201112high-logic-logo-1024x211.png)

โปรแกรม adobe illustrator cs5

ภาพที่ 2 โลโก้ โปรแกรม adobe illustrator cs5

(ที่มา : http://www.indesignthai.com/?p=390)

การจัดทำ Project Font ชุดนี้ โดยใช้ โปรแกรม FontCreator นี้

ได้มีขั้นตอนการจัดทำดังต่อไปนี้

1.การเขียน Font ลายมือโดยใช้ ตารางTemplate

2.วิธีนำ Font ลายมือเข้าเครื่องเพื่อทำเป็นไฟล์

3.วิธีทำ Font หนาและเอียง

4.การติดตั้ง Font ลายมือ เพื่อใช้งาน

โดยขั้นตอนที่ได้กล่าวมานี้สามารถสร้าง Font ลายมือไปใช้เองได้ รวมถึงการสร้างสรรค์ผลงานต่างๆผ่าน font ที่สร้างหรือเขียนขึ้นเองได้ โดยนำไปใช้ในเทศการต่างๆได้เป็นอย่างดี ขั้นตอนการออกแบบนี้บอกถึงรายระเอียดตั้งแต่การเขียน Font จนถึงการติดตั้ง Font และใช้งานใด้จริง

1.การเขียน Font โดยใช้ ตาราง Template

การเขียน Font โดยใช้ ตาราง Template นั้น ต้องมีอุปกรณ์ดังต่อไปนี้

   1.1 ตาราง Templateการสร้างหรือการหาตารางTemplate นั้น หาดาวน์โหลดได้ในอินเตอร์เน็ตหรือสร้างขึ้นมาเองตัวอย่างดังภาพ

                             ตาราง Template ภาษาอังกฤษ       ตาราง Template ภาษาไทย

ภาพที่ 3 ตารางการเขียน

(ที่มา : ผศ.ประชิด ทิณบุตร)

ซึ่ง ตาราง Template ที่ได้นำมาเป็นตัวอย่างนั้นจะมีอยู่ 2 แบบคือ แบบเขียนภาษาอังกฤษ และ แบบเขียนที่เป็น โดยทั้ง 2 แบบ จะมีช่อง สี่เหลี่ยมเหมือนกันทั้ง 2 แบบ ซึ่งแต่ละช่องสีเหลี่ยมนั้น จะมีเส้นบอกขนาดของตัวอักษรที่เราจะต้องเขียน สังเกตุตรงช่องสีเหลียมจะเห็นได้ว่าจะมีเส้นบอกขนาดของตัวอักษรทั้งซ้ายและขาว ทุกๆช่องจะมีเหมือนกันทั้งหมดทุกช่องและจะมีความสูงของขนาดเส้นเท่าๆกัน

 1.2.ปากกา Pigma โดยจัดหาได้ทั่วไปตามร้านค้าต่างๆ ซึ่งต้องมีขนาดความหนาของเส้น 0.1 มม. โดยจะทำให้การเขียน Font สวยงามและไม่ใหญ่เกินไป ตัวอย่างดังภาพ

ภาพที่ 4 ปากกาใช้ในการเขียน

(ที่มา:httpwww.chornakorn.co.thproducts.phpcat_id=7&cat_sub_id=26&product_id=2160)

ไม่ได้อุปกรณ์ทั้ง 2 ครบแล้ว ให้ลงมือทำโดยใช้ปากกาที่ได้นำมาเขียนลงบนตราTemplate ตามที่ได้วางแผนไว้ โดยแต่ละช่องของตาราง จะมีการระบุตัวอย่างของตัวอักษรไว้ตามช่องเมื่อเขียนเรียบร้อยแล้วจะได้ตามตัวอย่างซึ่งตัวอย่างนี้ได้เขียนตารางขึ้นมาใหม่จะได้ดังภาพ

ภาพที่ 5 ภาพตัวอย่างที่ได้จากการเขียน

(ที่มา : นนทวัฒน์ บุตรนัย)

โดยให้เขียนตัวอักษรทุกตัวลงตามช่องที่มีตัวตัวอักษรนั้นกำหนดไว้ตามตัวอย่างด้านบน เมื่อเขียนลงบน ตารางTemplate ตามที่วางแผนไว้ก็จะได้ตามตัวอย่างคร่าวๆที่อยู่ด้านล่าง ซึ่งจะมีทั้งภาษาอังกฤษและภาษาไทยดังภาพต่อไปนี้

ภาพที่ 6 ภาพตัวอย่างที่ได้จากการเขียน

(ที่มา : นนทวัฒน์ บุตรนัย)

2.วิธีนำ Font เข้าเครื่องเพื่อทำเป็นไฟล์

เมื่อได้ทำการเขียน Font บน ตารางTemplate เรียบร้อยแล้ว ขั้นตอนต่อไปคือ

           2.1 นำกระดาษที่เป็น ตารางTemplate ไป สแกนลงเครื่องหรือถ่ายรูป โดย Resolution อยู่ที่ 300 DPI ซึ่งจะได้ขนาดของไฟล์ใหญ่ และขยายภาพได้มากขึ้น

            2.2 วิธีการจัดทำ Font ลายมือโดยใช้โปรแกรม FontCreator5.5 จะมีขั้นตอนต่อไปนี้

เปิดโปรแกรม  FontCreator5.5 ขึ้นเพื่อสร้าง Font และเปิดอีกหนึ่งโปรแกรม (โปรแกรมอะไรก็ได้ที่สามารถ Copy ได้เช่น Adobe Photoshop, Adobe Illustrator เป็นต้น ) โดยส่วนตัวในการจัดทำ Font ในครั้งนี้ได้ใช้ Adobe Illustrator ในการสร้างผลงานโดยซึ่ง Illustrator สามารถดราฟเส้นได้ Illustrator จะมีขั้นตอนการทำงานดังนี้

                -เมื่อเปิดโปรแกรมขึ้นเสร็จเรียบร้อยแล้วโดยโปรแกรม Adobe Illustrator สามารถดึงภาพใส่ได้เลยและทำการล๊อคภาพไว้เพื่อไม่ให้ภาพขยับจากนั้นทำการดราฟโดยใช้เครื่องมือ Pen Tool ในการดราฟ Font จากภาพที่ได้ออกแบบไว้

ภาพที่ 7 ภาพตัวอย่างในการทำงาน

ที่มา: นนทวัฒน์ บุตรนัย

ส่วนโปรแกรม FontCreator ให้เปิด ตัวอย่าง Font ที่จะนำมาทำงาน (Font อะไรก็ได้ที่มีภาษาไทย) โดยการทำ Project นี้ผมได้ใช้ ต้นฉบับที่เป็น Font AAA-Watin-newในการทำ Project นี้ เมื่อเปิดเสร็จแล้วก็จะได้ตัวอย่างดังภาพต่อไปนี้

ภาพที่ 8 ภาพตัวอย่างในการทำงาน

(ที่มา:นนทวัฒน์ บุตรนัย)

          เมื่อดราฟเรียบร้อยแล้วขั้นตอนต่อไป คือ ให้ Copy ตัว Font ที่ได้ดราฟแล้วจากโปรแกรม Adobe Illustrator โดยใช้เครื่องมือของ Adobe Illustrator คือ Selection Tool (V) เพื่อความเรียบง่ายในการ Copy โดยใช้เครื่องมือ Selection Tool (V) ลากเส้นทับให้เป็นสี่เหลี่ยมดังภาพต่อไปนี้

ภาพที่ 9 ภาพตัวอย่างในการทำงาน

(ที่มา : นนทวัฒน์ บุตรนัย)

เมื่อได้ดังภาพให้กด Ctrl +C เพื่อเป็นการ Copy หลังจากนั้นให้ไปที่โปรแกรม FontCreator โดยไปที่ตัวอักษรนั้นๆที่เรา Copy ดังภาพ

ภาพที่ 10 ภาพตัวอย่างในการทำงาน

(ที่มา : นนทวัฒน์ บุตรนัย)

เมื่อได้ดังภาพให้ดับเบิ้ลคลิ๊กไปที่ตัวอักษรนั้นเข้าไปจะได้ดังรูปภาพ

ภาพที่ 11 ภาพตัวอย่างในการทำงาน

(ที่มา : นนทวัฒน์ บุตรนัย)

เมื่อได้ดังภาพแล้วให้กด Ctrl+V เพื่อเป็นการวางตัวอักษรที่เราได้ Copy ไว้เมื่อ Ctrl+V ก็จะได้ดังภาพต่อไปนี้

ภาพที่ 12 ภาพตัวอย่างในการทำงาน

(ที่มา : นนทวัฒน์ บุตรนัย)

เมื่อได้ดังภาพให้จัดวางตำแหน่งโดยแทนตัวอักษรเดิมที่มีอยู่และจัดวางขนาดตามความเหมาะสมที่ต้องการ โดยจะมีเส้นต่างที่ไว้บอกขนาดของแต่ละตัวอักษร

โดยให้ทำแบบตัวอย่างนี้ไปจนครบทุกตัวอักษรทั้ง Font ภาษาไทยและ อังกฤษ ซึ่งให้สังเกตุว่าขนาดความสูงของต้นฉบับ เช่น ตัวภาษาอังกฤษพิมพ์ใหญ่ ตัวภาษาอังกฤษพิมพ์เล็ก ตัวเลข ตัวอักษรไทย สระไทย ตัวเลขไทย เป็นต้น จะมีความสูงแตกต่างกันไป  โดยช่องว่างระหว่างตัวอักษรจะมีวิธีการและจัดระเบียบตามขั้นตอนต่อไปนี้

            เมื่อได้วางตัวอักษรแล้วจะต้องจัดเส้นไกด์หน้าหลังโดยเส้นหน้าจะวางห่างจากตัวอักษรแล้วแต่ความเหมาะสมวิธีทำก็คือ เมื่อวางตัวอักษรแล้วให้ทำคลิกขาวเมื่อคลิกขวาแล้ว จากนั้นให้เข้าไปที่  Properties… ที่อยู่ด้านล่างสุด

จากนั้นให้ทำการตั้งค่าหรือคำนวนส่วนต่างๆของตัวอักษรแล้วใส่ตัวเลขตามที่ต้องการหรือทำการทดลงใส่ดูก่อนตามตวามเหมาะสมจากนั้นจึงทำการแก้ไข

 เมื่อจัดวางเรียบร้อยทุกตัวอักษรแล้วขั้นตอนต่อไปคือการเปลี่ยนชื่อ Font เช่น Font AAA-Watin-new เป็น CRU-nonthawat เป็นต้น จะมีวิธีการทำดังนี้ให้ไปที่ Format +Naming ก็จะได้ภาพดังต่อไปนี้ โดยให้เข้าไปที่ เมนู Fornat ต่อด้วย Naming

จากนั้นให้ทำการเปลี่ยนชื่อตามที่ได้กล่าวไว้ เมื่อเปลี่ยนชื่อเสร็จแล้วให้กด Advanced

จะเห็นช่องว่างให้เขียนชื่อ Font ของคุณเมื่อตั้งชื่อที่คุณต้องการเสร็จแล้วให้กด OK เพื่อเป็นการยืนยันในการเปลี่ยนชื่อเป็นของผู้ทำเอง

3.วิธีทำ Font หนาและเอียง

      ขั้นตอนในการทำ Font ต้น ฉบับให้เป็นตัวหน้าและตัวเอียงมีวิธีการดังต่อไปนี้

ขั้นตอนแลกคือเมื่อเปิด โปรแกรม Font Creator ขึ้นมาแล้วจากนั้นทำการเปิก Font ที่เราได้สร้างเสร็จแล้วขึ้นมาจะได้ตัวอย่างดังภาพต่อไปนี้ 

ภาพที่ 13 ภาพตัวอย่างการทำงานในโปรแกรม Font Creator

(ที่มา : นนทวัฒน์ บุตรนัย)

เมื่อได้ตัวอย่างดังภาพแล้วให้กด Ctrl และ ตัว A พร้อมกันจากนั้นจะได้เหมือนภาพตัวอย่างที่อยู่ด้านล่าง ซึงการกด Ctrl และ ตัว A นั้นเป็นคำสั่งที่สามารถสั่งทั้งหมดได้ที่เดียวดังภาพ

ภาพที่ 14 ภาพตัวอย่างการทำงานในโปรแกรม Font Creator

(ที่มา : นนทวัฒน์ บุตรนัย)

เมื่อได้ตามตัวอย่างแล้วให้ไปที่คำสั่ง Toois จากนั้นให้ไปที่คำสั่ง Glyph TransFormer…เพื่อใช้ในคำสั่งต่อไป เมื่อกดเข้าไปแล้วจะได้เหมือนภาพตัวอย่างที่อยู่ด้านล่าง

ภาพที่ 15 ภาพตัวอย่างการทำงานในโปรแกรม Font Creator

(ที่มา : นนทวัฒน์ บุตรนัย)

เมื่อได้ดังภาพแล้วจะมีเมนูชื่อ Effects ซึ่งคำสั่งนี้สามารถทำให้เป็นตัวหน้าหรือตัวเองได้ ส่วนตัวเอียงให้ไปที่คำสั่ง Italic เมื่อกดเข้าไปแล้วหน้าต่างนั้นจะขึ้นลายละเอียดที่สามารถแก้ไขได้ซึ่งสามารถจะให้ตัวอักษรเอียงแค่ให้ก็ได้โดยสามารถตั้งค่าความเอียงได้ที่ Angle สามารถตั้งได้ตามความต้องการ จากนั้นใด้กด OK เมื่อกด OK แล้วไม่สามารถกับมาแก้ไขให้เหมือนเดิมได้จะแก้ไขได้ก้ต่อเมื่อยังไม่ได้ บันทึกการทำงานของเราและให้ปิดส่วนที่เราได้ทำผิดไปและให้เปิดขึ้นมาทำใหม่นั้นเอง ส่วนตัวหนาก็ใช้วิธีทำเหมือนกันโดยให้เข้าไปที่เมนู Bold เมื่อกดเข้าไปแล้วก็สามารถตั้งค่าได้เหมื่อกันวิธีทำเหมือนกันทั้งหมด มเอทำการบันทึกงานเรียบร้อยแล้วและได้แก้ไขชื่อเรียบร้อยแล้วก็จะได้ชื่อและคำต่อท้ายเช่นตัวอย่างต่อไปนี้

สมมุติว่าชื่อ Font เดิมเป็น CRU-Nonthawat-Regular เมื่อเปลี่ยนเป็นตัวเอียงข้อความที่ต่อท้ายชื่อเราสามารถเปลี่ยนเป็น CRU-Nonthawat-Italic ซึ่งคำที่ต่อท่ายนี้คือชื่อประจำของ Font ที่ได้เปลี่ยนเป็นคำสั่งนั้นๆ ซึ่งตัวหนาก็จะเป็น CRU-Nonthawat-Bold และทั้งหนาและเอียงรวมกันก็จะได้ CRU-Nonthawat-Bold-Italic

ขั้นตอนการทดลอง Font ที่ได้สร้างขึ้นโดยใช้โปรแกรม FontCreator จาก FontCreator ให้ไปที่เมนู Font +Test เพื่อทำการทดสอบ Font ที่เราสร้างขึ้นจะได้ดังภาพ

ภาพที่15 ภาพตัวอย่างการพิมพ์ในโปรแกรม Font Creator

(ที่มา : นนทวัฒน์ บุตรนัย)

เมื่อทดสอบเรียบร้อยแล้วก็ต้องทดสอบกับโปรแกรมอื่นด้วยเพื่อความสมบูรณ์ของ Font เช่นโปรแกรม Adobe Photoshop, Adobe Illustrator, Microsoft office

4.การติดตั้ง Font ลายมือ เพื่อใช้งาน

วิธีการติดตั้ง Font ลายมือลงเครื่องคอมพิวเตอร์ โดยง่าย ซึ่งใช้ Font ที่ได้สร้างไว้เรียบร้อยแล้ว โดยไปที่ Settings+Control Panel จากนั้นให้ไปคำว่า Font แล้วดับเบิ้ลคลิ๊กเข้าไปก็จะได้ภาพดังต่อไปนี้

ภาพที่ 16 ภาพตัวอย่างการติดตั้ง Font

(ที่มา : นนทวัฒน์ บุตรนัย)

เมื่อได้ดังภาพให้เปิดไฟล์หรือที่อยู่ของ Font ที่ได้สร้างไว้เรียบร้อยแล้วให้ Copy ไฟล์ Font ที่เราได้สร้างไว้เรียบร้อยแล้วโดยกด Ctrl +C เพื่อเป็นการ Copy จากนั้นให้กด Ctrl+ V ที่บนหน้าต่างที่แนบมาด้านบน แค่นี้ก็เป็นการเสร็จสิ้นการติดตั้ง  Font ที่ได้สร้างไว้เรียบร้อยแล้ว จากนั้นก็สามารถนำ Font ที่ได้สร้างไปใช้งาน

MASCOT

 MASCOT

    โครงการออกแบบ Mascot เพื่อรณรงค์การดื่มน้ำสะอาดปลอดภัยจากตู้บริการน้ำดื่มภายในมหาวิทยาลัย

เริ่มต้นด้วยการออกแบบแนวความคิดโดยการดรออิ้งด้านหน้า ด้านข้าง และด้านหลัง เพื่อใช้ทำงานในขั้นตอนต่อไป โดยแบบต่างๆ ที่ได้ออกแบบไว้สามารถต่อเติมส่วนอืนได้

                       แบบแนวความคิด

ขั้นตอนต่อไปคือถ่ายรูปหรือสแกนเพื่อจะได้เป็นไฟล์ ซึ่งจะได้ไปทำการดราฟตัว Mascotขึ้นมาทั้งสามแบบที่ได้ออกแบบไว้ เมื่อได้ทั้งสามตัวแล้วก็สามารถดัดแปลงส่วนต่างๆ ของตัว  Mascotขึ้มมาได้แบบที่ได้ดราฟเรืยบร้อยแล้วจะมีทั้งหมดจำนวนห้า โดยใช้โปรแกรม  illustrator ในการดราฟ

แนวคิดการออกแบบ เจ้าฮีโร่ผู้พิทักษ์น้ำ

ในการออกแบบ ตัว Mascot เจ้าฮีโร่ผู้พิทักษ์น้ำ มีแนวคิดคือต้องการกระตุ้นจิตสำนึกของคนในสังคมได้มีการรู้จักใช้น้ำอย่างรู้คุณค่า

โดยการนำตัว Mascot เจ้าฮีโร่ผู้พิทักษ์น้ำ มาใช้เป็นสัญลักษณ์แทน การรณรงค์โดยใช้กลุ่มที่มีอิทธิพลในการใช้สื่อเชิญชวนด้วยคำพูด

เพราะในสังคมเรานั้นมีหลากหลายอาชีพหลากหลายเทศกาลที่จำเป็นต้องใช้น้ำในปริมาณมาก เราจึงมีแนวคิดในการออกแบบตัว Mascot

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

แสดงความเป็นเอกลักษณ์ของตัว Mascot ที่เป็นเหมือนตัวฮีโร่ ที่แสดงถึงความเป็นมิตร พร้อมจะช่วยเหลือทุกคน โดยเป็นงาน์ Offset 4 Colour

ตัว Mascot ไที่ได้ออกแบบนั้มมีจำนวนที่แสดงท่าทั้งหมด 5 อริยาบท ซึ่งมี ท่าชูป้ายคำขวัญ ท่าเชิญชวน ท่าตรงด้านหน้า ด้านหลัง

และด้านข้าง

ท่าชูป้ายคำขวัญ มือซ้ายของตัว Mascot ได้ชูป้ายขอความที่มีขนาดเล็กหน้ารักและมือด้านขวาของตัว Mascot ได้ชี้ไปยังป้ายที่อยู่

ด้านขวามือของตัว Mascot ซึ่งให้ผู้พบเห็นได้อ่านและจดจำข้อความที่อยู่บนป้าย ส่วนป้ายสามารถปรับเปลี่ยนข้อความได้ตามที่ต้องการ และ

ที่สำคัญที่ขาดไม่ได้คือหน้าตาของ Mascot ที่ี่แสดงถึงความเป็นมิตรและร่าเริงอยู่ตลอดเวลา

ท่าเชิญชวน มือขาวของตัว Mascot ได้ถือแก้วน้ำส่วนมือซ้ายของตัว Mascot ได้ทำมือเป็นสัญลักษณ์ กดไลค์ ได้บอกถึงการแสดงออก

ในการใช้น้ำอย่างพอเพียงโดยใช้แก้วน้ำส่วนตัวซึ่งจะได้ลดการใช้ขวดน้ำพลาสติกให้น้อยลงในสโลแกนที่ว่ารณรงค์บริการน้ำดื่มสะอาดปลอดภัย

เพื่อลดปริมาณการใช้ขวดพลาสติก

ด้านหน้า ด้านหลัง และด้านข้าง ได้แสดงส่วนต่างๆ ของตัว Mascot คือส่วนประกอบของเครื่องแต่งกายส่วนต่างของ Mascot

และหน้าตาที่เป็นเหมือนตัวฮีโร่ ที่ได้แสดงถึงความเป็นมิตรของตัว Mascot

โดยส่วนตราสัญลักษณ์ที่ใช้ในเป็นส่วนประกอบการออกแบบตัว Mascot คือ ตราของมหาวิทยาลัยราชภัฏจันเกษมและ

ตราอักษรย่อของมหาวิทยาลัยราชภัฏจันเกษมซึ่งมีภาพดังต่อไปนี้

ตราของมหาวิทยาลัยราชภัฏจันเกษม

ที่มา : http://www.chandra.ac.th/th/logo.php

 ตราอักษรย่อของมหาวิทยาลัยราชภัฏจันเกษม

ที่มา : http://www.chandra.ac.th/th/logo.php

นอกจากจะได้ใช้ตราสัญลักณษ์ทั้งสองแล้วและยังได้มีการใช้ Font ของมหาวิทยาลัยราชภัฏจันเกษมเป็นส่วนหนึ่งงของการออกแบบชื่อของ Font คือ Font CRU-LanChand ซึ่งเป็น Font ที่ใช้พิมพ์นี้เองที่มาของ Font คือ http://www.chandra.ac.th/th/logo.php ที่สามารถเข้าไปดาวน์โหลดกันได้พร้อมกับตราสัญลักษณ์ต่างๆ ของมหาวิทยาลัยราชภัฏจันเกษม

วัตถุประสงค์

-เพื่อมุ่งให้บุคคลที่พบเห็นตัว Mascot จดจำได้ง่ายและสามารถนำความรู้สึกที่แสดงอยู่ในตัว Mascot ไปใช้ได้

วันที่ 16-01-13

วันที่ 16-01-13
-ได้สอนถึงการใช้ โปรแกรม FontCreator ว่าการตั้งค่า ขนาดของ Font เข้ไปที่ไหนและได้บอกถึงการจักวางของสระต่างๆ จากนั้นได้พูดถึงการจัดทำ Font ให้เป็นตัวเองต้องทำอย่างไรป้างตั้งค่าตรงไหนและตัวหนาตัวตรงไหน จากนั้นอาจาารย์ ได้ให้การบ้านไปทำโดยทำรายงานมาเพิ่มเติม

12-12-12

12-12-12
ได้พูดถึงการออกแบบหน้าเ็ว็บของตัวเองเช่นการตั้งหน้าเว็บเป็นต้นและได้สอบถึงการดาวน์โหลดจาดที่อาจารย์แชให้มาทำงานโดยใช้โปรแกรม Font Creator ใช้ในการทำงานออกแบบ Font โดยใช้โปรแกรมอื่นร่วมกับโปรแกรม Font Creator เช่น Adobe Illustrator หรือ Adobe Photoshop เป็นต้นโดยโปรแกรม

วันที่ 09-01-13

วันที่ 09-01-13
-อาจารย์ได้ตรวจสอบไฟต์งานที่อาจารย์ให้ทำเป็นการบ้าน
-ได้สอนถึงการทำรายงานของ Font ที่ได้ทำมาส่งอาจารย์ โดยบทความหรือเนื้อในของเล่มให้เป็นFont ที่เราได้ออกแบบมาเป็นตัวหนังสือในรายงาน และ ให้หาบทความที่เกี่ยวของกับการออกแบบ Font มารวมกันแล้วไม่ต่ำกว่า 15-20 หน้าเพื่อให้ในการพิมพ์และจะได้ตรวจสอบ Font ไปในตัวด้วย