ฟอนต์ KIDS VF

[uvSOV]

เห่อของใหม่จ้า  variable font ตัวแรกของผม    หลังจากที่อยากจะทำเมื่อ 3 ปีที่แล้ว แต่ไม่สามารถ จนได้รับคำแนะนำจาก Jipatype เทพฟอนต์ สาย opensource ขอขอบคุณมา ณ ที่นี้ด้วย  





ฟอนต์ Kids VF เป็นฟอนต์แปลงร่างจากตัวอักษรไปเป็นรูปร่างต่างๆ ที่เราเคยหัดอ่านอักษรสมัยเด็กๆ  



อีกคนที่ต้องขอบคุณคือ web https://www.axis-praxis.org/specimens/__DEFAULT__  เป็นแหล่งที่ผมใช้ศึกษา variable font และยังเอามาใช้ในการนำเสนอ ฟอนต์ตัวนี้ด้วย  


download ได้ที่ https://mega.nz/#!GIBlHQqb!jQlzPt0axfY5G5xxlky3SUc-5uAAK7jCQxuOInDOLlM
uvSOV

[uvSOV]

ปรกติวิธีการใช้ คือการเขียน web แล้วกำหนดค่า parameter ที่ฟอนต์กำหนดไว้ ก็จะได้รูปร่าง ตามที่เราออกแบบไว้ (แนะนำให้ดูงานของ Jipatype ครับ)





ในรูปตัวอย่าง การเลื่อน bar คือการเปลี่ยนค่า width ของฟอนต์  หมายถึงการเปลี่ยนน้ำหนักของฟอนต์ นั้นเอง
ซึ่งผมทำไว้ในตัวพิมพ์เล็ก และอักษรที่เหลือ

[ed_crub]

 
ตัองขอความรู้บ้างเลยครับ 

[iannnnn]

โคตรโหดเลยครับบบ

[uvSOV]

ed_crub  ได้เลยครับ
--------------------------
เล่าเรื่องเบื้องหลังนิดหน่อยนะครับ

ด้าน technic น้อง Jipatype ได้บอกไว้หมดแล้ว https://www.f0nt.com/forum/index.php/topic,23985.0.html
ขอเล่าเรื่องการออกแบบละกันครับ

ตัวอย่าง การออกแบบอักษร สำหรับ ตัวปรกติ และตัวหนามาก แบบแยกชิ้น
จำนวนจุดต้องเท่ากัน จุดเริ่มต้นต้องกำหนดที่เดียวกัน เมื่อฟอนต์ขยายขนาดจากตัวปรกติไปตัวหนา
สัดส่วนจะยังคงได้เพราะไม่ได้กำหนดจุดตัด แต่กำหนดความหนา และแยกชิ้นจากกันเป็น 2 ส่วน


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


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


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

[ed_crub]

 

[uvSOV]

ชื่อฟอนต์ : SOV_Kids_VF

ลิงก์ : https://www.f0nt.com/forum/index.php/topic,24029.0.html

ข้อมูลการติดต่อ : https://www.facebook.com/worawut.thanawatanawanich

ภาพตัวอย่าง :



ภาพไอคอน :


ภาพโปสเตอร์ :


รายละเอียด :
Variable Font ที่ทำเป็นฟอนต์แปลงร่างจากตัวอักษรไปเป็นรูปภาพ เหมือนสมัยหัดอ่าน ก.ไก่ ข.ไข่ A ant B bird
เหมาะสำหรับแสดงผลบน web เพราะมีการเปลี่ยนรูปร่างได้

download font : https://mega.nz/#!adhn3KpQ!_Mw3Fk_5t1QOETdms95UqxduqYioTmB3IOhlfYsm2h0
ขอบคุณครับ
uvSOV

[iannnnn]

แบบนี้บางโปรแกรมที่ถ้าเจอเส้นเวกเตอร์ซ้อนกันแล้วมันจะกลับเป็น invert ไหมครับ

[uvSOV]

แบบนี้บางโปรแกรมที่ถ้าเจอเส้นเวกเตอร์ซ้อนกันแล้วมันจะกลับเป็น invert ไหมครับ

เท่าที่เคยลอง ถ้า vector ทิศทางเดียวกัน ซ้อนได้..เนียนๆไป ถ้า ทิศทางกลับกัน ซ้อนกันเมื่อไรก็จะ invert ครับ 
ฟอนต์ที่เคยทำไป ถ้าลืมตรวจสอบ direction ก็จะเห็นผลงานแบบ invert เสมอๆครับ 

[iannnnn]

ขอบคุณครับ