ขั้นตอนการออกบแบบฟอนต์ลายมือใน Fontself

ขั้นตอนการออกบแบบฟอนต์ลายมือใน Fontself

- เข้าไปที่ Website   http://www.fontself.com/

- หลังจากนั้นสมัครสมาชิกให้เรียบร้อย

- เข้าไปในคำสั่ง myfont

- เลือกคำสั่ง Create a new font

ภาพที่1แสดงหน้าเว็บไซต์ www.fontself.com
ที่มา:ชานนท์ เกษมวรรณกร,2555
- ขั้นตอนต่อไปตั้งชื่อ font ของเราครับ

   - หลังจากตั้งชื่อเรียบร้อยแล้ว ก็เลือก Start your font เพื่อทำขั้นตอนต่อไป

ภาพที่ 2 แสดงหน้าเว็บไซต์ www.fontself.com ขั้นตอนการตั้งชื่อฟอนต์
ที่มา:ชานนท์ เกษมวรรณกร,2555

- หลังจากที่เรา Download ไฟล์ PNG และ แล้วออกแบบฟอนต์ลายมือนั้นลงในไฟล์แทมเพลตให้เรียบ ทำการสแกนที่ที่มีค่า DPI สูงๆเพื่อความละเอียดที่คมชัดขึ้น ออกแบบตัวอักษรด้วยมือหรืออุปกรณ์อื่นๆเสร็จแล้ว

       - ก็นำไฟล์ที่เราทำ มา import ทำการอัพโหลดลงไปในโปรแกรมออนไลน์

ภาพที่ 3 แสดงหน้าเว็บไซต์ ขั้นตอนการดาวน์โหลดเทมเพลตฟอนต์
ที่มา:ชานนท์ เกษมวรรณกร,2555
หลังจากนั้นทางเว็บก็จะสแกน font ที่เราเขียนขึ้นมาโดยอัตโนมัติครับ

  

ภาพที่ 4 แสดงหน้าเว็บไซต์ การอัพโหลดไฟล์ฟอนต์ที่ทำการออกแบบไว้
ที่มา:ชานนท์ เกษมวรรณกร,2555

- สามารถปรับขนาดซ้ายขวา จัดตำแหน่งให้เท่ากัน โดยสามารถยืดขยาย หมุ่นและเลื่อนขึ้นลงได้

ภาพที่ 5 แสดงหน้าเว็บไซต์

ที่มา:ชานนท์ เกษมวรรณกร,2555
ภาพที่ 6 แสดงหน้าเว็บไซต์ เมื่อนำไฟล์ที่ออกแบบอัพโหลดลงในโปรแกรมออนไลน์
ที่มา:ชานนท์ เกษมวรรณกร,2555


ภาพที่ 7 แสดงหน้าเว็บไซต์ การCROPภาพฟอนต์ซึ่งอาจมีบางตัวที่หลุดหรือไม่ได้อยู่ในCROPเหลี่ยม
ที่มา:ชานนท์ เกษมวรรณกร,2555

- จะสังเกตได้ว่า ขณะที่เรายังไม่ได้จัดเรียงตัวอักษร ข้อความตัวอย่างด้านบน ยังติดกันอยู่ และไม่มีทิศทาง

  - การที่เราจะปรับขนาดหรือจัดเรียงตัวอักษรนั้น สามารถดูตัวอย่างด้านบนข้อความด้านบนได้ครับ

  - เมื่อปรับเปลี่ยนทุกอย่างจนลงตัวแล้ว ก็เลือก Save Font ได้เลยครับ

ภาพที่ 8 แสดงหน้าเว็บไซต์ จัดช่องไฟของฟอนต์แต่ละตัว
ที่มา:ชานนท์ เกษมวรรณกร,2555

ภาพที่ 9 แสดงหน้าเว็บไซต์
ที่มา:ชานนท์ เกษมวรรณกร,2555
ภาพที่ 10 แสดงหน้าเว็บไซต์
ที่มา:ชานนท์ เกษมวรรณกร,2555

- หากต้องการเซฟแล้วกลับไปแก้ไข้อีก ให้เลือก Save and Continue editing

  - หรือหากต้องการเซฟและออกไปสู่หน้าหลักให้เลือก Save and Exit

ภาพที่ 11 แสดงหน้าเว็บไซต์
ที่มา:ชานนท์ เกษมวรรณกร,2555

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

การออกแบบฟอนต์ลายมือจาก FontCreator

ภาพที่1แสดงหน้าเทมเพลตฟอนต์ลายมือ

ที่มา:ชานนท์ เกษมวรรณกร,2555

2.แสกนภาพที่เขียนลงในเครื่องคอมพิวเตอร์ทำการปรับตกแต่งภาพให้เกิดความคมชัด(หากภาพที่แสกนมาไม่ชัดหรือมีพื้นที่ที่ต้องการตัดลบ)ผ่านทางโปรแกรมแต่งรูปตามถนัดในที่นี้ผู้ออกแบบได้ใช้การปรับตกแต่งผ่านทางโปรแกรม photoshop ซึ่งนักออกแบบส่วนใหญ่คงรู้จักกันดี

ภาพที่ 2 แสดงหน้าการปรับแต่งฟอนต์จากโปรแกรมphotoshop

ที่มา:ชานนท์ เกษมวรรณกร,2555

3.เปิดโปรแกรม High-Logic FontCreator ----file----open----font file—  ขั้นตอนนี้เป็นการเลิกเปิดเทมเพลตฟอนต์เพื่อเป็นต้นแบบในการจัดวางฟอนต์ลายมือของเราผู้ออกแบบควรเลือกฟอนต์ที่จะนำมาเป็นแบบเทมเพลตจากฟอนต์ที่เป็นมาตรฐานที่มีทั้งภาษาไทยและภาษาอังกฤษโดยสังเกตว่าไฟล์ที่จะเปิดต้องเป็นไฟล์.ttfในที่นี่ผู้ออกแบบขอใช้เทมเพลตต้นฉบับจากCRU-Pilasluck.ttfซึ่งเป็นฟอนต์ลายมือที่ผู้สอนได้ทำการออกแบบไว้แล้ว

ภาพที่ 3 แสดงหน้าการเปิดไฟล์โปรแกรม FontCreator

ที่มา:ชานนท์ เกษมวรรณกร,2555

ภาพที่ 3.1 แสดงหน้าการเลือกไฟล์ฟอนต์

ที่มา:ชานนท์ เกษมวรรณกร,2555

ภาพที่ 4 แสดงหน้าของโปรแกรม FontCreator

เมื่อนำไฟล์ฟอนต์มาปรับแต่งหรือออกแบบ

ที่มา:ชานนท์ เกษมวรรณกร,2555

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

ภาพที่ 5 แสดงหน้าการเปิดไฟล์ฟอนต์ตัวอักษร F

ที่มา:ชานนท์ เกษมวรรณกร,2555

ภาพที่ 6 แสดงหน้าการcopy ภาพจากดปรแกรม PS

ที่มา:ชานนท์ เกษมวรรณกร,2555

5.วิธีการนำฟอนต์ลายมือของเราลงในโปรแกรมฟอนต์High-LogicFontCreatorนั้นทำได้โดยการcopyฟอนต์ทีละตัวมาจากโปรแกรมแต่งภาพปรับภาพแล้วนำไปpast(ก่อนpastควรดับเบิ้ลคลิกที่ฟอนต์นั้นก่อนและทำการpast)ลงแทนฟอนต์ต้นฉบับใน High-Logic FontCreator ทีละตัว

ภาพที่ 7 แสดงหน้าของโปรแกรม FontCreatorการดัดตัวอักษร

ที่มา:ชานนท์ เกษมวรรณกร,2555

6.ปรับขนาดและสัดส่วนของฟอนต์ให้ถูกต้อง การจัดวางช่องไฟ ตำแหน่งระห่างหน้า-หลัง  ความสูง

- cap height คือ ความสูงของตัวอักษรพิพ์ใหญ่

-medien คือ ความสูงของตัวอักษรพิมพ์เล็ก

- x- height คือระห่างระหว่างเส้นฐานจนถึงเส้น medien ซึ่งเป็นช่วงของตัวพิมพ์เล็ก

-baseline คือเส้นฐาน

7.ในขณะทำการ past ฟอนต์ลงในโปรแกรมหรืออาจรอจน past จนเสร็จ ควรกด test หรือ F8 เพื่อทำการตวจระยะห่าง ช่องไฟ ความสูง โดยตรวจให้ครบถ้านอย่างละเอียดโดยเฉพาะ สระและพยัญชนะในภาษาไทยอาจปรากฎเป็นการซ้อนพยัญชนะได้หากจัดไม่ดี

ภาพที่ 8 แสดงหน้าของการเปลี่ยนชื่อและข้อมูลฟอนต์

ที่มา:ชานนท์ เกษมวรรณกร,2555

8.ทำการเปลี่ยนชื่อฟอนต์และข้อมูลผู้ออกแบบ รวมทั้งข้อมูลเกี่ยวกับฟอนต์ด้วย format---naming

ภาพที่ 9 แสดงหน้าของการเปลี่ยนชื่อและข้อมูลฟอนต์

ที่มา:ชานนท์ เกษมวรรณกร,2555

9.save ไฟล์ไว้โดยตั้งชื่อตามที่ต้องการ ในที่นี้ผู้สอนได้บังคบให้ตั้งชื่อโดยขึ้นต้นด้วย CRUแล้วตามด้วยชื่อตัวเอง โปรดระวังว่าข้อมูลบางอย่างที่ติดมากับฟอนต์นั้นอาจมีลิขสิทธ์ด้วย

ภาพที่ 10 แสดงหน้าของการติดตั้งฟอนต์

ที่มา:ชานนท์ เกษมวรรณกร,2555

10.การติดตั้งฟอนต์ในเครื่องพีซีหรือโน๊ตบุค ทำได้ตามปกติ ติดตั้งได้เลย และทดลองใช้ดูให้สมกับงานที่ต้องการด้วย

11.นำฟอนต์ลายมือไปเผยแพร่แจกใช้ฟรี ทาง www.fontspace.com

ขั้นตอนการนำฟอนต์ไปเผยแพร่ในwww.fontspace.com

1. สมัครสามชิกและทำการ log in เพื่อทำการอัพโหลด

ภาพที่ 11 แสดงหน้าของแสดงขั้นตอนการlog inwww.fontspace.com

ที่มา:ชานนท์ เกษมวรรณกร,2555

2.คลิกเลือก up load

ภาพที่ 12 แสดงขั้นตอนการอัพโหลดฟอนต์ในwww.fontspace.com

ที่มา:ชานนท์ เกษมวรรณกร,2555

3. เลือกไฟล์ฟอนต์ที่ต้องการอัพโหลดลง

ภาพที่ 13 แสดงขั้นตอนการอัพโหลดฟอนต์ในwww.fontspace.com

ที่มา:ชานนท์ เกษมวรรณกร,2555

ตั้งชื่อและอธิบายรายละเอียดเกี่ยวกับฟอนต์รวมทั้งข้อมูลของผู้ออกแบบด้วย

ภาพที่ 14 แสดงขั้นตอนการอัพโหลดฟอนต์ในwww.fontspace.com

ที่มา:ชานนท์ เกษมวรรณกร,2555

หน้าสำหรับเผยแพร่เพื่ออัพโหลดนำไปใช้

http://www.fontspace.com/chandrakasem-rajabhat-university/cru-janonkas

ภาพที่ 15 แสดงหน้าเว็บไซต์ fontspace

ที่มา:ชานนท์ เกษมวรรณกร,2555

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

ขั้นตอนการออกแบบฟอนต์ลายมือ จาก FontCreator

1.ดาวน์โหลดแทมเพลตที่เป็น grid สำหรับเขียนฟอนต์ลายมือโดยในที่นี้ผู้ออกแบบได้ประสบปัญหาว่าตารางที่ดาวน์โหลดมานั้นช่องในการเขียนเล้กเกิดไปสร้างปัญหาในการแสกนไม่ชัดจึงได้ปรับปรุงโดยการขยายเทมเพลตให้ใหญ่ขึ้นเพื่อง่ายต่อการเขียนและเพื่อความละเอียดที่ชัดขึ้นเมื่อนำไปแสกน

สัปดาห์ที่ 6

สรุปผลการเรียนรู้รายสัปดาห์
1.สั่งานให้ศึกษาดูงานจาก BOI FAIR
-BOI คืออะไร
-งานเกี่ยวกับอะไร
-เทคโนโลยีที่เกี่ยวข้องกับการออกแบบมีอะไรบ้าง
-มีการนำเสนออย่างไร
-เห็นฟอนต์ในการแสดงมีอะไรบ้าง
2.งานออกแบบฟอนต์ลายมือจาก font creator ทำการเปลี่ยนชื่อเจ้าของและผู้ออกแบบเป็นชื่อตัวเอง
3.อัพโหลดฟอนต์ลายมือที่ fontspace.com
4.ออกแบบหรือปรับปรุงฟอนต์เก่าให้ดีขึ้นเป็นversion 1
5.สรุปผลและรายงานส่งผู้สอน ทาง google document

สรุปงานและผลการเรียนรู้ที่ได้รับ
1.แนะนำวิธีการทำงานของโปรแกรม font creator
2.สร้างตัว Master Hxdp

ถาพที่ 1 แสดงกริด Glyp Structure ใน font creator

3.สร้าง grid ใหม่ใน  font creator ตั้งชื่่อเป็น Glyp Structure
4.การตั้งชื่อ ฟอนต์ ให้ขึ้นต้นด้วย CRU-JANON-HAND WRITTEN

ถาพที่ 2 แสดงการตั้งชื่อฟอนต์

สัปดาห์ที่ 5 Free Online GooglrApps Tools Assisted Design : Preliminary Design Research

1.แนะนำการใช้โปรแกรม Font Creator เพิ่มเติม
2.เมื่อได้ฟอนต์ออกแบบสำเร็จเรียบร้อยแล้ว ให้ไปอัพโหลดลง fontspace.com
3.ฟอนต์ลายมือที่ีสำเร็จแล้วให้ติดตั้งลงเครื่องแล้วทดลอง และให้เขียนเป็นเวอร์ชั่น 0
4.ปรับเปลี่ยนแก้ไขหรือสร้างฟอนต์ใหม่โดยเปลี่ยนเป็นเวอร์ชั่น1
5.ส่งฟอนต์ออกแบบทั้งสองเวอร์ชั่นใน Google Document และส่งรายงาน

6.สั่งงานดูงาน BOI FAIR แบบเจาะลึก รายเลียด ความหมาย BOI ,เทคโนโลยีที่เกี่ยวข้องกับการออกแบบมีอะไรบ้าง มีการนำเสนออย่างไร เห็นฟอต์แล้วถ่ายรูปมาด้วย เป็นฟอนต์ที่ออกแบบเองมาใหม่หรือไม่
7.สรุปผลการดูงาน BOI FAIR แล้วทำรายงานส่งผู้สอน ผ่านทางGoogle Document และสรุปลง Blogger
 เว็บไซต์งานนิทรรศการ http://www.boifair2011.com/view/th/home/home.jsf
ติดตามข้ออัพเดตผ่านทางสังคมออนไลน์ http://th-th.facebook.com/boifair2011,http://twitter.com/#!/boifair2011

สัปดาห์ที่ 4 Free Online Tools Assisted Design

ติดตั้งการและสอนการใช้โปรแกรมออกแบบฟอนต์ font creator


โดยการออกแบบฟอนต์ต้องเริ่มต้นการดาวน์โหลดแทมเพลตแบบตารางกริดมาก่อน โดยโปรแจคนี่ผู้สอนได้แจกเทมเพลตที่เป็นทั้งไทยและอังกฤษให้เพื่อนำไปเขียนเป็นลายมือตัวเองแล้วมาแสกน บันทึกและแชร์เอกสาร ผ่านทางgoogle document

เขียนลายมือตัวเองลงด้วยหมึกดำ ดดยให้ศึกษาถึงตำแหน่งในการเขียนให้ถูกต้อง แล้วนำมาแสกนในResalution สูง แล้วบันทึกเป็นไฟล์PNG

เปิดโปรแกรม font creator ขึ้นมาแล้วเปฺดไฟล์แทมเพลตขึ้นในโปรแกรม PHOTOSHOPหรือโปรแกรมเปิดรูปใดก็ได้แล้วทำการคัดลอกฟอนต์ลายมือลงใน font creator จนครบทุกตัว เมื่อเสร็จสิ้นให้ทำการตั้งชื่อฟอนต์โดยขึ้นต้นด้วยCRU-ชื่อตัวเอง แล้วบันทึกเป็นไฟล์ttf และติดตั้งลงเครื่องนำไปใช้ได้เลย แต่ให้ระวังเรื่องลิขสิทธิ์ด้วย