เห่อของใหม่จ้า variable font ตัวแรกของผม :30: หลังจากที่อยากจะทำเมื่อ 3 ปีที่แล้ว แต่ไม่สามารถ จนได้รับคำแนะนำจาก Jipatype เทพฟอนต์ สาย opensource ขอขอบคุณมา ณ ที่นี้ด้วย :46:
(http://img3.f0nt.com/27/a513967be71722c57ef6e10e345d169c.gif)(http://img3.f0nt.com/27/a16d957c31472df1be9c77b750dca830.gif)(http://img3.f0nt.com/27/dce45b512971bad13e77d63b40533b2c.gif)
(http://img3.f0nt.com/27/f34a660a4cb40b73671fc136de8bac2f.gif)(http://img3.f0nt.com/27/609851a03eec0c0f5ec6349258967f08.gif)(http://img3.f0nt.com/27/7b5ea23d1036c6b568ab6189fa059a64.gif)
ฟอนต์ Kids VF เป็นฟอนต์แปลงร่างจากตัวอักษรไปเป็นรูปร่างต่างๆ ที่เราเคยหัดอ่านอักษรสมัยเด็กๆ :43:
(http://img3.f0nt.com/27/70dabde0236f14ceabc41f98779eb9fc.jpg)
อีกคนที่ต้องขอบคุณคือ web https://www.axis-praxis.org/specimens/__DEFAULT__ เป็นแหล่งที่ผมใช้ศึกษา variable font และยังเอามาใช้ในการนำเสนอ ฟอนต์ตัวนี้ด้วย :45: :45: :45:
(http://img3.f0nt.com/27/ed52079d1b2dc46ba4710fe0da3c15de.jpg)
download ได้ที่ https://mega.nz/#!GIBlHQqb!jQlzPt0axfY5G5xxlky3SUc-5uAAK7jCQxuOInDOLlM (https://mega.nz/#!GIBlHQqb!jQlzPt0axfY5G5xxlky3SUc-5uAAK7jCQxuOInDOLlM)
uvSOV
ปรกติวิธีการใช้ คือการเขียน web แล้วกำหนดค่า parameter ที่ฟอนต์กำหนดไว้ ก็จะได้รูปร่าง ตามที่เราออกแบบไว้ (แนะนำให้ดูงานของ Jipatype ครับ)
(http://img3.f0nt.com/27/c4085408895c7a27930d17520107ed81.gif)
(http://img3.f0nt.com/27/284175446ba8d92da59d402af6620337.gif)
ในรูปตัวอย่าง การเลื่อน bar คือการเปลี่ยนค่า width ของฟอนต์ หมายถึงการเปลี่ยนน้ำหนักของฟอนต์ นั้นเอง
ซึ่งผมทำไว้ในตัวพิมพ์เล็ก และอักษรที่เหลือ
(http://img3.f0nt.com/27/a61e32b8d7369ecc430ef62a6b508b5e.jpg)
:18: :25: :10:
ตัองขอความรู้บ้างเลยครับ :46: :46: :46:
โคตรโหดเลยครับบบ :0705:
ed_crub ได้เลยครับ
--------------------------
เล่าเรื่องเบื้องหลังนิดหน่อยนะครับ
ด้าน technic น้อง Jipatype ได้บอกไว้หมดแล้ว https://www.f0nt.com/forum/index.php/topic,23985.0.html
ขอเล่าเรื่องการออกแบบละกันครับ
ตัวอย่าง การออกแบบอักษร สำหรับ ตัวปรกติ และตัวหนามาก แบบแยกชิ้น
จำนวนจุดต้องเท่ากัน จุดเริ่มต้นต้องกำหนดที่เดียวกัน เมื่อฟอนต์ขยายขนาดจากตัวปรกติไปตัวหนา
สัดส่วนจะยังคงได้เพราะไม่ได้กำหนดจุดตัด แต่กำหนดความหนา และแยกชิ้นจากกันเป็น 2 ส่วน
(http://img3.f0nt.com/01/288e84c12b4da4fab8b91cba370322ed.jpg)
ตัวอย่าง การออกแบบอักษร สำหรับ ตัวปรกติ และตัวหนามาก แบบชิ้นเดียว
จุดที่มีการหักมุม เพื่อให้คงรูปอาจใช้วิธีนี้ คือกำหนดจุดลึกลงไปในเส้นอักษร เพื่อคงความหนาให้สม่ำเสมอ ปล่อยจุดตัดอิสระ
และมั่นใจว่าจะไม่ล้น เหมือนแบบแรก
(http://img3.f0nt.com/01/bdc08e68bc9172d796896d6edde9a45e.jpg)
ตัวอย่าง การออกแบบอักษร สำหรับ ตัวปรกติ และรูปภาพ
จำนวนจุดต้องเท่ากัน จุดเริ่มต้นต้องกำหนดที่เดียวกัน ซ่อนองค์ประกอบอื่นๆไว้ในเส้นของตัวอักษร
อาจจะจับยืด เปลี่ยนความโค้ง หรือกลับ direction เช่นส่วนลูกตาไก่
(http://img3.f0nt.com/01/88726edc986364ad1e65e976d48d2128.jpg)
ตัวอย่าง การออกแบบอักษร สำหรับ ตัวปรกติ และรูปภาพ
แบบที่มีการซ่อนจำนวนจุดไว้ เพื่อปรับรูปได้หลากหลายขึ้น เช่นลำตัวช้างที่กลายร่างมาจากเส้นขีดเดียว กลายเป็นตัว และขา
(http://img3.f0nt.com/01/e3f3e805d19a3727acebcca0fe8b4ae4.jpg)
:46: :46: :46: :25: :25: :25:
ชื่อฟอนต์ : SOV_Kids_VF
ลิงก์ : https://www.f0nt.com/forum/index.php/topic,24029.0.html
ข้อมูลการติดต่อ : https://www.facebook.com/worawut.thanawatanawanich (https://www.facebook.com/worawut.thanawatanawanich)
ภาพตัวอย่าง :
(http://img3.f0nt.com/25/79e14d6f617c511a3428fa4228393774.jpg)
ภาพไอคอน :
(http://img3.f0nt.com/25/6d06762161a11ed78ee544e20c053946.gif)
ภาพโปสเตอร์ :
(http://img3.f0nt.com/25/70c8b87791a169ddf413b77843d381ef.jpg)
รายละเอียด :
Variable Font ที่ทำเป็นฟอนต์แปลงร่างจากตัวอักษรไปเป็นรูปภาพ เหมือนสมัยหัดอ่าน ก.ไก่ ข.ไข่ A ant B bird
เหมาะสำหรับแสดงผลบน web เพราะมีการเปลี่ยนรูปร่างได้
download font : https://mega.nz/#!adhn3KpQ!_Mw3Fk_5t1QOETdms95UqxduqYioTmB3IOhlfYsm2h0 (https://mega.nz/#!adhn3KpQ!_Mw3Fk_5t1QOETdms95UqxduqYioTmB3IOhlfYsm2h0)
ขอบคุณครับ
uvSOV
แบบนี้บางโปรแกรมที่ถ้าเจอเส้นเวกเตอร์ซ้อนกันแล้วมันจะกลับเป็น invert ไหมครับ
อ้างคำพูดจาก: iannnnn เมื่อ 01 ก.พ. 2020, 23:23 น.
แบบนี้บางโปรแกรมที่ถ้าเจอเส้นเวกเตอร์ซ้อนกันแล้วมันจะกลับเป็น invert ไหมครับ
เท่าที่เคยลอง ถ้า vector ทิศทางเดียวกัน ซ้อนได้..เนียนๆไป ถ้า ทิศทางกลับกัน ซ้อนกันเมื่อไรก็จะ invert ครับ :33:
ฟอนต์ที่เคยทำไป ถ้าลืมตรวจสอบ direction ก็จะเห็นผลงานแบบ invert เสมอๆครับ :41:
ขอบคุณครับ