[วิดีโอ] วิธีทำรูปไอคอน Do Don’t ใช้เองง่ายๆ Adobe Xd – สำหรับมือใหม่
หากเราอยากสร้าง รูปไอคอน ใช้เองง่ายๆ เช่น ไอคอน Do-Don’t หรือ ไอคอน บวก-ลบ
อาจจะเอาไปใช้ในการทำพรีเซนต์ PowerPoint
หรือ เอาไปใส่ในรูป banner โฆษณา ทำ Infographic ไรงี้ ก็ใช้ได้ค่ะ
เราสามารถทำเองได้ง่ายๆ เลยนะคะ
ด้วยโปรแกรมอะไรก็ได้ที่ใช้วาด สี่เหลี่ยม วงกลม ใส่สี แล้ว save ออกมาเป็นไฟล์รูปภาพได้
ในคลิปนี้ยุ้ยใช้โปรแกรม Adobe Xd สาธิตวิธีการทำให้ดูนะคะ
ที่จริงเราจะใช้โปแกรมอะไรก็ได้นะคะ ให้ดูว่า
- เครื่องมือ สร้างรูปทรงที่เราต้องการได้มั้ย
- export/save เป็นไฟล์ที่เราจะเอาไปใช้ได้มั้ย
// ใช้ Figma, Illustrator ก็ได้จ้า (ตอนนี้ Xd ไม่ฟรีแล้ว)
// ทำใช้เองง่ายๆ ใช้ PowerPoint ก็ได้นะคะ
วิธีทำ ใช้หลักการเดียวกัน
คือ สร้างสี่เหลี่ยม ใส่ความสูง ความกว้าง ก๊อปแปะ แล้วก็หมุน ใส่สี จบปิ๊ง!
ประเภทไฟล์
- .jpg .png แบบง่ายๆ ใช้เอง ทำ icon เป็นรูปภาพ (แนะนำขนาด x2 ขึ้นไป เพื่อจอ HD)
- .ico แบบจริงจัง ทำ icon เป็น icon ใช้กับคอม เช่น ไอคอนโฟลเดอร์ ใน Windows
- .svg แบบจริงจัง ใช้บนเว็บ ทำ icon เป็น Icon Font (ต้องแปลงไฟล์ และใช้เครื่องมือ/โค้ดเพื่อเรียกใช้งาน)
แนะนำให้ทำไฟล์ ขนาด x2 เพื่อรองรับ HD
จะทำให้เวลาไปใช้งานจริง แสดงผลได้คมชัดบนหน้าจอมือถือรุ่นใหม่ๆ จอคอมที่เป็น Full HD
- เช่น ต้องการแสดงผลที่ ขนาด 100 pixel
- ก็ให้ทำรูปไอคอน ขนาด 200 pixel ค่ะ
ปล. มือถือรุ่นใหม่ๆ หน้าจอ HD x3 x4 กันไปแล้ว ถ้าเราทำ x2 แล้วยังดูไม่คมชัด ก็ให้ทำ x3 ดูค่ะว่าใช้ได้มั้ย (เท่าที่พี่ยุ้ยใช้มา x2 ก็เพียงพอแล้วค่ะ)
การเซฟไฟล์ เพื่อนำไปใช้ (แบบรูปภาพ)
- Adobe Xd ให้สร้าง Artboards แยกไอคอนทีละตัว แล้ว export เป็น .jpg .png .svg ได้เลยค่ะ
- Figma ก็ใช้ Frames นะ แล้ว export เหมือนกันค่ะ
- แล้วก็ ตั้งชื่อไฟล์ให้เรียบร้อย เป็นอันเสร็จพร้อมนำไปใช้ได้เลยจ้า
// ทำปกวิดีโอ พี่ยุ้ยใช้เวลานานกว่าตอนทำ icon อีกล่ะ อิอิ 😅
วิดีโอและผู้สอน : Webmonster Lab | Yui Kanchita
