วิธีทำ App Icon ใน Adobe XD

วิธีทำ App Icon ใน Adobe XD

Adobe XD เป็นโปรแกรมที่ใช้ในการออกแบบและสร้างส่วนติดต่อผู้ใช้ (Graphic User Interface) มันสามารถสร้างการคลิกปุ่ม การเปลี่ยนหน้า คร่าวๆ ได้ ซึ่งสามารถนำไปใช้ในการสร้าง Prototype ต้นแบบ และยังสามารถนำมาใช้ทำ App Icon ใน Adobe XD ได้ด้วย

ในตอนนี้เราจะมาสร้าง App Icon โดยใช้ Adobe XD กันครับ

ขั้นตอน

1 เปิดโปรแกรม Adobe XD แล้วเลือก Custom size จากนั้น กำหนดค่าความกว้างและความสูงให้เป็นสี่เหลี่ยมจตุรัส ตามตัวอย่างจะใช้ 1024 X 1024

2. ในโปรแกรม Adobe XD ให้ใช้เครื่องมือต่างๆ วาด App Icon ที่เราต้องการลงไป

3 เมื่อ วาดเสร็จ ให้คลิกที่ปุ่ม Plug inด้านล่าง แล้วคลิกที่เครื่องหมาย +เพื่อติดตั้ง Plugin

4 หน้าต่าง Plug in จะแสดงขึ้น ให้คลิก Search icon

5. ให้พิมพ์ App icon generator แล้วคลิก search เมื่อผลการค้นหาแสดงขึ้นมา จะเห็น plugin App Icon Generator ให้คลิก install

6 เมื่อติดตั้งเสร็จสมบูรณ์แล้ว Plugin จะแสดงใน Tab plugin ให้เราเลือกใช้ได้

7 เราจะใช้ Plugin ในการ Export Icon โดยให้ลากครอบเลือกวัตถุทั้งหมดของเราก่อน จากนั้นคลิกที่ Plug in จะมีช่องให้กรอกข้อมูล เราก็ทำการกรอกข้อมูล Path ที่จะ save ชื่อโปรเจ็ค แล้วทำการเลือก Platform จากนั้นคลิก Export

8. เมื่อ Export  เสร็จ ระบบจะแสดงข้อความว่าเสร็จสมบูรณ์ แล้ว

9 เมื่อเราไปยัง folder ที่เรากำหนดให้ save จะเห็นว่า โปรแกรมจะสร้าง folder แยก platform ไว้ให้ตาม platform ที่เราเลือกไว้ เมื่อเราเข้าไปดูใน folder ก็จะเห็นว่า มี icon ขนาดต่างๆ ได้ถูกสร้างไว้ให้เรียบร้อยแล้วครับ

ส่งท้าย

ในตอนนี้เราก็ได้เรียนรู้วิธีทำ App Icon โดยใช้ Adobe XD จะเห็นว่ามีความสะดวกในการ Export Icon เป็นขนาดต่างๆมาก ช่วยประหยัดเวลาที่เราจะต้องมาทำทีละอัน ก็หวังว่าบทความนี้จะเป็นประโยชน์แก่ผุ้อ่านกันนะครับ แล้วพบกันใหม่ สวัสดีครับ

Download Adobe XD ฟรี

Adobe XD

ติดตามบทความด้าน GUI

บทความด้าน GUI ใน Mifasoft.com