วิธีการใช้ Variable Fonts ใน Photoshop CC 2018

สอนการใช้งาน Variable fonts ใน Photoshop CC 2018 ฟอนต์ที่ยืดหดได้ภายในตัวเดียว ซึ่งหากใครยังไม่เข้าใจพื้นฐานและความหมายของ Variable fonts สามารถกลับไปอ่านบทความแรกได้ที่ Variable fonts กับอนาคตของการออกแบบเว็บไซต์     ใน Photoshop CC และ Illustrator CC เวอร์ชั่นอัพเดทล่าสุดปี 2018 นั้นจะมีฟีเจอร์ใหม่ ในเรื่องของ Variable Fonts เข้ามาในโปรแกรมสำหรับใช้งาน โดยในโปรแกรมเองจะมีฟอนต์เริ่มต้นทั้งหมด 6 ตัวด้วยกัน ก่อนอื่นเราจะมาทำความรู้จักวิธีการใช้งานฟีเจอร์นี้จาก Adobe กันก่อนค่ะ

ตัวอย่างการใช้งาน Variable fonts Photoshop CC 2018

https://www.youtube.com/watch?v=ch8neQEPuIA [caption id="attachment_7438" align="aligncenter" width="1000"] Designil -  Variable Fonts inPhotoshop CC 2018[/caption] จากภาพและวิดีโอข้างต้น จะแนะนำฟีเจอร์ใน Photoshop CC 2018 ที่จะมีให้เลือก Variable Fonts ในแถบของ Window > Properties วิธีการใช้งานง่าย ๆ เลยคือหากเราพิมพ์คำว่า Variable ในช่องของ Properties Photoshop CC จะมีฟอนต์มาให้เลือก 2 ประเภทหลัก และรายชื่อของฟอนต์ที่ใช้งานได้ มีอยู่ด้านล่างดังต่อไปนี้

Sans Serif Fonts

1. Acumin Variable Concept  ( 90 named instances ) Properties ที่สามารถปรับได้ : Weight, Width, Slant 2. Myriad Variable Concept Weight, Width 3. Source Code Variable Weight 4. Source Sans Variable Weight

Serif Fonts

1. Minion Variable Concept Weight, Optical Size 2. Source Serif Variable Weight

ความหมายใน Properties ของ Variable Fonts

โดย Properties ที่มีมาให้เราปรับหลัก ๆ มีอยู่ 4 ตัวด้วยกันคือ Weight, Width, Slant และ Optical Size เราจะมาอธิบายเพิ่มเติมของแต่ละตัวว่าทำงานแตกต่างกันอย่างไร

Weight

ภาษาไทยอธิบายง่าย ๆ ว่าไว้คือความกว้างของ stroke (เส้นขอบ) ของตัวฟอนต์ เทียบจากฟอนต์ประเภทเดิมมันก็คือส่วนของ Light, Regular, Book, Demi, Heavy, Black, และ Extra Bold

Width

ให้ดูสูงหรือว่าจะเป็นตัวกว้าง ๆ ตามแนวนอน เช่น Condensed, Normal, Extended

Slant

คือปรับตั้งแต่ตัว Roman ไปจนถึงตัวเอียง (Italic)

Optical Size

จะมีแค่ในตัว Serif คือการปรับสไตล์ของฟอนต์แต่ละตัวเพื่อให้เข้ากับพื้นที่ที่จะแสดงผล ขึ้นอยู่กับประเภทกับเนื้อหาที่เราจะนำไปแสดงผล บางชื่อที่คุ้นหูที่ใช้งานกันเป็นประจำ ตัวอย่างเช่น Micro, Text, Deck, Display, Headline, Banner, Big อธิบายแบบบ้าน ๆ คือ ฟอนต์แบบ Serif บางตัววางเป็นฟอนต์ตัวเล็กขนาดตัวหนังสือ 13pt หน้าตาจะอ่านไม่ออกเพราะลักษณะหน้าตาขายืดยาว บางตัวก็ดูแน่นเพราะถูกออกแบบมาให้เหมาะกับใช้งานสำหรับตัวหนังสือขนาดใหญ่เท่านั้น ดังนั้นก็เลยต้องปรับหน้าตาของฟอนต์ Optical Size ให้ลักษณะของตัวฟอนต์อ่านง่ายขึ้นหากจะแสดงผลในขนาดตัวหนังสือที่ 13pt สำหรับข้อมูลเพิ่มเติม อ่านต่อที่นี่ [caption id="attachment_7440" align="aligncenter" width="640"] Designil -  Variable Fonts in photoshop cc[/caption] จากภาพข้างต้น ตัวฟอนต์ Serif ตัว Minion Variable Concept เป็นฟอนต์ตัวเดียวที่จะมีให้ปรับ Optical Size ปรับแล้วจะได้ Effect ตามภาพเลยค่ะ

Illustrator ใช้งานได้หรือไม่ ?

ใช้งานได้ หน้าตาคล้ายกันโดยปรับได้ใน Properties   จบบทความวิธีการใช้งาน Variable fonts ใน Photoshop สำหรับใครที่ติดตามมาจนถึงภาค 2 อย่าลืมติดตามภาคต่อไปในเวอร์ชั่นของการจัดการ CSS เร็ว ๆ นี้ที่ Designil ค่า สุดท้ายหากดีไซน์เนอร์ท่านใดต้องการโปรโมตฟอนต์ภาษาไทย Variable fonts สามารถส่งข้อความมาบอกผู้เขียนได้เลยนะคะ :D ยินดีเขียนแนะนำให้ในบทความความถัดไปค่ะ

---

ขอบคุณเนื้อหาจาก

• http://thinkingwithtype.com/letter/
• https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts/
• http://www.proximasoftware.com/fontexpert/terms/
• https://blog.typekit.com/2017/10/19/new-variable-fonts-from-adobe-originals/