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

Natk

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

 

 

ใน Photoshop CC และ Illustrator CC เวอร์ชั่นอัพเดทล่าสุดปี 2018 นั้นจะมีฟีเจอร์ใหม่ ในเรื่องของ Variable Fonts เข้ามาในโปรแกรมสำหรับใช้งาน โดยในโปรแกรมเองจะมีฟอนต์เริ่มต้นทั้งหมด 6 ตัวด้วยกัน

ก่อนอื่นเราจะมาทำความรู้จักวิธีการใช้งานฟีเจอร์นี้จาก Adobe กันก่อนค่ะ

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

Variable Font
Designil –  Variable Fonts inPhotoshop CC 2018

จากภาพและวิดีโอข้างต้น จะแนะนำฟีเจอร์ใน 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

สำหรับข้อมูลเพิ่มเติม อ่านต่อที่นี่

designil - variable fonts
Designil –  Variable Fonts in photoshop cc

จากภาพข้างต้น ตัวฟอนต์ Serif ตัว Minion Variable Concept เป็นฟอนต์ตัวเดียวที่จะมีให้ปรับ Optical Size ปรับแล้วจะได้ Effect ตามภาพเลยค่ะ

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

ใช้งานได้ หน้าตาคล้ายกันโดยปรับได้ใน Properties

 

จบบทความวิธีการใช้งาน Variable fonts ใน Photoshop สำหรับใครที่ติดตามมาจนถึงภาค 2
อย่าลืมติดตามภาคต่อไปในเวอร์ชั่นของการจัดการ CSS เร็ว ๆ นี้ที่ Designil ค่า

สุดท้ายหากดีไซน์เนอร์ท่านใดต้องการโปรโมตฟอนต์ภาษาไทย Variable fonts สามารถส่งข้อความมาบอกผู้เขียนได้เลยนะคะ :D ยินดีเขียนแนะนำให้ในบทความความถัดไปค่ะ


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

Natk

Natk

UI Specialist ซิดนีย์ ออสเตรเลีย | ประสบการณ์ทำงาน 11 ปี | สนใจเรื่อง User Interface, User Experience, Accessibility, Education | ผู้ก่อตั้งกลุ่มเฟซบุ๊ก Tech ไทยในออสเตรเลีย | ผู้ดูแลเว็บไซต์ Designil
บทความทั้งหมด