ซีรีย์ Photoshop ชุด GoPro ทิปที่ 7 – วิธีการใส่ Font Awesome

Font Awesome เป็น Open-Source ฟอนต์ประเภทไอคอน (แสดงผลเป็นรูปไอคอน ไมใช่ตัวอักษร) ที่มีการใช้งานแพร่หลายในหลายเว็บไซต์ เพราะนอกจากสามารถนำไปใช้ในเชิงพาณิชย์ได้ (Commercial Use) ยังมีไอคอนให้เราเลือกสรรเลือกใช้เป็นร้อยๆ แต่ถ้าหากเราอยากจะนำไอคอนเหล่านี้มาใส่ในไฟล์งาน photoshop (.psd) จะมีวิธีการอยู่ 2 แบบ คือ

1. การใช้งานผ่านไฟล์ฟอนต์: ใช้ได้กับ Photoshop ทุกเวอร์ชั้น รวมทั้ง Illustrator ด้วย
2. การใช้งานผ่าน Extension หรือปลั๊กอินเสริมของ Photoshop: ใช้ได้เฉพาะ Photoshop CC เท่านั้น

โดยจะแบ่งอธิบายในแต่ละวิธีและแจกแจงขั้นตอนดังนี้

วิธีการใช้งานผ่านไฟล์ฟอนต์

1. ดาวน์โหลดไฟล์ฟอนต์ Font Awesome

หน้าเว็บเพื่อดาวน์โหลดฟอนต์ FontAwesome

ให้เราเข้าไปที่เว็บลิงค์ http://fortawesome.github.io/Font-Awesome/ จากนั้นกดเลือกปุ่มดาวน์โหลด

2. ติดตั้งฟอนต์บนเครื่อง

แสดง path ของไฟล์ฟอนต์ที่ต้องติดตั้งบนเครื่อง

ให้เราแตกซิปไฟล์ที่ได้ดาวน์โหลดมา เข้าไปที่ font-awesome-4.5.0> fonts > เลือกไฟล์ FontAwesome.otf

วิธีการติดตั้งฟอนต์แบบลัดของ Windows

 สำหรับ Windows 7 ขึ้นไป การติดตั้งฟอนต์ทำได้โดยง่ายด้วยการคลิกขวาที่ฟอนต์แล้วเลือก Install เป็นอันเสร็จขั้นตอนนี้

3. copy ฟอนต์จากหน้าเว็บ

เลือก copy ไอคอนที่ต้องการใส่ลงในไฟล์งาน

ต่อไปให้เปิดหน้าเว็บ http://fortawesome.github.io/Font-Awesome/cheatsheet/ (แนะนำให้ทำ bookmark ไว้เพื่อความรวดเร็วในการใช้งานครั้งต่อไป) เราจะพบไอคอนเป็นร้อยๆ ให้เราลองเลือกไอคอนที่อยากจะนำไปใส่ในไฟล์ Photoshop โดยการไฮไลต์ที่ไอคอน แล้วกด Ctrl+C

4. Paste ไอคอนลงบนไฟล์งาน

การแสดงผลของไอคอนที่ copy มาจากเว็บในตอนแรก

ที่หน้าต่างไฟล์งาน Photoshop ในเลือกเครื่องมือตัวอักษร (T) จากนั้น Paste ไอคอนที่เรา copy มาจากเว็บไซต์ ไม่ต้องตกใจที่ไอคอนไม่ได้แสดงผลเหมือนกับบนเว็บไซต์

การแสดงผลของไอคอนที่ copy มาจากเว็บหลังเลือกฟอนต์เป็น FontAwesome

ที่ช่องเปลี่ยนฟอนต์ ให้เราพิมพ์หรือเลือกหาฟอนต์ที่ชื่อ FontAwesome ที่เราพึ่งติดตั้งเมื่อสักครู่ ถ้าสำเร็จ เราจะเห็นว่าไอคอนที่ตอนแรกเป็นช่องสี่เหลี่ยมกากบาท จะกลายเป็นไอคอนตามรูปแบบที่เรา copy มาจากหน้าเว็บไซต์แล้วครับ

การย่อขยายไอคอนจะทำได้เหมือนการย่อขยายฟอนต์ตามปกติทั่วไป

วิธีการใช้งานผ่าน Extension

1. ดาวน์โหลด Extension Font Awesome PS

หน้าเว็บดาวน์โหลด Extension Font Awesome PS

เริ่มด้วยให้เข้าไปดาวน์โหลด Extension ‘Font Awesome PS’ ที่เว็บ http://creativedo.co/FontAwesomePS

2. ดาวน์โหลดโปรแกรมติดตั้ง Extension ZXP Installer

ลากไฟล์ลงบนโปรแกรม ZXP Installer เพื่อติดตั้ง Extension

Extension ตัวนี้จำเป็นต้องมีตัว Installer ที่ชื่อว่า ZXP Installer ดังนั้นให้เราเข้าไปที่เว็บ http://zxpinstaller.com/ ดาวน์โหลดแล้วเลือกทำการติดตั้ง

เมื่อติดตั้งเสร็จแล้ว ให้ทำการแตกซิปไฟล์ Extension ที่เราได้จากขั้นตอนที่แล้ว เปิดโปรแกรม ZXP Installer แล้วลากไฟล์ FontAwesomePS_1.1.0 ไปปล่อยบนหน้าต่างของโปรแกรมเพื่อทำการติดตั้ง Extension นี้

3. เลือกฟอนต์ที่ใช้ด้วยการ double คลิก

การเปิดหน้าต่างเพื่อใช้งาน Extension Font Awesome PS บนโปรแกรม Photoshop CC

หลังจากติดตั้ง Extension เรียบร้อยแล้ว ให้เราเรียกหน้าต่างเสริมในโปรแกรม Photoshop โดยเลือก Windows > Extensions > FontAwesome PS

หน้าต่าง Extension Font Awesome PS

การใช้งานก็ง่ายมาก เพียง double คลิกเลือกไอคอนที่เราอยากใส่ลงบนไฟล์งาน photoshop

ไอคอนเป็นประเภทเวคเตอร์ทำให้การย่อขยายไม่สูญเสียความละเอียดของภาพ

ไอคอนนั้นก็จะปรากฎให้เราเห็นทันที่ ส่วนการย่อขยายไอคอนก็สามารถทำได้ด้วยเครื่องมือ Transform ไม่มีปัญหาการสูญเสียความคมชัดของไอคอนแต่อย่างใด เพราะเป็นเวคเตอร์ไอคอน

วิธีที่ 2 นี้จะใช้ได้ใน Photoshop CC เท่านั้นนะครับ บอกย้ำอีกที เผื่อลืม ^^

แบบไหนดีกว่า?

โดยส่วนตัวผมชอบวิธีแรกมากกว่า เพราะการย่อขยายทำได้เหมือนกับการเพิ่มลดขนาดฟอนต์ แล้วก็รวดเร็วกว่าในเรื่องการค้นหาไอคอนที่อยากได้ เพราะพื้นที่การแสดงผลไอคอนในหน้าเว็บมันกว้างกว่าหน้าต่างของ Extension

ยังไงให้ลองทั้งสองวิธีดูนะครับ ชอบหรือถนัดแบบไหนก็เลือกแบบนั้นแหละครับ

ขอให้สนุกกับการออกแบบ UI ที่ไม่ต้องกังวลเรื่องไอคอนอีกต่อไปแล้วครับ