สอนเทคนิคน่ารู้ ซีรีย์ Photoshop ชุด GoPro ทิปที่ 7 – วิธีการใส่ Font Awesome By uiblogaziner December 7, 20152562 views ShareTweet 0 Font Awesome เป็น Open-Source ฟอนต์ประเภทไอคอน (แสดงผลเป็นรูปไอคอน ไมใช่ตัวอักษร) ที่มีการใช้งานแพร่หลายในหลายเว็บไซต์ เพราะนอกจากสามารถนำไปใช้ในเชิงพาณิชย์ได้ (Commercial Use) ยังมีไอคอนให้เราเลือกสรรเลือกใช้เป็นร้อยๆ แต่ถ้าหากเราอยากจะนำไอคอนเหล่านี้มาใส่ในไฟล์งาน photoshop (.psd) จะมีวิธีการอยู่ 2 แบบ คือ การใช้งานผ่านไฟล์ฟอนต์: ใช้ได้กับ Photoshop ทุกเวอร์ชั้น รวมทั้ง Illustrator ด้วย การใช้งานผ่าน 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 ที่ไม่ต้องกังวลเรื่องไอคอนอีกต่อไปแล้วครับ
ซีรีย์ Photoshop ชุด GoPro ทิปที่ 6 – สร้าง Stroke 5 ชั้น ด้วย 1 เลเยอร์ By uiblogazinerJune 18, 20150