Font Awesome เป็น Open-Source ฟอนต์ประเภทไอคอน (แสดงผลเป็นรูปไอคอน ไมใช่ตัวอักษร) ที่มีการใช้งานแพร่หลายในหลายเว็บไซต์ เพราะนอกจากสามารถนำไปใช้ในเชิงพาณิชย์ได้ (Commercial Use) ยังมีไอคอนให้เราเลือกสรรเลือกใช้เป็นร้อยๆ แต่ถ้าหากเราอยากจะนำไอคอนเหล่านี้มาใส่ในไฟล์งาน photoshop (.psd) จะมีวิธีการอยู่ 2 แบบ คือ
โดยจะแบ่งอธิบายในแต่ละวิธีและแจกแจงขั้นตอนดังนี้
หน้าเว็บเพื่อดาวน์โหลดฟอนต์ FontAwesome
ให้เราเข้าไปที่เว็บลิงค์ http://fortawesome.github.io/Font-Awesome/ จากนั้นกดเลือกปุ่มดาวน์โหลด
แสดง path ของไฟล์ฟอนต์ที่ต้องติดตั้งบนเครื่อง
ให้เราแตกซิปไฟล์ที่ได้ดาวน์โหลดมา เข้าไปที่ font-awesome-4.5.0> fonts > เลือกไฟล์ FontAwesome.otf
วิธีการติดตั้งฟอนต์แบบลัดของ Windows
สำหรับ Windows 7 ขึ้นไป การติดตั้งฟอนต์ทำได้โดยง่ายด้วยการคลิกขวาที่ฟอนต์แล้วเลือก Install เป็นอันเสร็จขั้นตอนนี้
เลือก copy ไอคอนที่ต้องการใส่ลงในไฟล์งาน
ต่อไปให้เปิดหน้าเว็บ http://fortawesome.github.io/Font-Awesome/cheatsheet/ (แนะนำให้ทำ bookmark ไว้เพื่อความรวดเร็วในการใช้งานครั้งต่อไป) เราจะพบไอคอนเป็นร้อยๆ ให้เราลองเลือกไอคอนที่อยากจะนำไปใส่ในไฟล์ Photoshop โดยการไฮไลต์ที่ไอคอน แล้วกด Ctrl+C
การแสดงผลของไอคอนที่ copy มาจากเว็บในตอนแรก
ที่หน้าต่างไฟล์งาน Photoshop ในเลือกเครื่องมือตัวอักษร (T) จากนั้น Paste ไอคอนที่เรา copy มาจากเว็บไซต์ ไม่ต้องตกใจที่ไอคอนไม่ได้แสดงผลเหมือนกับบนเว็บไซต์
การแสดงผลของไอคอนที่ copy มาจากเว็บหลังเลือกฟอนต์เป็น FontAwesome
ที่ช่องเปลี่ยนฟอนต์ ให้เราพิมพ์หรือเลือกหาฟอนต์ที่ชื่อ FontAwesome ที่เราพึ่งติดตั้งเมื่อสักครู่ ถ้าสำเร็จ เราจะเห็นว่าไอคอนที่ตอนแรกเป็นช่องสี่เหลี่ยมกากบาท จะกลายเป็นไอคอนตามรูปแบบที่เรา copy มาจากหน้าเว็บไซต์แล้วครับ
การย่อขยายไอคอนจะทำได้เหมือนการย่อขยายฟอนต์ตามปกติทั่วไป
หน้าเว็บดาวน์โหลด Extension Font Awesome PS
เริ่มด้วยให้เข้าไปดาวน์โหลด Extension ‘Font Awesome PS’ ที่เว็บ http://creativedo.co/FontAwesomePS
ลากไฟล์ลงบนโปรแกรม ZXP Installer เพื่อติดตั้ง Extension
Extension ตัวนี้จำเป็นต้องมีตัว Installer ที่ชื่อว่า ZXP Installer ดังนั้นให้เราเข้าไปที่เว็บ http://zxpinstaller.com/ ดาวน์โหลดแล้วเลือกทำการติดตั้ง
เมื่อติดตั้งเสร็จแล้ว ให้ทำการแตกซิปไฟล์ Extension ที่เราได้จากขั้นตอนที่แล้ว เปิดโปรแกรม ZXP Installer แล้วลากไฟล์ FontAwesomePS_1.1.0 ไปปล่อยบนหน้าต่างของโปรแกรมเพื่อทำการติดตั้ง Extension นี้
การเปิดหน้าต่างเพื่อใช้งาน Extension Font Awesome PS บนโปรแกรม Photoshop CC
หลังจากติดตั้ง Extension เรียบร้อยแล้ว ให้เราเรียกหน้าต่างเสริมในโปรแกรม Photoshop โดยเลือก Windows > Extensions > FontAwesome PS
หน้าต่าง Extension Font Awesome PS
การใช้งานก็ง่ายมาก เพียง double คลิกเลือกไอคอนที่เราอยากใส่ลงบนไฟล์งาน photoshop
ไอคอนเป็นประเภทเวคเตอร์ทำให้การย่อขยายไม่สูญเสียความละเอียดของภาพ
ไอคอนนั้นก็จะปรากฎให้เราเห็นทันที่ ส่วนการย่อขยายไอคอนก็สามารถทำได้ด้วยเครื่องมือ Transform ไม่มีปัญหาการสูญเสียความคมชัดของไอคอนแต่อย่างใด เพราะเป็นเวคเตอร์ไอคอน
วิธีที่ 2 นี้จะใช้ได้ใน Photoshop CC เท่านั้นนะครับ บอกย้ำอีกที เผื่อลืม ^^
โดยส่วนตัวผมชอบวิธีแรกมากกว่า เพราะการย่อขยายทำได้เหมือนกับการเพิ่มลดขนาดฟอนต์ แล้วก็รวดเร็วกว่าในเรื่องการค้นหาไอคอนที่อยากได้ เพราะพื้นที่การแสดงผลไอคอนในหน้าเว็บมันกว้างกว่าหน้าต่างของ Extension
ยังไงให้ลองทั้งสองวิธีดูนะครับ ชอบหรือถนัดแบบไหนก็เลือกแบบนั้นแหละครับ
ขอให้สนุกกับการออกแบบ UI ที่ไม่ต้องกังวลเรื่องไอคอนอีกต่อไปแล้วครับ