(http://img3.f0nt.com/15/3df203ec84c8683de19c51d263dcad12.jpg)
ฟอนต์ แท่ง คือการเขียนตัวอักษรโดยลางเส้นตั้ง อย่างเดียวก่อน (..แล้วจึงลากเส้นขวางทีหลัง)
(http://img3.f0nt.com/15/a481dc8255c4efa1602d317d7f631a44.jpg)
เริ่มจากให้ลองเดาว่า คำนี้อ่านว่าอะไรก่อน
(http://img3.f0nt.com/15/5945cb0a823f3207f282804968bb8681.jpg)
แน่นอน ไม่ได้อ่านง่ายๆ ถ้ายอมแพ้เมื่อไร ก็ให้กดปุ่ม bold เพื่อดูเฉลย
(http://img3.f0nt.com/15/280ace1a9e4d6559fd9822b66fef7223.jpg)
ก็เลย ลองทำ animate font แบบ SVG เพื่อลากเส้นขวางดู .. ผลออกมา ยังไม่เป็นอย่างที่หวัง แม้จัดฉากไว้แล้ว
(http://img3.f0nt.com/15/a6995e205eb7744da573f62373c20ed3.gif)
และยิ่งใช้งานจริงแบบไม่เตรียมการ ก็จะเละ อย่างนี้
(http://img3.f0nt.com/15/9970c8ca8adf1c8147558e8cf5fea311.gif)
55 ถือเป็นงานทดลองอีกอย่างสนุกดี เขียนโปรแกรมมือหงิก อ่านตำราอีกเพียบเลย แม้จะดู fail fail ก็เหอะ 55
ีuvSOV
download https://drive.google.com/file/d/1mTORvglBURD7Qh5j7P3hmdW0UTxBglXG/view?usp=sharing (https://drive.google.com/file/d/1mTORvglBURD7Qh5j7P3hmdW0UTxBglXG/view?usp=sharing)
เบื้องหลัง coding อย่างเมามัน สำหรับ animate font
เนื่องด้วย SVG file เป็นรูปก็จริง แต่มันเป็น XML text file ด้วย ดังนั้น ก็ใช้ editor ปรกติ เขียน code ลงไปเลยตรงๆ สะดวกสุดๆ
(http://img3.f0nt.com/16/f2eda32c54bba2ac9d0304a19dcbe411.jpg)
(http://img3.f0nt.com/16/90412531e3d6e45d07b718a76740e108.jpg)
reference site https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL (https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL) สำหรับพื้นฐาน
ส่วนลูกเล่น ยากๆ ให้ไปดูตัวอย่าง พวกที่เขียนด้วย java script แล้วแกะ parameter มาใช้งานได้ เพราะส่วนใหญ่ไม่มีใครเขียนลงไปใน SVG ตรงๆแบบนี้
สำหรับคนไม่อยาก coding สำหรับทำ animation www.svgator.com (ไม่ฟรี) เป็นเครื่องมือให้เราสามารถสร้าง animation ได้คล้ายๆกับโปรแกรม Ae, An พร้อม export เป็น .svg signle file. ยังไม่ได้ลองใช้ไม่รู้ว่าจะทำ animation font ได้หรือป่าว ดูโค้ดที่มัน export ออกมาจะกำกับ aniamte ด้วย css แทนกำกับด้วย pure xml
ในเชิงฟังก์ชันนี่ถือว่าล้ำอนาคตมาก :0705:
แต่อยากรู้ฟอนต์แอนิเมชันนี่ จะสามารถใช้งานในโอกาสไหนได้บ้างหนอ
เท่าที่พอนึกออกเร็วๆ (ถ้าโปรแกรมรองรับ)
ก็เช่น เอาไปใส่วิดีโอหนุกๆ / ทำพรีเซนเทชันว้าวๆ
คิดดูก็น่าสนุกมากเลยนะครับ ที่ต่อไปการแอนิเมตงานจะมากับฟอนต์ตั้งแต่แรกเลย โหดมาก :07:
ในทางเทคนิคแล้ว SVG + CSS สามารถสร้าง Interactive กับผู้ใช้ได้นอกจากการทำ Animation
เช่นตัวอย่างโค้ดอันนี้ https://codepen.io/chriscoyier/pen/NRwANp
ต่อไปในอนาคตถ้าโปรแกรมในตลาดลองรับได้มากพอสมควรจะเปิดมิติใหม่
ในการสร้างฟอนต์กันเลยทีเดียวจะเป็น Interactive Animation Font (IAF : คิดเอาเอง :53: :53:)
ความสามารถต่างๆจะรวมอยู่ในไฟล์เดียว OTF, TTF
เหยยย :25:
อ้างคำพูดจาก: Jipatype เมื่อ 17 ต.ค. 2021, 09:40 น.
สำหรับคนไม่อยาก coding สำหรับทำ animation www.svgator.com (ไม่ฟรี) เป็นเครื่องมือให้เราสามารถสร้าง animation ได้คล้ายๆกับโปรแกรม Ae, An พร้อม export เป็น .svg signle file. ยังไม่ได้ลองใช้ไม่รู้ว่าจะทำ animation font ได้หรือป่าว ดูโค้ดที่มัน export ออกมาจะกำกับ aniamte ด้วย css แทนกำกับด้วย pure xml
่ไปลองอันนั้นก่อนเลยครับ ..ลองเอา code มาใช้แล้ว เอาเข้า browser ตรงๆใช้งานได้ แต่เอามาทำ font ไม่ขยับเลย .. ก็เลยไปดูตัวอย่าง พบว่าต้องเขียน code ใน svg ตรงๆ ส่วน svgator..เน้น animate โดย CSS เป็นหลัก ซึ่งก็ถูกของเขา แต่ใช้คนละวัตถุประสงค์กัน
อ้างคำพูดจาก: Jipatype เมื่อ 17 ต.ค. 2021, 11:04 น.
ในทางเทคนิคแล้ว SVG + CSS สามารถสร้าง Interactive กับผู้ใช้ได้นอกจากการทำ Animation
เช่นตัวอย่างโค้ดอันนี้ https://codepen.io/chriscoyier/pen/NRwANp
ต่อไปในอนาคตถ้าโปรแกรมในตลาดลองรับได้มากพอสมควรจะเปิดมิติใหม่
ในการสร้างฟอนต์กันเลยทีเดียวจะเป็น Interactive Animation Font (IAF : คิดเอาเอง :53: :53:)
ความสามารถต่างๆจะรวมอยู่ในไฟล์เดียว OTF, TTF
จริง.. นี่ก็ไปแกะ code CSS มาจากที่นี่แหละ แล้วเอากลับมาเขียนใน SVG
แต่ส่วนตัว.. ก็คิดว่า interactive ผ่าน CSS, javascript น่าจะเหมาะกว่า SVG เอาไว้เป็นส่วน vector แสดงรูป ลูกเล่นเอาไปไว้ที่ web interface
อ้างคำพูดจาก: iannnnn เมื่อ 17 ต.ค. 2021, 10:46 น.
ในเชิงฟังก์ชันนี่ถือว่าล้ำอนาคตมาก :0705:
แต่อยากรู้ฟอนต์แอนิเมชันนี่ จะสามารถใช้งานในโอกาสไหนได้บ้างหนอ
เท่าที่พอนึกออกเร็วๆ (ถ้าโปรแกรมรองรับ)
ก็เช่น เอาไปใส่วิดีโอหนุกๆ / ทำพรีเซนเทชันว้าวๆ
คิดดูก็น่าสนุกมากเลยนะครับ ที่ต่อไปการแอนิเมตงานจะมากับฟอนต์ตั้งแต่แรกเลย โหดมาก :07:
ผมคิดได้แต่พวก เด้งดึ๋งๆ แต่จะวนเด้งๆไป ก็น่าเบื่อในที่สุด หรือไม่ก็ทำพวกอักษรพิเศษ เช่น logo แล้วมีแสงแว๊บผ่าน เทือกๆนั้น 55
ลองไปค้นๆดู เท่าที่หาๆดู แนวนี้น่าสนใจ น่าจะมาครับ --> animography ใช้สำหรับงาน after effect (ราคาก็สูงดีนะ) ใช้ jsx หรือไม่ก็ aescript
https://animography.net/collections/typefaces (https://animography.net/collections/typefaces)
https://aescripts.com/after-effects/animation-libraries/animated-typefaces/jsx-typeface/ (https://aescripts.com/after-effects/animation-libraries/animated-typefaces/jsx-typeface/)
มีตัวฟรีให้ทดลอง download มาศึกษาก่อน ถ้ามี after effect ใช้ ลองดูครับ (ผมไม่มี 55)
(https://cdn.shopify.com/s/files/1/0155/2821/products/Gilbert_Anim.gif?v=1614073448)
(https://cdn.shopify.com/s/files/1/0155/2821/products/Multicolore_Anim.gif?v=1612967575)
วันนี้ลอง เอาฟอนต์สี CORL/CPAL มารวมกับ SVG animate .. ได้แฮะ
คือโปรแกรมไหน ไม่รองรับ มันก็เป็นสีเฉยๆ แต่ถ้ารองรับ SVG มันก็ขยับ ยุกยิกๆได้
(http://img3.f0nt.com/17/d132cd052019a8921fa0df3472cb7ed8.gif)
โหดร้ายสุดๆ :07:
ชวนให้คิดถึง พวกป้ายไฟLED ป้ายไฟวิ่ง อยู่นะครับ
ไม่รู้ว่าหลักการจะแนวเดียวกันไหม :45:
ชื่อฟอนต์ : แท่ง
ลิงก์ : https://forum.f0nt.com/index.php/topic,24805.0.html
ข้อมูลการติดต่อ : https://www.facebook.com/worawut.thanawatanawanich (https://www.facebook.com/worawut.thanawatanawanich)
ภาพตัวอย่าง :
(http://img3.f0nt.com/15/a481dc8255c4efa1602d317d7f631a44.jpg)
(http://img3.f0nt.com/18/72dca80bd63775706dbb068c90be4061.jpg)
(http://img3.f0nt.com/15/5945cb0a823f3207f282804968bb8681.jpg)
(http://img3.f0nt.com/15/280ace1a9e4d6559fd9822b66fef7223.jpg)
(http://img3.f0nt.com/15/a6995e205eb7744da573f62373c20ed3.gif)
(http://img3.f0nt.com/17/d1eaf55a372668bea00c687ea3ca6fb6.jpg)
ภาพไอคอน :
(http://img3.f0nt.com/15/3df203ec84c8683de19c51d263dcad12.jpg)
ภาพโปสเตอร์ :
(http://img3.f0nt.com/17/bc2f3bdcb4571774bb96cf18096143ae.jpg)
รายละเอียด :
ฟอนต์ แท่ง คือการเขียนตัวอักษรโดยลางเส้นตั้ง อย่างเดียวก่อน เป็นคำหรือประโยคก่อน แล้วจึงลากเส้นขวางทีหลัง ซึ่งตอนที่เป็นเส้นตั้งก็จะอ่านยากมากถึงอ่านไม่ออก ให้กดปุ่ม bold จะได้คำเฉลย
และทำฟอนต์เปลี่ยนรูป(animate font) แถมมาขำๆด้วย
uvSOV
download font : https://drive.google.com/file/d/1mTORvglBURD7Qh5j7P3hmdW0UTxBglXG/view?usp=sharing (https://drive.google.com/file/d/1mTORvglBURD7Qh5j7P3hmdW0UTxBglXG/view?usp=sharing)
เอิ้ววววววว :07: :07: :07:
http://erikdemaine.org/fonts/tetris/ (http://erikdemaine.org/fonts/tetris/)
ทำเป็นตัวอนิเมท ตัวต่อแบบเว็บนี้ก็น่าสนดีนะครับ
อยากทำ แต่ไม่รู้จะได้มีเวลาทำเมื่อไหร่ 55555
มัวแต่สนุกกับ animate จนลืม เบื้องหลังฟอนต์ปรกติ
งานเดิมที่ไม่ได้เป็นฟอนต์
(http://img3.f0nt.com/02/9a073a06b07cfdb532c8188e236101c6.jpg)
มันยังไม่ค่อยโดนเท่าไร โดยเฉพาะเส้นขวางที่เราปรับให้เป็นเส้นตั้ง
เลยปรับให้เป็นเส้นพู่กัน แล้วตวัดเชื่อม แทนเส้นขวาง (กลายเป็นฟอนต์ shu เส้นตั้ง)
(http://img3.f0nt.com/02/35049694cdf617610a67214282e8a9ad.jpg)
พอดีเห็น clip เขียน calligraphy ลางเส้นตั้งทั้งหมดก่อน แล้วค่อยลางเส้นขวาง ชอบใจ..
https://www.youtube.com/embed/3zujbQaX35I?start=534 (https://www.youtube.com/embed/3zujbQaX35I?start=534)
นึกถึงงานตัวนี้จึงเอามาปรับกลายฟอนต์ตัวนี้ (ฟอนต์แท่ง และ เฉลย)
(http://img3.f0nt.com/02/6461e330349ad49145c07ad733fc086c.jpg)
แต่จริงๆก็ยังไม่ใช่งานที่อยากทำ งานจริงๆคืองานระหว่างทาง คือต้องเห็นแต่แท่งทั้งคำ ก่อนแล้วค่อยลางเส้นขวาง สุดท้ายจึงเห็นเฉลยว่าเป็นคำว่าอะไร ตัว animate ที่ทำไปยัง ไม่ถึงจุดนี้.. รอ technology ถัดๆไป